feat: surface component

nl-design-system · Oct 11, 2021 · aef8983 · aef8983
1 parent df9befb
commit aef8983
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 0 deletions.
diff --git a/components/surface/README.md b/components/surface/README.md
@@ -0,0 +1,10 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+# Surface component
+
+The surface component can be used to style the background color of the entire viewport.
+
+The CSS class name is `utrecht-surface`.
diff --git a/components/surface/bem.scss b/components/surface/bem.scss
@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@mixin reset-body {
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+
+.utrecht-surface {
+  background-color: var(--utrecht-surface-background-color, inherit);
+  color: var(--utrecht-surface-color, inherit);
+}
+
+.utrecht-surface--reset-body {
+  @include reset-body;
+}
diff --git a/components/surface/block.tokens.json b/components/surface/block.tokens.json
@@ -0,0 +1,18 @@
+{
+  "utrecht": {
+    "surface": {
+      "background-color": {
+        "css": {
+          "syntax": "<color>",
+          "inherits": true
+        }
+      },
+      "color": {
+        "css": {
+          "syntax": "<color>",
+          "inherits": true
+        }
+      }
+    }
+  }
+}
diff --git a/components/surface/readme.stories.mdx b/components/surface/readme.stories.mdx
@@ -0,0 +1,34 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { Description, Meta, Source } from "@storybook/addon-docs";
+import { ComponentTokensTable } from "../../documentation/components/ComponentTokensTable";
+import { utrechtSurfaceBackgroundColor } from "../../proprietary/design-tokens/dist/index.js";
+import tokens from "../../proprietary/design-tokens/dist/index.json";
+import document from "./README.md";
+
+<Meta title="CSS Component/Surface/README" />
+
+<Description>{document}</Description>
+
+## Theme color
+
+To make the browser user interface match your websites surface background color, you can include the following code in the `<head>` element of your pages:
+
+<Source language="html" code={`<meta name="theme-color" content="${utrechtSurfaceBackgroundColor}">`} />
+
+For projects that use JSX and React, the following code sample shows how to refer to the design token package to automatically use the most recent choice of color.
+
+```jsx
+import { utrechtSurfaceBackgroundColor } from "@utrecht/design-tokens/dist/index";
+
+export const ThemeColor = () => <meta name="theme-color" content={utrechtSurfaceBackgroundColor} />;
+```
+
+See for more information: [`theme-color` on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color)
+
+## Design Tokens
+
+<ComponentTokensTable tokens={tokens} component="utrecht-surface"></ComponentTokensTable>
diff --git a/components/surface/stencil.scss b/components/surface/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/surface/surface.stories.mdx b/components/surface/surface.stories.mdx
@@ -0,0 +1,41 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+export const Template = ({ innerHTML }) => `<utrecht-surface>${innerHTML}</utrecht-surface>`;
+
+<Meta
+  title="Web Component/Surface"
+  argTypes={{
+    innerHTML: {
+      description: "Surface content",
+      control: "text",
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    layout: "fullscreen",
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+  }}
+/>
+
+# Surface component
+
+<Canvas>
+  <Story
+    name="Surface"
+    args={{
+      innerHTML: "The Quick Brown Fox Jumps Over The Lazy Dog",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Surface" />
diff --git a/proprietary/design-tokens/src/brand/utrecht/color.tokens.json b/proprietary/design-tokens/src/brand/utrecht/color.tokens.json
@@ -16,6 +16,7 @@
         "90": { "value": "hsl(211 60% 90%)", "comment": "ijsblauw variant achtergrond, spotlight en uitgelicht" }
       },
       "grey": {
+        "10": { "value": "hsl(0 0% 11%)", "comment": "experimenteel / beperkt gebruiken" },
         "15": { "value": "hsl(0 0% 15%)", "comment": "experimenteel / beperkt gebruiken" },
         "30": { "value": "hsl(0 0% 30%)", "comment": "border grijs #888" },
         "40": { "value": "hsl(0 0% 40%)", "comment": "basis grijs #727272" },

diff --git a/proprietary/design-tokens/src/component/utrecht/surface/block.tokens.json b/proprietary/design-tokens/src/component/utrecht/surface/block.tokens.json
@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "surface": {
+      "background-color": { "value": "{utrecht.color.grey.95.value}" },
+      "color": { "value": "{utrecht.color.grey.10.value}" }
+    }
+  }
+}