feat: heading stencil component

components/heading/stencil.stories.mdx

@@ -0,0 +1,98 @@
+<!--
+@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 = ({ level, content }) =>
+  `<section>
+  <utrecht-heading level="${level}">${content}</utrecht-heading>
+</section>`;
+
+<Meta
+  title="Web Component/Heading"
+  argTypes={{
+    level: {
+      description: "Heading level",
+      type: "number",
+      defaultValue: "1",
+    },
+    content: {
+      description: "Set the content of the heading",
+      control: "text",
+      defaultValue: "The Quick Brown Fox Jumps Over The Lazy Dog",
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+    notes: {
+      UX: README,
+    },
+  }}
+/>
+
+# Heading components
+
+<Canvas>
+  <Story name="Heading">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Heading" />
+
+## Heading 1
+
+<Canvas>
+  <Story name="Heading 1" args={{ level: 1 }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Heading 2
+
+<Canvas>
+  <Story name="Heading 2" args={{ level: 2 }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Heading 3
+
+<Canvas>
+  <Story name="Heading 3" args={{ level: 3 }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Heading 4
+
+<Canvas>
+  <Story name="Heading 4" args={{ level: 4 }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Heading 5
+
+<Canvas>
+  <Story name="Heading 5" args={{ level: 5 }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Heading 6
+
+<Canvas>
+  <Story name="Heading 6" args={{ level: 6 }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>

components/heading/stencil.tsx

@@ -0,0 +1,59 @@
+import { Component, Prop, h } from "@stencil/core";
+
+@Component({
+  tag: "utrecht-heading",
+  styleUrl: "bem.css",
+  shadow: true,
+})
+export class Heading {
+  /**
+   * Heading level
+   */
+  @Prop() level: number;
+
+  render() {
+    if (this.level === 1) {
+      return (
+        <h1 class="utrecht-heading-1">
+          <slot></slot>
+        </h1>
+      );
+    } else if (this.level === 2) {
+      return (
+        <h2 class="utrecht-heading-2">
+          <slot></slot>
+        </h2>
+      );
+    } else if (this.level === 3) {
+      return (
+        <h3 class="utrecht-heading-3">
+          <slot></slot>
+        </h3>
+      );
+    } else if (this.level === 4) {
+      return (
+        <h4 class="utrecht-heading-4">
+          <slot></slot>
+        </h4>
+      );
+    } else if (this.level === 5) {
+      return (
+        <h5 class="utrecht-heading-5">
+          <slot></slot>
+        </h5>
+      );
+    } else if (this.level === 6) {
+      return (
+        <h6 class="utrecht-heading-6">
+          <slot></slot>
+        </h6>
+      );
+    } else {
+      return (
+        <div class="utrecht-heading" role="heading" aria-level={this.level}>
+          <slot></slot>
+        </div>
+      );
+    }
+  }
+}