feat(design): create notification component (#2484)

apps/design-land/src/app/app-routing.module.ts

@@ -31,6 +31,7 @@ export const appRoutes: Routes = [
   { path: 'media-gallery', loadChildren: () => import('./media-gallery/media-gallery.module').then(m => m.DesignLandMediaGalleryModule) },
   { path: 'menu', loadChildren: () => import('./menu/menu.module').then(m => m.DesignLandMenuModule) },
   { path: 'modal', loadChildren: () => import('./modal/modal.module').then(m => m.DesignLandModalModule) },
+  { path: 'notification', loadChildren: () => import('./notification/notification.module').then(m => m.DesignLandNotificationModule) },
   { path: 'paginator', loadChildren: () => import('./paginator/paginator.module').then(m => m.DesignLandPaginatorModule) },
   { path: 'progress-indicator', loadChildren: () => import('./progress-indicator/progress-indicator.module').then(m => m.DesignLandProgressIndicatorModule) },
   { path: 'qty-dropdown', loadChildren: () => import('./qty-dropdown/qty-dropdown.module').then(m => m.DesignLandQtyDropdownModule) },

apps/design-land/src/app/app.component.ts

@@ -32,6 +32,7 @@ import { MEDIA_GALLERY_EXAMPLES } from '@daffodil/design/media-gallery/examples'
 import { MENU_EXAMPLES } from '@daffodil/design/menu/examples';
 import { MODAL_EXAMPLES } from '@daffodil/design/modal/examples';
 import { NAVBAR_EXAMPLES } from '@daffodil/design/navbar/examples';
+import { NOTIFICATION_EXAMPLES } from '@daffodil/design/notification/examples';
 import { PAGINATOR_EXAMPLES } from '@daffodil/design/paginator/examples';
 import { QUANTITY_FIELD_EXAMPLES } from '@daffodil/design/quantity-field/examples';
 import { RADIO_EXAMPLES } from '@daffodil/design/radio/examples';
@@ -73,6 +74,7 @@ export class DesignLandAppComponent {
       ...MENU_EXAMPLES,
       ...MODAL_EXAMPLES,
       ...NAVBAR_EXAMPLES,
+      ...NOTIFICATION_EXAMPLES,
       ...QUANTITY_FIELD_EXAMPLES,
       ...LIST_EXAMPLES,
       ...PAGINATOR_EXAMPLES,

apps/design-land/src/app/notification/notification-routing-module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import {
+  Routes,
+  RouterModule,
+} from '@angular/router';
+
+import { DesignLandNotificationComponent } from './notification.component';
+
+export const notificationRoutes: Routes = [
+  { path: '', component: DesignLandNotificationComponent },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(notificationRoutes),
+  ],
+  exports: [
+    RouterModule,
+  ],
+})
+export class DesignLandNotificationRoutingModule {}

apps/design-land/src/app/notification/notification.component.html

@@ -0,0 +1,17 @@
+<h1 daffArticleTitle>Notification</h1>
+<p daffArticleLead>Notifications provides a way to display and communicate information related user actions within a page's content.</p>
+
+<h2>Overview</h2>
+<p>Notifications are used to display short messages that provide context in close promixity to a piece of content. They're often used to provide feedback or to notify users about an action they performed within a page. Notifications should not be used to display app-level alerts. Instead, use the <a routerLink="/toast">Toast</a> component.</p>
+
+<h3>Default notification</h3>
+<design-land-example-viewer-container example="default-notification"></design-land-example-viewer-container>
+
+<h3>Dismissable notification</h3>
+<design-land-example-viewer-container example="dismissable-notification"></design-land-example-viewer-container>
+
+<h3>Notification Statuses</h3>
+<design-land-example-viewer-container example="notification-status"></design-land-example-viewer-container>
+
+<h3>Notification Orientations</h3>
+<design-land-example-viewer-container example="notification-orientations"></design-land-example-viewer-container>

apps/design-land/src/app/notification/notification.component.spec.ts

@@ -0,0 +1,29 @@
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+
+import { DesignLandNotificationComponent } from './notification.component';
+
+describe('DesignLandNotificationComponent', () => {
+  let component: DesignLandNotificationComponent;
+  let fixture: ComponentFixture<DesignLandNotificationComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DesignLandNotificationComponent ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DesignLandNotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/design-land/src/app/notification/notification.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'design-land-notification',
+  templateUrl: './notification.component.html',
+  styleUrls: ['./notification.component.scss'],
+})
+export class DesignLandNotificationComponent {}

apps/design-land/src/app/notification/notification.module.ts

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { DaffArticleModule } from '@daffodil/design';
+import { DaffNotificationModule } from '@daffodil/design/notification';
+
+import { DesignLandExampleViewerModule } from '../core/code-preview/container/example-viewer.module';
+import { DesignLandNotificationRoutingModule } from './notification-routing-module';
+import { DesignLandNotificationComponent } from './notification.component';
+
+@NgModule({
+  declarations: [
+    DesignLandNotificationComponent,
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    DesignLandNotificationRoutingModule,
+    DesignLandExampleViewerModule,
+
+    DaffArticleModule,
+    DaffNotificationModule,
+  ],
+})
+export class DesignLandNotificationModule {
+
+}

apps/design-land/src/assets/nav.json

@@ -194,6 +194,13 @@
           "items": [],
           "data": {}
         },
