mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
[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
This commit is contained in:
Robert Duda
GitHub
parent
c11650a666
commit
9ba86e1ff1
@ -7,4 +7,4 @@
|
||||
*/
|
||||
|
||||
export * from './components';
|
||||
export * from './stories/base.storie';
|
||||
export * from './stories/base.stories';
|
||||
|
||||
@ -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
|
||||
});
|
||||
}
|
||||
}
|
||||
39
e2e-playwright/page-object/stories/base.stories.ts
Normal file
39
e2e-playwright/page-object/stories/base.stories.ts
Normal file
@ -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
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
});
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
export const parameters = {
|
||||
docs: { inlineStories: true }
|
||||
}
|
||||
docs: { inlineStories: true },
|
||||
controls: { expanded: true }
|
||||
};
|
||||
|
||||
@ -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">Likes</div>
|
||||
<div class="adf-left" *ngIf="likesCounter===1">Like</div>
|
||||
<div class="adf-left" *ngIf="likesCounter!==1">Likes</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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({});
|
||||
primary.args = {
|
||||
nodeId: 'fake-like-node-id'
|
||||
};
|
||||
export const like = template.bind({});
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
export const parameters = {
|
||||
docs: { inlineStories: true }
|
||||
}
|
||||
docs: { inlineStories: true },
|
||||
controls: { expanded: true }
|
||||
};
|
||||
|
||||
@ -27,7 +27,7 @@ import { CoreStoryModule } from '../testing/core.story.module';
|
||||
|
||||
export default {
|
||||
component: AboutComponent,
|
||||
title: 'Core/Components/About',
|
||||
title: 'Core/About/About',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CoreStoryModule, AboutModule],
|
||||
@ -38,17 +38,42 @@ export default {
|
||||
{ provide: AppConfigService, useClass: AppConfigServiceMock }
|
||||
]
|
||||
})
|
||||
]
|
||||
],
|
||||
argTypes: {
|
||||
dev: {
|
||||
control: 'boolean',
|
||||
description: 'If active show more information about the app and the platform useful in debug.',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: 'false' }
|
||||
}
|
||||
},
|
||||
pkg: {
|
||||
control: 'object',
|
||||
description: 'pkg json.',
|
||||
table: {
|
||||
type: { summary: 'object' }
|
||||
}
|
||||
},
|
||||
regexp: {
|
||||
control: 'text',
|
||||
description: 'Regular expression for filtering dependencies packages.',
|
||||
defaultValue: '^(@alfresco)',
|
||||
table: {
|
||||
type: { summary: 'string' },
|
||||
defaultValue: { summary: '^(@alfresco)' }
|
||||
}
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
const template: Story<AboutComponent> = (args: AboutComponent) => ({
|
||||
props: args
|
||||
});
|
||||
|
||||
export const devAbout = template.bind({});
|
||||
|
||||
devAbout.args = {
|
||||
dev: true,
|
||||
export const about = template.bind({});
|
||||
about.args = {
|
||||
pkg: {
|
||||
name: 'My Storybook App', commit: 'my-commit-value', version: '1.0.0', dependencies: {
|
||||
'@alfresco/adf-content-services': '4.7.0',
|
||||
@ -60,8 +85,3 @@ devAbout.args = {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const prodAbout = template.bind({});
|
||||
prodAbout.args = {
|
||||
dev: false
|
||||
};
|
||||
|
||||
@ -16,8 +16,6 @@
|
||||
*/
|
||||
|
||||
import { Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { CommentModel } from '../models/comment.model';
|
||||
import { CoreStoryModule } from '../testing/core.story.module';
|
||||
import { CommentListComponent } from './comment-list.component';
|
||||
import { CommentsModule } from './comments.module';
|
||||
@ -37,20 +35,22 @@ export default {
|
||||
],
|
||||
argTypes: {
|
||||
comments: {
|
||||
type: CommentModel,
|
||||
control: 'object',
|
||||
description: 'CommentModel array',
|
||||
table: {
|
||||
type: { summary: 'CommentModel' }
|
||||
type: { summary: 'CommentModel[]' }
|
||||
}
|
||||
},
|
||||
clickRow: {
|
||||
action: 'clickRow',
|
||||
description: 'Emitted when the user clicks on one of the comment rows.',
|
||||
table: { category: 'Actions' }
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
const template: Story<CommentListComponent> = (args: CommentListComponent) => ({
|
||||
props: {
|
||||
...args,
|
||||
clickRow: action('clickRow')
|
||||
}
|
||||
props: args
|
||||
});
|
||||
|
||||
export const taskBased = template.bind({});
|
||||
|
||||
@ -20,7 +20,6 @@ import { CommentContentService, CommentProcessService, EcmUserService } from '..
|
||||
import { CoreStoryModule } from '../testing/core.story.module';
|
||||
import { CommentsComponent } from './comments.component';
|
||||
import { CommentsModule } from './comments.module';
|
||||
import { CommentModel } from '../models/comment.model';
|
||||
import { CommentContentServiceMock } from '../mock/comment-content-service.mock';
|
||||
import { CommentProcessServiceMock } from '../mock/comment-process-service.mock';
|
||||
import { commentsTaskData, commentsNodeData } from '../mock/comment-content.mock';
|
||||
@ -40,9 +39,9 @@ export default {
|
||||
],
|
||||
argTypes: {
|
||||
comments: {
|
||||
type: CommentModel,
|
||||
control: 'object',
|
||||
description: 'CommentModel array',
|
||||
table: { type: { summary: 'CommentModel' } }
|
||||
table: { type: { summary: 'CommentModel[]' } }
|
||||
},
|
||||
readOnly: {
|
||||
control: 'boolean',
|
||||
@ -50,28 +49,29 @@ export default {
|
||||
defaultValue: false,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: 'false'}
|
||||
defaultValue: { summary: 'false' }
|
||||
}
|
||||
},
|
||||
nodeId: {
|
||||
control: 'text',
|
||||
description: 'Necessary in order to add a new Node comment',
|
||||
defaultValue: undefined,
|
||||
table: {
|
||||
type: { summary: 'string' },
|
||||
defaultValue: { summary: 'undefined' }
|
||||
type: { summary: 'string' }
|
||||
},
|
||||
if: { arg: 'taskId', exists: false }
|
||||
},
|
||||
taskId: {
|
||||
control: 'text',
|
||||
description: 'Necessary in order to add a new Task comment',
|
||||
defaultValue: undefined,
|
||||
table: {
|
||||
type: { summary: 'string' },
|
||||
defaultValue: { summary: 'undefined' }
|
||||
type: { summary: 'string' }
|
||||
},
|
||||
if: { arg: 'nodeId', exists: false }
|
||||
},
|
||||
error: {
|
||||
action: 'error',
|
||||
description: 'Emitted when an error occurs while displaying/adding a comment.',
|
||||
table: { category: 'Actions' }
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
@ -22,7 +22,7 @@ import { IconModule } from './icon.module';
|
||||
|
||||
export default {
|
||||
component: IconComponent,
|
||||
title: 'Core/Components/Icon',
|
||||
title: 'Core/Icon/Icon',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CoreStoryModule, IconModule]
|
||||
@ -31,12 +31,12 @@ export default {
|
||||
argTypes: {
|
||||
color: {
|
||||
control: 'radio',
|
||||
options: ['primary', 'accent', 'warn'],
|
||||
options: ['primary', 'accent', 'warn', undefined],
|
||||
description: 'icon color',
|
||||
defaultValue: 'primary',
|
||||
defaultValue: undefined,
|
||||
table: {
|
||||
type: { summary: 'string' },
|
||||
defaultValue: { summary: 'primary' }
|
||||
type: { summary: 'ThemePalette' },
|
||||
defaultValue: { summary: 'undefined' }
|
||||
}
|
||||
},
|
||||
value: {
|
||||
|
||||
@ -184,7 +184,8 @@ export default {
|
||||
},
|
||||
currentTab: {
|
||||
action: 'currentTab',
|
||||
table: { disable: true }
|
||||
description: 'Emitted when the currently active tab changes.',
|
||||
table: { category: 'Actions' }
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
@ -242,10 +243,7 @@ tabLayoutWithTextLabels.args = {
|
||||
};
|
||||
|
||||
tabLayoutWithTextLabels.parameters = {
|
||||
controls: {
|
||||
exclude: ['cardText'],
|
||||
expanded: true
|
||||
}
|
||||
controls: { exclude: ['cardText'] }
|
||||
};
|
||||
|
||||
export const tabLayoutWithIconLabels = tabLayoutTemplate.bind({});
|
||||
@ -260,10 +258,7 @@ tabLayoutWithIconLabels.args = {
|
||||
};
|
||||
|
||||
tabLayoutWithIconLabels.parameters = {
|
||||
controls: {
|
||||
exclude: ['cardText'],
|
||||
expanded: true
|
||||
}
|
||||
controls: { exclude: ['cardText'] }
|
||||
};
|
||||
|
||||
export const singleLayout = singleLayoutTemplate.bind({});
|
||||
@ -274,7 +269,3 @@ singleLayout.args = {
|
||||
showSecondTab: false,
|
||||
showThirdTab: false
|
||||
};
|
||||
|
||||
singleLayout.parameters = {
|
||||
controls: { expanded: true }
|
||||
};
|
||||
|
||||
@ -16,7 +16,6 @@
|
||||
*/
|
||||
|
||||
import { componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { CoreStoryModule } from '../testing/core.story.module';
|
||||
|
||||
import { LanguageMenuModule } from './language-menu.module';
|
||||
@ -27,7 +26,7 @@ import { LanguageServiceMock } from '../mock/language.service.mock';
|
||||
|
||||
export default {
|
||||
component: LanguageMenuComponent,
|
||||
title: 'Core/Components/Language Menu/Language Menu',
|
||||
title: 'Core/Language Menu/Language Menu',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CoreStoryModule, LanguageMenuModule],
|
||||
@ -35,14 +34,18 @@ export default {
|
||||
{ provide: LanguageService, useClass: LanguageServiceMock }
|
||||
]
|
||||
})
|
||||
]
|
||||
],
|
||||
argTypes: {
|
||||
changedLanguage: {
|
||||
action: 'changedLanguage',
|
||||
description: 'Emitted when the user clicks on one of the language buttons.',
|
||||
table: { category: 'Actions' }
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
const languageMenuComponentTemplate: Story<LanguageMenuComponent> = (args: LanguageMenuComponent) => ({
|
||||
props: {
|
||||
...args,
|
||||
changedLanguage: action('changedLanguage')
|
||||
}
|
||||
props: args
|
||||
});
|
||||
|
||||
export const asMainMenu = languageMenuComponentTemplate.bind({});
|
||||
|
||||
@ -16,7 +16,6 @@
|
||||
*/
|
||||
|
||||
import { componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { CoreStoryModule } from '../testing/core.story.module';
|
||||
|
||||
import { LanguageMenuModule } from './language-menu.module';
|
||||
@ -27,7 +26,7 @@ import { LanguageServiceMock } from '../mock/language.service.mock';
|
||||
|
||||
export default {
|
||||
component: LanguagePickerComponent,
|
||||
title: 'Core/Components/Language Menu/Language Picker',
|
||||
title: 'Core/Language Menu/Language Picker',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CoreStoryModule, LanguageMenuModule],
|
||||
@ -35,14 +34,18 @@ export default {
|
||||
{ provide: LanguageService, useClass: LanguageServiceMock }
|
||||
]
|
||||
})
|
||||
]
|
||||
],
|
||||
argTypes: {
|
||||
changedLanguage: {
|
||||
action: 'changedLanguage',
|
||||
description: 'Emitted when the user clicks on one of the language buttons.',
|
||||
table: { category: 'Actions' }
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
const languagePickerComponentTemplate: Story<LanguagePickerComponent> = (args: LanguagePickerComponent) => ({
|
||||
props: {
|
||||
...args,
|
||||
changedLanguage: action('changedLanguage')
|
||||
}
|
||||
props: args
|
||||
});
|
||||
|
||||
export const primary = languagePickerComponentTemplate.bind({});
|
||||
|
||||
@ -30,88 +30,55 @@ export default {
|
||||
],
|
||||
argTypes: {
|
||||
icon: {
|
||||
description: 'Angular Material icon',
|
||||
control: 'text',
|
||||
description: 'Material Icon to use.',
|
||||
defaultValue: 'cake',
|
||||
table: {
|
||||
category: 'Component Inputs',
|
||||
type: {
|
||||
summary: 'string'
|
||||
},
|
||||
defaultValue: {
|
||||
summary: 'cake'
|
||||
}
|
||||
type: { summary: 'string' },
|
||||
defaultValue: { summary: 'cake' }
|
||||
}
|
||||
},
|
||||
title: {
|
||||
control: 'text',
|
||||
description: 'String or Resource Key for the title.',
|
||||
defaultValue: 'title',
|
||||
table: {
|
||||
category: 'Component Inputs',
|
||||
type: {
|
||||
summary: 'string'
|
||||
},
|
||||
defaultValue: {
|
||||
summary: ''
|
||||
}
|
||||
type: { summary: 'string' }
|
||||
}
|
||||
},
|
||||
subtitle: {
|
||||
control: 'text',
|
||||
description: 'String or Resource Key for the subtitle.',
|
||||
defaultValue: 'subtitle',
|
||||
table: {
|
||||
category: 'Component Inputs',
|
||||
type: {
|
||||
summary: 'string'
|
||||
},
|
||||
defaultValue: {
|
||||
summary: ''
|
||||
}
|
||||
type: { summary: 'string' }
|
||||
}
|
||||
},
|
||||
lines: {
|
||||
name: 'lines',
|
||||
description: 'Content Projection Text',
|
||||
control: {type: 'object'},
|
||||
defaultValue: [
|
||||
'Items you removed are moved to the Trash',
|
||||
'Empty Trash to permanently delete items'
|
||||
],
|
||||
anyContentProjection: {
|
||||
name: 'with any component / selector',
|
||||
control: 'boolean',
|
||||
description: 'Showcase content projection with any component / selector',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
category: 'Strories Controls',
|
||||
category: 'Content Projection',
|
||||
type: {
|
||||
summary: 'array'
|
||||
}
|
||||
summary: 'code',
|
||||
detail: '<div style="color:red">\n projected content\n</div>'
|
||||
},
|
||||
defaultValue: { summary: false }
|
||||
}
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
const template: Story<EmptyContentComponent> = (
|
||||
args: EmptyContentComponent
|
||||
) => ({
|
||||
props: args
|
||||
});
|
||||
|
||||
export const defaultStory = template.bind({});
|
||||
defaultStory.argTypes = {
|
||||
lines: {
|
||||
control: { disable: true }
|
||||
}
|
||||
};
|
||||
defaultStory.args = {
|
||||
icon: 'star_rate',
|
||||
title: 'No favourite files or folders',
|
||||
subtitle: 'Favourite items that you want to easily find later'
|
||||
};
|
||||
defaultStory.storyName = 'Default';
|
||||
|
||||
export const multipleLines: Story<EmptyContentComponent> = (
|
||||
args: EmptyContentComponent & { lines: string[] }
|
||||
) => ({
|
||||
props: {
|
||||
...args
|
||||
},
|
||||
const template: Story<EmptyContentComponent> = ( args: EmptyContentComponent & { anyContentProjection: boolean } ) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<adf-empty-content icon="delete" title="Trash is empty">
|
||||
<p class="adf-empty-content__text" *ngFor="let line of ${JSON.stringify(
|
||||
args.lines
|
||||
).replace(/\"/g, '\'')}">
|
||||
{{ line }}
|
||||
</p>
|
||||
<adf-empty-content icon="${args.icon}" title="${args.title}" subtitle="${args.subtitle}">
|
||||
<div *ngIf="${args.anyContentProjection}" style="color:red">
|
||||
projected content
|
||||
</div>
|
||||
</adf-empty-content>`
|
||||
});
|
||||
|
||||
export const emptyContent = template.bind({});
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { ErrorContentComponent } from './error-content.component';
|
||||
import { CoreStoryModule } from '../../testing/core.story.module';
|
||||
@ -29,120 +28,45 @@ export default {
|
||||
moduleMetadata({
|
||||
imports: [CoreStoryModule, TemplateModule],
|
||||
providers: [
|
||||
{
|
||||
provide: ActivatedRoute,
|
||||
useValue: { params: of({}) }
|
||||
}
|
||||
{ provide: ActivatedRoute, useValue: { params: of({}) }}
|
||||
]
|
||||
})
|
||||
],
|
||||
argTypes: {
|
||||
errorCode: {
|
||||
type: 'string',
|
||||
description: 'Component level Error Code',
|
||||
control: 'text',
|
||||
description: 'Error code associated with this error.',
|
||||
defaultValue: 'UNKNOWN',
|
||||
table: {
|
||||
category: 'Component Inputs',
|
||||
type: {
|
||||
summary: 'string'
|
||||
},
|
||||
defaultValue: {
|
||||
summary: 'UNKNOWN'
|
||||
}
|
||||
},
|
||||
defaultValue: '404'
|
||||
},
|
||||
errorCodeTranslated: {
|
||||
type: 'string',
|
||||
description:
|
||||
'Code of translated Error - if translation doesn\'t exist then is UNKNOWN',
|
||||
table: {
|
||||
category: 'Component Variables',
|
||||
type: {
|
||||
summary: 'string'
|
||||
}
|
||||
},
|
||||
control: {
|
||||
disable: true
|
||||
type: { summary: 'string' },
|
||||
defaultValue: { summary: 'UNKNOWN' }
|
||||
}
|
||||
},
|
||||
isAdditionalContent: {
|
||||
type: 'boolean',
|
||||
description: 'Enable Content Projection',
|
||||
errorContentActions: {
|
||||
name: 'with adf-error-content-actions selector',
|
||||
control: 'boolean',
|
||||
description: 'Showcase content projection with <span style="color:red">adf-error-content-actions</span> selector',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
category: 'Story Controls',
|
||||
category: 'Content Projection',
|
||||
type: {
|
||||
summary: 'boolean'
|
||||
summary: 'code',
|
||||
detail: '<div adf-error-content-actions>\n <button>MyAction</button>\n</div>'
|
||||
},
|
||||
defaultValue: {
|
||||
summary: false
|
||||
}
|
||||
defaultValue: { summary: false }
|
||||
}
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
const templateArgTypes = {
|
||||
errorCode: {
|
||||
control: {
|
||||
disable: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const template: Story<ErrorContentComponent> = (
|
||||
args: ErrorContentComponent & { isAdditionalContent: boolean }
|
||||
) => ({
|
||||
const template: Story<ErrorContentComponent> = ( args: ErrorContentComponent & { errorContentActions: boolean } ) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<adf-error-content>
|
||||
<div adf-error-content-actions *ngIf="${args.isAdditionalContent}">
|
||||
<button mat-raised-button type="button">MyAction</button>
|
||||
</div>
|
||||
</adf-error-content>
|
||||
`
|
||||
});
|
||||
|
||||
export const errorKnownParamStory = template.bind({});
|
||||
errorKnownParamStory.argTypes = templateArgTypes;
|
||||
errorKnownParamStory.decorators = [
|
||||
moduleMetadata({
|
||||
providers: [
|
||||
{
|
||||
provide: ActivatedRoute,
|
||||
useValue: {
|
||||
params: of({ id: '500' })
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
];
|
||||
errorKnownParamStory.storyName = 'Error Param with Known ID';
|
||||
|
||||
export const errorUnknownParamStory = template.bind({});
|
||||
errorUnknownParamStory.argTypes = templateArgTypes;
|
||||
errorUnknownParamStory.decorators = [
|
||||
moduleMetadata({
|
||||
providers: [
|
||||
{
|
||||
provide: ActivatedRoute,
|
||||
useValue: {
|
||||
params: of({ id: '200' })
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
];
|
||||
errorUnknownParamStory.storyName = 'Error Param with Unknown ID';
|
||||
|
||||
export const errorCodeStory: Story<ErrorContentComponent> = (
|
||||
args: ErrorContentComponent & { isAdditionalContent: boolean }
|
||||
) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<adf-error-content [errorCode]="${args.errorCode}">
|
||||
<div adf-error-content-actions *ngIf="${args.isAdditionalContent}">
|
||||
<adf-error-content errorCode="${args.errorCode}">
|
||||
<div adf-error-content-actions *ngIf="${args.errorContentActions}">
|
||||
<button mat-raised-button type="button">MyAction</button>
|
||||
</div>
|
||||
</adf-error-content>`
|
||||
});
|
||||
|
||||
export const errorContent = template.bind({});
|
||||
|
||||
@ -22,7 +22,7 @@ import { ToolbarModule } from './toolbar.module';
|
||||
|
||||
export default {
|
||||
component: ToolbarComponent,
|
||||
title: 'Core/Components/Toolbar',
|
||||
title: 'Core/Toolbar/Toolbar',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CoreStoryModule, ToolbarModule]
|
||||
@ -31,23 +31,78 @@ export default {
|
||||
argTypes: {
|
||||
color: {
|
||||
control: 'radio',
|
||||
options: ['primary', 'accent', 'warn']
|
||||
options: ['primary', 'accent', 'warn', undefined],
|
||||
description: 'Toolbar color.',
|
||||
defaultValue: undefined,
|
||||
table: {
|
||||
type: { summary: 'ThemePalette' },
|
||||
defaultValue: { summary: 'undefined' }
|
||||
}
|
||||
},
|
||||
title: {
|
||||
control: 'text',
|
||||
description: 'Toolbar title.',
|
||||
defaultValue: '',
|
||||
table: {
|
||||
type: { summary: 'string' },
|
||||
defaultValue: { summary: '' }
|
||||
}
|
||||
},
|
||||
toolbarTitle: {
|
||||
name: 'with adf-toolbar-title component',
|
||||
control: 'boolean',
|
||||
description: 'Showcase content projection with <span style="color:red">adf-toolbar-title</span> component',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
category: 'Content Projection',
|
||||
type: {
|
||||
summary: 'code',
|
||||
detail: '<adf-toolbar-title>Projected Title</adf-toolbar-title>'
|
||||
},
|
||||
defaultValue: { summary: false }
|
||||
}
|
||||
},
|
||||
toolbarDivider: {
|
||||
name: 'with adf-toolbar-divider component',
|
||||
control: 'boolean',
|
||||
description: 'Showcase content projection with <span style="color:red">adf-toolbar-divider</span> component',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
category: 'Content Projection',
|
||||
type: {
|
||||
summary: 'code',
|
||||
detail: 'left<adf-toolbar-divider></adf-toolbar-divider>right'
|
||||
},
|
||||
defaultValue: { summary: false }
|
||||
}
|
||||
},
|
||||
anyContentProjection: {
|
||||
name: 'with any component / selector',
|
||||
control: 'boolean',
|
||||
description: 'Showcase content projection with any component / selector',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
category: 'Content Projection',
|
||||
type: {
|
||||
summary: 'code',
|
||||
detail: '<span style="color:red">projected content</span>'
|
||||
},
|
||||
defaultValue: { summary: false }
|
||||
}
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
const template: Story<ToolbarComponent> = (args: ToolbarComponent) => ({
|
||||
props: args
|
||||
const template: Story<ToolbarComponent> = (args: ToolbarComponent & { anyContentProjection: boolean } & { toolbarDivider: boolean } & { toolbarTitle: boolean } ) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<adf-toolbar color="${args.color}" title="${args.title}">
|
||||
<ng-container *ngIf="${args.toolbarTitle}"><adf-toolbar-title>Projected Title</adf-toolbar-title></ng-container>
|
||||
<ng-container *ngIf="${args.anyContentProjection}">
|
||||
<span style="color:red">projected content</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="${args.toolbarDivider}">left<adf-toolbar-divider></adf-toolbar-divider>right</ng-container>
|
||||
</adf-toolbar>`
|
||||
});
|
||||
|
||||
export const primary = template.bind({});
|
||||
primary.args = {
|
||||
title: 'Alfresco Storybook App',
|
||||
color: 'primary'
|
||||
};
|
||||
|
||||
export const invalidOrMissingColor = template.bind({});
|
||||
invalidOrMissingColor.args = {
|
||||
title: 'Alfresco Storybook App',
|
||||
color: undefined
|
||||
};
|
||||
export const toolbar = template.bind({});
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
export const parameters = {
|
||||
docs: { inlineStories: true }
|
||||
}
|
||||
docs: { inlineStories: true },
|
||||
controls: { expanded: true }
|
||||
};
|
||||
|
||||
@ -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({});
|
||||
|
||||
@ -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({});
|
||||
|
||||
@ -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({});
|
||||
|
||||
@ -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({});
|
||||
|
||||
@ -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
|
||||
};
|
||||
|
||||
@ -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
|
||||
};
|
||||
|
||||
@ -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'
|
||||
};
|
||||
|
||||
@ -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
|
||||
};
|
||||
|
||||
@ -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'
|
||||
};
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
export const parameters = {
|
||||
docs: { inlineStories: true }
|
||||
}
|
||||
docs: { inlineStories: true },
|
||||
controls: { expanded: true }
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user