From 1748d6d3ef074ee6d9c9f1a2fbd60efc8dfe65c7 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 9 Jul 2024 11:40:22 +0200 Subject: [PATCH 01/12] Refactor `onBackground` prop of Link to `inverseColor` and `contrastColor` --- packages/css/src/components/link/link.scss | 16 +++++----- packages/react/src/Link/Link.test.tsx | 31 +++++++++--------- packages/react/src/Link/Link.tsx | 19 ++++++----- .../common/ams/link-appearance.tokens.json | 24 ++++++++++---- .../src/components/ams/link-list.tokens.json | 8 ++--- .../src/components/ams/link.tokens.json | 16 +++++----- storybook/config/preview-body.html | 25 +++++++++++---- storybook/src/components/Link/Link.docs.mdx | 21 +++++++++--- .../src/components/Link/Link.stories.tsx | 32 ++++--------------- .../src/components/shared/decorators.tsx | 7 ++++ .../amsterdam/ArticlePage/ArticleBody.tsx | 2 +- .../amsterdam/HomePage/HomeSpotlight.tsx | 4 +-- 12 files changed, 115 insertions(+), 90 deletions(-) diff --git a/packages/css/src/components/link/link.scss b/packages/css/src/components/link/link.scss index f959cde9cb..5a24f51e8b 100644 --- a/packages/css/src/components/link/link.scss +++ b/packages/css/src/components/link/link.scss @@ -50,26 +50,26 @@ } } -.ams-link--on-background-dark { - color: var(--ams-link-on-background-dark-color); +.ams-link--contrast-color { + color: var(--ams-link-contrast-color-color); &:hover { - color: var(--ams-link-on-background-dark-hover-color); + color: var(--ams-link-contrast-color-hover-color); } &:visited { - color: var(--ams-link-on-background-dark-visited-color); + color: var(--ams-link-contrast-color-visited-color); } } -.ams-link--on-background-light { - color: var(--ams-link-on-background-light-color); +.ams-link--inverse-color { + color: var(--ams-link-inverse-color-color); &:hover { - color: var(--ams-link-on-background-light-hover-color); + color: var(--ams-link-inverse-color-hover-color); } &:visited { - color: var(--ams-link-on-background-light-visited-color); + color: var(--ams-link-inverse-color-visited-color); } } diff --git a/packages/react/src/Link/Link.test.tsx b/packages/react/src/Link/Link.test.tsx index 8bed3791f4..9f91df3d4c 100644 --- a/packages/react/src/Link/Link.test.tsx +++ b/packages/react/src/Link/Link.test.tsx @@ -5,6 +5,7 @@ import '@testing-library/jest-dom' describe('Link', () => { const linktext = 'Linktext' + it('renders with href attribute', () => { const { container } = render({linktext}) @@ -34,37 +35,37 @@ describe('Link', () => { expect(link).toHaveClass('ams-link ams-link--inline') }) - it('renders light background color', () => { + it('renders an additional class name', () => { + const { container } = render() + + const link = container.querySelector(':only-child') + + expect(link).toHaveClass('large') + expect(link).toHaveClass('ams-link') + }) + + it('renders the class name for contrast color', () => { const { container } = render( - + {linktext} , ) const link = container.querySelector('a:only-child') - expect(link).toHaveClass('ams-link ams-link--on-background-light') + expect(link).toHaveClass('ams-link ams-link--contrast-color') }) - it('renders dark background color', () => { + it('renders the class name for inverse color', () => { const { container } = render( - + {linktext} , ) const link = container.querySelector('a:only-child') - expect(link).toHaveClass('ams-link ams-link--on-background-dark') - }) - - it('renders an additional class name', () => { - const { container } = render() - - const link = container.querySelector(':only-child') - - expect(link).toHaveClass('large') - expect(link).toHaveClass('ams-link') + expect(link).toHaveClass('ams-link ams-link--inverse-color') }) it('supports ForwardRef in React', () => { diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx index 794816eff1..8229b5b592 100644 --- a/packages/react/src/Link/Link.tsx +++ b/packages/react/src/Link/Link.tsx @@ -7,19 +7,20 @@ import clsx from 'clsx' import { forwardRef } from 'react' import type { AnchorHTMLAttributes, ForwardedRef } from 'react' -type LinkOnBackground = 'default' | 'light' | 'dark' type LinkVariant = 'standalone' | 'inline' export type LinkProps = { - /** Describes the underlying background colour. Allows the text to provide visual contrast. */ - onBackground?: LinkOnBackground + /** Changes the text colour for readability on a light background. */ + contrastColor?: boolean + /** Changes the text colour for readability on a dark background. */ + inverseColor?: boolean /** Whether the link is inline or stands alone. */ variant?: LinkVariant } & Omit, 'placeholder'> export const Link = forwardRef( ( - { children, variant = 'standalone', onBackground, className, ...restProps }: LinkProps, + { children, className, contrastColor, inverseColor, variant = 'standalone', ...restProps }: LinkProps, ref: ForwardedRef, ) => ( diff --git a/proprietary/tokens/src/common/ams/link-appearance.tokens.json b/proprietary/tokens/src/common/ams/link-appearance.tokens.json index 8daf5456e3..3b0bcf8dd5 100644 --- a/proprietary/tokens/src/common/ams/link-appearance.tokens.json +++ b/proprietary/tokens/src/common/ams/link-appearance.tokens.json @@ -7,12 +7,6 @@ "hover": { "color": { "value": "{ams.color.dark-blue}" } }, - "on-background-dark": { - "color": { "value": "{ams.color.primary-white}" } - }, - "on-background-light": { - "color": { "value": "{ams.color.primary-black}" } - }, "regular": { "text-decoration-line": { "value": "underline" }, "hover": { @@ -25,6 +19,24 @@ "hover": { "text-decoration-line": { "value": "underline" } } + }, + "contrast": { + "color": { "value": "{ams.color.primary-black}" }, + "hover": { + "color": { "value": "{ams.color.primary-black}" } + }, + "visited": { + "color": { "value": "{ams.color.primary-black}" } + } + }, + "inverse": { + "color": { "value": "{ams.color.primary-white}" }, + "hover": { + "color": { "value": "{ams.color.primary-white}" } + }, + "visited": { + "color": { "value": "{ams.color.primary-white}" } + } } } } diff --git a/proprietary/tokens/src/components/ams/link-list.tokens.json b/proprietary/tokens/src/components/ams/link-list.tokens.json index 49a289ed6e..c30af22862 100644 --- a/proprietary/tokens/src/components/ams/link-list.tokens.json +++ b/proprietary/tokens/src/components/ams/link-list.tokens.json @@ -26,15 +26,15 @@ "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" } }, "on-background-dark": { - "color": { "value": "{ams.link-appearance.on-background-dark.color}" }, + "color": { "value": "{ams.link-appearance.inverse.color}" }, "hover": { - "color": { "value": "{ams.link-appearance.on-background-dark.color}" } + "color": { "value": "{ams.link-appearance.inverse.hover.color}" } } }, "on-background-light": { - "color": { "value": "{ams.link-appearance.on-background-light.color}" }, + "color": { "value": "{ams.link-appearance.contrast.color}" }, "hover": { - "color": { "value": "{ams.link-appearance.on-background-light.color}" } + "color": { "value": "{ams.link-appearance.contrast.hover.color}" } } } } diff --git a/proprietary/tokens/src/components/ams/link.tokens.json b/proprietary/tokens/src/components/ams/link.tokens.json index 5ec69c2dc1..459b4d8b09 100644 --- a/proprietary/tokens/src/components/ams/link.tokens.json +++ b/proprietary/tokens/src/components/ams/link.tokens.json @@ -38,22 +38,22 @@ "text-underline-offset": { "value": "{ams.link-appearance.regular.hover.text-underline-offset}" } } }, - "on-background-dark": { - "color": { "value": "{ams.link-appearance.on-background-dark.color}" }, + "contrast-color": { + "color": { "value": "{ams.link-appearance.contrast.color}" }, "hover": { - "color": { "value": "{ams.link-appearance.on-background-dark.color}" } + "color": { "value": "{ams.link-appearance.contrast.hover.color}" } }, "visited": { - "color": { "value": "{ams.link-appearance.on-background-dark.color}" } + "color": { "value": "{ams.link-appearance.contrast.visited.color}" } } }, - "on-background-light": { - "color": { "value": "{ams.link-appearance.on-background-light.color}" }, + "inverse-color": { + "color": { "value": "{ams.link-appearance.inverse.color}" }, "hover": { - "color": { "value": "{ams.link-appearance.on-background-light.color}" } + "color": { "value": "{ams.link-appearance.inverse.hover.color}" } }, "visited": { - "color": { "value": "{ams.link-appearance.on-background-light.color}" } + "color": { "value": "{ams.link-appearance.inverse.visited.color}" } } } } diff --git a/storybook/config/preview-body.html b/storybook/config/preview-body.html index 9debb3fd07..13e3a10837 100644 --- a/storybook/config/preview-body.html +++ b/storybook/config/preview-body.html @@ -2,8 +2,10 @@ .ams-docs-figure { display: flex; gap: 0.25rem; - margin: 0; /* stylelint-disable-line */ - padding: 0; /* stylelint-disable-line */ + margin-block: 0; + margin-inline: 0; + padding-block: 0; + padding-inline: 0; } .ams-docs-image, @@ -50,13 +52,24 @@ display: flex; flex-direction: column; gap: 0.5rem; - padding: 0.5rem; /* stylelint-disable-line */ + padding-block: 0.5rem; + padding-inline: 0.5rem; width: 50%; } + .ams-docs-dark-background, + .ams-docs-light-background { + margin-block: -1rem; + margin-inline: -1rem; + padding-block: 1rem; + padding-inline: 1rem; + } + .ams-docs-dark-background { - background-color: #004699; - margin: -1rem; /* stylelint-disable-line */ - padding: 1rem; /* stylelint-disable-line */ + background-color: #004699; /* Dark blue */ + } + + .ams-docs-light-background { + background-color: #FFE600; /* Yellow */ } diff --git a/storybook/src/components/Link/Link.docs.mdx b/storybook/src/components/Link/Link.docs.mdx index 84f8b96036..4a39854bc9 100644 --- a/storybook/src/components/Link/Link.docs.mdx +++ b/storybook/src/components/Link/Link.docs.mdx @@ -30,10 +30,23 @@ Don’t use too many inline links on the same page, as it may confuse the user. -### On Dark Background +### On a Coloured Background - +A link on a coloured background must adjust its text colour to provide enough contrast. +We have lighter and darker background colours, and links behave differently on each. +Stijlweb shows [which colours suit which backgrounds](https://amsterdam.nl/stijlweb/basiselementen/kleuren/). +Although they only address headings and paragraphs, the same principle applies to links. -### On Light Background +- Set the `contrastColor` prop on a yellow, orange or green background. + It will make the link black. +- Use the `inverseColor` prop on a purple or dark blue background. + It will make the link white. +- On the other background colours, choose either one, but do so consistently. - +#### Contrast Colour + + + +#### Inverse Colour + + diff --git a/storybook/src/components/Link/Link.stories.tsx b/storybook/src/components/Link/Link.stories.tsx index 3f1e6c08b2..89f6ec8c8e 100644 --- a/storybook/src/components/Link/Link.stories.tsx +++ b/storybook/src/components/Link/Link.stories.tsx @@ -5,6 +5,7 @@ import { Link, Paragraph } from '@amsterdam/design-system-react/src' import type { Meta, StoryObj } from '@storybook/react' +import { contrastColorDecorator, inverseColorDecorator } from '../shared/decorators' type Story = StoryObj @@ -14,26 +15,19 @@ const meta = { args: { children: 'Link label', href: '#', - onBackground: undefined, // Workaround to avoid 'onBackground' being set to an empty function }, argTypes: { children: { description: 'The link text.', table: { disable: false }, }, - onBackground: { - control: { - type: 'radio', - labels: { undefined: 'default', light: 'light', dark: 'dark' }, - }, - options: [undefined, 'light', 'dark'], - }, href: { description: 'The url for the link.', name: 'href', type: { name: 'string', required: false }, }, }, + decorators: [contrastColorDecorator, inverseColorDecorator], } satisfies Meta export default meta @@ -56,28 +50,14 @@ export const Inline: Story = { ], } -export const onDarkBackground: Story = { +export const ContrastColour: Story = { args: { - onBackground: 'dark', + contrastColor: true, }, - decorators: [ - (Story) => ( -
- -
- ), - ], } -export const onLightBackground: Story = { +export const InverseColour: Story = { args: { - onBackground: 'light', + inverseColor: true, }, - decorators: [ - (Story) => ( -
- -
- ), - ], } diff --git a/storybook/src/components/shared/decorators.tsx b/storybook/src/components/shared/decorators.tsx index 872427db6a..bf10cea775 100644 --- a/storybook/src/components/shared/decorators.tsx +++ b/storybook/src/components/shared/decorators.tsx @@ -5,6 +5,13 @@ import type { StoryContext, StoryFn } from '@storybook/react' +/** Applies a light background colour if the `contrastColor` arg is true. */ +export const contrastColorDecorator = (Story: StoryFn, context: StoryContext) => ( +
+ +
+) + /** Applies a dark background colour if the `inverseColor` arg is true. */ export const inverseColorDecorator = (Story: StoryFn, context: StoryContext) => (
diff --git a/storybook/src/pages/amsterdam/ArticlePage/ArticleBody.tsx b/storybook/src/pages/amsterdam/ArticlePage/ArticleBody.tsx index 372a3d5d84..ef42cd9ad6 100644 --- a/storybook/src/pages/amsterdam/ArticlePage/ArticleBody.tsx +++ b/storybook/src/pages/amsterdam/ArticlePage/ArticleBody.tsx @@ -46,7 +46,7 @@ export const ArticleBody = ({ lead, paragraph1, spotlightHeading, spotlightLinkL - + {spotlightLinkLabel} diff --git a/storybook/src/pages/amsterdam/HomePage/HomeSpotlight.tsx b/storybook/src/pages/amsterdam/HomePage/HomeSpotlight.tsx index 8e21124e4d..5e1d7be359 100644 --- a/storybook/src/pages/amsterdam/HomePage/HomeSpotlight.tsx +++ b/storybook/src/pages/amsterdam/HomePage/HomeSpotlight.tsx @@ -11,7 +11,7 @@ export const HomeSpotlight = () => ( Check welke ontheffing of vergunning u nodig heeft. Bijvoorbeeld een RVV, TVM, objectvergunning,{' '} nachtwerkontheffing, e-RVV, e-TVM of filmmelding. Dat regult u allemaal met 1 formulier. - + Eenvoudig regelen @@ -23,7 +23,7 @@ export const HomeSpotlight = () => ( Lees waar en wanneer we werken aan nieuwbouw, groot onderhoud, herinrichting van straten en wegen, aanpak van parken of ontwikkeling van hele gebieden. - + Alle bouw- en verkeerswerkzaamheden From 6dfaf238fb1b120681b3d6db97b96cd1a7f805bb Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 10 Jul 2024 10:56:46 +0200 Subject: [PATCH 02/12] Refactor `onBackground` prop of LinkList.Link to `inverseColor` and `contrastColor` --- .../src/components/link-list/link-list.scss | 12 +- .../react/src/LinkList/LinkListLink.test.tsx | 14 ++- packages/react/src/LinkList/LinkListLink.tsx | 13 ++- .../src/components/ams/link-list.tokens.json | 88 ++++++++++---- .../src/components/Footer/Footer.stories.tsx | 30 ++--- .../src/components/LinkList/LinkList.docs.mdx | 19 ++- .../components/LinkList/LinkList.stories.tsx | 109 ++++++++---------- .../src/components/shared/exampleContent.ts | 10 +- 8 files changed, 173 insertions(+), 122 deletions(-) diff --git a/packages/css/src/components/link-list/link-list.scss b/packages/css/src/components/link-list/link-list.scss index 8df908b4fe..fd03d56739 100644 --- a/packages/css/src/components/link-list/link-list.scss +++ b/packages/css/src/components/link-list/link-list.scss @@ -53,18 +53,18 @@ @include hyphenation; } -.ams-link-list__link--on-background-dark { - color: var(--ams-link-list-link-on-background-dark-color); +.ams-link-list__link--contrast-color { + color: var(--ams-link-list-link-contrast-color-color); &:hover { - color: var(--ams-link-list-link-on-background-dark-hover-color); + color: var(--ams-link-list-link-contrast-color-hover-color); } } -.ams-link-list__link--on-background-light { - color: var(--ams-link-list-link-on-background-light-color); +.ams-link-list__link--inverse-color { + color: var(--ams-link-list-link-inverse-color-color); &:hover { - color: var(--ams-link-list-link-on-background-light-hover-color); + color: var(--ams-link-list-link-inverse-color-hover-color); } } diff --git a/packages/react/src/LinkList/LinkListLink.test.tsx b/packages/react/src/LinkList/LinkListLink.test.tsx index 523a0325ba..0d48e38f5a 100644 --- a/packages/react/src/LinkList/LinkListLink.test.tsx +++ b/packages/react/src/LinkList/LinkListLink.test.tsx @@ -43,12 +43,20 @@ describe('Link list link', () => { expect(component).toHaveClass('ams-link-list__link--small') }) - it('renders a class name for the background color', () => { - render() + it('renders the class name for contrast color', () => { + render() const component = screen.getByRole('link') - expect(component).toHaveClass('ams-link-list__link--on-background-dark') + expect(component).toHaveClass('ams-link-list__link--contrast-color') + }) + + it('renders the class name for inverse color', () => { + render() + + const component = screen.getByRole('link') + + expect(component).toHaveClass('ams-link-list__link--inverse-color') }) it('supports ForwardRef in React', () => { diff --git a/packages/react/src/LinkList/LinkListLink.tsx b/packages/react/src/LinkList/LinkListLink.tsx index e399fd1d38..ae23144577 100644 --- a/packages/react/src/LinkList/LinkListLink.tsx +++ b/packages/react/src/LinkList/LinkListLink.tsx @@ -9,13 +9,13 @@ import { forwardRef } from 'react' import type { AnchorHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react' import { Icon } from '../Icon' -type BackgroundName = 'default' | 'light' | 'dark' - export type LinkListLinkProps = { /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */ icon?: Function - /** Describes the underlying background colour. Allows the text to provide visual contrast. */ - onBackground?: BackgroundName + /** Changes the text colour for readability on a light background. */ + contrastColor?: boolean + /** Changes the text colour for readability on a dark background. */ + inverseColor?: boolean /** The size of the text. Use the same size for all items in the list. */ size?: 'small' | 'large' } & PropsWithChildren> @@ -29,7 +29,7 @@ const iconSizeMap = { /** One link with a Link List. */ export const LinkListLink = forwardRef( ( - { children, className, icon, onBackground, size, ...restProps }: LinkListLinkProps, + { children, className, icon, contrastColor, inverseColor, size, ...restProps }: LinkListLinkProps, ref: ForwardedRef, ) => { return ( @@ -37,7 +37,8 @@ export const LinkListLink = forwardRef( {['Veel gestelde vragen', 'Over ons', 'Werken bij', 'Kalender', 'Uit in Amsterdam', 'Bronnen'].map( (label, index) => ( - + {label} ), @@ -62,13 +62,13 @@ export const Default: Story = { Hebt u een vraag en kunt u het antwoord niet vinden op deze website? Neem dan contact met ons op. - + E-mail - + 14 020 - + Contactgegevens en openingstijden @@ -79,7 +79,7 @@ export const Default: Story = { Nieuwsbrief - + Inschrijven @@ -90,7 +90,7 @@ export const Default: Story = { {socialPlatforms.map(({ name, icon }) => ( - + {name} ))} @@ -129,10 +129,10 @@ export const Onderzoek: Story = { Heeft u een vraag en kunt u het antwoord niet vinden op deze site? Neem dan contact met ons op. - + E-mail - + 020 251 0333 @@ -145,13 +145,13 @@ export const Onderzoek: Story = { Bent u uitgenodigd om mee te doen aan onderzoek of heeft u vragen over het panel of stadspaspanel? - + Meedoen aan onderzoek - + Panel Amsterdam - + Stadspaspanel Amsterdam @@ -161,16 +161,16 @@ export const Onderzoek: Story = { Onderzoek en Statistiek - + Over Onderzoek en Statistiek - + Veelgestelde vragen - + Nieuwsbrief - + Vacatures diff --git a/storybook/src/components/LinkList/LinkList.docs.mdx b/storybook/src/components/LinkList/LinkList.docs.mdx index ee4241c5fb..7bee56bebb 100644 --- a/storybook/src/components/LinkList/LinkList.docs.mdx +++ b/storybook/src/components/LinkList/LinkList.docs.mdx @@ -43,12 +43,21 @@ Any attributes and the `ref` are passed on to the `` element. ### On a Coloured Background -On a dark background, the link colour is white. +A link on a coloured background must adjust its text colour to provide enough contrast. +We have lighter and darker background colours, and links behave differently on each. +Stijlweb shows [which colours suit which backgrounds](https://amsterdam.nl/stijlweb/basiselementen/kleuren/). +Although they only address headings and paragraphs, the same principle applies to links. -Specify the background context for each link in the list – the link is responsible for its own colors. +- Set the `contrastColor` prop on a yellow, orange or green background. + It will make the link black. +- Use the `inverseColor` prop on a purple or dark blue background. + It will make the link white. +- On the other background colours, choose either one, but do so consistently. - +#### Contrast Colour -The same goes for a light (not white) background color. The link colour is black here. + - +#### Inverse Colour + + diff --git a/storybook/src/components/LinkList/LinkList.stories.tsx b/storybook/src/components/LinkList/LinkList.stories.tsx index 18f3027644..34365c798f 100644 --- a/storybook/src/components/LinkList/LinkList.stories.tsx +++ b/storybook/src/components/LinkList/LinkList.stories.tsx @@ -6,40 +6,63 @@ import { LinkList } from '@amsterdam/design-system-react/src' import * as Icons from '@amsterdam/design-system-react-icons' import { Meta, StoryObj } from '@storybook/react' +import { contrastColorDecorator, inverseColorDecorator } from '../shared/decorators' import { exampleLinkList } from '../shared/exampleContent' -const links = exampleLinkList() +const linkList = exampleLinkList() const meta = { title: 'Components/Navigation/Link List', component: LinkList, +} satisfies Meta + +export default meta + +const linkMeta = { + component: LinkList.Link, + args: { + children: linkList[0], + contrastColor: undefined, + href: '#', + icon: Icons.ChevronRightIcon, + inverseColor: undefined, + size: undefined, + }, +} satisfies Meta + +type Story = StoryObj +type LinkStory = StoryObj + +const StoryTemplate: Story = { args: { - children: links.map((text, index) => ( + children: linkList.map((text, index) => ( {text} )), }, -} satisfies Meta - -export default meta +} -const linkMeta = { - title: 'Components/Navigation/Link List Link', - component: LinkList.Link, +const LinkStoryTemplate: LinkStory = { + args: { + children: linkList[0], + contrastColor: undefined, + href: '#', + icon: Icons.ChevronRightIcon, + inverseColor: undefined, + size: undefined, + }, argTypes: { + contrastColor: { + control: { type: 'boolean' }, + }, + inverseColor: { + control: { type: 'boolean' }, + }, icon: { control: { type: 'select' }, options: Object.keys(Icons), mapping: Icons, - defaultValue: Icons.ChevronRightIcon, - }, - onBackground: { - control: { - type: 'radio', - labels: { undefined: '(not set)', light: 'light', dark: 'dark' }, - }, - options: [undefined, 'light', 'dark'], }, size: { control: { @@ -49,33 +72,24 @@ const linkMeta = { options: ['small', undefined, 'large'], }, }, -} satisfies Meta - -type Story = StoryObj -type LinkStory = StoryObj - -const LinkTemplate: Story = {} - -const LinkStoryTemplate: LinkStory = { - args: { - href: '#', - }, - argTypes: linkMeta.argTypes, decorators: [ (Story) => ( ), + contrastColorDecorator, + inverseColorDecorator, ], render: ({ children, ...args }) => {children}, } export const Default: Story = { - ...LinkTemplate, + ...StoryTemplate, } export const CustomIcons: Story = { + ...StoryTemplate, args: { children: [ @@ -92,6 +106,7 @@ export const CustomIcons: Story = { } export const SmallText: Story = { + ...StoryTemplate, args: { children: [ @@ -109,44 +124,20 @@ export const SmallText: Story = { export const Link: LinkStory = { ...LinkStoryTemplate, - args: { - children: 'Alles over openbare orde en veiligheid', - href: '#', - onBackground: undefined, - size: undefined, - }, } -export const OnDarkBackground: LinkStory = { +export const ContrastColour: LinkStory = { ...LinkStoryTemplate, args: { - children: links[0], - href: '#', - onBackground: 'dark', + ...LinkStoryTemplate.args, + contrastColor: true, }, - decorators: [ - ...LinkStoryTemplate.decorators, - (Story) => ( -
- -
- ), - ], } -export const OnLightBackground: LinkStory = { +export const InverseColour: LinkStory = { ...LinkStoryTemplate, args: { - children: links[0], - href: '#', - onBackground: 'light', + ...LinkStoryTemplate.args, + inverseColor: true, }, - decorators: [ - ...LinkStoryTemplate.decorators, - (Story) => ( -
- -
- ), - ], } diff --git a/storybook/src/components/shared/exampleContent.ts b/storybook/src/components/shared/exampleContent.ts index d393822c56..b53be2bb3e 100644 --- a/storybook/src/components/shared/exampleContent.ts +++ b/storybook/src/components/shared/exampleContent.ts @@ -48,11 +48,11 @@ export const exampleLinkList = () => 'EIT Culture & Creativity', ], [ - 'Dam tot Damloop 17 september. afsluitingen', - 'De Nieuwe Noorder, omleiding', - 'Brug bij Zwarte Gouw/Weerslootpad, omleiding fietsers en voetgangers', - 'Metaalbewerkerweg en Kamperfoelieweg, omleiding voor fietsers', - 'H.M. Terwogtweg, afsluitweg', + 'Dam tot Damloop 17 september: afsluitingen', + 'De Nieuwe Noorder: omleiding', + 'Brug bij Zwarte Gouw/Weerslootpad: omleiding fietsers en voetgangers', + 'Metaalbewerkerweg en Kamperfoelieweg: omleiding voor fietsers', + 'H.M. Terwogtweg: afsluitweg', 'Meer werkzaamheden in stadsdeel Noord', ], ]) From e71fc918645d74eb900c8fe695d9ad1cc51ed44d Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Mon, 22 Jul 2024 14:43:18 +0200 Subject: [PATCH 03/12] Refactor `onBackground` prop of IconButton to `inverseColor` and `contrastColor` --- .../components/icon-button/icon-button.scss | 24 +++++++++---------- .../react/src/IconButton/IconButton.test.tsx | 12 +++++----- packages/react/src/IconButton/IconButton.tsx | 12 ++++++---- .../components/ams/icon-button.tokens.json | 4 ++-- .../components/IconButton/IconButton.docs.mdx | 21 +++++++++++----- .../IconButton/IconButton.stories.tsx | 18 +++++--------- 6 files changed, 48 insertions(+), 43 deletions(-) diff --git a/packages/css/src/components/icon-button/icon-button.scss b/packages/css/src/components/icon-button/icon-button.scss index 7a7de250b4..86b484dab7 100644 --- a/packages/css/src/components/icon-button/icon-button.scss +++ b/packages/css/src/components/icon-button/icon-button.scss @@ -30,31 +30,31 @@ @include reset; } -.ams-icon-button--on-background-light { - color: var(--ams-icon-button-on-background-light-color); +.ams-icon-button--contrast-color { + color: var(--ams-icon-button-contrast-color-color); &:hover { - background-color: var(--ams-icon-button-on-background-light-hover-background-color); - color: var(--ams-icon-button-on-background-light-hover-color); + background-color: var(--ams-icon-button-contrast-color-hover-background-color); + color: var(--ams-icon-button-contrast-color-hover-color); } &:disabled { background-color: transparent; - color: var(--ams-icon-button-on-background-light-disabled-color); + color: var(--ams-icon-button-contrast-color-disabled-color); } } -.ams-icon-button--on-background-dark { - background-color: var(--ams-icon-button-on-background-dark-background-color); - color: var(--ams-icon-button-on-background-dark-color); +.ams-icon-button--inverse-color { + background-color: var(--ams-icon-button-inverse-color-background-color); + color: var(--ams-icon-button-inverse-color-color); &:hover { - background-color: var(--ams-icon-button-on-background-dark-hover-background-color); - color: var(--ams-icon-button-on-background-dark-hover-color); + background-color: var(--ams-icon-button-inverse-color-hover-background-color); + color: var(--ams-icon-button-inverse-color-hover-color); } &:disabled { - background-color: var(--ams-icon-button-on-background-dark-disabled-background-color); - color: var(--ams-icon-button-on-background-dark-disabled-color); + background-color: var(--ams-icon-button-inverse-color-disabled-background-color); + color: var(--ams-icon-button-inverse-color-disabled-color); } } diff --git a/packages/react/src/IconButton/IconButton.test.tsx b/packages/react/src/IconButton/IconButton.test.tsx index 2e8be603a4..3d0c53ef93 100644 --- a/packages/react/src/IconButton/IconButton.test.tsx +++ b/packages/react/src/IconButton/IconButton.test.tsx @@ -37,20 +37,20 @@ describe('Icon button', () => { expect(component).toBeInTheDocument() }) - it('renders the right on background light class', () => { - render() + it('renders the class name for contrast color', () => { + render() const component = screen.getByRole('button') - expect(component).toHaveClass('ams-icon-button--on-background-light') + expect(component).toHaveClass('ams-icon-button--contrast-color') }) - it('renders the right on background dark class', () => { - render() + it('renders the class name for inverse color', () => { + render() const component = screen.getByRole('button') - expect(component).toHaveClass('ams-icon-button--on-background-dark') + expect(component).toHaveClass('ams-icon-button--inverse-color') }) it('supports ForwardRef in React', () => { diff --git a/packages/react/src/IconButton/IconButton.tsx b/packages/react/src/IconButton/IconButton.tsx index 0a6045ccff..bf08ddb17b 100644 --- a/packages/react/src/IconButton/IconButton.tsx +++ b/packages/react/src/IconButton/IconButton.tsx @@ -12,8 +12,10 @@ import { Icon } from '../Icon' export type IconButtonProps = { /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */ label: string - /** Describes the underlying background colour. Allows the icon to provide visual contrast. */ - onBackground?: 'light' | 'dark' + /** Changes the text colour for readability on a light background. */ + contrastColor?: boolean + /** Changes the text colour for readability on a dark background. */ + inverseColor?: boolean /** The size of the icon. Corresponds with the text levels. */ size?: 'level-3' | 'level-4' | 'level-5' | 'level-6' /** The component rendering the icon’s markup. */ @@ -22,7 +24,7 @@ export type IconButtonProps = { export const IconButton = forwardRef( ( - { className, label, onBackground, size = 'level-5', svg = CloseIcon, ...restProps }: IconButtonProps, + { className, label, contrastColor, inverseColor, size = 'level-5', svg = CloseIcon, ...restProps }: IconButtonProps, ref: ForwardedRef, ) => (