Merge branch 'main' into j-s/fix-thgf-for-court-name

apps/judicial-system/web/src/routes/Court/components/ReceptionAndAssignment/ReceptionAndAssignment.tsx

@@ -19,6 +19,7 @@ import {
   PageLayout,
   PageTitle,
 } from '@island.is/judicial-system-web/src/components'
+import { ProsecutorAndDefendantsEntries } from '@island.is/judicial-system-web/src/components/CaseInfo/CaseInfo'
 import { Gender } from '@island.is/judicial-system-web/src/graphql/schema'
 import { getDefendantPleaText } from '@island.is/judicial-system-web/src/utils/utils'
 import { isReceptionAndAssignmentStepValid } from '@island.is/judicial-system-web/src/utils/validate'
@@ -113,7 +114,9 @@ const ReceptionAndAssignment = () => {
             </Box>
           )}
         <PageTitle>{formatMessage(strings.title)}</PageTitle>
-        <CourtCaseInfo workingCase={workingCase} />
+        <Box component="section" marginBottom={5}>
+          <ProsecutorAndDefendantsEntries workingCase={workingCase} />
+        </Box>
         <Box component="section" marginBottom={6}>
           <CourtCaseNumber />
         </Box>

libs/application/core/src/lib/fieldBuilders.ts

@@ -992,6 +992,8 @@ export const buildSliderField = (
     onChangeEnd,
     labelMultiplier = 1,
     saveAsString,
+    textColor,
+    progressOverlayColor,
     marginTop,
     marginBottom,
   } = data
@@ -1021,6 +1023,8 @@ export const buildSliderField = (
     onChangeEnd,
     labelMultiplier,
     saveAsString,
+    textColor,
+    progressOverlayColor,
     marginTop,
     marginBottom,
   }

libs/application/templates/parental-leave/src/fields/Duration/Duration.tsx

