feat: emphasis component

components/emphasis/README.md

@@ -0,0 +1 @@
+# Emphasis

components/emphasis/bem.css

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+.utrecht-emphasis--stressed {
+  font-style: var(--utrecht-emphasis-stressed-font-style, italic);
+}
+
+.utrecht-emphasis--strong {
+  font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
+}

components/emphasis/bem.stories.mdx

@@ -0,0 +1,72 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
+import clsx from "clsx";
+
+<!-- Import component and component styles -->
+
+import "./bem.css";
+
+<!-- Import Docs -->
+
+import README from "./README.md";
+
+export const Template = ({ content, stressed, strong }) =>
+  `<span class="${clsx(
+    "utrecht-emphasis",
+    stressed && "utrecht-emphasis--stressed",
+    strong && "utrecht-emphasis--strong"
+  )}">${content}</span>`;
+
+<Meta
+  title="Components/Emphasis"
+  argTypes={{
+    content: {
+      description: "Set the text content",
+      control: "text",
+      defaultValue: "The Quick Brown Fox Jumps Over The Lazy Dog",
+    },
+    stressed: {
+      description: "Stressed emphasis",
+      control: "boolean",
+      defaultValue: false,
+    },
+    strong: {
+      description: "Strong emphasis: very important or urgent content",
+      control: "boolean",
+      defaultValue: false,
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+    notes: {
+      UX: README,
+    },
+  }}
+/>
+
+# Emphasis
+
+<Canvas>
+  <Story name="Emphasis" args={{ stressed: true }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Emphasis" />
+
+## Strong emphasis
+
+<Canvas>
+  <Story name="Strong Emphasis" args={{ strong: true }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>

components/emphasis/html.scss

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+.utrecht-html em {
+  @extend .utrecht-emphasis--stressed;
+}
+
+.utrecht-html strong {
+  @extend .utrecht-emphasis--strong;
+}

components/emphasis/html.stories.mdx

@@ -0,0 +1,79 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
+
+<!-- Import component and component styles -->
+
+import "./html.scss";
+
+<!-- Import Docs -->
+
+import README from "./README.md";
+
+export const StressedTemplate = ({ content }) => `<em>${content}</em>`;
+
+export const StrongTemplate = ({ content }) => `<strong>${content}</strong>`;
+
+export const Template = ({ content, stressed, strong }) => {
+  let formatted = content;
+  if (stressed) {
+    formatted = StressedTemplate({ content: formatted });
+  }
+  if (strong) {
+    formatted = StrongTemplate({ content: formatted });
+  }
+  return `<div class="utrecht-html">${formatted}</div>`;
+};
+
+<Meta
+  title="Semantic HTML/Emphasis"
+  argTypes={{
+    content: {
+      description: "Set the text content",
+      control: "text",
+      defaultValue: "The Quick Brown Fox Jumps Over The Lazy Dog",
+    },
+    stressed: {
+      description: "Stressed emphasis",
+      control: "boolean",
+      defaultValue: false,
+    },
+    strong: {
+      description: "Strong emphasis: very important or urgent content",
+      control: "boolean",
+      defaultValue: false,
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+    notes: {
+      UX: README,
+    },
+  }}
+/>
+
+# Emphasis
+
+<Canvas>
+  <Story name="Emphasis" args={{ stressed: true }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Emphasis" />
+
+## Strong emphasis
+
+<Canvas>
+  <Story name="Strong Emphasis" args={{ strong: true }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>

components/emphasis/modifier.style-dictionary.json

@@ -0,0 +1,12 @@
+{
+  "utrecht": {
+    "emphasis": {
+      "stressed": {
+        "font-style": {}
+      },
+      "strong": {
+        "font-weight": {}
+      }
+    }
+  }
+}

proprietary/design-tokens/src/component/utrecht/emphasis/modifier.style-dictionary.json

@@ -0,0 +1,12 @@
+{
+  "utrecht": {
+    "emphasis": {
+      "stressed": {
+        "font-style": {}
+      },
+      "strong": {
+        "font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight.value}" }
+      }
+    }
+  }
+}