fix(Forms): UI aligments of the ChildrenWithAge block (#4126)

Co-authored-by: Tobias Høegh <[email protected]> Co-authored-by: Joakim Bjerknes <[email protected]>
dnbexperience · Oct 15, 2024 · f2193f0 · f2193f0
1 parent 63878cc
commit f2193f0
Show file tree

Hide file tree

Showing 17 changed files with 435 additions and 634 deletions.
diff --git a/...-design-system-portal/src/docs/uilib/extensions/forms/blocks/ChildrenWithAge/Examples.tsx b/...-design-system-portal/src/docs/uilib/extensions/forms/blocks/ChildrenWithAge/Examples.tsx
@@ -41,16 +41,48 @@ export const ChildrenWithAgeWizard = (props) => {
     <ComponentBox scope={{ Tools, Blocks, props }}>
       {() => {
         const MyForm = () => {
+          const myTranslations = {
+            'nb-NO': {
+              ChildrenWithAge: {
+                hasChildren: {
+                  title: 'Utgifter til barn',
+                  fieldLabel:
+                    'Har du/dere barn under 18 år som dere er økonomisk ansvarlige for?',
+                  required:
+                    'Du må angi om du/dere har barn under 18 år som dere er økonomisk ansvarlige for.',
+                },
+              },
+            },
+            'en-GB': {
+              ChildrenWithAge: {
+                hasChildren: {
+                  title: 'Child expenses',
+                  fieldLabel:
+                    'Do you have children under the age of 18 for whom you are financially responsible?',
+                  required:
+                    'You must state whether you have children under the age of 18 for whom you are financially responsible.',
+                },
+              },
+            },
+          }
+
           const { summaryTitle } = Form.useLocale().Step
           return (
             <Form.Handler
               onSubmit={(data, { reduceToVisibleFields }) => {
                 console.log(reduceToVisibleFields(data))
               }}
+              translations={myTranslations}
             >
               <Wizard.Container>
                 <Wizard.Step title="Step 1">
-                  <Blocks.ChildrenWithAge {...props} />
+                  <Blocks.ChildrenWithAge
+                    enableAdditionalQuestions={[
+                      'joint-responsibility',
+                      'daycare',
+                    ]}
+                    {...props}
+                  />
                   <Wizard.Buttons />
                 </Wizard.Step>
 
@@ -179,12 +211,10 @@ export const ChildrenWithAgePrefilledYes = () => {
           hasChildren: true,
           hasJointResponsibility: true,
           usesDaycare: true,
+          daycareExpenses: 123,
           countChildren: 2,
           children: [{}, {}],
         }}
-        onSubmit={(data, { reduceToVisibleFields }) => {
-          console.log(reduceToVisibleFields(data))
-        }}
       >
         <Flex.Stack>
           <Blocks.ChildrenWithAge
@@ -224,6 +254,7 @@ export const ChildrenWithAgeSummaryMultipleNoAnswers = () => {
       <Blocks.ChildrenWithAge
         mode="summary"
         data={multipleChildrenNoJointAndDaycare}
+        enableAdditionalQuestions={['joint-responsibility', 'daycare']}
       />
     </ComponentBox>
   )
@@ -233,14 +264,16 @@ export const ChildrenWithAgeSummaryMultipleChildren = () => {
   const multipleChildren = {
     hasChildren: true,
     usesDaycare: true,
+    hasJointResponsibility: true,
+    daycareExpenses: 4001,
+    jointResponsibilityExpenses: 1004,
     countChildren: 2,
     children: [
       {
         age: 1,
       },
       {
         age: 2,
-        hasDaycare: true,
       },
     ],
   }
@@ -250,8 +283,15 @@ export const ChildrenWithAgeSummaryMultipleChildren = () => {
       data-visual-test="children-with-age-summary-multiple-children"
       scope={{ Tools, Blocks, multipleChildren }}
     >
-      <Blocks.ChildrenWithAge data={multipleChildren} />
-      <Blocks.ChildrenWithAge mode="summary" data={multipleChildren} />
+      <Blocks.ChildrenWithAge
+        data={multipleChildren}
+        enableAdditionalQuestions={['daycare', 'joint-responsibility']}
+      />
+      <Blocks.ChildrenWithAge
+        mode="summary"
+        data={multipleChildren}
+        enableAdditionalQuestions={['daycare', 'joint-responsibility']}
+      />
     </ComponentBox>
   )
 }
@@ -270,3 +310,41 @@ export const ChildrenWithAgeSummaryNoChildren = () => {
     </ComponentBox>
   )
 }
+
+export const ChildrenWithAgeSummaryNoChildrenAfterFilledOutData = () => {
+  const noChildren = {
+    hasChildren: false,
+    countChildren: 3,
+    usesDaycare: true,
+    hasJointResponsibility: true,
+    daycareExpenses: 4001,
+    jointResponsibilityExpenses: 1004,
+    children: [
+      {
+        age: 1,
+      },
+      {
+        age: 2,
+      },
+      {
+        age: 3,
+      },
+    ],
+  }
+  return (
+    <ComponentBox
+      data-visual-test="children-with-age-summary-previously-filled-out-data"
+      scope={{ Tools, Blocks, noChildren }}
+    >
+      <Blocks.ChildrenWithAge
+        data={noChildren}
+        enableAdditionalQuestions={['joint-responsibility', 'daycare']}
+      />
+      <Blocks.ChildrenWithAge
+        mode="summary"
+        data={noChildren}
+        enableAdditionalQuestions={['joint-responsibility', 'daycare']}
+      />
+    </ComponentBox>
+  )
+}
diff --git a/...-system-portal/src/docs/uilib/extensions/forms/blocks/ChildrenWithAge/demos.mdx b/...-system-portal/src/docs/uilib/extensions/forms/blocks/ChildrenWithAge/demos.mdx
@@ -8,7 +8,7 @@ import * as Examples from './Examples'
 
 ### In Wizard
 
-All features are enabled in this example.
+All features, and additional questions (`enableAdditionalQuestions`) and custom translations, are enabled in this example.
 
 <Examples.ChildrenWithAgeWizard />
 
@@ -26,9 +26,16 @@ All features are enabled in this example.
 
 <Examples.ChildrenWithAge enableAdditionalQuestions={['daycare']} />
 
+### With `daycare` and `joint-responsibility` question
+
+<Examples.ChildrenWithAge
+  enableAdditionalQuestions={['daycare', 'joint-responsibility']}
+/>
+
 <VisibleWhenVisualTest>
   <Examples.ChildrenWithAgePrefilledYes />
   <Examples.ChildrenWithAgeSummaryNoChildren />
   <Examples.ChildrenWithAgeSummaryMultipleChildren />
   <Examples.ChildrenWithAgeSummaryMultipleNoAnswers />
+  <Examples.ChildrenWithAgeSummaryNoChildrenAfterFilledOutData />
 </VisibleWhenVisualTest>