feat: ordered list component

nl-design-system · Aug 2, 2021 · e43c3ed · e43c3ed
1 parent c60d3c8
commit e43c3ed
Show file tree

Hide file tree

Showing 11 changed files with 193 additions and 0 deletions.
diff --git a/components/ordered-list/README.md b/components/ordered-list/README.md
@@ -0,0 +1,6 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Gemeente Utrecht
+-->
+
+# Lijsten
diff --git a/components/ordered-list/bem.css b/components/ordered-list/bem.css
@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+
+.utrecht-ordered-list {
+  font-family: var(--utrecht-document-font-family, inherit);
+}
+
+.utrecht-ordered-list--distanced {
+  margin-block-end: var(--utrecht-ordered-list-margin-block-end);
+  margin-block-start: var(--utrecht-ordered-list-margin-block-start);
+}
+
+.utrecht-ordered-list__item {
+  margin-block-end: var(--utrecht-ordered-list-item-margin-block-end);
+  margin-block-start: var(--utrecht-ordered-list-item-margin-block-start);
+}
diff --git a/components/ordered-list/bem.stories.mdx b/components/ordered-list/bem.stories.mdx
@@ -0,0 +1,48 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import clsx from "clsx";
+import "./bem.css";
+import README from "./README.md";
+
+export const Template = ({ distanced }) =>
+  `<ol class="${clsx("utrecht-ordered-list", distanced && "utrecht-ordered-list--distanced")}">
+  <li class="utrecht-ordered-list__item">Lorem</li>
+  <li class="utrecht-ordered-list__item">Ipsum</li>
+  <li class="utrecht-ordered-list__item">Dolor</li>
+</ol>`;
+
+<Meta
+  title="Components/Ordered List"
+  argTypes={{
+    distanced: {
+      description: "Distance the element from adjacent content",
+      control: "boolean",
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    status: "IN DEVELOPMENT",
+    notes: {
+      UX: README,
+    },
+  }}
+/>
+
+# Ordered list
+
+<Canvas>
+  <Story
+    name="Ordered list"
+    args={{
+      distanced: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
diff --git a/components/ordered-list/block.style-dictionary.json b/components/ordered-list/block.style-dictionary.json
@@ -0,0 +1,18 @@
+{
+  "utrecht": {
+    "ordered-list": {
+      "margin-block-start": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      },
+      "margin-block-end": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      }
+    }
+  }
+}
diff --git a/components/ordered-list/element.style-dictionary.json b/components/ordered-list/element.style-dictionary.json
@@ -0,0 +1,20 @@
+{
+  "utrecht": {
+    "ordered-list": {
+      "item": {
+        "margin-block-start": {
+          "css": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        },
+        "margin-block-end": {
+          "css": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/components/ordered-list/html.scss b/components/ordered-list/html.scss
@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+.utrecht-html ol {
+  @extend .utrecht-ordered-list;
+  @extend .utrecht-ordered-list--distanced;
+}
+
+.utrecht-html ol > li {
+  @extend .utrecht-ordered-list__item;
+}
diff --git a/components/ordered-list/html.stories.mdx b/components/ordered-list/html.stories.mdx
@@ -0,0 +1,39 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+
+import "./html.scss";
+
+import README from "./README.md";
+
+export const Template = () =>
+  `<section class="utrecht-html">
+  <ol>
+    <li>Lorem</li>
+    <li>Ipsum</li>
+    <li>Dolor</li>
+  </ol>
+</section>`;
+
+<Meta
+  title="Semantic HTML/Ordered List"
+  argTypes={{}}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    status: "IN DEVELOPMENT",
+    notes: {
+      UX: README,
+    },
+  }}
+/>
+
+## Ordered list
+
+<Canvas>
+  <Story name="Ordered list">{Template.bind({})}</Story>
+</Canvas>
diff --git a/packages/component-library-css/src/bem.scss b/packages/component-library-css/src/bem.scss
@@ -41,6 +41,7 @@
 @import "../../../components/navigatie sidenav/bem";
 @import "../../../components/navigatie topnav/bem";
 @import "../../../components/nav-top/bem";
+@import "../../../components/ordered-list/bem";
 @import "../../../components/page-footer/bem";
 @import "../../../components/paragraph/bem";
 @import "../../../components/radio-button/bem";

diff --git a/packages/component-library-css/src/html.scss b/packages/component-library-css/src/html.scss
@@ -16,6 +16,7 @@
 @import "../../../components/heading/html";
 @import "../../../components/html-content/html";
 @import "../../../components/link/html";
+@import "../../../components/ordered-list/html";
 @import "../../../components/paragraph/html";
 @import "../../../components/radio-button/html";
 @import "../../../components/separator/html";

diff --git a/proprietary/design-tokens/src/component/utrecht/ordered-list/block.style-dictionary.json b/proprietary/design-tokens/src/component/utrecht/ordered-list/block.style-dictionary.json
@@ -0,0 +1,12 @@
+{
+  "utrecht": {
+    "ordered-list": {
+      "margin-block-start": {
+        "value": "0"
+      },
+      "margin-block-end": {
+        "value": "1em"
+      }
+    }
+  }
+}
diff --git a/proprietary/design-tokens/src/component/utrecht/ordered-list/element.style-dictionary.json b/proprietary/design-tokens/src/component/utrecht/ordered-list/element.style-dictionary.json
@@ -0,0 +1,14 @@
+{
+  "utrecht": {
+    "ordered-list": {
+      "item": {
+        "margin-block-start": {
+          "value": "0.25em"
+        },
+        "margin-block-end": {
+          "value": "0.25em"
+        }
+      }
+    }
+  }
+}