fix: introduce message strip and depricate alerts (#2258)

* fix: introduce message strip and depricate alerts

* add types to the doc

* add fixes related to PR review

* update package-lock.json

* update package-lock.json

* update package-lock

* add package.json and package-lock.json

* fix tests

* run all tests

Co-authored-by: Mike O'Donnell <mikerodonnell89@users.noreply.github.com>

apps/docs/src/app/core/api-files.ts

@@ -165,6 +165,9 @@ export const API_FILES = {
         'MenuTitleDirective',
         'MenuKeyboardService'
     ],
+    messageStrip: [
+        'MessageStripComponent'
+    ],
     dialog: [
         'DialogService',
         'DialogContainerComponent',

apps/docs/src/app/core/component-docs/alert/alert-docs.module.ts

@@ -10,7 +10,7 @@ import {AlertContentComponent} from './examples/alert-content.component';
 import {AlertInlineExampleComponent} from './examples/alert-inline-example.component';
 import {AlertWidthExampleComponent} from './examples/alert-width-example.component';
 import {AlertHeaderComponent} from './alert-header/alert-header.component';
-import { AlertModule, AlertService } from '@fundamental-ngx/core';
+import { AlertModule, AlertService, MessageStripModule } from '@fundamental-ngx/core';
 
 const routes: Routes = [
     {
@@ -27,7 +27,8 @@ const routes: Routes = [
     imports: [
         RouterModule.forChild(routes),
         SharedDocumentationModule,
-        AlertModule
+        AlertModule,
+        MessageStripModule
     ],
     exports: [RouterModule],
     declarations: [

apps/docs/src/app/core/component-docs/alert/alert-header/alert-header.component.html

@@ -1,4 +1,7 @@
 <header>Alert</header>
+<fd-message-strip [type]="'warning'">
+    DEPRECATED. Alert does not exist as a Fiori 3 component so it has been deprecated. The inline version successor of the alert is <a [routerLink]="'/core/message-strip'">Message Strip</a> component. There is no overlay version of Alert in Fiori 3.
+</fd-message-strip>
 <description>Alerts are used to display short messages that require user attention.</description>
 <import module="AlertModule"></import>
 

apps/docs/src/app/core/component-docs/message-strip/examples/message-strip-example.component.html

@@ -0,0 +1,15 @@
+<fd-message-strip [type]="'warning'">
+    A dismissible warning message strip.
+</fd-message-strip>
+<fd-message-strip [type]="'success'" [dismissible]="false" >
+    A non-dismissible success message strip.
+</fd-message-strip>
+<fd-message-strip [type]="'information'">
+    A dismissible information message strip.
+</fd-message-strip>
+<fd-message-strip [type]="'error'" [dismissible]="false">
+    A non-dismissible error message strip.
+</fd-message-strip>
+<fd-message-strip>
+    A dismissible normal message strip.
+</fd-message-strip>

apps/docs/src/app/core/component-docs/message-strip/examples/message-strip-example.component.scss

@@ -0,0 +1,6 @@
+fd-message-strip {
+    margin-bottom: 12px;
+}
+fd-message-strip:last-child {
+    margin: 0;
+}

apps/docs/src/app/core/component-docs/message-strip/examples/message-strip-example.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-message-strip-example',
+    templateUrl: './message-strip-example.component.html',
+    styleUrls: ['message-strip-example.component.scss']
+})
+export class MessageStripExampleComponent { }

apps/docs/src/app/core/component-docs/message-strip/examples/message-strip-noicon-example.component.html

@@ -0,0 +1,12 @@
+<fd-message-strip [type]="'warning'" [noIcon]="true">
+    A dismissible warning message strip.
+</fd-message-strip>
+<fd-message-strip [type]="'success'" [dismissible]="false" [noIcon]="true">
+    A non-dismissible success message strip.
+</fd-message-strip>
+<fd-message-strip [type]="'information'" [noIcon]="true">
+    A dismissible information message strip.
+</fd-message-strip>
+<fd-message-strip [type]="'error'" [dismissible]="false" [noIcon]="true">
+    A non-dismissible error message strip.
+</fd-message-strip>

apps/docs/src/app/core/component-docs/message-strip/examples/message-strip-noicon-example.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-message-strip-noicon-example',
+    templateUrl: './message-strip-noicon-example.component.html',
+    styleUrls: ['message-strip-example.component.scss']
+})
+export class MessageStripNoIconExampleComponent { }

apps/docs/src/app/core/component-docs/message-strip/examples/message-strip-width-example.component.html

@@ -0,0 +1,15 @@
+<fd-message-strip [type]="'warning'" [noIcon]="true" [minWidth]="'400px'">
+    A dismissible warning message strip.
+</fd-message-strip>
+<fd-message-strip [type]="'success'" [dismissible]="false" [width]="'70%'" >
+    A non-dismissible success message strip.
+</fd-message-strip>
+<fd-message-strip [type]="'information'"  [width]="'50%'">
+    A dismissible information message strip.
+</fd-message-strip>
+<fd-message-strip [type]="'error'" [dismissible]="false" [width]="'400px'">
+    A non-dismissible error message strip.
+</fd-message-strip>
+<fd-message-strip [width]="'300px'">
+    A dismissible normal message strip.
+</fd-message-strip>

apps/docs/src/app/core/component-docs/message-strip/examples/message-strip-width-example.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-message-strip-width-example',
+    templateUrl: './message-strip-width-example.component.html',
+    styleUrls: ['message-strip-example.component.scss']
+})
+export class MessageStripWidthExampleComponent { }

