Refactor description list grid layout and update storybook examples f…

…or clarity
Amsterdam · Dec 5, 2024 · 3142a2a · 3142a2a
1 parent 25d4a27
commit 3142a2a
Show file tree

Hide file tree

Showing 2 changed files with 8 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
@@ -28,7 +28,7 @@
   .ams-description-list__group {
     column-gap: var(--ams-description-list-column-gap);
     display: grid;
-    grid-auto-flow: row dense;
+    grid-auto-flow: dense;
     grid-column: span 2;
   }
 

diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -62,20 +62,16 @@ export const MultipleTerms: Story = {
       <DescriptionList.Description key={2}>
         De naam die een persoon van zijn of haar ouders krijgt
       </DescriptionList.Description>,
-      <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.Description key={6}>
+      <DescriptionList.Group key={3}>
+        <DescriptionList.Term key={3.1}>Voornaam</DescriptionList.Term>
+        <DescriptionList.Term key={3.2}>Roepnaam</DescriptionList.Term>
+        <DescriptionList.Term key={3.3}>Bijnaam</DescriptionList.Term>
+        <DescriptionList.Description key={3.4}>
           De naam waarmee een persoon wordt aangesproken
         </DescriptionList.Description>
       </DescriptionList.Group>,
-      <DescriptionList.Term key={1}>Geboortedatum</DescriptionList.Term>,
-      <DescriptionList.Description key={2}>De datum waarop een persoon is geboren</DescriptionList.Description>,
+      <DescriptionList.Term key={4}>Geboortedatum</DescriptionList.Term>,
+      <DescriptionList.Description key={5}>De datum waarop een persoon is geboren</DescriptionList.Description>,
     ],
   },
 }