feat: unordered list design tokens for padding and distanced variant

nl-design-system · Aug 21, 2021 · 39f7aab · 39f7aab
1 parent ccb3bb1
commit 39f7aab
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 9 deletions.
diff --git a/components/unordered-list/bem.css b/components/unordered-list/bem.css
@@ -8,7 +8,9 @@
   font-family: var(--utrecht-document-font-family, inherit);
   font-size: var(--utrecht-document-font-size, inherit);
   line-height: var(--utrecht-document-line-height, inherit);
-  padding-inline-start: 2ch;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
 }
 
 .utrecht-unordered-list--distanced {
@@ -24,7 +26,7 @@
 .utrecht-unordered-list__item {
   margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
   margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
-  padding-inline-start: 1ch;
+  padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
 }
 
 .utrecht-unordered-list__item::marker,

diff --git a/components/unordered-list/bem.stories.mdx b/components/unordered-list/bem.stories.mdx
@@ -3,17 +3,19 @@
 Copyright (c) 2021 Robbert Broersma
 -->
 
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { ArgsTable, Meta, Story, Canvas } from "@storybook/addon-docs";
 import "./bem.css";
-export const Template = () =>
-  `<ul class="utrecht-unordered-list">
+import clsx from "clsx";
+
+export const Template = ({ distanced = false }) =>
+  `<ul class="${clsx("utrecht-unordered-list", distanced && "utrecht-unordered-list--distanced")}">
   <li class="utrecht-unordered-list__item">Lorem</li>
   <li class="utrecht-unordered-list__item">Ipsum</li>
   <li class="utrecht-unordered-list__item">Dolor</li>
 </ul>`;
 
-export const TemplateNested = () =>
-  `<ul class="utrecht-unordered-list">
+export const TemplateNested = ({ distanced = false }) =>
+  `<ul class="${clsx("utrecht-unordered-list", distanced && "utrecht-unordered-list--distanced")}">
   <li class="utrecht-unordered-list__item">Lorem</li>
   <li class="utrecht-unordered-list__item">Ipsum
     <ul class="utrecht-unordered-list utrecht-unordered-list--nested">
@@ -26,7 +28,12 @@ export const TemplateNested = () =>
 
 <Meta
   title="CSS Component/Unordered List"
-  argTypes={{}}
+  argTypes={{
+    distanced: {
+      description: "Distance the element from adjacent content",
+      control: "boolean",
+    },
+  }}
   parameters={{
     docs: {
       transformSource: (_src, { args }) => Template(args),
@@ -38,9 +45,18 @@ export const TemplateNested = () =>
 />
 
 <Canvas>
-  <Story name="Bulleted list">{Template.bind({})}</Story>
+  <Story
+    name="Bulleted list"
+    args={{
+      distanced: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
 </Canvas>
 
+<ArgsTable story="Bulleted list" />
+
 ## Nested list
 
 <Canvas>

diff --git a/components/unordered-list/block.style-dictionary.json b/components/unordered-list/block.style-dictionary.json
@@ -12,6 +12,12 @@
           "syntax": "<length>",
           "inherits": true
         }
+      },
+      "padding-inline-start": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
       }
     }
   }

diff --git a/components/unordered-list/element.style-dictionary.json b/components/unordered-list/element.style-dictionary.json
@@ -13,6 +13,12 @@
             "syntax": "<length>",
             "inherits": true
           }
+        },
+        "padding-inline-start": {
+          "css": {
+            "syntax": "<length>",
+            "inherits": true
+          }
         }
       },
       "marker": {