@@ -138,7 +138,7 @@ export const Duration: FC<React.PropsWithChildren<FieldBaseProps>> = ({
 
       <Box
         background="blue100"
-        paddingTop={6}
+        paddingTop={1}
         paddingBottom={4}
         paddingX={3}
         marginTop={3}

libs/application/templates/reference-template/src/forms/exampleForm/simpleInputsSection/sliderSubsection.ts

@@ -1,133 +1,255 @@
 import {
+  buildDividerField,
   buildMultiField,
   buildSliderField,
   buildSubSection,
+  buildTitleField,
 } from '@island.is/application/core'
+import { theme } from '@island.is/island-ui/theme'
 
 export const sliderSubsection = buildSubSection({
   id: 'sliderSubsection',
   title: 'Slider Field',
   children: [
     buildMultiField({
-      id: 'slider',
+      id: 'basicSlider1',
       title: '',
       children: [
+        buildTitleField({ title: 'Minimal slider field' }),
         buildSliderField({
           id: 'basicSlider',
           title: 'Basic slider',
           min: 1,
           max: 10,
-          trackStyle: { gridTemplateRows: 5 },
+        }),
+        buildDividerField({ useDividerLine: false }),
+
+        buildTitleField({
+          title: 'Minimal slider field without default background',
+        }),
+        buildSliderField({
+          id: 'basicSliderWithDefaultBackground',
+          title: 'Basic slider',
+          min: 1,
+          max: 10,
+          showRemainderOverlay: false,
+        }),
+        buildDividerField({ useDividerLine: false }),
+
+        buildTitleField({
+          title: 'Minimal slider field with custom background',
+        }),
+        buildSliderField({
+          id: 'basicSliderWithCustomBackground',
+          title: 'Basic slider',
+          min: 1,
+          max: 10,
+          showRemainderOverlay: false,
           calculateCellStyle: () => {
             return {
-              background: 'ccccd8',
+              background: theme.color.black,
             }
           },
+        }),
+        buildDividerField({ useDividerLine: false }),
+
+        buildTitleField({ title: 'Minimal slider field with tooltip' }),
+        buildSliderField({
+          id: 'basicSliderTooltip',
+          title: 'Basic slider',
+          min: 1,
+          max: 10,
+          showToolTip: true,
           label: {
             singular: 'day',
             plural: 'days',
           },
         }),
+        buildDividerField({ useDividerLine: false }),
+
+        buildTitleField({ title: 'Thick slider field with tooltip' }),
         buildSliderField({
-          id: 'basicSliderWithLabels',
-          title: 'Slider with labels',
+          id: 'thickSliderTooltip',
+          title: 'Basic slider',
           min: 1,
           max: 10,
-          trackStyle: { gridTemplateRows: 5 },
+          trackStyle: { gridTemplateRows: 16 },
+          showToolTip: true,
+          label: {
+            singular: 'day',
+            plural: 'days',
+          },
+        }),
+        buildDividerField({ useDividerLine: false }),
+
+        buildTitleField({
+          title: 'Slider field with different colors and label',
+        }),
+        buildSliderField({
+          id: 'basicSliderColorLabels',
+          title: 'Basic slider',
+          min: 1,
+          max: 10,
+          textColor: theme.color.red600,
+          progressOverlayColor: theme.color.yellow600,
+          showLabel: true,
+          label: {
+            singular: 'day',
+            plural: 'days',
+          },
           calculateCellStyle: () => {
             return {
-              background: 'ccccd8',
+              background: theme.color.red600,
             }
           },
+        }),
+        buildDividerField({ useDividerLine: false }),
+
+        buildTitleField({
+          title: 'Slider field with different colors, label and tooltip',
+        }),
+        buildSliderField({
+          id: 'basicSliderColorLabelsAndTooltip',
+          title: 'Basic slider',
+          min: 1,
+          max: 10,
+          textColor: theme.color.red600,
+          progressOverlayColor: theme.color.yellow600,
+          showLabel: true,
+          showToolTip: true,
           label: {
             singular: 'day',
             plural: 'days',
           },
-          showMinMaxLabels: true,
-          showLabel: true,
-          showToolTip: true,
+        }),
+        buildDividerField({ useDividerLine: false }),
+
+        buildTitleField({
+          title: 'Slider field with different colors and min max label',
         }),
         buildSliderField({
-          id: 'basicSliderWithProgressOverlay',
-          title: 'Slider with progress overlay',
+          id: 'basicSliderColorMinMaxLabels',
+          title: 'Basic slider',
           min: 1,
           max: 10,
-          trackStyle: { gridTemplateRows: 5 },
-          calculateCellStyle: () => {
-            return {
-              background: 'ccccd8',
-            }
+          textColor: theme.color.red600,
+          progressOverlayColor: theme.color.yellow600,
+          showMinMaxLabels: true,
+          label: {
+            singular: 'day',
+            plural: 'days',
           },
+        }),
+        buildDividerField({ useDividerLine: false }),
+
+        buildTitleField({
+          title:
+            'Slider field with different colors, min max label and tooltip',
+        }),
+        buildSliderField({
+          id: 'basicSliderColorMinMaxLabelsTooltip',
+          title: 'Basic slider',
+          min: 1,
+          max: 10,
+          textColor: theme.color.red600,
+          progressOverlayColor: theme.color.yellow600,
+          showMinMaxLabels: true,
+          showToolTip: true,
           label: {
             singular: 'day',
             plural: 'days',
           },
-          showRemainderOverlay: true,
-          showProgressOverlay: true,
+        }),
+        buildDividerField({ useDividerLine: false }),
+
+        buildTitleField({
+          title: 'Slider field with different colors and both labels',
         }),
         buildSliderField({
-          id: 'basicSliderRangeDates',
-          title: 'Slider with range dates',
+          id: 'basicSliderColorBothLabels',
+          title: 'Basic slider',
           min: 1,
           max: 10,
-          trackStyle: { gridTemplateRows: 5 },
-          calculateCellStyle: () => {
-            return {
-              background: 'ccccd8',
-            }
+          textColor: theme.color.red600,
+          progressOverlayColor: theme.color.yellow600,
+          showLabel: true,
+          showMinMaxLabels: true,
+          label: {
+            singular: 'day',
+            plural: 'days',
           },
+        }),
+        buildDividerField({ useDividerLine: false }),
+
+        buildTitleField({
+          title: 'Slider field with different colors and all labels',
+        }),
+        buildSliderField({
+          id: 'basicSliderAllLabels',
+          title: 'Basic slider',
+          min: 1,
+          max: 10,
+          textColor: theme.color.purple400,
+          progressOverlayColor: theme.color.red400,
+          showLabel: true,
+          showMinMaxLabels: true,
+          showToolTip: true,
           label: {
             singular: 'day',
             plural: 'days',
           },
           rangeDates: {
             start: {
-              date: '2024-01-01',
+              date: new Date('2024-01-01'),
               message: 'Start date',
             },
             end: {
-              date: '2024-01-10',
+              date: new Date('2024-01-10'),
               message: 'End date',
             },
           },
-          showToolTip: true,
+        }),
+        buildDividerField({ useDividerLine: false }),
+
+        buildTitleField({
+          title:
+            'Slider field with different colors, all labels and different default value',
         }),
         buildSliderField({
-          id: 'basicSliderWithSteps',
-          title: 'Slider with steps',
-          min: 1,
-          max: 10,
+          id: 'basicSliderAllLabelsDefaultValue',
+          title: 'Basic slider',
+          min: 6,
+          max: 12,
+          defaultValue: 6,
+          currentIndex: 6,
           step: 2,
-          trackStyle: { gridTemplateRows: 5 },
-          calculateCellStyle: () => {
-            return {
-              background: 'ccccd8',
-            }
-          },
+          textColor: theme.color.purple400,
+          progressOverlayColor: theme.color.red400,
+          showLabel: true,
+          showMinMaxLabels: true,
+          showToolTip: true,
           label: {
             singular: 'day',
             plural: 'days',
           },
-        }),
-
-        buildSliderField({
-          id: 'thickSlider',
-          title: 'Thick slider',
-          min: 0,
-          max: 100,
-          step: 1,
-          label: {
-            singular: 'day',
-            plural: 'days',
+          rangeDates: {
+            start: {
+              date: new Date('2024-01-06'),
+              message: 'Start date',
+            },
+            end: {
+              date: new Date('2024-01-12'),
+              message: 'End date',
+            },
           },
-          defaultValue: 5,
-          trackStyle: { gridTemplateRows: 200 },
           calculateCellStyle: () => {
             return {
-              background: 'ccccd8',
+              background: theme.color.blue200,
             }
           },
+          saveAsString: true,
         }),
+        buildDividerField({ useDividerLine: false }),
       ],
     }),
   ],

libs/application/types/src/lib/Fields.ts

@@ -763,23 +763,23 @@ export interface SliderField extends BaseField {
   step?: number
   snap?: boolean
   trackStyle?: CSSProperties
-  calculateCellStyle: (index: number) => CSSProperties
+  calculateCellStyle?: (index: number) => CSSProperties
   showLabel?: boolean
   showMinMaxLabels?: boolean
   showRemainderOverlay?: boolean
   showProgressOverlay?: boolean
   showToolTip?: boolean
-  label: {
+  label?: {
     singular: FormText
     plural: FormText
   }
   rangeDates?: {
     start: {
-      date: string
+      date: string | Date
       message: string
     }
     end: {
-      date: string
+      date: string | Date
       message: string
     }
   }
@@ -789,6 +789,8 @@ export interface SliderField extends BaseField {
   labelMultiplier?: number
   id: string
   saveAsString?: boolean
+  textColor?: Colors
+  progressOverlayColor?: Colors
 }
 
 export interface DisplayField extends BaseField {