Merge pull request #623 from open-formulieren/feature/address-compone…

…nt-2 Add address component
open-formulieren · Jan 8, 2024 · b014d03 · b014d03
2 parents a70dd8a + 68064d3
commit b014d03
Show file tree

Hide file tree

Showing 16 changed files with 790 additions and 9 deletions.
diff --git a/src/components/FormStepSummary/ComponentValueDisplay.js b/src/components/FormStepSummary/ComponentValueDisplay.js
@@ -209,6 +209,16 @@ const CoSignDisplay = ({component, value}) => {
   return <CoSignOld interactive={false} />;
 };
 
+const AddressNLDisplay = ({component, value}) => {
+  if (!value || Object.values(value).every(v => v === '')) {
+    return <EmptyDisplay />;
+  }
+
+  return `${value.postcode} ${value.houseNumber}${value.houseLetter || ''} ${
+    value.houseNumberAddition || ''
+  }`;
+};
+
 const ComponentValueDisplay = ({value, component}) => {
   const {multiple = false, type} = component;
 
@@ -259,6 +269,7 @@ const TYPE_TO_COMPONENT = {
   map: MapDisplay,
   password: PasswordDisplay,
   coSign: CoSignDisplay,
+  addressNL: AddressNLDisplay,
 };
 
 export default ComponentValueDisplay;
diff --git a/src/components/Summary/Summary.stories.js b/src/components/Summary/Summary.stories.js
@@ -281,3 +281,92 @@ export const Loading = {
     isLoading: true,
   },
 };
+
+export const AddressNLSummary = {
+  render,
+  args: {
+    summaryData: [
+      {
+        slug: 'address-nl',
+        name: 'Address NL',
+        data: [
+          {
+            name: 'Address NL',
+            value: {postcode: '1234 AB', houseNumber: '1'},
+            component: {
+              key: 'addressNL',
+              type: 'addressNL',
+              label: 'Address NL',
+              hidden: false,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole('definition')).toHaveTextContent('1234 AB 1');
+  },
+};
+
+export const AddressNLSummaryFull = {
+  render,
+  args: {
+    summaryData: [
+      {
+        slug: 'address-nl',
+        name: 'Address NL',
+        data: [
+          {
+            name: 'Address NL',
+            value: {
+              postcode: '1234 AB',
+              houseNumber: '1',
+              houseLetter: 'A',
+              houseNumberAddition: 'Add',
+            },
+            component: {
+              key: 'addressNL',
+              type: 'addressNL',
+              label: 'Address NL',
+              hidden: false,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole('definition')).toHaveTextContent('1234 AB 1A Add');
+  },
+};
+
+export const AddressNLSummaryEmpty = {
+  render,
+  args: {
+    summaryData: [
+      {
+        slug: 'address-nl',
+        name: 'Address NL',
+        data: [
+          {
+            name: 'Address NL',
+            value: {},
+            component: {
+              key: 'addressNL',
+              type: 'addressNL',
+              label: 'Address NL',
+              hidden: false,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole('definition')).toHaveTextContent('');
+  },
+};