feat: pre-heading component

components/pre-heading/bem.scss

@@ -0,0 +1,25 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+.utrecht-pre-heading {
+  color: var(--utrecht-pre-heading-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
+  font-family: var(
+    --utrecht-pre-heading-font-family,
+    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))
+  );
+  font-size: var(--utrecht-pre-heading-font-size);
+  font-weight: var(--utrecht-pre-heading-font-weight, var(--utrecht-heading-font-weight, bold));
+  letter-spacing: var(--utrecht-pre-heading-letter-spacing);
+  line-height: var(--utrecht-pre-heading-line-height);
+  margin-block-end: 0;
+  margin-block-start: 0;
+  text-transform: var(--utrecht-pre-heading-text-transform, inherit);
+}
+
+.utrecht-pre-heading--distanced {
+  margin-block-end: var(--utrecht-pre-heading-margin-block-end);
+  margin-block-start: var(--utrecht-pre-heading-margin-block-start);
+}

components/pre-heading/bem.stories.mdx

@@ -0,0 +1,57 @@
+<!--
+@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";
+
+export const defaultArgs = {
+  distanced: false,
+};
+
+export const Template = ({ textContent = "", distanced = false }) =>
+  `<div class="${clsx("utrecht-pre-heading", {
+    "utrecht-pre-heading--distanced": distanced,
+  })}">${textContent}</div>`;
+
+<Meta
+  title="CSS Component/Pre-heading"
+  argTypes={{
+    textContent: {
+      description: "Set the content of the heading",
+      control: "text",
+    },
+    distanced: {
+      description: "Distance the element from adjacent content",
+      control: "boolean",
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    status: {
+      type: "ALPHA",
+    },
+  }}
+/>
+
+# Pre-heading
+
+Styling via `utrecht-pre-heading` class name:
+
+<Canvas>
+  <Story
+    name="Pre-heading"
+    args={{
+      ...defaultArgs,
+      textContent: "The Quick Brown Fox Jumps Over The Lazy Dog",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Pre-heading" />

components/pre-heading/block.style-dictionary.json

@@ -0,0 +1,48 @@
+{
+  "utrecht": {
+    "pre-heading": {
+      "color": {
+        "css": {
+          "syntax": "<color>",
+          "inherits": true
+        }
+      },
+      "font-family": {
+        "css": {
+          "syntax": "*",
+          "inherits": true
+        }
+      },
+      "font-size": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      },
+      "font-weight": {
+        "css": {
+          "syntax": "<number>",
+          "inherits": true
+        }
+      },
+      "line-height": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      },
+      "margin-block-end": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      },
+      "margin-block-start": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      }
+    }
+  }
+}

proprietary/design-tokens/src/component/utrecht/pre-heading/block.style-dictionary.json

@@ -0,0 +1,20 @@
+{
+  "utrecht": {
+    "pre-heading": {
+      "color": {},
+      "font-family": {},
+      "font-size": {
+        "value": "{utrecht.typography.scale.md.font-size.value}"
+      },
+      "font-weight": {},
+      "line-height": {},
+      "margin-block-end": {},
+      "margin-block-start": {
+        "value": "{utrecht.space.row.2xl.value}"
+      },
+      "text-transform": {
+        "value": "uppercase"
+      }
+    }
+  }
+}