feat: page header component

components/page-header/README.md

@@ -0,0 +1 @@
+# Page Header

components/page-header/bem.js

@@ -0,0 +1,6 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const PageHeader = ({ innerHTML = '' }) => `<header class="utrecht-page-header">${innerHTML}</header>`;

components/page-header/bem.scss

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+.utrecht-page-header {
+  background-color: var(--utrecht-page-header-background-color);
+  color: var(--utrecht-page-header-color);
+  grid-area: "utrecht-header";
+  padding-block-end: var(--utrecht-page-header-padding-block-end);
+  padding-block-start: var(--utrecht-page-header-padding-block-start);
+  padding-inline-end: var(--utrecht-page-padding-inline-end);
+  padding-inline-start: var(--utrecht-page-padding-inline-start);
+}
+
+.utrecht-page-header__content {
+  max-inline-size: var(--utrecht-page-max-inline-size);
+}

components/page-header/bem.stories.mdx

@@ -0,0 +1,39 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { PageHeader } from "./bem";
+import "./bem.scss";
+
+<Meta
+  title="CSS Component/Page Header"
+  argTypes={{
+    innerHTML: {
+      description: "HTML content",
+      control: "text",
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => PageHeader(args),
+    },
+    status: "WORK IN PROGRESS",
+  }}
+/>
+
+# Page Header
+
+<Canvas>
+  <Story
+    name="Page Header"
+    args={{
+      innerHTML: "Header content",
+    }}
+  >
+    {PageHeader.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Page Header" />

components/page-header/block.tokens.json

@@ -0,0 +1,30 @@
+{
+  "utrecht": {
+    "page-header": {
+      "background-color": {
+        "css": {
+          "syntax": "<color>",
+          "inherits": true
+        }
+      },
+      "color": {
+        "css": {
+          "syntax": "<color>",
+          "inherits": true
+        }
+      },
+      "padding-start": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      },
+      "padding-block-end": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      }
+    }
+  }
+}

components/page-header/readme.stories.mdx

@@ -0,0 +1,12 @@
+import { Description, Meta } from "@storybook/addon-docs";
+import { ComponentTokensTable } from "../../documentation/components/ComponentTokensTable";
+import tokens from "../../proprietary/design-tokens/dist/index.json";
+import document from "./README.md";
+
+<Meta title="CSS Component/Page Header/README" />
+
+<Description>{document}</Description>
+
+## Design Tokens
+
+<ComponentTokensTable tokens={tokens} component="utrecht-page-header"></ComponentTokensTable>

components/page-header/stencil.scss

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

components/page-header/stencil.stories.mdx

@@ -0,0 +1,40 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+export const Template = ({ innerHTML = "" }) => `<utrecht-page-header>${innerHTML}</utrecht-page-header>`;
+
+<Meta
+  title="Web Component/Page Header"
+  argTypes={{
+    innerHTML: {
+      description: "HTML content",
+      control: "text",
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+  }}
+/>
+
+# Page Header
+
+<Canvas>
+  <Story
+    name="Page Header"
+    args={{
+      innerHTML: "Header content",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Page Header" />

components/page-header/stencil.tsx

@@ -0,0 +1,23 @@
+import { Component, h } from "@stencil/core";
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+
+@Component({
+  tag: "utrecht-page-header",
+  styleUrl: "stencil.scss",
+  shadow: true,
+})
+export class PageHeader {
+  render() {
+    return (
+      <header class="utrecht-page-header">
+        <div class="utrecht-page-header__content">
+          <slot></slot>
+        </div>
+      </header>
+    );
+  }
+}

packages/web-component-library-angular/src/index.module.ts

@@ -50,6 +50,7 @@ import {
   UtrechtPage,
   UtrechtPageContent,
   UtrechtPageFooter,
+  UtrechtPageHeader,
   UtrechtPagination,
   UtrechtParagraph,
   UtrechtSeparator,
@@ -110,6 +111,7 @@ const components = [
   UtrechtPage,
   UtrechtPageContent,
   UtrechtPageFooter,
+  UtrechtPageHeader,
   UtrechtPagination,
   UtrechtParagraph,
   UtrechtSeparator,

proprietary/design-tokens/src/component/utrecht/page-header/block.tokens.json

@@ -0,0 +1,10 @@
+{
+  "utrecht": {
+    "page-header": {
+      "padding-inline-end": { "value": "2.4em" },
+      "padding-inline-start": { "value": "2em" },
+      "padding-block-end": { "value": "1em" },
+      "padding-block-start": { "value": "1.8em" }
+    }
+  }
+}