[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/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({});
-primary.args = {
-    applicationInstance: fakeApplicationInstance
-};
+export const appDetailsCloud = template.bind({});

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: {
-                type: 'radio'
+            defaultValue: 'GRID',
+            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({});
-primary.args = {
-    layoutType: 'GRID'
-};
+export const appListCloud = template.bind({});

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({});
-primary.args = {
-    processFilterProperty: mockFilterProperty
-};
+export const dateRangeFilter = template.bind({});

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({});
-primary.args = {
-    appName: 'app'
-};
+export const formDefinitionSelectorCloud = template.bind({});

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({});
-primary.args = {
-    appName: 'app',
-    mode: 'single',
-    preSelectGroups: [],
-    readOnly: false,
-    title: 'Groups',
-    validate: false
+export const defaultGroupCloud = template.bind({});
+defaultGroupCloud.args = {
+    groupChipsCtrl: 'default',
+    searchGroupsControl: 'default'
 };
 
 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({});
-primary.args = {
-    appName: 'app',
-    excludedUsers: [],
-    mode: 'single',
-    preSelectUsers: [],
-    readOnly: false,
-    title: 'Users',
-    validate: false
+export const defaultPeopleCloud = template.bind({});
+defaultPeopleCloud.args = {
+    userChipsCtrl: 'default',
+    searchUserCtrl: 'default'
 };
 
 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 } },
-        processInstanceId: { table: { disable: true } }
+        appName: {
+            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({});
-primary.args = {
+export const defaultProcessHeaderCloud = template.bind({});
+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 } },
-        taskId: { table: { disable: true } },
-        readOnly: { table: { disable: true } }
+        appName: {
+            control: 'text',
+            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({});
-primary.args = {
+export const defaultTaskFormCloud = template.bind({});
+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 } },
-        taskId: { table: { disable: true } }
+        appName: {
+            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'
 };