Feature/update template

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';

packages/theme-wizard-app/package.json

@@ -49,7 +49,6 @@
     "@nl-design-system-candidate/code-css": "2.0.5",
     "@nl-design-system-candidate/color-sample-css": "1.0.4",
     "@nl-design-system-candidate/data-badge-css": "1.0.5",
-    "@nl-design-system-candidate/heading-css": "1.1.3",
     "@nl-design-system-candidate/link-css": "2.0.3",
     "@nl-design-system-candidate/paragraph-css": "2.1.3",
     "@nl-design-system-candidate/skip-link-css": "1.0.5",
@@ -79,7 +78,6 @@
     "zod": "4.3.4"
   },
   "devDependencies": {
-    "@nl-design-system-community/theme-wizard-templates": "workspace:*",
     "@types/dlv": "1.1.5",
     "@vitest/browser-playwright": "4.0.16",
     "@vitest/coverage-v8": "4.0.16",

packages/theme-wizard-app/src/components/app/app.ts

@@ -6,13 +6,13 @@ import '@fontsource/fira-sans/700.css';
 import '@fontsource/source-sans-pro/400.css';
 import '@fontsource/source-sans-pro/700.css';
 // <End TODO>
-import type { TemplateGroup } from '@nl-design-system-community/theme-wizard-templates';
 import { Router } from '@lit-labs/router';
 import { provide } from '@lit/context';
 import { ScrapedColorToken } from '@nl-design-system-community/css-scraper';
 import { defineCustomElements } from '@utrecht/web-component-library-stencil/loader/index.js';
 import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import type { TemplateGroup } from '../wizard-preview-picker';
 import { scrapedColorsContext } from '../../contexts/scraped-colors';
 import { themeContext } from '../../contexts/theme';
 import PersistentStorage from '../../lib/PersistentStorage';

packages/theme-wizard-app/src/components/wizard-index-page/index.ts

@@ -1,4 +1,3 @@
-import type { TemplateGroup } from '@nl-design-system-community/theme-wizard-templates';
 import type { PropertyValues } from 'lit';
 import { consume } from '@lit/context';
 import buttonLinkStyles from '@utrecht/link-button-css?inline';
@@ -12,23 +11,15 @@ import '../wizard-validation-issues-alert';
 import '../wizard-scraper';
 import type Theme from '../../lib/Theme';
 import type { WizardDownloadConfirmation } from '../wizard-download-confirmation';
+import type { TemplateGroup } from '../wizard-preview-picker';
 import { EVENT_NAMES } from '../../constants';
 import { themeContext } from '../../contexts/theme';
 import { t } from '../../i18n';
 import PersistentStorage from '../../lib/PersistentStorage';
 import { WizardColorscaleInput } from '../wizard-colorscale-input';
 import { PREVIEW_PICKER_NAME } from '../wizard-preview-picker';
 import { WizardTokenInput } from '../wizard-token-input';
-import '../template-action';
-import '../template-case-card';
-import '../template-color-swatch';
-import '../template-heading';
-import '../template-link-list';
-import '../template-link';
-import '../template-page-header';
-import '../template-paragraph';
-import '../template-side-nav';
-import '../template-skip-link';
+import '@nl-design-system-community/clippy-components/clippy-heading';
 import styles from './styles';
 
 const BODY_FONT_TOKEN_REF = 'basis.text.font-family.default';

packages/theme-wizard-app/src/components/wizard-preview-picker/index.test.ts

@@ -1,10 +1,8 @@
 import '.';
-import type { Category, TemplateGroup } from '@nl-design-system-community/theme-wizard-templates';
 import { beforeEach, describe, expect, it } from 'vitest';
-import type { WizardPreviewPicker } from '.';
+import type { TemplateGroup, WizardPreviewPicker } from '.';
 
 const tag = 'wizard-preview-picker';
-const category: Category = 'template';
 
 const templates = {
   name: 'My Environment',
@@ -18,7 +16,6 @@ const templates = {
       value: '/another-beautiful-thing/another-beautiful-page',
     },
   ],
-  type: category,
 };
 
 const mount = async () => {