apps/docs/src/app/core/component-docs/message-strip/message-strip-docs.component.html

@@ -0,0 +1,42 @@
+<fd-docs-section-title [id]="'message-strip-basic'" [componentName]="'messageStrip'">
+    Message Strip Types
+</fd-docs-section-title>
+<description>A number of message strip types are available. They offer preset styling for different contextual situations. Can be one of 'warning', 'success', 'information', 'error' or normal (default). </description>
+<component-example>
+    <fd-message-strip-example></fd-message-strip-example>
+</component-example>
+<code-example [exampleFiles]="messageStripBasicExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title [id]="'message-strip-no-icon'" [componentName]="'messageStrip'">
+    Message Strips Without Icons
+</fd-docs-section-title>
+<description>The default message strip has no icon. Information, Success, Warning and Error message strips by default are rendered with icons. To remove them set the <code>[noIcon]</code> property to <code>true</code>. </description>
+<component-example>
+    <fd-message-strip-noicon-example></fd-message-strip-noicon-example>
+</component-example>
+<code-example [exampleFiles]="messageStripNoIconExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title [id]="'message-strip-width'" [componentName]="'messageStrip'">
+    Message Strips With Customizable Width
+</fd-docs-section-title>
+<description>The width of the message strip can be customized by the <code>[width]</code> and <code>[minWidth]</code> properties. </description>
+<component-example>
+    <fd-message-strip-width-example></fd-message-strip-width-example>
+</component-example>
+<code-example [exampleFiles]="messageStripWidthExample"></code-example>
+
+<playground [schema]="schema" [schemaInitialValues]="data" (onFormChanges)="onSchemaValues($event)">
+    <fd-message-strip
+        [type]="data.modifier.type"
+        [dismissible]="data.properties.dismissible"
+        [noIcon]="data.properties.noIcon"
+        [width]="data.properties.width"
+    >
+        {{data.properties.message}}
+    </fd-message-strip>
+</playground>
+

apps/docs/src/app/core/component-docs/message-strip/message-strip-docs.component.ts

