fix: (Core) refactor Notifications to follow the latest design specs (#…

…5186) BREAKING CHANGE: Changes in markup Removed fd-notification-avatar directive The directive fd-notification-actions is now a component Removed fd-notification-text directive Removed fd-notification-description directive Removed fd-notification-metadata directive Removed the Notifications From Object option together with the NotificationDefault. Notifications Group is no longer a banner displayed in the right corner but displayed inside a popover triggered by clicking the bell icon in the shell bar at the top right of the screen.
SAP · May 10, 2021 · 5d2bf88 · 5d2bf88
1 parent 7c1fe53
commit 5d2bf88
Show file tree

Hide file tree

Showing 84 changed files with 1,479 additions and 1,709 deletions.
diff --git a/apps/docs/src/app/core/api-files.ts b/apps/docs/src/app/core/api-files.ts
@@ -185,22 +185,25 @@ export const API_FILES = {
         'MessageBoxFooterButtonComponent'
     ],
     notification: [
+        'NotificationTitleDirective',
+        'NotificationIndicatorDirective',
+        'NotificationParagraphDirective',
+        'NotificationFooterContentDirective',
+        'NotificationSeparatorDirective',
+        'NotificationLimitTitleDirective',
+        'NotificationLimitDescriptionDirective',
+        'NotificationActionsComponent',
+        'NotificationContentComponent',
+        'NotificationLimitComponent',
+        'NotificationGroupHeaderComponent',
+        'NotificationGroupComponent',
+        'NotificationGroupListComponent',
         'NotificationComponent',
         'NotificationHeaderComponent',
         'NotificationBodyComponent',
         'NotificationFooterComponent',
-        'NotificationServiceDirective',
-        'NotificationActionsDirective',
-        'NotificationAvatarDirective',
-        'NotificationContentDirective',
-        'NotificationDescriptionDirective',
-        'NotificationMetadataDirective',
-        'NotificationTextDirective',
-        'NotificationTitleDirective',
-        'DefaultNotificationComponent',
         'NotificationContainer',
         'NotificationConfig',
-        'NotificationDefault',
         'NotificationRef'
     ],
     objectIdentifier: ['ObjectIdentifierComponent'],

diff --git a/...tion/examples/component-as-content/notification-component-as-content-example.component.ts b/...tion/examples/component-as-content/notification-component-as-content-example.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { NotificationService } from '@fundamental-ngx/core';
-import { NotificationContentComponent } from './notification-content.component';
+import { NotificationExampleContentComponent } from './notification-content.component';
 
 @Component({
     selector: 'fd-notification-component-as-content-example',
@@ -15,18 +15,15 @@ export class NotificationComponentAsContentExampleComponent {
     constructor(private notificationService: NotificationService) {}
 
     open(): void {
-        const notificationService = this.notificationService.open(NotificationContentComponent, {
+        const notificationService = this.notificationService.open(NotificationExampleContentComponent, {
             data: {
                 title: 'Notification Title',
-                description: 'Notification Description',
-                metadata: 'Other Data',
-                moreInfo: 'More Info',
-                approve: 'Approve',
-                cancel: 'Cancel',
-                type: 'success'
+                paragraph: 'Notification Description',
+                firstFooterContent: 'SAP Analytics Cloud',
+                secondFooterContent: 'Just Now',
+                open: 'Open'
             },
-            size: 'm',
-            type: 'success'
+            width: '500px'
         });
 
         notificationService.afterClosed.subscribe(

diff --git a/...mponent-docs/notification/examples/component-as-content/notification-content.component.ts b/...mponent-docs/notification/examples/component-as-content/notification-content.component.ts
@@ -2,46 +2,48 @@ import { Component } from '@angular/core';
 import { NotificationRef } from '@fundamental-ngx/core';
 
 @Component({
-    selector: 'fd-notification-content',
+    selector: 'fd-notification-example-content',
     template: `
-        <fd-notification-header
-            (closeButtonClick)="notificationRef.dismiss('Close Icon Click')"
-            [type]="notificationRef.data.type"
-        >
-            <h3 fd-notification-title>{{ notificationRef.data.title }}</h3>
-        </fd-notification-header>
-        <fd-notification-body>
-            <div fd-notification-content>
-                <div fd-notification-avatar>
-                    <fd-avatar size="s" label="John Doe">JD</fd-avatar>
-                </div>
-                <div fd-notification-text>
-                    <div fd-notification-description>
-                        {{ notificationRef.data.description }}
-                    </div>
-                    <div fd-notification-metadata>
-                        {{ notificationRef.data.metadata }}
-                    </div>
-                </div>
-            </div>
+    <fd-message-strip type="success" [dismissible]="false" marginBottom="1rem">
+        A warning message strip.
+    </fd-message-strip>
+    <fd-notification-body>
+        <fd-notification-content>
+            <fd-notification-header>
+                <h2 fd-notification-title [unread]="true">
+                    {{ notificationRef.data.title }}
+                </h2>
+            </fd-notification-header>
+            <p fd-notification-paragraph>
+                {{ notificationRef.data.paragraph }}
+            </p>
             <fd-notification-footer>
-                <button fd-button [fdType]="'transparent'" [label]="notificationRef.data.moreInfo"></button>
-                <div fd-notification-actions>
-                    <button fd-button
-                            [fdType]="'positive'"
-                            [label]="notificationRef.data.approve"
-                            (click)="notificationRef.close('Approve Button Click')">
-                    </button>
-                    <button fd-button
-                            [fdType]="'negative'"
-                            [label]="notificationRef.data.cancel"
-                            (click)="notificationRef.dismiss('Cancel Button Click')">
-                    </button>
-                </div>
+                <span fd-notification-footer-content>
+                    {{ notificationRef.data.firstFooterContent }}
+                </span>
+                <span fd-notification-separator></span>
+                <span fd-notification-footer-content>
+                    {{ notificationRef.data.secondFooterContent }}
+                </span>
             </fd-notification-footer>
-        </fd-notification-body>
+        </fd-notification-content>
+        <fd-notification-actions>
+            <button 
+                fd-button 
+                [label]="notificationRef.data.open" 
+                [compact]="true" 
+                (click)="notificationRef.close('Open Button Clicked')"></button>
+            <button 
+                fd-button 
+                fdType="transparent" 
+                glyph="decline" 
+                title="close" 
+                [compact]="true" 
+                (click)="notificationRef.close('Close Button Click')"></button>
+        </fd-notification-actions>
+    </fd-notification-body>
     `
 })
-export class NotificationContentComponent {
+export class NotificationExampleContentComponent {
     constructor(public notificationRef: NotificationRef) {}
 }
diff --git a/...tification/examples/group-notification/notification-group-template-example.component.html b/...tification/examples/group-notification/notification-group-template-example.component.html
diff --git a/...notification/examples/group-notification/notification-group-template-example.component.ts b/...notification/examples/group-notification/notification-group-template-example.component.ts
diff --git a/...ocs/src/app/core/component-docs/notification/examples/notification-as-object.component.ts b/...ocs/src/app/core/component-docs/notification/examples/notification-as-object.component.ts