feat: <utrecht-logo> web component

nl-design-system · Aug 8, 2021 · 1dde7fa · 1dde7fa
1 parent 11f7ce6
commit 1dde7fa
Show file tree

Hide file tree

Showing 9 changed files with 154 additions and 12 deletions.
diff --git a/components/logo/README.md b/components/logo/README.md
@@ -1,4 +1,4 @@
-# Logo
+# Logo Gemeente Utrecht
 
 ## References
 

diff --git a/components/logo/bem.css b/components/logo/bem.css
@@ -0,0 +1,16 @@
+.utrecht-logo {
+  max-width: var(--utrecht-logo-max-width);
+  max-height: var(--utrecht-logo-max-height);
+}
+
+.utrecht-logo__decoration-1 {
+  fill: var(--utrecht-logo-decoration-1-color, #fff);
+}
+
+.utrecht-logo__decoration-2 {
+  fill: var(--utrecht-logo-decoration-2-color, #c00);
+}
+
+.utrecht-logo__decoration-3 {
+  fill: var(--utrecht-logo-decoration-3-color, #ffb70b);
+}
diff --git a/components/logo/block.style-dictionary.json b/components/logo/block.style-dictionary.json
@@ -0,0 +1,18 @@
+{
+  "utrecht": {
+    "logo": {
+      "max-height": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      },
+      "max-width": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      }
+    }
+  }
+}
diff --git a/components/logo/element.style-dictionary.json b/components/logo/element.style-dictionary.json
@@ -0,0 +1,30 @@
+{
+  "utrecht": {
+    "logo": {
+      "decoration-1": {
+        "color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        }
+      },
+      "decoration-2": {
+        "color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        }
+      },
+      "decoration-3": {
+        "color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/components/logo/stencil.stories.mdx b/components/logo/stencil.stories.mdx
@@ -0,0 +1,34 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+
+<!-- Import Docs -->
+
+import README from "./README.md";
+
+export const Template = () => `<utrecht-logo></utrecht-logo>`;
+
+<Meta
+  title="Web Component/Logo Gemeente Utrecht"
+  argTypes={{}}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+    notes: {
+      UX: README,
+    },
+  }}
+/>
+
+# Logo Gemeente Utrecht
+
+<Canvas>
+  <Story name="Logo">{Template.bind({})}</Story>
+</Canvas>
diff --git a/components/logo/stencil.tsx b/components/logo/stencil.tsx
diff --git a/components/logo/stories.mdx b/components/logo/stories.mdx
diff --git a/packages/web-component-library-angular/src/index.module.ts b/packages/web-component-library-angular/src/index.module.ts
@@ -20,6 +20,7 @@ import {
   UtrechtIconLinkedin,
   UtrechtIconTwitter,
   UtrechtIconWhatsapp,
+  UtrechtLogo,
   UtrechtPageFooter,
   UtrechtPagination,
   UtrechtParagraph,
@@ -50,6 +51,7 @@ const components = [
   UtrechtIconLinkedin,
   UtrechtIconTwitter,
   UtrechtIconWhatsapp,
+  UtrechtLogo,
   UtrechtPageFooter,
   UtrechtPagination,
   UtrechtParagraph,

diff --git a/proprietary/design-tokens/src/component/utrecht/logo/block.style-dictionary.json b/proprietary/design-tokens/src/component/utrecht/logo/block.style-dictionary.json
@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "logo": {
+      "max-height": { "value": "58.97px" },
+      "max-width": { "value": "110.57px" }
+    }
+  }
+}