fix(application-system): Refactoring half of divider field into a new field

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

@@ -47,6 +47,8 @@ import {
   FieldsRepeaterField,
   AccordionField,
   BankAccountField,
+  TitleField,
+  TitleVariants,
 } from '@island.is/application/types'
 import { Locale } from '@island.is/shared/types'
 import { Colors } from '@island.is/island-ui/theme'
@@ -397,19 +399,43 @@ export const buildFileUploadField = (
 
 export const buildDividerField = (data: {
   condition?: Condition
-  title?: FormText
-  color?: Colors
+  useDividerLine?: boolean
   marginBottom?: BoxProps['marginBottom']
   marginTop?: BoxProps['marginTop']
 }): DividerField => {
-  const { title, color, condition, marginTop, marginBottom } = data
+  const { useDividerLine = true, condition, marginTop, marginBottom } = data
   return {
     id: '',
     children: undefined,
     type: FieldTypes.DIVIDER,
     component: FieldComponents.DIVIDER,
     doesNotRequireAnswer: true,
+    title: '',
+    useDividerLine,
+    condition,
+    marginTop,
+    marginBottom,
+  }
+}
+
+export const buildTitleField = (data: {
+  condition?: Condition
+  title?: FormText
+  titleVariant?: TitleVariants
+  color?: Colors
+  marginBottom?: BoxProps['marginBottom']
+  marginTop?: BoxProps['marginTop']
+}): TitleField => {
+  const { title, titleVariant, color, condition, marginTop, marginBottom } =
+    data
+  return {
+    id: '',
+    children: undefined,
+    type: FieldTypes.TITLE,
+    component: FieldComponents.TITLE,
+    doesNotRequireAnswer: true,
     title: title ?? '',
+    titleVariant: titleVariant,
     color,
     condition,
     marginTop,
@@ -428,6 +454,8 @@ export const buildKeyValueField = (data: {
   paddingX?: BoxProps['padding']
   paddingY?: BoxProps['padding']
   paddingBottom?: BoxProps['padding']
+  marginTop?: BoxProps['marginTop']
+  marginBottom?: BoxProps['marginBottom']
 }): KeyValueField => {
   const {
     label,
@@ -440,6 +468,8 @@ export const buildKeyValueField = (data: {
     paddingX,
     paddingY,
     paddingBottom,
+    marginTop,
+    marginBottom,
   } = data
 
   return {
@@ -459,6 +489,8 @@ export const buildKeyValueField = (data: {
     paddingX,
     paddingY,
     paddingBottom,
+    marginTop,
+    marginBottom,
   }
 }
 

libs/application/templates/aosh/change-machine-supervisor/src/forms/ChangeMachineSupervisorForm/InformationSection/supervisorSubSection.ts

@@ -1,12 +1,12 @@
 import {
   buildCheckboxField,
-  buildDividerField,
   buildMultiField,
   buildNationalIdWithNameField,
   buildPhoneField,
   buildSubSection,
   buildSubmitField,
   buildTextField,
+  buildTitleField,
   getValueViaPath,
 } from '@island.is/application/core'
 import { information } from '../../../lib/messages'
@@ -73,7 +73,7 @@ export const supervisorSubSection = buildSubSection({
           },
           required: true,
         }),
-        buildDividerField({
+        buildTitleField({
           title: location.general.title,
           color: 'black',
         }),

libs/application/templates/aosh/street-registration/src/forms/StreetRegistrationForm/InformationSection/machineSubSection.ts

@@ -4,8 +4,8 @@ import {
   buildTextField,
   buildDateField,
   buildSubSection,
-  buildDividerField,
   buildPhoneField,
+  buildTitleField,
 } from '@island.is/application/core'
 import { information } from '../../../lib/messages'
 import { getSelectedMachine } from '../../../utils/getSelectedMachine'
@@ -117,8 +117,9 @@ export const machineSubSection = buildSubSection({
           },
           defaultValue: new Date().toISOString().substring(0, 10),
         }),
-        buildDividerField({
+        buildTitleField({
           title: information.general.dividerTitle,
+          color: 'blue400',
         }),
         buildTextField({
           id: 'contact.name',

libs/application/templates/document-provider-onboarding/src/forms/DocumentProviderApplication.ts

@@ -4,10 +4,10 @@ import {
   buildSection,
   buildTextField,
   buildSubmitField,
-  buildDividerField,
   buildDescriptionField,
   buildCheckboxField,
   buildLinkField,
+  buildTitleField,
 } from '@island.is/application/core'
 import { Form, ApplicationTypes, FormModes } from '@island.is/application/types'
 import { m } from '../lib/messages'
@@ -184,8 +184,7 @@ export const DocumentProviderOnboarding: Form = buildForm({
           title: m.confirmationTitle,
           description: m.confirmationSubTitle,
           children: [
-            //Error in dev tools, missing keys on divider fields...
-            buildDividerField({
+            buildTitleField({
               title: m.applicantSection,
               color: 'currentColor',
             }),
@@ -213,8 +212,7 @@ export const DocumentProviderOnboarding: Form = buildForm({
               format: '###-####',
               placeholder: m.applicantPhoneNumberPlaceholder,
             }),
-            //Error in dev tools, missing keys on divider fields...
-            buildDividerField({
+            buildTitleField({
               title: m.administrativeContactSection,
               color: 'currentColor',
             }),
@@ -236,8 +234,7 @@ export const DocumentProviderOnboarding: Form = buildForm({
               format: '###-####',
               placeholder: m.administrativeContactPhoneNumberPlaceholder,
             }),
-            //Error in dev tools, missing keys on divider fields...
-            buildDividerField({
+            buildTitleField({
               title: m.technicalContactSection,
               color: 'currentColor',
             }),
@@ -259,8 +256,7 @@ export const DocumentProviderOnboarding: Form = buildForm({
               format: '###-####',
               placeholder: m.technicalContactPhoneNumberPlaceHolder,
             }),
-            //Error in dev tools, missing keys on divider fields...
-            buildDividerField({
+            buildTitleField({
               title: m.helpDeskSection,
               color: 'currentColor',
             }),

libs/application/templates/document-provider-onboarding/src/forms/ReviewApplication.ts

@@ -1,11 +1,11 @@
 import {
-  buildDividerField,
   buildForm,
   buildMultiField,
   buildSection,
   buildDescriptionField,
   buildTextField,
   buildSubmitField,
+  buildTitleField,
 } from '@island.is/application/core'
 import {
   Form,
@@ -28,8 +28,7 @@ export const ReviewApplication: Form = buildForm({
           id: 'review',
           title: m.reviewTitle,
           children: [
-            //Error in dev tools, missing keys on divider fields...
-            buildDividerField({ title: m.applicantTitle }),
+            buildTitleField({ title: m.applicantTitle, color: 'blue400' }),
             buildTextField({
               id: 'applicant.nationalId',
               title: m.applicantNationalId,
@@ -52,9 +51,9 @@ export const ReviewApplication: Form = buildForm({
               format: '###-####',
               placeholder: '000-0000',
             }),
-            //Error in dev tools, missing keys on divider fields...
-            buildDividerField({
+            buildTitleField({
               title: m.administrativeContactTitle,
+              color: 'blue400',
             }),
             buildTextField({
               id: 'administrativeContact.name',
@@ -73,8 +72,10 @@ export const ReviewApplication: Form = buildForm({
               format: '###-####',
               placeholder: '000-0000',
             }),
-            //Error in dev tools, missing keys on divider fields...
-            buildDividerField({ title: m.technicalContactTitle }),
+            buildTitleField({
+              title: m.technicalContactTitle,
+              color: 'blue400',
+            }),
             buildTextField({
               id: 'technicalContact.name',
               title: m.technicalContactName,
@@ -92,8 +93,7 @@ export const ReviewApplication: Form = buildForm({
               format: '###-####',
               placeholder: '000-0000',
             }),
-            //Error in dev tools, missing keys on divider fields...
-            buildDividerField({ title: m.helpDeskTitle }),
+            buildTitleField({ title: m.helpDeskTitle, color: 'blue400' }),
             buildTextField({
               id: 'helpDesk.email',
               title: m.helpDeskEmail,
@@ -106,7 +106,6 @@ export const ReviewApplication: Form = buildForm({
               format: '###-####',
               placeholder: '000-0000',
             }),
-            //Error in dev tools, missing keys on radio controller...
             buildSubmitField({
               id: 'approvedByReviewer',
               title: m.reviewQuestion,

libs/application/templates/driving-license/src/forms/draft/subSectionTempInfo.ts

@@ -7,6 +7,7 @@ import {
   buildTextField,
   buildSubSection,
   buildPhoneField,
+  buildTitleField,
 } from '@island.is/application/core'
 import {
   Application,
@@ -46,8 +47,8 @@ export const subSectionTempInfo = buildSubSection({
           condition: (answers) => answers.applicationFor === B_FULL_RENEWAL_65,
         }),
         buildDividerField({
-          title: '',
-          color: 'dark400',
+          marginTop: 5,
+          useDividerLine: false,
         }),
         buildKeyValueField({
           label: m.informationFullName,

libs/application/templates/health-insurance/src/forms/HealthInsuranceForm/confirmSection.ts

@@ -1,13 +1,13 @@
 import {
   buildCheckboxField,
   buildCustomField,
-  buildDividerField,
   buildFileUploadField,
   buildMultiField,
   buildRadioField,
   buildSection,
   buildSubmitField,
   buildTextField,
+  buildTitleField,
 } from '@island.is/application/core'
 import { m } from '../../lib/messages/messages'
 import { FILE_SIZE_LIMIT, YES } from '../../utils/constants'
@@ -56,15 +56,7 @@ export const confirmSection = buildSection({
           uploadHeader: m.fileUploadHeader,
           uploadDescription: m.fileUploadDescription,
           uploadButtonLabel: m.fileUploadButton,
-          condition: {
-            questionId: 'hasAdditionalInfo',
-            comparator: Comparators.EQUALS,
-            value: YES,
-          },
-        }),
-        buildDividerField({
-          title: ' ',
-          color: 'transparent',
+          marginBottom: 5,
           condition: {
             questionId: 'hasAdditionalInfo',
             comparator: Comparators.EQUALS,

libs/application/templates/health-insurance/src/forms/HealthInsuranceForm/formerInsuranceSection.ts

@@ -8,7 +8,7 @@ import {
   buildSection,
   buildSelectField,
   buildTextField,
-  getValueViaPath,
+  buildTitleField,
 } from '@island.is/application/core'
 import { m } from '../../lib/messages/messages'
 import { FormValue } from '@island.is/application/types'
@@ -90,8 +90,8 @@ export const formerInsuranceSection = buildSection({
           },
         }),
         buildDividerField({
-          title: ' ',
-          color: 'transparent',
+          marginTop: 5,
+          useDividerLine: false,
         }),
         buildDescriptionField({
           id: 'formerInsurance.entitlementDescription',

libs/application/templates/health-insurance/src/forms/MissingInfoForm.ts

@@ -2,12 +2,12 @@ import {
   buildCheckboxField,
   buildCustomField,
   buildDescriptionField,
-  buildDividerField,
   buildFileUploadField,
   buildForm,
   buildMultiField,
   buildSection,
   buildSubmitField,
+  buildTitleField,
   getValueViaPath,
 } from '@island.is/application/core'
 import { Application, Form, FormModes, YES } from '@island.is/application/types'
@@ -38,9 +38,8 @@ export const MissingInfoForm: Form = buildForm({
                 getValueViaPath<string>(application.answers, 'agentComments') ??
                 m.agentCommentsEmpty,
             }),
-            buildDividerField({
+            buildTitleField({
               title: m.missingInfoAnswersTitle,
-              color: 'dark400',
             }),
             buildCustomField({
               id: 'missingInfo.date',
@@ -57,9 +56,8 @@ export const MissingInfoForm: Form = buildForm({
               title: '',
               introduction: '',
             }),
-            buildDividerField({
+            buildTitleField({
               title: m.previousAnswersTitle,
-              color: 'dark400',
             }),
             buildCustomField({
               id: 'submittedData',

libs/application/templates/passport/src/forms/ParentB.ts

@@ -6,6 +6,7 @@ import {
   buildMultiField,
   buildSection,
   buildSubmitField,
+  buildTitleField,
   getValueViaPath,
 } from '@island.is/application/core'
 import {
@@ -52,7 +53,8 @@ export const ParentB: Form = buildForm({
           }),
           children: [
             buildDividerField({
-              title: ' ',
+              marginTop: 5,
+              useDividerLine: false,
             }),
           ],
         }),