diff --git a/.github/workflows/feature-branch-deploy.yml b/.github/workflows/feature-branch-deploy.yml index 3aa092916d..a20e568662 100644 --- a/.github/workflows/feature-branch-deploy.yml +++ b/.github/workflows/feature-branch-deploy.yml @@ -52,7 +52,7 @@ jobs: touch ./storybook/dist/${{ github.sha }}.txt - name: Pushing to pages branch - uses: JamesIves/github-pages-deploy-action@62fec3add6773ec5dbbf18d2ee4260911aa35cf4 # v4.6.9 + uses: JamesIves/github-pages-deploy-action@15de0f09300eea763baee31dff6c6184995c5f6a # v4.7.2 with: branch: gh-pages folder: storybook/dist diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 49a04fe8b4..748d109b0d 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -66,7 +66,7 @@ jobs: if: ${{ steps.release.outputs.releases_created == 'true' }} - name: Deploy to GitHub Pages - uses: JamesIves/github-pages-deploy-action@62fec3add6773ec5dbbf18d2ee4260911aa35cf4 # v4.6.9 + uses: JamesIves/github-pages-deploy-action@15de0f09300eea763baee31dff6c6184995c5f6a # v4.7.2 with: branch: gh-pages folder: dist/storybook diff --git a/package.json b/package.json index 8520fb2c77..13843201d1 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "prettier": "3.4.2", "rimraf": "6.0.1", "stylelint": "16.11.0", - "stylelint-config-standard-scss": "13.1.0", + "stylelint-config-standard-scss": "14.0.0", "stylelint-order": "6.0.4", "stylelint-use-logical": "2.1.2", "typescript": "5.7.2", diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss index b21b7cb7a4..ce8a678d3d 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,19 +29,23 @@ } @media screen and (min-width: $ams-breakpoint-medium) { - .ams-description-list { + .ams-description-list, + .ams-description-list__section { 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__section { 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__section { 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__section { grid-template-columns: 1fr 1fr; } } @@ -54,8 +62,22 @@ } } -@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-column: span 2; + + > :only-of-type { + grid-row: 1 / 9; + } + } +} + +// 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; } .ams-description-list__description { diff --git a/packages/react/src/DescriptionList/DescriptionList.tsx b/packages/react/src/DescriptionList/DescriptionList.tsx index 7f63876075..ef7069c7b5 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 { DescriptionListSection } from './DescriptionListSection' import { DescriptionListTerm } from './DescriptionListTerm' export const descriptionListTermsWidths = ['sm', 'md', 'lg'] as const @@ -42,6 +43,7 @@ const DescriptionListRoot = forwardRef( DescriptionListRoot.displayName = 'DescriptionList' export const DescriptionList = Object.assign(DescriptionListRoot, { - Term: DescriptionListTerm, Description: DescriptionListDescription, + Section: DescriptionListSection, + Term: DescriptionListTerm, }) diff --git a/packages/react/src/DescriptionList/DescriptionListSection.test.tsx b/packages/react/src/DescriptionList/DescriptionListSection.test.tsx new file mode 100644 index 0000000000..bd12f1c927 --- /dev/null +++ b/packages/react/src/DescriptionList/DescriptionListSection.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 Section', () => { + 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__section') + }) + + it('renders an additional class name', () => { + const { container } = render(Test) + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('ams-description-list__section extra') + }) + + it('supports ForwardRef in React', () => { + const ref = createRef() + + const { container } = render(Test) + + const component = container.querySelector(':only-child') + + expect(ref.current).toBe(component) + }) +}) 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/pnpm-lock.yaml b/pnpm-lock.yaml index 22bd90ab78..7ab3ec4856 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -92,8 +92,8 @@ importers: specifier: 16.11.0 version: 16.11.0(typescript@5.7.2) stylelint-config-standard-scss: - specifier: 13.1.0 - version: 13.1.0(postcss@8.4.49)(stylelint@16.11.0(typescript@5.7.2)) + specifier: 14.0.0 + version: 14.0.0(postcss@8.4.49)(stylelint@16.11.0(typescript@5.7.2)) stylelint-order: specifier: 6.0.4 version: 6.0.4(stylelint@16.11.0(typescript@5.7.2)) @@ -4855,9 +4855,6 @@ packages: resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==} engines: {node: '>=6'} - known-css-properties@0.29.0: - resolution: {integrity: sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==} - known-css-properties@0.35.0: resolution: {integrity: sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==} @@ -5110,6 +5107,9 @@ packages: mdn-data@2.12.1: resolution: {integrity: sha512-rsfnCbOHjqrhWxwt5/wtSLzpoKTzW7OXdT5lLOIH1OTYhWu9rRJveGq0sKvDZODABH7RX+uoR+DYcpFnq4Tf6Q==} + mdn-data@2.13.0: + resolution: {integrity: sha512-OmD1FDyP706JqPqtLqgev/QCK0qudBdUuKKag6InQ/elEw3Cm2AhXYktcSggdc/vWniYqIsofkcteMEOioW5vQ==} + mdurl@2.0.0: resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==} @@ -5850,10 +5850,6 @@ packages: peerDependencies: postcss: ^8.4.29 - postcss-selector-parser@6.1.2: - resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==} - engines: {node: '>=4'} - postcss-selector-parser@7.0.0: resolution: {integrity: sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==} engines: {node: '>=4'} @@ -6605,34 +6601,34 @@ packages: babel-plugin-macros: optional: true - stylelint-config-recommended-scss@14.0.0: - resolution: {integrity: sha512-HDvpoOAQ1RpF+sPbDOT2Q2/YrBDEJDnUymmVmZ7mMCeNiFSdhRdyGEimBkz06wsN+HaFwUh249gDR+I9JR7Onw==} + stylelint-config-recommended-scss@14.1.0: + resolution: {integrity: sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==} engines: {node: '>=18.12.0'} peerDependencies: postcss: ^8.3.3 - stylelint: ^16.0.2 + stylelint: ^16.6.1 peerDependenciesMeta: postcss: optional: true - stylelint-config-recommended@14.0.0: - resolution: {integrity: sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==} + stylelint-config-recommended@14.0.1: + resolution: {integrity: sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==} engines: {node: '>=18.12.0'} peerDependencies: - stylelint: ^16.0.0 + stylelint: ^16.1.0 - stylelint-config-standard-scss@13.1.0: - resolution: {integrity: sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA==} + stylelint-config-standard-scss@14.0.0: + resolution: {integrity: sha512-6Pa26D9mHyi4LauJ83ls3ELqCglU6VfCXchovbEqQUiEkezvKdv6VgsIoMy58i00c854wVmOw0k8W5FTpuaVqg==} engines: {node: '>=18.12.0'} peerDependencies: postcss: ^8.3.3 - stylelint: ^16.3.1 + stylelint: ^16.11.0 peerDependenciesMeta: postcss: optional: true - stylelint-config-standard@36.0.0: - resolution: {integrity: sha512-3Kjyq4d62bYFp/Aq8PMKDwlgUyPU4nacXsjDLWJdNPRUgpuxALu1KnlAHIj36cdtxViVhXexZij65yM0uNIHug==} + stylelint-config-standard@36.0.1: + resolution: {integrity: sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==} engines: {node: '>=18.12.0'} peerDependencies: stylelint: ^16.1.0 @@ -6642,8 +6638,8 @@ packages: peerDependencies: stylelint: ^14.0.0 || ^15.0.0 || ^16.0.1 - stylelint-scss@6.1.0: - resolution: {integrity: sha512-kCfK8TQzthGwb4vaZniZgxRsVbCM4ZckmT1b/H5m4FU3I8Dz0id9llKsy1NMp3XXqC8+OPD4rVKtUbSxXlJb5g==} + stylelint-scss@6.10.0: + resolution: {integrity: sha512-y03if6Qw9xBMoVaf7tzp5BbnYhYvudIKzURkhSHzcHG0bW0fAYvQpTUVJOe7DyhHaxeThBil4ObEMvGbV7+M+w==} engines: {node: '>=18.12.0'} peerDependencies: stylelint: ^16.0.2 @@ -12539,8 +12535,6 @@ snapshots: kleur@4.1.5: {} - known-css-properties@0.29.0: {} - known-css-properties@0.35.0: {} leven@3.1.0: {} @@ -12959,6 +12953,8 @@ snapshots: mdn-data@2.12.1: {} + mdn-data@2.13.0: {} + mdurl@2.0.0: {} memfs@4.9.3: @@ -13981,11 +13977,6 @@ snapshots: dependencies: postcss: 8.4.49 - postcss-selector-parser@6.1.2: - dependencies: - cssesc: 3.0.0 - util-deprecate: 1.0.2 - postcss-selector-parser@7.0.0: dependencies: cssesc: 3.0.0 @@ -14884,31 +14875,31 @@ snapshots: optionalDependencies: '@babel/core': 7.26.0 - stylelint-config-recommended-scss@14.0.0(postcss@8.4.49)(stylelint@16.11.0(typescript@5.7.2)): + stylelint-config-recommended-scss@14.1.0(postcss@8.4.49)(stylelint@16.11.0(typescript@5.7.2)): dependencies: postcss-scss: 4.0.9(postcss@8.4.49) stylelint: 16.11.0(typescript@5.7.2) - stylelint-config-recommended: 14.0.0(stylelint@16.11.0(typescript@5.7.2)) - stylelint-scss: 6.1.0(stylelint@16.11.0(typescript@5.7.2)) + stylelint-config-recommended: 14.0.1(stylelint@16.11.0(typescript@5.7.2)) + stylelint-scss: 6.10.0(stylelint@16.11.0(typescript@5.7.2)) optionalDependencies: postcss: 8.4.49 - stylelint-config-recommended@14.0.0(stylelint@16.11.0(typescript@5.7.2)): + stylelint-config-recommended@14.0.1(stylelint@16.11.0(typescript@5.7.2)): dependencies: stylelint: 16.11.0(typescript@5.7.2) - stylelint-config-standard-scss@13.1.0(postcss@8.4.49)(stylelint@16.11.0(typescript@5.7.2)): + stylelint-config-standard-scss@14.0.0(postcss@8.4.49)(stylelint@16.11.0(typescript@5.7.2)): dependencies: stylelint: 16.11.0(typescript@5.7.2) - stylelint-config-recommended-scss: 14.0.0(postcss@8.4.49)(stylelint@16.11.0(typescript@5.7.2)) - stylelint-config-standard: 36.0.0(stylelint@16.11.0(typescript@5.7.2)) + stylelint-config-recommended-scss: 14.1.0(postcss@8.4.49)(stylelint@16.11.0(typescript@5.7.2)) + stylelint-config-standard: 36.0.1(stylelint@16.11.0(typescript@5.7.2)) optionalDependencies: postcss: 8.4.49 - stylelint-config-standard@36.0.0(stylelint@16.11.0(typescript@5.7.2)): + stylelint-config-standard@36.0.1(stylelint@16.11.0(typescript@5.7.2)): dependencies: stylelint: 16.11.0(typescript@5.7.2) - stylelint-config-recommended: 14.0.0(stylelint@16.11.0(typescript@5.7.2)) + stylelint-config-recommended: 14.0.1(stylelint@16.11.0(typescript@5.7.2)) stylelint-order@6.0.4(stylelint@16.11.0(typescript@5.7.2)): dependencies: @@ -14916,12 +14907,15 @@ snapshots: postcss-sorting: 8.0.2(postcss@8.4.49) stylelint: 16.11.0(typescript@5.7.2) - stylelint-scss@6.1.0(stylelint@16.11.0(typescript@5.7.2)): + stylelint-scss@6.10.0(stylelint@16.11.0(typescript@5.7.2)): dependencies: - known-css-properties: 0.29.0 + css-tree: 3.0.1 + is-plain-object: 5.0.0 + known-css-properties: 0.35.0 + mdn-data: 2.13.0 postcss-media-query-parser: 0.2.3 postcss-resolve-nested-selector: 0.1.6 - postcss-selector-parser: 6.1.2 + postcss-selector-parser: 7.0.0 postcss-value-parser: 4.2.0 stylelint: 16.11.0(typescript@5.7.2) diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx index 88728215f8..4e34bfd49d 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx +++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx @@ -20,6 +20,12 @@ 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. + + + ### 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 5430965a8c..81598822ec 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx @@ -54,6 +54,26 @@ export const MultipleDescriptions: Story = { }, } +export const MultipleTerms: Story = { + args: { + termsWidth: 'md', + children: [ + Achternaam, + + 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, + ], + }, +} + export const RichDescription: Story = { render: (args) => (