docs(#3746): Add notification panel documentation page

apps/prs/angular/src/routes/docs/work-side-notification-panel/work-side-notification-panel.component.html

@@ -0,0 +1,132 @@
+<h2>Notification panel</h2>
+
+<h3>Basic notification panel</h3>
+<goab-work-side-menu
+  heading="My Application"
+  url="/"
+  (onNavigate)="handleNavigate($event)"
+  [primaryContent]="basicPrimaryTpl"
+  [secondaryContent]="basicSecondaryTpl">
+</goab-work-side-menu>
+
+<ng-template #basicPrimaryTpl>
+  <goab-work-side-menu-item icon="grid" label="Dashboard" url="/dashboard"></goab-work-side-menu-item>
+  <goab-work-side-menu-item icon="list" label="Cases" url="/cases"></goab-work-side-menu-item>
+</ng-template>
+
+<ng-template #basicSecondaryTpl>
+  <goab-work-side-menu-item
+    icon="notifications"
+    label="Notifications"
+    badge="2"
+    type="success"
+    [popoverContent]="basicNotificationsTpl">
+  </goab-work-side-menu-item>
+</ng-template>
+
+<ng-template #basicNotificationsTpl>
+  <goab-work-side-notification-panel
+    heading="Notifications"
+    activeTab="unread"
+    (onMarkAllRead)="handleMarkAllBasicNotificationsRead()"
+    (onViewAll)="handleViewAllBasicNotifications()">
+    @for (item of basicItems; track item.id) {
+      <goab-work-side-notification-item
+        [title]="item.title"
+        [description]="item.description"
+        [timestamp]="item.timestamp"
+        [type]="item.type"
+        [readStatus]="item.readStatus"
+        [priority]="item.priority"
+        (onClick)="handleClickBasicNotification(item.id)">
+      </goab-work-side-notification-item>
+    }
+  </goab-work-side-notification-panel>
+</ng-template>
+
+<h3>With urgent notifications</h3>
+<goab-work-side-menu
+  heading="My Application"
+  url="/"
+  (onNavigate)="handleNavigate($event)"
+  [primaryContent]="urgentPrimaryTpl"
+  [secondaryContent]="urgentSecondaryTpl">
+</goab-work-side-menu>
+
+<ng-template #urgentPrimaryTpl>
+  <goab-work-side-menu-item icon="grid" label="Dashboard" url="/dashboard"></goab-work-side-menu-item>
+  <goab-work-side-menu-item icon="list" label="Cases" url="/cases"></goab-work-side-menu-item>
+</ng-template>
+
+<ng-template #urgentSecondaryTpl>
+  <goab-work-side-menu-item
+    icon="notifications"
+    label="Notifications"
+    badge="2"
+    type="emergency"
+    [popoverContent]="urgentNotificationsTpl">
+  </goab-work-side-menu-item>
+</ng-template>
+
+<ng-template #urgentNotificationsTpl>
+  <goab-work-side-notification-panel
+    heading="Notifications"
+    activeTab="urgent"
+    (onMarkAllRead)="handleMarkAllUrgentNotificationsRead()"
+    (onViewAll)="handleViewAllUrgentNotifications()">
+    @for (item of urgentItems; track item.id) {
+      <goab-work-side-notification-item
+        [title]="item.title"
+        [description]="item.description"
+        [timestamp]="item.timestamp"
+        [type]="item.type"
+        [readStatus]="item.readStatus"
+        [priority]="item.priority"
+        (onClick)="handleClickUrgentNotification(item.id)">
+      </goab-work-side-notification-item>
+    }
+  </goab-work-side-notification-panel>
+</ng-template>
+
+<h3>Notification type badges</h3>
+<goab-work-side-menu
+  heading="My Application"
+  url="/"
+  (onNavigate)="handleNavigate($event)"
+  [primaryContent]="typesPrimaryTpl"
+  [secondaryContent]="typesSecondaryTpl">
+</goab-work-side-menu>
+
+<ng-template #typesPrimaryTpl>
+  <goab-work-side-menu-item icon="grid" label="Dashboard" url="/dashboard"></goab-work-side-menu-item>
+</ng-template>
+
+<ng-template #typesSecondaryTpl>
+  <goab-work-side-menu-item
+    icon="notifications"
+    label="Notifications"
+    badge="5"
+    type="success"
+    [popoverContent]="typesNotificationsTpl">
+  </goab-work-side-menu-item>
+</ng-template>
+
+<ng-template #typesNotificationsTpl>
+  <goab-work-side-notification-panel
+    heading="Notifications"
+    activeTab="all"
+    (onMarkAllRead)="handleMarkAllNotificationTypesRead()"
+    (onViewAll)="handleViewAllNotificationTypes()">
+    @for (item of allTypeItems; track item.id) {
+      <goab-work-side-notification-item
+        [title]="item.title"
+        [description]="item.description"
+        [timestamp]="item.timestamp"
+        [type]="item.type"
+        [readStatus]="item.readStatus"
+        [priority]="item.priority"
+        (onClick)="handleClickNotificationType(item.id)">
+      </goab-work-side-notification-item>
+    }
+  </goab-work-side-notification-panel>
+</ng-template>

apps/prs/angular/src/routes/docs/work-side-notification-panel/work-side-notification-panel.component.ts

@@ -0,0 +1,192 @@
+import { Component } from "@angular/core";
+import {
+  GoabWorkSideMenu,
+  GoabWorkSideMenuItem,
+  GoabWorkSideNotificationItem,
+  GoabWorkSideNotificationPanel,
+} from "@abgov/angular-components";
+import type {
+  GoabWorkSideNotificationItemType,
+  GoabWorkSideNotificationPriority,
+  GoabWorkSideNotificationReadStatus,
+} from "@abgov/ui-components-common";
+
+interface NotificationItem {
+  id: string;
+  title: string;
+  description: string;
+  timestamp: string;
+  type: GoabWorkSideNotificationItemType;
+  readStatus: GoabWorkSideNotificationReadStatus;
+  priority: GoabWorkSideNotificationPriority;
+}
+
+@Component({
+  standalone: true,
+  selector: "abgov-docs-work-side-notification-panel",
+  templateUrl: "./work-side-notification-panel.component.html",
+  imports: [
+    GoabWorkSideMenu,
+    GoabWorkSideMenuItem,
+    GoabWorkSideNotificationItem,
+    GoabWorkSideNotificationPanel,
+  ],
+})
+export class DocsWorkSideNotificationPanelComponent {
+  basicItems: NotificationItem[] = [
+    {
+      id: "1",
+      title: "New case assigned",
+      description: "Case #12345 has been assigned to you for review.",
+      timestamp: "2025-03-15T10:30:00Z",
+      type: "info",
+      readStatus: "unread",
+      priority: "normal",
+    },
+    {
+      id: "2",
+      title: "Document uploaded",
+      description: "A new document was uploaded to Case #12340.",
+      timestamp: "2025-03-15T09:15:00Z",
+      type: "default",
+      readStatus: "unread",
+      priority: "normal",
+    },
+    {
+      id: "3",
+      title: "Case resolved",
+      description: "Case #12330 has been marked as resolved.",
+      timestamp: "2025-03-14T16:00:00Z",
+      type: "success",
+      readStatus: "read",
+      priority: "normal",
+    },
+  ];
+
+  urgentItems: NotificationItem[] = [
+    {
+      id: "1",
+      title: "System maintenance",
+      description: "Scheduled maintenance tonight at 11 PM. All services will be unavailable.",
+      timestamp: "2025-03-15T14:00:00Z",
+      type: "critical",
+      readStatus: "unread",
+      priority: "urgent",
+    },
+    {
+      id: "2",
+      title: "Deadline approaching",
+      description: "Case #12345 response is due in 2 hours.",
+      timestamp: "2025-03-15T12:00:00Z",
+      type: "warning",
+      readStatus: "unread",
+      priority: "urgent",
+    },
+    {
+      id: "3",
+      title: "New comment on case",
+      description: "A team member commented on Case #12340.",
+      timestamp: "2025-03-15T11:00:00Z",
+      type: "default",
+      readStatus: "unread",
+      priority: "normal",
+    },
+  ];
+
+  allTypeItems: NotificationItem[] = [
+    {
+      id: "1",
+      title: "New comment on case",
+      description: "A team member commented on Case #12340.",
+      timestamp: "2025-03-15T10:00:00Z",
+      type: "default",
+      readStatus: "unread",
+      priority: "normal",
+    },
+    {
+      id: "2",
+      title: "Case #12345 assigned",
+      description: "Case #12345 has been assigned to you for review.",
+      timestamp: "2025-03-15T09:00:00Z",
+      type: "info",
+      readStatus: "unread",
+      priority: "normal",
+    },
+    {
+      id: "3",
+      title: "Case resolved",
+      description: "Case #12330 has been marked as resolved.",
+      timestamp: "2025-03-15T08:00:00Z",
+      type: "success",
+      readStatus: "unread",
+      priority: "normal",
+    },
+    {
+      id: "4",
+      title: "Deadline approaching",
+      description: "Case #12345 response is due in 2 hours.",
+      timestamp: "2025-03-15T07:00:00Z",
+      type: "warning",
+      readStatus: "unread",
+      priority: "normal",
+    },
+    {
+      id: "5",
+      title: "System maintenance",
+      description: "Scheduled maintenance tonight at 11 PM. All services will be unavailable.",
+      timestamp: "2025-03-15T06:00:00Z",
+      type: "critical",
+      readStatus: "unread",
+      priority: "normal",
+    },
+  ];
+
+  handleNavigate(path: string): void {
+    console.log("navigate", path);
+  }
+
+  // --- Basic notification panel handlers ---
+  handleMarkAllBasicNotificationsRead(): void {
+    this.basicItems = this.basicItems.map((item) => ({ ...item, readStatus: "read" }));
+  }
+
+  handleViewAllBasicNotifications(): void {
+    console.log("view all basic notifications");
+  }
+
+  handleClickBasicNotification(id: string): void {
+    this.basicItems = this.basicItems.map((item) =>
+      item.id === id ? { ...item, readStatus: "read" } : item,
+    );
+  }
+
+  // --- Urgent notification panel handlers ---
+  handleMarkAllUrgentNotificationsRead(): void {
+    this.urgentItems = this.urgentItems.map((item) => ({ ...item, readStatus: "read" }));
+  }
+
+  handleViewAllUrgentNotifications(): void {
+    console.log("view all urgent notifications");
+  }
+
+  handleClickUrgentNotification(id: string): void {
+    this.urgentItems = this.urgentItems.map((item) =>
+      item.id === id ? { ...item, readStatus: "read" } : item,
+    );
+  }
+
+  // --- Notification type badges panel handlers ---
+  handleMarkAllNotificationTypesRead(): void {
+    this.allTypeItems = this.allTypeItems.map((item) => ({ ...item, readStatus: "read" }));
+  }
+
+  handleViewAllNotificationTypes(): void {
+    console.log("view all notification types");
+  }
+
+  handleClickNotificationType(id: string): void {
+    this.allTypeItems = this.allTypeItems.map((item) =>
+      item.id === id ? { ...item, readStatus: "read" } : item,
+    );
+  }
+}

apps/prs/angular/src/routes/docs/work-side-notification-panel/work-side-notification-panel.route.json

@@ -0,0 +1,6 @@
+{
+  "type": "docs",
+  "id": "work-side-notification-panel",
+  "path": "docs/work-side-notification-panel",
+  "title": "Notification Panel"
+}

apps/prs/react/src/app/routes/docs/work-side-notification-panel.route.ts

@@ -0,0 +1,10 @@
+import { DocsWorkSideNotificationPanelRoute } from "../../../routes/docs/work-side-notification-panel/work-side-notification-panel";
+import type { PrRouteDefinition } from "../../route-manifest";
+
+export default {
+  type: "docs",
+  id: "work-side-notification-panel",
+  path: "docs/work-side-notification-panel",
+  title: "Notification Panel",
+  component: DocsWorkSideNotificationPanelRoute,
+} satisfies PrRouteDefinition;