From 2c802149992dbaa06e6fa33eb156d3aeb71c2eed Mon Sep 17 00:00:00 2001 From: Robert Duda Date: Thu, 20 Oct 2022 08:29:32 +0200 Subject: [PATCH] [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 | 4 + lib/core/.storybook/preview.js | 5 +- .../card-view-arrayitem.component.stories.ts | 5 +- .../card-view-boolitem.component.stories.ts | 5 +- .../card-view-dateitem.component.spec.ts | 2 +- .../card-view-dateitem.component.stories.ts | 24 +++--- ...iew-keyvaluepairsitem.component.stories.ts | 4 +- .../card-view-mapitem.component.stories.ts | 12 +-- .../card-view-selectitem.component.stories.ts | 6 +- .../card-view-textitem.component.stories.ts | 24 +++--- .../card-view/card-view.component.stories.ts | 10 ++- lib/core/src/lib/core.module.ts | 4 +- .../download-zip.dialog.stories.ts | 1 + .../edit-json/edit-json.dialog.stories.ts | 1 + .../src/lib/icon/icon.component.stories.ts | 2 + .../language-menu.component.stories.ts | 3 + .../language-picker.component.stories.ts | 2 + .../header/header.component.stories.ts | 4 +- .../sidebar-action.component.stories.ts | 4 +- .../sidenav-layout.component.stories.ts | 4 +- .../add-notification.stories.component.ts | 35 ++++++++ .../notification-history.component.stories.ts | 86 +++++++++++++++++++ .../notification-history.module.ts | 7 +- lib/core/src/lib/notifications/public-api.ts | 1 + .../pagination.component.stories.ts | 1 + .../search-text-input.component.stories.ts | 1 + .../sorting-picker.component.stories.ts | 5 +- .../empty-content.component.stories.ts | 3 +- .../error-content.component.stories.ts | 5 +- .../components/user-info.component.stories.ts | 36 ++++---- 30 files changed, 226 insertions(+), 80 deletions(-) create mode 100644 .storybook/preview.js create mode 100644 lib/core/src/lib/notifications/components/add-notification.stories.component.ts create mode 100644 lib/core/src/lib/notifications/components/notification-history.component.stories.ts diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000000..4a981ec5db --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,4 @@ +export const parameters = { + docs: { inlineStories: true }, + controls: { expanded: true } +}; diff --git a/lib/core/.storybook/preview.js b/lib/core/.storybook/preview.js index 02894f03ad..2165240157 100644 --- a/lib/core/.storybook/preview.js +++ b/lib/core/.storybook/preview.js @@ -1,4 +1,5 @@ +const rootPreview = require('../../../.storybook/preview'); + export const parameters = { - docs: { inlineStories: true }, - controls: { expanded: true } + ...rootPreview.preview }; diff --git a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.stories.ts b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.stories.ts index ff0011855c..b4f0b75e08 100644 --- a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.stories.ts +++ b/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 = ( +export const cardViewArrayItem: Story = ( 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' }; diff --git a/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.stories.ts b/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.stories.ts index adbfe69845..a340a7b9b1 100644 --- a/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.stories.ts +++ b/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 = ( +export const cardViewBoolItem: Story = ( 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' }; diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts index 1d8e405f8d..71945043db 100644 --- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts +++ b/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', () => { diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.stories.ts b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.stories.ts index 797ae8e9dd..95ac00f094 100644 --- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.stories.ts +++ b/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({}); - -SingleValuedDateItemCardView.args = { +export const singleValuedDateItemCardView = template.bind({}); +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({}); - -MultiValuedDateItemCardView.args = { +export const multiValuedDateItemCardView = template.bind({}); +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({}); - -SingleValuedDatetimeItemCardView.args = { +export const singleValuedDatetimeItemCardView = template.bind({}); +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({}); - -MultiValuedDatetimeItemCardView.args = { +export const multiValuedDatetimeItemCardView = template.bind({}); +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' }; diff --git a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.stories.ts b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.stories.ts index ba99afff4b..30daff2ab0 100644 --- a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.stories.ts +++ b/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 = +export const cardViewKeyValuePairsItem: Story = (args: CardViewKeyValuePairsItemComponent) => ({ props: args }); -CardViewKeyValuePairsItem.args = { +cardViewKeyValuePairsItem.args = { property: new CardViewKeyValuePairsItemModel({ label: 'CardView Key-Value Pairs Item', value: [ diff --git a/lib/core/src/lib/card-view/components/card-view-mapitem/card-view-mapitem.component.stories.ts b/lib/core/src/lib/card-view/components/card-view-mapitem/card-view-mapitem.component.stories.ts index d0f9b32d81..ccc1784ee0 100644 --- a/lib/core/src/lib/card-view/components/card-view-mapitem/card-view-mapitem.component.stories.ts +++ b/lib/core/src/lib/card-view/components/card-view-mapitem/card-view-mapitem.component.stories.ts @@ -54,9 +54,8 @@ const template: Story = ( props: args }); -export const CardViewMapItem = template.bind({}); - -CardViewMapItem.args = { +export const cardViewMapItem = template.bind({}); +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({}); - -EmptyCardViewMapItem.args = { +export const emptyCardViewMapItem = template.bind({}); +emptyCardViewMapItem.args = { property: new CardViewMapItemModel({ label: 'My map', value: [], @@ -75,3 +74,4 @@ EmptyCardViewMapItem.args = { default: 'default map value' }) }; +emptyCardViewMapItem.parameters = { layout: 'centered' }; diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.stories.ts b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.stories.ts index 965104d15a..e4c2ee6c40 100644 --- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.stories.ts +++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.stories.ts @@ -83,9 +83,8 @@ const template: Story = ( props: args }); -export const CardViewSelectItem = template.bind({}); - -CardViewSelectItem.args = { +export const cardViewSelectItem = template.bind({}); +cardViewSelectItem.args = { property: new CardViewSelectItemModel({ label: 'CardView Select Item', value: 'one', @@ -97,3 +96,4 @@ CardViewSelectItem.args = { editable: true }) }; +cardViewSelectItem.parameters = { layout: 'centered' }; diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts index a5e2e2c8a5..9e5a3d365b 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts @@ -85,9 +85,8 @@ const template: Story = ( props: args }); -export const ClickableCardViewTextItem = template.bind({}); - -ClickableCardViewTextItem.args = { +export const clickableCardViewTextItem = template.bind({}); +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({}); - -ChipsCardViewTextItem.args = { +export const chipsCardViewTextItem = template.bind({}); +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({}); - -EmptyCardViewTextItem.args = { +export const emptyCardViewTextItem = template.bind({}); +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({}); - -DefaultCardViewTextItem.args = { +export const defaultCardViewTextItem = template.bind({}); +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' }; diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.stories.ts b/lib/core/src/lib/card-view/components/card-view/card-view.component.stories.ts index 9c7111eab0..8aaacb1064 100644 --- a/lib/core/src/lib/card-view/components/card-view/card-view.component.stories.ts +++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.stories.ts @@ -65,13 +65,15 @@ const template: Story = (args: CardViewComponent) => ({ props: args }); -export const defaultStory = template.bind({}); -defaultStory.args = { +export const defaultCardView = template.bind({}); +defaultCardView.args = { properties: cardViewDataSource }; +defaultCardView.parameters = { layout: 'centered' }; -export const emptyStory = template.bind({}); -emptyStory.args = { +export const emptyCardView = template.bind({}); +emptyCardView.args = { properties: cardViewUndefinedValues, editable: false }; +emptyCardView.parameters = { layout: 'centered' }; diff --git a/lib/core/src/lib/core.module.ts b/lib/core/src/lib/core.module.ts index 508b800265..0efcd91e01 100644 --- a/lib/core/src/lib/core.module.ts +++ b/lib/core/src/lib/core.module.ts @@ -166,13 +166,13 @@ export class CoreModule { { provide: APP_INITIALIZER, useFactory: directionalityConfigFactory, - deps: [ DirectionalityConfigService ], + deps: [DirectionalityConfigService], multi: true }, { provide: APP_INITIALIZER, useFactory: versionCompatibilityFactory, - deps: [ VersionCompatibilityService ], + deps: [VersionCompatibilityService], multi: true }, { provide: HTTP_INTERCEPTORS, useClass: AuthBearerInterceptor, multi: true } diff --git a/lib/core/src/lib/dialogs/download-zip/download-zip.dialog.stories.ts b/lib/core/src/lib/dialogs/download-zip/download-zip.dialog.stories.ts index 0b48e15d0d..19b939910d 100644 --- a/lib/core/src/lib/dialogs/download-zip/download-zip.dialog.stories.ts +++ b/lib/core/src/lib/dialogs/download-zip/download-zip.dialog.stories.ts @@ -84,3 +84,4 @@ export const downloadZIPDialog: Story = ( ) => ({ props: args }); +downloadZIPDialog.parameters = { layout: 'centered' }; diff --git a/lib/core/src/lib/dialogs/edit-json/edit-json.dialog.stories.ts b/lib/core/src/lib/dialogs/edit-json/edit-json.dialog.stories.ts index 002a3acbd8..d49bdef63f 100644 --- a/lib/core/src/lib/dialogs/edit-json/edit-json.dialog.stories.ts +++ b/lib/core/src/lib/dialogs/edit-json/edit-json.dialog.stories.ts @@ -93,3 +93,4 @@ const template: Story = (args: EditJsonDialogS }); export const editJSONDialog = template.bind({}); +editJSONDialog.parameters = { layout: 'centered' }; diff --git a/lib/core/src/lib/icon/icon.component.stories.ts b/lib/core/src/lib/icon/icon.component.stories.ts index c1dd96df88..0e54474d21 100644 --- a/lib/core/src/lib/icon/icon.component.stories.ts +++ b/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' }; diff --git a/lib/core/src/lib/language-menu/language-menu.component.stories.ts b/lib/core/src/lib/language-menu/language-menu.component.stories.ts index 459208541b..65c9ea4d0b 100644 --- a/lib/core/src/lib/language-menu/language-menu.component.stories.ts +++ b/lib/core/src/lib/language-menu/language-menu.component.stories.ts @@ -57,6 +57,7 @@ export default { const languageMenuComponentTemplate: Story = (args: LanguageMenuComponent) => ({ props: args }); +languageMenuComponentTemplate.parameters = { layout: 'centered' }; export const asMainMenu = languageMenuComponentTemplate.bind({}); asMainMenu.decorators = [ @@ -71,6 +72,7 @@ asMainMenu.decorators = [ `) ]; +asMainMenu.parameters = { layout: 'centered' }; export const asNestedMenu = languageMenuComponentTemplate.bind({}); asNestedMenu.decorators = [ @@ -93,3 +95,4 @@ asNestedMenu.decorators = [ `) ]; +asNestedMenu.parameters = { layout: 'centered' }; diff --git a/lib/core/src/lib/language-menu/language-picker.component.stories.ts b/lib/core/src/lib/language-menu/language-picker.component.stories.ts index 39bbcb9d27..7abaef2e8f 100644 --- a/lib/core/src/lib/language-menu/language-picker.component.stories.ts +++ b/lib/core/src/lib/language-menu/language-picker.component.stories.ts @@ -52,6 +52,7 @@ const languagePickerComponentTemplate: Story = (args: L }); export const primary = languagePickerComponentTemplate.bind({}); +primary.parameters = { layout: 'centered' }; export const asNestedMenu = languagePickerComponentTemplate.bind({}); asNestedMenu.decorators = [ @@ -64,3 +65,4 @@ asNestedMenu.decorators = [ `) ]; +asNestedMenu.parameters = { layout: 'centered' }; diff --git a/lib/core/src/lib/layout/components/header/header.component.stories.ts b/lib/core/src/lib/layout/components/header/header.component.stories.ts index 0421011e45..b0fb508df2 100644 --- a/lib/core/src/lib/layout/components/header/header.component.stories.ts +++ b/lib/core/src/lib/layout/components/header/header.component.stories.ts @@ -129,8 +129,8 @@ const template: Story = (args: HeaderLayoutComponent) => ({ props: args }); -export const Header = template.bind({}); -Header.args = { +export const header = template.bind({}); +header.args = { title: 'Hello from Header!', tooltip: 'Default Tooltip text' }; diff --git a/lib/core/src/lib/layout/components/sidebar-action/sidebar-action.component.stories.ts b/lib/core/src/lib/layout/components/sidebar-action/sidebar-action.component.stories.ts index 8595b020d4..9955dc538b 100644 --- a/lib/core/src/lib/layout/components/sidebar-action/sidebar-action.component.stories.ts +++ b/lib/core/src/lib/layout/components/sidebar-action/sidebar-action.component.stories.ts @@ -70,7 +70,7 @@ const template: Story = (args: SidebarActionMenuComponent) props: args }); -export const SidebarActionMenu = template.bind({}); -SidebarActionMenu.args = { +export const sidebarActionMenu = template.bind({}); +sidebarActionMenu.args = { title: 'Hello from Sidebar Action Menu!' }; diff --git a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts index 8bf31ae70d..038da50b75 100644 --- a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts +++ b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts @@ -220,8 +220,8 @@ const template: Story = (args: SidenavLayoutComponent) => ( ` }); -export const SidenavLayout = template.bind({}); -SidenavLayout.args = { +export const sidenavLayout = template.bind({}); +sidenavLayout.args = { sidenavMin: 85, sidenavMax: 250, stepOver: 600, diff --git a/lib/core/src/lib/notifications/components/add-notification.stories.component.ts b/lib/core/src/lib/notifications/components/add-notification.stories.component.ts new file mode 100644 index 0000000000..0957205cfe --- /dev/null +++ b/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: `` +}) +export class AddNotificationStorybookComponent { + + infoCounter: number = 1; + + constructor(private notificationService: NotificationService) { } + + showInfo() { + this.notificationService.showInfo(`Example notification ${this.infoCounter}`); + this.infoCounter++; + } +} diff --git a/lib/core/src/lib/notifications/components/notification-history.component.stories.ts b/lib/core/src/lib/notifications/components/notification-history.component.stories.ts new file mode 100644 index 0000000000..e8da48a4c1 --- /dev/null +++ b/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 = (args: NotificationHistoryComponent) => ({ + props: args, + template: ` +
+ + + + +
` +}); + +export const notificationHistory = template.bind({}); +notificationHistory.parameters = { layout: 'centered' }; diff --git a/lib/core/src/lib/notifications/notification-history.module.ts b/lib/core/src/lib/notifications/notification-history.module.ts index bd2559586b..2cdba1b974 100644 --- a/lib/core/src/lib/notifications/notification-history.module.ts +++ b/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 {} +export class NotificationHistoryModule { } diff --git a/lib/core/src/lib/notifications/public-api.ts b/lib/core/src/lib/notifications/public-api.ts index 4270a04134..a426359f8c 100644 --- a/lib/core/src/lib/notifications/public-api.ts +++ b/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'; diff --git a/lib/core/src/lib/pagination/pagination.component.stories.ts b/lib/core/src/lib/pagination/pagination.component.stories.ts index 2799e4fc85..e6a4399eb3 100644 --- a/lib/core/src/lib/pagination/pagination.component.stories.ts +++ b/lib/core/src/lib/pagination/pagination.component.stories.ts @@ -89,3 +89,4 @@ const template: Story = (args: PaginationComponent) => ({ }); export const pagination = template.bind({}); +pagination.parameters = { layout: 'centered' }; diff --git a/lib/core/src/lib/search-text/search-text-input.component.stories.ts b/lib/core/src/lib/search-text/search-text-input.component.stories.ts index 237bb64f5e..f5e0061741 100644 --- a/lib/core/src/lib/search-text/search-text-input.component.stories.ts +++ b/lib/core/src/lib/search-text/search-text-input.component.stories.ts @@ -193,3 +193,4 @@ const template: Story = (args: SearchTextInputComponen }); export const searchTextInput = template.bind({}); +searchTextInput.parameters = { layout: 'centered' }; diff --git a/lib/core/src/lib/sorting-picker/sorting-picker.component.stories.ts b/lib/core/src/lib/sorting-picker/sorting-picker.component.stories.ts index f59927d5d1..9d7d6ffca9 100644 --- a/lib/core/src/lib/sorting-picker/sorting-picker.component.stories.ts +++ b/lib/core/src/lib/sorting-picker/sorting-picker.component.stories.ts @@ -89,7 +89,8 @@ const template: Story = (args: SortingPickerComponent) => ( props: args }); -export const SortingPicker = template.bind({}); -SortingPicker.args = { +export const sortingPicker = template.bind({}); +sortingPicker.args = { options: initialSortingTypes }; +sortingPicker.parameters = { layout: 'centered' }; diff --git a/lib/core/src/lib/templates/empty-content/empty-content.component.stories.ts b/lib/core/src/lib/templates/empty-content/empty-content.component.stories.ts index 8acc106311..6323c9e90e 100644 --- a/lib/core/src/lib/templates/empty-content/empty-content.component.stories.ts +++ b/lib/core/src/lib/templates/empty-content/empty-content.component.stories.ts @@ -78,7 +78,7 @@ export default { } } as Meta; -const template: Story = ( args: EmptyContentComponent & { anyContentProjection: boolean } ) => ({ +const template: Story = (args: EmptyContentComponent & { anyContentProjection: boolean }) => ({ props: args, template: ` @@ -89,3 +89,4 @@ const template: Story = ( args: EmptyContentComponent & { }); export const emptyContent = template.bind({}); +emptyContent.parameters = { layout: 'centered' }; diff --git a/lib/core/src/lib/templates/error-content/error-content.component.stories.ts b/lib/core/src/lib/templates/error-content/error-content.component.stories.ts index ee8ddef44e..88068cf165 100644 --- a/lib/core/src/lib/templates/error-content/error-content.component.stories.ts +++ b/lib/core/src/lib/templates/error-content/error-content.component.stories.ts @@ -29,7 +29,7 @@ export default { moduleMetadata({ imports: [CoreStoryModule, TemplateModule], providers: [ - { provide: ActivatedRoute, useValue: { params: of({}) }} + { provide: ActivatedRoute, useValue: { params: of({}) } } ] }) ], @@ -67,7 +67,7 @@ export default { } } as Meta; -const template: Story = ( args: ErrorContentComponent & { errorContentActions: boolean } ) => ({ +const template: Story = (args: ErrorContentComponent & { errorContentActions: boolean }) => ({ props: args, template: ` @@ -78,3 +78,4 @@ const template: Story = ( args: ErrorContentComponent & { }); export const errorContent = template.bind({}); +errorContent.parameters = { layout: 'centered' }; diff --git a/lib/core/src/lib/userinfo/components/user-info.component.stories.ts b/lib/core/src/lib/userinfo/components/user-info.component.stories.ts index e3f76ae8a6..7d4f91c2ce 100644 --- a/lib/core/src/lib/userinfo/components/user-info.component.stories.ts +++ b/lib/core/src/lib/userinfo/components/user-info.component.stories.ts @@ -18,8 +18,7 @@ import { Meta, moduleMetadata, - Story, - componentWrapperDecorator + Story } 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) => - `
- ${story} -
` - ) + }) ], argTypes: { menuPositionX: { @@ -141,8 +134,8 @@ const template: Story = (args: UserInfoComponent) => ({ props: args }); -export const LoginWithSSO = template.bind({}); -LoginWithSSO.decorators = [ +export const loginWithSSO = template.bind({}); +loginWithSSO.decorators = [ moduleMetadata({ providers: [ { @@ -152,9 +145,10 @@ LoginWithSSO.decorators = [ ] }) ]; +loginWithSSO.parameters = { layout: 'centered' }; -export const LoginWithSSOAndACS = template.bind({}); -LoginWithSSOAndACS.decorators = [ +export const loginWithSSOAndACS = template.bind({}); +loginWithSSOAndACS.decorators = [ moduleMetadata({ providers: [ { @@ -164,9 +158,10 @@ LoginWithSSOAndACS.decorators = [ ] }) ]; +loginWithSSOAndACS.parameters = { layout: 'centered' }; -export const LoginWithAPSAndACS = template.bind({}); -LoginWithAPSAndACS.decorators = [ +export const loginWithAPSAndACS = template.bind({}); +loginWithAPSAndACS.decorators = [ moduleMetadata({ providers: [ { @@ -176,9 +171,10 @@ LoginWithAPSAndACS.decorators = [ ] }) ]; +loginWithAPSAndACS.parameters = { layout: 'centered' }; -export const LoginWithACS = template.bind({}); -LoginWithACS.decorators = [ +export const loginWithACS = template.bind({}); +loginWithACS.decorators = [ moduleMetadata({ providers: [ { @@ -188,9 +184,10 @@ LoginWithACS.decorators = [ ] }) ]; +loginWithACS.parameters = { layout: 'centered' }; -export const LoginWithAPS = template.bind({}); -LoginWithAPS.decorators = [ +export const loginWithAPS = template.bind({}); +loginWithAPS.decorators = [ moduleMetadata({ providers: [ { @@ -200,3 +197,4 @@ LoginWithAPS.decorators = [ ] }) ]; +loginWithAPS.parameters = { layout: 'centered' };