nl-design-system · Robbert · Apr 19, 2025
diff --git a/.changeset/clean-boats-float.md b/.changeset/clean-boats-float.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/web-component-library-stencil": minor
+---
+
+Add Top Task Navigation and Top Task Link web components.
diff --git a/packages/storybook-web-component/package.json b/packages/storybook-web-component/package.json
@@ -108,6 +108,8 @@
     "@utrecht/table-css": "workspace:*",
     "@utrecht/textarea-css": "workspace:*",
     "@utrecht/textbox-css": "workspace:*",
+    "@utrecht/top-task-nav-css": "workspace:*",
+    "@utrecht/top-task-link-css": "workspace:*",
     "@utrecht/url-data-css": "workspace:*",
     "@utrecht/web-component-library-angular": "workspace:*",
     "@utrecht/web-component-library-react": "workspace:*",

diff --git a/packages/storybook-web-component/src/TopTaskNav.stories.tsx b/packages/storybook-web-component/src/TopTaskNav.stories.tsx
@@ -0,0 +1,83 @@
+/* @license CC0-1.0 */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import tokens from '@utrecht/design-tokens/dist/index.json';
+import tokensDefinition from '@utrecht/top-task-link-css/src/tokens.json';
+import readme from '@utrecht/top-task-nav-css/README.md?raw';
+import {
+  UtrechtIconAfvalScheiden,
+  UtrechtIconMeldingKlacht,
+  UtrechtIconNummerbord,
+  UtrechtIconRijbewijs,
+  UtrechtIconVerhuizen,
+  UtrechtIconWerken,
+  UtrechtTopTaskLink,
+  UtrechtTopTaskNav,
+} from '@utrecht/web-component-library-react';
+import React from 'react';
+import { designTokenStory } from './design-token-story';
+
+const meta = {
+  title: 'Web Component/Top Task Navigation',
+  id: 'web-component-top-task-nav',
+  component: UtrechtTopTaskNav,
+  argTypes: {
+    children: {
+      description: 'Content of the Top Task Navigation',
+    },
+  },
+  args: {
+    children: [],
+  },
+  tags: ['autodocs'],
+  parameters: {
+    status: {
+      type: 'WORK IN PROGRESS',
+    },
+    tokensPrefix: 'utrecht-top-task-link',
+    tokens,
+    tokensDefinition,
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof UtrechtTopTaskNav>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: [
+      <UtrechtTopTaskLink href="https://example.com/subject-1">
+        <UtrechtIconRijbewijs slot="icon"></UtrechtIconRijbewijs>
+        Paspoort of ID-kaart aanvragen
+      </UtrechtTopTaskLink>,
+      <UtrechtTopTaskLink href="https://example.com/subject-2">
+        <UtrechtIconMeldingKlacht slot="icon"></UtrechtIconMeldingKlacht>
+        Melding/klacht openbare ruimte doorgeven
+      </UtrechtTopTaskLink>,
+      <UtrechtTopTaskLink href="https://example.com/subject-3">
+        <UtrechtIconVerhuizen slot="icon"></UtrechtIconVerhuizen>
+        Verhuizing doorgeven
+      </UtrechtTopTaskLink>,
+      <UtrechtTopTaskLink href="https://example.nl/" target="_new" external>
+        <UtrechtIconWerken slot="icon"></UtrechtIconWerken>
+        Werken bij de gemeente
+      </UtrechtTopTaskLink>,
+      <UtrechtTopTaskLink href="https://example.com/subject-5">
+        <UtrechtIconNummerbord slot="icon"></UtrechtIconNummerbord>
+        Parkeren: kentekenwijziging doorgeven
+      </UtrechtTopTaskLink>,
+      <UtrechtTopTaskLink href="https://example.nl/">
+        <UtrechtIconAfvalScheiden slot="icon"></UtrechtIconAfvalScheiden>
+        Afval
+      </UtrechtTopTaskLink>,
+    ],
+  },
+};
+
+export const DesignTokens = designTokenStory(meta);
diff --git a/packages/web-component-library-stencil/package.json b/packages/web-component-library-stencil/package.json
@@ -113,6 +113,8 @@
     "@utrecht/table-css": "workspace:*",
     "@utrecht/textarea-css": "workspace:*",
     "@utrecht/textbox-css": "workspace:*",
+    "@utrecht/top-task-link-css": "workspace:*",
+    "@utrecht/top-task-nav-css": "workspace:*",
     "@utrecht/unordered-list-css": "workspace:*",
     "@utrecht/url-data-css": "workspace:*",
     "chokidar-cli": "3.0.0",

diff --git a/packages/web-component-library-stencil/src/components.d.ts b/packages/web-component-library-stencil/src/components.d.ts
@@ -794,6 +794,13 @@ export namespace Components {
         "type": string;
         "value": string;
     }
+    interface UtrechtTopTaskLink {
+        "external"?: boolean;
+        "href": string;
+        "target"?: string;
+    }
+    interface UtrechtTopTaskNav {
+    }
     interface UtrechtUrlData {
     }
 }
@@ -2763,6 +2770,18 @@ declare global {
         prototype: HTMLUtrechtTextboxElement;
         new (): HTMLUtrechtTextboxElement;
     };