@@ -0,0 +1,98 @@
+import { Component } from '@angular/core';
+import { Schema } from '../../../schema/models/schema.model';
+import { SchemaFactoryService } from '../../../schema/services/schema-factory/schema-factory.service';
+import * as messageStripExampleHtml from '!raw-loader!./examples/message-strip-example.component.html';
+import * as messageStripExampleScs from '!raw-loader!./examples/message-strip-example.component.scss';
+import * as messageStripNoIconExampleHtml from '!raw-loader!./examples/message-strip-noicon-example.component.html';
+import * as messageStripWidthExampleHtml from '!raw-loader!./examples/message-strip-width-example.component.html';
+
+import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file';
+
+@Component({
+    selector: 'app-message-strip',
+    templateUrl: './message-strip-docs.component.html',
+})
+export class MessageStripDocsComponent {
+    static schema: any = {
+        properties: {
+            properties: {
+                type: 'object',
+                properties: {
+                    dismissible: {
+                        type: 'boolean'
+                    },
+                    noIcon: {
+                        type: 'boolean'
+                    },
+                    width: {
+                        type: 'string'
+                    },
+                    message: {
+                        type: 'string'
+                    }
+                }
+            },
+            modifier: {
+                type: 'object',
+                properties: {
+                    type: {
+                        type: 'string',
+                        enum: ['default', 'warning', 'error', 'success', 'information']
+                    }
+                }
+            }
+        },
+        type: 'object'
+    };
+
+    data: any = {
+        properties: {
+            dismissible: true,
+            noIcon: false,
+            width: '100%',
+            message: 'This is a message strip message.',
+        },
+        modifier: {
+            type: 'default'
+        }
+    };
+
+    messageStripBasicExample: ExampleFile[] = [
+        {
+            language: 'html',
+            scssFileCode: messageStripExampleScs,
+            fileName: 'message-strip-example',
+            code: messageStripExampleHtml,
+        },
+    ];
+
+    messageStripNoIconExample: ExampleFile[] = [
+        {
+            language: 'html',
+            scssFileCode: messageStripExampleScs,
+            fileName: 'message-strip-noicon-example',
+            code: messageStripNoIconExampleHtml,
+        },
+    ];
+
+    messageStripWidthExample: ExampleFile[] = [
+        {
+            language: 'html',
+            scssFileCode: messageStripExampleScs,
+            fileName: 'message-strip-width-example',
+            code: messageStripWidthExampleHtml,
+        },
+    ];
+
+    schema: Schema;
+
+    constructor(
+        private schemaFactory: SchemaFactoryService
+    ) {
+        this.schema = this.schemaFactory.getComponent('messageStrip');
+    }
+
+    onSchemaValues(data) {
+        this.data = data;
+    }
+}

apps/docs/src/app/core/component-docs/message-strip/message-strip-docs.module.ts

@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ApiComponent } from '../../../documentation/core-helpers/api/api.component';
+import { API_FILES } from '../../api-files';
+import { SharedDocumentationModule } from '../../../documentation/shared-documentation.module';
+import { MessageStripDocsComponent } from './message-strip-docs.component';
+import { MessageStripExampleComponent } from './examples/message-strip-example.component';
+import { MessageStripNoIconExampleComponent } from './examples/message-strip-noicon-example.component';
+import { MessageStripWidthExampleComponent } from './examples/message-strip-width-example.component';
+import { MessageStripHeaderComponent } from './message-strip-header/message-strip-header.component';
+import { MessageStripModule } from '@fundamental-ngx/core';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: MessageStripHeaderComponent,
+        children: [
+            { path: '', component: MessageStripDocsComponent },
+            { path: 'api', component: ApiComponent, data: { content: API_FILES.messageStrip } }
+        ]
+    },
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes),
+        SharedDocumentationModule,
+        MessageStripModule
+    ],
+    exports: [RouterModule],
+    declarations: [
+        MessageStripHeaderComponent,
+        MessageStripDocsComponent,
+        MessageStripExampleComponent,
+        MessageStripNoIconExampleComponent,
+        MessageStripWidthExampleComponent
+    ]
+})
+export class MessageStripDocsModule {
+}

apps/docs/src/app/core/component-docs/message-strip/message-strip-header/message-strip-header.component.html

@@ -0,0 +1,6 @@
+<header>Message Strip</header>
+<description>Message Strips provide inline messages within the application that are color-coded to emphasize the level of urgency.</description>
+<import module="MessageStripModule"></import>
+
+<fd-header-tabs></fd-header-tabs>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/message-strip/message-strip-header/message-strip-header.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-message-strip-header',
+    templateUrl: './message-strip-header.component.html'
+})
+export class MessageStripHeaderComponent {
+
+}

apps/docs/src/app/core/component-docs/schemas.ts

