feat: article component

components/article/README.md

@@ -0,0 +1 @@
+# Article

components/article/bem.css

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+.utrecht-article {
+  max-inline-size: var(--utrecht-article-max-inline-size);
+}

components/article/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 "./bem.css";
+
+import README from "./README.md";
+
+export const Template = ({ content }) => `<div class="utrecht-article">${content}</div>`;
+
+<Meta
+  title="Components/Article"
+  argTypes={{
+    content: {
+      description: "Content of the article",
+      control: "text",
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+    notes: {
+      UX: README,
+    },
+  }}
+/>
+
+# Article
+
+Styling via the `.utrecht-article` class name:
+
+<Canvas>
+  <Story
+    name="Article"
+    args={{
+      content: `<h1>Lorem ipsum</h1>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+laborum.</p>`,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Article" />

components/article/block.style-dictionary.json

@@ -0,0 +1,7 @@
+{
+  "utrecht": {
+    "article": {
+      "max-inline-size": {}
+    }
+  }
+}

components/article/html.scss

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

components/article/stencil.stories.mdx

@@ -0,0 +1,53 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
+
+<!-- Import Docs -->
+
+import README from "./README.md";
+
+export const Template = ({ content }) => `<utrecht-article>${content}</utrecht-article>`;
+
+<Meta
+  title="Web Component/Article"
+  argTypes={{
+    content: {
+      description: "Content of the article",
+      control: "text",
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+    notes: {
+      UX: README,
+    },
+  }}
+/>
+
+# Article
+
+<Canvas>
+  <Story
+    name="Article"
+    args={{
+      content: `<h1>Lorem ipsum</h1>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+laborum.</p>`,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Article" />

components/article/stencil.tsx

@@ -0,0 +1,16 @@
+import { Component, h } from "@stencil/core";
+
+@Component({
+  tag: "utrecht-article",
+  styleUrl: "bem.css",
+  shadow: true,
+})
+export class Article {
+  render() {
+    return (
+      <article class="utrecht-article">
+        <slot></slot>
+      </article>
+    );
+  }
+}

components/html-content/html.scss

@@ -5,6 +5,7 @@
 
 /* Collection of all semantic HTML styles in the component library */
 
+@import "../article/html";
 @import "../blockquote/html";
 @import "../button/html";
 @import "../checkbox/html";

packages/component-library-css/src/html.scss

@@ -5,6 +5,7 @@
 
 /* Collection of all semantic HTML styles in the component library */
 
+@import "../../../components/article/html";
 @import "../../../components/blockquote/html";
 @import "../../../components/form-label/html";
 @import "../../../components/paragraph/html";

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

@@ -0,0 +1,9 @@
+{
+  "utrecht": {
+    "article": {
+      "max-inline-size": {
+        "value": "780px"
+      }
+    }
+  }
+}