✨ [#454] Isolate edit grid item component

NL DS recommends applying media queries to apply the vertical behaviour - they are not set yet on the responsive strategy to use (container queries are also an option but these are not widely supported enough). So, this requires us to use their sass mixins and write some supporting CSS ourselves, which means we unfortunately cannot yet go without any custom CSS for edit grid yet. Additionally, our edit grid items align the buttons to the right (for ltr documents), and there is no design token yet to control the justify-content CSS property - this may get contributed to upstream.
open-formulieren · Oct 19, 2023 · d36c30e · d36c30e
1 parent b3b2a21
commit d36c30e
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 1 deletion.
diff --git a/src/components/EditGrid/EditGridButtonGroup.js b/src/components/EditGrid/EditGridButtonGroup.js
@@ -0,0 +1,17 @@
+import {ButtonGroup} from '@utrecht/component-library-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const EditGridButtonGroup = ({children}) => {
+  return (
+    <ButtonGroup role="group" className="utrecht-button-group--openforms-editgrid">
+      {children}
+    </ButtonGroup>
+  );
+};
+
+EditGridButtonGroup.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default EditGridButtonGroup;
diff --git a/src/components/EditGrid/EditGridItem.js b/src/components/EditGrid/EditGridItem.js
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {getBEMClassName} from 'utils';
+
+const EditGridItem = ({heading, body, buttons}) => {
+  return (
+    <div className={getBEMClassName('editgrid__group')}>
+      <div className={getBEMClassName('editgrid__group-label')}>{heading}</div>
+      {body}
+      {buttons}
+    </div>
+  );
+};
+
+EditGridItem.propTypes = {
+  heading: PropTypes.string.isRequired,
+  body: 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,28 @@
+import Body from 'components/Body';
+import Button from 'components/Button';
+
+import {EditGridButtonGroup, EditGridItem as EditGridItemComponent} from '.';
+
+export default {
+  title: 'Pure React components / EditGrid / Item',
+  component: EditGridItemComponent,
+  argTypes: {
+    body: {control: false},
+    buttons: {control: false},
+  },
+  args: {
+    heading: 'Item heading',
+    body: <Body>Item body, typically form fields</Body>,
+    buttons: (
+      <EditGridButtonGroup>
+        <Button variant="primary">Save</Button>
+        <Button variant="danger">Remove</Button>
+      </EditGridButtonGroup>
+    ),
+  },
+  parameters: {
+    controls: {sort: 'requiredFirst'},
+  },
+};
+
+export const Item = {};
diff --git a/src/components/EditGrid/index.js b/src/components/EditGrid/index.js
@@ -0,0 +1,2 @@
+export {default as EditGridButtonGroup} from './EditGridButtonGroup';
+export {default as EditGridItem} from './EditGridItem';
diff --git a/src/scss/components/_button-group.scss b/src/scss/components/_button-group.scss
@@ -0,0 +1,23 @@
+/**
+ * Extensions on the Utrecht button-group community component.
+ */
+@use 'microscope-sass/lib/bem';
+
+@import '@utrecht/components/button-group/css/index';
+
+.utrecht-button-group {
+  // A button group used in an edit grid item
+  @include bem.modifier('openforms-editgrid') {
+    // there currently does not exist a design token in the upstream component, and
+    // the alignment is also contextual, so we opt for an open-forms extension that
+    // can be tweaked with proprietary design tokens.
+    justify-content: var(--of-button-group-editgrid-justify-content, flex-end);
+  }
+}
+
+// Reference: https://nl-design-system.github.io/utrecht/storybook/?path=/docs/css_css-button-group--docs
+@include mobile-only {
+  .utrecht-button-group {
+    @include utrecht-button-group--vertical;
+  }
+}
diff --git a/src/scss/components/_language-selection.scss b/src/scss/components/_language-selection.scss
@@ -1,7 +1,6 @@
 @import '~microscope-sass/lib/typography';
 
 @import '@utrecht/components/dist/alternate-lang-nav/css/index.css';
-@import '@utrecht/components/dist/button-group/css/index.css';
 
 /**
  * Allow using different spacing rules for this specific component

diff --git a/src/styles.scss b/src/styles.scss
@@ -24,6 +24,7 @@
 @import './scss/components/alert';
 @import './scss/components/anchor';
 @import './scss/components/button';
+@import './scss/components/button-group';
 @import './scss/components/card';
 @import './scss/components/content';
 @import './scss/components/errors';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export {default as EditGridButtonGroup} from './EditGridButtonGroup';
		export {default as EditGridItem} from './EditGridItem';