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 + , ], }, }