From a51ad855ec3f6d7e29a870f566957ed78b201d99 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 17 Dec 2024 17:06:52 +0100 Subject: [PATCH 01/10] Initialize new Figure component --- packages/css/src/components/figure/README.md | 3 ++ .../css/src/components/figure/figure.scss | 8 ++++ packages/css/src/components/index.scss | 1 + packages/react/src/Figure/Figure.test.tsx | 41 +++++++++++++++++++ packages/react/src/Figure/Figure.tsx | 20 +++++++++ packages/react/src/Figure/README.md | 5 +++ packages/react/src/Figure/index.ts | 2 + packages/react/src/index.ts | 1 + .../src/components/ams/figure.tokens.json | 5 +++ .../src/components/Figure/Figure.docs.mdx | 13 ++++++ .../src/components/Figure/Figure.stories.tsx | 21 ++++++++++ 11 files changed, 120 insertions(+) create mode 100644 packages/css/src/components/figure/README.md create mode 100644 packages/css/src/components/figure/figure.scss create mode 100644 packages/react/src/Figure/Figure.test.tsx create mode 100644 packages/react/src/Figure/Figure.tsx create mode 100644 packages/react/src/Figure/README.md create mode 100644 packages/react/src/Figure/index.ts create mode 100644 proprietary/tokens/src/components/ams/figure.tokens.json create mode 100644 storybook/src/components/Figure/Figure.docs.mdx create mode 100644 storybook/src/components/Figure/Figure.stories.tsx diff --git a/packages/css/src/components/figure/README.md b/packages/css/src/components/figure/README.md new file mode 100644 index 0000000000..ab10c2a3cf --- /dev/null +++ b/packages/css/src/components/figure/README.md @@ -0,0 +1,3 @@ + + +# Figure diff --git a/packages/css/src/components/figure/figure.scss b/packages/css/src/components/figure/figure.scss new file mode 100644 index 0000000000..5e6b1ce775 --- /dev/null +++ b/packages/css/src/components/figure/figure.scss @@ -0,0 +1,8 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +.ams-figure { + /* Add styles here */ +} diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss index f8417eaa30..851d9f4288 100644 --- a/packages/css/src/components/index.scss +++ b/packages/css/src/components/index.scss @@ -4,6 +4,7 @@ */ /* Append here */ +@use "./figure/figure"; @use "file-list/file-list"; @use "action-group/action-group"; @use "breakout/breakout"; diff --git a/packages/react/src/Figure/Figure.test.tsx b/packages/react/src/Figure/Figure.test.tsx new file mode 100644 index 0000000000..af3bac9cba --- /dev/null +++ b/packages/react/src/Figure/Figure.test.tsx @@ -0,0 +1,41 @@ +import { render, screen } from '@testing-library/react' +import { createRef } from 'react' +import { Figure } from './Figure' +import '@testing-library/jest-dom' + +describe('Figure', () => { + it('renders', () => { + render(
) + + const component = screen.getByRole('figure') + + expect(component).toBeInTheDocument() + expect(component).toBeVisible() + }) + + it('renders a design system BEM class name', () => { + render(
) + + const component = screen.getByRole('figure') + + expect(component).toHaveClass('ams-figure') + }) + + it('renders an additional class name', () => { + render(
) + + const component = screen.getByRole('figure') + + expect(component).toHaveClass('ams-figure extra') + }) + + it('supports ForwardRef in React', () => { + const ref = createRef() + + render(
) + + const component = screen.getByRole('figure') + + expect(ref.current).toBe(component) + }) +}) diff --git a/packages/react/src/Figure/Figure.tsx b/packages/react/src/Figure/Figure.tsx new file mode 100644 index 0000000000..8384ef1edb --- /dev/null +++ b/packages/react/src/Figure/Figure.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 FigureProps = PropsWithChildren> + +export const Figure = forwardRef( + ({ children, className, ...restProps }: FigureProps, ref: ForwardedRef) => ( +
+ {children} +
+ ), +) + +Figure.displayName = 'Figure' diff --git a/packages/react/src/Figure/README.md b/packages/react/src/Figure/README.md new file mode 100644 index 0000000000..90d22b1942 --- /dev/null +++ b/packages/react/src/Figure/README.md @@ -0,0 +1,5 @@ + + +# React Figure component + +[Figure documentation](../../../css/src/components/figure/README.md) diff --git a/packages/react/src/Figure/index.ts b/packages/react/src/Figure/index.ts new file mode 100644 index 0000000000..c6b99f171e --- /dev/null +++ b/packages/react/src/Figure/index.ts @@ -0,0 +1,2 @@ +export { Figure } from './Figure' +export type { FigureProps } from './Figure' diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 5bb39cae01..52524af978 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -4,6 +4,7 @@ */ /* Append here */ +export * from './Figure' export * from './FileList' export * from './ActionGroup' export * from './Breakout' diff --git a/proprietary/tokens/src/components/ams/figure.tokens.json b/proprietary/tokens/src/components/ams/figure.tokens.json new file mode 100644 index 0000000000..20b683e9be --- /dev/null +++ b/proprietary/tokens/src/components/ams/figure.tokens.json @@ -0,0 +1,5 @@ +{ + "ams": { + "figure": {} + } +} diff --git a/storybook/src/components/Figure/Figure.docs.mdx b/storybook/src/components/Figure/Figure.docs.mdx new file mode 100644 index 0000000000..8b5a4d6608 --- /dev/null +++ b/storybook/src/components/Figure/Figure.docs.mdx @@ -0,0 +1,13 @@ +{/* @license CC0-1.0 */} + +import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import * as FigureStories from "./Figure.stories.tsx"; +import README from "../../../../packages/css/src/components/figure/README.md?raw"; + + + +{README} + + + + diff --git a/storybook/src/components/Figure/Figure.stories.tsx b/storybook/src/components/Figure/Figure.stories.tsx new file mode 100644 index 0000000000..a63ee1d5ea --- /dev/null +++ b/storybook/src/components/Figure/Figure.stories.tsx @@ -0,0 +1,21 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import { Figure } from '@amsterdam/design-system-react/src' +import { Meta, StoryObj } from '@storybook/react' + +const meta = { + title: 'Components/Media/Figure', + component: Figure, + args: { + children: 'Nieuw component', + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Default: Story = {} From 845c3e4ac7d955ea6ea570ed10858bf0fe4e7055 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 17 Dec 2024 23:46:48 +0100 Subject: [PATCH 02/10] Implement Figure Caption subcomponent --- packages/css/src/components/figure/README.md | 2 + .../css/src/components/figure/figure.scss | 27 +++++++++- packages/react/src/Figure/Figure.tsx | 17 ++++--- .../react/src/Figure/FigureCaption.test.tsx | 49 +++++++++++++++++++ packages/react/src/Figure/FigureCaption.tsx | 27 ++++++++++ .../src/components/ams/figure.tokens.json | 12 ++++- .../src/components/Figure/Figure.docs.mdx | 11 ++++- .../src/components/Figure/Figure.stories.tsx | 47 ++++++++++++++++-- 8 files changed, 176 insertions(+), 16 deletions(-) create mode 100644 packages/react/src/Figure/FigureCaption.test.tsx create mode 100644 packages/react/src/Figure/FigureCaption.tsx diff --git a/packages/css/src/components/figure/README.md b/packages/css/src/components/figure/README.md index ab10c2a3cf..a17fbad134 100644 --- a/packages/css/src/components/figure/README.md +++ b/packages/css/src/components/figure/README.md @@ -1,3 +1,5 @@ # Figure + +Groups media content with a caption that describes it. diff --git a/packages/css/src/components/figure/figure.scss b/packages/css/src/components/figure/figure.scss index 5e6b1ce775..8d9d61f373 100644 --- a/packages/css/src/components/figure/figure.scss +++ b/packages/css/src/components/figure/figure.scss @@ -3,6 +3,31 @@ * Copyright Gemeente Amsterdam */ +@use "../../common/text-rendering" as *; + +@mixin reset-figure { + margin-block: 0; + margin-inline: 0; +} + .ams-figure { - /* Add styles here */ + display: flex; + flex-direction: column; + gap: var(--ams-figure-gap); + + @include reset-figure; +} + +.ams-figure__caption { + color: var(--ams-figure-caption-color); + font-family: var(--ams-figure-caption-font-family); + font-size: var(--ams-figure-caption-font-size); + font-weight: var(--ams-figure-caption-font-weight); + line-height: var(--ams-figure-caption-line-height); + + @include text-rendering; +} + +.ams-figure__caption--inverse-color { + color: var(--ams-figure-caption-inverse-color); } diff --git a/packages/react/src/Figure/Figure.tsx b/packages/react/src/Figure/Figure.tsx index 8384ef1edb..d7867558c9 100644 --- a/packages/react/src/Figure/Figure.tsx +++ b/packages/react/src/Figure/Figure.tsx @@ -6,15 +6,16 @@ import clsx from 'clsx' import { forwardRef } from 'react' import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' +import { FigureCaption } from './FigureCaption' export type FigureProps = PropsWithChildren> -export const Figure = forwardRef( - ({ children, className, ...restProps }: FigureProps, ref: ForwardedRef) => ( -
- {children} -
- ), -) +const FigureRoot = forwardRef(({ children, className, ...restProps }: FigureProps, ref: ForwardedRef) => ( +
+ {children} +
+)) -Figure.displayName = 'Figure' +FigureRoot.displayName = 'Figure' + +export const Figure = Object.assign(FigureRoot, { Caption: FigureCaption }) diff --git a/packages/react/src/Figure/FigureCaption.test.tsx b/packages/react/src/Figure/FigureCaption.test.tsx new file mode 100644 index 0000000000..b58385a804 --- /dev/null +++ b/packages/react/src/Figure/FigureCaption.test.tsx @@ -0,0 +1,49 @@ +import { render } from '@testing-library/react' +import { createRef } from 'react' +import { FigureCaption } from './FigureCaption' +import '@testing-library/jest-dom' + +describe('Figure Caption', () => { + 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('ams-figure__caption') + }) + + it('renders the right inverse color class', () => { + const { container } = render(Caption) + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('ams-figure__caption--inverse-color') + }) + + it('renders an additional class name', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('ams-figure__caption extra') + }) + + 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/Figure/FigureCaption.tsx b/packages/react/src/Figure/FigureCaption.tsx new file mode 100644 index 0000000000..1f967fba49 --- /dev/null +++ b/packages/react/src/Figure/FigureCaption.tsx @@ -0,0 +1,27 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import clsx from 'clsx' +import { forwardRef } from 'react' +import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' + +export type FigureCaptionProps = { + /** Changes the text colour for readability on a dark background. */ + inverseColor?: boolean +} & PropsWithChildren> + +export const FigureCaption = forwardRef( + ({ children, className, inverseColor, ...restProps }: FigureCaptionProps, ref: ForwardedRef) => ( +
+ {children} +
+ ), +) + +FigureCaption.displayName = 'Figure.Caption' diff --git a/proprietary/tokens/src/components/ams/figure.tokens.json b/proprietary/tokens/src/components/ams/figure.tokens.json index 20b683e9be..8c6b1b15a5 100644 --- a/proprietary/tokens/src/components/ams/figure.tokens.json +++ b/proprietary/tokens/src/components/ams/figure.tokens.json @@ -1,5 +1,15 @@ { "ams": { - "figure": {} + "figure": { + "gap": { "value": "{ams.space.sm}" }, + "caption": { + "color": { "value": "{ams.brand.color.neutral.100}" }, + "font-family": { "value": "{ams.text.font-family}" }, + "font-size": { "value": "{ams.text.level.6.font-size}" }, + "font-weight": { "value": "{ams.text.font-weight.normal}" }, + "line-height": { "value": "{ams.text.level.6.line-height}" }, + "inverse-color": { "value": "{ams.brand.color.neutral.0}" } + } + } } } diff --git a/storybook/src/components/Figure/Figure.docs.mdx b/storybook/src/components/Figure/Figure.docs.mdx index 8b5a4d6608..57e9c01722 100644 --- a/storybook/src/components/Figure/Figure.docs.mdx +++ b/storybook/src/components/Figure/Figure.docs.mdx @@ -1,6 +1,6 @@ {/* @license CC0-1.0 */} -import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks"; import * as FigureStories from "./Figure.stories.tsx"; import README from "../../../../packages/css/src/components/figure/README.md?raw"; @@ -10,4 +10,11 @@ import README from "../../../../packages/css/src/components/figure/README.md?raw - +## Examples + +### Inverse colour + +Set the `inverseColor` prop if the Figure Caption sits on a dark background. +This ensures the colour of the text provides enough contrast. + + diff --git a/storybook/src/components/Figure/Figure.stories.tsx b/storybook/src/components/Figure/Figure.stories.tsx index a63ee1d5ea..3372326a1a 100644 --- a/storybook/src/components/Figure/Figure.stories.tsx +++ b/storybook/src/components/Figure/Figure.stories.tsx @@ -3,19 +3,58 @@ * Copyright Gemeente Amsterdam */ +import { Image } from '@amsterdam/design-system-react' import { Figure } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' +const ExampleImage = () => ( + +) + +const exampleCaption = + 'Een rustige Amsterdamse gracht met eeuwenoude gevels die weerspiegelen in het water, terwijl fietsen nonchalant tegen de brugleuning rusten – een alledaags tafereel vol historie en charme.' + const meta = { title: 'Components/Media/Figure', component: Figure, - args: { - children: 'Nieuw component', - }, } satisfies Meta export default meta +const captionMeta = { + component: Figure.Caption, +} satisfies Meta + type Story = StoryObj +type CaptionStory = StoryObj -export const Default: Story = {} +const CaptionStoryTemplate: CaptionStory = { + decorators: [ + (Story) => ( +
+ + +
+ ), + ], + render: ({ children, ...args }) => {children}, +} +export const Default: Story = { + args: { + children: [, {exampleCaption}], + }, +} + +export const InverseColour: CaptionStory = { + ...CaptionStoryTemplate, + args: { + children: exampleCaption, + inverseColor: true, + }, +} From 0cf2beb23d19042738a96b1578835e3d5fb23ba4 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 18 Dec 2024 00:15:23 +0100 Subject: [PATCH 03/10] Make style overrides more precise --- storybook/src/styles/overrides.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/storybook/src/styles/overrides.css b/storybook/src/styles/overrides.css index 5e635314ab..e757ca4a53 100644 --- a/storybook/src/styles/overrides.css +++ b/storybook/src/styles/overrides.css @@ -10,7 +10,7 @@ .sbdocs-content.sbdocs-content > div:not(.sb-unstyled) > :is(ol, ul) li, .sbdocs-content.sbdocs-content > table:not(.sb-unstyled) :is(td, th), .sbdocs-content.sbdocs-content > div:not(.sb-unstyled) > table:not(.sb-unstyled) :is(td, th), -.sbdocs-content.sbdocs-content > div:not(.sb-unstyled) figcaption { +.sbdocs-content.sbdocs-content > div:not(.sb-unstyled) > figure > figcaption { color: #000; font-family: "Amsterdam Sans", "Arial", sans-serif; } @@ -110,7 +110,7 @@ font-size: 1rem; } -.sbdocs-content.sbdocs-content > div:not(.sb-unstyled) figcaption { +.sbdocs-content.sbdocs-content > div:not(.sb-unstyled) > figure > figcaption { font-size: 0.875rem; } From bb4354a0dd8bca5fb2eedf907dbcabf677d78035 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 18 Dec 2024 00:38:07 +0100 Subject: [PATCH 04/10] Add example of Breakout with Figure --- .../src/components/Breakout/Breakout.docs.mdx | 6 ++++ .../components/Breakout/Breakout.stories.tsx | 33 ++++++++++++++++++- 2 files changed, 38 insertions(+), 1 deletion(-) diff --git a/storybook/src/components/Breakout/Breakout.docs.mdx b/storybook/src/components/Breakout/Breakout.docs.mdx index 54ff6f86dc..93fed99711 100644 --- a/storybook/src/components/Breakout/Breakout.docs.mdx +++ b/storybook/src/components/Breakout/Breakout.docs.mdx @@ -30,6 +30,12 @@ On narrower screens, let the text move below the image. ## Examples +### With caption + +To add a caption to the image, wrap both in a Figure. + + + ### Vertical layout A large figure can be placed at the top of the Spotlight, with related text positioned underneath. diff --git a/storybook/src/components/Breakout/Breakout.stories.tsx b/storybook/src/components/Breakout/Breakout.stories.tsx index a5fbee7d49..d0bc920aab 100644 --- a/storybook/src/components/Breakout/Breakout.stories.tsx +++ b/storybook/src/components/Breakout/Breakout.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Image, Paragraph, Screen, Spotlight } from '@amsterdam/design-system-react' +import { Figure, Image, Paragraph, Screen, Spotlight } from '@amsterdam/design-system-react' import { Breakout } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' @@ -51,6 +51,37 @@ export const Default: Story = { }, } +export const WithCaption: Story = { + args: { + children: [ + + + , + + + Het doel van deze club is om ervoor te zorgen dat de Zuidas steeds duurzamer wordt. + + , + +
+ + Metrostation Zuid in 2022. Foto: Gemeente Amsterdam. +
+ , + ], + }, +} + export const VerticalLayout: Story = { args: { children: [ From ebefaf2cb7857770aead1612ce325c73a25ce4c0 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 18 Dec 2024 22:15:45 +0100 Subject: [PATCH 05/10] Make example code easier to view and copy --- .../src/components/Figure/Figure.stories.tsx | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/storybook/src/components/Figure/Figure.stories.tsx b/storybook/src/components/Figure/Figure.stories.tsx index 3372326a1a..fe31ea4b57 100644 --- a/storybook/src/components/Figure/Figure.stories.tsx +++ b/storybook/src/components/Figure/Figure.stories.tsx @@ -7,16 +7,6 @@ import { Image } from '@amsterdam/design-system-react' import { Figure } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' -const ExampleImage = () => ( - -) - const exampleCaption = 'Een rustige Amsterdamse gracht met eeuwenoude gevels die weerspiegelen in het water, terwijl fietsen nonchalant tegen de brugleuning rusten – een alledaags tafereel vol historie en charme.' @@ -27,6 +17,7 @@ const meta = { export default meta +// eslint-disable-next-line @typescript-eslint/no-unused-vars const captionMeta = { component: Figure.Caption, } satisfies Meta @@ -34,27 +25,36 @@ const captionMeta = { type Story = StoryObj type CaptionStory = StoryObj -const CaptionStoryTemplate: CaptionStory = { - decorators: [ - (Story) => ( -
- - -
- ), - ], - render: ({ children, ...args }) => {children}, -} export const Default: Story = { args: { - children: [, {exampleCaption}], + children: [ + , + {exampleCaption}, + ], }, } export const InverseColour: CaptionStory = { - ...CaptionStoryTemplate, args: { children: exampleCaption, inverseColor: true, }, + render: ({ children, ...args }) => ( +
+ + {children} +
+ ), } From 86ef879eec7d14237a80149ac76443654bc10a1e Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 18 Dec 2024 22:30:56 +0100 Subject: [PATCH 06/10] Add more examples of captions --- storybook/src/components/Figure/Figure.stories.tsx | 8 ++++---- storybook/src/components/shared/exampleContent.ts | 13 +++++++++++++ 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/storybook/src/components/Figure/Figure.stories.tsx b/storybook/src/components/Figure/Figure.stories.tsx index fe31ea4b57..936bdf7126 100644 --- a/storybook/src/components/Figure/Figure.stories.tsx +++ b/storybook/src/components/Figure/Figure.stories.tsx @@ -6,9 +6,9 @@ import { Image } from '@amsterdam/design-system-react' import { Figure } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' +import { exampleCaption } from '../shared/exampleContent' -const exampleCaption = - 'Een rustige Amsterdamse gracht met eeuwenoude gevels die weerspiegelen in het water, terwijl fietsen nonchalant tegen de brugleuning rusten – een alledaags tafereel vol historie en charme.' +const caption = exampleCaption() const meta = { title: 'Components/Media/Figure', @@ -35,14 +35,14 @@ export const Default: Story = { src="https://picsum.photos/1600/500" srcSet="https://picsum.photos/640/200 640w, https://picsum.photos/1280/400 1280w, https://picsum.photos/1600/500 1600w" />, - {exampleCaption}, + {caption}, ], }, } export const InverseColour: CaptionStory = { args: { - children: exampleCaption, + children: caption, inverseColor: true, }, render: ({ children, ...args }) => ( diff --git a/storybook/src/components/shared/exampleContent.ts b/storybook/src/components/shared/exampleContent.ts index b53be2bb3e..c251506d2e 100644 --- a/storybook/src/components/shared/exampleContent.ts +++ b/storybook/src/components/shared/exampleContent.ts @@ -17,6 +17,19 @@ export const exampleAccordionHeading = () => 'Voorgaande versies van ramingen', ]) +export const exampleCaption = () => + pickRandomContent([ + 'Een rustige Amsterdamse gracht met eeuwenoude gevels die weerspiegelen in het water, terwijl fietsen nonchalant tegen de brugleuning rusten – een alledaags tafereel vol historie en charme. Foto: Liam Dekker.', + 'Een rij geparkeerde fietsen langs een smalle gracht met klassieke Amsterdamse gevels op de achtergrond.', + 'Een klein houten bootje dobbert rustig op het water, omringd door bomen en bakstenen panden met grote ramen. Foto: Sophie van der Brugge.', + 'Een typische Amsterdamse brug met smeedijzeren leuningen, vol met fietsen en uitzicht op een grachtenpand met een klokgevel.', + 'Een stille gracht met weerspiegelende gevels, terwijl een tram in de verte over een brug rijdt. Foto: Isabel Groeneveld.', + 'Een zonovergoten terras aan de gracht, met stoelen op de kade en uitzicht op een sierlijke ophaalbrug.', + 'Een grachtenpand met vrolijke bloemenbakken op de vensterbanken en een smalle trap naar de voordeur. Foto: Joris Zandvoort.', + 'Een schuin geplaatste fiets tegen een lantaarnpaal, met op de achtergrond een karakteristiek houten bruggetje.', + 'Een groep Ajax-supporters in rood-witte sjaals verzamelt zich op een plein, klaar voor een wedstrijd in de Johan Cruijff ArenA. Foto: Louis Flitskamp.', + ]) + export const exampleHeading = () => pickRandomContent([ 'Meer plekken voor kunst en cultuur, verspreid over de stad', From 25f423f244a79c41166d6619733490f38aca04f7 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 20 Dec 2024 16:37:04 +0100 Subject: [PATCH 07/10] Remove unclear example of Breakout with Figure --- .../src/components/Breakout/Breakout.docs.mdx | 6 ---- .../components/Breakout/Breakout.stories.tsx | 33 +------------------ 2 files changed, 1 insertion(+), 38 deletions(-) diff --git a/storybook/src/components/Breakout/Breakout.docs.mdx b/storybook/src/components/Breakout/Breakout.docs.mdx index 93fed99711..54ff6f86dc 100644 --- a/storybook/src/components/Breakout/Breakout.docs.mdx +++ b/storybook/src/components/Breakout/Breakout.docs.mdx @@ -30,12 +30,6 @@ On narrower screens, let the text move below the image. ## Examples -### With caption - -To add a caption to the image, wrap both in a Figure. - - - ### Vertical layout A large figure can be placed at the top of the Spotlight, with related text positioned underneath. diff --git a/storybook/src/components/Breakout/Breakout.stories.tsx b/storybook/src/components/Breakout/Breakout.stories.tsx index 7a0f8997ff..1b747df40a 100644 --- a/storybook/src/components/Breakout/Breakout.stories.tsx +++ b/storybook/src/components/Breakout/Breakout.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Figure, Image, Paragraph, Screen, Spotlight } from '@amsterdam/design-system-react' +import { Image, Paragraph, Screen, Spotlight } from '@amsterdam/design-system-react' import { Breakout } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' @@ -53,37 +53,6 @@ export const Default: Story = { }, } -export const WithCaption: Story = { - args: { - children: [ - - - , - - - Het doel van deze club is om ervoor te zorgen dat de Zuidas steeds duurzamer wordt. - - , - -
- - Metrostation Zuid in 2022. Foto: Gemeente Amsterdam. -
- , - ], - }, -} - export const VerticalLayout: Story = { args: { children: [ From 038e8d7c3185478cda08e9e98852493074dee08a Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 20 Dec 2024 16:41:18 +0100 Subject: [PATCH 08/10] Reuse render prop in meta object --- .../src/components/Figure/Figure.stories.tsx | 43 +++++++------------ 1 file changed, 16 insertions(+), 27 deletions(-) diff --git a/storybook/src/components/Figure/Figure.stories.tsx b/storybook/src/components/Figure/Figure.stories.tsx index 936bdf7126..b959d66227 100644 --- a/storybook/src/components/Figure/Figure.stories.tsx +++ b/storybook/src/components/Figure/Figure.stories.tsx @@ -13,6 +13,21 @@ const caption = exampleCaption() const meta = { title: 'Components/Media/Figure', component: Figure, + args: { + children: caption, + }, + render: ({ children, ...args }) => ( +
+ + {children} +
+ ), } satisfies Meta export default meta @@ -25,36 +40,10 @@ const captionMeta = { type Story = StoryObj type CaptionStory = StoryObj -export const Default: Story = { - args: { - children: [ - , - {caption}, - ], - }, -} +export const Default: Story = {} export const InverseColour: CaptionStory = { args: { - children: caption, inverseColor: true, }, - render: ({ children, ...args }) => ( -
- - {children} -
- ), } From 91c65528748f1a18a626cfe05f3ba766a1643c1b Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 20 Dec 2024 16:42:21 +0100 Subject: [PATCH 09/10] Fix element type in ref test Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- packages/react/src/Figure/FigureCaption.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/Figure/FigureCaption.test.tsx b/packages/react/src/Figure/FigureCaption.test.tsx index b58385a804..152a1d952b 100644 --- a/packages/react/src/Figure/FigureCaption.test.tsx +++ b/packages/react/src/Figure/FigureCaption.test.tsx @@ -38,7 +38,7 @@ describe('Figure Caption', () => { }) it('supports ForwardRef in React', () => { - const ref = createRef() + const ref = createRef() const { container } = render() From 60d2523ce34f1e0f30284d8ce0fdb3c446cb88ea Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 20 Dec 2024 16:53:39 +0100 Subject: [PATCH 10/10] Consolidate story types further --- storybook/src/components/Figure/Figure.stories.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/storybook/src/components/Figure/Figure.stories.tsx b/storybook/src/components/Figure/Figure.stories.tsx index b959d66227..ebc56dc328 100644 --- a/storybook/src/components/Figure/Figure.stories.tsx +++ b/storybook/src/components/Figure/Figure.stories.tsx @@ -15,6 +15,7 @@ const meta = { component: Figure, args: { children: caption, + inverseColor: false, }, render: ({ children, ...args }) => (
@@ -28,21 +29,16 @@ const meta = { {children}
), -} satisfies Meta +} satisfies Meta +// We use the Caption type here to allow inverseColor. This works as long as Figure has no props of its own. export default meta -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const captionMeta = { - component: Figure.Caption, -} satisfies Meta - type Story = StoryObj -type CaptionStory = StoryObj export const Default: Story = {} -export const InverseColour: CaptionStory = { +export const InverseColour: Story = { args: { inverseColor: true, },