Repository: nl-design-system/rijkshuisstijl-community
Pull request #1621: Add Navbar and NavbarItem
Author: login: JanAbe
Created: 2025-05-21T12:39:52Z | Merged: 2025-05-23T08:44:31Z



Diff:
diff --git a/.changeset/tender-colts-eat.md b/.changeset/tender-colts-eat.md
new file mode 100644
index 0000000000..29d72ddbef
--- /dev/null
+++ b/.changeset/tender-colts-eat.md
@@ -0,0 +1,6 @@
+---
+'@rijkshuisstijl-community/components-angular': minor
+'@rijkshuisstijl-community/storybook-angular': minor
+---
+
+Add the Navbar and NavbarItem Angular components
diff --git a/packages/components-angular/src/navbar-item/end-item.directive.spec.ts b/packages/components-angular/src/navbar-item/end-item.directive.spec.ts
new file mode 100644
index 0000000000..7e7ca2db22
--- /dev/null
+++ b/packages/components-angular/src/navbar-item/end-item.directive.spec.ts
@@ -0,0 +1,8 @@
+import { EndItemDirective } from './end-item.directive';
+
+describe('EndItemDirective', () => {
+  it('should create an instance', () => {
+    const directive = new EndItemDirective();
+    expect(directive).toBeTruthy();
+  });
+});
diff --git a/packages/components-angular/src/navbar-item/end-item.directive.ts b/packages/components-angular/src/navbar-item/end-item.directive.ts
new file mode 100644
index 0000000000..2edea0d7d9
--- /dev/null
+++ b/packages/components-angular/src/navbar-item/end-item.directive.ts
@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+
+/**
+ * Deze directive wordt gebruikt als "marker". Hiermee kunnen <li>'s gemarkeerd worden als endItem.
+ * Een endItem wordt aan het einde van de navbar geplaatst.
+ */
+@Directive({
+  selector: '[rhcEndItem]',
+})
+export class EndItemDirective {}
diff --git a/packages/components-angular/src/navbar-item/heading-item.directive.spec.ts b/packages/components-angular/src/navbar-item/heading-item.directive.spec.ts
new file mode 100644
index 0000000000..6ca520b91b
--- /dev/null
+++ b/packages/components-angular/src/navbar-item/heading-item.directive.spec.ts
@@ -0,0 +1,9 @@
+import { HeadingItemDirective } from './heading-item.directive';
+
+describe('HeadingItemDirective', () => {
+  it('should create an instance', () => {
+    const directive = new HeadingItemDirective();
+    expect(directive).toBeTruthy();
+    expect(directive.className).toBe('rhc-nav-bar__heading');
+  });
+});
diff --git a/packages/components-angular/src/navbar-item/heading-item.directive.ts b/packages/components-angular/src/navbar-item/heading-item.directive.ts
new file mode 100644
index 0000000000..18977146cd
--- /dev/null
+++ b/packages/components-angular/src/navbar-item/heading-item.directive.ts
@@ -0,0 +1,9 @@
+import { Directive, HostBinding } from '@angular/core';
+
+@Directive({
+  selector: '[rhcHeadingItem]',
+})
+export class HeadingItemDirective {
+  @HostBinding('class')
+  className = 'rhc-nav-bar__heading';
+}
diff --git a/packages/components-angular/src/navbar-item/navbar-item.component.html b/packages/components-angular/src/navbar-item/navbar-item.component.html
new file mode 100644
index 0000000000..a7036a236c
--- /dev/null
+++ b/packages/components-angular/src/navbar-item/navbar-item.component.html
@@ -0,0 +1,6 @@
+<a [href]="href" class="nl-link rhc-nav-bar__link">
+  <ng-content select="[icon]"></ng-content>
+  <span class="rhc-nav-bar__label">
+    <ng-content></ng-content>
+  </span>
+</a>
diff --git a/packages/components-angular/src/navbar-item/navbar-item.component.spec.ts b/packages/components-angular/src/navbar-item/navbar-item.component.spec.ts
new file mode 100644
index 0000000000..795ca45a9f
--- /dev/null
+++ b/packages/components-angular/src/navbar-item/navbar-item.component.spec.ts
@@ -0,0 +1,76 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NavbarItemComponent } from './navbar-item.component';
+import { IconComponent } from '../icon/icon.component';
+
+@Component({
+  template: `
+    <li rhc-navbar-item href="#">
+      <rhc-icon icon="home" />
+      Link
+    </li>
+  `,
+  imports: [NavbarItemComponent, IconComponent],
+})
+class NavbarItemWithIconComponent {}
+
+describe('NavbarItemWithIconComponent', () => {
+  let component: NavbarItemWithIconComponent;
+  let fixture: ComponentFixture<NavbarItemWithIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NavbarItemWithIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NavbarItemWithIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display an icon and text when provided', () => {
+    const icon = fixture.nativeElement.querySelector('rhc-icon');
+
+    expect(fixture.nativeElement).toHaveTextContent('Link');
+    expect(icon).toBeTruthy();
+  });
+});
+
+@Component({
+  template: ` <li rhc-navbar-item href="#">Link</li> `,
+  imports: [NavbarItemComponent],
+})
+class NavbarItemWithoutIconComponent {}
+
+describe('NavbarItemWithoutIconComponent', () => {
+  let component: NavbarItemWithoutIconComponent;
+  let fixture: ComponentFixture<NavbarItemWithoutIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NavbarItemWithoutIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NavbarItemWithoutIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should not display an icon', () => {
+    const icon = fixture.nativeElement.querySelector('rhc-icon');
+
+    expect(icon).toBeFalsy();
+  });
+
+  it('should display the correct text', () => {
+    expect(fixture.nativeElement).toHaveTextContent('Link');
+  });
+});
diff --git a/packages/components-angular/src/navbar-item/navbar-item.component.ts b/packages/components-angular/src/navbar-item/navbar-item.component.ts
new file mode 100644
index 0000000000..f028ee341b
--- /dev/null
+++ b/packages/components-angular/src/navbar-item/navbar-item.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'li[rhc-navbar-item]',
+  imports: [],
+  templateUrl: './navbar-item.component.html',
+  host: {
+    '[class.rhc-nav-bar__item]': 'true',
+  },
+})
+export class NavbarItemComponent {
+  @Input({ required: true }) href!: string;
+}
diff --git a/packages/components-angular/src/navbar/navbar.component.html b/packages/components-angular/src/navbar/navbar.component.html
new file mode 100644
index 0000000000..4496aa427a
--- /dev/null
+++ b/packages/components-angular/src/navbar/navbar.component.html
@@ -0,0 +1,14 @@
+<div class="rhc-nav-bar__container">
+  <nav class="rhc-nav-bar">
+    <ul class="rhc-nav-bar__list">
+      <ng-content select="[rhc-navbar-item][rhcHeadingItem]"></ng-content>
+      <ng-content select="[rhc-navbar-item]:not([rhcEndItem])"></ng-content>
+    </ul>
+    @if (showEndItems) {
+      <ul class="rhc-nav-bar__list rhc-nav-bar__list--end">
+        <ng-content select="[rhc-navbar-item][rhcEndItem]"></ng-content>
+      </ul>
+    }
+    <ng-content></ng-content>
+  </nav>
+</div>
diff --git a/packages/components-angular/src/navbar/navbar.component.spec.ts b/packages/components-angular/src/navbar/navbar.component.spec.ts
new file mode 100644
index 0000000000..25d171c893
--- /dev/null
+++ b/packages/components-angular/src/navbar/navbar.component.spec.ts
@@ -0,0 +1,86 @@
+import { Component, Input } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NavbarComponent } from './navbar.component';
+import { IconComponent } from '../icon/icon.component';
+import { EndItemDirective } from '../navbar-item/end-item.directive';
+import { HeadingItemDirective } from '../navbar-item/heading-item.directive';
+import { NavbarItemComponent } from '../navbar-item/navbar-item.component';
+
+@Component({
+  template: `
+    <rhc-navbar [showEndItems]="showEndItems">
+      <li rhc-navbar-item rhcHeadingItem href="#">Heading</li>
+      <li rhc-navbar-item href="#">
+        <rhc-icon icon="home" />
+        Home
+      </li>
+      <li rhc-navbar-item rhcEndItem href="#">
+        <rhc-icon icon="user" />
+        Account
+      </li>
+    </rhc-navbar>
+  `,
+  imports: [NavbarItemComponent, IconComponent, NavbarComponent, HeadingItemDirective, EndItemDirective],
+})
+class Navbar {
+  @Input() showEndItems?: boolean = false;
+}
+
+describe('NavbarComponent', () => {
+  let component: Navbar;
+  let fixture: ComponentFixture<Navbar>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Navbar],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Navbar);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should not display the endItems ul if showEndItems is false', () => {
+    const nav = fixture.nativeElement.querySelector('nav');
+    const uls = nav.querySelectorAll('ul');
+
+    expect(uls.length).toBe(1);
+    expect(uls[0].classList.contains('rhc-nav-bar__list--end')).toBeFalsy();
+  });
+
+  it('should display the endItems ul if showEndItems is true', () => {
+    component.showEndItems = true;
+    fixture.detectChanges();
+
+    const nav = fixture.nativeElement.querySelector('nav');
+    const uls = nav.querySelectorAll('ul');
+
+    expect(uls.length).toBe(2);
+    expect(uls[0].classList.contains('rhc-nav-bar__list--end')).toBeFalsy();
+    expect(uls[1].classList.contains('rhc-nav-bar__list--end')).toBeTruthy();
+  });
+
+  it('should only place the li with the rhcEndItem directive in the second ul', () => {
+    component.showEndItems = true;
+    fixture.detectChanges();
+
+    const nav = fixture.nativeElement.querySelector('nav');
+    const uls = nav.querySelectorAll('ul');
+
+    expect(uls.length).toBe(2);
+
+    const navbarItems = uls[0].querySelectorAll('li');
+    const navbarEndItems = uls[1].querySelectorAll('li');
+
+    expect(navbarItems.length).toBe(2);
+    expect(navbarEndItems.length).toBe(1);
+
+    expect(navbarItems[0]).toHaveTextContent('Heading');
+    expect(navbarItems[1]).toHaveTextContent('Home');
+    expect(navbarEndItems[0]).toHaveTextContent('Account');
+  });
+});
diff --git a/packages/components-angular/src/navbar/navbar.component.ts b/packages/components-angular/src/navbar/navbar.component.ts
new file mode 100644
index 0000000000..2e554419c4
--- /dev/null
+++ b/packages/components-angular/src/navbar/navbar.component.ts
@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'rhc-navbar',
+  imports: [],
+  templateUrl: './navbar.component.html',
+})
+export class NavbarComponent {
+  @Input() showEndItems?: boolean = false;
+}
diff --git a/packages/components-angular/src/public-api.ts b/packages/components-angular/src/public-api.ts
index 69198a1b48..f121f8dd9a 100644
--- a/packages/components-angular/src/public-api.ts
+++ b/packages/components-angular/src/public-api.ts
@@ -23,3 +23,7 @@ export * from './text-input/text-input.component';
 export * from './link-list-link/link-list-link.component';
 export * from './link-list/link-list.component';
 export * from './link-list-item/link-list-item.component';
