From d36c30e3ce7d47b97a67b39f0c2d449b842f18e3 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Thu, 19 Oct 2023 11:56:33 +0200 Subject: [PATCH] :sparkles: [#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. --- .../EditGrid/EditGridButtonGroup.js | 17 +++++++++++ src/components/EditGrid/EditGridItem.js | 22 +++++++++++++++ .../EditGrid/EditGridItem.stories.js | 28 +++++++++++++++++++ src/components/EditGrid/index.js | 2 ++ src/scss/components/_button-group.scss | 23 +++++++++++++++ src/scss/components/_language-selection.scss | 1 - src/styles.scss | 1 + 7 files changed, 93 insertions(+), 1 deletion(-) create mode 100644 src/components/EditGrid/EditGridButtonGroup.js create mode 100644 src/components/EditGrid/EditGridItem.js create mode 100644 src/components/EditGrid/EditGridItem.stories.js create mode 100644 src/components/EditGrid/index.js create mode 100644 src/scss/components/_button-group.scss diff --git a/src/components/EditGrid/EditGridButtonGroup.js b/src/components/EditGrid/EditGridButtonGroup.js new file mode 100644 index 000000000..fc820c4db --- /dev/null +++ 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 ( + + {children} + + ); +}; + +EditGridButtonGroup.propTypes = { + children: PropTypes.node.isRequired, +}; + +export default EditGridButtonGroup; diff --git a/src/components/EditGrid/EditGridItem.js b/src/components/EditGrid/EditGridItem.js new file mode 100644 index 000000000..0c80d8f0e --- /dev/null +++ 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 ( +
+
{heading}
+ {body} + {buttons} +
+ ); +}; + +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 new file mode 100644 index 000000000..d8261708b --- /dev/null +++ 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: Item body, typically form fields, + buttons: ( + + + + + ), + }, + parameters: { + controls: {sort: 'requiredFirst'}, + }, +}; + +export const Item = {}; diff --git a/src/components/EditGrid/index.js b/src/components/EditGrid/index.js new file mode 100644 index 000000000..888109945 --- /dev/null +++ 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 new file mode 100644 index 000000000..bcc15b13f --- /dev/null +++ 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 index 3859fb71a..39b900f33 100644 --- 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 index 12d60dbf3..297c20dd9 100644 --- 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';