Fixed it and gave it a story

Amsterdam · Nov 26, 2024 · 56a4d48 · 56a4d48
1 parent b926bec
commit 56a4d48
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git 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.
 
 <Canvas of={DescriptionListStories.MultipleDescriptions} />
 
+### Multiple terms
+
+In the case of multiple consequtive terms for a description, the terms are wrapped in a div element.
+
+<Canvas of={DescriptionListStories.MultipleTerms} />
+
 ### 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
@@ -46,17 +46,24 @@ export const MultipleDescriptions: Story = {
   args: {
     children: [
       <DescriptionList.Term key={1}>Blinde, slechtziende</DescriptionList.Term>,
-      <DescriptionList.Description key={1.2}>Persoon met een visuele beperking</DescriptionList.Description>,
-      <DescriptionList.Description key={1.3}>Persoon met een visuele handicap</DescriptionList.Description>,
-      <DescriptionList.Description key={1.4}>Persoon die blind is</DescriptionList.Description>,
-      <DescriptionList.Description key={1.5}>Persoon die slechtziend is</DescriptionList.Description>,
-      <DescriptionList.Term key={2}>Doof</DescriptionList.Term>,
-      <DescriptionList.Term key={3}>Slechthorend</DescriptionList.Term>,
-      <DescriptionList.Description key={2.1} style={{ gridRowStart: 5 }}>
-        Persoon die niet of slecht hoort
-      </DescriptionList.Description>,
-      <DescriptionList.Term key={4}>Dyslexie</DescriptionList.Term>,
-      <DescriptionList.Description key={4.1}>Moeite met lezen en schrijven</DescriptionList.Description>,
+      <DescriptionList.Description key={2}>Persoon met een visuele beperking</DescriptionList.Description>,
+      <DescriptionList.Description key={3}>Persoon met een visuele handicap</DescriptionList.Description>,
+      <DescriptionList.Description key={4}>Persoon die blind is</DescriptionList.Description>,
+      <DescriptionList.Description key={5}>Persoon die slechtziend is</DescriptionList.Description>,
+    ],
+  },
+}
+
+export const MultipleTerms: Story = {
+  args: {
+    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>,
     ],
   },
 }