From 17374b6e43978ffcec8bbdd5afd765015cb35624 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 16 Jan 2024 14:09:05 +0100 Subject: [PATCH 01/16] Scaffold --- packages/css/src/components/badge/README.md | 1 + packages/css/src/components/badge/badge.scss | 58 +++++++++++++++++++ packages/css/src/components/index.scss | 1 + packages/react/src/Badge/Badge.test.tsx | 41 +++++++++++++ packages/react/src/Badge/Badge.tsx | 22 +++++++ packages/react/src/Badge/README.md | 3 + packages/react/src/Badge/index.ts | 2 + packages/react/src/index.ts | 1 + .../components/amsterdam/badge.tokens.json | 48 +++++++++++++++ .../storybook-react/src/Badge/Badge.docs.mdx | 11 ++++ .../src/Badge/Badge.stories.tsx | 30 ++++++++++ 11 files changed, 218 insertions(+) create mode 100644 packages/css/src/components/badge/README.md create mode 100644 packages/css/src/components/badge/badge.scss create mode 100644 packages/react/src/Badge/Badge.test.tsx create mode 100644 packages/react/src/Badge/Badge.tsx create mode 100644 packages/react/src/Badge/README.md create mode 100644 packages/react/src/Badge/index.ts create mode 100644 proprietary/tokens/src/components/amsterdam/badge.tokens.json create mode 100644 storybook/storybook-react/src/Badge/Badge.docs.mdx create mode 100644 storybook/storybook-react/src/Badge/Badge.stories.tsx diff --git a/packages/css/src/components/badge/README.md b/packages/css/src/components/badge/README.md new file mode 100644 index 0000000000..6510ccd5e0 --- /dev/null +++ b/packages/css/src/components/badge/README.md @@ -0,0 +1 @@ +# Badge diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss new file mode 100644 index 0000000000..ca3469df18 --- /dev/null +++ b/packages/css/src/components/badge/badge.scss @@ -0,0 +1,58 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2023 Gemeente Amsterdam + */ + +.amsterdam-badge { + display: inline-block; + font-family: var(--amsterdam-badge-font-family); + font-size: var(--amsterdam-badge-spacious-font-size); + font-weight: var(--amsterdam-badge-font-weight); + line-height: var(--amsterdam-badge-spacious-line-height); + padding-inline: var(--amsterdam-badge-padding-inline); + + .amsterdam-theme--compact & { + font-size: var(--amsterdam-badge-compact-font-size); + line-height: var(--amsterdam-badge-compact-line-height); + } + + &--blue { + background-color: var(--amsterdam-badge-blue-background-color); + color: var(--amsterdam-badge-blue-color); + } + + &--dark-blue { + background-color: var(--amsterdam-badge-dark-blue-background-color); + color: var(--amsterdam-badge-dark-blue-color); + } + + &--green { + background-color: var(--amsterdam-badge-green-background-color); + color: var(--amsterdam-badge-green-color); + } + + &--dark-green { + background-color: var(--amsterdam-badge-dark-green-background-color); + color: var(--amsterdam-badge-dark-green-color); + } + + &--orange { + background-color: var(--amsterdam-badge-orange-background-color); + color: var(--amsterdam-badge-orange-color); + } + + &--magenta { + background-color: var(--amsterdam-badge-magenta-background-color); + color: var(--amsterdam-badge-magenta-color); + } + + &--purple { + background-color: var(--amsterdam-badge-purple-background-color); + color: var(--amsterdam-badge-purple-color); + } + + &--yellow { + background-color: var(--amsterdam-badge-yellow-background-color); + color: var(--amsterdam-badge-yellow-color); + } +} diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss index f4374cd68d..247c622e19 100644 --- a/packages/css/src/components/index.scss +++ b/packages/css/src/components/index.scss @@ -4,6 +4,7 @@ */ /* Append here */ +@import "./badge/badge"; @import "./table/table"; @import "./mega-menu/mega-menu"; @import "./icon-button/icon-button"; diff --git a/packages/react/src/Badge/Badge.test.tsx b/packages/react/src/Badge/Badge.test.tsx new file mode 100644 index 0000000000..2a5e0bdb04 --- /dev/null +++ b/packages/react/src/Badge/Badge.test.tsx @@ -0,0 +1,41 @@ +import { render } from '@testing-library/react' +import { createRef } from 'react' +import { Badge } from './Badge' +import '@testing-library/jest-dom' + +describe('Badge', () => { + 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-badge') + }) + + it('renders an additional class name', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('amsterdam-badge 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/Badge/Badge.tsx b/packages/react/src/Badge/Badge.tsx new file mode 100644 index 0000000000..0697c3fbd6 --- /dev/null +++ b/packages/react/src/Badge/Badge.tsx @@ -0,0 +1,22 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2023 Gemeente Amsterdam + */ + +import clsx from 'clsx' +import { forwardRef } from 'react' +import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' + +export interface BadgeProps extends PropsWithChildren> { + color?: 'blue' | 'dark-blue' | 'green' | 'dark-green' | 'orange' | 'magenta' | 'purple' | 'yellow' +} + +export const Badge = forwardRef( + ({ children, className, color = 'dark-green', ...restProps }: BadgeProps, ref: ForwardedRef) => ( + + {children} + + ), +) + +Badge.displayName = 'Badge' diff --git a/packages/react/src/Badge/README.md b/packages/react/src/Badge/README.md new file mode 100644 index 0000000000..b34e77c7c1 --- /dev/null +++ b/packages/react/src/Badge/README.md @@ -0,0 +1,3 @@ +# React Badge component + +[Badge documentation](../../../css/src/badge/README.md) diff --git a/packages/react/src/Badge/index.ts b/packages/react/src/Badge/index.ts new file mode 100644 index 0000000000..292a59dbf2 --- /dev/null +++ b/packages/react/src/Badge/index.ts @@ -0,0 +1,2 @@ +export { Badge } from './Badge' +export type { BadgeProps } from './Badge' diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 992c789f5c..9df069b981 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -4,6 +4,7 @@ */ /* Append here */ +export * from './Badge' export * from './Table' export * from './MegaMenu' export * from './IconButton' diff --git a/proprietary/tokens/src/components/amsterdam/badge.tokens.json b/proprietary/tokens/src/components/amsterdam/badge.tokens.json new file mode 100644 index 0000000000..4ca89b1da5 --- /dev/null +++ b/proprietary/tokens/src/components/amsterdam/badge.tokens.json @@ -0,0 +1,48 @@ +{ + "amsterdam": { + "badge": { + "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, + "padding-inline": { "value": "0.5rem" }, + "spacious": { + "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } + }, + "compact": { + "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } + }, + "dark-blue": { + "background-color": { "value": "{amsterdam.color.dark-blue}" }, + "color": { "value": "{amsterdam.color.primary-white}" } + }, + "blue": { + "background-color": { "value": "{amsterdam.color.blue}" }, + "color": { "value": "{amsterdam.color.primary-white}" } + }, + "green": { + "background-color": { "value": "{amsterdam.color.green}" }, + "color": { "value": "{amsterdam.color.primary-black}" } + }, + "dark-green": { + "background-color": { "value": "{amsterdam.color.dark-green}" }, + "color": { "value": "{amsterdam.color.primary-white}" } + }, + "orange": { + "background-color": { "value": "{amsterdam.color.orange}" }, + "color": { "value": "{amsterdam.color.primary-black}" } + }, + "magenta": { + "background-color": { "value": "{amsterdam.color.magenta}" }, + "color": { "value": "{amsterdam.color.primary-white}" } + }, + "purple": { + "background-color": { "value": "{amsterdam.color.purple}" }, + "color": { "value": "{amsterdam.color.primary-white}" } + }, + "yellow": { + "background-color": { "value": "{amsterdam.color.yellow}" }, + "color": { "value": "{amsterdam.color.primary-black}" } + } + } + } +} diff --git a/storybook/storybook-react/src/Badge/Badge.docs.mdx b/storybook/storybook-react/src/Badge/Badge.docs.mdx new file mode 100644 index 0000000000..badcc7e173 --- /dev/null +++ b/storybook/storybook-react/src/Badge/Badge.docs.mdx @@ -0,0 +1,11 @@ +import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import * as BadgeStories from "./Badge.stories.tsx"; +import README from "../../../../packages/css/src/components/badge/README.md?raw"; + + + +{README} + + + + diff --git a/storybook/storybook-react/src/Badge/Badge.stories.tsx b/storybook/storybook-react/src/Badge/Badge.stories.tsx new file mode 100644 index 0000000000..cf129d8181 --- /dev/null +++ b/storybook/storybook-react/src/Badge/Badge.stories.tsx @@ -0,0 +1,30 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2023 Gemeente Amsterdam + */ + +import { Badge } from '@amsterdam/design-system-react' +import { Meta, StoryObj } from '@storybook/react' + +const meta = { + title: 'Badge', + component: Badge, + args: { + children: 'Tip', + }, + argTypes: { + color: { + control: { + type: 'inline-radio', + }, + options: ['blue', 'dark-blue', 'green', 'dark-green', 'orange', 'magenta', 'purple', 'yellow'], + selected: 'dark-green', + }, + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Default: Story = {} From 2bfa7e76ad91a82c9d055d93dd3babac175206eb Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Wed, 17 Jan 2024 08:59:19 +0100 Subject: [PATCH 02/16] Storybook category --- storybook/storybook-react/src/Badge/Badge.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/storybook/storybook-react/src/Badge/Badge.stories.tsx b/storybook/storybook-react/src/Badge/Badge.stories.tsx index cf129d8181..8e41f00f37 100644 --- a/storybook/storybook-react/src/Badge/Badge.stories.tsx +++ b/storybook/storybook-react/src/Badge/Badge.stories.tsx @@ -7,7 +7,7 @@ import { Badge } from '@amsterdam/design-system-react' import { Meta, StoryObj } from '@storybook/react' const meta = { - title: 'Badge', + title: 'Feedback/Badge', component: Badge, args: { children: 'Tip', From 69a35df7e3b7d821e4d858755e8b4fea8bd8b2fd Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 18 Jan 2024 15:28:23 +0100 Subject: [PATCH 03/16] Font family missing --- proprietary/tokens/src/components/amsterdam/badge.tokens.json | 1 + 1 file changed, 1 insertion(+) diff --git a/proprietary/tokens/src/components/amsterdam/badge.tokens.json b/proprietary/tokens/src/components/amsterdam/badge.tokens.json index 4ca89b1da5..810f4f0034 100644 --- a/proprietary/tokens/src/components/amsterdam/badge.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/badge.tokens.json @@ -1,6 +1,7 @@ { "amsterdam": { "badge": { + "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, "padding-inline": { "value": "0.5rem" }, "spacious": { From 4a785133bcadfe175dc7a0368804619081da685b Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 19 Jan 2024 13:57:48 +0100 Subject: [PATCH 04/16] Remove concat selectors, added color tests --- packages/css/src/components/badge/badge.scss | 64 ++++++++++---------- packages/react/src/Badge/Badge.test.tsx | 18 ++++++ 2 files changed, 50 insertions(+), 32 deletions(-) diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss index ca3469df18..dd00df4ee8 100644 --- a/packages/css/src/components/badge/badge.scss +++ b/packages/css/src/components/badge/badge.scss @@ -15,44 +15,44 @@ font-size: var(--amsterdam-badge-compact-font-size); line-height: var(--amsterdam-badge-compact-line-height); } +} - &--blue { - background-color: var(--amsterdam-badge-blue-background-color); - color: var(--amsterdam-badge-blue-color); - } +.amsterdam-badge--blue { + background-color: var(--amsterdam-badge-blue-background-color); + color: var(--amsterdam-badge-blue-color); +} - &--dark-blue { - background-color: var(--amsterdam-badge-dark-blue-background-color); - color: var(--amsterdam-badge-dark-blue-color); - } +.amsterdam-badge--dark-blue { + background-color: var(--amsterdam-badge-dark-blue-background-color); + color: var(--amsterdam-badge-dark-blue-color); +} - &--green { - background-color: var(--amsterdam-badge-green-background-color); - color: var(--amsterdam-badge-green-color); - } +.amsterdam-badge--green { + background-color: var(--amsterdam-badge-green-background-color); + color: var(--amsterdam-badge-green-color); +} - &--dark-green { - background-color: var(--amsterdam-badge-dark-green-background-color); - color: var(--amsterdam-badge-dark-green-color); - } +.amsterdam-badge--dark-green { + background-color: var(--amsterdam-badge-dark-green-background-color); + color: var(--amsterdam-badge-dark-green-color); +} - &--orange { - background-color: var(--amsterdam-badge-orange-background-color); - color: var(--amsterdam-badge-orange-color); - } +.amsterdam-badge--orange { + background-color: var(--amsterdam-badge-orange-background-color); + color: var(--amsterdam-badge-orange-color); +} - &--magenta { - background-color: var(--amsterdam-badge-magenta-background-color); - color: var(--amsterdam-badge-magenta-color); - } +.amsterdam-badge--magenta { + background-color: var(--amsterdam-badge-magenta-background-color); + color: var(--amsterdam-badge-magenta-color); +} - &--purple { - background-color: var(--amsterdam-badge-purple-background-color); - color: var(--amsterdam-badge-purple-color); - } +.amsterdam-badge--purple { + background-color: var(--amsterdam-badge-purple-background-color); + color: var(--amsterdam-badge-purple-color); +} - &--yellow { - background-color: var(--amsterdam-badge-yellow-background-color); - color: var(--amsterdam-badge-yellow-color); - } +.amsterdam-badge--yellow { + background-color: var(--amsterdam-badge-yellow-background-color); + color: var(--amsterdam-badge-yellow-color); } diff --git a/packages/react/src/Badge/Badge.test.tsx b/packages/react/src/Badge/Badge.test.tsx index 2a5e0bdb04..4372b4bc20 100644 --- a/packages/react/src/Badge/Badge.test.tsx +++ b/packages/react/src/Badge/Badge.test.tsx @@ -38,4 +38,22 @@ describe('Badge', () => { expect(ref.current).toBe(component) }) + + it('renders with default color', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('amsterdam-badge') + expect(component).toHaveClass('amsterdam-badge--dark-green') + }) + + it('renders with specified color', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('amsterdam-badge') + expect(component).toHaveClass('amsterdam-badge--blue') + }) }) From 7aaf67198c95367da7e9029eab5efb9693ab0f24 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Mon, 22 Jan 2024 10:40:23 +0100 Subject: [PATCH 05/16] Add initial documentation --- packages/css/src/components/badge/README.md | 13 ++++++++++ .../storybook-react/src/Badge/Badge.docs.mdx | 12 +++++++-- .../src/Badge/Badge.stories.tsx | 25 ++++++++++++++++++- 3 files changed, 47 insertions(+), 3 deletions(-) diff --git a/packages/css/src/components/badge/README.md b/packages/css/src/components/badge/README.md index 6510ccd5e0..560cb01cec 100644 --- a/packages/css/src/components/badge/README.md +++ b/packages/css/src/components/badge/README.md @@ -1 +1,14 @@ # Badge + +A prominently colored box containing 1 or 2 words to guide the user in taking a specific action. + +## Design + +The text in the Badge is of the same size as the surrounding text. +Its color is either white or black, depending on the background colour. +The box aligns to the left with the running text. + +## Guidelines + +The default background colour is green. +Suggestions when to use the other colours will follow soon. diff --git a/storybook/storybook-react/src/Badge/Badge.docs.mdx b/storybook/storybook-react/src/Badge/Badge.docs.mdx index badcc7e173..873144e5ff 100644 --- a/storybook/storybook-react/src/Badge/Badge.docs.mdx +++ b/storybook/storybook-react/src/Badge/Badge.docs.mdx @@ -1,4 +1,4 @@ -import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks"; import * as BadgeStories from "./Badge.stories.tsx"; import README from "../../../../packages/css/src/components/badge/README.md?raw"; @@ -6,6 +6,14 @@ import README from "../../../../packages/css/src/components/badge/README.md?raw" {README} +## Voorbeelden + +### Default + - +### In a list + +A tip can be used in a list. + + diff --git a/storybook/storybook-react/src/Badge/Badge.stories.tsx b/storybook/storybook-react/src/Badge/Badge.stories.tsx index 8e41f00f37..ce4607a5c7 100644 --- a/storybook/storybook-react/src/Badge/Badge.stories.tsx +++ b/storybook/storybook-react/src/Badge/Badge.stories.tsx @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -import { Badge } from '@amsterdam/design-system-react' +import { Badge, Heading, OrderedList } from '@amsterdam/design-system-react' import { Meta, StoryObj } from '@storybook/react' const meta = { @@ -28,3 +28,26 @@ export default meta type Story = StoryObj export const Default: Story = {} + +export const InList: Story = { + decorators: [ + (Story) => ( +
+ Verwerkingstijd en data + + Binnen Amsterdam op werkdagen binnen 24 uur. + + Vanuit een andere gemeente ongeveer 5 werkdagen. +
+ Geeft u uw verhuizing vantevoren door, dan wordt uw melding bewaard tot de verhuisdatum. Dan pas + begint de termijn van 24 uur of 5 werkdagen. + + + Een verhuizing doorgeven kan 4 weken van tevoren en maximaal 5 dagen erna. Geeft u het later door? Dan wordt + de dag van doorgeven de verhuisdatum. + + +
+ ), + ], +} From f99de0577571e1e1ac7f7e1fb890c93f1387dc82 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Mon, 22 Jan 2024 10:42:45 +0100 Subject: [PATCH 06/16] Correct copyright year --- packages/css/src/components/badge/badge.scss | 2 +- packages/react/src/Badge/Badge.tsx | 2 +- storybook/storybook-react/src/Badge/Badge.stories.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss index dd00df4ee8..5c40e53a99 100644 --- a/packages/css/src/components/badge/badge.scss +++ b/packages/css/src/components/badge/badge.scss @@ -1,6 +1,6 @@ /** * @license EUPL-1.2+ - * Copyright (c) 2023 Gemeente Amsterdam + * Copyright (c) 2024 Gemeente Amsterdam */ .amsterdam-badge { diff --git a/packages/react/src/Badge/Badge.tsx b/packages/react/src/Badge/Badge.tsx index 0697c3fbd6..fb51164a61 100644 --- a/packages/react/src/Badge/Badge.tsx +++ b/packages/react/src/Badge/Badge.tsx @@ -1,6 +1,6 @@ /** * @license EUPL-1.2+ - * Copyright (c) 2023 Gemeente Amsterdam + * Copyright (c) 2024 Gemeente Amsterdam */ import clsx from 'clsx' diff --git a/storybook/storybook-react/src/Badge/Badge.stories.tsx b/storybook/storybook-react/src/Badge/Badge.stories.tsx index ce4607a5c7..95590f2bec 100644 --- a/storybook/storybook-react/src/Badge/Badge.stories.tsx +++ b/storybook/storybook-react/src/Badge/Badge.stories.tsx @@ -1,6 +1,6 @@ /** * @license EUPL-1.2+ - * Copyright (c) 2023 Gemeente Amsterdam + * Copyright (c) 2024 Gemeente Amsterdam */ import { Badge, Heading, OrderedList } from '@amsterdam/design-system-react' From 308b1e8f7133c4c44ca680c14b80d4c9301627c1 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 23 Jan 2024 09:51:28 +0100 Subject: [PATCH 07/16] Requested changes --- packages/css/src/components/badge/README.md | 4 +- packages/css/src/components/badge/badge.scss | 10 ++ packages/react/src/Badge/Badge.test.tsx | 98 +++++++++++++++++-- packages/react/src/Badge/Badge.tsx | 11 ++- .../components/amsterdam/badge.tokens.json | 8 ++ .../storybook-react/src/Badge/Badge.docs.mdx | 10 +- .../src/Badge/Badge.stories.tsx | 29 +----- 7 files changed, 120 insertions(+), 50 deletions(-) diff --git a/packages/css/src/components/badge/README.md b/packages/css/src/components/badge/README.md index 560cb01cec..2711b51f80 100644 --- a/packages/css/src/components/badge/README.md +++ b/packages/css/src/components/badge/README.md @@ -4,9 +4,7 @@ A prominently colored box containing 1 or 2 words to guide the user in taking a ## Design -The text in the Badge is of the same size as the surrounding text. -Its color is either white or black, depending on the background colour. -The box aligns to the left with the running text. +The badge can contain a string of text or a number. ## Guidelines diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss index 5c40e53a99..653cc0d97b 100644 --- a/packages/css/src/components/badge/badge.scss +++ b/packages/css/src/components/badge/badge.scss @@ -56,3 +56,13 @@ background-color: var(--amsterdam-badge-yellow-background-color); color: var(--amsterdam-badge-yellow-color); } + +.amsterdam-badge--black { + background-color: var(--amsterdam-badge-black-background-color); + color: var(--amsterdam-badge-black-color); +} + +.amsterdam-badge--white { + background-color: var(--amsterdam-badge-white-background-color); + color: var(--amsterdam-badge-white-color); +} diff --git a/packages/react/src/Badge/Badge.test.tsx b/packages/react/src/Badge/Badge.test.tsx index 4372b4bc20..11dfb2097e 100644 --- a/packages/react/src/Badge/Badge.test.tsx +++ b/packages/react/src/Badge/Badge.test.tsx @@ -5,7 +5,7 @@ import '@testing-library/jest-dom' describe('Badge', () => { it('renders', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') @@ -14,7 +14,7 @@ describe('Badge', () => { }) it('renders a design system BEM class name', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') @@ -22,7 +22,7 @@ describe('Badge', () => { }) it('renders an additional class name', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') @@ -32,28 +32,108 @@ describe('Badge', () => { it('supports ForwardRef in React', () => { const ref = createRef() - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') expect(ref.current).toBe(component) }) + it('renders with a number label', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveTextContent('1') + }) + it('renders with default color', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') - expect(component).toHaveClass('amsterdam-badge') expect(component).toHaveClass('amsterdam-badge--dark-green') }) - it('renders with specified color', () => { - const { container } = render() + it('renders blue color', () => { + const { container } = render() const component = container.querySelector(':only-child') - expect(component).toHaveClass('amsterdam-badge') expect(component).toHaveClass('amsterdam-badge--blue') }) + + // 'blue' | 'dark-blue' | 'green' | 'dark-green' | 'orange' | 'magenta' | 'purple' | 'yellow' | 'black' | 'white' + + it('renders dark-blue color', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('amsterdam-badge--dark-blue') + }) + + it('renders green color', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('amsterdam-badge--green') + }) + + it('renders dark-green color', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('amsterdam-badge--dark-green') + }) + + it('renders orange color', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('amsterdam-badge--orange') + }) + + it('renders magenta color', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('amsterdam-badge--magenta') + }) + + it('renders purple color', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('amsterdam-badge--purple') + }) + + it('renders yellow color', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('amsterdam-badge--yellow') + }) + + it('renders black color', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('amsterdam-badge--black') + }) + + it('renders white color', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('amsterdam-badge--white') + }) }) diff --git a/packages/react/src/Badge/Badge.tsx b/packages/react/src/Badge/Badge.tsx index fb51164a61..87e270ad79 100644 --- a/packages/react/src/Badge/Badge.tsx +++ b/packages/react/src/Badge/Badge.tsx @@ -5,16 +5,17 @@ import clsx from 'clsx' import { forwardRef } from 'react' -import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' +import type { ForwardedRef, HTMLAttributes } from 'react' -export interface BadgeProps extends PropsWithChildren> { - color?: 'blue' | 'dark-blue' | 'green' | 'dark-green' | 'orange' | 'magenta' | 'purple' | 'yellow' +export interface BadgeProps extends HTMLAttributes { + label: string | number + color?: 'blue' | 'dark-blue' | 'green' | 'dark-green' | 'orange' | 'magenta' | 'purple' | 'yellow' | 'black' | 'white' } export const Badge = forwardRef( - ({ children, className, color = 'dark-green', ...restProps }: BadgeProps, ref: ForwardedRef) => ( + ({ label, className, color = 'dark-green', ...restProps }: BadgeProps, ref: ForwardedRef) => ( - {children} + {label} ), ) diff --git a/proprietary/tokens/src/components/amsterdam/badge.tokens.json b/proprietary/tokens/src/components/amsterdam/badge.tokens.json index 810f4f0034..4a25f7b224 100644 --- a/proprietary/tokens/src/components/amsterdam/badge.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/badge.tokens.json @@ -43,6 +43,14 @@ "yellow": { "background-color": { "value": "{amsterdam.color.yellow}" }, "color": { "value": "{amsterdam.color.primary-black}" } + }, + "black": { + "background-color": { "value": "{amsterdam.color.primary-black}" }, + "color": { "value": "{amsterdam.color.primary-white}" } + }, + "white": { + "background-color": { "value": "{amsterdam.color.primary-white}" }, + "color": { "value": "{amsterdam.color.primary-black}" } } } } diff --git a/storybook/storybook-react/src/Badge/Badge.docs.mdx b/storybook/storybook-react/src/Badge/Badge.docs.mdx index 873144e5ff..2a21267d46 100644 --- a/storybook/storybook-react/src/Badge/Badge.docs.mdx +++ b/storybook/storybook-react/src/Badge/Badge.docs.mdx @@ -1,4 +1,4 @@ -import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks"; +import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as BadgeStories from "./Badge.stories.tsx"; import README from "../../../../packages/css/src/components/badge/README.md?raw"; @@ -6,14 +6,10 @@ import README from "../../../../packages/css/src/components/badge/README.md?raw" {README} -## Voorbeelden +## Stories ### Default -### In a list - -A tip can be used in a list. - - + diff --git a/storybook/storybook-react/src/Badge/Badge.stories.tsx b/storybook/storybook-react/src/Badge/Badge.stories.tsx index 95590f2bec..17aad77445 100644 --- a/storybook/storybook-react/src/Badge/Badge.stories.tsx +++ b/storybook/storybook-react/src/Badge/Badge.stories.tsx @@ -3,21 +3,21 @@ * Copyright (c) 2024 Gemeente Amsterdam */ -import { Badge, Heading, OrderedList } from '@amsterdam/design-system-react' +import { Badge } from '@amsterdam/design-system-react' import { Meta, StoryObj } from '@storybook/react' const meta = { title: 'Feedback/Badge', component: Badge, args: { - children: 'Tip', + label: 'Tip', }, argTypes: { color: { control: { type: 'inline-radio', }, - options: ['blue', 'dark-blue', 'green', 'dark-green', 'orange', 'magenta', 'purple', 'yellow'], + options: ['blue', 'dark-blue', 'green', 'dark-green', 'orange', 'magenta', 'purple', 'yellow', 'black', 'white'], selected: 'dark-green', }, }, @@ -28,26 +28,3 @@ export default meta type Story = StoryObj export const Default: Story = {} - -export const InList: Story = { - decorators: [ - (Story) => ( -
- Verwerkingstijd en data - - Binnen Amsterdam op werkdagen binnen 24 uur. - - Vanuit een andere gemeente ongeveer 5 werkdagen. -
- Geeft u uw verhuizing vantevoren door, dan wordt uw melding bewaard tot de verhuisdatum. Dan pas - begint de termijn van 24 uur of 5 werkdagen. - - - Een verhuizing doorgeven kan 4 weken van tevoren en maximaal 5 dagen erna. Geeft u het later door? Dan wordt - de dag van doorgeven de verhuisdatum. - - -
- ), - ], -} From 3820afca1a452698c007915ebc7b87b9e82ce84b Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 23 Jan 2024 12:41:10 +0100 Subject: [PATCH 08/16] Removed commented line --- packages/react/src/Badge/Badge.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react/src/Badge/Badge.test.tsx b/packages/react/src/Badge/Badge.test.tsx index 11dfb2097e..50c53b4e3a 100644 --- a/packages/react/src/Badge/Badge.test.tsx +++ b/packages/react/src/Badge/Badge.test.tsx @@ -63,8 +63,6 @@ describe('Badge', () => { expect(component).toHaveClass('amsterdam-badge--blue') }) - // 'blue' | 'dark-blue' | 'green' | 'dark-green' | 'orange' | 'magenta' | 'purple' | 'yellow' | 'black' | 'white' - it('renders dark-blue color', () => { const { container } = render() From be7951c38c6a968572cff85dbdb87f9d302f840c Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Wed, 24 Jan 2024 11:39:02 +0100 Subject: [PATCH 09/16] Update packages/css/src/components/badge/README.md Co-authored-by: Vincent Smedinga --- packages/css/src/components/badge/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/css/src/components/badge/README.md b/packages/css/src/components/badge/README.md index 2711b51f80..732117d152 100644 --- a/packages/css/src/components/badge/README.md +++ b/packages/css/src/components/badge/README.md @@ -1,6 +1,7 @@ # Badge -A prominently colored box containing 1 or 2 words to guide the user in taking a specific action. +A prominently coloured box containing 1 or 2 words. +Guides the user in taking a specific action or describes its surrounding content. ## Design From 8bcae298813c6a64c412f3a98edfbe9c94bf81e3 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Wed, 24 Jan 2024 11:39:16 +0100 Subject: [PATCH 10/16] Update packages/css/src/components/badge/README.md Co-authored-by: Vincent Smedinga --- packages/css/src/components/badge/README.md | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/css/src/components/badge/README.md b/packages/css/src/components/badge/README.md index 732117d152..740d4831b0 100644 --- a/packages/css/src/components/badge/README.md +++ b/packages/css/src/components/badge/README.md @@ -5,9 +5,6 @@ Guides the user in taking a specific action or describes its surrounding content ## Design -The badge can contain a string of text or a number. - -## Guidelines - -The default background colour is green. -Suggestions when to use the other colours will follow soon. +The badge can contain a short text or a number. +The default background colour is dark green. +Suggestions on when to use the other colours will follow soon. From 129ee6d6d4ffd4c6b5871fe578c19e6b0b79aedf Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 24 Jan 2024 12:39:37 +0100 Subject: [PATCH 11/16] =?UTF-8?q?Use=20=E2=80=98dark=20blue=E2=80=99=20and?= =?UTF-8?q?=20=E2=80=98dark=20green=E2=80=99=20to=20match=20naming=20on=20?= =?UTF-8?q?Stijlweb?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://amsterdam.nl/stijlweb/basiselementen/kleuren/ --- packages/css/src/components/badge/badge.scss | 36 ++++++------- packages/react/src/Badge/Badge.test.tsx | 52 +++++++++---------- packages/react/src/Badge/Badge.tsx | 2 +- .../components/amsterdam/badge.tokens.json | 32 ++++++------ .../src/Badge/Badge.stories.tsx | 2 +- 5 files changed, 62 insertions(+), 62 deletions(-) diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss index 653cc0d97b..5eddcc8350 100644 --- a/packages/css/src/components/badge/badge.scss +++ b/packages/css/src/components/badge/badge.scss @@ -17,6 +17,11 @@ } } +.amsterdam-badge--black { + background-color: var(--amsterdam-badge-black-background-color); + color: var(--amsterdam-badge-black-color); +} + .amsterdam-badge--blue { background-color: var(--amsterdam-badge-blue-background-color); color: var(--amsterdam-badge-blue-color); @@ -27,19 +32,14 @@ color: var(--amsterdam-badge-dark-blue-color); } -.amsterdam-badge--green { - background-color: var(--amsterdam-badge-green-background-color); - color: var(--amsterdam-badge-green-color); -} - .amsterdam-badge--dark-green { background-color: var(--amsterdam-badge-dark-green-background-color); color: var(--amsterdam-badge-dark-green-color); } -.amsterdam-badge--orange { - background-color: var(--amsterdam-badge-orange-background-color); - color: var(--amsterdam-badge-orange-color); +.amsterdam-badge--green { + background-color: var(--amsterdam-badge-green-background-color); + color: var(--amsterdam-badge-green-color); } .amsterdam-badge--magenta { @@ -47,22 +47,22 @@ color: var(--amsterdam-badge-magenta-color); } +.amsterdam-badge--orange { + background-color: var(--amsterdam-badge-orange-background-color); + color: var(--amsterdam-badge-orange-color); +} + .amsterdam-badge--purple { background-color: var(--amsterdam-badge-purple-background-color); color: var(--amsterdam-badge-purple-color); } -.amsterdam-badge--yellow { - background-color: var(--amsterdam-badge-yellow-background-color); - color: var(--amsterdam-badge-yellow-color); -} - -.amsterdam-badge--black { - background-color: var(--amsterdam-badge-black-background-color); - color: var(--amsterdam-badge-black-color); -} - .amsterdam-badge--white { background-color: var(--amsterdam-badge-white-background-color); color: var(--amsterdam-badge-white-color); } + +.amsterdam-badge--yellow { + background-color: var(--amsterdam-badge-yellow-background-color); + color: var(--amsterdam-badge-yellow-color); +} diff --git a/packages/react/src/Badge/Badge.test.tsx b/packages/react/src/Badge/Badge.test.tsx index 50c53b4e3a..43d84cb5cb 100644 --- a/packages/react/src/Badge/Badge.test.tsx +++ b/packages/react/src/Badge/Badge.test.tsx @@ -55,31 +55,31 @@ describe('Badge', () => { expect(component).toHaveClass('amsterdam-badge--dark-green') }) - it('renders blue color', () => { - const { container } = render() + it('renders with black color', () => { + const { container } = render() const component = container.querySelector(':only-child') - expect(component).toHaveClass('amsterdam-badge--blue') + expect(component).toHaveClass('amsterdam-badge--black') }) - it('renders dark-blue color', () => { - const { container } = render() + it('renders with blue color', () => { + const { container } = render() const component = container.querySelector(':only-child') - expect(component).toHaveClass('amsterdam-badge--dark-blue') + expect(component).toHaveClass('amsterdam-badge--blue') }) - it('renders green color', () => { - const { container } = render() + it('renders with dark-blue color', () => { + const { container } = render() const component = container.querySelector(':only-child') - expect(component).toHaveClass('amsterdam-badge--green') + expect(component).toHaveClass('amsterdam-badge--dark-blue') }) - it('renders dark-green color', () => { + it('renders with dark-green color', () => { const { container } = render() const component = container.querySelector(':only-child') @@ -87,15 +87,15 @@ describe('Badge', () => { expect(component).toHaveClass('amsterdam-badge--dark-green') }) - it('renders orange color', () => { - const { container } = render() + it('renders with green color', () => { + const { container } = render() const component = container.querySelector(':only-child') - expect(component).toHaveClass('amsterdam-badge--orange') + expect(component).toHaveClass('amsterdam-badge--green') }) - it('renders magenta color', () => { + it('renders with magenta color', () => { const { container } = render() const component = container.querySelector(':only-child') @@ -103,35 +103,35 @@ describe('Badge', () => { expect(component).toHaveClass('amsterdam-badge--magenta') }) - it('renders purple color', () => { - const { container } = render() + it('renders with orange color', () => { + const { container } = render() const component = container.querySelector(':only-child') - expect(component).toHaveClass('amsterdam-badge--purple') + expect(component).toHaveClass('amsterdam-badge--orange') }) - it('renders yellow color', () => { - const { container } = render() + it('renders with purple color', () => { + const { container } = render() const component = container.querySelector(':only-child') - expect(component).toHaveClass('amsterdam-badge--yellow') + expect(component).toHaveClass('amsterdam-badge--purple') }) - it('renders black color', () => { - const { container } = render() + it('renders with white color', () => { + const { container } = render() const component = container.querySelector(':only-child') - expect(component).toHaveClass('amsterdam-badge--black') + expect(component).toHaveClass('amsterdam-badge--white') }) - it('renders white color', () => { - const { container } = render() + it('renders with yellow color', () => { + const { container } = render() const component = container.querySelector(':only-child') - expect(component).toHaveClass('amsterdam-badge--white') + expect(component).toHaveClass('amsterdam-badge--yellow') }) }) diff --git a/packages/react/src/Badge/Badge.tsx b/packages/react/src/Badge/Badge.tsx index 87e270ad79..170e40734d 100644 --- a/packages/react/src/Badge/Badge.tsx +++ b/packages/react/src/Badge/Badge.tsx @@ -8,8 +8,8 @@ import { forwardRef } from 'react' import type { ForwardedRef, HTMLAttributes } from 'react' export interface BadgeProps extends HTMLAttributes { + color?: 'black' | 'blue' | 'dark-blue' | 'dark-green' | 'green' | 'magenta' | 'orange' | 'purple' | 'white' | 'yellow' label: string | number - color?: 'blue' | 'dark-blue' | 'green' | 'dark-green' | 'orange' | 'magenta' | 'purple' | 'yellow' | 'black' | 'white' } export const Badge = forwardRef( diff --git a/proprietary/tokens/src/components/amsterdam/badge.tokens.json b/proprietary/tokens/src/components/amsterdam/badge.tokens.json index 4a25f7b224..830193a85e 100644 --- a/proprietary/tokens/src/components/amsterdam/badge.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/badge.tokens.json @@ -12,45 +12,45 @@ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } }, - "dark-blue": { - "background-color": { "value": "{amsterdam.color.dark-blue}" }, + "black": { + "background-color": { "value": "{amsterdam.color.primary-black}" }, "color": { "value": "{amsterdam.color.primary-white}" } }, "blue": { "background-color": { "value": "{amsterdam.color.blue}" }, - "color": { "value": "{amsterdam.color.primary-white}" } - }, - "green": { - "background-color": { "value": "{amsterdam.color.green}" }, "color": { "value": "{amsterdam.color.primary-black}" } }, + "dark-blue": { + "background-color": { "value": "{amsterdam.color.primary-blue}" }, + "color": { "value": "{amsterdam.color.primary-white}" } + }, "dark-green": { "background-color": { "value": "{amsterdam.color.dark-green}" }, "color": { "value": "{amsterdam.color.primary-white}" } }, - "orange": { - "background-color": { "value": "{amsterdam.color.orange}" }, + "green": { + "background-color": { "value": "{amsterdam.color.green}" }, "color": { "value": "{amsterdam.color.primary-black}" } }, "magenta": { "background-color": { "value": "{amsterdam.color.magenta}" }, "color": { "value": "{amsterdam.color.primary-white}" } }, - "purple": { - "background-color": { "value": "{amsterdam.color.purple}" }, - "color": { "value": "{amsterdam.color.primary-white}" } - }, - "yellow": { - "background-color": { "value": "{amsterdam.color.yellow}" }, + "orange": { + "background-color": { "value": "{amsterdam.color.orange}" }, "color": { "value": "{amsterdam.color.primary-black}" } }, - "black": { - "background-color": { "value": "{amsterdam.color.primary-black}" }, + "purple": { + "background-color": { "value": "{amsterdam.color.purple}" }, "color": { "value": "{amsterdam.color.primary-white}" } }, "white": { "background-color": { "value": "{amsterdam.color.primary-white}" }, "color": { "value": "{amsterdam.color.primary-black}" } + }, + "yellow": { + "background-color": { "value": "{amsterdam.color.yellow}" }, + "color": { "value": "{amsterdam.color.primary-black}" } } } } diff --git a/storybook/storybook-react/src/Badge/Badge.stories.tsx b/storybook/storybook-react/src/Badge/Badge.stories.tsx index 17aad77445..a72b461949 100644 --- a/storybook/storybook-react/src/Badge/Badge.stories.tsx +++ b/storybook/storybook-react/src/Badge/Badge.stories.tsx @@ -17,7 +17,7 @@ const meta = { control: { type: 'inline-radio', }, - options: ['blue', 'dark-blue', 'green', 'dark-green', 'orange', 'magenta', 'purple', 'yellow', 'black', 'white'], + options: ['black', 'blue', 'dark-blue', 'dark-green', 'green', 'magenta', 'orange', 'purple', 'white', 'yellow'], selected: 'dark-green', }, }, From 334eef8088683e9d7de6885a4eb146bf69c22fd4 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 24 Jan 2024 12:57:08 +0100 Subject: [PATCH 12/16] Extract reusable variable for badge colors Source: https://jaketrent.com/post/loop-typescript-union-type/ --- packages/react/src/Badge/Badge.test.tsx | 86 +++---------------------- packages/react/src/Badge/Badge.tsx | 17 ++++- 2 files changed, 24 insertions(+), 79 deletions(-) diff --git a/packages/react/src/Badge/Badge.test.tsx b/packages/react/src/Badge/Badge.test.tsx index 43d84cb5cb..5d029e2d57 100644 --- a/packages/react/src/Badge/Badge.test.tsx +++ b/packages/react/src/Badge/Badge.test.tsx @@ -1,6 +1,6 @@ import { render } from '@testing-library/react' import { createRef } from 'react' -import { Badge } from './Badge' +import { Badge, badgeColors } from './Badge' import '@testing-library/jest-dom' describe('Badge', () => { @@ -55,83 +55,13 @@ describe('Badge', () => { expect(component).toHaveClass('amsterdam-badge--dark-green') }) - it('renders with black color', () => { - const { container } = render() + badgeColors.map((color) => + it(`renders with ${color} color`, () => { + const { container } = render() - const component = container.querySelector(':only-child') - - expect(component).toHaveClass('amsterdam-badge--black') - }) - - it('renders with blue color', () => { - const { container } = render() - - const component = container.querySelector(':only-child') - - expect(component).toHaveClass('amsterdam-badge--blue') - }) - - it('renders with dark-blue color', () => { - const { container } = render() - - const component = container.querySelector(':only-child') - - expect(component).toHaveClass('amsterdam-badge--dark-blue') - }) - - it('renders with dark-green color', () => { - const { container } = render() - - const component = container.querySelector(':only-child') - - expect(component).toHaveClass('amsterdam-badge--dark-green') - }) - - it('renders with green color', () => { - const { container } = render() - - const component = container.querySelector(':only-child') - - expect(component).toHaveClass('amsterdam-badge--green') - }) + const component = container.querySelector(':only-child') - it('renders with magenta color', () => { - const { container } = render() - - const component = container.querySelector(':only-child') - - expect(component).toHaveClass('amsterdam-badge--magenta') - }) - - it('renders with orange color', () => { - const { container } = render() - - const component = container.querySelector(':only-child') - - expect(component).toHaveClass('amsterdam-badge--orange') - }) - - it('renders with purple color', () => { - const { container } = render() - - const component = container.querySelector(':only-child') - - expect(component).toHaveClass('amsterdam-badge--purple') - }) - - it('renders with white color', () => { - const { container } = render() - - const component = container.querySelector(':only-child') - - expect(component).toHaveClass('amsterdam-badge--white') - }) - - it('renders with yellow color', () => { - const { container } = render() - - const component = container.querySelector(':only-child') - - expect(component).toHaveClass('amsterdam-badge--yellow') - }) + expect(component).toHaveClass(`amsterdam-badge--${color}`) + }), + ) }) diff --git a/packages/react/src/Badge/Badge.tsx b/packages/react/src/Badge/Badge.tsx index 170e40734d..fe7b00f62d 100644 --- a/packages/react/src/Badge/Badge.tsx +++ b/packages/react/src/Badge/Badge.tsx @@ -7,8 +7,23 @@ import clsx from 'clsx' import { forwardRef } from 'react' import type { ForwardedRef, HTMLAttributes } from 'react' +export const badgeColors = [ + 'black', + 'blue', + 'dark-blue', + 'dark-green', + 'green', + 'magenta', + 'orange', + 'purple', + 'white', + 'yellow', +] as const + +type BadgeColor = (typeof badgeColors)[number] + export interface BadgeProps extends HTMLAttributes { - color?: 'black' | 'blue' | 'dark-blue' | 'dark-green' | 'green' | 'magenta' | 'orange' | 'purple' | 'white' | 'yellow' + color?: BadgeColor label: string | number } From 3bbefddeab061ec97e89d4145f57d871566ee94d Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 24 Jan 2024 13:04:34 +0100 Subject: [PATCH 13/16] Replace interface with type --- packages/react/src/Badge/Badge.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/Badge/Badge.tsx b/packages/react/src/Badge/Badge.tsx index fe7b00f62d..3043f53d59 100644 --- a/packages/react/src/Badge/Badge.tsx +++ b/packages/react/src/Badge/Badge.tsx @@ -22,10 +22,10 @@ export const badgeColors = [ type BadgeColor = (typeof badgeColors)[number] -export interface BadgeProps extends HTMLAttributes { +export type BadgeProps = { color?: BadgeColor label: string | number -} +} & HTMLAttributes export const Badge = forwardRef( ({ label, className, color = 'dark-green', ...restProps }: BadgeProps, ref: ForwardedRef) => ( From 9fe3750c5b1f376b842e6a1ea9d5c51b1ec9543e Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 24 Jan 2024 13:19:44 +0100 Subject: [PATCH 14/16] Remove black and white options until we need them --- packages/css/src/components/badge/badge.scss | 10 ---------- packages/react/src/Badge/Badge.tsx | 2 -- .../tokens/src/components/amsterdam/badge.tokens.json | 8 -------- storybook/storybook-react/src/Badge/Badge.stories.tsx | 2 +- 4 files changed, 1 insertion(+), 21 deletions(-) diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss index 5eddcc8350..1c20a45492 100644 --- a/packages/css/src/components/badge/badge.scss +++ b/packages/css/src/components/badge/badge.scss @@ -17,11 +17,6 @@ } } -.amsterdam-badge--black { - background-color: var(--amsterdam-badge-black-background-color); - color: var(--amsterdam-badge-black-color); -} - .amsterdam-badge--blue { background-color: var(--amsterdam-badge-blue-background-color); color: var(--amsterdam-badge-blue-color); @@ -57,11 +52,6 @@ color: var(--amsterdam-badge-purple-color); } -.amsterdam-badge--white { - background-color: var(--amsterdam-badge-white-background-color); - color: var(--amsterdam-badge-white-color); -} - .amsterdam-badge--yellow { background-color: var(--amsterdam-badge-yellow-background-color); color: var(--amsterdam-badge-yellow-color); diff --git a/packages/react/src/Badge/Badge.tsx b/packages/react/src/Badge/Badge.tsx index 3043f53d59..56a1571aaa 100644 --- a/packages/react/src/Badge/Badge.tsx +++ b/packages/react/src/Badge/Badge.tsx @@ -8,7 +8,6 @@ import { forwardRef } from 'react' import type { ForwardedRef, HTMLAttributes } from 'react' export const badgeColors = [ - 'black', 'blue', 'dark-blue', 'dark-green', @@ -16,7 +15,6 @@ export const badgeColors = [ 'magenta', 'orange', 'purple', - 'white', 'yellow', ] as const diff --git a/proprietary/tokens/src/components/amsterdam/badge.tokens.json b/proprietary/tokens/src/components/amsterdam/badge.tokens.json index 830193a85e..0a722c1226 100644 --- a/proprietary/tokens/src/components/amsterdam/badge.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/badge.tokens.json @@ -12,10 +12,6 @@ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } }, - "black": { - "background-color": { "value": "{amsterdam.color.primary-black}" }, - "color": { "value": "{amsterdam.color.primary-white}" } - }, "blue": { "background-color": { "value": "{amsterdam.color.blue}" }, "color": { "value": "{amsterdam.color.primary-black}" } @@ -44,10 +40,6 @@ "background-color": { "value": "{amsterdam.color.purple}" }, "color": { "value": "{amsterdam.color.primary-white}" } }, - "white": { - "background-color": { "value": "{amsterdam.color.primary-white}" }, - "color": { "value": "{amsterdam.color.primary-black}" } - }, "yellow": { "background-color": { "value": "{amsterdam.color.yellow}" }, "color": { "value": "{amsterdam.color.primary-black}" } diff --git a/storybook/storybook-react/src/Badge/Badge.stories.tsx b/storybook/storybook-react/src/Badge/Badge.stories.tsx index a72b461949..8bf6ed9c4a 100644 --- a/storybook/storybook-react/src/Badge/Badge.stories.tsx +++ b/storybook/storybook-react/src/Badge/Badge.stories.tsx @@ -17,7 +17,7 @@ const meta = { control: { type: 'inline-radio', }, - options: ['black', 'blue', 'dark-blue', 'dark-green', 'green', 'magenta', 'orange', 'purple', 'white', 'yellow'], + options: ['blue', 'dark-blue', 'dark-green', 'green', 'magenta', 'orange', 'purple', 'yellow'], selected: 'dark-green', }, }, From 365bb65cde8c7c6addc7d878ab05e54c73a1de33 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 26 Jan 2024 13:22:50 +0100 Subject: [PATCH 15/16] Select for colours --- storybook/storybook-react/src/Badge/Badge.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/storybook/storybook-react/src/Badge/Badge.stories.tsx b/storybook/storybook-react/src/Badge/Badge.stories.tsx index 8bf6ed9c4a..130951da4d 100644 --- a/storybook/storybook-react/src/Badge/Badge.stories.tsx +++ b/storybook/storybook-react/src/Badge/Badge.stories.tsx @@ -15,7 +15,7 @@ const meta = { argTypes: { color: { control: { - type: 'inline-radio', + type: 'select', }, options: ['blue', 'dark-blue', 'dark-green', 'green', 'magenta', 'orange', 'purple', 'yellow'], selected: 'dark-green', From a9645a4805d5341928955800225fc44fb91005d2 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 26 Jan 2024 13:25:16 +0100 Subject: [PATCH 16/16] Use radios for 5 options or less in all Storybook controls --- documentation/storybook.md | 3 ++- .../src/Accordion/Accordion.stories.tsx | 8 ++++++-- .../storybook-react/src/Grid/Grid.stories.tsx | 20 +++++++++++++++---- .../src/Header/Header.stories.tsx | 2 +- .../storybook-react/src/Icon/Icon.stories.tsx | 12 ++++++++--- .../src/IconButton/IconButton.stories.tsx | 4 +++- .../storybook-react/src/Link/Link.stories.tsx | 11 +++++++--- .../storybook-react/src/Logo/Logo.stories.tsx | 2 +- .../src/Paragraph/Paragraph.stories.tsx | 2 +- .../src/Spotlight/Spotlight.stories.tsx | 8 +++++--- 10 files changed, 52 insertions(+), 20 deletions(-) diff --git a/documentation/storybook.md b/documentation/storybook.md index b7c0374ecf..107101c91b 100644 --- a/documentation/storybook.md +++ b/documentation/storybook.md @@ -19,7 +19,8 @@ We write our documentation in Dutch. ## Best practices for controls -1. For props offering five options or less, use radio buttons rather than a dropdown. This makes it easier to compare the options. It saves the user a click to select each option and clearly shows all of them up front. +1. For props offering five options or less, use radio buttons rather than a select. This makes it easier to compare the options. It saves the user a click to select each option and clearly shows all of them up front. +2. Don’t use inline radios. Their options appear rather small, making them difficult to target with a pointing device. More to follow. diff --git a/storybook/storybook-react/src/Accordion/Accordion.stories.tsx b/storybook/storybook-react/src/Accordion/Accordion.stories.tsx index 3108a2106e..6b2cc639ee 100644 --- a/storybook/storybook-react/src/Accordion/Accordion.stories.tsx +++ b/storybook/storybook-react/src/Accordion/Accordion.stories.tsx @@ -24,11 +24,15 @@ const meta = { }, }, headingLevel: { - control: { type: 'select' }, + control: { + type: 'radio', + }, options: [1, 2, 3, 4], }, section: { - control: { type: 'boolean' }, + control: { + type: 'boolean', + }, }, }, } satisfies Meta diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx index f6af49f610..12af326926 100644 --- a/storybook/storybook-react/src/Grid/Grid.stories.tsx +++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx @@ -18,7 +18,9 @@ const argTypes = { const gridArgTypes = { compact: { - control: { type: 'boolean' }, + control: { + type: 'boolean', + }, }, gapVertical: { control: { @@ -34,14 +36,24 @@ const gridArgTypes = { const gridCellArgTypes = { as: { - control: { type: 'inline-radio' }, + control: { + type: 'radio', + }, options: ['article', 'div', 'section'], }, span: { - control: { type: 'number', min: 1, max: 12 }, + control: { + type: 'number', + min: 1, + max: 12, + }, }, start: { - control: { type: 'number', min: 1, max: 12 }, + control: { + type: 'number', + min: 1, + max: 12, + }, }, } diff --git a/storybook/storybook-react/src/Header/Header.stories.tsx b/storybook/storybook-react/src/Header/Header.stories.tsx index f269d04b37..15f1bc5297 100644 --- a/storybook/storybook-react/src/Header/Header.stories.tsx +++ b/storybook/storybook-react/src/Header/Header.stories.tsx @@ -13,7 +13,7 @@ const meta = { argTypes: { logoBrand: { control: { - type: 'select', + type: 'radio', }, options: ['amsterdam', 'ggd-amsterdam', 'stadsarchief', 'stadsbank-van-lening', 'vga-verzekeringen'], }, diff --git a/storybook/storybook-react/src/Icon/Icon.stories.tsx b/storybook/storybook-react/src/Icon/Icon.stories.tsx index d7a2b0cc4c..802db0ccf7 100644 --- a/storybook/storybook-react/src/Icon/Icon.stories.tsx +++ b/storybook/storybook-react/src/Icon/Icon.stories.tsx @@ -12,14 +12,20 @@ const meta = { component: Icon, argTypes: { size: { - control: { type: 'select' }, + control: { + type: 'radio', + }, options: ['level-3', 'level-4', 'level-5', 'level-6'], }, square: { - control: { type: 'boolean' }, + control: { + type: 'boolean', + }, }, svg: { - control: { type: 'select' }, + control: { + type: 'select', + }, options: Object.keys(Icons), mapping: Icons, }, diff --git a/storybook/storybook-react/src/IconButton/IconButton.stories.tsx b/storybook/storybook-react/src/IconButton/IconButton.stories.tsx index 19e887e650..abb9b0ba19 100644 --- a/storybook/storybook-react/src/IconButton/IconButton.stories.tsx +++ b/storybook/storybook-react/src/IconButton/IconButton.stories.tsx @@ -31,7 +31,9 @@ const meta = { options: ['level-3', 'level-4', 'level-5', 'level-6'], }, svg: { - control: { type: 'select' }, + control: { + type: 'select', + }, options: Object.keys(Icons), mapping: Icons, }, diff --git a/storybook/storybook-react/src/Link/Link.stories.tsx b/storybook/storybook-react/src/Link/Link.stories.tsx index c058718a02..44d37aaff2 100644 --- a/storybook/storybook-react/src/Link/Link.stories.tsx +++ b/storybook/storybook-react/src/Link/Link.stories.tsx @@ -14,7 +14,9 @@ const meta = { component: Link, argTypes: { icon: { - control: { type: 'select' }, + control: { + type: 'select', + }, options: Object.keys(Icons), mapping: Icons, table: { @@ -22,7 +24,10 @@ const meta = { }, }, onBackground: { - control: { type: 'select', labels: { undefined: 'default', light: 'light', dark: 'dark' } }, + control: { + type: 'radio', + labels: { undefined: 'default', light: 'light', dark: 'dark' }, + }, options: [undefined, 'light', 'dark'], table: { category: 'API', @@ -30,7 +35,7 @@ const meta = { }, variant: { control: { - type: 'select', + type: 'radio', labels: { standalone: 'standalone', inline: 'inline', inList: 'inList' }, }, options: ['standalone', 'inline', 'inList'], diff --git a/storybook/storybook-react/src/Logo/Logo.stories.tsx b/storybook/storybook-react/src/Logo/Logo.stories.tsx index de319d64ca..634e024fbb 100644 --- a/storybook/storybook-react/src/Logo/Logo.stories.tsx +++ b/storybook/storybook-react/src/Logo/Logo.stories.tsx @@ -12,7 +12,7 @@ const meta = { argTypes: { brand: { control: { - type: 'select', + type: 'radio', }, options: ['amsterdam', 'ggd-amsterdam', 'stadsarchief', 'stadsbank-van-lening', 'vga-verzekeringen'], }, diff --git a/storybook/storybook-react/src/Paragraph/Paragraph.stories.tsx b/storybook/storybook-react/src/Paragraph/Paragraph.stories.tsx index d52efb3473..c73887c059 100644 --- a/storybook/storybook-react/src/Paragraph/Paragraph.stories.tsx +++ b/storybook/storybook-react/src/Paragraph/Paragraph.stories.tsx @@ -19,7 +19,7 @@ const meta = { argTypes: { size: { control: { - type: 'select', + type: 'radio', labels: { undefined: 'default', large: 'large', small: 'small' }, }, options: [undefined, 'large', 'small'], diff --git a/storybook/storybook-react/src/Spotlight/Spotlight.stories.tsx b/storybook/storybook-react/src/Spotlight/Spotlight.stories.tsx index b106b0af84..fc6427a8c4 100644 --- a/storybook/storybook-react/src/Spotlight/Spotlight.stories.tsx +++ b/storybook/storybook-react/src/Spotlight/Spotlight.stories.tsx @@ -14,13 +14,14 @@ const meta = { component: Spotlight, argTypes: { as: { - control: { type: 'inline-radio' }, + control: { + type: 'radio', + }, options: ['article', 'aside', 'div', 'footer', 'section'], }, color: { - options: ['blue', 'dark-green', 'green', 'light-blue', 'magenta', 'orange', 'purple', 'yellow'], control: { - type: 'radio', + type: 'select', labels: { blue: 'Blauw', 'dark-green': 'Donkergroen', @@ -32,6 +33,7 @@ const meta = { yellow: 'Geel', }, }, + options: ['blue', 'dark-green', 'green', 'light-blue', 'magenta', 'orange', 'purple', 'yellow'], }, children: { control: {