diff --git a/packages/css/src/components/action-group/README.md b/packages/css/src/components/action-group/README.md new file mode 100644 index 0000000000..6f4be7918f --- /dev/null +++ b/packages/css/src/components/action-group/README.md @@ -0,0 +1,14 @@ + + +# Action Group + +Groups one or more related actions and manages their layout. + +## How to use + +- Both a [Button](?path=/docs/components-buttons-button--docs) and a [Link](?path=/docs/components-navigation-link--docs) can provide an ‘action’ in this context. +- If two or more buttons or links are in a row, put the one for the primary action first and the other buttons behind it. +- Sighted users will read the primary action first, in line with the natural reading order. + The same goes for users of screen readers, who will hear the primary action first, and users of a keyboard, who will focus the primary action first. +- Also, this approach keeps the order of buttons consistent on both narrow and wide screens: if the buttons do not fit next to each other, they get stacked vertically with the primary action on top. +- Replace the default ’group’ role with `role="toolbar"` for button toolbars. diff --git a/packages/css/src/components/action-group/action-group.scss b/packages/css/src/components/action-group/action-group.scss new file mode 100644 index 0000000000..20e132387b --- /dev/null +++ b/packages/css/src/components/action-group/action-group.scss @@ -0,0 +1,15 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +.ams-action-group { + align-items: baseline; + display: inline-flex; + flex-wrap: wrap; + gap: var(--ams-action-group-gap); + + > * { + flex: auto; + } +} diff --git a/packages/css/src/components/button/README.md b/packages/css/src/components/button/README.md index 435acf9402..9c95310120 100644 --- a/packages/css/src/components/button/README.md +++ b/packages/css/src/components/button/README.md @@ -6,11 +6,10 @@ Allows the user to perform actions and operate the user interface. ## Guidelines -- A short label text that describes the function of the button. -- A clear contrasting colour scheme so that it is easy to recognize and quickly locate. -- Use the correct type of button for the corresponding application. - For example, a button within a form must always be of the type `submit`. +- Choose a short label that describes the function of the button. +- Use the correct type of button for the corresponding application, e.g. `type="submit"` for the primary form button. - Make sure one can operate a button through a keyboard. +- Wrap 2 or more consecutive buttons and/or links in an [Action Group](?path=/docs/components-buttons-action-group--docs). - Primary, secondary and tertiary buttons can be used side by side. Skipping levels is allowed. diff --git a/packages/css/src/components/dialog/README.md b/packages/css/src/components/dialog/README.md index 0feaf32050..00196bd171 100644 --- a/packages/css/src/components/dialog/README.md +++ b/packages/css/src/components/dialog/README.md @@ -9,13 +9,7 @@ A Dialog allows the user to focus on one task or a piece of information by poppi - Use dialogs sparingly because they interrupt the user’s workflow. - Use a dialog for short and non-frequent tasks. Consider using the main flow for regular tasks. - -## The order of buttons - -If your Dialog needs more than one button, put the one for the primary action first and the other buttons behind it. -Sighted users will read the primary action first, in line with the natural reading order. -The same goes for users of screen readers, who will hear the primary action first, and users of a keyboard, who will focus the primary action first. -Also, this approach keeps the order of buttons consistent on both narrow and wide screens: if the buttons do not fit next to each other, they get stacked vertically with the primary action on top. +- Wrap multiple buttons in an [Action Group](https://designsystem.amsterdam/?path=/docs/components-buttons-action-group--docs). ## Keyboard support diff --git a/packages/css/src/components/dialog/dialog.scss b/packages/css/src/components/dialog/dialog.scss index 60291e5ada..e293204719 100644 --- a/packages/css/src/components/dialog/dialog.scss +++ b/packages/css/src/components/dialog/dialog.scss @@ -30,11 +30,6 @@ so do not apply these styles without an `open` attribute. */ } } -.ams-dialog__body { - overflow-y: auto; - overscroll-behavior-y: contain; -} - .ams-dialog__header { align-items: flex-start; display: flex; @@ -42,15 +37,7 @@ so do not apply these styles without an `open` attribute. */ justify-content: space-between; } -.ams-dialog__footer { - display: flex; - flex-wrap: wrap; // [1] - gap: var(--ams-dialog-footer-gap); - margin-inline-end: auto; // [1] - - > * { - flex: auto; // [1] - } +.ams-dialog__body { + overflow-y: auto; + overscroll-behavior-y: contain; } - -// [1] This combination stacks the buttons vertically and stretches them, until they fit next to each other. diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss index c030518786..995f0179fe 100644 --- a/packages/css/src/components/index.scss +++ b/packages/css/src/components/index.scss @@ -4,6 +4,7 @@ */ /* Append here */ +@import "./action-group/action-group"; @import "./breakout/breakout"; @import "./hint/hint"; @import "./password-input/password-input"; diff --git a/packages/css/src/components/link/README.md b/packages/css/src/components/link/README.md index 4169c6d57c..ec09b2aed6 100644 --- a/packages/css/src/components/link/README.md +++ b/packages/css/src/components/link/README.md @@ -13,6 +13,7 @@ Use a link in the following cases: - To navigate to another website (see [External links](#external-links)) - To navigate to an element on the same page - To link to emails or phone numbers (start the link with `mailto:` or `tel:`) +- Wrap 2 or more consecutive buttons and/or links in an [Action Group](https://designsystem.amsterdam/?path=/docs/components-buttons-action-group--docs). A link is a navigation component. Use a button instead of a link when an action is desired. diff --git a/packages/react/package.json b/packages/react/package.json index 43d023bcd4..ae25249be1 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -42,7 +42,7 @@ "@babel/preset-env": "7.25.4", "@babel/preset-react": "7.24.7", "@rollup/plugin-babel": "6.0.4", - "@rollup/plugin-commonjs": "26.0.3", + "@rollup/plugin-commonjs": "28.0.0", "@rollup/plugin-node-resolve": "15.3.0", "@rollup/pluginutils": "5.1.2", "@testing-library/dom": "10.4.0", diff --git a/packages/react/src/ActionGroup/ActionGroup.test.tsx b/packages/react/src/ActionGroup/ActionGroup.test.tsx new file mode 100644 index 0000000000..9af11a0a67 --- /dev/null +++ b/packages/react/src/ActionGroup/ActionGroup.test.tsx @@ -0,0 +1,41 @@ +import { render, screen } from '@testing-library/react' +import { createRef } from 'react' +import { ActionGroup } from './ActionGroup' +import '@testing-library/jest-dom' + +describe('Action Group', () => { + it('renders', () => { + render() + + const component = screen.getByRole('group') + + expect(component).toBeInTheDocument() + expect(component).toBeVisible() + }) + + it('renders a design system BEM class name', () => { + render() + + const component = screen.getByRole('group') + + expect(component).toHaveClass('ams-action-group') + }) + + it('renders an additional class name', () => { + render() + + const component = screen.getByRole('group') + + expect(component).toHaveClass('ams-action-group extra') + }) + + it('supports ForwardRef in React', () => { + const ref = createRef() + + render() + + const component = screen.getByRole('group') + + expect(ref.current).toBe(component) + }) +}) diff --git a/packages/react/src/ActionGroup/ActionGroup.tsx b/packages/react/src/ActionGroup/ActionGroup.tsx new file mode 100644 index 0000000000..348fda9843 --- /dev/null +++ b/packages/react/src/ActionGroup/ActionGroup.tsx @@ -0,0 +1,20 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import clsx from 'clsx' +import { forwardRef } from 'react' +import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' + +export type ActionGroupProps = PropsWithChildren> + +export const ActionGroup = forwardRef( + ({ children, className, ...restProps }: ActionGroupProps, ref: ForwardedRef) => ( +
+ {children} +
+ ), +) + +ActionGroup.displayName = 'ActionGroup' diff --git a/packages/react/src/ActionGroup/README.md b/packages/react/src/ActionGroup/README.md new file mode 100644 index 0000000000..79a3cc7fc2 --- /dev/null +++ b/packages/react/src/ActionGroup/README.md @@ -0,0 +1,5 @@ + + +# React Action Group component + +[Action Group documentation](../../../css/src/components/action-group/README.md) diff --git a/packages/react/src/ActionGroup/index.ts b/packages/react/src/ActionGroup/index.ts new file mode 100644 index 0000000000..bba1e3d61b --- /dev/null +++ b/packages/react/src/ActionGroup/index.ts @@ -0,0 +1,2 @@ +export { ActionGroup } from './ActionGroup' +export type { ActionGroupProps } from './ActionGroup' diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx index 5f92e5feb0..705f24c465 100644 --- a/packages/react/src/Dialog/Dialog.tsx +++ b/packages/react/src/Dialog/Dialog.tsx @@ -12,7 +12,7 @@ import { IconButton } from '../IconButton' export type DialogProps = { /** The label for the button that dismisses the Dialog. */ closeButtonLabel?: string - /** The button(s) in the footer. Start with a primary button. */ + /** Content for the footer, often one Button or an Action Group containing more of them. */ footer?: ReactNode /** The text for the Heading. */ heading: string diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index f2713f5822..5a1b28f7a6 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -4,6 +4,7 @@ */ /* Append here */ +export * from './ActionGroup' export * from './Breakout' export * from './Hint' export * from './ImageSlider' diff --git a/plop-templates/react.test.tsx.hbs b/plop-templates/react.test.tsx.hbs index 745d982f1b..c509def636 100644 --- a/plop-templates/react.test.tsx.hbs +++ b/plop-templates/react.test.tsx.hbs @@ -7,7 +7,7 @@ import { createRef } from 'react' import { {{pascalCase name}} } from './{{pascalCase name}}' import '@testing-library/jest-dom' -describe('{{sentenceCase name}}', () => { +describe('{{pascalCase name}}', () => { it('renders', () => { {{#if role}} render(<{{pascalCase name}} />) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cb09bfd456..3863b81092 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -137,8 +137,8 @@ importers: specifier: 6.0.4 version: 6.0.4(@babel/core@7.25.2)(@types/babel__core@7.20.5)(rollup@4.22.5) '@rollup/plugin-commonjs': - specifier: 26.0.3 - version: 26.0.3(rollup@4.22.5) + specifier: 28.0.0 + version: 28.0.0(rollup@4.22.5) '@rollup/plugin-node-resolve': specifier: 15.3.0 version: 15.3.0(rollup@4.22.5) @@ -1625,8 +1625,8 @@ packages: rollup: optional: true - '@rollup/plugin-commonjs@26.0.3': - resolution: {integrity: sha512-2BJcolt43MY+y5Tz47djHkodCC3c1VKVrBDKpVqHKpQ9z9S158kCCqB8NF6/gzxLdNlYW9abB3Ibh+kOWLp8KQ==} + '@rollup/plugin-commonjs@28.0.0': + resolution: {integrity: sha512-BJcu+a+Mpq476DMXG+hevgPSl56bkUoi88dKT8t3RyUp8kGuOh+2bU8Gs7zXDlu+fyZggnJ+iOBGrb/O1SorYg==} engines: {node: '>=16.0.0 || 14 >= 14.17'} peerDependencies: rollup: ^2.68.0||^3.0.0||^4.0.0 @@ -3663,6 +3663,14 @@ packages: fb-watchman@2.0.2: resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==} + fdir@6.4.0: + resolution: {integrity: sha512-3oB133prH1o4j/L5lLW7uOCF1PlD+/It2L0eL/iAqWMB91RBbqTewABqxhj0ibBd90EEmWZq7ntIWzVaWcXTGQ==} + peerDependencies: + picomatch: ^3 || ^4 + peerDependenciesMeta: + picomatch: + optional: true + figures@5.0.0: resolution: {integrity: sha512-ej8ksPF4x6e5wvK9yevct0UCXh8TTFlWGVLlgjZuoBH1HwjIfKE/IdL5mq89sFA7zELi1VhKpmtDnrs7zWyeyg==} engines: {node: '>=14'} @@ -8856,14 +8864,15 @@ snapshots: '@types/babel__core': 7.20.5 rollup: 4.22.5 - '@rollup/plugin-commonjs@26.0.3(rollup@4.22.5)': + '@rollup/plugin-commonjs@28.0.0(rollup@4.22.5)': dependencies: '@rollup/pluginutils': 5.1.2(rollup@4.22.5) commondir: 1.0.1 estree-walker: 2.0.2 - glob: 10.4.2 + fdir: 6.4.0(picomatch@2.3.1) is-reference: 1.2.1 magic-string: 0.30.10 + picomatch: 2.3.1 optionalDependencies: rollup: 4.22.5 @@ -9405,7 +9414,7 @@ snapshots: '@types/acorn@4.0.6': dependencies: - '@types/estree': 1.0.5 + '@types/estree': 1.0.6 '@types/aria-query@5.0.1': {} @@ -9453,7 +9462,7 @@ snapshots: '@types/estree-jsx@1.0.1': dependencies: - '@types/estree': 1.0.5 + '@types/estree': 1.0.6 '@types/estree@0.0.51': {} @@ -11238,7 +11247,7 @@ snapshots: estree-walker@3.0.3: dependencies: - '@types/estree': 1.0.5 + '@types/estree': 1.0.6 esutils@2.0.3: {} @@ -11358,6 +11367,10 @@ snapshots: dependencies: bser: 2.1.1 + fdir@6.4.0(picomatch@2.3.1): + optionalDependencies: + picomatch: 2.3.1 + figures@5.0.0: dependencies: escape-string-regexp: 5.0.0 @@ -12119,7 +12132,7 @@ snapshots: is-reference@1.2.1: dependencies: - '@types/estree': 1.0.5 + '@types/estree': 1.0.6 is-regex@1.1.4: dependencies: @@ -13247,7 +13260,7 @@ snapshots: micromark-extension-mdx-expression@3.0.0: dependencies: - '@types/estree': 1.0.5 + '@types/estree': 1.0.6 devlop: 1.1.0 micromark-factory-mdx-expression: 2.0.1 micromark-factory-space: 2.0.0 @@ -13259,7 +13272,7 @@ snapshots: micromark-extension-mdx-jsx@3.0.0: dependencies: '@types/acorn': 4.0.6 - '@types/estree': 1.0.5 + '@types/estree': 1.0.6 devlop: 1.1.0 estree-util-is-identifier-name: 3.0.0 micromark-factory-mdx-expression: 2.0.1 @@ -13275,7 +13288,7 @@ snapshots: micromark-extension-mdxjs-esm@3.0.0: dependencies: - '@types/estree': 1.0.5 + '@types/estree': 1.0.6 devlop: 1.1.0 micromark-core-commonmark: 2.0.0 micromark-util-character: 2.0.1 @@ -13311,7 +13324,7 @@ snapshots: micromark-factory-mdx-expression@2.0.1: dependencies: - '@types/estree': 1.0.5 + '@types/estree': 1.0.6 devlop: 1.1.0 micromark-util-character: 2.0.1 micromark-util-events-to-acorn: 2.0.2 @@ -13375,7 +13388,7 @@ snapshots: micromark-util-events-to-acorn@2.0.2: dependencies: '@types/acorn': 4.0.6 - '@types/estree': 1.0.5 + '@types/estree': 1.0.6 '@types/unist': 3.0.2 devlop: 1.1.0 estree-util-visit: 2.0.0 diff --git a/proprietary/tokens/src/components/ams/action-group.tokens.json b/proprietary/tokens/src/components/ams/action-group.tokens.json new file mode 100644 index 0000000000..0dd97caa4d --- /dev/null +++ b/proprietary/tokens/src/components/ams/action-group.tokens.json @@ -0,0 +1,7 @@ +{ + "ams": { + "action-group": { + "gap": { "value": "{ams.space.md}" } + } + } +} diff --git a/proprietary/tokens/src/components/ams/dialog.tokens.json b/proprietary/tokens/src/components/ams/dialog.tokens.json index 77c0a4a907..c30f51e30e 100644 --- a/proprietary/tokens/src/components/ams/dialog.tokens.json +++ b/proprietary/tokens/src/components/ams/dialog.tokens.json @@ -11,9 +11,6 @@ "padding-inline": { "value": "{ams.space.grid.lg}" }, "header": { "gap": { "value": "{ams.space.md}" } - }, - "footer": { - "gap": { "value": "{ams.space.md}" } } } } diff --git a/storybook/src/components/ActionGroup/ActionGroup.docs.mdx b/storybook/src/components/ActionGroup/ActionGroup.docs.mdx new file mode 100644 index 0000000000..92a574054f --- /dev/null +++ b/storybook/src/components/ActionGroup/ActionGroup.docs.mdx @@ -0,0 +1,27 @@ +{/* @license CC0-1.0 */} + +import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks"; +import * as ActionGroupStories from "./ActionGroup.stories.tsx"; +import README from "../../../../packages/css/src/components/action-group/README.md?raw"; + + + +{README} + + + +## Examples + +### Stacked + +If the Buttons don’t fit next to each other, they will automatically stack vertically and stretch to the full width. +This can occur in a narrow Dialog, with long labels, a large text size, or when zooming in. +Resize the pink rectangle to see this in action. + + + +### With Link + +An action that involves navigation should be a link. + + diff --git a/storybook/src/components/ActionGroup/ActionGroup.stories.tsx b/storybook/src/components/ActionGroup/ActionGroup.stories.tsx new file mode 100644 index 0000000000..3a3985ab22 --- /dev/null +++ b/storybook/src/components/ActionGroup/ActionGroup.stories.tsx @@ -0,0 +1,43 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import { Button, Link } from '@amsterdam/design-system-react' +import { ActionGroup } from '@amsterdam/design-system-react/src' +import { Meta, StoryObj } from '@storybook/react' + +const meta = { + title: 'Components/Buttons/Action Group', + component: ActionGroup, + args: { + children: [, ], + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Default: Story = {} + +export const Stacked: Story = { + args: { + children: [, ], + className: 'ams-resize-horizontal', + style: { + inlineSize: '16rem', + }, + }, +} + +export const WithLink: Story = { + args: { + children: [ + , + + Downloaden + , + ], + }, +} diff --git a/storybook/src/components/Dialog/Dialog.docs.mdx b/storybook/src/components/Dialog/Dialog.docs.mdx index 5b2f8b1ca0..d6c92406b9 100644 --- a/storybook/src/components/Dialog/Dialog.docs.mdx +++ b/storybook/src/components/Dialog/Dialog.docs.mdx @@ -14,38 +14,34 @@ import README from "../../../../packages/css/src/components/dialog/README.md?raw ## Examples -### Form in a Dialog +### Open and close -Set `method="dialog"` when using a form in Dialog. -This closes the Dialog when submitting the form. -Pass the submit Button to the `footer` prop, -and link it to the form by passing its `id` to the Buttons `form` attribute. -The Dialog returns the value of the submit Button, so you can check which Button was clicked. -For more information, see [Handling the return value from the dialog (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#handling_the_return_value_from_the_dialog). - - - -### With scrollbar +To open the Dialog, use `Dialog.open(dialogId)` from the React package. +To close the Dialog, use either `Dialog.close`, or a `
` as in the following example. -Content taller than the dialog itself will scroll. + - +### Asking to confirm -### Trigger Button +Use a `` when asking to confirm an action, e.g. through ‘OK’ and ‘Cancel’ buttons. +Add `method="dialog"` to let the browser close the Dialog automatically when the form is submitted. -Click or tap this Button to open the Dialog. +Wrap the buttons in an [Action Group](?path=/docs/components-buttons-action-group--docs) and place it in the `footer`. +This ensures correct whitespace and scrolling behaviour. +At the same time, this will position the buttons outside the `form` element. +Create an `id` for the form and add it to the submit Button’s `form` attribute to connect the two. - +If the Action Group must be in the `form`, implement the whitespace and scrolling behaviour as well. +Add a medium bottom margin (`ams-mb--md`) to the element before it. +Make sure the content of the form scrolls if necessary, while the Action Group is visible at the bottom at all times. -#### Utility functions +The form returns the `value` of the submit Button, which allows inferring which Button the user clicked. +For more information, see [Handling the return value from the dialog (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#handling_the_return_value_from_the_dialog). -To open the Dialog, use `Dialog.open(id)` from the React package. -Pass the Dialog’s `id` to the function to select it. -To close the Dialog, use `Dialog.close`. + -### Vertically stacked Buttons +### Tall content will scroll -If the Buttons don’t fit next to each other, they will stack vertically and stretch to the full width. -This can occur with a narrow Dialog, long Button labels, a large text size, or when zooming in. +Content that doesn’t fit entirely in the Dialog will scroll. - + diff --git a/storybook/src/components/Dialog/Dialog.stories.tsx b/storybook/src/components/Dialog/Dialog.stories.tsx index 4571f5a95b..91e53241c0 100644 --- a/storybook/src/components/Dialog/Dialog.stories.tsx +++ b/storybook/src/components/Dialog/Dialog.stories.tsx @@ -3,31 +3,48 @@ * Copyright Gemeente Amsterdam */ -import { Button, Heading, Paragraph } from '@amsterdam/design-system-react' +import { ActionGroup, Button, Column, Heading, Paragraph } from '@amsterdam/design-system-react' import { Dialog } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' +const defaultChildren = (formId: string) => ( + + + Weet u zeker dat u door wilt gaan met het uitvoeren van deze actie? Gegevens die nog niet opgeslagen zijn gaan dan + verloren. + + +) + +const defaultFooter = (formId: string) => ( + + + + +) + const meta = { title: 'Components/Containers/Dialog', component: Dialog, args: { - footer: ( - - ), - children: ( - - Weet u zeker dat u door wilt gaan met het uitvoeren van deze actie? Dat verwijdert gegevens die nog niet - opgeslagen zijn. - - ), + children: defaultChildren('ams-dialog-form'), + footer: defaultFooter('ams-dialog-form'), heading: 'Niet alle gegevens zijn opgeslagen', }, argTypes: { footer: { table: { disable: true }, }, + heading: { + description: 'The text for the heading.', + }, + open: { + description: 'Whether the dialog box is active and available for interaction.', + }, }, } satisfies Meta @@ -37,167 +54,121 @@ type Story = StoryObj export const Default: Story = { args: { + children: De gegevens zijn opgeslagen., + footer: ( + + + + ), + heading: 'Gelukt', open: true, }, - argTypes: { - heading: { - description: 'The text for the heading.', - }, - open: { - description: 'Whether the dialog box is active and available for interaction.', - }, - }, decorators: [ (Story) => ( -
+
), ], parameters: { docs: { - story: { height: '32em' }, + story: { height: '28rem' }, }, layout: 'fullscreen', }, } -export const FormDialog: Story = { +export const OpenAndClose: Story = { args: { - open: true, - footer: ( - <> - - - - ), - children: ( -
- - Weet u zeker dat u door wilt gaan met het uitvoeren van deze actie? Dat verwijdert gegevens die nog niet - opgeslagen zijn. - -
- ), + id: 'ams-dialog', }, decorators: [ (Story) => ( -
+
+
), ], - parameters: { - docs: { - story: { height: '32em' }, - }, - layout: 'fullscreen', - }, } -export const WithScrollbar: Story = { +export const AskingToConfirm: Story = { args: { - footer: , - 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. - , - ], - heading: 'Privacyverklaring gemeente Amsterdam', + children: defaultChildren('ams-dialog-asking-to-confirm-form'), + footer: defaultFooter('ams-dialog-asking-to-confirm-form'), open: true, }, decorators: [ (Story) => ( -
+
), ], parameters: { docs: { - story: { height: '100vh' }, + story: { height: '32rem' }, }, layout: 'fullscreen', }, } -export const TriggerButton: Story = { - args: { - id: 'openDialog', - }, - decorators: [ - (Story) => ( -
- - -
- ), - ], -} - -export const VerticalButtons: Story = { +export const WithScrollbar: Story = { args: { - footer: ( - <> - - - - ), 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. + - Weet u zeker dat u door wilt gaan met het uitvoeren van deze actie? Dat verwijdert gegevens die nog niet - opgeslagen zijn. + 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. + +
), + footer: ( + + + + ), + heading: 'Privacyverklaring gemeente Amsterdam', open: true, }, decorators: [ (Story) => ( -
+
), ], parameters: { docs: { - story: { height: '32em' }, + story: { height: '100vh' }, }, layout: 'fullscreen', }, diff --git a/storybook/src/styles/docs.css b/storybook/src/styles/docs.css index 7af372b8ed..6a346536d2 100644 --- a/storybook/src/styles/docs.css +++ b/storybook/src/styles/docs.css @@ -65,6 +65,13 @@ background-color: #ffe600; /* Yellow */ } +.ams-docs-backdrop { + background-color: #0006; + block-size: 100%; + inline-size: 100%; + position: absolute; +} + .ams-docs-column, .ams-docs-grid, .ams-docs-row { @@ -155,3 +162,10 @@ background-color: var(--ams-color-primary-white); outline: 1px dashed var(--ams-color-neutral-grey2); } + +.ams-resize-horizontal { + outline: 1px dashed var(--ams-docs-pink); + overflow: auto; + padding-block-end: 1rem; + resize: horizontal; +}