+        {
+          "title": "Notification",
+          "url": "notification",
+          "id": "notification",
+          "items": [],
+          "data": {}
+        },
         {
           "title": "Media Gallery",
           "url": "media-gallery",

libs/design/notification/README.md

@@ -0,0 +1,23 @@
+# Notifications
+Notifications provides a way to display and communicate information for user actions or system updates. There are two main types of notifications — inline or toast.
+
+## Usage
+```
+<h4>Default Message Bar</h4>
+<daff-notification>
+  Default Message Bar
+</daff-notification>
+
+<h4>Message Bar Statuses</h4>
+<daff-notification status="warn">
+  Message Bar - Primary Color
+</daff-notification>
+
+<daff-notification status="error">
+  Message Bar - Secondary Color
+</daff-notification>
+
+<daff-notification status="success">
+  Message Bar - Secondary Color
+</daff-notification>
+```

libs/design/notification/examples/ng-package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/design/examples",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../../scss"]
+  }
+} 

libs/design/notification/examples/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "@daffodil/design/notification/examples"
+}

libs/design/notification/examples/src/default-notification/default-notification.component.html

@@ -0,0 +1,8 @@
+<daff-notification>
+	<fa-icon daffPrefix [icon]="faInfoCircle"></fa-icon>
+	<div daffNotificationTitle>Title</div>
+	<div daffNotificationSubtitle>This is the subtitle with information</div>
+	<div daffNotificationActions>
+		<button daff-button size="sm">Confirm</button>
+	</div>
+</daff-notification>

libs/design/notification/examples/src/default-notification/default-notification.component.ts

