✨ [#454] Implement edit grid react component and styles

This sets up the edit grid as a proper themable component using design tokens.
open-formulieren · Oct 31, 2023 · 1474ace · 1474ace
1 parent c6be014
commit 1474ace
Show file tree

Hide file tree

Showing 8 changed files with 282 additions and 35 deletions.
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/scss/components/_editgrid.scss b/src/scss/components/_editgrid.scss
@@ -1,42 +1,54 @@
-@import '~microscope-sass/lib/color';
-@import '~microscope-sass/lib/typography';
-
-@import '../mixins/prefix';
-
-.#{prefix(editgrid)} {
-  @include body;
-
-  ul {
-    padding: 0;
-  }
-
-  &__group {
-    padding: $grid-margin-4;
-    border-style: solid;
-    border-width: thin;
-    border-color: $color-border;
-
-    &:not(:first-child) {
-      border-top-style: none;
+/**
+ * The Utrecht community components do not seem to have a ready-to-use component
+ * for the edit grid layout, so we can't shake of some custom CSS yet.
+ */
+@use 'microscope-sass/lib/bem';
+
+.openforms-editgrid {
+  line-height: var(--of-editgrid-line-height, var(--utrecht-document-line-height));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--of-editgrid-gap);
+
+  @include bem.element('item') {
+    // NL DS markup uses a field with nested fieldset element inside
+    .utrecht-form-fieldset__fieldset {
+      display: flex;
+      flex-direction: column;
+      gap: var(--of-editgrid-item-gap);
     }
-  }
 
-  &__group-label {
-    @include h4;
-    padding-bottom: $grid-margin-4;
-  }
+    border: var(--of-editgrid-item-border);
+    max-inline-size: var(--of-editgrid-item-max-inline-size);
+    padding-block-end: var(--of-editgrid-item-padding-block-end);
+    padding-block-start: var(--of-editgrid-item-padding-block-start);
+    padding-inline-end: var(--of-editgrid-item-padding-inline-end);
+    padding-inline-start: var(--of-editgrid-item-padding-inline-start);
 
-  &__list {
-    list-style: none;
-  }
-
-  &__group-actions {
-    padding-top: $grid-margin-2;
+    // ensure borders are 'collapsed'
+    & + .openforms-editgrid__item {
+      border-block-start: none;
+    }
   }
 
-  &__add-button {
-    display: flex;
-    width: 100%;
-    padding: $grid-margin-2 0;
+  @include bem.element('item-heading') {
+    font-family: var(
+      --of-editgrid-item-heading-font-family,
+      var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family))
+    );
+    font-size: var(
+      --of-editgrid-item-heading-font-size,
+      var(--utrecht-form-fieldset-legend-font-size)
+    );
+    line-height: var(
+      --of-editgrid-item-heading-line-height,
+      var(--utrecht-form-fieldset-legend-line-height)
+    );
+    // display: contents was considered, but that doesn't allow specifying different
+    // margins/paddings at the bottom to create extra space :(
+    // legend element doesn't care about the fieldset itself having display: flex, so we
+    // must treat this specially
+    margin-block-end: var(--of-editgrid-item-heading-margin-block-end, var(--of-editgrid-item-gap));
   }
 }