From b926bec1ed8ab52c78a06c671d8c4997febdb4db Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 26 Nov 2024 10:21:19 +0100 Subject: [PATCH 01/19] Inline style to prevent row skip --- .../DescriptionList/DescriptionList.docs.mdx | 4 +++- .../DescriptionList/DescriptionList.stories.tsx | 15 +++++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx index 88728215f8..cbd34eb0f8 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx +++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx @@ -16,7 +16,9 @@ import README from "../../../../packages/css/src/components/description-list/REA ### Multiple descriptions -A term may have multiple descriptions. +A term may have multiple descriptions. In the case of multiple terms for a description +you may use an inline style to define the row of the first term to prevent the description +from skipping a lines. diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx index 5430965a8c..4f3e95c742 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx @@ -46,10 +46,17 @@ export const MultipleDescriptions: Story = { args: { children: [ Blinde, slechtziende, - Persoon met een visuele beperking, - Persoon met een visuele handicap, - Persoon die blind is, - Persoon die slechtziend is, + Persoon met een visuele beperking, + Persoon met een visuele handicap, + Persoon die blind is, + Persoon die slechtziend is, + Doof, + Slechthorend, + + Persoon die niet of slecht hoort + , + Dyslexie, + Moeite met lezen en schrijven, ], }, } From 56a4d4850443ae4e387e75f99a31184d818c6388 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 26 Nov 2024 14:04:53 +0100 Subject: [PATCH 02/19] Fixed it and gave it a story --- .../DescriptionList/DescriptionList.docs.mdx | 10 +++++-- .../DescriptionList.stories.tsx | 29 ++++++++++++------- 2 files changed, 25 insertions(+), 14 deletions(-) diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx index cbd34eb0f8..a833eb424b 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx +++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx @@ -16,12 +16,16 @@ import README from "../../../../packages/css/src/components/description-list/REA ### Multiple descriptions -A term may have multiple descriptions. In the case of multiple terms for a description -you may use an inline style to define the row of the first term to prevent the description -from skipping a lines. +A term may have multiple descriptions. +### Multiple terms + +In the case of multiple consequtive terms for a description, the terms are wrapped in a div element. + + + ### Rich description A description can include rich content such as inline formatting, links, paragraphs, and even lists. diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx index 4f3e95c742..eaf29fec85 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx @@ -46,17 +46,24 @@ export const MultipleDescriptions: Story = { args: { children: [ Blinde, slechtziende, - Persoon met een visuele beperking, - Persoon met een visuele handicap, - Persoon die blind is, - Persoon die slechtziend is, - Doof, - Slechthorend, - - Persoon die niet of slecht hoort - , - Dyslexie, - Moeite met lezen en schrijven, + Persoon met een visuele beperking, + Persoon met een visuele handicap, + Persoon die blind is, + Persoon die slechtziend is, + ], + }, +} + +export const MultipleTerms: Story = { + args: { + children: [ +
+ Naam + Voornaam + Roepnaam + Bijnaam +
, + De naam waarmee een persoon wordt aangesproken, ], }, } From 64575b53c80ab17e8d71b73350206bae3040779c Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 26 Nov 2024 14:05:22 +0100 Subject: [PATCH 03/19] inline html --- .../src/components/DescriptionList/DescriptionList.docs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx index a833eb424b..af995b5e39 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx +++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx @@ -22,7 +22,7 @@ A term may have multiple descriptions. ### Multiple terms -In the case of multiple consequtive terms for a description, the terms are wrapped in a div element. +In the case of multiple consequtive terms for a description, the terms are wrapped in a `
` element. From 425fa293876df2e7a5cc897d9f111642d2b3e906 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 26 Nov 2024 15:30:54 +0100 Subject: [PATCH 04/19] A solution using groups and no subgrid --- .../description-list/description-list.scss | 17 +++++++++--- .../src/DescriptionList/DescriptionList.tsx | 2 ++ .../DescriptionList/DescriptionListGroup.tsx | 20 ++++++++++++++ .../DescriptionList/DescriptionList.docs.mdx | 4 ++- .../DescriptionList.stories.tsx | 27 ++++++++++++++----- 5 files changed, 58 insertions(+), 12 deletions(-) create mode 100644 packages/react/src/DescriptionList/DescriptionListGroup.tsx diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss index 7a5680868a..545c6606db 100644 --- a/packages/css/src/components/description-list/description-list.scss +++ b/packages/css/src/components/description-list/description-list.scss @@ -25,19 +25,23 @@ } @media screen and (min-width: $ams-breakpoint-medium) { - .ams-description-list { + .ams-description-list, + .ams-description-list__group { grid-template-columns: auto 1fr; } - .ams-description-list--terms-width-sm { + .ams-description-list--terms-width-sm, + .ams-description-list--terms-width-sm .ams-description-list__group { grid-template-columns: 1fr 4fr; } - .ams-description-list--terms-width-md { + .ams-description-list--terms-width-md, + .ams-description-list--terms-width-md .ams-description-list__group { grid-template-columns: 1fr 2fr; } - .ams-description-list--terms-width-lg { + .ams-description-list--terms-width-lg, + .ams-description-list--terms-width-lg .ams-description-list__group { grid-template-columns: 1fr 1fr; } } @@ -69,3 +73,8 @@ padding-inline-start: 0; } } + +.ams-description-list__group { + display: grid; + grid-column: span 2; +} diff --git a/packages/react/src/DescriptionList/DescriptionList.tsx b/packages/react/src/DescriptionList/DescriptionList.tsx index 7f63876075..60d64688e1 100644 --- a/packages/react/src/DescriptionList/DescriptionList.tsx +++ b/packages/react/src/DescriptionList/DescriptionList.tsx @@ -7,6 +7,7 @@ import clsx from 'clsx' import { forwardRef } from 'react' import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' import { DescriptionListDescription } from './DescriptionListDescription' +import { DescriptionListGroup } from './DescriptionListGroup' import { DescriptionListTerm } from './DescriptionListTerm' export const descriptionListTermsWidths = ['sm', 'md', 'lg'] as const @@ -44,4 +45,5 @@ DescriptionListRoot.displayName = 'DescriptionList' export const DescriptionList = Object.assign(DescriptionListRoot, { Term: DescriptionListTerm, Description: DescriptionListDescription, + Group: DescriptionListGroup, }) diff --git a/packages/react/src/DescriptionList/DescriptionListGroup.tsx b/packages/react/src/DescriptionList/DescriptionListGroup.tsx new file mode 100644 index 0000000000..97a8feb9ac --- /dev/null +++ b/packages/react/src/DescriptionList/DescriptionListGroup.tsx @@ -0,0 +1,20 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import clsx from 'clsx' +import { forwardRef } from 'react' +import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' + +export type DescriptionListGroupProps = PropsWithChildren> + +export const DescriptionListGroup = forwardRef( + ({ children, className, ...restProps }: DescriptionListGroupProps, ref: ForwardedRef) => ( +
+ {children} +
+ ), +) + +DescriptionListGroup.displayName = 'DescriptionList.Group' diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx index af995b5e39..1986e2770c 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx +++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx @@ -22,7 +22,9 @@ A term may have multiple descriptions. ### Multiple terms -In the case of multiple consequtive terms for a description, the terms are wrapped in a `
` element. +In the case of multiple consequtive terms for a description you need to +wrap all `DescriptionList.Term` and `DescriptionList.Description` pairs in `DescriptionList.Group`. +And it will also require the minWidth property to be set to anything but `auto` to prevent the misalignment of different groups. diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx index eaf29fec85..bb3b8a3e6b 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx @@ -56,14 +56,27 @@ export const MultipleDescriptions: Story = { export const MultipleTerms: Story = { args: { + termsWidth: 'md', children: [ -
- Naam - Voornaam - Roepnaam - Bijnaam -
, - De naam waarmee een persoon wordt aangesproken, + + Achternaam + + De naam die een persoon van zijn of haar ouders krijgt + + , + + Naam + Voornaam + Roepnaam + Bijnaam + + De naam waarmee een persoon wordt aangesproken + + , + + Geboortedatum + De datum waarop een persoon is geboren + , ], }, } From 11d1d5e28f29a30a619c345af8b8381bddc0c158 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 26 Nov 2024 15:44:31 +0100 Subject: [PATCH 05/19] The tests --- .../DescriptionListGroup.test.tsx | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 packages/react/src/DescriptionList/DescriptionListGroup.test.tsx diff --git a/packages/react/src/DescriptionList/DescriptionListGroup.test.tsx b/packages/react/src/DescriptionList/DescriptionListGroup.test.tsx new file mode 100644 index 0000000000..b1f5b8f0f4 --- /dev/null +++ b/packages/react/src/DescriptionList/DescriptionListGroup.test.tsx @@ -0,0 +1,41 @@ +import { render } from '@testing-library/react' +import { createRef } from 'react' +import { DescriptionList } from './DescriptionList' +import '@testing-library/jest-dom' + +describe('Description List Group', () => { + it('renders', () => { + const { container } = render(Test) + + const component = container.querySelector(':only-child') + + expect(component).toBeInTheDocument() + expect(component).toBeVisible() + }) + + it('renders a design system BEM class name', () => { + const { container } = render(Test) + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('ams-description-list__group') + }) + + it('renders an additional class name', () => { + const { container } = render(Test) + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('ams-description-list__group extra') + }) + + it('supports ForwardRef in React', () => { + const ref = createRef() + + const { container } = render(Test) + + const component = container.querySelector(':only-child') + + expect(ref.current).toBe(component) + }) +}) From 7e39a942de830cd496938e712c76041ae5f41d66 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Wed, 4 Dec 2024 11:43:22 +0100 Subject: [PATCH 06/19] Align dd on first row of group if there are multiple terms --- .../description-list/description-list.scss | 12 +++++++----- .../DescriptionList.stories.tsx | 19 +++++++++---------- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss index 545c6606db..e574c17c93 100644 --- a/packages/css/src/components/description-list/description-list.scss +++ b/packages/css/src/components/description-list/description-list.scss @@ -25,6 +25,13 @@ } @media screen and (min-width: $ams-breakpoint-medium) { + .ams-description-list__group { + column-gap: var(--ams-description-list-column-gap); + display: grid; + grid-auto-flow: dense; + grid-column: span 2; + } + .ams-description-list, .ams-description-list__group { grid-template-columns: auto 1fr; @@ -73,8 +80,3 @@ padding-inline-start: 0; } } - -.ams-description-list__group { - display: grid; - grid-column: span 2; -} diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx index bb3b8a3e6b..01c0f7f1eb 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx @@ -58,12 +58,10 @@ export const MultipleTerms: Story = { args: { termsWidth: 'md', children: [ - - Achternaam - - De naam die een persoon van zijn of haar ouders krijgt - - , + Achternaam, + + De naam die een persoon van zijn of haar ouders krijgt + , Naam Voornaam @@ -72,11 +70,12 @@ export const MultipleTerms: Story = { De naam waarmee een persoon wordt aangesproken + + De naam waarmee een persoon wordt aangesproken + , - - Geboortedatum - De datum waarop een persoon is geboren - , + Geboortedatum, + De datum waarop een persoon is geboren, ], }, } From 25d4a27cfd64c9b5ffd95f2e566b111116734271 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Wed, 4 Dec 2024 18:35:05 +0100 Subject: [PATCH 07/19] Apply suggestions from code review Co-authored-by: Vincent Smedinga --- .../src/components/description-list/description-list.scss | 2 +- packages/react/src/DescriptionList/DescriptionList.tsx | 2 +- .../src/components/DescriptionList/DescriptionList.docs.mdx | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss index e574c17c93..026e0ea266 100644 --- a/packages/css/src/components/description-list/description-list.scss +++ b/packages/css/src/components/description-list/description-list.scss @@ -28,7 +28,7 @@ .ams-description-list__group { column-gap: var(--ams-description-list-column-gap); display: grid; - grid-auto-flow: dense; + grid-auto-flow: row dense; grid-column: span 2; } diff --git a/packages/react/src/DescriptionList/DescriptionList.tsx b/packages/react/src/DescriptionList/DescriptionList.tsx index 60d64688e1..8d65c18a2a 100644 --- a/packages/react/src/DescriptionList/DescriptionList.tsx +++ b/packages/react/src/DescriptionList/DescriptionList.tsx @@ -43,7 +43,7 @@ const DescriptionListRoot = forwardRef( DescriptionListRoot.displayName = 'DescriptionList' export const DescriptionList = Object.assign(DescriptionListRoot, { - Term: DescriptionListTerm, Description: DescriptionListDescription, Group: DescriptionListGroup, + Term: DescriptionListTerm, }) diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx index 1986e2770c..75e2eabb5d 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx +++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx @@ -22,9 +22,9 @@ A term may have multiple descriptions. ### Multiple terms -In the case of multiple consequtive terms for a description you need to -wrap all `DescriptionList.Term` and `DescriptionList.Description` pairs in `DescriptionList.Group`. -And it will also require the minWidth property to be set to anything but `auto` to prevent the misalignment of different groups. +If multiple terms share a single description, group them in a `DescriptionList.Group` to ensure proper grid layout. +Note that this approach is incompatible with the automatic width of the terms column. +The ‘medium’ fixed width option will be applied; the other options can be selected as well. From 3142a2aa45c20d7c5f84aa1e1304b19924ec4cb1 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 5 Dec 2024 09:22:36 +0100 Subject: [PATCH 08/19] Refactor description list grid layout and update storybook examples for clarity --- .../description-list/description-list.scss | 2 +- .../DescriptionList.stories.tsx | 18 +++++++----------- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss index 026e0ea266..e574c17c93 100644 --- a/packages/css/src/components/description-list/description-list.scss +++ b/packages/css/src/components/description-list/description-list.scss @@ -28,7 +28,7 @@ .ams-description-list__group { column-gap: var(--ams-description-list-column-gap); display: grid; - grid-auto-flow: row dense; + grid-auto-flow: dense; grid-column: span 2; } diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx index 01c0f7f1eb..26bc38dbb6 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx @@ -62,20 +62,16 @@ export const MultipleTerms: Story = { De naam die een persoon van zijn of haar ouders krijgt , - - Naam - Voornaam - Roepnaam - Bijnaam - - De naam waarmee een persoon wordt aangesproken - - + + Voornaam + Roepnaam + Bijnaam + De naam waarmee een persoon wordt aangesproken , - Geboortedatum, - De datum waarop een persoon is geboren, + Geboortedatum, + De datum waarop een persoon is geboren, ], }, } From 4bb4506eabcf876d2f5a455d43ca16047ae8e0df Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 5 Dec 2024 09:42:10 +0100 Subject: [PATCH 09/19] Seems like to only way to fix this is an inline style --- .../src/components/DescriptionList/DescriptionList.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx index 26bc38dbb6..4785f74d7a 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx @@ -66,7 +66,7 @@ export const MultipleTerms: Story = { Voornaam Roepnaam Bijnaam - + De naam waarmee een persoon wordt aangesproken , From 7d53b0d6b479b87046e13dc074796becd260cac8 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 5 Dec 2024 09:46:50 +0100 Subject: [PATCH 10/19] Add support for subgrid alignment in description list groups --- .../src/components/description-list/description-list.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss index e574c17c93..9996f1b825 100644 --- a/packages/css/src/components/description-list/description-list.scss +++ b/packages/css/src/components/description-list/description-list.scss @@ -53,6 +53,13 @@ } } +// Solution for browsers that support subgrid, the group will align to the parent grid +@supports (grid-template-columns: subgrid) { + .ams-description-list .ams-description-list__group { + grid-template-columns: subgrid; + } +} + .ams-description-list--inverse-color { color: var(--ams-description-list-inverse-color); } From 35012361acacb380db057aaf5e343481bd0f33c0 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 5 Dec 2024 09:48:05 +0100 Subject: [PATCH 11/19] Increase specificity for subgrid alignment in description list groups --- .../css/src/components/description-list/description-list.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss index 9996f1b825..4961986457 100644 --- a/packages/css/src/components/description-list/description-list.scss +++ b/packages/css/src/components/description-list/description-list.scss @@ -54,6 +54,7 @@ } // Solution for browsers that support subgrid, the group will align to the parent grid +// This selector is to increase specificity to override the previously set grid-template-columns @supports (grid-template-columns: subgrid) { .ams-description-list .ams-description-list__group { grid-template-columns: subgrid; From 1804de03f7b0fd7756859de319dbe90e4d4d1e73 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 5 Dec 2024 09:54:27 +0100 Subject: [PATCH 12/19] Update documentation for DescriptionList to clarify subgrid compatibility and inline style usage --- .../src/components/DescriptionList/DescriptionList.docs.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx index 75e2eabb5d..4310223fa8 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx +++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx @@ -23,8 +23,8 @@ A term may have multiple descriptions. ### Multiple terms If multiple terms share a single description, group them in a `DescriptionList.Group` to ensure proper grid layout. -Note that this approach is incompatible with the automatic width of the terms column. -The ‘medium’ fixed width option will be applied; the other options can be selected as well. +Note that this approach is only compatible with the automatic width of the terms column if the browser supports subgrid. +If you need the desription to span all terms, use an inline style to set to rows like this example. From 6bab918b656476b02c978952ee08a05ace9d13ae Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 5 Dec 2024 11:56:07 +0100 Subject: [PATCH 13/19] Rename DescriptionListGroup to DescriptionListSection and update related styles and documentation --- .../description-list/description-list.scss | 12 +++++------ .../src/DescriptionList/DescriptionList.tsx | 4 ++-- .../DescriptionList/DescriptionListGroup.tsx | 20 ------------------- ...st.tsx => DescriptionListSection.test.tsx} | 10 +++++----- .../DescriptionListSection.tsx | 20 +++++++++++++++++++ .../DescriptionList/DescriptionList.docs.mdx | 2 +- .../DescriptionList.stories.tsx | 4 ++-- 7 files changed, 36 insertions(+), 36 deletions(-) delete mode 100644 packages/react/src/DescriptionList/DescriptionListGroup.tsx rename packages/react/src/DescriptionList/{DescriptionListGroup.test.tsx => DescriptionListSection.test.tsx} (67%) create mode 100644 packages/react/src/DescriptionList/DescriptionListSection.tsx diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss index 4961986457..1b1e860255 100644 --- a/packages/css/src/components/description-list/description-list.scss +++ b/packages/css/src/components/description-list/description-list.scss @@ -25,7 +25,7 @@ } @media screen and (min-width: $ams-breakpoint-medium) { - .ams-description-list__group { + .ams-description-list__section { column-gap: var(--ams-description-list-column-gap); display: grid; grid-auto-flow: dense; @@ -33,22 +33,22 @@ } .ams-description-list, - .ams-description-list__group { + .ams-description-list__section { grid-template-columns: auto 1fr; } .ams-description-list--terms-width-sm, - .ams-description-list--terms-width-sm .ams-description-list__group { + .ams-description-list--terms-width-sm .ams-description-list__section { grid-template-columns: 1fr 4fr; } .ams-description-list--terms-width-md, - .ams-description-list--terms-width-md .ams-description-list__group { + .ams-description-list--terms-width-md .ams-description-list__section { grid-template-columns: 1fr 2fr; } .ams-description-list--terms-width-lg, - .ams-description-list--terms-width-lg .ams-description-list__group { + .ams-description-list--terms-width-lg .ams-description-list__section { grid-template-columns: 1fr 1fr; } } @@ -56,7 +56,7 @@ // Solution for browsers that support subgrid, the group will align to the parent grid // This selector is to increase specificity to override the previously set grid-template-columns @supports (grid-template-columns: subgrid) { - .ams-description-list .ams-description-list__group { + .ams-description-list .ams-description-list__section { grid-template-columns: subgrid; } } diff --git a/packages/react/src/DescriptionList/DescriptionList.tsx b/packages/react/src/DescriptionList/DescriptionList.tsx index 8d65c18a2a..ef7069c7b5 100644 --- a/packages/react/src/DescriptionList/DescriptionList.tsx +++ b/packages/react/src/DescriptionList/DescriptionList.tsx @@ -7,7 +7,7 @@ import clsx from 'clsx' import { forwardRef } from 'react' import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' import { DescriptionListDescription } from './DescriptionListDescription' -import { DescriptionListGroup } from './DescriptionListGroup' +import { DescriptionListSection } from './DescriptionListSection' import { DescriptionListTerm } from './DescriptionListTerm' export const descriptionListTermsWidths = ['sm', 'md', 'lg'] as const @@ -44,6 +44,6 @@ DescriptionListRoot.displayName = 'DescriptionList' export const DescriptionList = Object.assign(DescriptionListRoot, { Description: DescriptionListDescription, - Group: DescriptionListGroup, + Section: DescriptionListSection, Term: DescriptionListTerm, }) diff --git a/packages/react/src/DescriptionList/DescriptionListGroup.tsx b/packages/react/src/DescriptionList/DescriptionListGroup.tsx deleted file mode 100644 index 97a8feb9ac..0000000000 --- a/packages/react/src/DescriptionList/DescriptionListGroup.tsx +++ /dev/null @@ -1,20 +0,0 @@ -/** - * @license EUPL-1.2+ - * Copyright Gemeente Amsterdam - */ - -import clsx from 'clsx' -import { forwardRef } from 'react' -import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' - -export type DescriptionListGroupProps = PropsWithChildren> - -export const DescriptionListGroup = forwardRef( - ({ children, className, ...restProps }: DescriptionListGroupProps, ref: ForwardedRef) => ( -
- {children} -
- ), -) - -DescriptionListGroup.displayName = 'DescriptionList.Group' diff --git a/packages/react/src/DescriptionList/DescriptionListGroup.test.tsx b/packages/react/src/DescriptionList/DescriptionListSection.test.tsx similarity index 67% rename from packages/react/src/DescriptionList/DescriptionListGroup.test.tsx rename to packages/react/src/DescriptionList/DescriptionListSection.test.tsx index b1f5b8f0f4..1a8f3910bf 100644 --- a/packages/react/src/DescriptionList/DescriptionListGroup.test.tsx +++ b/packages/react/src/DescriptionList/DescriptionListSection.test.tsx @@ -3,9 +3,9 @@ import { createRef } from 'react' import { DescriptionList } from './DescriptionList' import '@testing-library/jest-dom' -describe('Description List Group', () => { +describe('Description List Section', () => { it('renders', () => { - const { container } = render(Test) + const { container } = render(Test) const component = container.querySelector(':only-child') @@ -14,7 +14,7 @@ describe('Description List Group', () => { }) it('renders a design system BEM class name', () => { - const { container } = render(Test) + const { container } = render(Test) const component = container.querySelector(':only-child') @@ -22,7 +22,7 @@ describe('Description List Group', () => { }) it('renders an additional class name', () => { - const { container } = render(Test) + const { container } = render(Test) const component = container.querySelector(':only-child') @@ -32,7 +32,7 @@ describe('Description List Group', () => { it('supports ForwardRef in React', () => { const ref = createRef() - const { container } = render(Test) + const { container } = render(Test) const component = container.querySelector(':only-child') diff --git a/packages/react/src/DescriptionList/DescriptionListSection.tsx b/packages/react/src/DescriptionList/DescriptionListSection.tsx new file mode 100644 index 0000000000..81b2771ded --- /dev/null +++ b/packages/react/src/DescriptionList/DescriptionListSection.tsx @@ -0,0 +1,20 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import clsx from 'clsx' +import { forwardRef } from 'react' +import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' + +export type DescriptionListSectionProps = PropsWithChildren> + +export const DescriptionListSection = forwardRef( + ({ children, className, ...restProps }: DescriptionListSectionProps, ref: ForwardedRef) => ( +
+ {children} +
+ ), +) + +DescriptionListSection.displayName = 'DescriptionList.Section' diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx index 4310223fa8..4204c76ebb 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx +++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx @@ -22,7 +22,7 @@ A term may have multiple descriptions. ### Multiple terms -If multiple terms share a single description, group them in a `DescriptionList.Group` to ensure proper grid layout. +If multiple terms share a single description, group them in a `DescriptionList.Section` component to ensure proper grid layout. Note that this approach is only compatible with the automatic width of the terms column if the browser supports subgrid. If you need the desription to span all terms, use an inline style to set to rows like this example. diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx index 4785f74d7a..4ed8b750f0 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx @@ -62,14 +62,14 @@ export const MultipleTerms: Story = { De naam die een persoon van zijn of haar ouders krijgt , - + Voornaam Roepnaam Bijnaam De naam waarmee een persoon wordt aangesproken - , + , Geboortedatum, De datum waarop een persoon is geboren, ], From 8b2750e0392ca6133961aeeed3b2c6109d8f4a33 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 5 Dec 2024 12:02:34 +0100 Subject: [PATCH 14/19] Refactor DescriptionList story to remove unnecessary keys from terms --- .../DescriptionList/DescriptionList.stories.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx index 4ed8b750f0..6ed5c8c9a7 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx @@ -63,10 +63,10 @@ export const MultipleTerms: Story = { De naam die een persoon van zijn of haar ouders krijgt , - Voornaam - Roepnaam - Bijnaam - + Voornaam + Roepnaam + Bijnaam + De naam waarmee een persoon wordt aangesproken , From 5dfe98756aefc5eb21e588d5ca83dfebe75ace41 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 10 Dec 2024 16:00:43 +0100 Subject: [PATCH 15/19] Update tests to reflect renaming of DescriptionListGroup to DescriptionListSection --- .../react/src/DescriptionList/DescriptionListSection.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/DescriptionList/DescriptionListSection.test.tsx b/packages/react/src/DescriptionList/DescriptionListSection.test.tsx index 1a8f3910bf..bd12f1c927 100644 --- a/packages/react/src/DescriptionList/DescriptionListSection.test.tsx +++ b/packages/react/src/DescriptionList/DescriptionListSection.test.tsx @@ -18,7 +18,7 @@ describe('Description List Section', () => { const component = container.querySelector(':only-child') - expect(component).toHaveClass('ams-description-list__group') + expect(component).toHaveClass('ams-description-list__section') }) it('renders an additional class name', () => { @@ -26,7 +26,7 @@ describe('Description List Section', () => { const component = container.querySelector(':only-child') - expect(component).toHaveClass('ams-description-list__group extra') + expect(component).toHaveClass('ams-description-list__section extra') }) it('supports ForwardRef in React', () => { From f4ad94bcdb439db4edc575bf1953c0ab3586a1c0 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Wed, 11 Dec 2024 11:45:25 +0100 Subject: [PATCH 16/19] Refactor DescriptionList styles and documentation to enhance grid layout and remove unnecessary inline styles --- .../description-list/description-list.scss | 24 ++++++++++++------- .../DescriptionList/DescriptionList.docs.mdx | 2 -- .../DescriptionList.stories.tsx | 4 +--- 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss index 1b1e860255..c030f1b291 100644 --- a/packages/css/src/components/description-list/description-list.scss +++ b/packages/css/src/components/description-list/description-list.scss @@ -10,6 +10,10 @@ margin-block: 0; } +@mixin reset-dd { + margin-inline: 0; +} + .ams-description-list { box-sizing: border-box; color: var(--ams-description-list-color); @@ -25,13 +29,6 @@ } @media screen and (min-width: $ams-breakpoint-medium) { - .ams-description-list__section { - column-gap: var(--ams-description-list-column-gap); - display: grid; - grid-auto-flow: dense; - grid-column: span 2; - } - .ams-description-list, .ams-description-list__section { grid-template-columns: auto 1fr; @@ -73,8 +70,17 @@ } } -@mixin reset-dd { - margin-inline: 0; +.ams-description-list__section { + @media screen and (min-width: $ams-breakpoint-medium) { + column-gap: var(--ams-description-list-column-gap); + display: grid; + grid-auto-flow: dense; + grid-column: span 2; + + dd:only-of-type { + grid-row: 1 / 9; + } + } } .ams-description-list__description { diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx index 4204c76ebb..4e34bfd49d 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx +++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx @@ -23,8 +23,6 @@ A term may have multiple descriptions. ### Multiple terms If multiple terms share a single description, group them in a `DescriptionList.Section` component to ensure proper grid layout. -Note that this approach is only compatible with the automatic width of the terms column if the browser supports subgrid. -If you need the desription to span all terms, use an inline style to set to rows like this example. diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx index 6ed5c8c9a7..81598822ec 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx @@ -66,9 +66,7 @@ export const MultipleTerms: Story = { Voornaam Roepnaam Bijnaam - - De naam waarmee een persoon wordt aangesproken - + De naam waarmee een persoon wordt aangesproken , Geboortedatum, De datum waarop een persoon is geboren, From 322fee115022d153d978fffd00c45d390a448331 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Wed, 11 Dec 2024 11:47:50 +0100 Subject: [PATCH 17/19] Remove @supports --- .../description-list/description-list.scss | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss index c030f1b291..8a9374e046 100644 --- a/packages/css/src/components/description-list/description-list.scss +++ b/packages/css/src/components/description-list/description-list.scss @@ -50,14 +50,6 @@ } } -// Solution for browsers that support subgrid, the group will align to the parent grid -// This selector is to increase specificity to override the previously set grid-template-columns -@supports (grid-template-columns: subgrid) { - .ams-description-list .ams-description-list__section { - grid-template-columns: subgrid; - } -} - .ams-description-list--inverse-color { color: var(--ams-description-list-inverse-color); } @@ -74,7 +66,6 @@ @media screen and (min-width: $ams-breakpoint-medium) { column-gap: var(--ams-description-list-column-gap); display: grid; - grid-auto-flow: dense; grid-column: span 2; dd:only-of-type { @@ -83,6 +74,12 @@ } } +// Solution for browsers that support subgrid, the group will align to the parent grid +// This selector is to increase specificity to override the previously set grid-template-columns +.ams-description-list .ams-description-list__section { + grid-template-columns: subgrid; +} + .ams-description-list__description { font-weight: var(--ams-description-list-description-font-weight); padding-inline-start: var(--ams-description-list-description-padding-inline-start); From 58ad1cd2052bf05cdb4865a79a471169f39f1c0c Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Wed, 11 Dec 2024 18:54:12 +0100 Subject: [PATCH 18/19] Any element or class would also work the other way around --- .../css/src/components/description-list/description-list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss index 8a9374e046..6a8c18de91 100644 --- a/packages/css/src/components/description-list/description-list.scss +++ b/packages/css/src/components/description-list/description-list.scss @@ -68,7 +68,7 @@ display: grid; grid-column: span 2; - dd:only-of-type { + :only-of-type { grid-row: 1 / 9; } } From b536cd14ea6d356f4f85b748333268b25705349d Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 13 Dec 2024 11:12:51 +0100 Subject: [PATCH 19/19] Applied suggestions --- .../src/components/description-list/description-list.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss index 6a8c18de91..abbdd6dd1d 100644 --- a/packages/css/src/components/description-list/description-list.scss +++ b/packages/css/src/components/description-list/description-list.scss @@ -68,14 +68,14 @@ display: grid; grid-column: span 2; - :only-of-type { + > :only-of-type { grid-row: 1 / 9; } } } -// Solution for browsers that support subgrid, the group will align to the parent grid -// This selector is to increase specificity to override the previously set grid-template-columns +// Aligns terms and descriptions in a section to the grid of the list. +// The extra class selector increases specificity to match earlier declarations. .ams-description-list .ams-description-list__section { grid-template-columns: subgrid; }