A solution using groups and no subgrid

Amsterdam · Nov 26, 2024 · 425fa29 · 425fa29
1 parent 64575b5
commit 425fa29
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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<HTMLAttributes<HTMLDivElement>>
+
+export const DescriptionListGroup = forwardRef(
+  ({ children, className, ...restProps }: DescriptionListGroupProps, ref: ForwardedRef<HTMLDivElement>) => (
+    <div {...restProps} ref={ref} className={clsx('ams-description-list__group', className)}>
+      {children}
+    </div>
+  ),
+)
+
+DescriptionListGroup.displayName = 'DescriptionList.Group'
diff --git 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 `<div>` 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.
 
 <Canvas of={DescriptionListStories.MultipleTerms} />
 

diff --git 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: [
-      <div key={1}>
-        <DescriptionList.Term>Naam</DescriptionList.Term>
-        <DescriptionList.Term>Voornaam</DescriptionList.Term>
-        <DescriptionList.Term>Roepnaam</DescriptionList.Term>
-        <DescriptionList.Term>Bijnaam</DescriptionList.Term>
-      </div>,
-      <DescriptionList.Description key={2}>De naam waarmee een persoon wordt aangesproken</DescriptionList.Description>,
+      <DescriptionList.Group key={1}>
+        <DescriptionList.Term key={1}>Achternaam</DescriptionList.Term>
+        <DescriptionList.Description key={2}>
+          De naam die een persoon van zijn of haar ouders krijgt
+        </DescriptionList.Description>
+      </DescriptionList.Group>,
+      <DescriptionList.Group key={2}>
+        <DescriptionList.Term key={1}>Naam</DescriptionList.Term>
+        <DescriptionList.Term key={2}>Voornaam</DescriptionList.Term>
+        <DescriptionList.Term key={3}>Roepnaam</DescriptionList.Term>
+        <DescriptionList.Term key={4}>Bijnaam</DescriptionList.Term>
+        <DescriptionList.Description key={5}>
+          De naam waarmee een persoon wordt aangesproken
+        </DescriptionList.Description>
+      </DescriptionList.Group>,
+      <DescriptionList.Group key={3}>
+        <DescriptionList.Term key={1}>Geboortedatum</DescriptionList.Term>
+        <DescriptionList.Description key={2}>De datum waarop een persoon is geboren</DescriptionList.Description>
+      </DescriptionList.Group>,
     ],
   },
 }