[AAE-10451] Stories for notification-history component (#7908)

* [AAE-10451] Stories for notification-history component

* minor refactorization and styling of other stories

* added sample component for notification generation

.storybook/preview.js

@@ -0,0 +1,4 @@
+export const parameters = {
+    docs: { inlineStories: true },
+    controls: { expanded: true }
+};

lib/core/.storybook/preview.js

@@ -1,4 +1,5 @@
+const rootPreview = require('../../../.storybook/preview');
+
 export const parameters = {
-  docs: { inlineStories: true },
+    ...rootPreview.preview
-  controls: { expanded: true }
 };

lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.stories.ts

@@ -39,12 +39,12 @@ export default {
     }
 } as Meta;
 
-export const CardViewArrayItem: Story<CardViewArrayItemComponent> = (
+export const cardViewArrayItem: Story<CardViewArrayItemComponent> = (
     args: CardViewArrayItemComponent
 ) => ({
     props: args
 });
-CardViewArrayItem.args = {
+cardViewArrayItem.args = {
     property: new CardViewArrayItemModel({
         label: 'CardView Array of items',
         value: of([
@@ -59,3 +59,4 @@ CardViewArrayItem.args = {
         noOfItemsToDisplay: 2
     })
 };
+cardViewArrayItem.parameters = { layout: 'centered' };

lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.stories.ts

@@ -46,12 +46,12 @@ export default {
     }
 } as Meta;
 
-export const CardViewBoolItem: Story<CardViewBoolItemComponent> = (
+export const cardViewBoolItem: Story<CardViewBoolItemComponent> = (
     args: CardViewBoolItemComponent
 ) => ({
     props: args
 });
-CardViewBoolItem.args = {
+cardViewBoolItem.args = {
     property: new CardViewBoolItemModel({
         label: 'Agree to all terms and conditions',
         value: true,
@@ -60,3 +60,4 @@ CardViewBoolItem.args = {
         editable: true
     })
 };
+cardViewBoolItem.parameters = { layout: 'centered' };

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts

@@ -24,9 +24,9 @@ import { CardViewUpdateService } from '../../services/card-view-update.service';
 import { CardViewDateItemComponent } from './card-view-dateitem.component';
 import { CoreTestingModule } from '../../../testing/core.testing.module';
 import { ClipboardService } from '../../../clipboard/clipboard.service';
-import { AppConfigService } from '@alfresco/adf-core';
 import { CardViewDatetimeItemModel } from '../../models/card-view-datetimeitem.model';
 import { TranslateModule } from '@ngx-translate/core';
+import { AppConfigService } from '@alfresco/adf-core';
 
 describe('CardViewDateItemComponent', () => {
 

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.stories.ts

@@ -78,9 +78,8 @@ const template: Story = (args) => ({
     props: args
 });
 
-export const SingleValuedDateItemCardView = template.bind({});
+export const singleValuedDateItemCardView = template.bind({});
-
+singleValuedDateItemCardView.args = {
-SingleValuedDateItemCardView.args = {
     property: new CardViewDateItemModel({
         label: 'CardView Date Item',
         value: [new Date(1983, 11, 24, 10, 0, 30)],
@@ -90,10 +89,10 @@ SingleValuedDateItemCardView.args = {
         editable: true
     })
 };
+singleValuedDateItemCardView.parameters = { layout: 'centered' };
 
-export const MultiValuedDateItemCardView = template.bind({});
+export const multiValuedDateItemCardView = template.bind({});
-
+multiValuedDateItemCardView.args = {
-MultiValuedDateItemCardView.args = {
     property: new CardViewDateItemModel({
         label: 'CardView Date Item - Multivalue (chips)',
         value: [new Date(1983, 11, 24, 10, 0, 30)],
@@ -104,10 +103,10 @@ MultiValuedDateItemCardView.args = {
         multivalued: true
     })
 };
+multiValuedDateItemCardView.parameters = { layout: 'centered' };
 
-export const SingleValuedDatetimeItemCardView = template.bind({});
+export const singleValuedDatetimeItemCardView = template.bind({});
-
+singleValuedDatetimeItemCardView.args = {
-SingleValuedDatetimeItemCardView.args = {
     property: new CardViewDatetimeItemModel({
         label: 'CardView Datetime Item',
         value: undefined,
@@ -117,10 +116,10 @@ SingleValuedDatetimeItemCardView.args = {
         editable: true
     })
 };
+singleValuedDatetimeItemCardView.parameters = { layout: 'centered' };
 
-export const MultiValuedDatetimeItemCardView = template.bind({});
+export const multiValuedDatetimeItemCardView = template.bind({});
-
+multiValuedDatetimeItemCardView.args = {
-MultiValuedDatetimeItemCardView.args = {
     property: new CardViewDatetimeItemModel({
         label: 'CardView Datetime Item - Multivalue (chips)',
         value: undefined,
@@ -131,3 +130,4 @@ MultiValuedDatetimeItemCardView.args = {
         multivalued: true
     })
 };
+multiValuedDatetimeItemCardView.parameters = { layout: 'centered' };

lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.stories.ts

@@ -47,11 +47,11 @@ export default {
     }
 } as Meta;
 
-export const CardViewKeyValuePairsItem: Story<CardViewKeyValuePairsItemComponent> =
+export const cardViewKeyValuePairsItem: Story<CardViewKeyValuePairsItemComponent> =
     (args: CardViewKeyValuePairsItemComponent) => ({
         props: args
     });
-CardViewKeyValuePairsItem.args = {
+cardViewKeyValuePairsItem.args = {
     property: new CardViewKeyValuePairsItemModel({
         label: 'CardView Key-Value Pairs Item',
         value: [

lib/core/src/lib/card-view/components/card-view-mapitem/card-view-mapitem.component.stories.ts

@@ -54,9 +54,8 @@ const template: Story<CardViewMapItemComponent> = (
     props: args
 });
 
-export const CardViewMapItem = template.bind({});
+export const cardViewMapItem = template.bind({});
-
+cardViewMapItem.args = {
-CardViewMapItem.args = {
     property: new CardViewMapItemModel({
         label: 'My map',
         value: new Map([['999', 'My Value']]),
@@ -64,10 +63,10 @@ CardViewMapItem.args = {
         default: 'default map value'
     })
 };
+cardViewMapItem.parameters = { layout: 'centered' };
 
-export const EmptyCardViewMapItem = template.bind({});
+export const emptyCardViewMapItem = template.bind({});
-
+emptyCardViewMapItem.args = {
-EmptyCardViewMapItem.args = {
     property: new CardViewMapItemModel({
         label: 'My map',
         value: [],
@@ -75,3 +74,4 @@ EmptyCardViewMapItem.args = {
         default: 'default map value'
     })
 };
+emptyCardViewMapItem.parameters = { layout: 'centered' };

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.stories.ts

@@ -83,9 +83,8 @@ const template: Story<CardViewSelectItemComponent> = (
     props: args
 });
 
-export const CardViewSelectItem = template.bind({});
+export const cardViewSelectItem = template.bind({});
-
+cardViewSelectItem.args = {
-CardViewSelectItem.args = {
     property: new CardViewSelectItemModel({
         label: 'CardView Select Item',
         value: 'one',
@@ -97,3 +96,4 @@ CardViewSelectItem.args = {
         editable: true
     })
 };
+cardViewSelectItem.parameters = { layout: 'centered' };

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts

@@ -85,9 +85,8 @@ const template: Story<CardViewTextItemComponent> = (
     props: args
 });
 
-export const ClickableCardViewTextItem = template.bind({});
+export const clickableCardViewTextItem = template.bind({});
-
+clickableCardViewTextItem.args = {
-ClickableCardViewTextItem.args = {
     property: new CardViewTextItemModel({
         label: 'CardView Text Item - Clickable template',
         value: 'click here',
@@ -98,10 +97,10 @@ ClickableCardViewTextItem.args = {
         icon: 'close'
     })
 };
+clickableCardViewTextItem.parameters = { layout: 'centered' };
 
-export const ChipsCardViewTextItem = template.bind({});
+export const chipsCardViewTextItem = template.bind({});
-
+chipsCardViewTextItem.args = {
-ChipsCardViewTextItem.args = {
     property: new CardViewTextItemModel({
         label: 'CardView Text Item - Chips template',
         value: [1, 2, 3, 4],
@@ -113,10 +112,10 @@ ChipsCardViewTextItem.args = {
         editable: true
     })
 };
+chipsCardViewTextItem.parameters = { layout: 'centered' };
 
-export const EmptyCardViewTextItem = template.bind({});
+export const emptyCardViewTextItem = template.bind({});
-
+emptyCardViewTextItem.args = {
-EmptyCardViewTextItem.args = {
     property: new CardViewTextItemModel({
         label: 'CardView Text Item - Empty template',
         value: undefined,
@@ -128,10 +127,10 @@ EmptyCardViewTextItem.args = {
     editable: false,
     displayEmpty: false
 };
+emptyCardViewTextItem.parameters = { layout: 'centered' };
 
-export const DefaultCardViewTextItem = template.bind({});
+export const defaultCardViewTextItem = template.bind({});
-
+defaultCardViewTextItem.args = {
-DefaultCardViewTextItem.args = {
     property: new CardViewTextItemModel({
         label: 'CardView Text Item - Default template',
         value: 'input here',
@@ -143,3 +142,4 @@ DefaultCardViewTextItem.args = {
         multiline: false
     })
 };
+defaultCardViewTextItem.parameters = { layout: 'centered' };

lib/core/src/lib/card-view/components/card-view/card-view.component.stories.ts

@@ -65,13 +65,15 @@ const template: Story<CardViewComponent> = (args: CardViewComponent) => ({
     props: args
 });
 
-export const defaultStory = template.bind({});
+export const defaultCardView = template.bind({});
-defaultStory.args = {
+defaultCardView.args = {
     properties: cardViewDataSource
 };
+defaultCardView.parameters = { layout: 'centered' };
 
-export const emptyStory = template.bind({});
+export const emptyCardView = template.bind({});
-emptyStory.args = {
+emptyCardView.args = {
     properties: cardViewUndefinedValues,
     editable: false
 };
+emptyCardView.parameters = { layout: 'centered' };

lib/core/src/lib/dialogs/download-zip/download-zip.dialog.stories.ts

@@ -84,3 +84,4 @@ export const downloadZIPDialog: Story<DownloadZipDialogStorybookComponent> = (
 ) => ({
     props: args
 });
+downloadZIPDialog.parameters = { layout: 'centered' };

lib/core/src/lib/dialogs/edit-json/edit-json.dialog.stories.ts

@@ -93,3 +93,4 @@ const template: Story<EditJsonDialogStorybookComponent> = (args: EditJsonDialogS
 });
 
 export const editJSONDialog = template.bind({});
+editJSONDialog.parameters = { layout: 'centered' };

lib/core/src/lib/icon/icon.component.stories.ts

@@ -64,8 +64,10 @@ export const defaultIcon = template.bind({});
 defaultIcon.args = {
     value: ''
 };
+defaultIcon.parameters = { layout: 'centered' };
 
 export const customIcon = template.bind({});
 customIcon.args = {
     value: 'cloud_download'
 };
+customIcon.parameters = { layout: 'centered' };

lib/core/src/lib/language-menu/language-menu.component.stories.ts

@@ -57,6 +57,7 @@ export default {
 const languageMenuComponentTemplate: Story<LanguageMenuComponent> = (args: LanguageMenuComponent) => ({
     props: args
 });
+languageMenuComponentTemplate.parameters = { layout: 'centered' };
 
 export const asMainMenu = languageMenuComponentTemplate.bind({});
 asMainMenu.decorators = [
@@ -71,6 +72,7 @@ asMainMenu.decorators = [
       </mat-menu>
     `)
 ];
+asMainMenu.parameters = { layout: 'centered' };
 
 export const asNestedMenu = languageMenuComponentTemplate.bind({});
 asNestedMenu.decorators = [
@@ -93,3 +95,4 @@ asNestedMenu.decorators = [
       </mat-menu>
     `)
 ];
+asNestedMenu.parameters = { layout: 'centered' };

lib/core/src/lib/language-menu/language-picker.component.stories.ts

@@ -52,6 +52,7 @@ const languagePickerComponentTemplate: Story<LanguagePickerComponent> = (args: L
 });
 
 export const primary = languagePickerComponentTemplate.bind({});
+primary.parameters = { layout: 'centered' };
 
 export const asNestedMenu = languagePickerComponentTemplate.bind({});
 asNestedMenu.decorators = [
@@ -64,3 +65,4 @@ asNestedMenu.decorators = [
       </mat-menu>
     `)
 ];
+asNestedMenu.parameters = { layout: 'centered' };

lib/core/src/lib/layout/components/header/header.component.stories.ts

@@ -129,8 +129,8 @@ const template: Story<SidenavLayoutModule> = (args: HeaderLayoutComponent) => ({
     props: args
 });
 
-export const Header = template.bind({});
+export const header = template.bind({});
-Header.args = {
+header.args = {
     title: 'Hello from Header!',
     tooltip: 'Default Tooltip text'
 };

lib/core/src/lib/layout/components/sidebar-action/sidebar-action.component.stories.ts

@@ -70,7 +70,7 @@ const template: Story<SidenavLayoutModule> = (args: SidebarActionMenuComponent)
     props: args
 });
 
-export const SidebarActionMenu = template.bind({});
+export const sidebarActionMenu = template.bind({});
-SidebarActionMenu.args = {
+sidebarActionMenu.args = {
     title: 'Hello from Sidebar Action Menu!'
 };

lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts

@@ -220,8 +220,8 @@ const template: Story<SidenavLayoutModule> = (args: SidenavLayoutComponent) => (
     </adf-sidenav-layout>`
 });
 
-export const SidenavLayout = template.bind({});
+export const sidenavLayout = template.bind({});
-SidenavLayout.args = {
+sidenavLayout.args = {
     sidenavMin: 85,
     sidenavMax: 250,
     stepOver: 600,

lib/core/src/lib/notifications/components/add-notification.stories.component.ts

@@ -0,0 +1,35 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { NotificationService } from '../services/notification.service';
+
+@Component({
+    selector: 'adf-add-notification-storybook',
+    template: `<button mat-raised-button (click)="showInfo()">Add Notification</button>`
+})
+export class AddNotificationStorybookComponent {
+
+    infoCounter: number = 1;
+
+    constructor(private notificationService: NotificationService) { }
+
+    showInfo() {
+        this.notificationService.showInfo(`Example notification ${this.infoCounter}`);
+        this.infoCounter++;
+    }
+}

lib/core/src/lib/notifications/components/notification-history.component.stories.ts

@@ -0,0 +1,86 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { CoreStoryModule } from '../../testing/core.story.module';
+import { NotificationHistoryComponent } from './notification-history.component';
+import { NotificationHistoryModule } from '../notification-history.module';
+
+export default {
+    component: NotificationHistoryComponent,
+    title: 'Core/Notification History/Notification History',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, NotificationHistoryModule]
+        })
+    ],
+    parameters: {
+        docs: {
+            description: {
+                component: `Lists notifications received in the current session. The notifications disappear from the list after refresh.`
+            }
+        }
+    },
+    argTypes: {
+        menuPositionX: {
+            control: 'inline-radio',
+            options: ['before', 'after'],
+            description: 'Custom choice for opening the menu at the bottom.',
+            defaultValue: 'after',
+            table: {
+                type: { summary: 'MenuPositionX' },
+                defaultValue: { summary: 'after' }
+            }
+        },
+        menuPositionY: {
+            control: 'inline-radio',
+            options: ['below', 'above'],
+            description: 'Custom choice for opening the menu at the bottom.',
+            defaultValue: 'below',
+            table: {
+                type: { summary: 'MenuPositionY' },
+                defaultValue: { summary: 'below' }
+            }
+        },
+        maxNotifications: {
+            control: 'number',
+            defaultValue: 5,
+            description: 'Maximum number of notifications to display. The rest will remain hidden until load more is clicked.',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: '5' }
+            }
+        }
+    }
+} as Meta;
+
+const template: Story<NotificationHistoryComponent> = (args: NotificationHistoryComponent) => ({
+    props: args,
+    template: `
+    <div style="display:flex;flex-direction:column;align-items:center;">
+        <adf-notification-history
+            [menuPositionX]=menuPositionX
+            [menuPositionY]=menuPositionY
+            [maxNotifications]=maxNotifications>
+        </adf-notification-history>
+        <adf-add-notification-storybook>
+        </adf-add-notification-storybook>
+    </div>`
+});
+
+export const notificationHistory = template.bind({});
+notificationHistory.parameters = { layout: 'centered' };

lib/core/src/lib/notifications/notification-history.module.ts

@@ -23,6 +23,7 @@ import { NotificationHistoryComponent } from './components/notification-history.
 import { TranslateModule } from '@ngx-translate/core';
 import { NotificationIconPipe } from './pipes/notification-icon.pipe';
 import { PaginationModule } from '../pagination/pagination.module';
+import { AddNotificationStorybookComponent } from './components/add-notification.stories.component';
 
 @NgModule({
     imports: [
@@ -34,10 +35,12 @@ import { PaginationModule } from '../pagination/pagination.module';
     ],
     declarations: [
         NotificationHistoryComponent,
+        AddNotificationStorybookComponent,
         NotificationIconPipe
     ],
     exports: [
-        NotificationHistoryComponent
+        NotificationHistoryComponent,
+        AddNotificationStorybookComponent
     ]
 })
 export class NotificationHistoryModule { }

lib/core/src/lib/notifications/public-api.ts

@@ -16,6 +16,7 @@
  */
 
 export * from './components/notification-history.component';
+export * from './components/add-notification.stories.component';
 export * from './helpers/notification.factory';
 export * from './models/notification.model';
 export * from './services/notification.service';

lib/core/src/lib/pagination/pagination.component.stories.ts

@@ -89,3 +89,4 @@ const template: Story<PaginationComponent> = (args: PaginationComponent) => ({
 });
 
 export const pagination = template.bind({});
+pagination.parameters = { layout: 'centered' };

lib/core/src/lib/search-text/search-text-input.component.stories.ts

@@ -193,3 +193,4 @@ const template: Story<SearchTextInputComponent> = (args: SearchTextInputComponen
 });
 
 export const searchTextInput = template.bind({});
+searchTextInput.parameters = { layout: 'centered' };

lib/core/src/lib/sorting-picker/sorting-picker.component.stories.ts

@@ -89,7 +89,8 @@ const template: Story<SortingPickerModule> = (args: SortingPickerComponent) => (
     props: args
 });
 
-export const SortingPicker = template.bind({});
+export const sortingPicker = template.bind({});
-SortingPicker.args = {
+sortingPicker.args = {
     options: initialSortingTypes
 };
+sortingPicker.parameters = { layout: 'centered' };

lib/core/src/lib/templates/empty-content/empty-content.component.stories.ts

@@ -89,3 +89,4 @@ const template: Story<EmptyContentComponent> = ( args: EmptyContentComponent & {
 });
 
 export const emptyContent = template.bind({});
+emptyContent.parameters = { layout: 'centered' };

lib/core/src/lib/templates/error-content/error-content.component.stories.ts

@@ -78,3 +78,4 @@ const template: Story<ErrorContentComponent> = ( args: ErrorContentComponent & {
 });
 
 export const errorContent = template.bind({});
+errorContent.parameters = { layout: 'centered' };

lib/core/src/lib/userinfo/components/user-info.component.stories.ts

@@ -18,8 +18,7 @@
 import {
     Meta,
     moduleMetadata,
-    Story,
+    Story
-    componentWrapperDecorator
 } from '@storybook/angular';
 import { CoreStoryModule } from '../../testing/core.story.module';
 import { UserInfoComponent } from './user-info.component';
@@ -59,13 +58,7 @@ export default {
                     useClass: AuthenticationServiceMock
                 }
             ]
-        }),
+        })
-        componentWrapperDecorator(
-            (story) =>
-                `<div style="height: 100vh; display: flex; align-items: center; justify-content: center;">
-                    ${story}
-                </div>`
-        )
     ],
     argTypes: {
         menuPositionX: {
@@ -141,8 +134,8 @@ const template: Story<UserInfoComponent> = (args: UserInfoComponent) => ({
     props: args
 });
 
-export const LoginWithSSO = template.bind({});
+export const loginWithSSO = template.bind({});
-LoginWithSSO.decorators = [
+loginWithSSO.decorators = [
     moduleMetadata({
         providers: [
             {
@@ -152,9 +145,10 @@ LoginWithSSO.decorators = [
         ]
     })
 ];
+loginWithSSO.parameters = { layout: 'centered' };
 
-export const LoginWithSSOAndACS = template.bind({});
+export const loginWithSSOAndACS = template.bind({});
-LoginWithSSOAndACS.decorators = [
+loginWithSSOAndACS.decorators = [
     moduleMetadata({
         providers: [
             {
@@ -164,9 +158,10 @@ LoginWithSSOAndACS.decorators = [
         ]
     })
 ];
+loginWithSSOAndACS.parameters = { layout: 'centered' };
 
-export const LoginWithAPSAndACS = template.bind({});
+export const loginWithAPSAndACS = template.bind({});
-LoginWithAPSAndACS.decorators = [
+loginWithAPSAndACS.decorators = [
     moduleMetadata({
         providers: [
             {
@@ -176,9 +171,10 @@ LoginWithAPSAndACS.decorators = [
         ]
     })
 ];
+loginWithAPSAndACS.parameters = { layout: 'centered' };
 
-export const LoginWithACS = template.bind({});
+export const loginWithACS = template.bind({});
-LoginWithACS.decorators = [
+loginWithACS.decorators = [
     moduleMetadata({
         providers: [
             {
@@ -188,9 +184,10 @@ LoginWithACS.decorators = [
         ]
     })
 ];
+loginWithACS.parameters = { layout: 'centered' };
 
-export const LoginWithAPS = template.bind({});
+export const loginWithAPS = template.bind({});
-LoginWithAPS.decorators = [
+loginWithAPS.decorators = [
     moduleMetadata({
         providers: [
             {
@@ -200,3 +197,4 @@ LoginWithAPS.decorators = [
         ]
     })
 ];
+loginWithAPS.parameters = { layout: 'centered' };