@@ -0,0 +1,21 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'default-notification',
+  templateUrl: './default-notification.component.html',
+  styles: [`
+    :host {
+      display: flex;
+      justify-content: center;
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DefaultNotificationComponent {
+  faInfoCircle = faInfoCircle;
+}

libs/design/notification/examples/src/default-notification/default-notification.module.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
+import { DaffButtonModule } from '@daffodil/design';
+import { DaffNotificationModule } from '@daffodil/design/notification';
+
+import { DefaultNotificationComponent } from './default-notification.component';
+
+@NgModule({
+  declarations: [
+    DefaultNotificationComponent,
+  ],
+  imports: [
+    CommonModule,
+    DaffNotificationModule,
+    FontAwesomeModule,
+    DaffButtonModule,
+  ],
+  exports: [
+    DefaultNotificationComponent,
+  ],
+})
+export class DefaultNotificationModule { }

libs/design/notification/examples/src/dismissable-notification/dismissable-notification.component.html

@@ -0,0 +1,5 @@
+<daff-notification dismissable="true">
+	<fa-icon daffPrefix [icon]="faInfoCircle"></fa-icon>
+	<div daffNotificationTitle>Title</div>
+	<div daffNotificationSubtitle>This is the subtitle with information</div>
+</daff-notification>

libs/design/notification/examples/src/dismissable-notification/dismissable-notification.component.ts

@@ -0,0 +1,21 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'dismissable-notification',
+  templateUrl: './dismissable-notification.component.html',
+  styles: [`
+    :host {
+      display: flex;
+      justify-content: center;
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DismissableNotificationComponent {
+  faInfoCircle = faInfoCircle;
+}

libs/design/notification/examples/src/dismissable-notification/dismissable-notification.module.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
+import { DaffButtonModule } from '@daffodil/design';
+import { DaffNotificationModule } from '@daffodil/design/notification';
+
+import { DismissableNotificationComponent } from './dismissable-notification.component';
+
+@NgModule({
+  declarations: [
+    DismissableNotificationComponent,
+  ],
+  imports: [
+    CommonModule,
+    DaffNotificationModule,
+    FontAwesomeModule,
+    DaffButtonModule,
+  ],
+  exports: [
+    DismissableNotificationComponent,
+  ],
+})
+export class DismissableNotificationModule { }

libs/design/notification/examples/src/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

libs/design/notification/examples/src/notification-orientations/notification-orientations.component.html

@@ -0,0 +1,13 @@
+<daff-notification [orientation]="orientationControl.value">
+	<fa-icon daffPrefix [icon]="faCheck" [fixedWidth]="true"></fa-icon>
+	<div daffNotificationTitle>Title</div>
+	<div daffNotificationSubtitle>This is the subtitle with information</div>
+	<div daffNotificationActions>
+		<button daff-button size="sm" color="theme-contrast">Confirm</button>
+	</div>
+</daff-notification>
+
+<select [formControl]="orientationControl">
+	<option value="vertical">Vertical</option>
+	<option value="horizontal">Horizontal</option>
+</select>

libs/design/notification/examples/src/notification-orientations/notification-orientations.component.scss

@@ -0,0 +1,6 @@
+:host {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+}

libs/design/notification/examples/src/notification-orientations/notification-orientations.component.ts

@@ -0,0 +1,25 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+import {
+  faCheck,
+  faExclamation,
+  faInfoCircle,
+} from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'notification-orientations',
+  templateUrl: './notification-orientations.component.html',
+  styleUrls: ['./notification-orientations.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NotificationOrientationsComponent {
+  faInfoCircle = faInfoCircle;
+  faCheck = faCheck;
+  faExclamation = faExclamation;
+
+  orientationControl: FormControl = new FormControl('vertical');
+}

libs/design/notification/examples/src/notification-orientations/notification-orientations.module.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
+import { DaffButtonModule } from '@daffodil/design';
+import { DaffNotificationModule } from '@daffodil/design/notification';
+
+import { NotificationOrientationsComponent } from './notification-orientations.component';
+
+@NgModule({
+  declarations: [
+    NotificationOrientationsComponent,
+  ],
+  imports: [
+    CommonModule,
+    DaffNotificationModule,
+    DaffButtonModule,
+    FontAwesomeModule,
+    ReactiveFormsModule,
+  ],
+  exports: [
+    NotificationOrientationsComponent,
+  ],
+})
+export class NotificationOrientationsModule { }

libs/design/notification/examples/src/notification-status/notification-status.component.html

@@ -0,0 +1,16 @@
+<daff-notification [status]="statusControl.value">
+	<fa-icon *ngIf="statusControl.value === 'success'" daffPrefix [icon]="faCheck" [fixedWidth]="true"></fa-icon>
+	<fa-icon *ngIf="statusControl.value === 'warn'" daffPrefix [icon]="faExclamation" [fixedWidth]="true"></fa-icon>
+	<fa-icon *ngIf="statusControl.value === 'error'" daffPrefix [icon]="faExclamation" [fixedWidth]="true"></fa-icon>
+	<div daffNotificationTitle>Title</div>
+	<div daffNotificationSubtitle>This is the subtitle with information</div>
+	<div daffNotificationActions>
+		<button daff-button size="sm" color="theme-contrast">Confirm</button>
+	</div>
+</daff-notification>
+
+<select [formControl]="statusControl">
+	<option value="success">Success</option>
+	<option value="warn">Warn</option>
+	<option value="error">Error</option>
+</select>