feat(core): update Notifications to latest design

libs/core/notification/directives/notification-footer-content.directive.ts

@@ -1,11 +1,10 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive } from '@angular/core';
 
 @Directive({
     selector: '[fdNotificationFooterContent], [fd-notification-footer-content]',
-    standalone: true
+    standalone: true,
+    host: {
+        class: 'fd-notification__footer-content'
+    }
 })
-export class NotificationFooterContentDirective {
-    /** @hidden */
-    @HostBinding('class.fd-notification__footer-content')
-    fdNotificationTitleClass = true;
-}
+export class NotificationFooterContentDirective {}

libs/core/notification/directives/notification-group-growing-item-title.directive.spec.ts

@@ -0,0 +1,36 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NotificationModule } from '../notification.module';
+
+@Component({
+    template: `<span #directiveElement fd-notification-group-growing-item-title>Notification Group Growing Item Title Test</span> `
+})
+class TestComponent {
+    @ViewChild('directiveElement')
+    ref: ElementRef;
+}
+describe('NotificationGroupGrowingItemTitleDirective', () => {
+    let component: TestComponent;
+    let fixture: ComponentFixture<TestComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [TestComponent],
+            imports: [NotificationModule]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should assign class', () => {
+        expect(component.ref.nativeElement.className).toBe('fd-notification-group__growing-item-title');
+    });
+});

libs/core/notification/directives/notification-group-growing-item-title.directive.ts

@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+    selector: '[fdNotificationGroupGrowingItemTitle], [fd-notification-group-growing-item-title]',
+    standalone: true,
+    host: {
+        class: 'fd-notification-group__growing-item-title'
+    }
+})
+export class NotificationGroupGrowingItemTitleDirective {}

libs/core/notification/directives/notification-group-header-title.directive.spec.ts

@@ -0,0 +1,44 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NotificationModule } from '../notification.module';
+
+@Component({
+    template: `<span #directiveElement fd-notification-group-header-title>Notification Group Header Title Test</span> `
+})
+class TestComponent {
+    @ViewChild('directiveElement')
+    ref: ElementRef;
+}
+describe('NotificationGroupHeaderTitleDirective', () => {
+    let component: TestComponent;
+    let fixture: ComponentFixture<TestComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [TestComponent],
+            imports: [NotificationModule]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should assign class', () => {
+        expect(component.ref.nativeElement.className).toBe('fd-notification-group__header-title');
+    });
+
+    it('should assign default role', () => {
+        expect(component.ref.nativeElement.getAttribute('role')).toBe('heading');
+    });
+
+    it('should assign default aria level', () => {
+        expect(component.ref.nativeElement.getAttribute('aria-level')).toBe('3');
+    });
+});

libs/core/notification/directives/notification-group-header-title.directive.ts

@@ -0,0 +1,35 @@
+import { Directive, input } from '@angular/core';
+import { FD_NOTIFICATION_GROUP_HEADER_TITLE } from '../token';
+
+let notificationGroupHeaderTitleCounter = 0;
+
+@Directive({
+    selector: '[fdNotificationGroupHeaderTitle], [fd-notification-group-header-title]',
+    standalone: true,
+    host: {
+        class: 'fd-notification-group__header-title',
+        role: 'heading',
+        '[attr.aria-level]': 'ariaLevel()',
+        '[attr.id]': 'id()'
+    },
+    providers: [
+        {
+            provide: FD_NOTIFICATION_GROUP_HEADER_TITLE,
+            useExisting: NotificationGroupHeaderTitleDirective
+        }
+    ]
+})
+export class NotificationGroupHeaderTitleDirective {
+    /**
+     * aria-level for the title
+     * a numeric value from 1 to 6
+     * default value is 3
+     */
+    ariaLevel = input<1 | 2 | 3 | 4 | 5 | 6>(3);
+
+    /**
+     * id for the notification group header title
+     * if not set, a default value is provided
+     */
+    id = input('fd-notification-group-header-title-' + ++notificationGroupHeaderTitleCounter);
+}

libs/core/notification/directives/notification-list.directive.spec.ts

@@ -0,0 +1,44 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NotificationModule } from '../notification.module';
+
+@Component({
+    template: `<div #directiveElement fd-notification-list>Notification List Test</div> `
+})
+class TestComponent {
+    @ViewChild('directiveElement')
+    ref: ElementRef;
+}
+describe('NotificationListDirective', () => {
+    let component: TestComponent;
+    let fixture: ComponentFixture<TestComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [TestComponent],
+            imports: [NotificationModule]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should assign class', () => {
+        expect(component.ref.nativeElement.className).toBe('fd-notification-list');
+    });
+
+    it('should assign default role', () => {
+        expect(component.ref.nativeElement.getAttribute('role')).toBe('list');
+    });
+
+    it('should assign default aria lebel', () => {
+        expect(component.ref.nativeElement.getAttribute('aria-label')).toBe('Notifications');
+    });
+});

libs/core/notification/directives/notification-list.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, input } from '@angular/core';
+
+@Directive({
+    selector: '[fdNotificationList], [fd-notification-list]',
+    standalone: true,
+    host: {
+        class: 'fd-notification-list',
+        role: 'list',
+        '[attr.aria-label]': 'ariaLabel()'
+    }
+})
+export class NotificationListDirective {
+    /**
+     * aria-label attribute for the element
+     * Default is set to 'Notifications'
+     */
+    ariaLabel = input('Notifications');
+}

libs/core/notification/directives/notification-message-strip-container.directive.spec.ts

@@ -0,0 +1,36 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NotificationModule } from '../notification.module';
+
+@Component({
+    template: `<div #directiveElement fd-notification-message-strip-container>Notification Message Strip Container Test</div> `
+})
+class TestComponent {
+    @ViewChild('directiveElement')
+    ref: ElementRef;
+}
+describe('NotificationMessageStripContainerDirective', () => {
+    let component: TestComponent;
+    let fixture: ComponentFixture<TestComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [TestComponent],
+            imports: [NotificationModule]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should assign class', () => {
+        expect(component.ref.nativeElement.className).toBe('fd-notification__message-strip-container');
+    });
+});

libs/core/notification/directives/notification-message-strip-container.directive.ts

@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+    selector: '[fdNotificationMessageStripContainer], [fd-notification-message-strip-container]',
+    standalone: true,
+    host: {
+        class: 'fd-notification__message-strip-container'
+    }
+})
+export class NotificationMessageStripContainerDirective {}

libs/core/notification/directives/notification-limit-description.directive.spec.ts → libs/core/notification/directives/notification-message-strip.directive.spec.ts

@@ -3,13 +3,13 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NotificationModule } from '../notification.module';
 
 @Component({
-    template: `<p #directiveElement fd-notification-limit-description>Notification Limit Description Test</p> `
+    template: `<div #directiveElement fd-notification-message-strip>Notification Message Strip Test</div> `
 })
 class TestComponent {
     @ViewChild('directiveElement')
     ref: ElementRef;
 }
-describe('NotificationLimitDescriptionDirective', () => {
+describe('NotificationMessageStripDirective', () => {
     let component: TestComponent;
     let fixture: ComponentFixture<TestComponent>;
 
@@ -31,6 +31,6 @@ describe('NotificationLimitDescriptionDirective', () => {
     });
 
     it('should assign class', () => {
-        expect(component.ref.nativeElement.className).toBe('fd-notification__limit--description');
+        expect(component.ref.nativeElement.className).toBe('fd-notification-message-strip');
     });
 });