Merge pull request #626 from open-formulieren/feature/471-summary-wit…

…h-nlds Refactor submission summary to use NL DS components
open-formulieren · Jan 4, 2024 · a70dd8a · a70dd8a
2 parents 1a9e6b7 + f7576cd
commit a70dd8a
Show file tree

Hide file tree

Showing 12 changed files with 416 additions and 214 deletions.
diff --git a/design-tokens b/design-tokens
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "@floating-ui/react": "^0.24.2",
     "@formio/protected-eval": "^1.2.1",
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "@open-formulieren/design-tokens": "^0.51.0",
+    "@open-formulieren/design-tokens": "^0.52.1",
     "@sentry/react": "^6.13.2",
     "@sentry/tracing": "^6.13.2",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",

diff --git a/src/components/FormStepSummary/FormStepSummary.stories.js b/src/components/FormStepSummary/FormStepSummary.stories.js
@@ -29,6 +29,11 @@ export default {
     ],
     editStepText: 'Edit',
   },
+  argTypes: {
+    name: {type: 'string'},
+    editStepText: {type: 'string'},
+    slug: {table: {disable: true}},
+  },
 };
 
 export const Default = {
@@ -64,3 +69,161 @@ export const NotEditable = {
     });
   },
 };
+
+export const WithFieldsetAsFirstElement = {
+  name: 'Layout components: fieldset, first child',
+  args: {
+    data: [
+      {
+        name: 'A fieldset',
+        value: '',
+        component: {
+          type: 'fieldset',
+          key: 'fieldset',
+          label: 'A fieldset',
+        },
+      },
+      {
+        name: 'A textfield',
+        value: 'A value',
+        component: {
+          type: 'textfield',
+          key: 'textfield1',
+          label: 'A textfield',
+        },
+      },
+      {
+        name: 'Another textfield',
+        value: 'Another value',
+        component: {
+          type: 'textfield',
+          key: 'textfield2',
+          label: 'Another textfield',
+        },
+      },
+    ],
+  },
+};
+
+export const WithFieldsetNotAsFirstElement = {
+  name: 'Layout components: fieldset, not first child',
+  args: {
+    data: [
+      {
+        name: 'A number',
+        value: 3.14,
+        component: {
+          type: 'number',
+          key: 'number',
+          label: 'A number',
+        },
+      },
+      {
+        name: 'A fieldset',
+        value: '',
+        component: {
+          type: 'fieldset',
+          key: 'fieldset',
+          label: 'A fieldset',
+        },
+      },
+      {
+        name: 'A textfield',
+        value: 'A value',
+        component: {
+          type: 'textfield',
+          key: 'textfield1',
+          label: 'A textfield',
+        },
+      },
+      {
+        name: 'Another textfield',
+        value: 'Another value',
+        component: {
+          type: 'textfield',
+          key: 'textfield2',
+          label: 'Another textfield',
+        },
+      },
+    ],
+  },
+};
+
+export const WithEditGridAsFirstElement = {
+  name: 'Layout components: editgrid, first child',
+  args: {
+    data: [
+      {
+        name: 'A repeating group',
+        value: '',
+        component: {
+          type: 'editgrid',
+          key: 'editgrid',
+          label: 'A repeating group',
+        },
+      },
+      {
+        name: 'A textfield',
+        value: 'A value',
+        component: {
+          type: 'textfield',
+          key: 'textfield1',
+          label: 'A textfield',
+        },
+      },
+      {
+        name: 'Another textfield',
+        value: 'Another value',
+        component: {
+          type: 'textfield',
+          key: 'textfield2',
+          label: 'Another textfield',
+        },
+      },
+    ],
+  },
+};
+
+export const WithEditGridNotAsFirstElement = {
+  name: 'Layout components: editgrid, not first child',
+  args: {
+    data: [
+      {
+        name: 'A number',
+        value: 3.14,
+        component: {
+          type: 'number',
+          key: 'number',
+          label: 'A number',
+        },
+      },
+      {
+        name: 'A repeating group',
+        value: '',
+        component: {
+          type: 'editgrid',
+          key: 'editgrid',
+          label: 'A repeating group',
+        },
+      },
+      {
+        name: 'A textfield',
+        value: 'A value',
+        component: {
+          type: 'textfield',
+          key: 'textfield1',
+          label: 'A textfield',
+        },
+      },
+      {
+        name: 'Another textfield',
+        value: 'Another value',
+        component: {
+          type: 'textfield',
+          key: 'textfield2',
+          label: 'Another textfield',
+        },
+      },
+    ],
+  },
+};
diff --git a/src/components/FormStepSummary/index.js b/src/components/FormStepSummary/index.js
@@ -1,25 +1,31 @@
+import {
+  DataList,
+  DataListItem,
+  DataListKey,
+  DataListValue,
+  Heading2,
+} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 import FAIcon from 'components/FAIcon';
-import ComponentValueDisplay from 'components/FormStepSummary/ComponentValueDisplay';
 import Link from 'components/Link';
 import {DEBUG} from 'utils';
-import {getBEMClassName} from 'utils';
+
+import ComponentValueDisplay from './ComponentValueDisplay';
 
 const LabelValueRow = ({name, value, component}) => {
   if (!name) {
     return null;
   }
 
-  const className = getBEMClassName('summary-row', [component.type]);
   return (
-    <div className={className}>
-      <div className={getBEMClassName('summary-row__label')}>{name}</div>
-      <div className={getBEMClassName('summary-row__value')}>
+    <DataListItem className={`utrecht-data-list__item--openforms-${component.type}`}>
+      <DataListKey>{name}</DataListKey>
+      <DataListValue notranslate multiline={['textarea'].includes(component.type)}>
         <ComponentValueDisplay value={value} component={component} />
-      </div>
-    </div>
+      </DataListValue>
+    </DataListItem>
   );
 };
 
@@ -42,9 +48,9 @@ const FormStepSummary = ({editUrl, slug, name, data, editStepText = ''}) => {
   }
 
   return (
-    <div className={getBEMClassName('summary')}>
-      <div className={getBEMClassName('summary__step-header')}>
-        <h2 className={getBEMClassName('summary__step-name')}>{name}</h2>
+    <div className="openforms-summary">
+      <div className="openforms-summary__header">
+        <Heading2 className="utrecht-heading-2--openforms-summary-step-name">{name}</Heading2>
 
         {editStepText && (
           <Link to={editUrl}>
@@ -54,7 +60,7 @@ const FormStepSummary = ({editUrl, slug, name, data, editStepText = ''}) => {
         )}
       </div>
 
-      <div className={getBEMClassName('summary__step-data')}>
+      <DataList className="utrecht-data-list--openforms">
         {data.map((item, index) => (
           <LabelValueRow
             key={index}
@@ -63,7 +69,7 @@ const FormStepSummary = ({editUrl, slug, name, data, editStepText = ''}) => {
             component={item.component}
           />
         ))}
-      </div>
+      </DataList>
     </div>
   );
 };
+2 −0		README.md
+2 −2		package-lock.json
+1 −1		package.json
+10 −1		src/community/utrecht/data-list.tokens.json
+2 −1		src/components/summary-row/summary-row.tokens.json
+30 −0		src/components/summary.tokens.json