Merge pull request #570 from open-formulieren/refactor/454-nlds-based…

…-editgrid Use NL DS components (where possible) for edit grid component
open-formulieren · Oct 31, 2023 · ec86291 · ec86291
2 parents dc10caa + d59125d
commit ec86291
Show file tree

Hide file tree

Showing 20 changed files with 430 additions and 135 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.44.1",
+    "@open-formulieren/design-tokens": "^0.45.0",
     "@sentry/react": "^6.13.2",
     "@sentry/tracing": "^6.13.2",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",

diff --git a/src/components/EditGrid/EditGrid.js b/src/components/EditGrid/EditGrid.js
@@ -0,0 +1,39 @@
+import {ButtonGroup} from '@utrecht/component-library-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import {OFButton} from 'components/Button';
+import FAIcon from 'components/FAIcon';
+
+const DefaultAddButtonLabel = () => (
+  <>
+    <FAIcon icon="plus" />{' '}
+    <FormattedMessage
+      description="Edit grid add button, default label text"
+      defaultMessage="Add another"
+    />
+  </>
+);
+
+const EditGrid = ({children, onAddItem, addButtonLabel}) => (
+  <div className="openforms-editgrid">
+    <div>{children}</div>
+
+    {onAddItem && (
+      <ButtonGroup>
+        <OFButton type="button" appearance="primary-action-button" onClick={onAddItem}>
+          {addButtonLabel || <DefaultAddButtonLabel />}
+        </OFButton>
+      </ButtonGroup>
+    )}
+  </div>
+);
+
+EditGrid.propTypes = {
+  children: PropTypes.node.isRequired,
+  addButtonLabel: PropTypes.node,
+  onAddItem: PropTypes.func,
+};
+
+export default EditGrid;
diff --git a/src/components/EditGrid/EditGrid.stories.js b/src/components/EditGrid/EditGrid.stories.js
@@ -0,0 +1,56 @@
+import Body from 'components/Body';
+import {OFButton} from 'components/Button';
+
+import {EditGrid, EditGridButtonGroup, EditGridItem} from '.';
+
+export default {
+  title: 'Pure React components / EditGrid / EditGrid',
+  component: EditGrid,
+  argTypes: {
+    children: {control: false},
+    onAddItem: {control: false},
+  },
+  args: {
+    children: (
+      <>
+        <EditGridItem
+          heading="Item 1"
+          buttons={
+            <EditGridButtonGroup>
+              <OFButton appearance="primary-action-button">A button</OFButton>
+            </EditGridButtonGroup>
+          }
+        >
+          <Body>First item</Body>
+        </EditGridItem>
+        <EditGridItem
+          heading="Item 2"
+          buttons={
+            <EditGridButtonGroup>
+              <OFButton appearance="primary-action-button">A button</OFButton>
+            </EditGridButtonGroup>
+          }
+        >
+          <Body>Second item</Body>
+        </EditGridItem>
+      </>
+    ),
+  },
+  parameters: {
+    controls: {sort: 'requiredFirst'},
+  },
+};
+
+export const WithAddButton = {};
+
+export const WithCustomAddButtonLabel = {
+  args: {
+    addButtonLabel: 'Custom add button label',
+  },
+};
+
+export const WithoutAddbutton = {
+  args: {
+    onAddItem: undefined,
+  },
+};
diff --git a/src/components/EditGrid/EditGridButtonGroup.js b/src/components/EditGrid/EditGridButtonGroup.js
@@ -0,0 +1,13 @@
+import {ButtonGroup} from '@utrecht/component-library-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const EditGridButtonGroup = ({children}) => (
+  <ButtonGroup className="utrecht-button-group--openforms-editgrid">{children}</ButtonGroup>
+);
+
+EditGridButtonGroup.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+export default EditGridButtonGroup;
diff --git a/src/components/EditGrid/EditGridItem.js b/src/components/EditGrid/EditGridItem.js
@@ -0,0 +1,21 @@
+import {Fieldset, FieldsetLegend} from '@utrecht/component-library-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const EditGridItem = ({heading, children: body, buttons}) => {
+  return (
+    <Fieldset className="openforms-editgrid__item">
+      <FieldsetLegend className="openforms-editgrid__item-heading">{heading}</FieldsetLegend>
+      {body}
+      {buttons}
+    </Fieldset>
+  );
+};
+
+EditGridItem.propTypes = {
+  heading: PropTypes.node.isRequired,
+  children: PropTypes.node,
+  buttons: PropTypes.node,
+};
+
+export default EditGridItem;
diff --git a/src/components/EditGrid/EditGridItem.stories.js b/src/components/EditGrid/EditGridItem.stories.js
@@ -0,0 +1,30 @@
+import Body from 'components/Body';
+import {OFButton} from 'components/Button';
+
+import {EditGridButtonGroup, EditGridItem as EditGridItemComponent} from '.';
+
+export default {
+  title: 'Pure React components / EditGrid / Item',
+  component: EditGridItemComponent,
+  argTypes: {
+    children: {control: false},
+    buttons: {control: false},
+  },
+  args: {
+    heading: 'Item heading',
+    children: <Body>Item body, typically form fields</Body>,
+    buttons: (
+      <EditGridButtonGroup>
+        <OFButton appearance="primary-action-button">Save</OFButton>
+        <OFButton appearance="primary-action-button" hint="danger">
+          Remove
+        </OFButton>
+      </EditGridButtonGroup>
+    ),
+  },
+  parameters: {
+    controls: {sort: 'requiredFirst'},
+  },
+};
+
+export const Item = {};
diff --git a/src/components/EditGrid/design-tokens.mdx b/src/components/EditGrid/design-tokens.mdx
@@ -0,0 +1,73 @@
+import ofTokens from '@open-formulieren/design-tokens/dist/tokens';
+import {Meta} from '@storybook/addon-docs';
+import utrechtTokens from '@utrecht/design-tokens/dist/tokens';
+import TokensTable from 'design-token-editor/lib/esm/TokensTable';
+
+<Meta title="Pure React components / EditGrid" name="Design tokens" />
+
+## Available design tokens
+
+**Open Forms specific tokens**
+
+<TokensTable container={ofTokens} limitTo="of.editgrid" autoExpand />
+
+**Utrecht tokens**
+
+Under the hood, the following components & tokens are used & can be leveraged to change the
+appearance of the editgrid component.
+
+- `utrecht.button-group`
+- `utrecht.form-fieldset`
+
+## Updating your theme
+
+Before SDK 1.6, the CSS for edit grid was hardcoded. With 1.6, this is now parametrized, but there
+are no backwards compatible defaults set. To recover the original styles, use the following tokens:
+
+```json
+{
+  "of": {
+    "editgrid": {
+      "line-height": {"value": 1.5},
+      "gap": {"value": "12px"},
+
+      "item": {
+        "gap": {"value": "12px"},
+        "border": {"value": "solid 1px {of.color.border}"},
+        "padding-block-end": {"value": "24px"},
+        "padding-block-start": {"value": "24px"},
+        "padding-inline-end": {"value": "24px"},
+        "padding-inline-start": {"value": "24px"}
+      },
+
+      "item-heading": {
+        "font-family": {"value": "{of.typography.sans-serif.font-family}"},
+        "font-size": {"value": "0.875rem"},
+        "line-height": {"value": "1.2"},
+        "margin-block-end": {"value": "24px"}
+      }
+    }
+  }
+}
+```
+
+or in CSS:
+
+```css
+.your-theme {
+  --of-editgrid-item-border: solid 1px var(--of-color-border);
+  --of-editgrid-item-gap: 12px;
+  --of-editgrid-item-padding-block-end: 24px;
+  --of-editgrid-item-padding-block-start: 24px;
+  --of-editgrid-item-padding-inline-start: 24px;
+  --of-editgrid-item-padding-inline-end: 24px;
+
+  --of-editgrid-item-heading-font-family: var(--of-typography-sans-serif-font-family);
+  --of-editgrid-item-heading-font-size: 0.875rem;
+  --of-editgrid-item-heading-line-height: 1.2;
+  --of-editgrid-item-heading-margin-block-end: 24px;
+
+  --of-editgrid-line-height: 1.5;
+  --of-editgrid-gap: 12p;
+}
+```
diff --git a/src/components/EditGrid/index.js b/src/components/EditGrid/index.js
@@ -0,0 +1,3 @@
+export {default as EditGridButtonGroup} from './EditGridButtonGroup';
+export {default as EditGridItem} from './EditGridItem';
+export {default as EditGrid} from './EditGrid';
diff --git a/src/components/appointments/steps/ChooseProductStep.js b/src/components/appointments/steps/ChooseProductStep.js
@@ -10,11 +10,10 @@ import {toFormikValidationSchema} from 'zod-formik-adapter';
 
 import {OFButton} from 'components/Button';
 import {CardTitle} from 'components/Card';
