From 167608d688e64fdf6873ab2eaa1235f67c5d39f0 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Fri, 13 Oct 2023 16:38:38 +0200 Subject: [PATCH 01/20] :construction: [#462] Replace usage of OF Button component with Utrecht button components --- src/components/ButtonsToolbar/index.js | 27 ++++++++++++++----- .../LanguageSelectionDisplay.js | 10 +++---- src/components/LoginButton/index.js | 13 +++++---- src/components/SummaryConfirmation/index.js | 15 ++++++----- src/formio/components/Button.js | 6 +---- src/formio/templates/editGrid.ejs | 6 ++--- src/formio/templates/editGridRow.ejs | 4 +-- src/formio/templates/file.ejs | 2 +- src/formio/templates/multiValueRow.ejs | 2 +- src/formio/templates/multiValueTable.ejs | 2 +- 10 files changed, 49 insertions(+), 38 deletions(-) diff --git a/src/components/ButtonsToolbar/index.js b/src/components/ButtonsToolbar/index.js index 59597cbb2..e11b4fe4b 100644 --- a/src/components/ButtonsToolbar/index.js +++ b/src/components/ButtonsToolbar/index.js @@ -1,7 +1,10 @@ +import { + Button as UtrechtButton, + LinkButton as UtrechtLinkButton, +} from '@utrecht/component-library-react'; import PropTypes from 'prop-types'; import React from 'react'; -import Button from 'components/Button'; import {Literal, LiteralsProvider} from 'components/Literal'; import Loader from 'components/Loader'; import LogoutButton from 'components/LogoutButton'; @@ -28,27 +31,37 @@ const ButtonsToolbar = ({ {onNavigatePrevPage && ( - + )} {/* TODO: refactor: `const canSuspendForm = onFormSave === undefined` - this does not need to be its own prop */} {canSuspendForm && ( - + )} {showSubmitButton && ( - + )} diff --git a/src/components/LanguageSelection/LanguageSelectionDisplay.js b/src/components/LanguageSelection/LanguageSelectionDisplay.js index 6093fae58..68d997290 100644 --- a/src/components/LanguageSelection/LanguageSelectionDisplay.js +++ b/src/components/LanguageSelection/LanguageSelectionDisplay.js @@ -1,9 +1,7 @@ -import {ButtonGroup, Heading} from '@utrecht/component-library-react'; +import {ButtonGroup, Heading, LinkButton} from '@utrecht/component-library-react'; import PropTypes from 'prop-types'; import {Fragment} from 'react'; -import Button from 'components/Button'; - const Spacer = () => ; const LanguageSelectionDisplay = ({heading, headingLevel, headingId, items, onLanguageChange}) => ( @@ -14,9 +12,7 @@ const LanguageSelectionDisplay = ({heading, headingLevel, headingId, items, onLa {items.map(({current, label, lang, textContent}, i, a) => ( - + {i + 1 < a.length ? : null} ))} diff --git a/src/components/LoginButton/index.js b/src/components/LoginButton/index.js index ca2890d59..29f5e05f0 100644 --- a/src/components/LoginButton/index.js +++ b/src/components/LoginButton/index.js @@ -1,6 +1,9 @@ +import { + Button as UtrechtButton, + ButtonLink as UtrechtButtonLink, +} from '@utrecht/component-library-react'; import React from 'react'; -import Button from 'components/Button'; import FormattedLoginOption from 'types/FormattedLoginOption'; import {getBEMClassName} from 'utils'; @@ -9,19 +12,19 @@ import LoginButtonIcon from './LoginButtonIcon'; const LoginButton = ({option, ...extra}) => { let url = option.url; let extraProps = {...extra}; - let component = 'a'; + let ButtonComponent = UtrechtButtonLink; if (!url) { url = '#'; extraProps = {...extraProps, type: 'submit'}; - component = 'button'; + ButtonComponent = UtrechtButton; } return (
- +
); diff --git a/src/components/SummaryConfirmation/index.js b/src/components/SummaryConfirmation/index.js index 02494c4ad..00145be60 100644 --- a/src/components/SummaryConfirmation/index.js +++ b/src/components/SummaryConfirmation/index.js @@ -1,8 +1,11 @@ +import { + Button as UtrechtButton, + LinkButton as UtrechtLinkButton, +} from '@utrecht/component-library-react'; import {useFormikContext} from 'formik'; import PropTypes from 'prop-types'; import React, {useState} from 'react'; -import Button from 'components/Button'; import {Literal} from 'components/Literal'; import StatementCheckboxes from 'components/StatementCheckboxes'; import {Toolbar, ToolbarList} from 'components/Toolbar'; @@ -36,22 +39,22 @@ const SummaryConfirmation = ({submissionAllowed, onPrevPage}) => { {!!onPrevPage && ( - + )} {canSubmit ? ( - + ) : null} diff --git a/src/formio/components/Button.js b/src/formio/components/Button.js index 29f5cdfc6..86862e814 100644 --- a/src/formio/components/Button.js +++ b/src/formio/components/Button.js @@ -1,7 +1,5 @@ import {Formio} from 'react-formio'; -import {applyPrefix} from '../utils'; - /** * Extend the default button field to modify it to our needs. */ @@ -9,9 +7,7 @@ class Button extends Formio.Components.components.button { get inputInfo() { const info = super.inputInfo; // change the default CSS classes - info.attr.class = [applyPrefix('button'), 'utrecht-button', 'utrecht-button--html-button'].join( - ' ' - ); + info.attr.class = ['utrecht-button'].join(' '); return info; } } diff --git a/src/formio/templates/editGrid.ejs b/src/formio/templates/editGrid.ejs index 12a770e2d..1a9903848 100644 --- a/src/formio/templates/editGrid.ejs +++ b/src/formio/templates/editGrid.ejs @@ -11,11 +11,11 @@
  • - +
    • {% if (ctx.component.removeRow) { %}
  • - +
    • {% } %}
@@ -34,7 +34,7 @@ {% if (!ctx.readOnly && ctx.hasAddButton) { %}
-
diff --git a/src/formio/templates/editGridRow.ejs b/src/formio/templates/editGridRow.ejs index f2ff77e34..fd15ebba4 100644 --- a/src/formio/templates/editGridRow.ejs +++ b/src/formio/templates/editGridRow.ejs @@ -9,10 +9,10 @@
  • - +
  • - +
diff --git a/src/formio/templates/file.ejs b/src/formio/templates/file.ejs index 3ec3648d4..5642a1574 100644 --- a/src/formio/templates/file.ejs +++ b/src/formio/templates/file.ejs @@ -18,7 +18,7 @@
{% if (!ctx.disabled) { %}
-
diff --git a/src/formio/templates/multiValueRow.ejs b/src/formio/templates/multiValueRow.ejs index e00a77679..b8e58b3d3 100644 --- a/src/formio/templates/multiValueRow.ejs +++ b/src/formio/templates/multiValueRow.ejs @@ -4,7 +4,7 @@ {% if (!ctx.disabled) { %} - diff --git a/src/formio/templates/multiValueTable.ejs b/src/formio/templates/multiValueTable.ejs index f73d48aad..9a35f681a 100644 --- a/src/formio/templates/multiValueTable.ejs +++ b/src/formio/templates/multiValueTable.ejs @@ -4,7 +4,7 @@ {% if (!ctx.disabled) {%} - From fd42a6690c793721f9e28d06b7de199f69cc899e Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Fri, 13 Oct 2023 17:13:53 +0200 Subject: [PATCH 02/20] :recycle: [#462] Replace other references to our button --- src/components/ExistingSubmissionOptions.js | 10 +++++----- src/components/LogoutButton.js | 6 +++--- src/components/PaymentForm.js | 7 +++---- src/components/Sessions/RequireSession.js | 8 ++++---- src/components/SubmissionConfirmation.js | 6 +++--- .../appointments/cancel/CancelAppointment.js | 6 +++--- .../appointments/steps/ChooseProductStep.js | 13 ++++++------- src/components/modals/FormStepSaveModal.js | 6 +++--- src/components/modals/FormStepSaveModal.stories.js | 11 +++++++---- src/i18n-zod.stories.js | 6 +++--- 10 files changed, 40 insertions(+), 39 deletions(-) diff --git a/src/components/ExistingSubmissionOptions.js b/src/components/ExistingSubmissionOptions.js index c004897f1..da201ba34 100644 --- a/src/components/ExistingSubmissionOptions.js +++ b/src/components/ExistingSubmissionOptions.js @@ -1,9 +1,9 @@ +import {Button as UtrechtButton} from '@utrecht/component-library-react'; import PropTypes from 'prop-types'; import React from 'react'; import {FormattedMessage} from 'react-intl'; import {useNavigate} from 'react-router-dom'; -import Button from 'components/Button'; import {Toolbar, ToolbarList} from 'components/Toolbar'; import Types from 'types'; @@ -15,20 +15,20 @@ const ExistingSubmissionOptions = ({form, onFormAbort}) => { return ( - + - + ); diff --git a/src/components/LogoutButton.js b/src/components/LogoutButton.js index 4353fabca..58d7ae6b9 100644 --- a/src/components/LogoutButton.js +++ b/src/components/LogoutButton.js @@ -1,17 +1,17 @@ +import {Button as UtrechtButton} from '@utrecht/component-library-react'; import PropTypes from 'prop-types'; import React from 'react'; import {FormattedMessage} from 'react-intl'; -import Button from 'components/Button'; import {Toolbar, ToolbarList} from 'components/Toolbar'; const LogoutButton = ({onLogout}) => { return ( - + ); diff --git a/src/components/PaymentForm.js b/src/components/PaymentForm.js index b5f84a0fd..cb4f7c6dd 100644 --- a/src/components/PaymentForm.js +++ b/src/components/PaymentForm.js @@ -1,9 +1,8 @@ +import {Button as UtrechtButton} from '@utrecht/component-library-react'; import PropTypes from 'prop-types'; import React, {useEffect, useRef} from 'react'; import {FormattedMessage} from 'react-intl'; -import Button from 'components/Button'; - const AUTOSUBMIT_AFTER = 5000; /** @@ -31,9 +30,9 @@ const PaymentForm = ({method, url, data, autoSubmit = true}) => { return (
{dataFields} - +
); }; diff --git a/src/components/Sessions/RequireSession.js b/src/components/Sessions/RequireSession.js index b573f9676..f066ef41f 100644 --- a/src/components/Sessions/RequireSession.js +++ b/src/components/Sessions/RequireSession.js @@ -1,3 +1,4 @@ +import {Button as UtrechtButton} from '@utrecht/component-library-react'; import PropTypes from 'prop-types'; import React, {useContext, useEffect, useState} from 'react'; import {FormattedMessage, FormattedRelativeTime} from 'react-intl'; @@ -5,7 +6,6 @@ import {useTimeout, useTimeoutFn} from 'react-use'; import {ConfigContext} from 'Context'; import {apiCall} from 'api'; -import Button from 'components/Button'; import Card from 'components/Card'; import ErrorMessage from 'components/ErrorMessage'; import Link from 'components/Link'; @@ -148,9 +148,9 @@ const ExpiryModal = ({showWarning, secondsToExpiry, setWarningDismissed}) => { - + diff --git a/src/components/SubmissionConfirmation.js b/src/components/SubmissionConfirmation.js index 46cc41519..493538646 100644 --- a/src/components/SubmissionConfirmation.js +++ b/src/components/SubmissionConfirmation.js @@ -1,3 +1,4 @@ +import {Button as UtrechtButton} from '@utrecht/component-library-react'; import PropTypes from 'prop-types'; import React from 'react'; import {FormattedMessage, useIntl} from 'react-intl'; @@ -6,7 +7,6 @@ import {useAsync} from 'react-use'; import {post} from 'api'; import Anchor from 'components/Anchor'; import Body from 'components/Body'; -import Button from 'components/Button'; import Card from 'components/Card'; import ErrorBoundary from 'components/ErrorBoundary'; import FAIcon from 'components/FAIcon'; @@ -175,12 +175,12 @@ const SubmissionConfirmation = ({statusUrl, onFailure, onConfirmed, donwloadPDFT - + diff --git a/src/components/appointments/cancel/CancelAppointment.js b/src/components/appointments/cancel/CancelAppointment.js index 8e7df798c..87e56c961 100644 --- a/src/components/appointments/cancel/CancelAppointment.js +++ b/src/components/appointments/cancel/CancelAppointment.js @@ -1,3 +1,4 @@ +import {Button as UtrechtButton} from '@utrecht/component-library-react'; import {Formik} from 'formik'; import React, {useContext, useState} from 'react'; import {FormattedDate, FormattedMessage} from 'react-intl'; @@ -6,7 +7,6 @@ import {useNavigate} from 'react-router-dom'; import {ConfigContext} from 'Context'; import {post} from 'api'; import Body from 'components/Body'; -import Button from 'components/Button'; import Card from 'components/Card'; import ErrorMessage from 'components/ErrorMessage'; import {Toolbar, ToolbarList} from 'components/Toolbar'; @@ -126,12 +126,12 @@ out your email address for verification purposes.`} - + diff --git a/src/components/appointments/steps/ChooseProductStep.js b/src/components/appointments/steps/ChooseProductStep.js index acf93ca8f..bf1ac718a 100644 --- a/src/components/appointments/steps/ChooseProductStep.js +++ b/src/components/appointments/steps/ChooseProductStep.js @@ -1,3 +1,4 @@ +import {Button as UtrechtButton} from '@utrecht/component-library-react'; import {FieldArray, Form, Formik} from 'formik'; import produce from 'immer'; import PropTypes from 'prop-types'; @@ -8,7 +9,6 @@ import {useNavigate} from 'react-router-dom'; import {z} from 'zod'; import {toFormikValidationSchema} from 'zod-formik-adapter'; -import Button from 'components/Button'; import {CardTitle} from 'components/Card'; import FAIcon from 'components/FAIcon'; import {Toolbar, ToolbarList} from 'components/Toolbar'; @@ -79,9 +79,8 @@ const ChooseProductStepFields = ({values: {products = []}, validateForm}) => { {supportsMultipleProducts && (
- +
)}
@@ -134,12 +133,12 @@ const ProductWrapper = ({index, numProducts, onRemove, children}) => { {numProducts > 1 && ( - + )} diff --git a/src/components/modals/FormStepSaveModal.js b/src/components/modals/FormStepSaveModal.js index 27eb14bc7..c7bee8e8f 100644 --- a/src/components/modals/FormStepSaveModal.js +++ b/src/components/modals/FormStepSaveModal.js @@ -1,6 +1,7 @@ /** * Display a modal to allow the user to save the form step in it's current state. */ +import {Button as UtrechtButton} from '@utrecht/component-library-react'; import {Formik} from 'formik'; import PropTypes from 'prop-types'; import React, {useContext} from 'react'; @@ -10,7 +11,6 @@ import {useImmerReducer} from 'use-immer'; import {ConfigContext} from 'Context'; import {destroy, post} from 'api'; import Body from 'components/Body'; -import Button from 'components/Button'; import ErrorMessage from 'components/ErrorMessage'; import Loader from 'components/Loader'; import {Toolbar, ToolbarList} from 'components/Toolbar'; @@ -158,12 +158,12 @@ const FormStepSaveModal = ({ - + diff --git a/src/components/modals/FormStepSaveModal.stories.js b/src/components/modals/FormStepSaveModal.stories.js index 666dd54e3..c64b0eeda 100644 --- a/src/components/modals/FormStepSaveModal.stories.js +++ b/src/components/modals/FormStepSaveModal.stories.js @@ -1,10 +1,10 @@ import {useArgs} from '@storybook/client-api'; +import {Button as UtrechtButton} from '@utrecht/component-library-react'; import {rest} from 'msw'; import React from 'react'; import {BASE_URL} from 'api-mocks'; -import Button from 'components/Button'; -import {ConfigDecorator, DeprecatedRouterDecorator} from 'story-utils/decorators'; +import {ConfigDecorator} from 'story-utils/decorators'; import {default as FormStepSaveModalComponent} from './FormStepSaveModal'; @@ -49,9 +49,12 @@ export const FormStepSaveModal = { const [_, updateArgs] = useArgs(); return ( <> - + { diff --git a/src/i18n-zod.stories.js b/src/i18n-zod.stories.js index 9f58867fc..180b532b8 100644 --- a/src/i18n-zod.stories.js +++ b/src/i18n-zod.stories.js @@ -1,11 +1,11 @@ import {userEvent, within} from '@storybook/testing-library'; import {ButtonGroup} from '@utrecht/component-library-react'; +import {Button as UtrechtButton} from '@utrecht/component-library-react'; import {Form, Formik} from 'formik'; import {useIntl} from 'react-intl'; import {z} from 'zod'; import {toFormikValidationSchema} from 'zod-formik-adapter'; -import Button from 'components/Button'; import {EmailField, TextField} from 'components/forms'; import useZodErrorMap from 'hooks/useZodErrorMap'; @@ -105,9 +105,9 @@ const AccessibleErrorsExample = ({onSubmit}) => { - +
From 73013a061dc1eaa5d14113a292cf59bae46f81f1 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Mon, 23 Oct 2023 13:02:20 +0200 Subject: [PATCH 03/20] :sparkles: [#462] Add wrapper for disabled-clickable button --- .../DisabledClickableButtonWrapper.js | 20 +++++++++++++++++++ src/components/SummaryConfirmation/index.js | 19 ++++++++++++------ .../_disabled-clickable-button.scss | 15 ++++++++++++++ src/styles.scss | 1 + 4 files changed, 49 insertions(+), 6 deletions(-) create mode 100644 src/components/SummaryConfirmation/DisabledClickableButtonWrapper.js create mode 100644 src/scss/components/_disabled-clickable-button.scss diff --git a/src/components/SummaryConfirmation/DisabledClickableButtonWrapper.js b/src/components/SummaryConfirmation/DisabledClickableButtonWrapper.js new file mode 100644 index 000000000..9a3997c82 --- /dev/null +++ b/src/components/SummaryConfirmation/DisabledClickableButtonWrapper.js @@ -0,0 +1,20 @@ +import PropTypes from 'prop-types'; +import React from 'react'; + +const DisabledClickableButtonWrapper = ({disabled, onDisabledClick, children}) => { + if (!disabled) return <>{children}; + + return ( +
+
{children}
+
+ ); +}; + +DisabledClickableButtonWrapper.propTypes = { + disabled: PropTypes.bool.isRequired, + onDisabledClick: PropTypes.func.isRequired, + children: PropTypes.node.isRequired, +}; + +export default DisabledClickableButtonWrapper; diff --git a/src/components/SummaryConfirmation/index.js b/src/components/SummaryConfirmation/index.js index 00145be60..a3a2ea9ea 100644 --- a/src/components/SummaryConfirmation/index.js +++ b/src/components/SummaryConfirmation/index.js @@ -12,6 +12,8 @@ import {Toolbar, ToolbarList} from 'components/Toolbar'; import {SUBMISSION_ALLOWED} from 'components/constants'; import useFormContext from 'hooks/useFormContext'; +import DisabledClickableButtonWrapper from './DisabledClickableButtonWrapper'; + const isSubmitEnabled = (statementsInfo = [], statementsValues) => { return statementsInfo.every(info => { if (!info.validate.required) return true; @@ -46,15 +48,20 @@ const SummaryConfirmation = ({submissionAllowed, onPrevPage}) => { {canSubmit ? ( - setShowStatementWarnings(true)} > - - + + + + ) : null} diff --git a/src/scss/components/_disabled-clickable-button.scss b/src/scss/components/_disabled-clickable-button.scss new file mode 100644 index 000000000..0d2637875 --- /dev/null +++ b/src/scss/components/_disabled-clickable-button.scss @@ -0,0 +1,15 @@ +@import '../mixins/prefix'; + +.#{prefix(disabled-clickable-button)} { + position: relative; + + &__clickable-wrap::before { + cursor: var(--utrecht-action-disabled-cursor, not-allowed); + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} diff --git a/src/styles.scss b/src/styles.scss index 1bc9e1e28..16ef63f87 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -64,3 +64,4 @@ @import './scss/components/floating-widget'; @import './scss/components/date-picker'; @import './scss/components/input-container'; +@import './scss/components/disabled-clickable-button'; From a04dc1d95cd3817c082c535da757be64f6e92f2a Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Mon, 23 Oct 2023 16:06:42 +0200 Subject: [PATCH 04/20] :recycle: [#462] Update stories --- src/components/Summary/Summary.stories.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/Summary/Summary.stories.js b/src/components/Summary/Summary.stories.js index c918d273c..fd4e1e8d8 100644 --- a/src/components/Summary/Summary.stories.js +++ b/src/components/Summary/Summary.stories.js @@ -209,9 +209,14 @@ export const MultipleRequiredStatements = { const submitButton = canvas.getByRole('button', {name: 'Confirm'}); expect(submitButton).toHaveAttribute('aria-disabled', 'true'); + const submitButtonWrapper = submitButton.parentElement; + expect(submitButtonWrapper.classList).toContain( + 'openforms-disabled-clickable-button__clickable-wrap' + ); + // Clicking 'submit' without checking the statements results in all the warnings being // displayed - await userEvent.click(submitButton); + await userEvent.click(submitButtonWrapper); expect( await canvas.findByText('U moet akkoord gaan met het privacybeleid om door te gaan') ).toBeVisible(); @@ -243,7 +248,9 @@ export const MultipleRequiredStatements = { expect( canvas.queryByText('U moet akkoord gaan met het privacybeleid om door te gaan') ).toBeNull(); - expect(submitButton).not.toHaveAttribute('aria-disabled', 'true'); + + const updatedSubmitButton = canvas.getByRole('button', {name: 'Confirm'}); + expect(updatedSubmitButton).toHaveAttribute('aria-disabled', 'false'); } ); }, From 8f65b6cbb432f0102de1dfdcd7146ef0514addab Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Tue, 24 Oct 2023 09:24:50 +0200 Subject: [PATCH 05/20] :white_check_mark: [#462] Fix jest tests --- .../appointments/CreateAppointment/CreateAppointment.spec.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/appointments/CreateAppointment/CreateAppointment.spec.js b/src/components/appointments/CreateAppointment/CreateAppointment.spec.js index ce230e5ff..c8c3f02a3 100644 --- a/src/components/appointments/CreateAppointment/CreateAppointment.spec.js +++ b/src/components/appointments/CreateAppointment/CreateAppointment.spec.js @@ -167,7 +167,8 @@ describe('Create appointment status checking', () => { await user.click(checkbox); } const submitButton = screen.getByRole('button', {name: 'Confirm'}); - expect(submitButton).not.toHaveAttribute('aria-disabled'); + expect(submitButton).toHaveAttribute('aria-disabled', 'false'); + await user.click(submitButton); await screen.findByText(/Processing/); // wait for summary page to be rendered again From f32303654616c95f7df3bd992a7d93d50f12f1bb Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Tue, 24 Oct 2023 10:31:54 +0200 Subject: [PATCH 06/20] :sparkles: [#462] Added stories for Utrecht button --- src/components/Button/Button.mdx | 26 +++++ .../Button/UtrechtButton.stories.js | 103 ++++++++++++++++++ 2 files changed, 129 insertions(+) create mode 100644 src/components/Button/UtrechtButton.stories.js diff --git a/src/components/Button/Button.mdx b/src/components/Button/Button.mdx index db080e6b8..bf0596bcd 100644 --- a/src/components/Button/Button.mdx +++ b/src/components/Button/Button.mdx @@ -1,6 +1,7 @@ import {ArgTypes, Canvas, Meta, Story} from '@storybook/blocks'; import * as ButtonStories from './Button.stories'; +import * as UtrechtButtonStories from './UtrechtButton.stories'; @@ -22,6 +23,20 @@ Any additional props are passed down to the button component (or custom componen +### Utrecht variants + +More information on the Utrecht buttons can be found +[here](https://nl-design-system.github.io/themes/?path=/docs/button--gemeente-utrecht). + + + + + + + + + + ## Icon buttons @@ -29,12 +44,23 @@ Any additional props are passed down to the button component (or custom componen +### Utrecht variants + + + + + + ## Disabled state Passing the `disabled` prop sets the appropriate `aria-disabled` attribute. +### Utrecht variants + + + ## Replacing the HTML element You can pass an alternative `component` to render instead of the default `a` tag. This may be diff --git a/src/components/Button/UtrechtButton.stories.js b/src/components/Button/UtrechtButton.stories.js new file mode 100644 index 000000000..49894e58e --- /dev/null +++ b/src/components/Button/UtrechtButton.stories.js @@ -0,0 +1,103 @@ +import { + Button as UtrechtButton, + ButtonLink as UtrechtButtonLink, + LinkButton as UtrechtLinkButton, +} from '@utrecht/component-library-react'; + +import FAIcon from '../FAIcon'; + +export default { + title: 'Pure React components / Utrecht Button', + component: UtrechtButton, + argTypes: { + children: {table: {disable: true}}, + }, + parameters: { + controls: {sort: 'requiredFirst'}, + }, +}; + +const render = ({label, component, ...args}) => { + const ButtonComponent = component; + return {label}; +}; + +export const UtrechtDefault = { + render, + args: { + label: 'Default', + component: UtrechtButton, + }, +}; + +export const UtrechtPrimary = { + render, + args: { + label: 'Primary', + component: UtrechtButton, + appearance: 'primary-action-button', + }, +}; + +export const UtrechtSecondary = { + render, + args: { + label: 'Secondary', + component: UtrechtButton, + appearance: 'secondary-action-button', + }, +}; + +export const UtrechtDanger = { + render, + args: { + label: 'Danger', + component: UtrechtButton, + appearance: 'primary-action-button', + hint: 'danger', + }, +}; + +export const UtrechtLinkLooksLikeButton = { + render, + args: { + label: 'Button-like link', + component: UtrechtButtonLink, + }, +}; + +export const UtrechtButtonLooksLikeLink = { + render, + args: { + label: 'Link-like button', + component: UtrechtLinkButton, + }, +}; + +export const UtrechtIconButton = { + render, + args: { + label: , + component: UtrechtButton, + appearance: 'subtle-button', + }, +}; + +export const UtrechtIconButtonDanger = { + render, + args: { + label: , + component: UtrechtButton, + appearance: 'subtle-button', + hint: 'danger', + }, +}; + +export const UtrechtButtonDisabled = { + render, + args: { + label: 'Disabled', + component: UtrechtButton, + disabled: true, + }, +}; From 371ccd78bad611076ad14459468661a043aaed6e Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Wed, 25 Oct 2023 17:42:34 +0200 Subject: [PATCH 07/20] :lipstick: [#462] Added borders to buttons --- src/scss/components/_button.scss | 58 ++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index d482f9bd1..043ec5a3e 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -227,3 +227,61 @@ $button-padding-h: $grid-margin-2; } } } + +// TODO: can be removed once there are utrecht design tokens for the bottom/right border color +// issue: https: //github.com/nl-design-system/utrecht/issues/1406 +.utrecht-button { + @include bem.modifier('primary-action') { + &:not(.utrecht-button--danger) { + // --utrecht-button-primary-action-focus-border-color is used to make the borders invisible, + // and the rules below to make the right/bottom borders visible + border-right-color: var(--of-button-primary-color-border); + border-bottom-color: var(--of-button-primary-color-border); + + &:hover, + &:focus-visible { + border-right-color: var(--of-button-primary-focus-color-border) !important; + border-bottom-color: var(--of-button-primary-focus-color-border) !important; + } + } + } + + @include bem.modifier('danger') { + &:not(.utrecht-button--subtle) { + // --utrecht-button-primary-action-danger-border-color is used to make the borders invisible, + // and the rules below to make the right/bottom borders visible + border-right-color: var(--of-button-danger-color-border); + border-bottom-color: var(--of-button-danger-color-border); + + &:hover, + &:focus-visible { + border-right-color: var(--of-button-danger-focus-color-border) !important; + border-bottom-color: var(--of-button-danger-focus-color-border) !important; + } + } + } + + @include bem.modifier('secondary-action') { + border-right-color: var(--of-button-active-color-border); + border-bottom-color: var(--of-button-active-color-border); + + &:hover, + &:focus-visible { + border-right-color: var(--of-button-hover-color-border) !important; + border-bottom-color: var(--of-button-hover-color-border) !important; + } + } +} + +.utrecht-button-link { + @include bem.modifier('html-a') { + border-right-color: var(--of-button-active-color-border); + border-bottom-color: var(--of-button-active-color-border); + + &:hover, + &:focus-visible { + border-right-color: var(--of-button-hover-color-border) !important; + border-bottom-color: var(--of-button-hover-color-border) !important; + } + } +} From 2c7cd84d38bcc276b46f5704111481f3d5abd185 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Wed, 25 Oct 2023 18:06:08 +0200 Subject: [PATCH 08/20] :fire: [#462] Removed old button styles --- src/components/Button/Button.mdx | 45 +---- src/components/Button/Button.stories.js | 144 --------------- src/scss/components/_button.scss | 225 ------------------------ src/scss/components/_file-upload.scss | 2 - 4 files changed, 2 insertions(+), 414 deletions(-) delete mode 100644 src/components/Button/Button.stories.js diff --git a/src/components/Button/Button.mdx b/src/components/Button/Button.mdx index bf0596bcd..4f390f4eb 100644 --- a/src/components/Button/Button.mdx +++ b/src/components/Button/Button.mdx @@ -1,30 +1,13 @@ import {ArgTypes, Canvas, Meta, Story} from '@storybook/blocks'; -import * as ButtonStories from './Button.stories'; import * as UtrechtButtonStories from './UtrechtButton.stories'; - + # Buttons -Any additional props are passed down to the button component (or custom component, if using that). - - - ## Variants - - - - - - - - - - -### Utrecht variants - More information on the Utrecht buttons can be found [here](https://nl-design-system.github.io/themes/?path=/docs/button--gemeente-utrecht). @@ -39,13 +22,6 @@ More information on the Utrecht buttons can be found ## Icon buttons - - - - - -### Utrecht variants - @@ -55,25 +31,8 @@ More information on the Utrecht buttons can be found Passing the `disabled` prop sets the appropriate `aria-disabled` attribute. - - -### Utrecht variants - -## Replacing the HTML element - -You can pass an alternative `component` to render instead of the default `a` tag. This may be -either: - -- built in HTML tags, passing a string (e.g. `span`) -- custom React components (e.g. `component={MyComponent}`) - - - - - - ## Props - + diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js deleted file mode 100644 index 4439e641e..000000000 --- a/src/components/Button/Button.stories.js +++ /dev/null @@ -1,144 +0,0 @@ -import {default as AnchorComponent} from 'components/Anchor'; -import Button, {VARIANTS} from 'components/Button'; -import FAIcon from 'components/FAIcon'; - -export default { - title: 'Pure React components / Button', - component: Button, - argTypes: { - variant: { - options: VARIANTS, - control: { - type: 'radio', - }, - }, - extraVariants: { - type: {name: 'array'}, - }, - children: {table: {disable: true}}, - onDisabledClick: {table: {disable: true}}, - }, - parameters: { - controls: {sort: 'requiredFirst'}, - }, -}; - -const render = ({label, ...args}) => ; - -export const ExtraProps = { - name: 'Extra props', - render, - args: { - title: 'Title attribute', - label: 'Hover me', - }, -}; - -export const Default = { - render, - args: {label: 'Default'}, -}; - -export const Primary = { - render, - args: { - label: 'Primary', - variant: 'primary', - }, -}; - -export const Secondary = { - render, - args: { - label: 'Secondary', - variant: 'secondary', - }, -}; - -export const Danger = { - render, - args: { - label: 'Danger', - variant: 'danger', - }, -}; - -export const Anchor = { - render, - args: { - label: 'UtrechtButton', - variant: 'anchor', - }, -}; - -export const AnchorButton = { - name: 'Anchor/button', - render, - args: { - label: 'button tag', - variant: 'anchor', - component: 'button', - }, -}; - -export const AnchorA = { - name: 'Anchor/a', - render, - args: { - label: 'anchor tag', - variant: 'anchor', - component: 'a', - href: '#', - }, -}; - -export const IconOnly = { - name: 'Icon only', - args: { - title: 'Icon only', - variant: 'icon-only', - icon: 'pen', - }, - render: ({icon, ...args}) => ( - - ), -}; - -export const IconOnlyDanger = { - name: 'Icon only danger', - render: IconOnly.render, - args: { - ...IconOnly.args, - title: 'Icon only danger', - variant: 'icon-only', - extraVariants: ['danger'], - }, -}; - -export const Disabled = { - render, - args: { - label: 'Button', - disabled: true, - onDisabledClick: () => alert('clicked disabled button'), - }, -}; - -export const CustomComponent = { - render, - args: { - label: 'Button', - component: 'div', - value: 'div element', - }, -}; - -export const Link = { - render, - args: { - label: 'Link', - component: AnchorComponent, - }, -}; diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 043ec5a3e..7ffd7d414 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -1,233 +1,8 @@ -/** - * TODO: properly refactor these components, the styles are bonkers... - */ -@use 'sass:math'; @use 'microscope-sass/lib/bem'; -@import '~microscope-sass/lib/grid'; -@import '~microscope-sass/lib/typography'; - @import '@utrecht/components/dist/button/css/index.css'; @import '@utrecht/components/dist/button-link/css/index.css'; -@import '../mixins/prefix'; - -$button-line-height: $typography-line-height-text-big * $typography-font-size-text-big; -$button-line-height-px: math.div($button-line-height, ($button-line-height * 0 + 1)) * 16px; -$button-padding-v: math.div(($grid-row-height - $button-line-height-px), 2) - - $typography-size-border; -$button-padding-h: $grid-margin-2; - -@mixin button-theme( - $name, - $color, - $color-background, - $color-border: var(--of-color-bg), - $color-background-hover: null, - $color-border-hover: null, - $color-active: null, - $color-background-active: null, - $color-border-active: null, - $force-colors: false, - $color-border-focus: null -) { - // build the selector either as just the parent or the parent with modifier, - // based on the theme name - $sel: #{&}; - - @if $name != '' { - $sel: '#{&}--#{$name}'; - } - - // now output the actual CSS rules - @at-root #{$sel} { - @if $force-colors { - color: $color !important; - background-color: $color-background !important; - } @else { - color: $color; - background-color: $color-background; - } - - // TODO: can be removed once there are utrecht design tokens for the bottom/right - // border color - border-right-color: $color-border !important; - border-bottom-color: $color-border !important; - - &:focus, - &:focus-visible { - // TODO: can be removed once there are utrecht design tokens for the bottom/right border color - // issue: https: //github.com/nl-design-system/utrecht/issues/1406 - border-color: $color-border-focus !important; - border-right-color: $color-border-focus !important; - border-bottom-color: $color-border-focus !important; - // TODO: can be removed once there are utrecht design tokens for the border-width - border-width: 2px !important; - } - - &:not([aria-disabled='true']):hover { - @if $color-background-hover { - background-color: $color-background-hover; - } - - @if $color-border-hover { - // TODO: can be removed once there are utrecht design tokens for the bottom/right - // border color - border-right-color: $color-border-hover !important; - border-bottom-color: $color-border-hover !important; - } - } - - &:active { - // TODO: can be removed once there are utrecht design tokens for the bottom/right - // border color - @if $color-active { - color: $color-active !important; - } - - @if $color-background-active { - background-color: $color-background-active !important; - } - - @if $color-border-active { - // TODO: can be removed once there are utrecht design tokens for the bottom/right - // border color - border-top-color: $color-border-active !important; - border-right-color: transparent !important; - border-left-color: $color-border-active !important; - border-bottom-color: transparent !important; - } - } - } -} - -.#{prefix(button)} { - @include body; - @include body--big; - @include border(all, $color: transparent, $size: 2px); - @include button-theme( - '', - $typography-color-text, - $color-background, - $color-border, - $color-background-hover: var(--of-button-hover-bg), - $color-border-hover: var(--of-button-hover-color-border), - $color-active: var(--of-button-active-fg), - $color-background-active: - var(--of-button-active-bg, var(--utrecht-button-active-background-color)), - $color-border-active: - var(--of-button-active-color-border, var(--utrecht-button-active-border-color)), - $color-border-focus: - var(--of-button-focus-color-border, var(--utrecht-button-focus-border-color)) - ); - @include button-theme( - 'primary', - var(--of-button-primary-fg), - var(--of-button-primary-bg), - var(--of-button-primary-color-border), - $color-background-hover: var(--of-button-primary-hover-bg), - $color-border-hover: var(--of-button-primary-hover-color-border), - $color-active: var(--of-button-primary-active-fg), - $color-background-active: var(--of-button-primary-active-bg), - $color-border-active: var(--of-button-primary-active-color-border), - $color-border-focus: - var( - --of-button-primary-focus-color-border, - var(--utrecht-button-primary-action-focus-border-color) - ) - ); - @include button-theme( - 'danger', - var(--of-button-danger-fg), - var(--of-button-danger-bg), - var(--of-button-danger-color-border), - $color-background-hover: var(--of-button-danger-hover-bg), - $color-border-hover: var(--of-button-danger-hover-color-border), - $color-active: var(--of-button-danger-active-fg), - $color-background-active: var(--of-button-danger-active-bg), - $color-border-active: var(--of-button-danger-active-color-border), - $color-border-focus: - var( - --of-button-danger-focus-color-border, - var(--utrecht-button-primary-action-danger-focus-border-color) - ) - ); - - appearance: none; - border-radius: 0; - display: flex; - align-items: center; - padding: $button-padding-v $button-padding-h; - text-decoration: none; - float: left; - - @media print { - display: none; - } - - &:not([aria-disabled='true']) { - cursor: pointer; - } - - // styling for disabled button - &[aria-disabled='true'] { - cursor: not-allowed; - filter: saturate(0); - opacity: 0.5; - } - - .fa-icon:not(:last-child) { - margin-right: $button-padding-h; - } - - @include bem.modifier('icon-only') { - color: var(--of-button-fg); - background-color: transparent; - border-style: none; - --utrecht-button-hover-background-color: transparent; - - &:hover, - &:active { - --utrecht-button-hover-color: var(--of-button-fg); - color: var(--of-button-fg); - background-color: transparent; - border-style: none; - } - - &.#{prefix(button)}--danger { - color: var(--of-button-danger-bg); - } - } - - // anchor variants, these map to utrecht components: - // * UtrechtButton (the default) - // * UtrechtButtonLink (`a` component) - // * UtrechtLinkButton (`button` component) - @include bem.modifier('anchor') { - @include button-theme( - '', - var(--of-button-anchor-fg, var(--utrecht-link-color)), - var(--of-button-anchor-bg), - var(--of-button-anchor-color-border), - $color-background-hover: var(--of-button-anchor-hover-bg, var(--utrecht-link-hover-color)), - $color-border-hover: var(--of-button-anchor-hover-color-border), - $color-active: var(--of-button-anchor-active-fg), - $color-background-active: var(--of-button-anchor-active-bg), - $color-border-active: var(--of-button-anchor-active-color-border), - $color-border-focus: - var(--of-button-anchor-focus-color-border, var(--utrecht-button-focus-border-color)), - $force-colors: true // there will not be an anchor variant - ); - - // the OPPOSITE of what we normally do - text-decoration: var(--utrecht-link-hover-text-decoration, none); - &:hover { - --of-button-anchor-fg: var(--utrecht-link-hover-color); - text-decoration: var(--utrecht-link-text-decoration, underline); - } - } -} - // TODO: can be removed once there are utrecht design tokens for the bottom/right border color // issue: https: //github.com/nl-design-system/utrecht/issues/1406 .utrecht-button { diff --git a/src/scss/components/_file-upload.scss b/src/scss/components/_file-upload.scss index d11c1be73..9d669a0ab 100644 --- a/src/scss/components/_file-upload.scss +++ b/src/scss/components/_file-upload.scss @@ -153,8 +153,6 @@ we don't have strict BEM naming here. button[ref='takePictureButton'], button[ref='toggleCameraMode'] { - @extend .#{prefix('button')}; - @extend .#{prefix('button--primary')}; display: inline-block; float: none; @include mobile-only { From 8e8f0cfc1db55762446f80c1d72b954440fb3516 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Thu, 26 Oct 2023 10:16:32 +0200 Subject: [PATCH 09/20] :construction: [#462] Make sure no default button is used --- src/formio/components/Button.js | 2 +- src/formio/templates/editGridRow.ejs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/formio/components/Button.js b/src/formio/components/Button.js index 86862e814..4939a7c28 100644 --- a/src/formio/components/Button.js +++ b/src/formio/components/Button.js @@ -7,7 +7,7 @@ class Button extends Formio.Components.components.button { get inputInfo() { const info = super.inputInfo; // change the default CSS classes - info.attr.class = ['utrecht-button'].join(' '); + info.attr.class = 'utrecht-button utrecht-button--secondary-action'; return info; } } diff --git a/src/formio/templates/editGridRow.ejs b/src/formio/templates/editGridRow.ejs index fd15ebba4..f60e3e359 100644 --- a/src/formio/templates/editGridRow.ejs +++ b/src/formio/templates/editGridRow.ejs @@ -9,7 +9,7 @@
@@ -133,12 +133,12 @@ const ProductWrapper = ({index, numProducts, onRemove, children}) => { {numProducts > 1 && ( - + - + )} diff --git a/src/components/modals/FormStepSaveModal.stories.js b/src/components/modals/FormStepSaveModal.stories.js index c64b0eeda..8404fe75f 100644 --- a/src/components/modals/FormStepSaveModal.stories.js +++ b/src/components/modals/FormStepSaveModal.stories.js @@ -1,9 +1,9 @@ import {useArgs} from '@storybook/client-api'; -import {Button as UtrechtButton} from '@utrecht/component-library-react'; import {rest} from 'msw'; import React from 'react'; import {BASE_URL} from 'api-mocks'; +import {OFButton} from 'components/Button'; import {ConfigDecorator} from 'story-utils/decorators'; import {default as FormStepSaveModalComponent} from './FormStepSaveModal'; @@ -49,12 +49,9 @@ export const FormStepSaveModal = { const [_, updateArgs] = useArgs(); return ( <> - updateArgs({isOpen: true})} - > + updateArgs({isOpen: true})}> Open Modal - + { diff --git a/src/i18n-zod.stories.js b/src/i18n-zod.stories.js index 180b532b8..b52b7986e 100644 --- a/src/i18n-zod.stories.js +++ b/src/i18n-zod.stories.js @@ -1,11 +1,11 @@ import {userEvent, within} from '@storybook/testing-library'; import {ButtonGroup} from '@utrecht/component-library-react'; -import {Button as UtrechtButton} from '@utrecht/component-library-react'; import {Form, Formik} from 'formik'; import {useIntl} from 'react-intl'; import {z} from 'zod'; import {toFormikValidationSchema} from 'zod-formik-adapter'; +import {OFButton} from 'components/Button'; import {EmailField, TextField} from 'components/forms'; import useZodErrorMap from 'hooks/useZodErrorMap'; @@ -105,9 +105,9 @@ const AccessibleErrorsExample = ({onSubmit}) => { - + Submit - + From b09a6042296483ad7d5bc971bcc23cc4401956f1 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Fri, 27 Oct 2023 17:00:48 +0200 Subject: [PATCH 15/20] :lipstick: [#462] Limit style changes to our theme in the button --- src/scss/components/_button.scss | 73 +++----------------------------- 1 file changed, 5 insertions(+), 68 deletions(-) diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 420d74e44..4b9e3a00f 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -3,73 +3,10 @@ @import '@utrecht/components/dist/button/css/index.css'; @import '@utrecht/components/dist/button-link/css/index.css'; -// TODO: can be removed once there are utrecht design tokens for the bottom/right border color -// issue: https: //github.com/nl-design-system/utrecht/issues/1406 -.utrecht-button { - @include bem.modifier('primary-action') { - &:not(.utrecht-button--danger) { - &:not(.utrecht-button--disabled) { - // --utrecht-button-primary-action-focus-border-color is used to make the borders invisible, - // and the rules below to make the right/bottom borders visible - border-right-color: var(--of-button-primary-color-border); - border-bottom-color: var(--of-button-primary-color-border); - - &:hover, - &:focus-visible { - border-right-color: var(--of-button-primary-focus-color-border) !important; - border-bottom-color: var(--of-button-primary-focus-color-border) !important; - } - } - } - } - - @include bem.modifier('danger') { - &:not(.utrecht-button--subtle) { - // --utrecht-button-primary-action-danger-border-color is used to make the borders invisible, - // and the rules below to make the right/bottom borders visible - border-right-color: var(--of-button-danger-color-border); - border-bottom-color: var(--of-button-danger-color-border); - - &:hover, - &:focus-visible { - border-right-color: var(--of-button-danger-focus-color-border) !important; - border-bottom-color: var(--of-button-danger-focus-color-border) !important; - } - } - } - - @include bem.modifier('secondary-action') { - border-right-color: var(--of-button-active-color-border); - border-bottom-color: var(--of-button-active-color-border); - - &:hover, - &:focus-visible { - border-right-color: var(--of-button-hover-color-border) !important; - border-bottom-color: var(--of-button-hover-color-border) !important; - } - } -} - -.utrecht-button-link { - @include bem.modifier('primary-action') { - border-right-color: var(--of-button-primary-color-border); - border-bottom-color: var(--of-button-primary-color-border); - - &:hover, - &:focus-visible { - border-right-color: var(--of-button-primary-focus-color-border) !important; - border-bottom-color: var(--of-button-primary-focus-color-border) !important; - } - } - - @include bem.modifier('secondary-action') { - border-right-color: var(--of-button-active-color-border); - border-bottom-color: var(--of-button-active-color-border); - - &:hover, - &:focus-visible { - border-right-color: var(--of-button-hover-color-border) !important; - border-bottom-color: var(--of-button-hover-color-border) !important; - } +.openforms-theme { + .utrecht-button, + .utrecht-button-link { + border-block-start-color: transparent !important; + border-inline-start-color: transparent !important; } } From 9e4c865a2f94ba6940cc12c76d82fe8a3420b7ca Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Mon, 30 Oct 2023 10:51:19 +0100 Subject: [PATCH 16/20] :fire: [#462] Remove unused import --- src/components/ButtonsToolbar/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/ButtonsToolbar/index.js b/src/components/ButtonsToolbar/index.js index 5c419f693..06767d356 100644 --- a/src/components/ButtonsToolbar/index.js +++ b/src/components/ButtonsToolbar/index.js @@ -1,7 +1,4 @@ -import { - Button as UtrechtButton, - LinkButton as UtrechtLinkButton, -} from '@utrecht/component-library-react'; +import {LinkButton as UtrechtLinkButton} from '@utrecht/component-library-react'; import PropTypes from 'prop-types'; import React from 'react'; From c10e4ae3f24b8c18c3eb1711b0de0eb34a349839 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Mon, 30 Oct 2023 10:51:36 +0100 Subject: [PATCH 17/20] :arrow_up: [#462] Upgrade design tokens --- design-tokens | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/design-tokens b/design-tokens index 8fa3b82ae..fd73bc144 160000 --- a/design-tokens +++ b/design-tokens @@ -1 +1 @@ -Subproject commit 8fa3b82aeafdee6199edc6ad8f619bc884771bd1 +Subproject commit fd73bc144f4ae2b065948af3ae271754c11b10d5 From 53b553124fd0b3d39a78e4545e92aa3c0eedde11 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Mon, 30 Oct 2023 13:56:19 +0100 Subject: [PATCH 18/20] :arrow_up: [#462] Upgrade design tokens --- design-tokens | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/design-tokens b/design-tokens index fd73bc144..22353ac0e 160000 --- a/design-tokens +++ b/design-tokens @@ -1 +1 @@ -Subproject commit fd73bc144f4ae2b065948af3ae271754c11b10d5 +Subproject commit 22353ac0e07bebbf4cd149bee2ec507e9e3401ca From ec9ac4a8dda793f8c78eda0e4a0bf5af5fe9ec1c Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Mon, 30 Oct 2023 16:44:59 +0100 Subject: [PATCH 19/20] :arrow_up: [#462] Upgrade version of design tokens --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index dc2e99693..5ef7ee078 100644 --- 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.41.0", + "@open-formulieren/design-tokens": "^0.44.0", "@sentry/react": "^6.13.2", "@sentry/tracing": "^6.13.2", "@trivago/prettier-plugin-sort-imports": "^4.0.0", From ad125cbcac2016521412f188df090a47949b3886 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Mon, 30 Oct 2023 18:33:31 +0100 Subject: [PATCH 20/20] :lipstick: [#462] Final button tweaks, hopefully * Updated to design tokens for tab-focus styles * Updated CSS override to be minimally invasive * Updated changelog with extra migration actions * Renamed MDX documentation to get proper 'Docs' label in storybook * Updated stories to give `href` attribute to anchor tags, which makes them tabbable. Styles are wonky, but so are they in main. --- CHANGELOG.rst | 31 +++++++++++-------- design-tokens | 2 +- package.json | 2 +- .../Button/{Button.mdx => OFButton.mdx} | 0 src/components/Button/OFButton.stories.js | 4 +++ src/formio/templates/editGrid.ejs | 2 +- src/formio/templates/editGridRow.ejs | 2 +- src/scss/components/_button.scss | 15 ++++++--- 8 files changed, 37 insertions(+), 21 deletions(-) rename src/components/Button/{Button.mdx => OFButton.mdx} (100%) diff --git a/CHANGELOG.rst b/CHANGELOG.rst index 4213442c9..9fdab16ad 100644 --- a/CHANGELOG.rst +++ b/CHANGELOG.rst @@ -14,22 +14,27 @@ In this version, the button component has been refactored to use the Utrecht but In order to maintain the same style as in previous versions, the following Utrecht design tokens should be set: -* `--utrecht-button-secondary-action-danger-background-color` takes the value of the old `--of-button-danger-bg` -* `--utrecht-button-secondary-action-danger-color` takes the value of the old `--of-button-danger-fg` -* `--utrecht-button-subtle-danger-background-color` takes the value of `--of-color-danger` -* `--utrecht-button-subtle-danger-hover-background-color` takes the value `--of-color-bg` -* `--utrecht-button-subtle-danger-active-background-color` takes the value of the old `--of-button-danger-active-bg` -* `--utrecht-button-disabled-color`. This does not take the value of an old token. For the - Open Forms theme this is now `#ffffff`. -* `--utrecht-button-disabled-background-color`. This does not take the value of an old token, +* ``--utrecht-button-primary-action-focus-border-color`` has ``#000000`` (black) in the Open Forms + theme. +* ``--utrecht-button-primary-action-danger-focus-border-color`` has ``#000000`` (black) in the + Open Forms theme. +* ``--utrecht-button-secondary-action-danger-background-color`` takes the value of the old ``--of-button-danger-bg`` +* ``--utrecht-button-secondary-action-danger-color`` takes the value of the old ``--of-button-danger-fg`` +* ``--utrecht-button-secondary-action-focus-border-color`` takes the value of the old ``--of-color-focus-border`` +* ``--utrecht-button-subtle-danger-background-color`` takes the value of ``--of-color-danger`` +* ``--utrecht-button-subtle-danger-hover-background-color`` takes the value ``--of-color-bg`` +* ``--utrecht-button-subtle-danger-active-background-color`` takes the value of the old ``--of-button-danger-active-bg`` +* ``--utrecht-button-disabled-color``. This does not take the value of an old token. For the + Open Forms theme this is now ``#ffffff``. +* ``--utrecht-button-disabled-background-color``. This does not take the value of an old token, the colour was previously obtained by graying out the primary button. For the Open Forms theme, - this is now `#a02017`. -* `--utrecht-action-disabled-cursor`. This does not take the value of an old token. It controls + this is now ``#a02017``. +* ``--utrecht-action-disabled-cursor``. This does not take the value of an old token. It controls the looks of the cursor when hovering a disabled button. For the Open Forms theme, this is now - `not-allowed`. -* `--utrecht-action-submit-cursor`. This does not take the value of an old token. It controls the + ``not-allowed``. +* ``--utrecht-action-submit-cursor``. This does not take the value of an old token. It controls the looks of the cursor when hovering over a submit button. For the Open Forms theme, this is now - `pointer`. + ``pointer``. 1.6.0-alpha.0 (2023-10-02) diff --git a/design-tokens b/design-tokens index 22353ac0e..1fc3a5667 160000 --- a/design-tokens +++ b/design-tokens @@ -1 +1 @@ -Subproject commit 22353ac0e07bebbf4cd149bee2ec507e9e3401ca +Subproject commit 1fc3a5667ed656c554624aefaaca3650fd0bf94a diff --git a/package.json b/package.json index 5ef7ee078..264d89e64 100644 --- 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.0", + "@open-formulieren/design-tokens": "^0.44.1", "@sentry/react": "^6.13.2", "@sentry/tracing": "^6.13.2", "@trivago/prettier-plugin-sort-imports": "^4.0.0", diff --git a/src/components/Button/Button.mdx b/src/components/Button/OFButton.mdx similarity index 100% rename from src/components/Button/Button.mdx rename to src/components/Button/OFButton.mdx diff --git a/src/components/Button/OFButton.stories.js b/src/components/Button/OFButton.stories.js index b7b9da694..c242ccd26 100644 --- a/src/components/Button/OFButton.stories.js +++ b/src/components/Button/OFButton.stories.js @@ -64,6 +64,7 @@ export const UtrechtLinkLooksLikeDefaultButton = { args: { label: 'Default', component: UtrechtButtonLink, + href: '#', }, }; @@ -72,6 +73,7 @@ export const UtrechtLinkLooksLikePrimaryButton = { args: { label: 'Primary', component: UtrechtButtonLink, + href: '#', appearance: 'primary-action-button', }, }; @@ -81,6 +83,7 @@ export const UtrechtLinkLooksLikeSecondaryButton = { args: { label: 'Secondary', component: UtrechtButtonLink, + href: '#', appearance: 'secondary-action-button', }, }; @@ -90,6 +93,7 @@ export const UtrechtLinkLooksLikeDangerButton = { args: { label: 'Danger', component: UtrechtButtonLink, + href: '#', appearance: 'primary-action-button', hint: 'danger', }, diff --git a/src/formio/templates/editGrid.ejs b/src/formio/templates/editGrid.ejs index 1a9903848..f8ab8125d 100644 --- a/src/formio/templates/editGrid.ejs +++ b/src/formio/templates/editGrid.ejs @@ -15,7 +15,7 @@ {% if (ctx.component.removeRow) { %}
  • - +
    • {% } %} diff --git a/src/formio/templates/editGridRow.ejs b/src/formio/templates/editGridRow.ejs index f60e3e359..c3c5b0c74 100644 --- a/src/formio/templates/editGridRow.ejs +++ b/src/formio/templates/editGridRow.ejs @@ -12,7 +12,7 @@
  • - +
    • diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 4b9e3a00f..90c0e05d1 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -1,12 +1,19 @@ -@use 'microscope-sass/lib/bem'; - @import '@utrecht/components/dist/button/css/index.css'; @import '@utrecht/components/dist/button-link/css/index.css'; .openforms-theme { .utrecht-button, .utrecht-button-link { - border-block-start-color: transparent !important; - border-inline-start-color: transparent !important; + // For buttons without any state or buttons being hovered over, apply a 3d effect + // by making the top and left border transparent. + &, + &:hover { + // However, if the button has visible focus, apply the border color to all borders + // otherwise it looks a bit broken. + &:not(:focus-visible) { + border-block-start-color: transparent; + border-inline-start-color: transparent; + } + } } }