diff --git a/components/logo/README.md b/components/logo/README.md index bfeaf8c86e7..cd82ea0684a 100644 --- 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 new file mode 100644 index 00000000000..5a15d939518 --- /dev/null +++ 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 new file mode 100644 index 00000000000..2830a99c2e2 --- /dev/null +++ b/components/logo/block.style-dictionary.json @@ -0,0 +1,18 @@ +{ + "utrecht": { + "logo": { + "max-height": { + "css": { + "syntax": "", + "inherits": true + } + }, + "max-width": { + "css": { + "syntax": "", + "inherits": true + } + } + } + } +} diff --git a/components/logo/element.style-dictionary.json b/components/logo/element.style-dictionary.json new file mode 100644 index 00000000000..1b1578d92a0 --- /dev/null +++ b/components/logo/element.style-dictionary.json @@ -0,0 +1,30 @@ +{ + "utrecht": { + "logo": { + "decoration-1": { + "color": { + "css": { + "syntax": "", + "inherits": true + } + } + }, + "decoration-2": { + "color": { + "css": { + "syntax": "", + "inherits": true + } + } + }, + "decoration-3": { + "color": { + "css": { + "syntax": "", + "inherits": true + } + } + } + } + } +} diff --git a/components/logo/stencil.stories.mdx b/components/logo/stencil.stories.mdx new file mode 100644 index 00000000000..cb7a8109966 --- /dev/null +++ b/components/logo/stencil.stories.mdx @@ -0,0 +1,34 @@ + + +import { Meta, Story, Canvas } from "@storybook/addon-docs"; + + + +import README from "./README.md"; + +export const Template = () => ``; + + Template(args), + }, + status: { + type: "WORK IN PROGRESS", + }, + notes: { + UX: README, + }, + }} +/> + +# Logo Gemeente Utrecht + + + {Template.bind({})} + diff --git a/components/logo/stencil.tsx b/components/logo/stencil.tsx new file mode 100644 index 00000000000..3fb48b7bf15 --- /dev/null +++ b/components/logo/stencil.tsx @@ -0,0 +1,44 @@ +/** + * @license EUPL-1.2 + * Copyright (c) 2021 Gemeente Utrecht + */ + +import { Component, h } from "@stencil/core"; + +@Component({ + tag: "utrecht-logo", + styleUrl: "bem.css", + shadow: true, +}) +export class Logo { + render() { + return ( + + ); + } +} diff --git a/components/logo/stories.mdx b/components/logo/stories.mdx index 8b5c9220bac..6f0af04edb0 100644 --- a/components/logo/stories.mdx +++ b/components/logo/stories.mdx @@ -1,12 +1,6 @@ import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs"; - - - - import README from "./README.md"; -//import contentGuidelines from "./docs/content-guidelines.md"; -//import accessibilityGuidelines from "./docs/accessibility-guidelines.md"; export const Template = () => ` @@ -24,15 +18,11 @@ export const Template = () => ` }, notes: { UX: README, - // Content: contentGuidelines, - // Accessibility: accessibilityGuidelines }, }} /> -# Demo Implemented Logo Component - -To use the component as a web component, make sure the component is defined by including the components `element.js` file +# Logo Gemeente Utrecht {Template.bind({})} diff --git a/packages/web-component-library-angular/src/index.module.ts b/packages/web-component-library-angular/src/index.module.ts index 853092f2610..617f957b00e 100644 --- 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 new file mode 100644 index 00000000000..866d9ff6afd --- /dev/null +++ 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" } + } + } +}