From eb08da22a241ca0191baafebb1c56b602ddd5b04 Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Tue, 29 Aug 2023 17:16:37 +0200 Subject: [PATCH 1/3] feat: logo image component --- packages/web-components-stencil/src/logo.scss | 47 ++++ .../src/logo.stencil.tsx | 227 ++++++++++++++++++ 2 files changed, 274 insertions(+) create mode 100644 packages/web-components-stencil/src/logo.scss create mode 100644 packages/web-components-stencil/src/logo.stencil.tsx diff --git a/packages/web-components-stencil/src/logo.scss b/packages/web-components-stencil/src/logo.scss new file mode 100644 index 000000000..7aced95fe --- /dev/null +++ b/packages/web-components-stencil/src/logo.scss @@ -0,0 +1,47 @@ +/** + * @license EUPL-1.2 + * Copyright (c) 2021 Community for NL Design System + */ + +.rhc-logo { + --_rhc-logo-emblem-inline-size: var(--rhc-logo-emblem-inline-size, calc(var(--rhc-logo-font-size, 1em) * 3.1415)); + + color: var(--rhc-logo-color); + display: grid; + font-family: var(--rhc-logo-font-family); + font-size: var(--rhc-logo-font-size, 1em); + gap: 0 var(--rhc-logo-gap, calc(var(--_rhc-logo-emblem-inline-size) / 4)); + grid-auto-rows: var(--_rhc-logo-emblem-inline-size); + grid-template-areas: ". emblem ." ". emblem wordmark"; + grid-template-columns: 1fr var(--_rhc-logo-emblem-inline-size) 1fr; + grid-template-rows: 1fr var(--_rhc-logo-emblem-inline-size); + line-height: var(--rhc-logo-line-height, 1); + min-block-size: calc(var(--rhc-logo-rows, 2) * var(--_rhc-logo-emblem-inline-size)); +} + +.rhc-logo__emblem { + align-items: center; + background-color: var(--rhc-logo-emblem-background-color); + block-size: 100%; + display: flex; + flex-direction: column; + grid-area: emblem; + justify-content: end; +} + +.rhc-logo__wordmark { + grid-area: wordmark; + max-inline-size: calc(210 / 14 * var(--rhc-logo-font-size, 1em)); +} + +.rhc-logo__subtitle { + font-style: italic; +} + +.rhc-logo__title, +.rhc-logo__subtitle { + /* reset margin of HTML

element */ + margin-block-end: 0; + margin-block-start: 0; + white-space: pre-line; +} diff --git a/packages/web-components-stencil/src/logo.stencil.tsx b/packages/web-components-stencil/src/logo.stencil.tsx new file mode 100644 index 000000000..357c86b42 --- /dev/null +++ b/packages/web-components-stencil/src/logo.stencil.tsx @@ -0,0 +1,227 @@ +/** + * Copyright (c) 2023 Rijksoverheid + * + * Er gelden auteursrechten op het logo en de huisstijl. De Rijksoverheid heeft + * het beeldmerk als hoogheidsteken gedeponeerd. Daardoor kan zij actie + * ondernemen tegen een (vermoedelijke) inbreuk op deze rechten. Het gaat dan + * om het gebruik en de toepassing van het ontwerp van het logo en de + * huisstijl. Waaronder ook de lettertypes RijksoverheidSerif en + * RijksoverheidSans. + */ + +import { Component, h, Prop } from '@stencil/core'; + +@Component({ + tag: 'rhc-logo', + styleUrl: 'logo.scss', + shadow: true, +}) +export class Logo { + @Prop() organisation?: string; + @Prop() subtitle?: string; + render() { + const { organisation, subtitle } = this; + return ( +

+ ); + } +} From 1f7ca051a18601ab2e963e1039df49ee78d279ca Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Thu, 28 Sep 2023 00:48:27 +0200 Subject: [PATCH 2/3] build: add Stencil dev server --- packages/web-components-stencil/.gitignore | 1 + .../web-components-stencil/src/index.html | 31 +++++++++++++++++++ .../web-components-stencil/stencil.config.ts | 5 +++ 3 files changed, 37 insertions(+) create mode 100644 packages/web-components-stencil/src/index.html diff --git a/packages/web-components-stencil/.gitignore b/packages/web-components-stencil/.gitignore index 2a5dc226f..42cd274f4 100644 --- a/packages/web-components-stencil/.gitignore +++ b/packages/web-components-stencil/.gitignore @@ -1,3 +1,4 @@ # Ignore generated files from Stencil dist/ loader/ +www/ \ No newline at end of file diff --git a/packages/web-components-stencil/src/index.html b/packages/web-components-stencil/src/index.html new file mode 100644 index 000000000..3934a2b3e --- /dev/null +++ b/packages/web-components-stencil/src/index.html @@ -0,0 +1,31 @@ + + + + + + Web Components example + + + + + + + + + Info + + diff --git a/packages/web-components-stencil/stencil.config.ts b/packages/web-components-stencil/stencil.config.ts index ad26c3290..01ecfddae 100644 --- a/packages/web-components-stencil/stencil.config.ts +++ b/packages/web-components-stencil/stencil.config.ts @@ -18,6 +18,11 @@ export const config: Config = { componentCorePackage: '@rijkshuisstijl-community/web-components-stencil', proxiesFile: '../web-components-react/src/components.ts', }), + { + type: 'www', + serviceWorker: null, // disable service workers + }, ], plugins: [sass()], + extras: { enableImportInjection: true }, }; From 0a4d6bd3e1d44fa5fd33b3c519afce3546ce9712 Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Thu, 28 Sep 2023 00:54:50 +0200 Subject: [PATCH 3/3] ci: disable HTML linting of doctype casing, Prettier does that --- .htmlvalidate.json | 1 + 1 file changed, 1 insertion(+) diff --git a/.htmlvalidate.json b/.htmlvalidate.json index 5280dc738..109c2d748 100644 --- a/.htmlvalidate.json +++ b/.htmlvalidate.json @@ -2,6 +2,7 @@ "root": true, "extends": ["html-validate:recommended"], "rules": { + "doctype-style": "off", "no-inline-style": "off", "void-style": "off" }