+import {EditGrid, EditGridButtonGroup, EditGridItem} from 'components/EditGrid';
 import FAIcon from 'components/FAIcon';
-import {Toolbar, ToolbarList} from 'components/Toolbar';
 import useQuery from 'hooks/useQuery';
 import useTitle from 'hooks/useTitle';
-import {getBEMClassName} from 'utils';
 
 import {AppointmentConfigContext} from '../Context';
 import {useCreateAppointmentContext} from '../CreateAppointment/CreateAppointmentState';
@@ -61,37 +60,34 @@ const ChooseProductStepFields = ({values: {products = []}, validateForm}) => {
     <Form style={{width: '100%'}}>
       <FieldArray name="products">
         {arrayHelpers => (
-          <div className={getBEMClassName('editgrid')}>
-            <div className={getBEMClassName('editgrid__groups')}>
-              {products.map(({productId}, index) => (
-                // blank blocks don't have a product selected yet -> so the index is added
-                // to make the key guaranteed unique
-                <ProductWrapper
-                  key={`${productId}-${index}`}
-                  index={index}
-                  numProducts={numProducts}
-                  onRemove={withValidate(() => arrayHelpers.remove(index))}
-                >
-                  <Product namePrefix="products" index={index} selectedProducts={products} />
-                </ProductWrapper>
-              ))}
-            </div>
-
-            {supportsMultipleProducts && (
-              <div className={getBEMClassName('editgrid__add-button')}>
-                <OFButton
-                  appearance="primary-action-button"
-                  onClick={withValidate(() => arrayHelpers.push({productId: '', amount: 1}))}
-                >
-                  <FAIcon icon="plus" />
-                  <FormattedMessage
-                    description="Appointments: add additional product/service button text"
-                    defaultMessage="Add another product"
-                  />
-                </OFButton>
-              </div>
-            )}
-          </div>
+          <EditGrid
+            addButtonLabel={
+              <>
+                <FAIcon icon="plus" />{' '}
+                <FormattedMessage
+                  description="Appointments: add additional product/service button text"
+                  defaultMessage="Add another product"
+                />
+              </>
+            }
+            onAddItem={
+              supportsMultipleProducts &&
+              withValidate(() => arrayHelpers.push({productId: '', amount: 1}))
+            }
+          >
+            {products.map(({productId}, index) => (
+              // blank blocks don't have a product selected yet -> so the index is added
+              // to make the key guaranteed unique
+              <ProductWrapper
+                key={`${productId}-${index}`}
+                index={index}
+                numProducts={numProducts}
+                onRemove={withValidate(() => arrayHelpers.remove(index))}
+              >
+                <Product namePrefix="products" index={index} selectedProducts={products} />
+              </ProductWrapper>
+            ))}
+          </EditGrid>
         )}
       </FieldArray>
 
@@ -118,31 +114,31 @@ const ProductWrapper = ({index, numProducts, onRemove, children}) => {
   if (!supportsMultipleProducts) {
     return <>{children}</>;
   }
+
+  const buttonRow = numProducts > 1 && (
+    <EditGridButtonGroup>
+      <OFButton appearance="primary-action-button" hint="danger" onClick={onRemove}>
+        <FormattedMessage
+          description="Appointments: remove product/service button text"
+          defaultMessage="Remove"
+        />
+      </OFButton>
+    </EditGridButtonGroup>
+  );
+
   return (
-    <div className={getBEMClassName('editgrid__group')}>
-      <div className={getBEMClassName('editgrid__group-label')}>
+    <EditGridItem
+      heading={
         <FormattedMessage
           description="Appointments: single product label/header"
           defaultMessage="Product {number}/{total}"
           values={{number: index + 1, total: numProducts}}
         />
-      </div>
-
+      }
+      buttons={buttonRow}
+    >
       {children}
-
-      {numProducts > 1 && (
-        <Toolbar modifiers={['reverse']}>
-          <ToolbarList>
-            <OFButton appearance="primary-action-button" hint="danger" onClick={onRemove}>
-              <FormattedMessage
-                description="Appointments: remove product/service button text"
-                defaultMessage="Remove"
-              />
-            </OFButton>
-          </ToolbarList>
-        </Toolbar>
-      )}
-    </div>
+    </EditGridItem>
   );
 };
+2 −2		package-lock.json
+1 −1		package.json
+1 −1		src/components/editgrid.tokens.json