Add example of multiple terms

Amsterdam · Oct 21, 2024 · e678e0f · e678e0f
1 parent 4f68bd0
commit e678e0f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git 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.
 
 <Canvas of={DescriptionListStories.MultipleDescriptions} />
 
+### Multiple terms
+
+Multiple terms may share one description.
+
+<Canvas of={DescriptionListStories.MultipleTerms} />
+
 ### Inverse colour
 
 Set the `inverseColor` prop if the Description List sits on a dark background.

diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -46,6 +46,18 @@ export const MultipleDescriptions: Story = {
   },
 }
 
+export const MultipleTerms: Story = {
+  args: {
+    children: [
+      <DescriptionList.Term key={1}>mbo-leerling</DescriptionList.Term>,
+      <DescriptionList.Term key={2}>mbo-scholier</DescriptionList.Term>,
+      <DescriptionList.Details key={3} style={{ gridRow: '1 / 2' }}>
+        mbo-student
+      </DescriptionList.Details>,
+    ],
+  },
+}
+
 export const InverseColour: Story = {
   args: {
     inverseColor: true,