[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
2025-05-12 17:04:57 +00:00 · 2022-10-20 08:29:32 +02:00 · 2022-10-20 08:29:32 +02:00 · 2c80214999
commit 2c80214999
parent d788866cea
30 changed files with 226 additions and 80 deletions
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@ -0,0 +1,4 @@
+export const parameters = {
+    docs: { inlineStories: true },
+    controls: { expanded: true }
+};
--- 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
 };
--- 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<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' };
--- 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<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' };
--- 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', () => {

--- 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' };
--- 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<CardViewKeyValuePairsItemComponent> =
+export const cardViewKeyValuePairsItem: Story<CardViewKeyValuePairsItemComponent> =
    (args: CardViewKeyValuePairsItemComponent) => ({
        props: args
    });
-CardViewKeyValuePairsItem.args = {
+cardViewKeyValuePairsItem.args = {
    property: new CardViewKeyValuePairsItemModel({
        label: 'CardView Key-Value Pairs Item',
        value: [
--- 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<CardViewMapItemComponent> = (
    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' };
--- 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<CardViewSelectItemComponent> = (
    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' };
--- 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<CardViewTextItemComponent> = (
    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' };
--- 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<CardViewComponent> = (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' };
--- 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 }
--- 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<DownloadZipDialogStorybookComponent> = (
 ) => ({
    props: args
 });
+downloadZIPDialog.parameters = { layout: 'centered' };
--- 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<EditJsonDialogStorybookComponent> = (args: EditJsonDialogS
 });

 export const editJSONDialog = template.bind({});
+editJSONDialog.parameters = { layout: 'centered' };
--- 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' };
--- 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<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' };
--- 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<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' };
--- 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<SidenavLayoutModule> = (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'
 };
--- 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<SidenavLayoutModule> = (args: SidebarActionMenuComponent)
    props: args
 });

-export const SidebarActionMenu = template.bind({});
-SidebarActionMenu.args = {
+export const sidebarActionMenu = template.bind({});
+sidebarActionMenu.args = {
    title: 'Hello from Sidebar Action Menu!'
 };
--- 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<SidenavLayoutModule> = (args: SidenavLayoutComponent) => (
    </adf-sidenav-layout>`
 });

-export const SidenavLayout = template.bind({});
-SidenavLayout.args = {
+export const sidenavLayout = template.bind({});
+sidenavLayout.args = {
    sidenavMin: 85,
    sidenavMax: 250,
    stepOver: 600,
--- a/lib/core/src/lib/notifications/components/add-notification.stories.component.ts
+++ 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: `<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++;
+    }
+}
--- a/lib/core/src/lib/notifications/components/notification-history.component.stories.ts
+++ 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<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' };
--- 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 { }
--- 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';
--- 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<PaginationComponent> = (args: PaginationComponent) => ({
 });

 export const pagination = template.bind({});
+pagination.parameters = { layout: 'centered' };
--- 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<SearchTextInputComponent> = (args: SearchTextInputComponen
 });

 export const searchTextInput = template.bind({});
+searchTextInput.parameters = { layout: 'centered' };
--- 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<SortingPickerModule> = (args: SortingPickerComponent) => (
    props: args
 });

-export const SortingPicker = template.bind({});
-SortingPicker.args = {
+export const sortingPicker = template.bind({});
+sortingPicker.args = {
    options: initialSortingTypes
 };
+sortingPicker.parameters = { layout: 'centered' };
--- 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<EmptyContentComponent> = ( args: EmptyContentComponent & { anyContentProjection: boolean } ) => ({
+const template: Story<EmptyContentComponent> = (args: EmptyContentComponent & { anyContentProjection: boolean }) => ({
    props: args,
    template: `
    <adf-empty-content icon="${args.icon}" title="${args.title}" subtitle="${args.subtitle}">
@ -89,3 +89,4 @@ const template: Story<EmptyContentComponent> = ( args: EmptyContentComponent & {
 });

 export const emptyContent = template.bind({});
+emptyContent.parameters = { layout: 'centered' };
--- 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<ErrorContentComponent> = ( args: ErrorContentComponent & { errorContentActions: boolean } ) => ({
+const template: Story<ErrorContentComponent> = (args: ErrorContentComponent & { errorContentActions: boolean }) => ({
    props: args,
    template: `
    <adf-error-content errorCode="${args.errorCode}">
@ -78,3 +78,4 @@ const template: Story<ErrorContentComponent> = ( args: ErrorContentComponent & {
 });

 export const errorContent = template.bind({});
+errorContent.parameters = { layout: 'centered' };
--- 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) =>
-                `<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({});
-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' };