+export * from './navbar/navbar.component';
+export * from './navbar-item/navbar-item.component';
+export * from './navbar-item/heading-item.directive';
+export * from './navbar-item/end-item.directive';
diff --git a/packages/storybook-angular/src/stories/navbar.stories.ts b/packages/storybook-angular/src/stories/navbar.stories.ts
new file mode 100644
index 0000000000..cf49dba753
--- /dev/null
+++ b/packages/storybook-angular/src/stories/navbar.stories.ts
@@ -0,0 +1,144 @@
+import {
+  EndItemDirective,
+  HeadingItemDirective,
+  IconComponent,
+  NavbarComponent,
+  NavbarItemComponent,
+} from '@rijkshuisstijl-community/components-angular';
+import { type Meta, moduleMetadata, type StoryObj } from '@storybook/angular';
+
+const meta: Meta<NavbarComponent> = {
+  title: 'Rijkshuisstijl-angular/Navbar',
+  id: 'rhc-navbar',
+  component: NavbarComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [NavbarItemComponent, HeadingItemDirective],
+    }),
+  ],
+  argTypes: {
+    showEndItems: {
+      type: 'boolean',
+    },
+  },
+  args: {
+    showEndItems: false,
+  },
+  render: ({ showEndItems }) => ({
+    template: `
+    <rhc-navbar [showEndItems]="showEndItems">
+        <li rhc-navbar-item href="#">
+            Link
+        </li>
+        <li rhc-navbar-item href="#">
+            Link
+        </li>
+        <li rhc-navbar-item href="#">
+            Link
+        </li>
+        <li rhc-navbar-item rhcEndItem href="#">
+            Link
+        </li>
+    </rhc-navbar>
+    `,
+    props: {
+      showEndItems,
+    },
+  }),
+};
+
+export default meta;
+
+export const Default: StoryObj<NavbarComponent> = {
+  name: 'Default',
+};
+
+export const WithIcons: StoryObj<NavbarComponent> = {
+  name: 'With Icons',
+  render: () => ({
+    template: `
+    <rhc-navbar>
+        <li rhc-navbar-item href="#">
+            <rhc-icon icon="home" />
+            Link
+        </li>
+        <li rhc-navbar-item href="#">
+            <rhc-icon icon="zoek" />
+            Link
+        </li>
+        <li rhc-navbar-item href="#">
+            <rhc-icon icon="gegevensuitwisseling" />
+            Link
+        </li>
+        <li rhc-navbar-item href="#">
+            <rhc-icon icon="user" />
+            Link
+        </li>
+    </rhc-navbar>
+    `,
+    moduleMetadata: {
+      imports: [IconComponent],
+    },
+  }),
+};
+
+export const WithHeading: StoryObj<NavbarComponent> = {
+  name: 'With Heading',
+  render: () => ({
+    template: `
+    <rhc-navbar>
+        <li rhc-navbar-item rhcHeadingItem href="#">
+            Heading
+        </li>
+        <li rhc-navbar-item href="#">
+            <rhc-icon icon="zoek" />
+            Link
+        </li>
+        <li rhc-navbar-item href="#">
+            <rhc-icon icon="gegevensuitwisseling" />
+            Link
+        </li>
+        <li rhc-navbar-item href="#">
+            <rhc-icon icon="user" />
+            Link
+        </li>
+    </rhc-navbar>
+    `,
+    moduleMetadata: {
+      imports: [IconComponent, HeadingItemDirective],
+    },
+  }),
+};
+
+export const WithEndItems: StoryObj<NavbarComponent> = {
+  name: 'With End Items',
+  render: () => ({
+    template: `
+    <rhc-navbar [showEndItems]="true">
+        <li rhc-navbar-item href="#">
+            <rhc-icon icon="home" />
+            Link
+        </li>
+        <li rhc-navbar-item href="#">
+            <rhc-icon icon="zoek" />
+            Link
+        </li>
+        <li rhc-navbar-item href="#">
+            <rhc-icon icon="gegevensuitwisseling" />
+            Link
+        </li>
+        <li rhc-navbar-item rhcEndItem href="#">
+            <rhc-icon icon="user" />
+            Link
+        </li>
+        <li rhc-navbar-item rhcEndItem href="#">
+            <rhc-icon icon="kalender" />
+            Link
+        </li>
+    </rhc-navbar>
+    `,
+    moduleMetadata: {
+      imports: [IconComponent, HeadingItemDirective, EndItemDirective],
+    },
+  }),
+};


