feat: link list component

components/link-list/README.md

@@ -0,0 +1 @@
+# Link List

components/link-list/bem.scss

@@ -0,0 +1,66 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@mixin reset-ul() {
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  padding-inline-start: 0;
+}
+
+@mixin reset-li() {
+  list-style: none;
+}
+
+/* reset before other stylesheets */
+.utrecht-link-list,
+.utrecht-link-list--html-ul {
+  @include reset-ul();
+
+  & > li {
+    @include reset-li();
+  }
+}
+
+.utrecht-link-list {
+  --utrecht-link-text-decoration: none;
+  --utrecht-link-hover-text-decoration: underline;
+  --utrecht-link-focus-text-decoration: underline;
+}
+
+.utrecht-link-list--distanced {
+  margin-block-end: var(--utrecht-link-list-margin-block-end, 0);
+  margin-block-start: var(--utrecht-link-list-margin-block-start, 0);
+}
+
+.utrecht-link-list__marker {
+  background-image: var(--utrecht-link-list-marker-background-image);
+  background-position-x: left;
+  background-position-y: bottom;
+  background-repeat: no-repeat;
+  display: inline-block;
+  inline-size: var(--utrecht-link-list-marker-inline-size);
+}
+
+.utrecht-link-list__item {
+  display: block;
+  font-weight: var(--utrecht-link-list-item-font-weight);
+}
+
+.utrecht-link-list__item + .utrecht-link-list__item {
+  margin-block-start: var(--utrecht-link-list-item-margin-block-start);
+}
+
+.utrecht-link-list__item > a {
+  display: block;
+}
+.utrecht-link-list__item > a::before {
+  content: "";
+  display: inline-block;
+  height: 1em;
+  @extend .utrecht-link-list__marker;
+}

components/link-list/bem.stories.mdx

@@ -0,0 +1,55 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
+import clsx from "clsx";
+import "./bem.scss";
+import { Template as Link } from "../link/bem.stories.mdx";
+
+export const Template = ({ links = [] }) => `<ul class="utrecht-link-list utrecht-link-list--html-ul">
+  ${links.map((link) => `<li class="utrecht-link-list__item">${Link(link)}</li>`).join("\n  ")}
+</ul>`;
+
+<Meta
+  title="CSS Component/Link List"
+  argTypes={{
+    links: {
+      description: "Links",
+      type: {
+        name: "array",
+        required: true,
+      },
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+  }}
+/>
+
+# Link List
+
+The CSS code is currently very specific to Utrecht, and has no white label design tokens yet.
+
+<Canvas>
+  <Story
+    name="Link List"
+    args={{
+      links: [
+        { href: "#", textContent: "Link 1" },
+        { href: "#", textContent: "Link 2" },
+        { href: "#", textContent: "Link 3" },
+      ],
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Link List" />

components/link-list/block.style-dictionary.json

@@ -0,0 +1,18 @@
+{
+  "utrecht": {
+    "link-list": {
+      "margin-block-start": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      },
+      "margin-block-end": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      }
+    }
+  }
+}

components/link-list/element.style-dictionary.json

@@ -0,0 +1,14 @@
+{
+  "utrecht": {
+    "link-list": {
+      "item": {
+        "margin-block-start": {
+          "css": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      }
+    }
+  }
+}

components/link-list/readme.stories.mdx

@@ -0,0 +1,6 @@
+import { Meta, Description } from "@storybook/addon-docs";
+import document from "./README.md";
+
+<Meta title="CSS Component/Link List/README" />
+
+<Description>{document}</Description>

components/page-footer/bem.stories.mdx

@@ -50,10 +50,10 @@ ${innerHTML}</header>`;
   </address>
   <div class="utrecht-page-footer__navigation">
     <ul class="utrecht-link-list utrecht-link-list--chevron">
-      <li class="utrecht-link-list__listitem">
+      <li class="utrecht-link-list__item">
         <a href="/contact/" class="utrecht-link">Meer contactinformatie</a>
       </li>
-      <li class="utrecht-link-list__listitem">
+      <li class="utrecht-link-list__item">
         <a href="/over-deze-website" class="utrecht-link">Over deze website</a>
       </li>
     </ul>

proprietary/design-tokens/src/component/utrecht/link-list/element.style-dictionary.json

@@ -0,0 +1,19 @@
+{
+  "utrecht": {
+    "link-list": {
+      "item": {
+        "margin-block-start": {
+          "value": "{utrecht.space.block.xs.value}"
+        },
+        "font-weight": {
+          "value": "{utrecht.typography.weight-scale.bold.font-weight.value}"
+        }
+      },
+      "marker": {
+        "inline-size": {
+          "value": "16px"
+        }
+      }
+    }
+  }
+}

proprietary/design-tokens/src/custom.scss

@@ -5,4 +5,10 @@
   --utrecht-menulijst-item-background-image: url("./pijltje.svg");
   --utrecht-search-bar-input-background-image: url("./icoon-zoek-rood.svg");
   --utrecht-select-background-image: url("./arrow-dropdown.svg");
+  --utrecht-link-list-marker-background-image: url("./pijltje-zwart.svg");
+}
+
+utrecht-page-footer,
+.utrecht-page-footer {
+  --utrecht-link-list-marker-background-image: url("./pijltje-wit.svg");
 }