[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

e2e-playwright/page-object/index.ts

@@ -7,4 +7,4 @@
  */
 
 export * from './components';
-export * from './stories/base.storie';
+export * from './stories/base.stories';

e2e-playwright/page-object/stories/base.storie.ts

@@ -1,30 +0,0 @@
-/*
- * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
- *
- * License rights for this program may be obtained from Alfresco Software, Ltd.
- * pursuant to a written agreement and any use of this program without such an
- * agreement is prohibited.
- */
-
-import { Page } from '@playwright/test';
-import { timeouts } from '../../utils/timeouts';
-import { ComponentTitles } from '../../models/component-titles.model';
-import { PlaywrightBase } from '../playwright-base';
-
-interface NavigateParameters { componentName: string; story: string };
-
-export class BaseStories extends PlaywrightBase {
-    private rootComponentTitle: string;
-
-    constructor(page: Page, rootComponentTitle: ComponentTitles) {
-        super(page);
-        this.rootComponentTitle = rootComponentTitle;
-    }
-
-    async navigateTo({ componentName, story }: NavigateParameters): Promise<void> {
-        await this.page.goto(`/iframe.html?id=${this.rootComponentTitle}-components-${componentName}--${story}`, {
-            waitUntil: 'networkidle',
-            timeout: timeouts.large
-        });
-    }
-}

e2e-playwright/page-object/stories/base.stories.ts

@@ -0,0 +1,39 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { Page } from '@playwright/test';
+import { timeouts } from '../../utils/timeouts';
+import { ComponentTitles } from '../../models/component-titles.model';
+import { PlaywrightBase } from '../playwright-base';
+
+interface NavigationParameters {
+    moduleNames: string[];
+    componentName: string;
+    story: string;
+};
+
+export class BaseStories extends PlaywrightBase {
+    private libraryName: string;
+
+    constructor(page: Page, libraryName: ComponentTitles) {
+        super(page);
+        this.libraryName = libraryName;
+    }
+
+    private buildStoryId({ moduleNames, componentName, story }: NavigationParameters): string{
+        const moduleNamesConcatenated = moduleNames.reduce((module, submodule) => module + '-' + submodule);
+        return this.libraryName + '-' + moduleNamesConcatenated + '-' + componentName + '--' + story;
+    }
+
+    async navigateTo(navigationParameters: NavigationParameters): Promise<void> {
+        await this.page.goto(`/iframe.html?args=&viewMode=story&id=${this.buildStoryId(navigationParameters)}`, {
+            waitUntil: 'networkidle',
+            timeout: timeouts.large
+        });
+    }
+}

e2e-playwright/process-services-cloud/specs/groups-cloud.e2e.ts

@@ -17,7 +17,7 @@ test.describe('Groups component stories tests', () => {
             Meat Chicken  cancel
         `;
 
-        await processServicesCloud.navigateTo({ componentName: 'group', story: 'valid-preselected-groups' });
+        await processServicesCloud.navigateTo({moduleNames:['group-cloud'], componentName: 'group-cloud', story: 'valid-preselected-groups' });
 
         await expect(groupComponent.groupNaming).toContainText(expectedUsersName);
     });
@@ -28,7 +28,7 @@ test.describe('Groups component stories tests', () => {
             Meat Chicken
         `;
 
-        await processServicesCloud.navigateTo({ componentName: 'group', story: 'mandatory-preselected-groups' });
+        await processServicesCloud.navigateTo({moduleNames:['group-cloud'], componentName: 'group-cloud', story: 'mandatory-preselected-groups' });
         await expect.soft(groupComponent.groupNaming).toContainText(expectedUsersName);
 
         await groupComponent.getUserLocator('Meat Chicken').hover();
@@ -39,7 +39,7 @@ test.describe('Groups component stories tests', () => {
         const expectedWarningMessage = 'No group found with the name Invalid Group';
         const expectedWarningIcon = 'error_outline';
 
-        await processServicesCloud.navigateTo({ componentName: 'group', story: 'invalid-preselected-groups' });
+        await processServicesCloud.navigateTo({moduleNames:['group-cloud'], componentName: 'group-cloud', story: 'invalid-preselected-groups' });
 
         await expect(groupComponent.error.content).toContainText(expectedWarningIcon + expectedWarningMessage);
     });

e2e-playwright/process-services-cloud/specs/people-cloud.e2e.ts

@@ -18,7 +18,7 @@ test.describe('People component stories tests', () => {
             Kielbasa Sausage  cancel
         `;
 
-        await processServicesCloud.navigateTo({ componentName: 'people', story: 'valid-preselected-users' });
+        await processServicesCloud.navigateTo({moduleNames:['people-cloud'], componentName: 'people-cloud', story: 'valid-preselected-users' });
 
         await expect(peopleComponent.usersNaming).toContainText(expectedUsersName);
     });
@@ -29,7 +29,7 @@ test.describe('People component stories tests', () => {
             Shepherds Pie  cancel
         `;
 
-        await processServicesCloud.navigateTo({ componentName: 'people', story: 'mandatory-preselected-users' });
+        await processServicesCloud.navigateTo({moduleNames:['people-cloud'], componentName: 'people-cloud', story: 'mandatory-preselected-users' });
         await peopleComponent.getUserLocator('Kielbasa Sausage').hover();
 
         await expect.soft(peopleComponent.usersNaming).toContainText(expectedUsersName);
@@ -40,7 +40,7 @@ test.describe('People component stories tests', () => {
         const expectedWarningMessage = 'No user found with the username Invalid User';
         const expectedWarningIcon = 'error_outline';
 
-        await processServicesCloud.navigateTo({ componentName: 'people', story: 'invalid-preselected-users' });
+        await processServicesCloud.navigateTo({moduleNames:['people-cloud'], componentName: 'people-cloud', story: 'invalid-preselected-users' });
 
         await expect(peopleComponent.error.content).toContainText(expectedWarningIcon + expectedWarningMessage);
     });
@@ -51,7 +51,7 @@ test.describe('People component stories tests', () => {
             yorkshire
         `;
 
-        await processServicesCloud.navigateTo({ componentName: 'people', story: 'excluded-users' });
+        await processServicesCloud.navigateTo({moduleNames:['people-cloud'], componentName: 'people-cloud', story: 'excluded-users' });
         await peopleComponent.usersInput.type('user');
 
         await expect(peopleComponent.listbox.allOptions).not.toContainText(expectedExcludedUsers);
@@ -60,7 +60,7 @@ test.describe('People component stories tests', () => {
     test('No Users', async ({ processServicesCloud, peopleComponent }) => {
         const expectedInformation = 'No user found with the username user';
 
-        await processServicesCloud.navigateTo({ componentName: 'people', story: 'no-users' });
+        await processServicesCloud.navigateTo({moduleNames:['people-cloud'], componentName: 'people-cloud', story: 'no-users' });
         await peopleComponent.usersInput.type('user');
 
         await expect(peopleComponent.listbox.oneOption).toContainText(expectedInformation);

lib/content-services/.storybook/preview.js

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

lib/content-services/src/lib/social/like.component.html

@@ -7,7 +7,7 @@
     </div>
     <div class="adf-like-counter-container">
         <div id="adf-like-counter" class="adf-like-counter">{{likesCounter}}</div>
-        <div class="adf-left" *ngIf="likesCounter<=1">Like</div>
+        <div class="adf-left" *ngIf="likesCounter===1">Like</div>
-        <div class="adf-left" *ngIf="likesCounter>1">Likes</div>
+        <div class="adf-left" *ngIf="likesCounter!==1">Likes</div>
     </div>
 </div>

lib/content-services/src/lib/social/like.component.stories.ts

@@ -23,7 +23,7 @@ import { SocialModule } from './social.module';
 
 export default {
     component: LikeComponent,
-    title: 'Content Services/Components/Like',
+    title: 'Content Services/Social/Like',
     decorators: [
         moduleMetadata({
             imports: [SocialModule],
@@ -33,7 +33,19 @@ export default {
         })
     ],
     argTypes: {
-        nodeId: { table: { disable: true } }
+        nodeId: {
+            control: 'text',
+            description: 'Identifier of a node to apply likes to.',
+            defaultValue:'fake-like-node-id',
+            table: {
+                type: { summary: 'string' }
+            }
+        },
+        changeVote: {
+            action: 'changeVote',
+            description: 'Emitted when the "vote" gets changed.',
+            table: { category: 'Actions' }
+        }
     }
 } as Meta;
 
@@ -41,7 +53,4 @@ const template: Story<LikeComponent> = (args: LikeComponent) => ({
     props: args
 });
 
-export const primary = template.bind({});
+export const like = template.bind({});
-primary.args = {
-    nodeId: 'fake-like-node-id'
-};

lib/core/.storybook/preview.js

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

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({});
+export const about = template.bind({});
-
+about.args = {
-devAbout.args = {
-    dev: true,
     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: {
+    props: args
-        ...args,
-        clickRow: action('clickRow')
-    }
 });
 
 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' },
+                type: { summary: 'string' }
-                defaultValue: { summary: 'undefined' }
             },
             if: { arg: 'taskId', exists: false }
         },
         taskId: {
             control: 'text',
             description: 'Necessary in order to add a new Task comment',
-            defaultValue: undefined,
             table: {
-                type: { summary: 'string' },
+                type: { summary: 'string' }
-                defaultValue: { summary: 'undefined' }
             },
             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' },
+                type: { summary: 'ThemePalette' },
-                defaultValue: { summary: 'primary' }
+                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: {
+    controls: { exclude: ['cardText'] }
-        exclude: ['cardText'],
-        expanded: true
-    }
 };
 
 export const tabLayoutWithIconLabels = tabLayoutTemplate.bind({});
@@ -260,10 +258,7 @@ tabLayoutWithIconLabels.args = {
 };
 
 tabLayoutWithIconLabels.parameters = {
-    controls: {
+    controls: { exclude: ['cardText'] }
-        exclude: ['cardText'],
-        expanded: true
-    }
 };
 
 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: {
+    props: args
-        ...args,
-        changedLanguage: action('changedLanguage')
-    }
 });
 
 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: {
+    props: args
-        ...args,
-        changedLanguage: action('changedLanguage')
-    }
 });
 
 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' },
-                type: {
+                defaultValue: { summary: 'cake' }
-                    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' }
-                type: {
-                    summary: 'string'
-                },
-                defaultValue: {
-                    summary: ''
-                }
             }
         },
         subtitle: {
+            control: 'text',
+            description: 'String or Resource Key for the subtitle.',
+            defaultValue: 'subtitle',
             table: {
-                category: 'Component Inputs',
+                type: { summary: 'string' }
-                type: {
-                    summary: 'string'
-                },
-                defaultValue: {
-                    summary: ''
-                }
             }
         },
-        lines: {
+        anyContentProjection: {
-            name: 'lines',
+            name: 'with any component / selector',
-            description: 'Content Projection Text',
+            control: 'boolean',
-            control: {type: 'object'},
+            description: 'Showcase content projection with any component / selector',
-            defaultValue: [
+            defaultValue: false,
-                'Items you removed are moved to the Trash',
-                'Empty Trash to permanently delete items'
-            ],
             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> = (
+const template: Story<EmptyContentComponent> = ( args: EmptyContentComponent & { anyContentProjection: boolean } ) => ({
-    args: EmptyContentComponent
+    props: args,
-) => ({
-    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
-    },
     template: `
-    <adf-empty-content icon="delete" title="Trash is empty">
+    <adf-empty-content icon="${args.icon}" title="${args.title}" subtitle="${args.subtitle}">
-        <p class="adf-empty-content__text" *ngFor="let line of ${JSON.stringify(
+        <div *ngIf="${args.anyContentProjection}" style="color:red">
-            args.lines
+            projected content
-        ).replace(/\"/g, '\'')}">
+        </div>
-            {{ line }}
-        </p>
     </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',
+            control: 'text',
-            description: 'Component level Error Code',
+            description: 'Error code associated with this error.',
+            defaultValue: 'UNKNOWN',
             table: {
-                category: 'Component Inputs',
+                type: { summary: 'string' },
-                type: {
+                defaultValue: { summary: 'UNKNOWN' }
-                    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
             }
         },
-        isAdditionalContent: {
+        errorContentActions: {
-            type: 'boolean',
+            name: 'with adf-error-content-actions selector',
-            description: 'Enable Content Projection',
+            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: {
+                defaultValue: { summary: false }
-                    summary: false
-                }
             }
         }
     }
 } as Meta;
 
-const templateArgTypes = {
+const template: Story<ErrorContentComponent> = ( args: ErrorContentComponent & { errorContentActions: boolean } ) => ({
-    errorCode: {
-        control: {
-            disable: true
-        }
-    }
-};
-
-const template: Story<ErrorContentComponent> = (
-    args: ErrorContentComponent & { isAdditionalContent: boolean }
-) => ({
     props: args,
     template: `
-        <adf-error-content>
+    <adf-error-content errorCode="${args.errorCode}">
-            <div adf-error-content-actions *ngIf="${args.isAdditionalContent}">
+        <div adf-error-content-actions *ngIf="${args.errorContentActions}">
-            <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}">
         <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) => ({
+const template: Story<ToolbarComponent> = (args: ToolbarComponent & { anyContentProjection: boolean } & { toolbarDivider: boolean } & { toolbarTitle: boolean } ) => ({
-    props: args
+    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({});
+export const toolbar = template.bind({});
-primary.args = {
-    title: 'Alfresco Storybook App',
-    color: 'primary'
-};
-
-export const invalidOrMissingColor = template.bind({});
-invalidOrMissingColor.args = {
-    title: 'Alfresco Storybook App',
-    color: undefined
-};

lib/process-services-cloud/.storybook/preview.js

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

lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.stories.ts

@@ -23,19 +23,30 @@ import { fakeApplicationInstance } from '../mock/app-model.mock';
 
 export default {
     component: AppDetailsCloudComponent,
-    title: 'Process Services Cloud/Components/App Details',
+    title: 'Process Services Cloud/App List Cloud/App Details Cloud',
     decorators: [
         moduleMetadata({
             imports: [ProcessServicesCloudStoryModule, AppListCloudModule]
         })
-    ]
+    ],
+    argTypes: {
+        applicationInstance: {
+            control: 'object',
+            defaultValue: fakeApplicationInstance[0],
+            table: {
+                type: { summary: 'ApplicationInstanceModel' }
+            }
+        },
+        selectedApp: {
+            action: 'selectedApp',
+            description: 'Emitted when an app entry is clicked.',
+            table: { category: 'Actions' }
+        }
+    }
 } as Meta;
 
 const template: Story<AppDetailsCloudComponent> = (args: AppDetailsCloudComponent) => ({
     props: args
 });
 
-export const primary = template.bind({});
+export const appDetailsCloud = template.bind({});
-primary.args = {
-    applicationInstance: fakeApplicationInstance
-};

lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.stories.ts

@@ -22,7 +22,7 @@ import { AppListCloudComponent } from './app-list-cloud.component';
 
 export default {
     component: AppListCloudComponent,
-    title: 'Process Services Cloud/Components/App List',
+    title: 'Process Services Cloud/App List Cloud/App List Cloud',
     decorators: [
         moduleMetadata({
             imports: [ProcessServicesCloudStoryModule, AppListCloudModule]
@@ -30,10 +30,19 @@ export default {
     ],
     argTypes: {
         layoutType: {
+            control: 'radio',
             options: ['GRID', 'LIST'],
-            control: {
+            defaultValue: 'GRID',
-                type: 'radio'
+            description: 'Defines the layout of the apps.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'GRID' }
             }
+        },
+        appClick: {
+            action: 'appClick',
+            description: 'Emitted when an app entry is clicked.',
+            table: { category: 'Actions' }
         }
     }
 } as Meta;
@@ -42,7 +51,4 @@ const template: Story<AppListCloudComponent> = (args) => ({
     props: args
 });
 
-export const primary = template.bind({});
+export const appListCloud = template.bind({});
-primary.args = {
-    layoutType: 'GRID'
-};

lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.stories.ts

@@ -23,19 +23,39 @@ import { DateRangeFilterComponent } from './date-range-filter.component';
 
 export default {
     component: DateRangeFilterComponent,
-    title: 'Process Services Cloud/Components/Date Range Filter',
+    title: 'Process Services Cloud/Process Common/Date Range Filter',
     decorators: [
         moduleMetadata({
             imports: [ProcessServicesCloudStoryModule, ProcessCommonModule]
         })
-    ]
+    ],
+    argTypes: {
+        processFilterProperty: {
+            control: 'object',
+            defaultValue: mockFilterProperty,
+            table: {
+                type: { summary: 'ApplicationInstanceModel' }
+            }
+        },
+        options: {
+            control: 'object',
+            table: {
+                type: { summary: 'DateCloudFilterType[]' }
+            }
+        },
+        dateChanged: {
+            action: 'dateChanged',
+            table: { category: 'Actions' }
+        },
+        dateTypeChange: {
+            action: 'dateTypeChange',
+            table: { category: 'Actions' }
+        }
+    }
 } as Meta;
 
 const template: Story<DateRangeFilterComponent> = (args: DateRangeFilterComponent) => ({
     props: args
 });
 
-export const primary = template.bind({});
+export const dateRangeFilter = template.bind({});
-primary.args = {
-    processFilterProperty: mockFilterProperty
-};

lib/process-services-cloud/src/lib/form/components/form-definition-selector-cloud.component.stories.ts

@@ -24,7 +24,7 @@ import { FormDefinitionSelectorCloudServiceMock } from '../mocks/form-definition
 
 export default {
     component: FormDefinitionSelectorCloudComponent,
-    title: 'Process Services Cloud/Components/Form Definition Selector',
+    title: 'Process Services Cloud/Form Cloud/Form Definition Selector Cloud',
     decorators: [
         moduleMetadata({
             imports: [ProcessServicesCloudStoryModule, FormCloudModule],
@@ -34,7 +34,20 @@ export default {
         })
     ],
     argTypes: {
-        appName: { table: { disable: true } }
+        appName: {
+            control: 'text',
+            defaultValue: '',
+            description: 'Name of the application. If specified, this shows the users who have access to the app.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '' }
+            }
+        },
+        selectForm: {
+            action: 'selectForm',
+            description: 'Emitted when a form is selected.',
+            table: { category: 'Actions' }
+        }
     }
 } as Meta;
 
@@ -42,7 +55,4 @@ const template: Story<FormDefinitionSelectorCloudComponent> = (args: FormDefinit
     props: args
 });
 
-export const primary = template.bind({});
+export const formDefinitionSelectorCloud = template.bind({});
-primary.args = {
-    appName: 'app'
-};

lib/process-services-cloud/src/lib/group/components/group-cloud.component.stories.ts

@@ -26,10 +26,13 @@ import {
     mockMeatChicken,
     mockVegetableAubergine
 } from '../mock/group-cloud.mock';
+import { FormControl } from '@angular/forms';
+
+const defaultFormControl = new FormControl({ value: '', disabled: false });
 
 export default {
     component: GroupCloudComponent,
-    title: 'Process Services Cloud/Components/Group',
+    title: 'Process Services Cloud/Group Cloud/Group Cloud',
     decorators: [
         moduleMetadata({
             imports: [ProcessServicesCloudStoryModule, GroupCloudModule],
@@ -39,10 +42,118 @@ export default {
         })
     ],
     argTypes: {
-        appName: { table: { disable: true } },
+        appName: {
+            control: 'text',
+            description: 'Name of the application. If specified this shows the groups who have access to the app.',
+            defaultValue: 'app',
+            table: {
+                type: { summary: 'string' }
+            }
+        },
+        title: {
+            control: 'text',
+            description: 'Title of the field.',
+            defaultValue: 'Groups',
+            table: {
+                type: { summary: 'string' }
+            }
+        },
         mode: {
+            control: 'radio',
             options: ['single', 'multiple'],
-            control: 'radio'
+            description: 'Group selection mode.',
+            defaultValue: 'single',
+            table: {
+                type: { summary: 'ComponentSelectionMode' },
+                defaultValue: { summary: 'single' }
+            }
+        },
+        preSelectGroups: {
+            control: 'object',
+            description: 'Array of groups to be pre-selected. This pre-selects all groups in multi selection mode and only the first group of the array in single selection mode.',
+            defaultValue: [],
+            table: {
+                type: { summary: 'IdentityGroupModel[]' },
+                defaultValue: { summary: '[]' }
+            }
+        },
+        validate: {
+            control: 'boolean',
+            description: 'This flag enables the validation on the preSelectGroups passed as input.\n\n'+
+            'In case the flag is true the components call the identity service to verify the validity of the information passed as input.\n\n'+
+            'Otherwise, no check will be done.',
+            defaultValue: false,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        },
+        readOnly: {
+            control: 'boolean',
+            description: 'Show the info in readonly mode.',
+            defaultValue: false,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        },
+        required: {
+            control: 'boolean',
+            description: 'Mark this field as required.',
+            defaultValue: false,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        },
+        groupChipsCtrl: {
+            control: 'object',
+            description: 'FormControl to list of group.',
+            mapping: { default: defaultFormControl },
+            table: {
+                type: { summary: 'FormControl' },
+                defaultValue: { summary: 'new FormControl({ value: \'\', disabled: false })' },
+                category: 'Form Controls'
+            }
+        },
+        searchGroupsControl: {
+            control: 'object',
+            description: 'FormControl to search the group.',
+            mapping: { default: defaultFormControl },
+            table: {
+                type: { summary: 'FormControl' },
+                defaultValue: { summary: 'new FormControl({ value: \'\', disabled: false })' },
+                category: 'Form Controls'
+            }
+        },
+        roles: {
+            control: 'object',
+            description: 'Role names of the groups to be listed.',
+            defaultValue: [],
+            table: {
+                type: { summary: 'string[]' },
+                defaultValue: { summary: '[]' }
+            }
+        },
+        selectGroup: {
+            action: 'selectGroup',
+            description: 'Emitted when a group is selected.',
+            table: { category: 'Actions' }
+        },
+        removeGroup: {
+            action: 'removeGroup',
+            description: 'Emitted when a group is removed.',
+            table: { category: 'Actions' }
+        },
+        changedGroups: {
+            action: 'changedGroups',
+            description: 'Emitted when a group selection changes.',
+            table: { category: 'Actions' }
+        },
+        warning: {
+            action: 'warning',
+            description: 'Emitted when an warning occurs.',
+            table: { category: 'Actions' }
         }
     }
 } as Meta;
@@ -51,19 +162,15 @@ const template: Story<GroupCloudComponent> = (args: GroupCloudComponent) => ({
     props: args
 });
 
-export const primary = template.bind({});
+export const defaultGroupCloud = template.bind({});
-primary.args = {
+defaultGroupCloud.args = {
-    appName: 'app',
+    groupChipsCtrl: 'default',
-    mode: 'single',
+    searchGroupsControl: 'default'
-    preSelectGroups: [],
-    readOnly: false,
-    title: 'Groups',
-    validate: false
 };
 
 export const validPreselectedGroups = template.bind({});
 validPreselectedGroups.args = {
-    ...primary.args,
+    ...defaultGroupCloud.args,
     validate: true,
     mode: 'multiple',
     preSelectGroups: mockFoodGroups
@@ -71,7 +178,7 @@ validPreselectedGroups.args = {
 
 export const mandatoryPreselectedGroups = template.bind({});
 mandatoryPreselectedGroups.args = {
-    ...primary.args,
+    ...defaultGroupCloud.args,
     validate: true,
     mode: 'multiple',
     preSelectGroups: [mockVegetableAubergine, { ...mockMeatChicken, readonly: true }]
@@ -79,14 +186,8 @@ mandatoryPreselectedGroups.args = {
 
 export const invalidPreselectedGroups = template.bind({});
 invalidPreselectedGroups.args = {
-    ...primary.args,
+    ...defaultGroupCloud.args,
     validate: true,
     mode: 'multiple',
     preSelectGroups: [{ id: 'invalid-group', name: 'Invalid Group' }]
 };
-
-export const invalidOrEmptyAppName = template.bind({});
-invalidOrEmptyAppName.args = {
-    ...primary.args,
-    appName: undefined
-};

lib/process-services-cloud/src/lib/people/components/people-cloud.component.stories.ts

@@ -27,23 +27,151 @@ import {
     mockShepherdsPie,
     mockYorkshirePudding
 } from '../mock/people-cloud.mock';
+import { FormControl } from '@angular/forms';
+
+const defaultFormControl = new FormControl({ value: '', disabled: false });
 
 export default {
     component: PeopleCloudComponent,
-    title: 'Process Services Cloud/Components/People',
+    title: 'Process Services Cloud/People Cloud/People Cloud',
     decorators: [
         moduleMetadata({
             imports: [ProcessServicesCloudStoryModule, PeopleCloudModule],
             providers: [
-                { provide: IdentityUserService, useClass: IdentityUserServiceMock}
+                { provide: IdentityUserService, useClass: IdentityUserServiceMock }
             ]
         })
     ],
     argTypes: {
-        appName: { table: { disable: true } },
+        appName: {
+            control: 'text',
+            description: 'Name of the application. If specified, this shows the users who have access to the app.',
+            defaultValue: 'app',
+            table: {
+                type: { summary: 'string' }
+            }
+        },
         mode: {
+            control: 'radio',
             options: ['single', 'multiple'],
-            control: 'radio'
+            description: 'User selection mode.',
+            defaultValue: 'single',
+            table: {
+                type: { summary: 'ComponentSelectionMode' },
+                defaultValue: { summary: 'single' }
+            }
+        },
+        roles: {
+            control: 'object',
+            description: 'Role names of the users to be listed.',
+            defaultValue: [],
+            table: {
+                type: { summary: 'string[]' },
+                defaultValue: { summary: '[]' }
+            }
+        },
+        validate: {
+            control: 'boolean',
+            description: 'This flag enables the validation on the preSelectUsers passed as input.\n\n'+
+            'In case the flag is true the components call the identity service to verify the validity of the information passed as input.\n\n'+
+            'Otherwise, no check will be done.',
+            defaultValue: false,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        },
+        readOnly: {
+            control: 'boolean',
+            description: 'Show the info in readonly mode.',
+            defaultValue: false,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        },
+        required: {
+            control: 'boolean',
+            description: 'Mark this field as required.',
+            defaultValue: false,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        },
+        preSelectUsers: {
+            control: 'object',
+            description: 'Array of users to be pre-selected. All users in the array are pre-selected in multi selection mode, but only the first user is pre-selected in single selection mode. Mandatory properties are: id, email, username',
+            defaultValue: [],
+            table: {
+                type: { summary: 'IdentityUserModel[]' },
+                defaultValue: { summary: '[]' }
+            }
+        },
+        excludedUsers: {
+            control: 'object',
+            description: 'Array of users to be excluded. Mandatory properties are: id, email, username',
+            defaultValue: [],
+            table: {
+                type: { summary: 'IdentityUserModel[]' },
+                defaultValue: { summary: '[]' }
+            }
+        },
+        groupsRestriction: {
+            control: 'object',
+            description: 'Array of groups to restrict user searches. Mandatory property is group name',
+            defaultValue: [],
+            table: {
+                type: { summary: 'string[]' },
+                defaultValue: { summary: '[]' }
+            }
+        },
+        userChipsCtrl: {
+            control: 'object',
+            description: 'FormControl to list of users.',
+            mapping: { default: defaultFormControl },
+            table: {
+                type: { summary: 'FormControl' },
+                defaultValue: { summary: 'new FormControl({ value: \'\', disabled: false })' },
+                category: 'Form Controls'
+            }
+        },
+        searchUserCtrl: {
+            control: 'object',
+            description: 'FormControl to search the user.',
+            mapping: { default: defaultFormControl },
+            table: {
+                type: { summary: 'FormControl' },
+                defaultValue: { summary: 'new FormControl({ value: \'\', disabled: false })' },
+                category: 'Form Controls'
+            }
+        },
+        title: {
+            control: 'text',
+            description: 'Title of the field.',
+            table: {
+                type: { summary: 'string' }
+            }
+        },
+        selectUser: {
+            action: 'selectUser',
+            description: 'Emitted when a user is selected.',
+            table: { category: 'Actions' }
+        },
+        removeUser: {
+            action: 'removeUser',
+            description: 'Emitted when a selected user is removed in multi selection mode.',
+            table: { category: 'Actions' }
+        },
+        changedUsers: {
+            action: 'changedUsers',
+            description: 'Emitted when a user selection changes.',
+            table: { category: 'Actions' }
+        },
+        warning: {
+            action: 'warning',
+            description: 'Emitted when an warning occurs.',
+            table: { category: 'Actions' }
         }
     }
 } as Meta;
@@ -52,20 +180,15 @@ const template: Story<PeopleCloudComponent> = (args: PeopleCloudComponent) => ({
     props: args
 });
 
-export const primary = template.bind({});
+export const defaultPeopleCloud = template.bind({});
-primary.args = {
+defaultPeopleCloud.args = {
-    appName: 'app',
+    userChipsCtrl: 'default',
-    excludedUsers: [],
+    searchUserCtrl: 'default'
-    mode: 'single',
-    preSelectUsers: [],
-    readOnly: false,
-    title: 'Users',
-    validate: false
 };
 
 export const validPreselectedUsers = template.bind({});
 validPreselectedUsers.args = {
-    ...primary.args,
+    ...defaultPeopleCloud.args,
     validate: true,
     mode: 'multiple',
     preSelectUsers: mockFoodUsers
@@ -73,7 +196,7 @@ validPreselectedUsers.args = {
 
 export const mandatoryPreselectedUsers = template.bind({});
 mandatoryPreselectedUsers.args = {
-    ...primary.args,
+    ...defaultPeopleCloud.args,
     validate: true,
     mode: 'multiple',
     preSelectUsers: [{ ...mockKielbasaSausage, readonly: true }, mockShepherdsPie]
@@ -81,7 +204,7 @@ mandatoryPreselectedUsers.args = {
 
 export const invalidPreselectedUsers = template.bind({});
 invalidPreselectedUsers.args = {
-    ...primary.args,
+    ...defaultPeopleCloud.args,
     validate: true,
     mode: 'multiple',
     preSelectUsers: [{ id: 'invalid-user', username: 'Invalid User', firstName: 'Invalid', lastName: 'User', email: 'invalid@xyz.com' }]
@@ -89,7 +212,7 @@ invalidPreselectedUsers.args = {
 
 export const excludedUsers = template.bind({});
 excludedUsers.args = {
-    ...primary.args,
+    ...defaultPeopleCloud.args,
     excludedUsers: [
         mockKielbasaSausage,
         mockYorkshirePudding
@@ -98,12 +221,12 @@ excludedUsers.args = {
 
 export const noUsers = template.bind({});
 noUsers.args = {
-    ...primary.args,
+    ...defaultPeopleCloud.args,
     excludedUsers: mockFoodUsers
 };
 
 export const invalidOrEmptyAppName = template.bind({});
 invalidOrEmptyAppName.args = {
-    ...primary.args,
+    ...defaultPeopleCloud.args,
     appName: null
 };

lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.stories.ts

@@ -24,7 +24,7 @@ import { ProcessCloudService } from '../../services/process-cloud.service';
 
 export default {
     component: ProcessHeaderCloudComponent,
-    title: 'Process Services Cloud/Components/Process Header',
+    title: 'Process Services Cloud/Process Cloud/Process Header Cloud/Process Header Cloud',
     decorators: [
         moduleMetadata({
             imports: [ProcessServicesCloudStoryModule, ProcessHeaderCloudModule],
@@ -32,8 +32,22 @@ export default {
         })
     ],
     argTypes: {
-        appName: { table: { disable: true } },
+        appName: {
-        processInstanceId: { table: { disable: true } }
+            control: 'text',
+            description: '(Required) The name of the application.',
+            defaultValue: '',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '' }
+            }
+        },
+        processInstanceId: {
+            control: 'text',
+            description: '(Required) The id of the process instance.',
+            table: {
+                type: { summary: 'string' }
+            }
+        }
     }
 } as Meta;
 
@@ -41,8 +55,8 @@ const template: Story<ProcessHeaderCloudComponent> = (args: ProcessHeaderCloudCo
     props: args
 });
 
-export const primary = template.bind({});
+export const defaultProcessHeaderCloud = template.bind({});
-primary.args = {
+defaultProcessHeaderCloud.args = {
     appName: 'app',
     processInstanceId: 'mock-process-id'
 };

lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.stories.ts

@@ -26,7 +26,7 @@ import { ProcessServicesCloudStoryModule } from '../../../testing/process-servic
 
 export default {
     component: TaskFormCloudComponent,
-    title: 'Process Services Cloud/Components/Task Form',
+    title: 'Process Services Cloud/Task Cloud/Task Form/Task Form Cloud',
     decorators: [
         moduleMetadata({
             imports: [ProcessServicesCloudStoryModule, TaskFormModule],
@@ -37,9 +37,116 @@ export default {
         })
     ],
     argTypes: {
-        appName: { table: { disable: true } },
+        appName: {
-        taskId: { table: { disable: true } },
+            control: 'text',
-        readOnly: { table: { disable: true } }
+            description: 'App id to fetch corresponding form and values.',
+            defaultValue: '',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '' }
+            }
+        },
+        taskId: {
+            control: 'text',
+            description: 'Task id to fetch corresponding form and values.',
+            table: {
+                type: { summary: 'string' }
+            }
+        },
+        showTitle: {
+            control: 'boolean',
+            description: 'Toggle rendering of the form title.',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' }
+            }
+        },
+        showRefreshButton: {
+            control: 'boolean',
+            description: 'Toggle rendering of the `Refresh` button.',
+            defaultValue: false,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        },
+        showValidationIcon: {
+            control: 'boolean',
+            description: 'Toggle rendering of the `Validation` icon.',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' }
+            }
+        },
+        showCancelButton: {
+            control: 'boolean',
+            description: 'Toggle rendering of the `Cancel` button.',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' }
+            }
+        },
+        showCompleteButton: {
+            control: 'boolean',
+            description: 'Toggle rendering of the `Complete` button.',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' }
+            }
+        },
+        readOnly: {
+            control: 'boolean',
+            description: 'Toggle readonly state of the task.',
+            defaultValue: false,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        },
+        formSaved: {
+            action: 'formSaved',
+            description: 'Emitted when the form is saved.',
+            table: { category: 'Actions' }
+        },
+        formCompleted: {
+            action: 'formCompleted',
+            description: 'Emitted when the form is submitted with the `Complete` outcome.',
+            table: { category: 'Actions' }
+        },
+        taskCompleted: {
+            action: 'taskCompleted',
+            description: 'Emitted when the task is completed.',
+            table: { category: 'Actions' }
+        },
+        taskClaimed: {
+            action: 'taskClaimed',
+            description: 'Emitted when the task is claimed.',
+            table: { category: 'Actions' }
+        },
+        taskUnclaimed: {
+            action: 'taskUnclaimed',
+            description: 'mitted when the task is unclaimed.',
+            table: { category: 'Actions' }
+        },
+        cancelClick: {
+            action: 'cancelClick',
+            description: 'Emitted when the cancel button is clicked.',
+            table: { category: 'Actions' }
+        },
+        formContentClicked: {
+            action: 'formContentClicked',
+            description: 'Emitted when form content is clicked.',
+            table: { category: 'Actions' }
+        },
+        error: {
+            action: 'error',
+            description: 'Emitted when any error occurs.',
+            table: { category: 'Actions' }
+        }
     }
 } as Meta;
 
@@ -47,44 +154,20 @@ const template: Story<TaskFormCloudComponent> = (args: TaskFormCloudComponent) =
     props: args
 });
 
-export const primary = template.bind({});
+export const defaultTaskFormCloud = template.bind({});
-primary.args = {
+defaultTaskFormCloud.args = {
     appName: 'app',
-    readOnly: false,
-    showCancelButton: true,
-    showCompleteButton: true,
-    showRefreshButton: false,
-    showTitle: true,
-    showValidationIcon: true,
     taskId: 'mock-task-with-form'
 };
 
-export const readOnly = template.bind({});
-readOnly.args = {
-    ...primary.args,
-    readOnly: true
-};
-
-export const showRefreshButton = template.bind({});
-showRefreshButton.args = {
-    ...primary.args,
-    showRefreshButton: true
-};
-
-export const hideValidationIcon = template.bind({});
-hideValidationIcon.args = {
-    ...primary.args,
-    showValidationIcon: false
-};
-
 export const invalidOrMissingApp = template.bind({});
 invalidOrMissingApp.args = {
-    ...primary.args,
+    ...defaultTaskFormCloud.args,
     appName: undefined
 };
 
 export const invalidOrMissingTaskId = template.bind({});
 invalidOrMissingTaskId.args = {
-    ...primary.args,
+    ...defaultTaskFormCloud.args,
     taskId: undefined
 };

lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.stories.ts

@@ -24,7 +24,7 @@ import { ProcessServicesCloudStoryModule } from '../../../testing/process-servic
 
 export default {
     component: TaskHeaderCloudComponent,
-    title: 'Process Services Cloud/Components/Task Header',
+    title: 'Process Services Cloud/Task Cloud/Task Header Cloud/Task Header Cloud',
     decorators: [
         moduleMetadata({
             imports: [ProcessServicesCloudStoryModule, TaskHeaderCloudModule],
@@ -34,8 +34,46 @@ export default {
         })
     ],
     argTypes: {
-        appName: { table: { disable: true } },
+        appName: {
-        taskId: { table: { disable: true } }
+            control: 'text',
+            description: '(Required) The name of the application.',
+            defaultValue: '',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '' }
+            }
+        },
+        taskId: {
+            control: 'text',
+            description: '(Required) The id of the task.',
+            table: {
+                type: { summary: 'string' }
+            }
+        },
+        showTitle: {
+            control: 'boolean',
+            description: 'Show/Hide the task title.',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' }
+            }
+        },
+        claim: {
+            action: 'claim',
+            description: 'Emitted when the task is claimed.',
+            table: { category: 'Actions' }
+        },
+        unclaim: {
+            action: 'unclaim',
+            description: 'Emitted when the task is unclaimed (ie, requeued).',
+            table: { category: 'Actions' }
+        },
+        error: {
+            action: 'error',
+            description: 'Emitted when the given task has errors.',
+            table: { category: 'Actions' }
+        }
     }
 } as Meta;
 
@@ -46,7 +84,6 @@ const template: Story<TaskHeaderCloudComponent> = (args: TaskHeaderCloudComponen
 export const assignedAndEditable = template.bind({});
 assignedAndEditable.args = {
     appName: 'app',
-    showTitle: true,
     taskId: 'mock-assigned-task'
 };
 

lib/stories/.storybook/preview.js

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