[AAE-10252] Storybook Update existing Stories to adhere to conventions (#7780)

* [AAE-10252] Storybook Update existing Stories to adhere to conventions

* Added expaned controls globally

* About Module, Comments Module

* Icon Module, Language Menu Module

* Social Module

* Naming of single stories

* process-services-cloud Modules

* Added descriptions and categories for actions

* Fixed and cleaned error-content stories

* Updated playwright tests to navigate properly

* Template Module

* Toolbar Module

* fixed Like component controls

* content projection showcase

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

@@ -27,7 +27,7 @@ import { CoreStoryModule } from '../testing/core.story.module';
 
 export default {
     component: AboutComponent,
-    title: 'Core/Components/About',
+    title: 'Core/About/About',
     decorators: [
         moduleMetadata({
             imports: [CoreStoryModule, AboutModule],
@@ -38,17 +38,42 @@ export default {
                 { provide: AppConfigService, useClass: AppConfigServiceMock }
             ]
         })
-    ]
+    ],
+    argTypes: {
+        dev: {
+            control: 'boolean',
+            description: 'If active show more information about the app and the platform useful in debug.',
+            defaultValue: false,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        },
+        pkg: {
+            control: 'object',
+            description: 'pkg json.',
+            table: {
+                type: { summary: 'object' }
+            }
+        },
+        regexp: {
+            control: 'text',
+            description: 'Regular expression for filtering dependencies packages.',
+            defaultValue: '^(@alfresco)',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '^(@alfresco)' }
+            }
+        }
+    }
 } as Meta;
 
 const template: Story<AboutComponent> = (args: AboutComponent) => ({
     props: args
 });
 
-export const devAbout = template.bind({});
-
-devAbout.args = {
-    dev: true,
+export const about = template.bind({});
+about.args = {
     pkg: {
         name: 'My Storybook App', commit: 'my-commit-value', version: '1.0.0', dependencies: {
             '@alfresco/adf-content-services': '4.7.0',
@@ -60,8 +85,3 @@ devAbout.args = {
         }
     }
 };
-
-export const prodAbout = template.bind({});
-prodAbout.args = {
-    dev: false
-};

lib/core/src/lib/comments/comment-list.component.stories.ts

@@ -16,8 +16,6 @@
  */
 
 import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { action } from '@storybook/addon-actions';
-import { CommentModel } from '../models/comment.model';
 import { CoreStoryModule } from '../testing/core.story.module';
 import { CommentListComponent } from './comment-list.component';
 import { CommentsModule } from './comments.module';
@@ -37,20 +35,22 @@ export default {
     ],
     argTypes: {
         comments: {
-            type: CommentModel,
+            control: 'object',
             description: 'CommentModel array',
             table: {
-                type: { summary: 'CommentModel' }
+                type: { summary: 'CommentModel[]' }
             }
+        },
+        clickRow: {
+            action: 'clickRow',
+            description: 'Emitted when the user clicks on one of the comment rows.',
+            table: { category: 'Actions' }
         }
     }
 } as Meta;
 
 const template: Story<CommentListComponent> = (args: CommentListComponent) => ({
-    props: {
-        ...args,
-        clickRow: action('clickRow')
-    }
+    props: args
 });
 
 export const taskBased = template.bind({});

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

@@ -20,7 +20,6 @@ import { CommentContentService, CommentProcessService, EcmUserService } from '..
 import { CoreStoryModule } from '../testing/core.story.module';
 import { CommentsComponent } from './comments.component';
 import { CommentsModule } from './comments.module';
-import { CommentModel } from '../models/comment.model';
 import { CommentContentServiceMock } from '../mock/comment-content-service.mock';
 import { CommentProcessServiceMock } from '../mock/comment-process-service.mock';
 import { commentsTaskData, commentsNodeData } from '../mock/comment-content.mock';
@@ -40,9 +39,9 @@ export default {
     ],
     argTypes: {
         comments: {
-            type: CommentModel,
+            control: 'object',
             description: 'CommentModel array',
-            table: { type: { summary: 'CommentModel' } }
+            table: { type: { summary: 'CommentModel[]' } }
         },
         readOnly: {
             control: 'boolean',
@@ -50,28 +49,29 @@ export default {
             defaultValue: false,
             table: {
                 type: { summary: 'boolean' },
-                defaultValue: { summary: 'false'}
+                defaultValue: { summary: 'false' }
             }
         },
         nodeId: {
             control: 'text',
             description: 'Necessary in order to add a new Node comment',
-            defaultValue: undefined,
             table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: 'undefined' }
+                type: { summary: 'string' }
             },
             if: { arg: 'taskId', exists: false }
         },
         taskId: {
             control: 'text',
             description: 'Necessary in order to add a new Task comment',
-            defaultValue: undefined,
             table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: 'undefined' }
+                type: { summary: 'string' }
             },
             if: { arg: 'nodeId', exists: false }
