From df9befbad816ec4cfa8339666af537409670682f Mon Sep 17 00:00:00 2001
From: Robbert Broersma <mail@robbertbroersma.nl>
Date: Thu, 7 Oct 2021 13:52:05 +0200
Subject: [PATCH] feat: page header component

---
 components/page-header/README.md              |  1 +
 components/page-header/bem.js                 |  6 +++
 components/page-header/bem.scss               | 19 +++++++++
 components/page-header/bem.stories.mdx        | 39 ++++++++++++++++++
 components/page-header/block.tokens.json      | 30 ++++++++++++++
 components/page-header/readme.stories.mdx     | 12 ++++++
 components/page-header/stencil.scss           | 14 +++++++
 components/page-header/stencil.stories.mdx    | 40 +++++++++++++++++++
 components/page-header/stencil.tsx            | 23 +++++++++++
 .../src/index.module.ts                       |  2 +
 .../utrecht/page-header/block.tokens.json     | 10 +++++
 11 files changed, 196 insertions(+)
 create mode 100644 components/page-header/README.md
 create mode 100644 components/page-header/bem.js
 create mode 100644 components/page-header/bem.scss
 create mode 100644 components/page-header/bem.stories.mdx
 create mode 100644 components/page-header/block.tokens.json
 create mode 100644 components/page-header/readme.stories.mdx
 create mode 100644 components/page-header/stencil.scss
 create mode 100644 components/page-header/stencil.stories.mdx
 create mode 100644 components/page-header/stencil.tsx
 create mode 100644 proprietary/design-tokens/src/component/utrecht/page-header/block.tokens.json

diff --git a/components/page-header/README.md b/components/page-header/README.md
new file mode 100644
index 00000000000..d8ebf204fd5
--- /dev/null
+++ b/components/page-header/README.md
@@ -0,0 +1 @@
+# Page Header
diff --git a/components/page-header/bem.js b/components/page-header/bem.js
new file mode 100644
index 00000000000..30f1b2c554c
--- /dev/null
+++ b/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>`;
diff --git a/components/page-header/bem.scss b/components/page-header/bem.scss
new file mode 100644
index 00000000000..1c1df00bcab
--- /dev/null
+++ b/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);
+}
diff --git a/components/page-header/bem.stories.mdx b/components/page-header/bem.stories.mdx
new file mode 100644
index 00000000000..8a50e271cfd
--- /dev/null
+++ b/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" />
diff --git a/components/page-header/block.tokens.json b/components/page-header/block.tokens.json
new file mode 100644
index 00000000000..9a6dce173f5
--- /dev/null
+++ b/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
+        }
+      }
+    }
+  }
+}
diff --git a/components/page-header/readme.stories.mdx b/components/page-header/readme.stories.mdx
new file mode 100644
index 00000000000..6c6ea703468
--- /dev/null
+++ b/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>
diff --git a/components/page-header/stencil.scss b/components/page-header/stencil.scss
new file mode 100644
index 00000000000..8a071255113
--- /dev/null
+++ b/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;
+}
diff --git a/components/page-header/stencil.stories.mdx b/components/page-header/stencil.stories.mdx
new file mode 100644
index 00000000000..7a449bb4c14
--- /dev/null
+++ b/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" />
diff --git a/components/page-header/stencil.tsx b/components/page-header/stencil.tsx
new file mode 100644
index 00000000000..674c1d383bc
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/packages/web-component-library-angular/src/index.module.ts b/packages/web-component-library-angular/src/index.module.ts
index d1d56daf5ae..0039c0f8c01 100644
--- a/packages/web-component-library-angular/src/index.module.ts
+++ b/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,
diff --git a/proprietary/design-tokens/src/component/utrecht/page-header/block.tokens.json b/proprietary/design-tokens/src/component/utrecht/page-header/block.tokens.json
new file mode 100644
index 00000000000..6eee5dbc716
--- /dev/null
+++ b/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" }
+    }
+  }
+}