Reviews:
user: login: sjimbonator
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T07:38:01Z
user: login: JanAbe
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T07:49:35Z
user: login: JanAbe
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T07:57:35Z
user: login: sjimbonator
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T08:32:21Z
user: login: sjimbonator
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T08:42:31Z

Review comments:
diff_hunk: @@ -0,0 +1,8 @@
+import { EndItemDirective } from './end-item.directive';
path: packages/components-angular/src/navbar-item/end-item.directive.spec.ts
user: login: sjimbonator
body: Er moet nog een changeset bij deze pr
created_at: 2025-05-23T07:28:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,6 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[rhcEndItem]',
path: packages/components-angular/src/navbar-item/end-item.directive.ts
user: login: sjimbonator
body: Wat doet deze Directive nu, want ik zie niet dat er bijv een class word toegevoegd o.i.d.
created_at: 2025-05-23T07:29:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'li[rhc-navbar-item]',
+  imports: [],
+  templateUrl: './navbar-item.component.html',
+  host: {
+    '[class.rhc-nav-bar__item]': 'true',
+  },
+})
+export class NavbarItemComponent {
+  @Input({ required: true }) id!: string;
path: packages/components-angular/src/navbar-item/navbar-item.component.ts
user: login: sjimbonator
body: Waar word deze id gebruikt?
created_at: 2025-05-23T07:36:33Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,6 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[rhcEndItem]',
path: packages/components-angular/src/navbar-item/end-item.directive.ts
user: login: JanAbe
body: Die `Directive` wordt gebruikt als "marker". Je gebruikt deze directive om een `<li>` te markeren als een endItem.

De reden waarom die nodig is, is omdat als ik er geen speciale directive voor aanmaak, Angular niet in staat lijkt te zijn om het attribuut rhcEndItem te herkennen. Hierdoor werd een `<li>` zoals `<li rhc-navbar-item rhcEndItem>` niet in de juiste `<ng-content>` geprojecteerd. Door er speciaal een directive voor aan te maken lukt het Angular wel.
created_at: 2025-05-23T07:49:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'li[rhc-navbar-item]',
+  imports: [],
+  templateUrl: './navbar-item.component.html',
+  host: {
+    '[class.rhc-nav-bar__item]': 'true',
+  },
+})
+export class NavbarItemComponent {
+  @Input({ required: true }) id!: string;
path: packages/components-angular/src/navbar-item/navbar-item.component.ts
user: login: JanAbe
body: ah mijn fout. Ik had hem overgenomen vanuit het React-component maar zie nu pas dat hij daar enkel gebruikt wordt in het `subList` gedeelte, wat de Angular-variant nog niet ondersteund.

Ik heb het weggehaald.
created_at: 2025-05-23T07:57:35Z
author_association: CONTRIBUTOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-05-21T12:39:56Z
body: ###  🦋  Changeset detected

Latest commit: 9dfe056b5591a4ec0fa4a7d8c5aca4548a9f4add

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 2 packages</summary>

  | Name                                         | Type  |
| -------------------------------------------- | ----- |
| @rijkshuisstijl-community/components-angular | Minor |
| @rijkshuisstijl-community/storybook-angular  | Minor |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/nl-design-system/rijkshuisstijl-community/new/task/navbar?filename=.changeset/sweet-cherries-ring.md&value=---%0A%22%40rijkshuisstijl-community%2Fcomponents-angular%22%3A%20patch%0A%22%40rijkshuisstijl-community%2Fstorybook-angular%22%3A%20patch%0A---%0A%0AAdd%20Navbar%20and%20NavbarItem%0A)