@@ -16,6 +16,7 @@ import { TabsDocsComponent } from './tabs/tabs-docs.component';
 import { DropdownDocsComponent } from './dropdown/dropdown-docs.component';
 import { TreeDocsComponent } from './tree/tree-docs.component';
 import { DialogDocsComponent } from './dialog/dialog-docs.component';
+import { MessageStripDocsComponent } from './message-strip/message-strip-docs.component';
 import { TableDocsComponent } from './table/table-docs.component';
 import { TileDocsComponent } from './tile/tile-docs.component';
 import { TimeDocsComponent } from './time/time-docs.component';
@@ -32,6 +33,7 @@ export const COMPONENT_SCHEMAS: { [name: string]: Schema } = {
     inputGroup: InputGroupDocsComponent.schema,
     image: ImageDocsComponent.schema,
     pagination: PaginationDocsComponent.schema,
+    messageStrip: MessageStripDocsComponent.schema,
     dialog: DialogDocsComponent.schema,
     list: ListDocsComponent.schema,
     tabs: TabsDocsComponent.schema,

apps/docs/src/app/core/core-documentation.routes.ts

@@ -135,6 +135,10 @@ export const ROUTES: Routes = [
                 path: 'menu',
                 loadChildren: () => import('./component-docs/menu/menu-docs.module').then(m => m.MenuDocsModule)
             },
+            {
+                path: 'message-strip',
+                loadChildren: () => import('./component-docs/message-strip/message-strip-docs.module').then(m => m.MessageStripDocsModule)
+            },
             {
                 path: 'multi-input',
                 loadChildren: () => import('./component-docs/multi-input/multi-input-docs.module').then(m => m.MultiInputDocsModule)

apps/docs/src/app/core/documentation/core-documentation.component.ts

@@ -50,6 +50,7 @@ export class CoreDocumentationComponent implements OnInit {
         { url: 'core/localizationEditor', name: 'Localization Editor' },
         { url: 'core/mega-menu', name: 'Mega Menu' },
         { url: 'core/menu', name: 'Menu' },
+        { url: 'core/message-strip', name: 'Message Strip' },
         { url: 'core/multi-input', name: 'Multi Input' },
         { url: 'core/notification', name: 'Notification' },
         { url: 'core/object-status', name: 'Object Status' },

libs/core/src/index.ts

@@ -28,6 +28,7 @@ export * from './lib/menu/public_api';
 export * from './lib/mega-menu/public_api';
 export * from './lib/dialog/public_api';
 export * from './lib/multi-input/public_api';
+export * from './lib/message-strip/public_api';
 export * from './lib/nested-list/public_api';
 export * from './lib/notification/public_api';
 export * from './lib/pagination/public_api';

libs/core/src/lib/alert/alert-service/alert.service.ts

@@ -11,6 +11,10 @@ import { DynamicComponentService } from '../../utils/dynamic-component/dynamic-c
 import { AlertRef } from '../alert-utils/alert-ref';
 
 /**
+ * @deprecated
+ * Alert component is depricated since version 0.16.0
+ * Message Strip component should be used instead.
+ * 
  * Service used to dynamically generate an alert as an overlay.
  */
 @Injectable()
@@ -21,7 +25,7 @@ export class AlertService {
     /** @hidden */
     constructor(
         private dynamicComponentService: DynamicComponentService
-    ) {}
+    ) { }
 
     /**
      * Returns true if there are some alerts currently open. False otherwise.
@@ -47,15 +51,15 @@ export class AlertService {
         // If empty or undefined alert array, create container
         if (!this.alerts || this.alerts.length === 0 || !this.alertContainerRef) {
             this.alertContainerRef = this.dynamicComponentService.createDynamicComponent
-                < AlertContainerComponent > (content, AlertContainerComponent, alertConfig)
-            ;
+                <AlertContainerComponent>(content, AlertContainerComponent, alertConfig)
+                ;
         }
 
         // Define Container to put backdrop and component to container
         alertConfig.container = this.alertContainerRef.location.nativeElement;
 
         const component = this.dynamicComponentService.createDynamicComponent
-            <AlertComponent>(content, AlertComponent, alertConfig, { services: [service, alertConfig]});
+            <AlertComponent>(content, AlertComponent, alertConfig, { services: [service, alertConfig] });
 
         component.location.nativeElement.style.marginTop = '10px';