Feature/update template (#451)

~~We hebben een type Page en Category uit theme-wizard-templates, en die
werd geimporteerd in theme-wizard-app. Maar theme-wizard-app importeert
ook uit theme-wizard-templates, wat een build cycle error
veroorzaakte.~~

~~Dit heb ik tijdelijk opgelost door de type toe te voegen in
theme-wizard-app, waardoor theme-wizard-app niet meer afhankelijk is van
de build van theme-wizard-templates.~~

~~Vraag is of dit zo moet blijven, of een andere richting kiezen, voor
bijvoorbeeld een "shared" types package? Betekent wel dat je yet another
package hebt en de vraag is: hoevaak gaat dit nog voorkomen?~~

~~Dit heb ik gedaan, zodat de templates standalone kunnen draaien op de
theme-wizard-app url, dus lokaal bijvoorbeeld:
http://localhost:9492/templates/my-environment/overview~~

- [x] Typing van `TemplateGroup` in `wizard-preview-picker`
- [x] Componenten die in `theme-wizard-app` stonden en enkel in
`theme-wizard-templates` werden gebruikt, verplaatst naar
`theme-wizard-templates`
- [x] `template-heading `vervangen door `clippy-heading` en deze in
`packages/clippy-components` geplaatst
- [x] In deze PR (anders werd de huidige PR te groot), `template-link`
vervangen door `clippy-link` en deze in `packages/clippy-components`
geplaatst. [Clippy Link Webcomponent
PR](#454)

Author: ermenm

packages/clippy-components/package.json

@@ -47,6 +47,7 @@
     "@nl-design-system-candidate/button-css": "1.0.0",
     "@nl-design-system-candidate/code-css": "2.0.3",
     "@nl-design-system-candidate/color-sample-css": "1.0.4",
+    "@nl-design-system-candidate/heading-css": "1.1.3",
     "@utrecht/button-css": "3.0.1",
     "@utrecht/combobox-css": "2.0.1",
     "@utrecht/listbox-css": "2.0.1",

packages/clippy-components/src/clippy-code/index.ts

@@ -1,8 +1,7 @@
 import codeCss from '@nl-design-system-candidate/code-css/code.css?inline';
 import { LitElement, html, unsafeCSS } from 'lit';
-import { customElement } from 'lit/decorators.js';
+const tag = 'clippy-code';
 
-@customElement('clippy-code')
 export class ClippyCode extends LitElement {
   static override readonly styles = [unsafeCSS(codeCss)];
 
@@ -11,8 +10,13 @@ export class ClippyCode extends LitElement {
   }
 }
 
+const registry = globalThis.customElements;
+if (registry && !registry.get(tag)) {
+  registry.define(tag, ClippyCode);
+}
+
 declare global {
   interface HTMLElementTagNameMap {
-    'clippy-code': ClippyCode;
+    [tag]: ClippyCode;
   }
 }

packages/clippy-components/src/clippy-heading/README.md

@@ -0,0 +1,5 @@
+# `<clippy-heading>`
+
+Koptekst, met NL Design System heading styles.
+
+Gebruik `level` (standaard `1`) om het heading level (`h1`–`h6`) te kiezen.

packages/clippy-components/src/clippy-heading/index.test.ts

@@ -0,0 +1,66 @@
+
+import { beforeEach, describe, expect, it } from 'vitest';
+import './index';
+
+const tag = 'clippy-heading';
+
+describe(`<${tag}>`, () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('renders an h1 by default', async () => {
+    document.body.innerHTML = `<${tag}>Hello</${tag}>`;
+    const component = document.querySelector(tag) as unknown as {
+      updateComplete: Promise<void>;
+      shadowRoot?: ShadowRoot;
+    };
+    await component.updateComplete;
+
+    const h1 = component.shadowRoot?.querySelector('h1');
+    expect(h1).toBeTruthy();
+    expect(h1?.classList.contains('nl-heading')).toBe(true);
+    expect(h1?.classList.contains('nl-heading--level-1')).toBe(true);
+
+    const slot = h1?.querySelector('slot');
+    const slottedText =
+      slot instanceof HTMLSlotElement
+        ? slot
+            .assignedNodes({ flatten: true })
+            .map((n) => n.textContent ?? '')
+            .join('')
+        : '';
+    expect(slottedText).toContain('Hello');
+  });
+
+  it('renders the requested heading level when setting the level property', async () => {
+    document.body.innerHTML = `<${tag}>Hello</${tag}>`;
+    const component = document.querySelector(tag) as unknown as {
+      level: number;
+      updateComplete: Promise<void>;
+      shadowRoot?: ShadowRoot;
+    };
+
+    component.level = 2;
+    await component.updateComplete;
+
+    const h2 = component.shadowRoot?.querySelector('h2');
+    expect(h2).toBeTruthy();
+    expect(h2?.classList.contains('nl-heading')).toBe(true);
+    expect(h2?.classList.contains('nl-heading--level-2')).toBe(true);
+    expect(component.shadowRoot?.querySelector('h1')).toBeFalsy();
+  });
+
+  it('accepts the level attribute', async () => {
+    document.body.innerHTML = `<${tag} level="3">Hello</${tag}>`;
+    const component = document.querySelector(tag) as unknown as {
+      updateComplete: Promise<void>;
+      shadowRoot?: ShadowRoot;
+    };
+    await component.updateComplete;
+
+    const h3 = component.shadowRoot?.querySelector('h3');
+    expect(h3).toBeTruthy();
+    expect(h3?.classList.contains('nl-heading--level-3')).toBe(true);
+  });
+});

packages/clippy-components/src/clippy-heading/index.ts

@@ -0,0 +1,29 @@
+import headingCss from '@nl-design-system-candidate/heading-css/heading.css?inline';
+import { LitElement, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { html, unsafeStatic } from 'lit/static-html.js';
+
+const tag = 'clippy-heading';
+
+export class ClippyHeading extends LitElement {
+  @property({ type: Number }) level = 1;
+
+  static override readonly styles = [unsafeCSS(headingCss)];
+
+  override render() {
+    const safeLevel = Math.min(6, Math.max(1, Number(this.level) || 1));
+    const tag = unsafeStatic(`h${safeLevel}`);
+    return html`<${tag} class="nl-heading nl-heading--level-${safeLevel}"><slot></slot></${tag}>`;
+  }
+}
+
+const registry = globalThis.customElements;
+if (registry && !registry.get(tag)) {
+  registry.define(tag, ClippyHeading);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [tag]: ClippyHeading;
+  }
+}

packages/clippy-components/src/clippy-html-image/index.ts

@@ -1,10 +1,11 @@
 import { LitElement, html } from 'lit';
-import { customElement, query } from 'lit/decorators.js';
+import { query } from 'lit/decorators.js';
 import styles from './styles';
 
 let labelCounter = 0;
 
-@customElement('clippy-html-image')
+const tag = 'clippy-html-image';
+
 export class ClippyHtmlImage extends LitElement {
   static override readonly styles = [styles];
 
@@ -69,3 +70,8 @@ export class ClippyHtmlImage extends LitElement {
       <slot id=${this.labelId} name="label" @slotchange=${this.onLabelSlotChange}></slot>`;
   }
 }
+
+const registry = globalThis.customElements;
+if (registry && !registry.get(tag)) {
+  registry.define(tag, ClippyHtmlImage);
+}

packages/clippy-components/src/clippy-modal/index.ts

@@ -2,17 +2,18 @@ import amsDialogStyles from '@amsterdam/design-system-css/dist/dialog/dialog.css
 import amsVisuallyHiddenStyles from '@amsterdam/design-system-css/dist/visually-hidden/visually-hidden.css?inline';
 import utrechtButtonStyles from '@utrecht/button-css/dist/index.css?inline';
 import { LitElement, html, unsafeCSS, nothing } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { dialogStyles } from './styles';
 
 let dialogInstanceCounter = 0;
 
+const tag = 'clippy-modal';
+
 export const DIALOG_BUTTON_VALUES = {
   cancel: 'cancel',
   confirm: 'confirm',
 };
 
-@customElement('clippy-modal')
 export class ClippyModal extends LitElement {
   /**
    * Id of an element that describes the dialog, used for aria-describedby.
@@ -120,9 +121,9 @@ export class ClippyModal extends LitElement {
       >
         <form method="dialog" novalidate>
           <header class="ams-dialog__header">
-            <h1 id=${this.titleId}>
+            <clippy-heading level={1} id=${this.titleId}>
               <slot name="title">${this.title}</slot>
-            </h1>
+            </clippy-heading>
             <button class="utrecht-button utrecht-button--primary-action" type="button" @click=${this.onCloseClick}>
               <span class="ams-visually-hidden">Sluiten</span>
               <div style=" --utrecht-icon-size: 8px;">
@@ -155,3 +156,8 @@ export class ClippyModal extends LitElement {
     `;
   }
 }
+
+const registry = globalThis.customElements;
+if (registry && !registry.get(tag)) {
+  registry.define(tag, ClippyModal);
+}

packages/clippy-storybook/src/GemeenteVoorbeeldHome.stories.tsx

@@ -1,7 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import GemeenteVoorbeeldHome, {
-  type GemeenteVoorbeeldHomeProps,
-} from '@nl-design-system-community/theme-wizard-templates/src/pages/gemeentevoorbeeld/GemeenteVoorbeeldHome';
+import { GemeenteVoorbeeldHome, type GemeenteVoorbeeldHomeProps } from '@nl-design-system-community/theme-wizard-templates/react';
 import * as React from 'react';
 import '@utrecht/component-library-css';
 import documentation from '../docs/templates/gemeente-voorbeeld-documentatie.md?raw';

packages/clippy-storybook/src/web-components/clippy-heading.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import '@nl-design-system-community/clippy-components/clippy-heading';
+import readme from '@nl-design-system-community/clippy-components/src/clippy-heading/README.md?raw';
+import { html } from 'lit';
+import React from 'react';
+import { templateToHtml } from '../utils/templateToHtml';
+
+interface HeadingStoryArgs {
+  content: string;
+  level: number;
+}
+
+// Docs template builds a full <clippy-heading> element for the Source block.
+const createTemplate = (level: number, content: string) => html`<clippy-heading level="${level}">${content}</clippy-heading>`;
+
+const meta = {
+  id: 'clippy-heading',
+  args: {
+    content: 'Pagina titel',
+    level: 1,
+  },
+  argTypes: {
+    content: {
+      name: 'Content',
+      defaultValue: '',
+      description: 'Text',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    level: {
+      name: 'Level',
+      control: { max: 6, min: 1, step: 1, type: 'number' },
+      defaultValue: 1,
+      description: 'Heading level (1–6)',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  render: ({ content, level }: HeadingStoryArgs) => React.createElement('clippy-heading', { level }, content),
+  tags: ['autodocs'],
+  title: 'Clippy/Heading',
+} satisfies Meta<HeadingStoryArgs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Heading',
+  parameters: {
+    docs: {
+      source: {
+        transform: (_code: string, storyContext: { args: HeadingStoryArgs }) => {
+          const template = createTemplate(storyContext.args.level, storyContext.args.content);
+          return templateToHtml(template);
+        },
+        type: 'code',
+      },
+    },
+  },
+};

packages/theme-wizard-app/index.ts

@@ -1 +1 @@
-import './src/components/app/app';
+import './src/components/app/app';