author_association: NONE
user: login: vercel[bot]
created_at: 2025-05-21T12:39:57Z
body: [vc]: #3lShf+h5XBZM2u+oUgof2saqHa/m2TO9LkUkA2TWads=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJyaWprc2h1aXNzdGlqbC1jb21tdW5pdHkiLCJyb290RGlyZWN0b3J5IjpudWxsLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbmwtZGVzaWduLXN5c3RlbS9yaWprc2h1aXNzdGlqbC1jb21tdW5pdHkvSFdOS3l1NnJpQllTdk44ZWl0WmIzbjNpZ2E5MSIsInByZXZpZXdVcmwiOiJyaWprc2h1aXNzdGlqbC1jb21tdW5pdHktZ2l0LXRhc2stbmF2YmFyLW5sLWRlc2lnbi1zeXN0ZW0udmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJyaWprc2h1aXNzdGlqbC1jb21tdW5pdHktZ2l0LXRhc2stbmF2YmFyLW5sLWRlc2lnbi1zeXN0ZW0udmVyY2VsLmFwcCJ9fSx7Im5hbWUiOiJyaWprc2h1aXNzdGlqbC1jb21tdW5pdHktdGVtcGxhdGVzIiwicm9vdERpcmVjdG9yeSI6bnVsbCwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL25sLWRlc2lnbi1zeXN0ZW0vcmlqa3NodWlzc3RpamwtY29tbXVuaXR5LXRlbXBsYXRlcy9Gamp0c2dmbW8yaDZNSnBUNUg1eW94amRxdGVQIiwicHJldmlld1VybCI6InJpamtzaHVpc3N0aWpsLWNvbW11bml0eS10ZW1wbGF0ZXMtZ2l0LTVkNmFjNy1ubC1kZXNpZ24tc3lzdGVtLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoicmlqa3NodWlzc3RpamwtY29tbXVuaXR5LXRlbXBsYXRlcy1naXQtNWQ2YWM3LW5sLWRlc2lnbi1zeXN0ZW0udmVyY2VsLmFwcCJ9fSx7Im5hbWUiOiJyaWprc2h1aXNzdGlqbC1jb21tdW5pdHktc3Rvcnlib29rLWFuZ3VsYXIiLCJyb290RGlyZWN0b3J5IjpudWxsLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbmwtZGVzaWduLXN5c3RlbS9yaWprc2h1aXNzdGlqbC1jb21tdW5pdHktc3Rvcnlib29rLWFuZ3VsYXIvMk5GclBRVTRqd0toY3JhWE4yZ3JDTER3Q2tLSyIsInByZXZpZXdVcmwiOiJyaWprc2h1aXNzdGlqbC1jb21tdW5pdHktc3Rvcnlib29rLWdpdC0zZmZkZGEtbmwtZGVzaWduLXN5c3RlbS52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6InJpamtzaHVpc3N0aWpsLWNvbW11bml0eS1zdG9yeWJvb2stZ2l0LTNmZmRkYS1ubC1kZXNpZ24tc3lzdGVtLnZlcmNlbC5hcHAifX1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **rijkshuisstijl-community** | ✅ Ready ([Inspect](https://vercel.com/nl-design-system/rijkshuisstijl-community/HWNKyu6riBYSvN8eitZb3n3iga91)) | [Visit Preview](https://rijkshuisstijl-community-git-task-navbar-nl-design-system.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/rijkshuisstijl-community-git-task-navbar-nl-design-system.vercel.app?via=pr-comment-feedback-link) | May 23, 2025 8:54am |
| **rijkshuisstijl-community-storybook-angular** | ✅ Ready ([Inspect](https://vercel.com/nl-design-system/rijkshuisstijl-community-storybook-angular/2NFrPQU4jwKhcraXN2grCLDwCkKK)) | [Visit Preview](https://rijkshuisstijl-community-storybook-git-3ffdda-nl-design-system.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/rijkshuisstijl-community-storybook-git-3ffdda-nl-design-system.vercel.app?via=pr-comment-feedback-link) | May 23, 2025 8:54am |
| **rijkshuisstijl-community-templates** | ✅ Ready ([Inspect](https://vercel.com/nl-design-system/rijkshuisstijl-community-templates/Fjjtsgfmo2h6MJpT5H5yoxjdqteP)) | [Visit Preview](https://rijkshuisstijl-community-templates-git-5d6ac7-nl-design-system.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/rijkshuisstijl-community-templates-git-5d6ac7-nl-design-system.vercel.app?via=pr-comment-feedback-link) | May 23, 2025 8:54am |




author_association: NONE
user: login: sonarqubecloud[bot]
created_at: 2025-05-23T08:36:22Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=nl-design-system_rijkshuisstijl-community&pullRequest=1621) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=nl-design-system_rijkshuisstijl-community&pullRequest=1621&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=nl-design-system_rijkshuisstijl-community&pullRequest=1621&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=nl-design-system_rijkshuisstijl-community&pullRequest=1621&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=nl-design-system_rijkshuisstijl-community&pullRequest=1621&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=nl-design-system_rijkshuisstijl-community&pullRequest=1621&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=nl-design-system_rijkshuisstijl-community&pullRequest=1621)


author_association: NONE