From 17374b6e43978ffcec8bbdd5afd765015cb35624 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 16 Jan 2024 14:09:05 +0100 Subject: [PATCH 01/12] 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/12] 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 de752c0939de50b1ff3deb1e49deae2c88b18497 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 18 Jan 2024 15:23:13 +0100 Subject: [PATCH 03/12] Scaffold Tip Component --- packages/css/src/components/index.scss | 1 + packages/css/src/components/tip/README.md | 7 ++++ packages/css/src/components/tip/tip.scss | 12 ++++++ packages/react/src/Tip/README.md | 3 ++ packages/react/src/Tip/Tip.test.tsx | 41 +++++++++++++++++++ packages/react/src/Tip/Tip.tsx | 18 ++++++++ packages/react/src/Tip/index.ts | 2 + packages/react/src/index.ts | 1 + .../src/components/amsterdam/tip.tokens.json | 5 +++ .../storybook-react/src/Tip/Tip.docs.mdx | 15 +++++++ .../storybook-react/src/Tip/Tip.stories.tsx | 41 +++++++++++++++++++ 11 files changed, 146 insertions(+) create mode 100644 packages/css/src/components/tip/README.md create mode 100644 packages/css/src/components/tip/tip.scss create mode 100644 packages/react/src/Tip/README.md create mode 100644 packages/react/src/Tip/Tip.test.tsx create mode 100644 packages/react/src/Tip/Tip.tsx create mode 100644 packages/react/src/Tip/index.ts create mode 100644 proprietary/tokens/src/components/amsterdam/tip.tokens.json create mode 100644 storybook/storybook-react/src/Tip/Tip.docs.mdx create mode 100644 storybook/storybook-react/src/Tip/Tip.stories.tsx diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss index 247c622e19..6a8d594b67 100644 --- a/packages/css/src/components/index.scss +++ b/packages/css/src/components/index.scss @@ -4,6 +4,7 @@ */ /* Append here */ +@import "./tip/tip"; @import "./badge/badge"; @import "./table/table"; @import "./mega-menu/mega-menu"; diff --git a/packages/css/src/components/tip/README.md b/packages/css/src/components/tip/README.md new file mode 100644 index 0000000000..e377fb7bbf --- /dev/null +++ b/packages/css/src/components/tip/README.md @@ -0,0 +1,7 @@ +# Tip + +Een tip is een groen vlakje met tekst dat voor een stuk tekst geplaatst wordt om aandacht te trekken en de gebruiker actief op weg helpt een actie uit te voeren. + +## Specificaties + +Het groene vlak lijnt links uit met lopende tekst. De tiptekst springt in. Een tip kan binnen een lijst op het eerste en tweede niveau gebruikt worden diff --git a/packages/css/src/components/tip/tip.scss b/packages/css/src/components/tip/tip.scss new file mode 100644 index 0000000000..ff04ec80ab --- /dev/null +++ b/packages/css/src/components/tip/tip.scss @@ -0,0 +1,12 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2023 Gemeente Amsterdam + */ + +.amsterdam-tip { + align-items: flex-start; + display: flex; + flex-direction: row; + gap: 1rem; + padding-block: 1.5rem; +} diff --git a/packages/react/src/Tip/README.md b/packages/react/src/Tip/README.md new file mode 100644 index 0000000000..2a2a38ed20 --- /dev/null +++ b/packages/react/src/Tip/README.md @@ -0,0 +1,3 @@ +# React Tip component + +[Tip documentation](../../../css/src/tip/README.md) diff --git a/packages/react/src/Tip/Tip.test.tsx b/packages/react/src/Tip/Tip.test.tsx new file mode 100644 index 0000000000..a1aaec1de2 --- /dev/null +++ b/packages/react/src/Tip/Tip.test.tsx @@ -0,0 +1,41 @@ +import { render } from '@testing-library/react' +import { createRef } from 'react' +import { Tip } from './Tip' +import '@testing-library/jest-dom' + +describe('Tip', () => { + 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-tip') + }) + + it('renders an additional class name', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('amsterdam-tip 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/Tip/Tip.tsx b/packages/react/src/Tip/Tip.tsx new file mode 100644 index 0000000000..e717839d71 --- /dev/null +++ b/packages/react/src/Tip/Tip.tsx @@ -0,0 +1,18 @@ +/** + * @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 TipProps extends PropsWithChildren> {} + +export const Tip = forwardRef(({ children, className, ...restProps }: TipProps, ref: ForwardedRef) => ( + + {children} + +)) + +Tip.displayName = 'Tip' diff --git a/packages/react/src/Tip/index.ts b/packages/react/src/Tip/index.ts new file mode 100644 index 0000000000..a346c90ddb --- /dev/null +++ b/packages/react/src/Tip/index.ts @@ -0,0 +1,2 @@ +export { Tip } from './Tip' +export type { TipProps } from './Tip' diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 9df069b981..344c2345af 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -4,6 +4,7 @@ */ /* Append here */ +export * from './Tip' export * from './Badge' export * from './Table' export * from './MegaMenu' diff --git a/proprietary/tokens/src/components/amsterdam/tip.tokens.json b/proprietary/tokens/src/components/amsterdam/tip.tokens.json new file mode 100644 index 0000000000..8be983dbe0 --- /dev/null +++ b/proprietary/tokens/src/components/amsterdam/tip.tokens.json @@ -0,0 +1,5 @@ +{ + "amsterdam": { + "tip": {} + } +} diff --git a/storybook/storybook-react/src/Tip/Tip.docs.mdx b/storybook/storybook-react/src/Tip/Tip.docs.mdx new file mode 100644 index 0000000000..4ec9930831 --- /dev/null +++ b/storybook/storybook-react/src/Tip/Tip.docs.mdx @@ -0,0 +1,15 @@ +import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import * as TipStories from "./Tip.stories.tsx"; +import README from "../../../../packages/css/src/components/tip/README.md?raw"; + + + +{README} + + + + + +## In a list + + diff --git a/storybook/storybook-react/src/Tip/Tip.stories.tsx b/storybook/storybook-react/src/Tip/Tip.stories.tsx new file mode 100644 index 0000000000..11fcf4a9ef --- /dev/null +++ b/storybook/storybook-react/src/Tip/Tip.stories.tsx @@ -0,0 +1,41 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2023 Gemeente Amsterdam + */ + +import { Badge, Paragraph, Tip, UnorderedList } from '@amsterdam/design-system-react' +import { Meta, StoryObj } from '@storybook/react' + +const meta = { + title: 'Tip', + component: Tip, + args: { + children: [ + + Tip + , + + Geeft u uw verhuizing van tevoren door, dan wordt uw melding bewaard tot de verhuisdatum. Dan pas begint de + termijn van 24 uur of 5 werkdagen. + , + ], + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Default: Story = {} + +export const InAList: Story = { + decorators: (story) => ( + + Binnen Amsterdam op werkdagen binnen 24 uur. + + Vanuit een andere gemeente ongeveer 5 werkdagen. + {story()} + + + ), +} From 5f538c64809e604eb0e321c6ce84bb0e4572b449 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 18 Jan 2024 15:26:55 +0100 Subject: [PATCH 04/12] Tokens --- packages/css/src/components/tip/tip.scss | 4 ++-- proprietary/tokens/src/components/amsterdam/tip.tokens.json | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/css/src/components/tip/tip.scss b/packages/css/src/components/tip/tip.scss index ff04ec80ab..f406f3ac3c 100644 --- a/packages/css/src/components/tip/tip.scss +++ b/packages/css/src/components/tip/tip.scss @@ -7,6 +7,6 @@ align-items: flex-start; display: flex; flex-direction: row; - gap: 1rem; - padding-block: 1.5rem; + gap: var(--amsterdam-tip-gap); + padding-block: var(--amsterdam-tip-padding-block); } diff --git a/proprietary/tokens/src/components/amsterdam/tip.tokens.json b/proprietary/tokens/src/components/amsterdam/tip.tokens.json index 8be983dbe0..8d6ec425bd 100644 --- a/proprietary/tokens/src/components/amsterdam/tip.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/tip.tokens.json @@ -1,5 +1,8 @@ { "amsterdam": { - "tip": {} + "tip": { + "gap": { "value": "1rem" }, + "padding-block": { "value": "1.5rem" } + } } } From 69a35df7e3b7d821e4d858755e8b4fea8bd8b2fd Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 18 Jan 2024 15:28:23 +0100 Subject: [PATCH 05/12] 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 06/12] 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 0f02f9c499e8c2629e669de35a37c532baaa9dcf Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 19 Jan 2024 15:35:45 +0100 Subject: [PATCH 07/12] Storybook category --- storybook/storybook-react/src/Tip/Tip.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/storybook/storybook-react/src/Tip/Tip.stories.tsx b/storybook/storybook-react/src/Tip/Tip.stories.tsx index 11fcf4a9ef..994a61aa9d 100644 --- a/storybook/storybook-react/src/Tip/Tip.stories.tsx +++ b/storybook/storybook-react/src/Tip/Tip.stories.tsx @@ -7,7 +7,7 @@ import { Badge, Paragraph, Tip, UnorderedList } from '@amsterdam/design-system-r import { Meta, StoryObj } from '@storybook/react' const meta = { - title: 'Tip', + title: 'Feedback/Tip', component: Tip, args: { children: [ From 7aaf67198c95367da7e9029eab5efb9693ab0f24 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Mon, 22 Jan 2024 10:40:23 +0100 Subject: [PATCH 08/12] 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 09/12] 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 10/12] 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 11/12] 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 be66f650dfaf9e436cac2b49b9bd1c41c513346f Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 23 Jan 2024 14:40:52 +0100 Subject: [PATCH 12/12] Label property change --- storybook/storybook-react/src/Tip/Tip.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/storybook/storybook-react/src/Tip/Tip.stories.tsx b/storybook/storybook-react/src/Tip/Tip.stories.tsx index 994a61aa9d..256b9d8eaf 100644 --- a/storybook/storybook-react/src/Tip/Tip.stories.tsx +++ b/storybook/storybook-react/src/Tip/Tip.stories.tsx @@ -11,7 +11,7 @@ const meta = { component: Tip, args: { children: [ - + Tip ,