+    interface HTMLUtrechtTopTaskLinkElement extends Components.UtrechtTopTaskLink, HTMLStencilElement {
+    }
+    var HTMLUtrechtTopTaskLinkElement: {
+        prototype: HTMLUtrechtTopTaskLinkElement;
+        new (): HTMLUtrechtTopTaskLinkElement;
+    };
+    interface HTMLUtrechtTopTaskNavElement extends Components.UtrechtTopTaskNav, HTMLStencilElement {
+    }
+    var HTMLUtrechtTopTaskNavElement: {
+        prototype: HTMLUtrechtTopTaskNavElement;
+        new (): HTMLUtrechtTopTaskNavElement;
+    };
     interface HTMLUtrechtUrlDataElement extends Components.UtrechtUrlData, HTMLStencilElement {
     }
     var HTMLUtrechtUrlDataElement: {
@@ -3068,6 +3087,8 @@ declare global {
         "utrecht-table-row": HTMLUtrechtTableRowElement;
         "utrecht-textarea": HTMLUtrechtTextareaElement;
         "utrecht-textbox": HTMLUtrechtTextboxElement;
+        "utrecht-top-task-link": HTMLUtrechtTopTaskLinkElement;
+        "utrecht-top-task-nav": HTMLUtrechtTopTaskNavElement;
         "utrecht-url-data": HTMLUtrechtUrlDataElement;
     }
 }
@@ -3888,6 +3909,13 @@ declare namespace LocalJSX {
         "type"?: string;
         "value"?: string;
     }
+    interface UtrechtTopTaskLink {
+        "external"?: boolean;
+        "href"?: string;
+        "target"?: string;
+    }
+    interface UtrechtTopTaskNav {
+    }
     interface UtrechtUrlData {
     }
     interface IntrinsicElements {
@@ -4189,6 +4217,8 @@ declare namespace LocalJSX {
         "utrecht-table-row": UtrechtTableRow;
         "utrecht-textarea": UtrechtTextarea;
         "utrecht-textbox": UtrechtTextbox;
+        "utrecht-top-task-link": UtrechtTopTaskLink;
+        "utrecht-top-task-nav": UtrechtTopTaskNav;
         "utrecht-url-data": UtrechtUrlData;
     }
 }
@@ -4529,6 +4559,8 @@ declare module "@stencil/core" {
             "utrecht-table-row": LocalJSX.UtrechtTableRow & JSXBase.HTMLAttributes<HTMLUtrechtTableRowElement>;
             "utrecht-textarea": LocalJSX.UtrechtTextarea & JSXBase.HTMLAttributes<HTMLUtrechtTextareaElement>;
             "utrecht-textbox": LocalJSX.UtrechtTextbox & JSXBase.HTMLAttributes<HTMLUtrechtTextboxElement>;
+            "utrecht-top-task-link": LocalJSX.UtrechtTopTaskLink & JSXBase.HTMLAttributes<HTMLUtrechtTopTaskLinkElement>;
+            "utrecht-top-task-nav": LocalJSX.UtrechtTopTaskNav & JSXBase.HTMLAttributes<HTMLUtrechtTopTaskNavElement>;
             "utrecht-url-data": LocalJSX.UtrechtUrlData & JSXBase.HTMLAttributes<HTMLUtrechtUrlDataElement>;
         }
     }

diff --git a/packages/web-component-library-stencil/src/components/top-task-link.scss b/packages/web-component-library-stencil/src/components/top-task-link.scss
@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+@import "~@utrecht/top-task-link-css/src";
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/packages/web-component-library-stencil/src/components/top-task-link.tsx b/packages/web-component-library-stencil/src/components/top-task-link.tsx
@@ -0,0 +1,35 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+import { Component, h, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'utrecht-top-task-link',
+  styleUrl: 'top-task-link.scss',
+  shadow: true,
+})
+export class TopTaskLink {
+  @Prop() external?: boolean;
+  @Prop() href: string;
+  @Prop() target?: string;
+  render() {
+    return (
+      <a
+        class="utrecht-toptask-link"
+        href={this.href}
+        rel={this.external ? 'external noopener noreferrer' : undefined}
+        target={this.target}
+      >
+        <span class="utrecht-toptask-link__icon">
+          <slot name="icon"></slot>
+        </span>
+        <span class="utrecht-toptask-link__title">
+          <slot></slot>
+        </span>
+      </a>
+    );
+  }
+}
diff --git a/packages/web-component-library-stencil/src/components/top-task-nav.scss b/packages/web-component-library-stencil/src/components/top-task-nav.scss
@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+@import "~@utrecht/top-task-nav-css/src";
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/packages/web-component-library-stencil/src/components/top-task-nav.tsx b/packages/web-component-library-stencil/src/components/top-task-nav.tsx
@@ -0,0 +1,24 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'utrecht-top-task-nav',
+  styleUrl: 'top-task-nav.scss',
+  shadow: true,
+})
+export class TopTaskNav {
+  render() {
+    // TODO: Add accessible name for navigation landmark,
+    // using `aria-labelledby` and a heading.
+    return (
+      <nav class="utrecht-toptask-nav utrecht-toptask-nav--grid">
+        <slot></slot>
+      </nav>
+    );
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml