From c2974088eec74ae383a552a32896cc10f038336c Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Mon, 23 Oct 2023 17:09:01 +0200 Subject: [PATCH 01/27] Scaffold and some basic concepts --- packages/css/src/dialog/README.md | 1 + packages/css/src/dialog/dialog.scss | 93 +++++++++++++++++++ packages/css/src/index.scss | 1 + packages/react/src/Dialog/Dialog.test.tsx | 43 +++++++++ packages/react/src/Dialog/Dialog.tsx | 40 ++++++++ packages/react/src/Dialog/README.md | 3 + packages/react/src/Dialog/index.ts | 2 + packages/react/src/index.ts | 1 + .../components/amsterdam/dialog.tokens.json | 28 ++++++ .../src/Dialog/Dialog.docs.mdx | 11 +++ .../src/Dialog/Dialog.stories.tsx | 38 ++++++++ 11 files changed, 261 insertions(+) create mode 100644 packages/css/src/dialog/README.md create mode 100644 packages/css/src/dialog/dialog.scss create mode 100644 packages/react/src/Dialog/Dialog.test.tsx create mode 100644 packages/react/src/Dialog/Dialog.tsx create mode 100644 packages/react/src/Dialog/README.md create mode 100644 packages/react/src/Dialog/index.ts create mode 100644 proprietary/tokens/src/components/amsterdam/dialog.tokens.json create mode 100644 storybook/storybook-react/src/Dialog/Dialog.docs.mdx create mode 100644 storybook/storybook-react/src/Dialog/Dialog.stories.tsx diff --git a/packages/css/src/dialog/README.md b/packages/css/src/dialog/README.md new file mode 100644 index 0000000000..9ebf258346 --- /dev/null +++ b/packages/css/src/dialog/README.md @@ -0,0 +1 @@ +# Dialog diff --git a/packages/css/src/dialog/dialog.scss b/packages/css/src/dialog/dialog.scss new file mode 100644 index 0000000000..a4594d5dbf --- /dev/null +++ b/packages/css/src/dialog/dialog.scss @@ -0,0 +1,93 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2023 Gemeente Amsterdam + */ + +@import "../../utils/breakpoint"; + +.amsterdam-dialog { + align-content: start; + background-color: var(--amsterdam-dialog-background-color); + border: 0; + display: grid; + inset: 0; + max-inline-size: min(90vw, 60ch); + overflow: hidden; + padding-block: 0; + padding-inline: 0; + position: fixed; + + // z-index: 2147483647; + + &::backdrop { + background: rgb(0 0 0 / 40%); + } + + &:not([open]) { + opacity: 0%; + pointer-events: none; + } +} + +.amsterdam-dialog__form { + align-items: start; + display: grid; + grid-template-rows: auto 1fr auto; + max-block-size: 80dvb; + padding-block: clamp(1.5rem, 2rem, 2.5rem); + padding-inline: clamp(1.5rem, 2rem, 2.5rem); +} + +.amsterdam-dialog__article { + // z-index: 1; +} + +.amsterdam-dialog__header { + align-items: center; + display: flex; + flex-direction: row; +} + +@mixin reset { + -webkit-text-size-adjust: 100%; +} + +.amsterdam-dialog__title { + color: var(--amsterdam-dialog-title-color); + flex: auto; + font-family: var(--amsterdam-dialog-title-font-family); + font-size: var(--amsterdam-dialog-title-narrow-font-size); + font-weight: var(--amsterdam-dialog-title-font-weight); + line-height: var(--amsterdam-dialog-title-line-height); + + @media screen and (width > $amsterdam-breakpoint) { + font-size: var(--amsterdam-dialog-title-wide-font-size); + } + + @include reset; +} + +.amsterdam-dialog__footer { + align-items: end; + display: grid; + grid-auto-flow: column; + grid-gap: 1rem; + justify-content: end; + padding-block: 1rem 0; +} + +.amsterdam-dialog__close { + background-color: var(--amsterdam-dialog-close-background-color); + border: 0; + cursor: pointer; + padding-block: 0; + padding-inline: 0; +} + +.amsterdam-dialog__close svg { + fill: var(--amsterdam-dialog-close-fill); +} + +.amsterdam-dialog__close:hover svg { + fill: var(--amsterdam-dialog-close-hover-fill); +} diff --git a/packages/css/src/index.scss b/packages/css/src/index.scss index 2fb4b55bfc..ff62be2514 100644 --- a/packages/css/src/index.scss +++ b/packages/css/src/index.scss @@ -4,6 +4,7 @@ */ /* Append here */ +@import "./dialog/dialog"; @import "./highlight/highlight"; @import "./accordion/accordion"; @import "./alert/alert"; diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx new file mode 100644 index 0000000000..3cb3bd42aa --- /dev/null +++ b/packages/react/src/Dialog/Dialog.test.tsx @@ -0,0 +1,43 @@ +import { render } from '@testing-library/react' +import { createRef } from 'react' +import { Dialog } from './Dialog' +import '@testing-library/jest-dom' + +describe('Dialog', () => { + it('renders', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toBeInTheDocument() + expect(component).toBeVisible() + }) + + it('renders a design system BEM class name', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('amsterdam-modal') + }) + + it('can have a additional class name', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('extra') + + expect(component).toHaveClass('amsterdam-modal') + }) + + it('supports ForwardRef in React', () => { + const ref = createRef() + + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(ref.current).toBe(component) + }) +}) diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx new file mode 100644 index 0000000000..ffa26f8551 --- /dev/null +++ b/packages/react/src/Dialog/Dialog.tsx @@ -0,0 +1,40 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2023 Gemeente Amsterdam + */ + +import { CloseIcon } from '@amsterdam/design-system-react-icons' +import clsx from 'clsx' +import { DialogHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren } from 'react' +import { Button } from '../Button' +import { Icon } from '../Icon' +import { VisuallyHidden } from '../VisuallyHidden' + +export interface DialogProps extends PropsWithChildren> {} + +const DialogClose = forwardRef(({ ...restProps }, ref: ForwardedRef) => ( + +)) + +export const Dialog = forwardRef( + ({ children, className, ...restProps }: DialogProps, ref: ForwardedRef) => ( + +
+
+ Dialog + +
+
{children}
+
+ +
+
+ + ), +) + +Dialog.displayName = 'Dialog' +DialogClose.displayName = 'DialogClose' diff --git a/packages/react/src/Dialog/README.md b/packages/react/src/Dialog/README.md new file mode 100644 index 0000000000..79439513a4 --- /dev/null +++ b/packages/react/src/Dialog/README.md @@ -0,0 +1,3 @@ +# React Modal component + +[Modal documentation](../../../css/src/modal/README.md) diff --git a/packages/react/src/Dialog/index.ts b/packages/react/src/Dialog/index.ts new file mode 100644 index 0000000000..a53afb069f --- /dev/null +++ b/packages/react/src/Dialog/index.ts @@ -0,0 +1,2 @@ +export { Dialog } from './Dialog' +export type { DialogProps } from './Dialog' diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 39cd5e6517..e45f5085c7 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -4,6 +4,7 @@ */ /* Append here */ +export * from './Dialog' export * from './Switch' export * from './Highlight' export * from './Card' diff --git a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json new file mode 100644 index 0000000000..fc9cf166ed --- /dev/null +++ b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json @@ -0,0 +1,28 @@ +{ + "amsterdam": { + "dialog": { + "background-color": { + "value": "{amsterdam.color.primary-white}" + }, + "title": { + "color": { "value": "{amsterdam.color.primary-black}" }, + "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }, + "narrow": { + "font-size": { "value": "{amsterdam.typography.text-level.5.narrow.font-size}" } + }, + "wide": { + "font-size": { "value": "{amsterdam.typography.text-level.5.wide.font-size}" } + } + }, + "close": { + "background-color": { "value": "transparent" }, + "fill": { "value": "{amsterdam.color.primary-black}" }, + "hover": { + "fill": { "value": "{amsterdam.color.primary-blue}" } + } + } + } + } +} diff --git a/storybook/storybook-react/src/Dialog/Dialog.docs.mdx b/storybook/storybook-react/src/Dialog/Dialog.docs.mdx new file mode 100644 index 0000000000..1013c5f051 --- /dev/null +++ b/storybook/storybook-react/src/Dialog/Dialog.docs.mdx @@ -0,0 +1,11 @@ +import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import * as DialogStories from "./Dialog.stories.tsx"; +import README from "../../../../packages/css/src/dialog/README.md?raw"; + + + +{README} + + + + diff --git a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx new file mode 100644 index 0000000000..b188ddd55d --- /dev/null +++ b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx @@ -0,0 +1,38 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2023 Gemeente Amsterdam + */ + +import { Button, Dialog } from '@amsterdam/design-system-react' +import { Meta, StoryObj } from '@storybook/react' + +const meta = { + title: 'Feedback/Dialog', + component: Dialog, + args: { + children: + 'U kunt de ingevulde antwoorden opslaan in onze beveiligde database, deze kunt u later openen om verder te gaan met invullen. Nadat u op opslaan heeft geklikt ontvangt u een mail. Met de link in deze mail kunt verder gaan met het formulier.', + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: { + open: true, + }, + render: (args) => , +} + +export const ShowDialog: Story = { + decorators: [ + (Story) => ( +
+ + +
+ ), + ], +} From 24738c62923e8a9b06271938664ab96ee0341992 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Wed, 25 Oct 2023 11:56:52 +0200 Subject: [PATCH 02/27] Long content story and some props --- packages/css/src/dialog/dialog.scss | 14 ++- packages/react/src/Dialog/Dialog.tsx | 15 ++-- .../src/Dialog/Dialog.docs.mdx | 6 +- .../src/Dialog/Dialog.stories.tsx | 85 ++++++++++++++++++- 4 files changed, 103 insertions(+), 17 deletions(-) diff --git a/packages/css/src/dialog/dialog.scss b/packages/css/src/dialog/dialog.scss index a4594d5dbf..665b062684 100644 --- a/packages/css/src/dialog/dialog.scss +++ b/packages/css/src/dialog/dialog.scss @@ -32,14 +32,20 @@ .amsterdam-dialog__form { align-items: start; display: grid; + gap: 1.5rem; grid-template-rows: auto 1fr auto; - max-block-size: 80dvb; - padding-block: clamp(1.5rem, 2rem, 2.5rem); - padding-inline: clamp(1.5rem, 2rem, 2.5rem); + max-block-size: 80vh; + padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem); + padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem); } .amsterdam-dialog__article { - // z-index: 1; + display: grid; + gap: 1.5rem; + justify-items: flex-start; + max-block-size: 100%; /* safari */ + overflow-y: auto; + overscroll-behavior-y: contain; } .amsterdam-dialog__header { diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx index ffa26f8551..7923859a8c 100644 --- a/packages/react/src/Dialog/Dialog.tsx +++ b/packages/react/src/Dialog/Dialog.tsx @@ -5,12 +5,13 @@ import { CloseIcon } from '@amsterdam/design-system-react-icons' import clsx from 'clsx' -import { DialogHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren } from 'react' -import { Button } from '../Button' +import { DialogHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren, ReactNode } from 'react' import { Icon } from '../Icon' import { VisuallyHidden } from '../VisuallyHidden' -export interface DialogProps extends PropsWithChildren> {} +export interface DialogProps extends PropsWithChildren> { + actions?: ReactNode +} const DialogClose = forwardRef(({ ...restProps }, ref: ForwardedRef) => ( - + {actions &&
{actions}
} ), diff --git a/storybook/storybook-react/src/Dialog/Dialog.docs.mdx b/storybook/storybook-react/src/Dialog/Dialog.docs.mdx index 1013c5f051..c75a75aa4e 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.docs.mdx +++ b/storybook/storybook-react/src/Dialog/Dialog.docs.mdx @@ -1,4 +1,4 @@ -import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as DialogStories from "./Dialog.stories.tsx"; import README from "../../../../packages/css/src/dialog/README.md?raw"; @@ -9,3 +9,7 @@ import README from "../../../../packages/css/src/dialog/README.md?raw"; + +## Long Content + + diff --git a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx index b188ddd55d..cdf630c8f2 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx +++ b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx @@ -3,15 +3,31 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -import { Button, Dialog } from '@amsterdam/design-system-react' +import { Button, Dialog, Heading, Paragraph } from '@amsterdam/design-system-react' import { Meta, StoryObj } from '@storybook/react' const meta = { title: 'Feedback/Dialog', component: Dialog, args: { - children: - 'U kunt de ingevulde antwoorden opslaan in onze beveiligde database, deze kunt u later openen om verder te gaan met invullen. Nadat u op opslaan heeft geklikt ontvangt u een mail. Met de link in deze mail kunt verder gaan met het formulier.', + title: 'Later verder gaan', + children: [ + + U kunt de ingevulde antwoorden opslaan in onze beveiligde database, deze kunt u later openen om verder te gaan + met invullen. Nadat u op opslaan heeft geklikt ontvangt u een mail. Met de link in deze mail kunt verder gaan + met het formulier. + , + ], + actions: [ + <> + + + , + ], }, } satisfies Meta @@ -23,7 +39,68 @@ export const Default: Story = { args: { open: true, }, - render: (args) => , + render: (args) => ( +
+ +
+ ), + parameters: { + backgrounds: { + default: 'dark', + }, + }, +} + +export const LongContent: Story = { + args: { + open: true, + title: 'Privacyverklaring gemeente Amsterdam', + children: [ + <> + + Algemeen + + + De gemeente Amsterdam verwerkt bij de uitvoering van haar taken en verplichtingen persoonsgegevens. De manier + waarop de gemeente Amsterdam om gaat met persoonsgegevens is vastgelegd in het stedelijk kader verwerken + persoonsgegevens. + + + Deze verklaring geeft aanvullende informatie over de omgang met persoonsgegevens door de gemeente Amsterdam en + over uw mogelijkheden tot het uitoefenen van uw rechten met betrekking tot persoonsgegevens. + + + Meer specifieke informatie over privacy en de verwerking van persoonsgegevens door de gemeente Amsterdam kunt + u op de hoofdpagina vinden. + + + Vanwege nieuwe wetgeving of andere ontwikkelingen, past de gemeente regelmatig haar processen aan. Dit kunnen + ook wijzigingen zijn in de wijze van het verwerken van persoonsgegevens. Wij raden u daarom aan om regelmatig + deze pagina te bekijken. Deze pagina wordt doorlopend geactualiseerd. + + + Geldende wet- en regelgeving en reikwijdte + + + Vanaf 25 mei 2018 is de Algemene verordening gegevensbescherming (Avg) van toepassing op alle verwerkingen van + persoonsgegevens. Deze Europese wetgeving heeft directe werking in Nederland. Voor die zaken die nationaal + geregeld moeten worden, is de Uitvoeringswet Avg in Nederland aanvullend van toepassing. Deze wetteksten kunt + u vinden op de website van Autoriteit Persoonsgegevens. + + , + , + ], + }, + render: (args) => ( +
+ +
+ ), + parameters: { + backgrounds: { + default: 'dark', + }, + }, } export const ShowDialog: Story = { From 809e4d1636f1f18f77f44b1e7bcbc34cc1cbfe20 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 26 Oct 2023 15:26:33 +0200 Subject: [PATCH 03/27] Tokens filled --- packages/css/src/dialog/dialog.scss | 26 +++++++++++-------- .../components/amsterdam/dialog.tokens.json | 22 +++++++++++++--- .../src/Dialog/Dialog.docs.mdx | 4 +-- .../src/Dialog/Dialog.stories.tsx | 7 +++-- 4 files changed, 39 insertions(+), 20 deletions(-) diff --git a/packages/css/src/dialog/dialog.scss b/packages/css/src/dialog/dialog.scss index 665b062684..91a4d950d4 100644 --- a/packages/css/src/dialog/dialog.scss +++ b/packages/css/src/dialog/dialog.scss @@ -8,19 +8,18 @@ .amsterdam-dialog { align-content: start; background-color: var(--amsterdam-dialog-background-color); - border: 0; + border: var(--amsterdam-dialog-border); display: grid; inset: 0; - max-inline-size: min(90vw, 60ch); + max-inline-size: var(--amsterdam-dialog-max-inline-size); overflow: hidden; padding-block: 0; padding-inline: 0; position: fixed; - // z-index: 2147483647; - + /* no token because dialog does not inherit from any element */ &::backdrop { - background: rgb(0 0 0 / 40%); + background: #0006; } &:not([open]) { @@ -32,11 +31,11 @@ .amsterdam-dialog__form { align-items: start; display: grid; - gap: 1.5rem; + gap: var(--amsterdam-dialog-form-gap); grid-template-rows: auto 1fr auto; - max-block-size: 80vh; - padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem); - padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem); + max-block-size: var(--amsterdam-dialog-form-max-block-size); + padding-block: var(--amsterdam-dialog-form-padding-block); + padding-inline: var(--amsterdam-dialog-form-padding-inline); } .amsterdam-dialog__article { @@ -46,6 +45,11 @@ max-block-size: 100%; /* safari */ overflow-y: auto; overscroll-behavior-y: contain; + padding-inline-end: var(--amsterdam-dialog-article-padding-inline-end); + + &::-webkit-scrollbar-track { + background: var(--amsterdam-dialog-background-color); + } } .amsterdam-dialog__header { @@ -77,9 +81,9 @@ align-items: end; display: grid; grid-auto-flow: column; - grid-gap: 1rem; + grid-gap: var(--amsterdam-dialog-footer-gap); justify-content: end; - padding-block: 1rem 0; + padding-block: var(--amsterdam-dialog-footer-padding-block); } .amsterdam-dialog__close { diff --git a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json index fc9cf166ed..b55060cd7b 100644 --- a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json @@ -1,9 +1,9 @@ { "amsterdam": { "dialog": { - "background-color": { - "value": "{amsterdam.color.primary-white}" - }, + "background-color": { "value": "{amsterdam.color.primary-white}" }, + "border": { "value": "0" }, + "max-inline-size": { "value": "min(60rem, 45rem)" }, "title": { "color": { "value": "{amsterdam.color.primary-black}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, @@ -16,12 +16,28 @@ "font-size": { "value": "{amsterdam.typography.text-level.5.wide.font-size}" } } }, + "backdrop": { + "background": { "value": "#0006" } + }, "close": { "background-color": { "value": "transparent" }, "fill": { "value": "{amsterdam.color.primary-black}" }, "hover": { "fill": { "value": "{amsterdam.color.primary-blue}" } } + }, + "form": { + "gap": { "value": "{amsterdam.spacing.inset.lg}" }, + "padding-block": { "value": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)" }, + "padding-inline": { "value": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)" }, + "max-block-size": { "value": "75vh" } + }, + "article": { + "padding-inline-end": { "value": "1.5rem" } + }, + "footer": { + "gap": { "value": "1rem" }, + "padding-block": { "value": "1.5rem 0" } } } } diff --git a/storybook/storybook-react/src/Dialog/Dialog.docs.mdx b/storybook/storybook-react/src/Dialog/Dialog.docs.mdx index c75a75aa4e..f820ec28af 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.docs.mdx +++ b/storybook/storybook-react/src/Dialog/Dialog.docs.mdx @@ -10,6 +10,6 @@ import README from "../../../../packages/css/src/dialog/README.md?raw"; -## Long Content +## Scroll Content - + diff --git a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx index cdf630c8f2..cbca3381e0 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx +++ b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx @@ -7,12 +7,12 @@ import { Button, Dialog, Heading, Paragraph } from '@amsterdam/design-system-rea import { Meta, StoryObj } from '@storybook/react' const meta = { - title: 'Feedback/Dialog', + title: 'Containers/Dialog', component: Dialog, args: { title: 'Later verder gaan', children: [ - + U kunt de ingevulde antwoorden opslaan in onze beveiligde database, deze kunt u later openen om verder te gaan met invullen. Nadat u op opslaan heeft geklikt ontvangt u een mail. Met de link in deze mail kunt verder gaan met het formulier. @@ -51,7 +51,7 @@ export const Default: Story = { }, } -export const LongContent: Story = { +export const ScrollContent: Story = { args: { open: true, title: 'Privacyverklaring gemeente Amsterdam', @@ -87,7 +87,6 @@ export const LongContent: Story = { geregeld moeten worden, is de Uitvoeringswet Avg in Nederland aanvullend van toepassing. Deze wetteksten kunt u vinden op de website van Autoriteit Persoonsgegevens. - , , ], }, From 48e389552b33322b10e697981cf45924066515e8 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 26 Oct 2023 16:58:18 +0200 Subject: [PATCH 04/27] Return value and docs recommendations --- packages/css/src/dialog/README.md | 4 ++++ packages/react/src/Dialog/Dialog.tsx | 2 +- .../components/amsterdam/dialog.tokens.json | 2 +- .../src/Dialog/Dialog.docs.mdx | 4 ++++ .../src/Dialog/Dialog.stories.tsx | 19 ++++++++++++++++++- 5 files changed, 28 insertions(+), 3 deletions(-) diff --git a/packages/css/src/dialog/README.md b/packages/css/src/dialog/README.md index 9ebf258346..86098d4723 100644 --- a/packages/css/src/dialog/README.md +++ b/packages/css/src/dialog/README.md @@ -1 +1,5 @@ # Dialog + +## Referenties + +- [Return value](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue) diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx index 7923859a8c..8af05dd79f 100644 --- a/packages/react/src/Dialog/Dialog.tsx +++ b/packages/react/src/Dialog/Dialog.tsx @@ -14,7 +14,7 @@ export interface DialogProps extends PropsWithChildren) => ( - diff --git a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json index b55060cd7b..90914e885e 100644 --- a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json @@ -3,7 +3,7 @@ "dialog": { "background-color": { "value": "{amsterdam.color.primary-white}" }, "border": { "value": "0" }, - "max-inline-size": { "value": "min(60rem, 45rem)" }, + "max-inline-size": { "value": "min(87.69vw, 60rem)" }, "title": { "color": { "value": "{amsterdam.color.primary-black}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, diff --git a/storybook/storybook-react/src/Dialog/Dialog.docs.mdx b/storybook/storybook-react/src/Dialog/Dialog.docs.mdx index f820ec28af..670e6bd6ab 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.docs.mdx +++ b/storybook/storybook-react/src/Dialog/Dialog.docs.mdx @@ -13,3 +13,7 @@ import README from "../../../../packages/css/src/dialog/README.md?raw"; ## Scroll Content + +## No Actions + + diff --git a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx index cbca3381e0..6ef3565d1b 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx +++ b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx @@ -20,7 +20,7 @@ const meta = { ], actions: [ <> - } />) + + expect(getByText('Click Me')).toBeInTheDocument() + }) + + it('does not render actions when not provided', () => { + const { queryByText } = render() + + expect(queryByText('Click Me')).not.toBeInTheDocument() + }) + + it('renders DialogClose button', () => { + const { container } = render() + + const closeButton = container.querySelector('.amsterdam-dialog__close') + + expect(closeButton).toBeInTheDocument() + }) }) From 1bbdafba2924515dc68f38355e28d45d75ca7b26 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 14 Nov 2023 11:32:03 +0100 Subject: [PATCH 10/27] Feedback processed --- packages/css/src/dialog/README.md | 2 +- packages/css/src/dialog/dialog.scss | 20 ++------- packages/react/src/Dialog/Dialog.test.tsx | 35 ++++++++++----- .../components/amsterdam/dialog.tokens.json | 3 ++ .../src/Dialog/Dialog.docs.mdx | 4 +- .../src/Dialog/Dialog.stories.tsx | 43 ++++++------------- 6 files changed, 46 insertions(+), 61 deletions(-) diff --git a/packages/css/src/dialog/README.md b/packages/css/src/dialog/README.md index f8af61f7a6..fd8dd66fbd 100644 --- a/packages/css/src/dialog/README.md +++ b/packages/css/src/dialog/README.md @@ -1,6 +1,6 @@ # Dialog -Modals provide feedback or reveal additional information or functionality while maintaining the context of an underlying page. +The dialog provides feedback or reveals additional information or functionality while maintaining the context of an underlying page. ## Guidelines diff --git a/packages/css/src/dialog/dialog.scss b/packages/css/src/dialog/dialog.scss index 41d47f93e9..05c3654db8 100644 --- a/packages/css/src/dialog/dialog.scss +++ b/packages/css/src/dialog/dialog.scss @@ -6,10 +6,8 @@ @import "../../utils/breakpoint"; .amsterdam-dialog { - align-content: start; background-color: var(--amsterdam-dialog-background-color); border: var(--amsterdam-dialog-border); - display: grid; inset: 0; max-inline-size: var(--amsterdam-dialog-max-inline-size); overflow: hidden; @@ -21,15 +19,9 @@ &::backdrop { background: #0006; } - - &:not([open]) { - opacity: 0%; - pointer-events: none; - } } .amsterdam-dialog__form { - align-items: start; display: grid; gap: var(--amsterdam-dialog-form-gap); grid-template-rows: auto 1fr auto; @@ -40,22 +32,18 @@ .amsterdam-dialog__article { display: grid; - gap: 1.5rem; + gap: 1.5rem; /* Until we have a consistent way of spacing text elements */ justify-items: flex-start; max-block-size: 100%; /* safari */ overflow-y: auto; overscroll-behavior-y: contain; padding-inline-end: var(--amsterdam-dialog-article-padding-inline-end); - - &::-webkit-scrollbar-track { - background: var(--amsterdam-dialog-background-color); - } } .amsterdam-dialog__header { - align-items: center; + align-items: flex-start; display: flex; - flex-direction: row; + gap: var(--amsterdam-dialog-header-gap); } @mixin reset { @@ -70,7 +58,7 @@ font-weight: var(--amsterdam-dialog-title-font-weight); line-height: var(--amsterdam-dialog-title-line-height); - @media screen and (min-width: $amsterdam-breakpoint-wide) { + @media screen and (min-width: $amsterdam-breakpoint-typography) { font-size: var(--amsterdam-dialog-title-wide-font-size); } diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx index 9db0bc8b17..5831866421 100644 --- a/packages/react/src/Dialog/Dialog.test.tsx +++ b/packages/react/src/Dialog/Dialog.test.tsx @@ -1,30 +1,30 @@ -import { render } from '@testing-library/react' +import { fireEvent, render, screen } from '@testing-library/react' import { createRef } from 'react' import { Dialog } from './Dialog' import '@testing-library/jest-dom' describe('Dialog', () => { it('renders', () => { - const { container } = render() + render() - const component = container.querySelector(':only-child') + const component = screen.getByRole('dialog') expect(component).toBeInTheDocument() expect(component).toBeVisible() }) it('renders a design system BEM class name', () => { - const { container } = render() + render() - const component = container.querySelector(':only-child') + const component = screen.getByRole('dialog') expect(component).toHaveClass('amsterdam-dialog') }) it('renders an additional class name', () => { - const { container } = render() + render() - const component = container.querySelector(':only-child') + const component = screen.getByRole('dialog') expect(component).toHaveClass('extra') @@ -34,17 +34,17 @@ describe('Dialog', () => { it('supports ForwardRef in React', () => { const ref = createRef() - const { container } = render() + render() - const component = container.querySelector(':only-child') + const component = screen.getByRole('dialog') expect(ref.current).toBe(component) }) it('is not visible when open attribute is not used', () => { - const { container } = render() + render() - const component = container.querySelector(':only-child') + const component = screen.getByRole('dialog') expect(component).toBeInTheDocument() expect(component).not.toBeVisible() @@ -81,4 +81,17 @@ describe('Dialog', () => { expect(closeButton).toBeInTheDocument() }) + + it('closes the dialog when DialogClose button is clicked', () => { + const { container } = render() + + const component = screen.getByRole('dialog') + const closeButton = container.querySelector('.amsterdam-dialog__close') + + expect(component).toBeVisible() + + if (closeButton) fireEvent.click(closeButton) + + // expect(component).not.toBeVisible() + }) }) diff --git a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json index 55815b62df..e8c911310a 100644 --- a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json @@ -35,6 +35,9 @@ "article": { "padding-inline-end": { "value": "1.5rem" } }, + "header": { + "gap": { "value": "1rem" } + }, "footer": { "gap": { "value": "1rem" }, "padding-block": { "value": "1.5rem 0" } diff --git a/storybook/storybook-react/src/Dialog/Dialog.docs.mdx b/storybook/storybook-react/src/Dialog/Dialog.docs.mdx index b79c0a6300..e66babdd53 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.docs.mdx +++ b/storybook/storybook-react/src/Dialog/Dialog.docs.mdx @@ -14,6 +14,6 @@ import README from "../../../../packages/css/src/dialog/README.md?raw"; -## No Actions +## Open Dialog Button - + diff --git a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx index d53c4afbc1..fa2f27f5c8 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx +++ b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx @@ -20,13 +20,7 @@ const meta = { ], actions: [ <> - + ), From f6522489ac2e38dd6fac4155e1a107abfd46b5c4 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 14 Nov 2023 11:37:27 +0100 Subject: [PATCH 11/27] Close modal by ID HTMLDialogElement --- .../storybook-react/src/Dialog/Dialog.stories.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx index fa2f27f5c8..f339a5e7af 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx +++ b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx @@ -96,6 +96,21 @@ export const ScrollContent: Story = { export const ShowDialog: Story = { args: { id: 'showdialog', + actions: [ + <> + + + , + ], }, decorators: [ (Story) => ( From 192a5dd89ca5cdb7a65dcc4fda8acebb3ddad56a Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 14 Nov 2023 12:09:17 +0100 Subject: [PATCH 12/27] Hidden dialog tests --- packages/react/src/Dialog/Dialog.test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx index 5831866421..67e4d54e96 100644 --- a/packages/react/src/Dialog/Dialog.test.tsx +++ b/packages/react/src/Dialog/Dialog.test.tsx @@ -16,7 +16,7 @@ describe('Dialog', () => { it('renders a design system BEM class name', () => { render() - const component = screen.getByRole('dialog') + const component = screen.getByRole('dialog', { hidden: true }) expect(component).toHaveClass('amsterdam-dialog') }) @@ -24,7 +24,7 @@ describe('Dialog', () => { it('renders an additional class name', () => { render() - const component = screen.getByRole('dialog') + const component = screen.getByRole('dialog', { hidden: true }) expect(component).toHaveClass('extra') @@ -36,7 +36,7 @@ describe('Dialog', () => { render() - const component = screen.getByRole('dialog') + const component = screen.getByRole('dialog', { hidden: true }) expect(ref.current).toBe(component) }) @@ -44,7 +44,7 @@ describe('Dialog', () => { it('is not visible when open attribute is not used', () => { render() - const component = screen.getByRole('dialog') + const component = screen.getByRole('dialog', { hidden: true }) expect(component).toBeInTheDocument() expect(component).not.toBeVisible() From d9554ccb5c226d36a8002a0403b5375176a1f030 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 16 Nov 2023 12:18:15 +0100 Subject: [PATCH 13/27] Update packages/css/src/dialog/README.md Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- packages/css/src/dialog/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/css/src/dialog/README.md b/packages/css/src/dialog/README.md index fd8dd66fbd..024bc9b277 100644 --- a/packages/css/src/dialog/README.md +++ b/packages/css/src/dialog/README.md @@ -1,6 +1,6 @@ # Dialog -The dialog provides feedback or reveals additional information or functionality while maintaining the context of an underlying page. +A Dialog allows the user to focus on one task or a piece of information, by popping-up and blocking the page content until the modal task is completed, or until the user dismisses the action. ## Guidelines From 9508c43e85e7445a4b29757f69780ec64a318b7f Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 16 Nov 2023 12:18:24 +0100 Subject: [PATCH 14/27] Update packages/css/src/dialog/README.md Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- packages/css/src/dialog/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/css/src/dialog/README.md b/packages/css/src/dialog/README.md index 024bc9b277..7b0ee41d51 100644 --- a/packages/css/src/dialog/README.md +++ b/packages/css/src/dialog/README.md @@ -4,7 +4,8 @@ A Dialog allows the user to focus on one task or a piece of information, by popp ## Guidelines -Use modals sparingly because they interrupt the user's workflow. +- Use Dialog sparingly, because it interrupts the user's workflow. +- Use Dialog for short and non-frequent tasks. For common tasks consider using the main flow. ## Keyboard Support From 352fc83f7b714c67f070c5b7039bf36141c29442 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 16 Nov 2023 14:24:41 +0100 Subject: [PATCH 15/27] Failed test in jest succesful in interaction test --- packages/css/src/dialog/dialog.scss | 4 +- packages/react/src/Dialog/Dialog.test.tsx | 18 ++++---- packages/react/src/Dialog/Dialog.tsx | 2 +- .../src/Dialog/Dialog.stories.tsx | 43 +++++++++---------- 4 files changed, 31 insertions(+), 36 deletions(-) diff --git a/packages/css/src/dialog/dialog.scss b/packages/css/src/dialog/dialog.scss index 05c3654db8..d0228698dd 100644 --- a/packages/css/src/dialog/dialog.scss +++ b/packages/css/src/dialog/dialog.scss @@ -10,7 +10,6 @@ border: var(--amsterdam-dialog-border); inset: 0; max-inline-size: var(--amsterdam-dialog-max-inline-size); - overflow: hidden; padding-block: 0; padding-inline: 0; position: fixed; @@ -67,12 +66,11 @@ .amsterdam-dialog__footer { display: flex; - flex-direction: column-reverse; + flex-direction: column; grid-gap: var(--amsterdam-dialog-footer-gap); padding-block: var(--amsterdam-dialog-footer-padding-block); @media screen and (min-width: $amsterdam-breakpoint-medium) { - align-items: end; flex-direction: row; justify-content: end; } diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx index 67e4d54e96..223dd6157d 100644 --- a/packages/react/src/Dialog/Dialog.test.tsx +++ b/packages/react/src/Dialog/Dialog.test.tsx @@ -75,23 +75,21 @@ describe('Dialog', () => { }) it('renders DialogClose button', () => { - const { container } = render() + render() - const closeButton = container.querySelector('.amsterdam-dialog__close') + const closeButton = screen.getByRole('close') expect(closeButton).toBeInTheDocument() }) - it('closes the dialog when DialogClose button is clicked', () => { - const { container } = render() - - const component = screen.getByRole('dialog') - const closeButton = container.querySelector('.amsterdam-dialog__close') + it('closes the dialog when DialogClose button is clicked', async () => { + render() - expect(component).toBeVisible() + const closeButton = screen.getByRole('close') - if (closeButton) fireEvent.click(closeButton) + fireEvent.click(closeButton) - // expect(component).not.toBeVisible() + // Click on closeButton does not close the dialog? + // expect(screen.getByRole('dialog')).not.toBeVisible() }) }) diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx index 8af05dd79f..30a3baf6ac 100644 --- a/packages/react/src/Dialog/Dialog.tsx +++ b/packages/react/src/Dialog/Dialog.tsx @@ -14,7 +14,7 @@ export interface DialogProps extends PropsWithChildren) => ( - diff --git a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx index f339a5e7af..5df5b51236 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx +++ b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx @@ -5,20 +5,21 @@ import { Button, Dialog, Heading, Paragraph } from '@amsterdam/design-system-react' import { Meta, StoryObj } from '@storybook/react' +import { userEvent, within } from '@storybook/testing-library' const meta = { title: 'Containers/Dialog', component: Dialog, args: { title: 'Later verder gaan', - children: [ - + children: ( + U kunt de ingevulde antwoorden opslaan in onze beveiligde database, deze kunt u later openen om verder te gaan met invullen. Nadat u op opslaan heeft geklikt ontvangt u een mail. Met de link in deze mail kunt verder gaan met het formulier. - , - ], - actions: [ + + ), + actions: ( <> - , - ], + + ), }, parameters: { backgrounds: { @@ -55,7 +56,7 @@ export const ScrollContent: Story = { args: { open: true, title: 'Privacyverklaring gemeente Amsterdam', - children: [ + children: ( <> Algemeen @@ -83,8 +84,8 @@ export const ScrollContent: Story = { geregeld moeten worden, is de Uitvoeringswet Avg in Nederland aanvullend van toepassing. Deze wetteksten kunt u vinden op de website van Autoriteit Persoonsgegevens. - , - ], + + ), }, render: (args) => (
@@ -96,21 +97,14 @@ export const ScrollContent: Story = { export const ShowDialog: Story = { args: { id: 'showdialog', - actions: [ + actions: ( <> - - - , - ], + + + ), }, decorators: [ (Story) => ( @@ -125,4 +119,9 @@ export const ShowDialog: Story = { default: 'white', }, }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement) + await userEvent.click(canvas.getByRole('button'), { delay: 500 }) + await userEvent.click(canvas.getByRole('close'), { delay: 1000 }) + }, } From e9459eb7e7e0cb41d64d023ea1c7909d05515801 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 16 Nov 2023 14:26:29 +0100 Subject: [PATCH 16/27] Remove test --- packages/react/src/Dialog/Dialog.test.tsx | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx index 223dd6157d..427ffedfde 100644 --- a/packages/react/src/Dialog/Dialog.test.tsx +++ b/packages/react/src/Dialog/Dialog.test.tsx @@ -1,4 +1,4 @@ -import { fireEvent, render, screen } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import { createRef } from 'react' import { Dialog } from './Dialog' import '@testing-library/jest-dom' @@ -81,15 +81,4 @@ describe('Dialog', () => { expect(closeButton).toBeInTheDocument() }) - - it('closes the dialog when DialogClose button is clicked', async () => { - render() - - const closeButton = screen.getByRole('close') - - fireEvent.click(closeButton) - - // Click on closeButton does not close the dialog? - // expect(screen.getByRole('dialog')).not.toBeVisible() - }) }) From 1463d6257b1cf167f1bbc1f390379a51b1151379 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 16 Nov 2023 14:37:35 +0100 Subject: [PATCH 17/27] Replaced close onclick function --- storybook/storybook-react/src/Dialog/Dialog.stories.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx index 5df5b51236..6868bfd4ec 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx +++ b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx @@ -21,12 +21,10 @@ const meta = { ), actions: ( <> - - + ), }, @@ -99,7 +97,7 @@ export const ShowDialog: Story = { id: 'showdialog', actions: ( <> - From edd5748a194ce1a95e575ba7ba689bbb92fc13a1 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 16 Nov 2023 14:40:52 +0100 Subject: [PATCH 18/27] Feedback on flex-start --- packages/css/src/dialog/dialog.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/css/src/dialog/dialog.scss b/packages/css/src/dialog/dialog.scss index d0228698dd..7259222b25 100644 --- a/packages/css/src/dialog/dialog.scss +++ b/packages/css/src/dialog/dialog.scss @@ -32,7 +32,6 @@ .amsterdam-dialog__article { display: grid; gap: 1.5rem; /* Until we have a consistent way of spacing text elements */ - justify-items: flex-start; max-block-size: 100%; /* safari */ overflow-y: auto; overscroll-behavior-y: contain; From 0baac514ec5ae77d72a4bb90e9289fa25753b1d9 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 16 Nov 2023 15:22:45 +0100 Subject: [PATCH 19/27] You're right --- storybook/storybook-react/src/Dialog/Dialog.stories.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx index 6868bfd4ec..1464d390e3 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx +++ b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx @@ -107,7 +107,9 @@ export const ShowDialog: Story = { decorators: [ (Story) => (
- +
), From 746b2c88b587368e31fd5d0102618e76fc0fb6e4 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Thu, 16 Nov 2023 15:55:23 +0100 Subject: [PATCH 20/27] Add two cases we currently can't test --- packages/react/src/Dialog/Dialog.test.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx index 427ffedfde..7f83250165 100644 --- a/packages/react/src/Dialog/Dialog.test.tsx +++ b/packages/react/src/Dialog/Dialog.test.tsx @@ -81,4 +81,14 @@ describe('Dialog', () => { expect(closeButton).toBeInTheDocument() }) + + it.skip('can be closed with the Close button', () => { + // We currently can't test this because dialog isn't properly supported in jsdom + // https://github.com/jsdom/jsdom/issues/3294 + }) + + it.skip('has no accessible content when it is closed', () => { + // We currently can't test this because dialog isn't properly supported in jsdom + // https://github.com/jsdom/jsdom/issues/3294 + }) }) From 3fdb41f113ecce790fa7e8a0764e50b98ee6ab50 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 16 Nov 2023 17:23:29 +0100 Subject: [PATCH 21/27] Close button role removed --- packages/react/src/Dialog/Dialog.tsx | 3 ++- storybook/storybook-react/src/Dialog/Dialog.stories.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx index 30a3baf6ac..609e6070f8 100644 --- a/packages/react/src/Dialog/Dialog.tsx +++ b/packages/react/src/Dialog/Dialog.tsx @@ -13,8 +13,9 @@ export interface DialogProps extends PropsWithChildren) => ( - diff --git a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx index 1464d390e3..63de19684c 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx +++ b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx @@ -122,6 +122,6 @@ export const ShowDialog: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement) await userEvent.click(canvas.getByRole('button'), { delay: 500 }) - await userEvent.click(canvas.getByRole('close'), { delay: 1000 }) + await userEvent.click(canvas.getByText('Sluiten'), { delay: 1000 }) }, } From fc5f08989e56c0463a80632f2dbb925c56c7cd6b Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 17 Nov 2023 10:09:27 +0100 Subject: [PATCH 22/27] Removed css file for storybook --- storybook/storybook-react/config/preview-body.html | 6 ++++++ storybook/storybook-react/config/story.css | 5 ----- 2 files changed, 6 insertions(+), 5 deletions(-) delete mode 100644 storybook/storybook-react/config/story.css diff --git a/storybook/storybook-react/config/preview-body.html b/storybook/storybook-react/config/preview-body.html index 857f4ea6c7..7ed8c4249f 100644 --- a/storybook/storybook-react/config/preview-body.html +++ b/storybook/storybook-react/config/preview-body.html @@ -36,4 +36,10 @@ margin: -16px; /* stylelint-disable-line */ padding: 16px; /* stylelint-disable-line */ } + + /* Workaround to mimic dark background for dialog Canvas blocks */ + .amsterdam-dialog-story { + background-color: #333 !important; + transition: background-color 0.3s; + } diff --git a/storybook/storybook-react/config/story.css b/storybook/storybook-react/config/story.css deleted file mode 100644 index 3e8cf79d2d..0000000000 --- a/storybook/storybook-react/config/story.css +++ /dev/null @@ -1,5 +0,0 @@ -/* Workaround to mimic dark background for dialog Canvas blocks */ -.amsterdam-dialog-story { - background-color: #333 !important; - transition: background-color 0.3s; -} From f46d9593070ad6bdc23468291428070db817ee41 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 17 Nov 2023 10:11:02 +0100 Subject: [PATCH 23/27] Removed css import --- storybook/storybook-react/config/preview.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/storybook/storybook-react/config/preview.tsx b/storybook/storybook-react/config/preview.tsx index 72103f11d4..9eee3d011a 100644 --- a/storybook/storybook-react/config/preview.tsx +++ b/storybook/storybook-react/config/preview.tsx @@ -3,8 +3,6 @@ import '@amsterdam/design-system-assets/font/index.css' import '@amsterdam/design-system-css/dist/index.css' import { viewports } from './viewports' -import './story.css' - export const parameters = { actions: { argTypesRegex: '^on[A-Z].*', From ea0ffb20e0b4080404ce8221f880676ca78b2ad3 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 17 Nov 2023 10:12:24 +0100 Subject: [PATCH 24/27] Disabled background for this story --- storybook/storybook-react/src/Dialog/Dialog.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx index 63de19684c..ac032a8359 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx +++ b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx @@ -116,7 +116,7 @@ export const ShowDialog: Story = { ], parameters: { backgrounds: { - default: 'white', + disable: true, }, }, play: async ({ canvasElement }) => { From 2e20d0418391d2fbaf9117512c80970f8243624b Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 17 Nov 2023 10:28:12 +0100 Subject: [PATCH 25/27] Dialog test fix --- packages/react/src/Dialog/Dialog.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx index 7f83250165..fdd20d4d87 100644 --- a/packages/react/src/Dialog/Dialog.test.tsx +++ b/packages/react/src/Dialog/Dialog.test.tsx @@ -77,7 +77,7 @@ describe('Dialog', () => { it('renders DialogClose button', () => { render() - const closeButton = screen.getByRole('close') + const closeButton = screen.getByText('Sluiten') expect(closeButton).toBeInTheDocument() }) From 4f49e14b994820464bcc5184ebb12223e8fb7d75 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 21 Nov 2023 09:36:13 +0100 Subject: [PATCH 26/27] Disabled storybook test --- .../storybook-react/src/Dialog/Dialog.stories.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx index ac032a8359..32b1475bf2 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx +++ b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx @@ -5,7 +5,7 @@ import { Button, Dialog, Heading, Paragraph } from '@amsterdam/design-system-react' import { Meta, StoryObj } from '@storybook/react' -import { userEvent, within } from '@storybook/testing-library' +// import { userEvent, within } from '@storybook/testing-library' const meta = { title: 'Containers/Dialog', @@ -119,9 +119,9 @@ export const ShowDialog: Story = { disable: true, }, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement) - await userEvent.click(canvas.getByRole('button'), { delay: 500 }) - await userEvent.click(canvas.getByText('Sluiten'), { delay: 1000 }) - }, + // play: async ({ canvasElement }) => { + // const canvas = within(canvasElement) + // await userEvent.click(canvas.getByRole('button'), { delay: 500 }) + // await userEvent.click(canvas.getByText('Sluiten'), { delay: 1000 }) + // }, } From 7ae480b011c13c4fe3b3080e049aa26b3efc1618 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 21 Nov 2023 15:05:44 +0100 Subject: [PATCH 27/27] Remove commented out code --- storybook/storybook-react/src/Dialog/Dialog.stories.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx index 32b1475bf2..a60169c355 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.stories.tsx +++ b/storybook/storybook-react/src/Dialog/Dialog.stories.tsx @@ -5,7 +5,6 @@ import { Button, Dialog, Heading, Paragraph } from '@amsterdam/design-system-react' import { Meta, StoryObj } from '@storybook/react' -// import { userEvent, within } from '@storybook/testing-library' const meta = { title: 'Containers/Dialog', @@ -119,9 +118,4 @@ export const ShowDialog: Story = { disable: true, }, }, - // play: async ({ canvasElement }) => { - // const canvas = within(canvasElement) - // await userEvent.click(canvas.getByRole('button'), { delay: 500 }) - // await userEvent.click(canvas.getByText('Sluiten'), { delay: 1000 }) - // }, }