feat: data badge

components/badge-data/README.md

@@ -0,0 +1 @@
+# Data badge

components/badge-data/bem.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "../badge/bem";
+
+.utrecht-badge-data {
+  @extend .utrecht-badge;
+  letter-spacing: var(--utrecht-badge-data-letter-spacing, inherit);
+  text-transform: var(--utrecht-badge-data-text-transform, inherit);
+}

components/badge-data/bem.stories.mdx

@@ -0,0 +1,44 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
+
+import "./bem.scss";
+
+import README from "./README.md";
+
+export const Template = ({ textContent }) => `<div class="utrecht-badge-data">${textContent}</div>`;
+
+<Meta
+  title="Components/Badge/Data Badge"
+  argTypes={{
+    textContent: {
+      description: "Text content",
+      control: "text",
+      defaultValue: "Festivals",
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+    notes: {
+      UX: README,
+    },
+  }}
+/>
+
+# Data badge
+
+Styling via the `.utrecht-badge-data` class name:
+
+<Canvas>
+  <Story name="Data badge">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Data badge" />

components/badge-data/block.style-dictionary.json

@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "badge-data": {
+      "letter-spacing": {},
+      "text-transform": {}
+    }
+  }
+}

components/badge-data/stencil.tsx

@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h } from "@stencil/core";
+
+@Component({
+  tag: "utrecht-badge-data",
+  styleUrl: "bem.scss",
+  shadow: true,
+})
+export class BadgeData {
+  render() {
+    return (
+      <div class="utrecht-badge-data">
+        <slot></slot>
+      </div>
+    );
+  }
+}

proprietary/design-tokens/src/component/utrecht/badge-data/block.style-dictionary.json

@@ -0,0 +1,12 @@
+{
+  "utrecht": {
+    "badge-data": {
+      "letter-spacing": {
+        "value": "0.15ch"
+      },
+      "text-transform": {
+        "value": "uppercase"
+      }
+    }
+  }
+}