+        },
+        error: {
+            action: 'error',
+            description: 'Emitted when an error occurs while displaying/adding a comment.',
+            table: { category: 'Actions' }
         }
     }
 } as Meta;

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

@@ -22,7 +22,7 @@ import { IconModule } from './icon.module';
 
 export default {
     component: IconComponent,
-    title: 'Core/Components/Icon',
+    title: 'Core/Icon/Icon',
     decorators: [
         moduleMetadata({
             imports: [CoreStoryModule, IconModule]
@@ -31,12 +31,12 @@ export default {
     argTypes: {
         color: {
             control: 'radio',
-            options: ['primary', 'accent', 'warn'],
+            options: ['primary', 'accent', 'warn', undefined],
             description: 'icon color',
-            defaultValue: 'primary',
+            defaultValue: undefined,
             table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: 'primary' }
+                type: { summary: 'ThemePalette' },
+                defaultValue: { summary: 'undefined' }
             }
         },
         value: {

lib/core/src/lib/info-drawer/info-drawer.component.stories.ts

@@ -184,7 +184,8 @@ export default {
         },
         currentTab: {
             action: 'currentTab',
-            table: { disable: true }
+            description: 'Emitted when the currently active tab changes.',
+            table: { category: 'Actions' }
         }
     }
 } as Meta;
@@ -242,10 +243,7 @@ tabLayoutWithTextLabels.args = {
 };
 
 tabLayoutWithTextLabels.parameters = {
-    controls: {
-        exclude: ['cardText'],
-        expanded: true
-    }
+    controls: { exclude: ['cardText'] }
 };
 
 export const tabLayoutWithIconLabels = tabLayoutTemplate.bind({});
@@ -260,10 +258,7 @@ tabLayoutWithIconLabels.args = {
 };
 
 tabLayoutWithIconLabels.parameters = {
-    controls: {
-        exclude: ['cardText'],
-        expanded: true
-    }
+    controls: { exclude: ['cardText'] }
 };
 
 export const singleLayout = singleLayoutTemplate.bind({});
@@ -274,7 +269,3 @@ singleLayout.args = {
     showSecondTab: false,
     showThirdTab: false
 };
-
-singleLayout.parameters = {
-    controls: { expanded: true }
-};

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

@@ -16,7 +16,6 @@
  */
 
 import { componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
-import { action } from '@storybook/addon-actions';
 import { CoreStoryModule } from '../testing/core.story.module';
 
 import { LanguageMenuModule } from './language-menu.module';
@@ -27,7 +26,7 @@ import { LanguageServiceMock } from '../mock/language.service.mock';
 
 export default {
     component: LanguageMenuComponent,
-    title: 'Core/Components/Language Menu/Language Menu',
+    title: 'Core/Language Menu/Language Menu',
     decorators: [
         moduleMetadata({
             imports: [CoreStoryModule, LanguageMenuModule],
@@ -35,14 +34,18 @@ export default {
                 { provide: LanguageService, useClass: LanguageServiceMock }
             ]
         })
-    ]
+    ],
+    argTypes: {
+        changedLanguage: {
+            action: 'changedLanguage',
+            description: 'Emitted when the user clicks on one of the language buttons.',
+            table: { category: 'Actions' }
+        }
+    }
 } as Meta;
 
 const languageMenuComponentTemplate: Story<LanguageMenuComponent> = (args: LanguageMenuComponent) => ({
-    props: {
-        ...args,
-        changedLanguage: action('changedLanguage')
-    }
+    props: args
 });
 
 export const asMainMenu = languageMenuComponentTemplate.bind({});

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

@@ -16,7 +16,6 @@
  */
 
 import { componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
-import { action } from '@storybook/addon-actions';
 import { CoreStoryModule } from '../testing/core.story.module';
 
 import { LanguageMenuModule } from './language-menu.module';
@@ -27,7 +26,7 @@ import { LanguageServiceMock } from '../mock/language.service.mock';
 
 export default {
     component: LanguagePickerComponent,
-    title: 'Core/Components/Language Menu/Language Picker',
+    title: 'Core/Language Menu/Language Picker',
     decorators: [
         moduleMetadata({
             imports: [CoreStoryModule, LanguageMenuModule],
@@ -35,14 +34,18 @@ export default {
                 { provide: LanguageService, useClass: LanguageServiceMock }
             ]
         })
-    ]
+    ],
+    argTypes: {
+        changedLanguage: {
+            action: 'changedLanguage',
+            description: 'Emitted when the user clicks on one of the language buttons.',
+            table: { category: 'Actions' }
+        }
+    }
 } as Meta;
 
 const languagePickerComponentTemplate: Story<LanguagePickerComponent> = (args: LanguagePickerComponent) => ({
-    props: {
-        ...args,
-        changedLanguage: action('changedLanguage')
-    }
+    props: args
 });
 
 export const primary = languagePickerComponentTemplate.bind({});

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

@@ -30,88 +30,55 @@ export default {
     ],
     argTypes: {
         icon: {
-            description: 'Angular Material icon',
+            control: 'text',
+            description: 'Material Icon to use.',
+            defaultValue: 'cake',
             table: {
-                category: 'Component Inputs',
-                type: {
-                    summary: 'string'
-                },
-                defaultValue: {
-                    summary: 'cake'
-                }
+                type: { summary: 'string' },
+                defaultValue: { summary: 'cake' }
             }
         },
         title: {
+            control: 'text',
+            description: 'String or Resource Key for the title.',
+            defaultValue: 'title',
             table: {
-                category: 'Component Inputs',
-                type: {
-                    summary: 'string'
-                },
-                defaultValue: {
-                    summary: ''
-                }
+                type: { summary: 'string' }
             }
         },
         subtitle: {
+            control: 'text',
+            description: 'String or Resource Key for the subtitle.',
+            defaultValue: 'subtitle',
             table: {
-                category: 'Component Inputs',
-                type: {
-                    summary: 'string'
-                },
-                defaultValue: {
-                    summary: ''
-                }
+                type: { summary: 'string' }
             }
         },
-        lines: {
-            name: 'lines',
-            description: 'Content Projection Text',
-            control: {type: 'object'},
-            defaultValue: [
-                'Items you removed are moved to the Trash',
-                'Empty Trash to permanently delete items'
-            ],
+        anyContentProjection: {
+            name: 'with any component / selector',
+            control: 'boolean',
+            description: 'Showcase content projection with any component / selector',
+            defaultValue: false,
             table: {
-                category: 'Strories Controls',
+                category: 'Content Projection',
                 type: {
-                    summary: 'array'
-                }
+                    summary: 'code',
+                    detail: '<div style="color:red">\n  projected content\n</div>'
+                },
+                defaultValue: { summary: false }
             }
         }
     }
 } as Meta;
 
-const template: Story<EmptyContentComponent> = (
-    args: EmptyContentComponent
-) => ({
-    props: args
-});
-
-export const defaultStory = template.bind({});
-defaultStory.argTypes = {
-    lines: {
-        control: { disable: true }
-    }
-};
-defaultStory.args = {
-    icon: 'star_rate',
-    title: 'No favourite files or folders',
-    subtitle: 'Favourite items that you want to easily find later'
-};
-defaultStory.storyName = 'Default';
-
-export const multipleLines: Story<EmptyContentComponent> = (
-    args: EmptyContentComponent & { lines: string[] }
-) => ({
-    props: {
-        ...args
-    },
+const template: Story<EmptyContentComponent> = ( args: EmptyContentComponent & { anyContentProjection: boolean } ) => ({
+    props: args,
     template: `
-    <adf-empty-content icon="delete" title="Trash is empty">
-        <p class="adf-empty-content__text" *ngFor="let line of ${JSON.stringify(
-            args.lines
-        ).replace(/\"/g, '\'')}">
-            {{ line }}
-        </p>
+    <adf-empty-content icon="${args.icon}" title="${args.title}" subtitle="${args.subtitle}">
+        <div *ngIf="${args.anyContentProjection}" style="color:red">
+            projected content
+        </div>
     </adf-empty-content>`
 });
+
+export const emptyContent = template.bind({});

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

@@ -14,7 +14,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import { Meta, moduleMetadata, Story } from '@storybook/angular';
 import { ErrorContentComponent } from './error-content.component';
 import { CoreStoryModule } from '../../testing/core.story.module';
@@ -29,120 +28,45 @@ export default {
         moduleMetadata({
             imports: [CoreStoryModule, TemplateModule],
             providers: [
-                {
-                    provide: ActivatedRoute,
-                    useValue: { params: of({}) }
-                }
+                { provide: ActivatedRoute, useValue: { params: of({}) }}
             ]
         })
     ],
     argTypes: {
         errorCode: {
-            type: 'string',
-            description: 'Component level Error Code',
+            control: 'text',
+            description: 'Error code associated with this error.',
+            defaultValue: 'UNKNOWN',
             table: {
-                category: 'Component Inputs',
-                type: {
-                    summary: 'string'
-                },
-                defaultValue: {
-                    summary: 'UNKNOWN'
-                }
-            },
-            defaultValue: '404'
-        },
-        errorCodeTranslated: {
-            type: 'string',
-            description:
-                'Code of translated Error - if translation doesn\'t exist then is UNKNOWN',
-            table: {
-                category: 'Component Variables',
-                type: {
-                    summary: 'string'
-                }
-            },
-            control: {
-                disable: true
+                type: { summary: 'string' },
+                defaultValue: { summary: 'UNKNOWN' }
             }
         },
-        isAdditionalContent: {
-            type: 'boolean',
-            description: 'Enable Content Projection',
+        errorContentActions: {
+            name: 'with adf-error-content-actions selector',
+            control: 'boolean',
+            description: 'Showcase content projection with <span style="color:red">adf-error-content-actions</span> selector',
             defaultValue: false,
             table: {
-                category: 'Story Controls',
+                category: 'Content Projection',
                 type: {
-                    summary: 'boolean'
+                    summary: 'code',
+                    detail: '<div adf-error-content-actions>\n  <button>MyAction</button>\n</div>'
                 },
-                defaultValue: {
-                    summary: false
-                }
+                defaultValue: { summary: false }
             }
         }
     }
 } as Meta;
 
-const templateArgTypes = {
-    errorCode: {
-        control: {
-            disable: true
-        }
-    }
-};
-
-const template: Story<ErrorContentComponent> = (
-    args: ErrorContentComponent & { isAdditionalContent: boolean }
-) => ({
+const template: Story<ErrorContentComponent> = ( args: ErrorContentComponent & { errorContentActions: boolean } ) => ({
     props: args,
     template: `
-        <adf-error-content>
-            <div adf-error-content-actions *ngIf="${args.isAdditionalContent}">
-            <button mat-raised-button type="button">MyAction</button>
-            </div>
-        </adf-error-content>
-        `
-});
-
-export const errorKnownParamStory = template.bind({});
-errorKnownParamStory.argTypes = templateArgTypes;
-errorKnownParamStory.decorators = [
-    moduleMetadata({
-        providers: [
-            {
-                provide: ActivatedRoute,
-                useValue: {
-                    params: of({ id: '500' })
-                }
-            }
-        ]
-    })
-];
-errorKnownParamStory.storyName = 'Error Param with Known ID';
-
-export const errorUnknownParamStory = template.bind({});
-errorUnknownParamStory.argTypes = templateArgTypes;
-errorUnknownParamStory.decorators = [
-    moduleMetadata({
-        providers: [
-            {
-                provide: ActivatedRoute,
-                useValue: {
-                    params: of({ id: '200' })
-                }
-            }
-        ]
-    })
-];
-errorUnknownParamStory.storyName = 'Error Param with Unknown ID';
-
-export const errorCodeStory: Story<ErrorContentComponent> = (
-    args: ErrorContentComponent & { isAdditionalContent: boolean }
-) => ({
-    props: args,
-    template: `
-    <adf-error-content [errorCode]="${args.errorCode}">
-        <div adf-error-content-actions *ngIf="${args.isAdditionalContent}">
+    <adf-error-content errorCode="${args.errorCode}">
+        <div adf-error-content-actions *ngIf="${args.errorContentActions}">
         <button mat-raised-button type="button">MyAction</button>
         </div>
     </adf-error-content>`
 });
+
+export const errorContent = template.bind({});

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

@@ -22,7 +22,7 @@ import { ToolbarModule } from './toolbar.module';
 
 export default {
     component: ToolbarComponent,
-    title: 'Core/Components/Toolbar',
+    title: 'Core/Toolbar/Toolbar',
     decorators: [
         moduleMetadata({
             imports: [CoreStoryModule, ToolbarModule]
@@ -31,23 +31,78 @@ export default {
     argTypes: {
         color: {
             control: 'radio',
-            options: ['primary', 'accent', 'warn']
+            options: ['primary', 'accent', 'warn', undefined],
+            description: 'Toolbar color.',
+            defaultValue: undefined,
+            table: {
+                type: { summary: 'ThemePalette' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        title: {
+            control: 'text',
+            description: 'Toolbar title.',
+            defaultValue: '',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '' }
+            }
+        },
+        toolbarTitle: {
+            name: 'with adf-toolbar-title component',
+            control: 'boolean',
+            description: 'Showcase content projection with <span style="color:red">adf-toolbar-title</span> component',
+            defaultValue: false,
+            table: {
+                category: 'Content Projection',
+                type: {
+                    summary: 'code',
+                    detail: '<adf-toolbar-title>Projected Title</adf-toolbar-title>'
+                },
+                defaultValue: { summary: false }
+            }
+        },
+        toolbarDivider: {
+            name: 'with adf-toolbar-divider component',
+            control: 'boolean',
+            description: 'Showcase content projection with <span style="color:red">adf-toolbar-divider</span> component',
+            defaultValue: false,
+            table: {
+                category: 'Content Projection',
+                type: {
+                    summary: 'code',
+                    detail: 'left<adf-toolbar-divider></adf-toolbar-divider>right'
+                },
+                defaultValue: { summary: false }
+            }
+        },
+        anyContentProjection: {
+            name: 'with any component / selector',
+            control: 'boolean',
+            description: 'Showcase content projection with any component / selector',
+            defaultValue: false,
+            table: {
+                category: 'Content Projection',
+                type: {
+                    summary: 'code',
+                    detail: '<span style="color:red">projected content</span>'
+                },
+                defaultValue: { summary: false }
+            }
         }
     }
 } as Meta;
 
-const template: Story<ToolbarComponent> = (args: ToolbarComponent) => ({
-    props: args
+const template: Story<ToolbarComponent> = (args: ToolbarComponent & { anyContentProjection: boolean } & { toolbarDivider: boolean } & { toolbarTitle: boolean } ) => ({
+    props: args,
+    template: `
+    <adf-toolbar color="${args.color}" title="${args.title}">
+        <ng-container *ngIf="${args.toolbarTitle}"><adf-toolbar-title>Projected Title</adf-toolbar-title></ng-container>
+        <ng-container *ngIf="${args.anyContentProjection}">
+            <span style="color:red">projected content</span>
+        </ng-container>
+        <ng-container *ngIf="${args.toolbarDivider}">left<adf-toolbar-divider></adf-toolbar-divider>right</ng-container>
+    </adf-toolbar>`
 });
 
-export const primary = template.bind({});
-primary.args = {
-    title: 'Alfresco Storybook App',
-    color: 'primary'
-};
-
-export const invalidOrMissingColor = template.bind({});
-invalidOrMissingColor.args = {
-    title: 'Alfresco Storybook App',
-    color: undefined
-};
+export const toolbar = template.bind({});