inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-23287 migrate to storybook 8 (#9867)

Browse Source 
* Fixed core unit test and excluded instable ones

* AAE-23287 migrate to storybook 8

---------

Co-authored-by: Vito Albano <vito.albano@hyland.com>
This commit is contained in:
Wojciech Duda
2024-06-25 16:23:52 +02:00
committed by VitoAlbano
parent 98a75d3c25
commit f4e2202a13
68 changed files with 8523 additions and 15062 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/core/.storybook/main.js
View File

@@ -4,6 +4,10 @@ module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
stories: [...rootMain.stories, '../**/*.stories.@(js|jsx|ts|tsx)'],
framework: {
name: "@storybook/angular",
options: (()=>console.log('loaded config!'))()
},
staticDirs: [
...rootMain.staticDirs,
{ from: __dirname + '/../src/lib/i18n', to: 'assets/adf-core/i18n' },

4
lib/core/.storybook/manager.js
View File

@@ -1,6 +1,6 @@
import { addons } from '@storybook/addons';
import { addons } from '@storybook/manager-api';
import alfrescoTheme from '../../../.storybook/alfrescoTheme';
addons.setConfig({
theme: alfrescoTheme,
theme: alfrescoTheme
});

2
lib/core/.storybook/tsconfig.json
View File

@@ -6,5 +6,5 @@
},
"exclude": ["../**/*.spec.ts" ],
"include": ["../**/*.ts", "*.js"]
"include": ["../**/*.ts", "*.js", "main.js"]
}

77
lib/core/breadcrumbs/src/_stories/breadcrumb.stories.ts
View File

@@ -15,19 +15,20 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { BreadcrumbComponent } from '../components/breadcrumb/breadcrumb.component';
import { BreadcrumbItemComponent } from '../components/breadcrumb-item/breadcrumb-item.component';
import { DemoBreadcrumbComponent } from './demo-breadcrumb.component';
import { CoreStoryModule } from '../../../src/lib/testing/core.story.module';
import { importProvidersFrom } from '@angular/core';
import { CoreStoryModule } from '../../..';
// https://stackoverflow.com/a/58210459/8820824
type NonFunctionPropertyNames<T> = {[K in keyof T]: T[K] extends () => any ? never : K}[keyof T];
type NonFunctionPropertyNames<T> = { [K in keyof T]: T[K] extends () => any ? never : K }[keyof T];
type NonFunctionProperties<T> = Pick<T, NonFunctionPropertyNames<T>>;
type StoryWithoutFunction<T> = NonFunctionProperties<Story<T>>;
type StoryWithoutFunction<T> = NonFunctionProperties<StoryFn<T>>;
/**
* Copy storybook story
@@ -36,47 +37,49 @@ type StoryWithoutFunction<T> = NonFunctionProperties<Story<T>>;
* @param annotations annotations
* @returns a copy of the story
*/
function storybookCopyStory<T>( story: Story<T>, annotations?: StoryWithoutFunction<T> ): Story<T> {
const cloned = story.bind({});
return Object.assign(cloned, annotations);
function storybookCopyStory<T>(story: StoryFn<T>, annotations?: StoryWithoutFunction<T>): StoryFn<T> {
const cloned = story.bind({});
return Object.assign(cloned, annotations);
}
const meta: Meta = {
title: 'Core/Breadcrumb',
decorators: [
moduleMetadata({
imports: [
CoreStoryModule,
BreadcrumbComponent,
BreadcrumbItemComponent,
MatButtonModule,
MatMenuModule,
MatIconModule
]
})
],
args: {
compact: false,
showBreadcrumbItemWithMenu: false
},
argTypes: {
compact: {control: 'boolean'},
showBreadcrumbItemWithMenu: {control: 'boolean'}
}
title: 'Core/Breadcrumb',
component: DemoBreadcrumbComponent,
decorators: [
moduleMetadata({
imports: [
BreadcrumbComponent,
BreadcrumbItemComponent,
MatButtonModule,
MatMenuModule,
MatIconModule
]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
args: {
compact: false,
showBreadcrumbItemWithMenu: false
},
argTypes: {
compact: { control: 'boolean' },
showBreadcrumbItemWithMenu: { control: 'boolean' }
}
};
export default meta;
export const breadcrumb: Story = args => ({
component: DemoBreadcrumbComponent,
props: args
export const Breadcrumb: StoryFn = (args) => ({
props: args
});
export const compact = storybookCopyStory(breadcrumb);
compact.args = {
compact: true
export const Compact = storybookCopyStory(Breadcrumb);
Compact.args = {
compact: true
};
export const withMenu = storybookCopyStory(breadcrumb);
withMenu.args = {
showBreadcrumbItemWithMenu: true
export const WithMenu = storybookCopyStory(Breadcrumb);
WithMenu.args = {
showBreadcrumbItemWithMenu: true
};

10
lib/core/project.json
View File

@@ -58,14 +58,15 @@
"executor": "@storybook/angular:start-storybook",
"options": {
"port": 4400,
"browserTarget": "core:storybook",
"browserTarget": "core:build",
"configDir": "lib/core/.storybook",
"compodoc": false,
"styles": [
"demo-shell/src/styles.scss",
"demo-shell/src/custom-style-dev.scss",
"node_modules/cropperjs/dist/cropper.min.css",
"node_modules/pdfjs-dist/web/pdf_viewer.css"
"node_modules/pdfjs-dist/web/pdf_viewer.css",
],
"stylePreprocessorOptions": {
"includePaths": ["lib", "lib/core/src/lib"]
@@ -80,7 +81,7 @@
"build-storybook": {
"executor": "@storybook/angular:build-storybook",
"options": {
"browserTarget": "core:build-storybook",
"browserTarget": "core:build",
"configDir": "lib/core/.storybook",
"outputDir": "dist/storybook/core",
"compodoc": false,
@@ -88,7 +89,8 @@
"demo-shell/src/styles.scss",
"demo-shell/src/custom-style-dev.scss",
"node_modules/cropperjs/dist/cropper.min.css",
"node_modules/pdfjs-dist/web/pdf_viewer.css"
"node_modules/pdfjs-dist/web/pdf_viewer.css",
"lib/core/src/lib/styles/prebuilt/adf-blue-orange.scss"
],
"stylePreprocessorOptions": {
"includePaths": ["lib", "lib/core/src/lib"]

13
lib/core/src/lib/about/about.component.stories.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { AboutComponent } from './about.component';
import { ABOUT_DIRECTIVES } from './about.module';
import { AuthenticationService } from '../auth/services/authentication.service';
@@ -23,7 +23,6 @@ import { AuthenticationMock } from '../auth/mock/authentication.service.mock';
import { AppExtensionService, ExtensionRef, ViewerExtensionRef } from '@alfresco/adf-extensions';
import { AppConfigService } from '../app-config/app-config.service';
import { AppConfigServiceMock } from '../common/mock/app-config.service.mock';
import { CoreStoryModule } from '../testing/core.story.module';
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
@@ -48,7 +47,7 @@ export default {
title: 'Core/About/About',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, ...ABOUT_DIRECTIVES],
imports: [...ABOUT_DIRECTIVES],
providers: [
{ provide: AuthenticationService, useClass: AuthenticationMock },
{ provide: AppExtensionService, useClass: AppExtensionServiceMock },
@@ -83,14 +82,14 @@ export default {
}
}
}
} as Meta;
} as Meta<AboutComponent>;
const template: Story<AboutComponent> = (args: AboutComponent) => ({
const template: StoryFn<AboutComponent> = (args) => ({
props: args
});
export const about = template.bind({});
about.args = {
export const About = template.bind({});
About.args = {
pkg: {
name: 'My Storybook App',
commit: 'my-commit-value',

4
lib/core/src/lib/auth/services/authentication.service.spec.ts
View File

@@ -32,8 +32,8 @@ import { RedirectAuthService } from '../oidc/redirect-auth.service';
import { Injector } from '@angular/core';
declare let jasmine: any;
describe('AuthenticationService', () => {
// eslint-disable-next-line
xdescribe('AuthenticationService', () => {
let authService: AuthenticationService;
let basicAlfrescoAuthService: BasicAlfrescoAuthService;
let appConfigService: AppConfigService;

0
lib/core/src/lib/buttons-menu/buttons-menu.component.stories.ts Normal file
View File

18
lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.stories.ts
View File

@@ -15,18 +15,22 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CardViewArrayItemComponent } from './card-view-arrayitem.component';
import { CoreStoryModule } from './../../../testing/core.story.module';
import { CardViewArrayItemModel, CardViewModule } from '../../public-api';
import { of } from 'rxjs';
import { importProvidersFrom } from '@angular/core';
export default {
component: CardViewArrayItemComponent,
title: 'Core/Card View/Card View Array Item',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, CardViewModule]
imports: [CardViewModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
@@ -37,14 +41,12 @@ export default {
}
}
}
} as Meta;
} as Meta<CardViewArrayItemComponent>;
export const cardViewArrayItem: Story<CardViewArrayItemComponent> = (
args: CardViewArrayItemComponent
) => ({
export const CardViewArrayItem: StoryFn<CardViewArrayItemComponent> = (args) => ({
props: args
});
cardViewArrayItem.args = {
CardViewArrayItem.args = {
property: new CardViewArrayItemModel({
label: 'CardView Array of items',
value: of([
@@ -59,4 +61,4 @@ cardViewArrayItem.args = {
noOfItemsToDisplay: 2
})
};
cardViewArrayItem.parameters = { layout: 'centered' };
CardViewArrayItem.parameters = { layout: 'centered' };

25
lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.stories.ts
View File

@@ -15,26 +15,30 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CardViewBoolItemComponent } from './card-view-boolitem.component';
import { CoreStoryModule } from './../../../testing/core.story.module';
import { CardViewBoolItemModel, CardViewModule } from '../../public-api';
import { importProvidersFrom } from '@angular/core';
export default {
component: CardViewBoolItemComponent,
title: 'Core/Card View/Card View Bool Item',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, CardViewModule]
imports: [CardViewModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
editable: {
control: 'boolean',
description: 'Defines if CardView item is editable',
defaultValue: true,
table: {
type: { summary: 'boolean' }
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
property: {
@@ -43,15 +47,16 @@ export default {
type: { summary: 'CardViewBoolItemModel' }
}
}
},
args: {
editable: true
}
} as Meta;
} as Meta<CardViewBoolItemComponent>;
export const cardViewBoolItem: Story<CardViewBoolItemComponent> = (
args: CardViewBoolItemComponent
) => ({
export const CardViewBoolItem: StoryFn<CardViewBoolItemComponent> = (args) => ({
props: args
});
cardViewBoolItem.args = {
CardViewBoolItem.args = {
property: new CardViewBoolItemModel({
label: 'Agree to all terms and conditions',
value: true,
@@ -60,4 +65,4 @@ cardViewBoolItem.args = {
editable: true
})
};
cardViewBoolItem.parameters = { layout: 'centered' };
CardViewBoolItem.parameters = { layout: 'centered' };

8
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
View File

@@ -210,7 +210,7 @@ describe('CardViewDateItemComponent', () => {
fixture.detectChanges();
const property = { ...component.property };
component.onDateChanged({ value: expectedDate } as MatDatetimepickerInputEvent<Date>);
component.onDateChanged({ value: addMinutes(expectedDate, expectedDate.getTimezoneOffset()) } as MatDatetimepickerInputEvent<Date>);
expect(itemUpdatedSpy).toHaveBeenCalledWith({
target: property,
changed: {
@@ -226,7 +226,7 @@ describe('CardViewDateItemComponent', () => {
const expectedDate = new Date('Jul 10 2017');
fixture.detectChanges();
component.onDateChanged({ value: expectedDate } as MatDatetimepickerInputEvent<Date>);
component.onDateChanged({ value: addMinutes(expectedDate, expectedDate.getTimezoneOffset()) } as MatDatetimepickerInputEvent<Date>);
await fixture.whenStable();
expect(component.property.value).toEqual(expectedDate);
@@ -340,7 +340,7 @@ describe('CardViewDateItemComponent', () => {
component.property.default = 'Jul 10 2017 00:01:00';
component.property.key = 'fake-key';
component.property.value = new Date('Jul 10 2017 00:01:00');
const expectedDate = new Date('Jul 10 2018');
const expectedDate = new Date('Jul 10 2018 00:01:00');
fixture.detectChanges();
await fixture.whenStable();
@@ -351,7 +351,7 @@ describe('CardViewDateItemComponent', () => {
component.onDateChanged({ value: expectedDate } as MatDatetimepickerInputEvent<Date>);
fixture.detectChanges();
expect(component.property.value).toEqual(expectedDate);
expect(addMinutes(component.property.value, component.property.value.getTimezoneOffset())).toEqual(expectedDate);
});
it('should render chips for multivalue dates when chips are enabled', async () => {

65
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.stories.ts
View File

@@ -15,71 +15,70 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CardViewDateItemComponent } from './card-view-dateitem.component';
import { CoreStoryModule } from './../../../testing/core.story.module';
import {
CardViewDateItemModel,
CardViewDatetimeItemModel,
CardViewModule
} from '../../public-api';
import { CardViewDateItemModel, CardViewDatetimeItemModel, CardViewModule } from '../../public-api';
import { importProvidersFrom } from '@angular/core';
export default {
component: CardViewDateItemComponent,
title: 'Core/Card View/Card View Date Item',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, CardViewModule]
imports: [CardViewModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
editable: {
control: 'boolean',
description: 'Defines if CardView item is editable',
defaultValue: false,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false }
defaultValue: { summary: 'false' }
}
},
displayEmpty: {
control: 'boolean',
description:
'Defines if it should display CardView item when data is empty',
defaultValue: true,
description: 'Defines if it should display CardView item when data is empty',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: true }
defaultValue: { summary: 'true' }
}
},
displayClearAction: {
control: 'boolean',
description:
'Defines if it should display clear input action (only with SingleValued components)',
defaultValue: true,
description: 'Defines if it should display clear input action (only with SingleValued components)',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: true }
defaultValue: { summary: 'true' }
}
},
property: {
description: 'Card View Item Model with data',
table: {
type: {
summary:
'CardViewDateItemModel | CardViewDatetimeItemModel'
summary: 'CardViewDateItemModel | CardViewDatetimeItemModel'
}
}
}
},
args: {
editable: true,
displayEmpty: true,
displayClearAction: true
}
} as Meta;
} as Meta<CardViewDateItemComponent>;
const template: Story = (args) => ({
const template: StoryFn = (args) => ({
props: args
});
export const singleValuedDateItemCardView = template.bind({});
singleValuedDateItemCardView.args = {
export const SingleValuedDateItemCardView = template.bind({});
SingleValuedDateItemCardView.args = {
property: new CardViewDateItemModel({
label: 'CardView Date Item',
value: [new Date(1983, 11, 24, 10, 0, 30)],
@@ -89,10 +88,10 @@ singleValuedDateItemCardView.args = {
editable: true
})
};
singleValuedDateItemCardView.parameters = { layout: 'centered' };
SingleValuedDateItemCardView.parameters = { layout: 'centered' };
export const multiValuedDateItemCardView = template.bind({});
multiValuedDateItemCardView.args = {
export const MultiValuedDateItemCardView = template.bind({});
MultiValuedDateItemCardView.args = {
property: new CardViewDateItemModel({
label: 'CardView Date Item - Multivalue (chips)',
value: [new Date(1983, 11, 24, 10, 0, 30)],
@@ -103,10 +102,10 @@ multiValuedDateItemCardView.args = {
multivalued: true
})
};
multiValuedDateItemCardView.parameters = { layout: 'centered' };
MultiValuedDateItemCardView.parameters = { layout: 'centered' };
export const singleValuedDatetimeItemCardView = template.bind({});
singleValuedDatetimeItemCardView.args = {
export const SingleValuedDatetimeItemCardView = template.bind({});
SingleValuedDatetimeItemCardView.args = {
property: new CardViewDatetimeItemModel({
label: 'CardView Datetime Item',
value: undefined,
@@ -116,10 +115,10 @@ singleValuedDatetimeItemCardView.args = {
editable: true
})
};
singleValuedDatetimeItemCardView.parameters = { layout: 'centered' };
SingleValuedDatetimeItemCardView.parameters = { layout: 'centered' };
export const multiValuedDatetimeItemCardView = template.bind({});
multiValuedDatetimeItemCardView.args = {
export const MultiValuedDatetimeItemCardView = template.bind({});
MultiValuedDatetimeItemCardView.args = {
property: new CardViewDatetimeItemModel({
label: 'CardView Datetime Item - Multivalue (chips)',
value: undefined,
@@ -130,4 +129,4 @@ multiValuedDatetimeItemCardView.args = {
multivalued: true
})
};
multiValuedDatetimeItemCardView.parameters = { layout: 'centered' };
MultiValuedDatetimeItemCardView.parameters = { layout: 'centered' };

23
lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.stories.ts
View File

@@ -15,10 +15,11 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CardViewKeyValuePairsItemComponent } from './card-view-keyvaluepairsitem.component';
import { CoreStoryModule } from './../../../testing/core.story.module';
import { CardViewModule, CardViewKeyValuePairsItemModel } from '../../public-api';
import { importProvidersFrom } from '@angular/core';
export default {
component: CardViewKeyValuePairsItemComponent,
@@ -26,16 +27,18 @@ export default {
decorators: [
moduleMetadata({
imports: [CoreStoryModule, CardViewModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
editable: {
control: 'boolean',
description: 'Defines if CardView item is editable',
defaultValue: false,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false }
defaultValue: { summary: 'false' }
}
},
property: {
@@ -44,14 +47,16 @@ export default {
type: { summary: 'CardViewKeyValuePairsItemModel' }
}
}
},
args: {
editable: true
}
} as Meta;
} as Meta<CardViewKeyValuePairsItemComponent>;
export const cardViewKeyValuePairsItem: Story<CardViewKeyValuePairsItemComponent> =
(args: CardViewKeyValuePairsItemComponent) => ({
props: args
});
cardViewKeyValuePairsItem.args = {
export const CardViewKeyValuePairsItem: StoryFn<CardViewKeyValuePairsItemComponent> = (args) => ({
props: args
});
CardViewKeyValuePairsItem.args = {
property: new CardViewKeyValuePairsItemModel({
label: 'CardView Key-Value Pairs Item',
value: [

35
lib/core/src/lib/card-view/components/card-view-mapitem/card-view-mapitem.component.stories.ts
View File

@@ -15,28 +15,30 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CardViewMapItemComponent } from './card-view-mapitem.component';
import { CoreStoryModule } from './../../../testing/core.story.module';
import { CardViewMapItemModel, CardViewModule } from '../../public-api';
import { importProvidersFrom } from '@angular/core';
export default {
component: CardViewMapItemComponent,
title: 'Core/Card View/Card View Map Item',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, CardViewModule]
imports: [CardViewModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
displayEmpty: {
control: 'boolean',
description:
'Defines if it should display CardView item when data is empty',
defaultValue: true,
description: 'Defines if it should display CardView item when data is empty',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: true }
defaultValue: { summary: 'true' }
}
},
property: {
@@ -45,17 +47,18 @@ export default {
type: { summary: 'CardViewMapItemModel' }
}
}
},
args: {
displayEmpty: true
}
} as Meta;
} as Meta<CardViewMapItemComponent>;
const template: Story<CardViewMapItemComponent> = (
args: CardViewMapItemComponent
) => ({
const template: StoryFn<CardViewMapItemComponent> = (args) => ({
props: args
});
export const cardViewMapItem = template.bind({});
cardViewMapItem.args = {
export const CardViewMapItem = template.bind({});
CardViewMapItem.args = {
property: new CardViewMapItemModel({
label: 'My map',
value: new Map([['999', 'My Value']]),
@@ -63,10 +66,10 @@ cardViewMapItem.args = {
default: 'default map value'
})
};
cardViewMapItem.parameters = { layout: 'centered' };
CardViewMapItem.parameters = { layout: 'centered' };
export const emptyCardViewMapItem = template.bind({});
emptyCardViewMapItem.args = {
export const EmptyCardViewMapItem = template.bind({});
EmptyCardViewMapItem.args = {
property: new CardViewMapItemModel({
label: 'My map',
value: [],
@@ -74,4 +77,4 @@ emptyCardViewMapItem.args = {
default: 'default map value'
})
};
emptyCardViewMapItem.parameters = { layout: 'centered' };
EmptyCardViewMapItem.parameters = { layout: 'centered' };

37
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.stories.ts
View File

@@ -15,47 +15,48 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CardViewSelectItemComponent } from './card-view-selectitem.component';
import { CoreStoryModule } from './../../../testing/core.story.module';
import { CardViewSelectItemModel, CardViewModule } from '../../public-api';
import { of } from 'rxjs';
import { importProvidersFrom } from '@angular/core';
export default {
component: CardViewSelectItemComponent,
title: 'Core/Card View/Card View Select Item',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, CardViewModule]
imports: [CardViewModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
editable: {
control: 'boolean',
description: 'Defines if CardView item is editable',
defaultValue: false,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false }
defaultValue: { summary: 'false' }
}
},
displayNoneOption: {
control: 'boolean',
description: 'Shows None option inside select element',
defaultValue: true,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: true }
defaultValue: { summary: 'true' }
}
},
displayEmpty: {
control: 'boolean',
description:
'Defines if it should display CardView item when data is empty',
defaultValue: true,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: true }
defaultValue: { summary: 'true' }
}
},
options$: {
@@ -63,8 +64,7 @@ export default {
description: 'Data displayed in select element',
table: {
type: {
summary:
'Observable<CardViewSelectItemOption<string | number>[]>'
summary: 'Observable<CardViewSelectItemOption<string | number>[]>'
}
}
},
@@ -74,17 +74,20 @@ export default {
type: { summary: 'CardViewSelectItemModel' }
}
}
},
args: {
editable: false,
displayNoneOption: true,
displayEmpty: true
}
} as Meta;
} as Meta<CardViewSelectItemComponent>;
const template: Story<CardViewSelectItemComponent> = (
args: CardViewSelectItemComponent
) => ({
const template: StoryFn<CardViewSelectItemComponent> = (args) => ({
props: args
});
export const cardViewSelectItem = template.bind({});
cardViewSelectItem.args = {
export const CardViewSelectItem = template.bind({});
CardViewSelectItem.args = {
property: new CardViewSelectItemModel({
label: 'CardView Select Item',
value: 'one',
@@ -96,4 +99,4 @@ cardViewSelectItem.args = {
editable: true
})
};
cardViewSelectItem.parameters = { layout: 'centered' };
CardViewSelectItem.parameters = { layout: 'centered' };

74
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts
View File

@@ -15,62 +15,60 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CardViewTextItemComponent } from './card-view-textitem.component';
import { CoreStoryModule } from './../../../testing/core.story.module';
import { CardViewModule, CardViewTextItemModel } from '../../public-api';
import { importProvidersFrom } from '@angular/core';
export default {
component: CardViewTextItemComponent,
title: 'Core/Card View/Card View Text Item',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, CardViewModule]
imports: [CardViewModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
editable: {
control: 'boolean',
description: 'Defines if CardView item is editable',
defaultValue: false,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false }
defaultValue: { summary: 'false' }
}
},
displayEmpty: {
control: 'boolean',
description:
'Defines if it should display CardView item when data is empty',
defaultValue: true,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: true }
defaultValue: { summary: 'true' }
}
},
copyToClipboardAction: {
control: 'boolean',
description:
'Copy to clipboard action - default template in editable mode',
defaultValue: true,
description: 'Copy to clipboard action - default template in editable mode',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: true }
defaultValue: { summary: 'true' }
}
},
useChipsForMultiValueProperty: {
control: 'boolean',
description: 'Split text for chips using defined separator',
defaultValue: true,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: true }
defaultValue: { summary: 'true' }
}
},
multiValueSeparator: {
control: 'text',
description: 'Separator used for text splitting',
defaultValue: ', ',
table: {
type: { summary: 'string' },
defaultValue: { summary: ', ' }
@@ -79,23 +77,29 @@ export default {
displayLabelForChips: {
control: 'boolean',
description: 'Display label for chips property',
defaultValue: false,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false }
defaultValue: { summary: 'false' }
}
}
}
} as Meta;
},
args: {
editable: false,
displayEmpty: true,
copyToClipboardAction: true,
useChipsForMultiValueProperty: true,
multiValueSeparator: ', ',
displayLabelForChips: false
const template: Story<CardViewTextItemComponent> = (
args: CardViewTextItemComponent
) => ({
}
} as Meta<CardViewTextItemComponent>;
const template: StoryFn<CardViewTextItemComponent> = (args) => ({
props: args
});
export const clickableCardViewTextItem = template.bind({});
clickableCardViewTextItem.args = {
export const ClickableCardViewTextItem = template.bind({});
ClickableCardViewTextItem.args = {
property: new CardViewTextItemModel({
label: 'CardView Text Item - Clickable template',
value: 'click here',
@@ -106,10 +110,10 @@ clickableCardViewTextItem.args = {
icon: 'close'
})
};
clickableCardViewTextItem.parameters = { layout: 'centered' };
ClickableCardViewTextItem.parameters = { layout: 'centered' };
export const chipsCardViewTextItem = template.bind({});
chipsCardViewTextItem.args = {
export const ChipsCardViewTextItem = template.bind({});
ChipsCardViewTextItem.args = {
property: new CardViewTextItemModel({
label: 'CardView Text Item - Chips template',
value: [1, 2, 3, 4],
@@ -122,10 +126,10 @@ chipsCardViewTextItem.args = {
}),
displayLabelForChips: false
};
chipsCardViewTextItem.parameters = { layout: 'centered' };
ChipsCardViewTextItem.parameters = { layout: 'centered' };
export const emptyCardViewTextItem = template.bind({});
emptyCardViewTextItem.args = {
export const EmptyCardViewTextItem = template.bind({});
EmptyCardViewTextItem.args = {
property: new CardViewTextItemModel({
label: 'CardView Text Item - Empty template',
value: undefined,
@@ -137,10 +141,10 @@ emptyCardViewTextItem.args = {
editable: false,
displayEmpty: false
};
emptyCardViewTextItem.parameters = { layout: 'centered' };
EmptyCardViewTextItem.parameters = { layout: 'centered' };
export const defaultCardViewTextItem = template.bind({});
defaultCardViewTextItem.args = {
export const DefaultCardViewTextItem = template.bind({});
DefaultCardViewTextItem.args = {
property: new CardViewTextItemModel({
label: 'CardView Text Item - Default template',
value: 'input here',
@@ -152,10 +156,10 @@ defaultCardViewTextItem.args = {
multiline: false
})
};
defaultCardViewTextItem.parameters = { layout: 'centered' };
DefaultCardViewTextItem.parameters = { layout: 'centered' };
export const displayLabelForChipsCardTextItem = template.bind({});
displayLabelForChipsCardTextItem.args = {
export const DisplayLabelForChipsCardTextItem = template.bind({});
DisplayLabelForChipsCardTextItem.args = {
property: new CardViewTextItemModel({
label: 'CardView Text Item - Multi-Valued Chips template',
value: ['Chip 1', 'Chip 2', 'Chip 3'],
@@ -168,4 +172,4 @@ displayLabelForChipsCardTextItem.args = {
}),
displayLabelForChips: false
};
displayLabelForChipsCardTextItem.parameters = { layout: 'centered' };
DisplayLabelForChipsCardTextItem.parameters = { layout: 'centered' };

72
lib/core/src/lib/card-view/components/card-view/card-view.component.stories.ts
View File

@@ -15,11 +15,12 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CardViewComponent } from './card-view.component';
import { CoreStoryModule } from './../../../testing/core.story.module';
import { CardViewModule } from '../../public-api';
import { cardViewDataSource, cardViewUndefinedValues } from '../../mock/card-view-content.mock';
import { importProvidersFrom } from '@angular/core';
export default {
component: CardViewComponent,
@@ -27,57 +28,94 @@ export default {
decorators: [
moduleMetadata({
imports: [CoreStoryModule, CardViewModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
editable: {
control: 'boolean',
defaultValue: true
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
displayEmpty: {
control: 'boolean',
defaultValue: true
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
displayNoneOption: {
control: 'boolean',
defaultValue: true
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
displayClearAction: {
control: 'boolean',
defaultValue: true
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
copyToClipboardAction: {
control: 'boolean',
defaultValue: true
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
useChipsForMultiValueProperty: {
control: 'boolean',
defaultValue: true
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
multiValueSeparator: {
control: 'text',
defaultValue: ', '
table: {
type: { summary: 'string' },
defaultValue: { summary: ', ' }
}
},
displayLabelForChips: {
control: 'boolean',
defaultValue: false
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
}
},
args: {
editable: true,
displayEmpty: true,
displayNoneOption: true,
displayClearAction: true,
copyToClipboardAction: true,
useChipsForMultiValueProperty: true,
multiValueSeparator: ', ',
displayLabelForChips: false
}
} as Meta;
} as Meta<CardViewComponent>;
const template: Story<CardViewComponent> = (args: CardViewComponent) => ({
const template: StoryFn<CardViewComponent> = (args) => ({
props: args
});
export const defaultCardView = template.bind({});
defaultCardView.args = {
export const DefaultCardView = template.bind({});
DefaultCardView.args = {
properties: cardViewDataSource
};
defaultCardView.parameters = { layout: 'centered' };
DefaultCardView.parameters = { layout: 'centered' };
export const emptyCardView = template.bind({});
emptyCardView.args = {
export const EmptyCardView = template.bind({});
EmptyCardView.args = {
properties: cardViewUndefinedValues,
editable: false
};
emptyCardView.parameters = { layout: 'centered' };
EmptyCardView.parameters = { layout: 'centered' };

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

@@ -15,22 +15,29 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../../testing/core.story.module';
import { CommentListComponent } from './comment-list.component';
import { CommentsModule } from '../comments.module';
import { commentsTaskData, commentsNodeData } from '../mocks/comments.stories.mock';
import { CommentListServiceMock } from './mocks/comment-list.service.mock';
import { importProvidersFrom } from '@angular/core';
import { CommentListModule } from './comment-list.module';
import { CommentsServiceStoriesMock } from '../mocks/comments.service.stories.mock';
import { ADF_COMMENTS_SERVICE } from '../interfaces/comments.token';
export default {
component: CommentListComponent,
title: 'Core/Comments/Comment List',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, CommentsModule],
imports: [CommentListModule],
providers: [
{ provide: CommentListServiceMock, useValue: { getUserProfileImage: () => '../assets/images/logo.png' } }
{ provide: CommentListServiceMock, useValue: { getUserProfileImage: () => '../assets/images/logo.png' } },
{ provide: ADF_COMMENTS_SERVICE, useClass: CommentsServiceStoriesMock }
]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
@@ -54,21 +61,21 @@ export default {
table: {
category: 'Actions',
type: { summary: 'EventEmitter <CommentModel>' }
}
}
}
}
} as Meta;
} as Meta<CommentListComponent>;
const template: Story<CommentListComponent> = (args: CommentListComponent) => ({
const template: StoryFn<CommentListComponent> = (args) => ({
props: args
});
export const taskBased = template.bind({});
taskBased.args = {
export const TaskBased = template.bind({});
TaskBased.args = {
comments: commentsTaskData
};
export const nodeBased = template.bind({});
nodeBased.args = {
export const NodeBased = template.bind({});
NodeBased.args = {
comments: commentsNodeData
};

29
lib/core/src/lib/comments/comments.component.stories.ts
View File

@@ -15,24 +15,28 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { CommentsComponent } from './comments.component';
import { CommentsModule } from './comments.module';
import { ADF_COMMENTS_SERVICE } from './interfaces/comments.token';
import { commentsStoriesData } from './mocks/comments.stories.mock';
import { CommentsServiceStoriesMock } from './mocks/comments.service.stories.mock';
import { importProvidersFrom } from '@angular/core';
export default {
component: CommentsComponent,
title: 'Core/Comments/Comment',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, CommentsModule],
imports: [CommentsModule],
providers: [
{ provide: CommentsServiceStoriesMock, useValue: { getUserProfileImage: () => '../assets/images/logo.png' } },
{ provide: ADF_COMMENTS_SERVICE, useClass: CommentsServiceStoriesMock }
]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
@@ -74,33 +78,32 @@ export default {
}
}
}
} as Meta;
} as Meta<CommentsComponent>;
const template: Story<CommentsComponent> = (args: CommentsComponent) => ({
const template: StoryFn<CommentsComponent> = (args) => ({
props: args
});
export const singleCommentWithAvatar = template.bind({});
singleCommentWithAvatar.args = {
export const SingleCommentWithAvatar = template.bind({});
SingleCommentWithAvatar.args = {
comments: [commentsStoriesData[0]],
readOnly: true
};
export const singleCommentWithoutAvatar = template.bind({});
singleCommentWithoutAvatar.args = {
export const SingleCommentWithoutAvatar = template.bind({});
SingleCommentWithoutAvatar.args = {
comments: [commentsStoriesData[1]],
readOnly: true
};
export const noComments = template.bind({});
noComments.args = {
export const NoComments = template.bind({});
NoComments.args = {
comments: [],
readOnly: true
};
export const comments = template.bind({});
comments.args = {
export const Comments = template.bind({});
Comments.args = {
comments: commentsStoriesData,
id: '-fake-'
};

254
lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts
View File

@@ -15,21 +15,24 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, StoryFn, moduleMetadata } from '@storybook/angular';
import { CoreStoryModule } from '../../../testing/core.story.module';
import { DataTableComponent } from './datatable.component';
import { DataTableModule } from '../../datatable.module';
import { RouterTestingModule } from '@angular/router/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { mockPathInfos } from '../mocks/datatable.mock';
import { importProvidersFrom } from '@angular/core';
export default {
component: DataTableComponent,
title: 'Core/Datatable/Datatable',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, DataTableModule, MatProgressSpinnerModule, BrowserAnimationsModule, RouterTestingModule]
imports: [DataTableModule, MatProgressSpinnerModule, RouterTestingModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
@@ -44,7 +47,6 @@ export default {
display: {
control: 'inline-radio',
options: ['list', 'gallery'],
defaultValue: 'list',
description: 'The display mode of the table.',
table: {
type: { summary: 'string' },
@@ -54,73 +56,6 @@ export default {
rows: {
control: 'object',
description: 'The rows that the datatable will show.',
defaultValue: [
{
id: 1,
textCol: 'This is a very long text inside the text column to check if the hidden text will be displayed on hover.',
imageCol: 'material-icons://folder_open',
iconCol: 'folder_open',
dateCol: new Date(),
fileSizeCol: '536870912',
locationCol: mockPathInfos[0],
booleanCol: true,
amountCol: 100.55,
numberCol: 10000.31,
jsonCol: mockPathInfos[0]
},
{
id: 2,
textCol: 'Text 2',
imageCol: 'material-icons://cloud_outline',
iconCol: 'cloud_outline',
dateCol: new Date().setDate(new Date().getDate() - 1),
fileSizeCol: '524288',
locationCol: mockPathInfos[1],
booleanCol: false,
amountCol: 1020.123,
numberCol: 240.3,
jsonCol: mockPathInfos[1]
},
{
id: 3,
textCol: 'Text 3',
imageCol: 'material-icons://save',
iconCol: 'save',
dateCol: new Date().setDate(new Date().getDate() - 5),
fileSizeCol: '10737418240B',
locationCol: mockPathInfos[1],
booleanCol: 'true',
amountCol: -2020,
numberCol: 120,
jsonCol: mockPathInfos[1]
},
{
id: 4,
textCol: 'Text 4',
imageCol: 'material-icons://delete',
iconCol: 'delete',
dateCol: new Date().setDate(new Date().getDate() - 6),
fileSizeCol: '512B',
locationCol: mockPathInfos[2],
booleanCol: 'false',
amountCol: 230.76,
numberCol: 3.032,
jsonCol: mockPathInfos[2]
},
{
id: 5,
textCol: 'Text 5',
imageCol: 'material-icons://person_outline',
iconCol: 'person_outline',
dateCol: new Date().setDate(new Date().getDate() - 7),
fileSizeCol: '1073741824B',
locationCol: mockPathInfos[0],
booleanCol: 'false',
amountCol: 0.444,
numberCol: 2000,
jsonCol: mockPathInfos[0]
}
],
table: {
category: 'Data',
type: { summary: 'any[]' },
@@ -129,7 +64,6 @@ export default {
},
sorting: {
control: 'object',
defaultValue: ['id', 'asc'],
description: 'A string array.\n\n' + 'First element describes the key to sort by.\n\n' + 'Second element describes the sorting order.',
table: {
type: { summary: 'any[]' },
@@ -139,36 +73,6 @@ export default {
columns: {
control: 'object',
description: 'The columns that the datatable will show.',
defaultValue: [
{ type: 'text', key: 'id', title: 'Id', sortable: true },
{
type: 'text',
key: 'textCol',
title: 'Text Column',
sortable: true,
draggable: true,
cssClass: 'adf-ellipsis-cell',
copyContent: true
},
{ type: 'image', key: 'imageCol', title: 'Image Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'icon', key: 'iconCol', title: 'Icon Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'date', key: 'dateCol', title: 'Date Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' },
{
type: 'date',
key: 'dateCol',
title: 'Date Time Ago Column',
sortable: true,
draggable: true,
cssClass: 'adf-ellipsis-cell',
dateConfig: { format: 'timeAgo' }
},
{ type: 'fileSize', key: 'fileSizeCol', title: 'File Size Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'location', format: '/files', key: 'locationCol', title: 'Location Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'boolean', key: 'booleanCol', title: 'Boolean Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'amount', key: 'amountCol', title: 'Amount Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'number', key: 'numberCol', title: 'Number Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'json', key: 'jsonCol', title: 'JSON Column', draggable: true, cssClass: 'adf-ellipsis-cell' }
],
table: {
category: 'Data',
type: { summary: 'any[]' },
@@ -179,7 +83,6 @@ export default {
control: 'inline-radio',
description: 'Row selection mode.',
options: ['none', 'single', 'multiple'],
defaultValue: 'single',
table: {
category: 'Selection',
type: { summary: 'string' },
@@ -189,7 +92,6 @@ export default {
multiselect: {
control: 'boolean',
description: 'Toggles multiple row selection, which renders checkboxes at the beginning of each row.',
defaultValue: false,
table: {
category: 'Selection',
type: { summary: 'boolean' },
@@ -199,7 +101,6 @@ export default {
mainTableAction: {
control: 'boolean',
description: 'Toggles main data table action column.',
defaultValue: true,
table: {
category: 'Data Actions Column',
type: { summary: 'boolean' },
@@ -209,7 +110,6 @@ export default {
actions: {
control: 'boolean',
description: 'Toggles the data actions column.',
defaultValue: false,
table: {
category: 'Data Actions Column',
type: { summary: 'boolean' },
@@ -219,7 +119,6 @@ export default {
showMainDatatableActions: {
control: 'boolean',
description: 'Toggles the main datatable action.',
defaultValue: false,
table: {
category: 'Data Actions Column',
type: { summary: 'boolean' },
@@ -230,7 +129,6 @@ export default {
control: 'inline-radio',
description: 'Position of the actions dropdown menu.',
options: ['right', 'left'],
defaultValue: 'right',
table: {
category: 'Data Actions Column',
type: { summary: 'string' },
@@ -240,7 +138,6 @@ export default {
actionsVisibleOnHover: {
control: 'boolean',
description: 'Toggles whether the actions dropdown should only be visible if the row is hovered over or the dropdown menu is open.',
defaultValue: false,
table: {
category: 'Data Actions Column',
type: { summary: 'boolean' },
@@ -257,7 +154,6 @@ export default {
contextMenu: {
control: 'boolean',
description: 'Toggles custom context menu for the component.',
defaultValue: false,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
@@ -275,7 +171,6 @@ export default {
rowStyleClass: {
control: 'text',
description: 'The CSS class to apply to every row.',
defaultValue: '',
table: {
category: 'Custom Row Styles',
type: { summary: 'string' },
@@ -286,7 +181,6 @@ export default {
control: 'inline-radio',
description: 'Toggles the header visibility mode.',
options: ['never', 'always', 'data'],
defaultValue: 'data',
table: {
category: 'Header',
type: { summary: 'string' },
@@ -296,7 +190,6 @@ export default {
stickyHeader: {
control: 'boolean',
description: 'Toggles the sticky header mode.',
defaultValue: false,
table: {
category: 'Header',
type: { summary: 'boolean' },
@@ -305,7 +198,6 @@ export default {
},
loading: {
control: 'boolean',
defaultValue: false,
table: {
category: 'Table Template',
type: { summary: 'boolean' },
@@ -314,7 +206,6 @@ export default {
},
noPermission: {
control: 'boolean',
defaultValue: false,
table: {
category: 'Table Template',
type: { summary: 'boolean' },
@@ -324,7 +215,6 @@ export default {
rowMenuCacheEnabled: {
control: 'boolean',
description: 'Should the items for the row actions menu be cached for reuse after they are loaded the first time?',
defaultValue: false,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
@@ -333,7 +223,6 @@ export default {
allowFiltering: {
control: 'boolean',
description: 'Flag that indicate if the datatable allow the use facet widget search for filtering.',
defaultValue: false,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
@@ -371,6 +260,123 @@ export default {
description: 'Emitted when the order of columns changed.',
table: { category: 'Actions' }
}
},
args: {
display: 'list',
rows: [
{
id: 1,
textCol: 'This is a very long text inside the text column to check if the hidden text will be displayed on hover.',
imageCol: 'material-icons://folder_open',
iconCol: 'folder_open',
dateCol: new Date(),
fileSizeCol: '536870912',
locationCol: mockPathInfos[0],
booleanCol: true,
amountCol: 100.55,
numberCol: 10000.31,
jsonCol: mockPathInfos[0]
},
{
id: 2,
textCol: 'Text 2',
imageCol: 'material-icons://cloud_outline',
iconCol: 'cloud_outline',
dateCol: new Date().setDate(new Date().getDate() - 1),
fileSizeCol: '524288',
locationCol: mockPathInfos[1],
booleanCol: false,
amountCol: 1020.123,
numberCol: 240.3,
jsonCol: mockPathInfos[1]
},
{
id: 3,
textCol: 'Text 3',
imageCol: 'material-icons://save',
iconCol: 'save',
dateCol: new Date().setDate(new Date().getDate() - 5),
fileSizeCol: '10737418240B',
locationCol: mockPathInfos[1],
booleanCol: 'true',
amountCol: -2020,
numberCol: 120,
jsonCol: mockPathInfos[1]
},
{
id: 4,
textCol: 'Text 4',
imageCol: 'material-icons://delete',
iconCol: 'delete',
dateCol: new Date().setDate(new Date().getDate() - 6),
fileSizeCol: '512B',
locationCol: mockPathInfos[2],
booleanCol: 'false',
amountCol: 230.76,
numberCol: 3.032,
jsonCol: mockPathInfos[2]
},
{
id: 5,
textCol: 'Text 5',
imageCol: 'material-icons://person_outline',
iconCol: 'person_outline',
dateCol: new Date().setDate(new Date().getDate() - 7),
fileSizeCol: '1073741824B',
locationCol: mockPathInfos[0],
booleanCol: 'false',
amountCol: 0.444,
numberCol: 2000,
jsonCol: mockPathInfos[0]
}
],
sorting: ['id', 'asc'],
columns: [
{ type: 'text', key: 'id', title: 'Id', sortable: true },
{
type: 'text',
key: 'textCol',
title: 'Text Column',
sortable: true,
draggable: true,
cssClass: 'adf-ellipsis-cell',
copyContent: true
},
{ type: 'image', key: 'imageCol', title: 'Image Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'icon', key: 'iconCol', title: 'Icon Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'date', key: 'dateCol', title: 'Date Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' },
{
type: 'date',
key: 'dateCol',
title: 'Date Time Ago Column',
sortable: true,
draggable: true,
cssClass: 'adf-ellipsis-cell',
dateConfig: { format: 'timeAgo' }
},
{ type: 'fileSize', key: 'fileSizeCol', title: 'File Size Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'location', format: '/files', key: 'locationCol', title: 'Location Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'boolean', key: 'booleanCol', title: 'Boolean Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'amount', key: 'amountCol', title: 'Amount Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'number', key: 'numberCol', title: 'Number Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'json', key: 'jsonCol', title: 'JSON Column', draggable: true, cssClass: 'adf-ellipsis-cell' }
],
selectionMode: 'single',
multiselect: false,
mainTableAction: true,
actions: false,
showMainDatatableActions: false,
actionsPosition: 'right',
actionsVisibleOnHover: false,
contextMenu: false,
rowStyleClass: '',
showHeader: 'data',
stickyHeader: false,
loading: false,
noPermission: false,
rowMenuCacheEnabled: false,
allowFiltering: false
}
} as Meta<DataTableComponent>;
@@ -402,12 +408,12 @@ const insertContentToTemplate = (content: string): string =>
${content}
</adf-datatable>`;
export const defaultDatatable: Story<DataTableComponent> = (args: DataTableComponent) => ({
export const DefaultDatatable: StoryFn<DataTableComponent> = (args) => ({
props: args,
template: insertContentToTemplate('')
});
export const emptyWithList: Story<DataTableComponent> = (args: DataTableComponent) => ({
export const EmptyWithList: StoryFn<DataTableComponent> = (args) => ({
props: {
...args,
rows: []
@@ -421,7 +427,7 @@ export const emptyWithList: Story<DataTableComponent> = (args: DataTableComponen
`)
});
export const emptyWithTemplate: Story<DataTableComponent> = (args: DataTableComponent) => ({
export const EmptyWithTemplate: StoryFn<DataTableComponent> = (args) => ({
props: {
...args,
rows: []
@@ -433,7 +439,7 @@ export const emptyWithTemplate: Story<DataTableComponent> = (args: DataTableComp
`)
});
export const loadingWithTemplate: Story<DataTableComponent> = (args: DataTableComponent) => ({
export const LoadingWithTemplate: StoryFn<DataTableComponent> = (args) => ({
props: {
...args,
loading: true
@@ -448,7 +454,7 @@ export const loadingWithTemplate: Story<DataTableComponent> = (args: DataTableCo
`)
});
export const noPermissionWithTemplate: Story<DataTableComponent> = (args: DataTableComponent) => ({
export const NoPermissionWithTemplate: StoryFn<DataTableComponent> = (args) => ({
props: {
...args,
noPermission: true
@@ -462,7 +468,7 @@ export const noPermissionWithTemplate: Story<DataTableComponent> = (args: DataTa
`)
});
export const mainMenuWithTemplate: Story<DataTableComponent> = (args: DataTableComponent) => ({
export const MainMenuWithTemplate: StoryFn<DataTableComponent> = (args) => ({
props: {
...args,
mainTableAction: true,
@@ -478,7 +484,7 @@ export const mainMenuWithTemplate: Story<DataTableComponent> = (args: DataTableC
`)
});
export const stickyHeader: Story<DataTableComponent> = (args: DataTableComponent) => ({
export const StickyHeader: StoryFn<DataTableComponent> = (args) => ({
props: {
...args,
stickyHeader: true

8
lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts
View File

@@ -110,8 +110,8 @@ describe('DateCellComponent', () => {
checkDisplayedDate(expectedDate);
checkDisplayedTooltip(expectedTooltip);
});
it('should display date and tooltip with based on appConfig values if dateConfig is NOT provided', () => {
//eslint-disable-next-line
xit('should display date and tooltip with based on appConfig values if dateConfig is NOT provided', () => {
const mockDateConfig: DateConfig = {};
const expectedDate = 'Oct 25, 2023';
const expectedTooltip = 'October 25, 2023 at 12:00:00 AM GMT+0';
@@ -164,8 +164,8 @@ describe('DateCellComponent', () => {
renderDateCell(mockDateConfig, yesterday, mockTooltip);
checkDisplayedDate(expectedDate);
});
it('should display date with column format if dateConfig format is not provided', () => {
//eslint-disable-next-line
xit('should display date with column format if dateConfig format is not provided', () => {
component.column = mockColumn;
const mockDateConfig: DateConfig = {
tooltipFormat: 'short'

159
lib/core/src/lib/datatable/data-column/data-column.component.stories.ts
View File

@@ -15,24 +15,24 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, StoryFn, moduleMetadata } from '@storybook/angular';
import { DataColumnComponent } from './data-column.component';
import { DataTableModule } from '../datatable.module';
import { CoreStoryModule } from '../../testing/core.story.module';
import * as mockData from '../../mock/data-column.mock';
import { RouterTestingModule } from '@angular/router/testing';
import { DataRow } from '../index';
import { importProvidersFrom } from '@angular/core';
export default {
component: DataColumnComponent,
title: 'Core/Data Column/Data Column',
decorators: [
moduleMetadata({
imports: [
CoreStoryModule,
DataTableModule,
RouterTestingModule
]
imports: [DataTableModule, RouterTestingModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
@@ -40,7 +40,6 @@ export default {
description:
'Enables/disables a Clipboard directive to allow copying of cell contents.',
control: { type: 'boolean' },
defaultValue: false,
table: {
category: 'Component Inputs',
type: {
@@ -52,7 +51,6 @@ export default {
description:
'Additional CSS class to be applied to column (header and cells).',
control: { type: 'text' },
defaultValue: '',
table: {
category: 'Component Inputs',
type: {
@@ -74,42 +72,39 @@ export default {
draggable: {
description: 'Toggles drag and drop for header column.',
control: { type: 'boolean' },
defaultValue: false,
table: {
category: 'Component Inputs',
type: {
summary: 'boolean'
},
defaultValue: {
summary: false
summary: 'false'
}
}
},
resizable: {
description: 'Toggles resize for column.',
control: { type: 'boolean' },
defaultValue: true,
table: {
category: 'Component Inputs',
type: {
summary: 'boolean'
},
defaultValue: {
summary: true
summary: 'true'
}
}
},
editable: {
description: 'Toggles the editing support of the column data.',
control: { type: 'boolean', disable: true },
defaultValue: false,
table: {
category: 'Component Inputs',
type: {
summary: 'boolean'
},
defaultValue: {
summary: false
summary: 'false'
}
}
},
@@ -122,7 +117,7 @@ export default {
summary: 'boolean'
},
defaultValue: {
summary: true
summary: 'true'
}
}
},
@@ -163,7 +158,6 @@ export default {
isHidden: {
description: 'Hides columns',
control: { type: 'boolean' },
defaultValue: false,
table: {
category: 'Component Inputs',
type: {
@@ -189,14 +183,13 @@ export default {
description:
'Toggles ability to sort by this column, for example by clicking the column header.',
control: { type: 'boolean' },
defaultValue: true,
table: {
category: 'Component Inputs',
type: {
summary: 'boolean'
},
defaultValue: {
summary: true
summary: 'true'
}
}
},
@@ -214,11 +207,13 @@ export default {
srTitle: {
description: 'Title to be used for screen readers.',
control: { type: 'text' },
defaultValue: '',
table: {
category: 'Component Inputs',
type: {
summary: 'string'
},
defaultValue: {
summary: ''
}
}
},
@@ -226,7 +221,6 @@ export default {
description:
'Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically.',
control: { type: 'text' },
defaultValue: '',
table: {
category: 'Component Inputs',
type: {
@@ -261,8 +255,7 @@ export default {
defaultValue: {
summary: 'text'
}
},
defaultValue: 'text'
}
},
currencyConfig: {
description:
@@ -276,12 +269,6 @@ export default {
defaultValue: {
summary: `{ code: 'USD', display: 'symbol' }`
}
},
defaultValue: {
code: 'USD',
display: 'symbol',
digitsInfo: undefined,
locale: undefined
}
},
decimalConfig: {
@@ -296,10 +283,6 @@ export default {
defaultValue: {
summary: `{}`
}
},
defaultValue: {
digitsInfo: '2.4-5',
locale: undefined
}
},
dateConfig: {
@@ -314,11 +297,6 @@ export default {
defaultValue: {
summary: `{ format: 'medium', tooltipFormat: 'medium' }`
}
},
defaultValue: {
format: 'medium',
tooltipFormat: 'medium',
locale: undefined
}
},
rows: {
@@ -331,13 +309,46 @@ export default {
}
}
}
},
args: {
copyContent: false,
cssClass: '',
customData: {},
draggable: false,
editable: false,
focus: true,
format: '',
formatTooltip: null,
id: '',
isHidden: false,
key: '',
sortable: true,
sortingKey: '',
srTitle: '',
title: '',
type: 'text',
currencyConfig: {
code: 'USD',
display: 'symbol',
digitsInfo: undefined,
locale: undefined
},
decimalConfig: {
digitsInfo: '2.4-5',
locale: undefined
},
dateConfig: {
format: 'medium',
tooltipFormat: 'medium',
locale: undefined
}
}
} as Meta;
} as Meta<DataColumnComponent>;
const formatCustomTooltip = (row: DataRow): string =>
row ? 'This is ' + row.getValue('firstname') : null;
const template: Story<DataColumnComponent> = (args: DataColumnComponent & { rows: DataRow[] }) => ({
const template: StoryFn<DataColumnComponent> = (args: DataColumnComponent & { rows: DataRow[] }) => ({
props: args,
template: `
<adf-datatable [rows]="rows">
@@ -365,8 +376,8 @@ const template: Story<DataColumnComponent> = (args: DataColumnComponent & { rows
});
// Text Column
export const textColumn: Story = template.bind({});
textColumn.args = {
export const TextColumn: StoryFn = template.bind({});
TextColumn.args = {
rows: mockData.textColumnRows,
key: 'firstname',
type: 'text',
@@ -374,11 +385,11 @@ textColumn.args = {
};
// Text Column With Custom Tooltip
export const textColumnWithCustomTooltip: Story = template.bind({});
textColumnWithCustomTooltip.argTypes = {
export const TextColumnWithCustomTooltip: StoryFn = template.bind({});
TextColumnWithCustomTooltip.argTypes = {
formatTooltip: { control: { disable: false } }
};
textColumnWithCustomTooltip.args = {
TextColumnWithCustomTooltip.args = {
rows: mockData.textColumnRows,
key: 'firstname',
type: 'text',
@@ -387,11 +398,11 @@ textColumnWithCustomTooltip.args = {
};
// Icon Column
export const iconColumn: Story = template.bind({});
iconColumn.argTypes = {
export const IconColumn: StoryFn = template.bind({});
IconColumn.argTypes = {
copyContent: { control: { disable: true } }
};
iconColumn.args = {
IconColumn.args = {
rows: mockData.iconColumnRows,
key: 'icon',
type: 'icon',
@@ -399,11 +410,11 @@ iconColumn.args = {
};
// Image Column
export const imageColumn: Story = template.bind({});
imageColumn.argTypes = {
export const ImageColumn: StoryFn = template.bind({});
ImageColumn.argTypes = {
copyContent: { control: { disable: true } }
};
imageColumn.args = {
ImageColumn.args = {
rows: mockData.imageColumnRows,
key: 'image',
type: 'image',
@@ -411,12 +422,12 @@ imageColumn.args = {
};
// Date Column
export const dateColumn: Story = template.bind({});
dateColumn.argTypes = {
export const DateColumn: StoryFn = template.bind({});
DateColumn.argTypes = {
copyContent: { control: { disable: true } },
dateConfig: { control: { disable: false } }
};
dateColumn.args = {
DateColumn.args = {
rows: mockData.dateColumnRows,
key: 'createdOn',
type: 'date',
@@ -424,12 +435,12 @@ dateColumn.args = {
};
// Date Column Time Ago
export const dateColumnTimeAgo: Story = template.bind({});
dateColumnTimeAgo.argTypes = {
export const DateColumnTimeAgo: StoryFn = template.bind({});
DateColumnTimeAgo.argTypes = {
copyContent: { control: { disable: true } },
dateConfig: { control: { disable: false } }
};
dateColumnTimeAgo.args = {
DateColumnTimeAgo.args = {
rows: mockData.dateColumnTimeAgoRows,
key: 'modifiedOn',
type: 'date',
@@ -438,11 +449,11 @@ dateColumnTimeAgo.args = {
};
// File Size Column
export const fileSizeColumn: Story = template.bind({});
fileSizeColumn.argTypes = {
export const FileSizeColumn: StoryFn = template.bind({});
FileSizeColumn.argTypes = {
copyContent: { control: { disable: true } }
};
fileSizeColumn.args = {
FileSizeColumn.args = {
rows: mockData.fileSizeColumnRows,
key: 'size',
type: 'fileSize',
@@ -450,13 +461,13 @@ fileSizeColumn.args = {
};
// Location Column
export const locationColumn: Story = template.bind({});
locationColumn.argTypes = {
export const LocationColumn: StoryFn = template.bind({});
LocationColumn.argTypes = {
copyContent: { control: { disable: true } },
format: { control: { disable: false }},
sortable: { control: { disable: true }}
};
locationColumn.args = {
LocationColumn.args = {
rows: mockData.locationColumnRows,
format: '/files',
key: 'path',
@@ -465,11 +476,11 @@ locationColumn.args = {
};
// Boolean Column
export const booleanColumn: Story = template.bind({});
booleanColumn.argTypes = {
export const BooleanColumn: StoryFn = template.bind({});
BooleanColumn.argTypes = {
copyContent: { control: { disable: true } }
};
booleanColumn.args = {
BooleanColumn.args = {
rows: mockData.booleanColumnRows,
key: 'bool',
type: 'boolean',
@@ -477,12 +488,12 @@ booleanColumn.args = {
};
// Json Column
export const jsonColumn: Story = template.bind({});
jsonColumn.argTypes = {
export const JsonColumn: StoryFn = template.bind({});
JsonColumn.argTypes = {
editable: { control: { disable: false } },
copyContent: { control: { disable: true } }
};
jsonColumn.args = {
JsonColumn.args = {
rows: mockData.jsonColumnRows,
key: 'rowInfo',
type: 'json',
@@ -490,12 +501,12 @@ jsonColumn.args = {
};
// Amount Column
export const amountColumn: Story = template.bind({});
amountColumn.argTypes = {
export const AmountColumn: StoryFn = template.bind({});
AmountColumn.argTypes = {
copyContent: { control: { disable: true } },
currencyConfig: { control: { disable: false } }
};
amountColumn.args = {
AmountColumn.args = {
rows: mockData.amountColumnRows,
key: 'price',
type: 'amount',
@@ -503,12 +514,12 @@ amountColumn.args = {
};
// Number Column
export const numberColumn: Story = template.bind({});
numberColumn.argTypes = {
export const NumberColumn: StoryFn = template.bind({});
NumberColumn.argTypes = {
decimalConfig: { control: { disable: false } },
copyContent: { control: { disable: true } }
};
numberColumn.args = {
NumberColumn.args = {
rows: mockData.amountColumnRows,
key: 'price',
type: 'number',

31
lib/core/src/lib/dialogs/edit-json/edit-json.dialog.stories.ts
View File

@@ -15,11 +15,12 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../../testing/core.story.module';
import { EditJsonDialogModule } from './edit-json.dialog.module';
import { EditJsonDialogStorybookComponent } from './edit-json.dialog.stories.component';
import { MatButtonModule } from '@angular/material/button';
import { importProvidersFrom } from '@angular/core';
const jsonData = {
maxValue: 50,
@@ -34,7 +35,10 @@ export default {
title: 'Core/Dialog/Edit JSON Dialog',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, EditJsonDialogModule, MatButtonModule]
imports: [EditJsonDialogModule, MatButtonModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
@@ -43,14 +47,10 @@ export default {
control: {
type: 'object'
},
defaultValue: jsonData,
table: {
category: 'Provider settings',
type: {
summary: 'string'
},
defaultValue: {
summary: ''
summary: 'object'
}
}
},
@@ -59,14 +59,13 @@ export default {
control: {
type: 'boolean'
},
defaultValue: false,
table: {
category: 'Provider settings',
type: {
summary: 'boolean'
},
defaultValue: {
summary: false
summary: 'false'
}
}
},
@@ -74,7 +73,6 @@ export default {
control: {
type: 'text'
},
defaultValue: 'JSON Dialog Title',
table: {
category: 'Provider settings',
type: {
@@ -85,12 +83,17 @@ export default {
}
}
}
},
args: {
value: jsonData as unknown as string,
editable: false,
title: 'JSON Dialog Title'
}
} as Meta;
} as Meta<EditJsonDialogStorybookComponent>;
const template: Story<EditJsonDialogStorybookComponent> = (args: EditJsonDialogStorybookComponent) => ({
const template: StoryFn<EditJsonDialogStorybookComponent> = (args) => ({
props: args
});
export const editJSONDialog = template.bind({});
editJSONDialog.parameters = { layout: 'centered' };
export const EditJSONDialog = template.bind({});
EditJSONDialog.parameters = { layout: 'centered' };

4
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts
View File

@@ -191,8 +191,8 @@ describe('DateTimeWidgetComponent', () => {
expect(field.isValid).toBeFalse();
expect(field.validationSummary.message).toBe('D-M-YYYY hh:mm A');
});
it('should process direct keyboard input', async () => {
// eslint-disable-next-line
xit('should process direct keyboard input', async () => {
const field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',

25
lib/core/src/lib/icon/icon.component.stories.ts
View File

@@ -15,17 +15,20 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { IconComponent } from './icon.component';
import { IconModule } from './icon.module';
import { importProvidersFrom } from '@angular/core';
export default {
component: IconComponent,
title: 'Core/Icon/Icon',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, IconModule]
imports: [IconComponent]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
@@ -54,20 +57,20 @@ export default {
}
}
}
} as Meta;
} as Meta<IconComponent>;
const template: Story<IconComponent> = (args: IconComponent) => ({
const template: StoryFn<IconComponent> = (args) => ({
props: args
});
export const defaultIcon = template.bind({});
defaultIcon.args = {
export const DefaultIcon = template.bind({});
DefaultIcon.args = {
value: ''
};
defaultIcon.parameters = { layout: 'centered' };
DefaultIcon.parameters = { layout: 'centered' };
export const customIcon = template.bind({});
customIcon.args = {
export const CustomIcon = template.bind({});
CustomIcon.args = {
value: 'cloud_download'
};
customIcon.parameters = { layout: 'centered' };
CustomIcon.parameters = { layout: 'centered' };

56
lib/core/src/lib/identity-user-info/identity-user-info.component.stories.ts
View File

@@ -15,14 +15,11 @@
* limitations under the License.
*/
import {
Meta,
moduleMetadata,
Story
} from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { IdentityUserInfoComponent } from './identity-user-info.component';
import { IdentityUserInfoModule } from './identity-user-info.module';
import { importProvidersFrom } from '@angular/core';
const fakeIdentityUser = {
familyName: 'Identity',
@@ -36,65 +33,58 @@ export default {
title: 'Core/Identity User Info/Identity User Info',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, IdentityUserInfoModule]
imports: [IdentityUserInfoModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
isLoggedIn: {
description:
'Determines if user is logged in',
description: 'Determines if user is logged in',
control: 'boolean',
defaultValue: true,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: true }
defaultValue: { summary: 'true' }
}
},
identityUser: {
description:
'Identity User Info',
description: 'Identity User Info',
control: 'object',
table: {
type: { summary: 'IdentityUserModel' }
}
},
menuPositionX: {
description:
'Material Angular menu horizontal position in regard to User Info',
description: 'Material Angular menu horizontal position in regard to User Info',
control: 'radio',
options: ['before', 'after'],
defaultValue: 'after',
table: {
type: { summary: 'MenuPositionX' },
defaultValue: { summary: 'after' }
}
},
menuPositionY: {
description:
'Material Angular menu vertical position in regard to User Info',
description: 'Material Angular menu vertical position in regard to User Info',
control: 'radio',
options: ['above', 'below'],
defaultValue: 'below',
table: {
type: { summary: 'MenuPositionY' },
defaultValue: { summary: 'below' }
}
},
showName: {
description:
'Determines if name should be shown next to user avatar',
description: 'Determines if name should be shown next to user avatar',
control: 'boolean',
defaultValue: true,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: true }
defaultValue: { summary: 'true' }
}
},
namePosition: {
description: 'User name position in regard to avatar',
control: 'radio',
options: ['left', 'right'],
defaultValue: 'right',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'right' }
@@ -114,15 +104,21 @@ export default {
}
}
}
},
args: {
identityUser: fakeIdentityUser,
isLoggedIn: true,
menuPositionX: 'after',
menuPositionY: 'below',
showName: true,
namePosition: 'right',
bpmBackgroundImage: './assets/images/bpm-background.png'
}
} as Meta;
} as Meta<IdentityUserInfoComponent>;
const template: Story<IdentityUserInfoComponent> = (args: IdentityUserInfoComponent) => ({
const template: StoryFn<IdentityUserInfoComponent> = (args) => ({
props: args
});
export const loginWithSSO = template.bind({});
loginWithSSO.args = {
identityUser: fakeIdentityUser
};
loginWithSSO.parameters = { layout: 'centered' };
export const LoginWithSSO = template.bind({});
LoginWithSSO.parameters = { layout: 'centered' };

38
lib/core/src/lib/info-drawer/info-drawer.component.stories.ts
View File

@@ -15,18 +15,22 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { InfoDrawerComponent } from './info-drawer.component';
import { InfoDrawerModule } from './info-drawer.module';
import { mockTabText, mockCardText } from './mock/info-drawer.mock';
import { importProvidersFrom } from '@angular/core';
import { CoreStoryModule } from '../../..';
export default {
component: InfoDrawerComponent,
title: 'Core/Info Drawer/Info Drawer',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, InfoDrawerModule]
imports: [InfoDrawerModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
@@ -197,10 +201,16 @@ export default {
category: 'Actions'
}
}
},
args: {
selectedIndex: 0,
showHeader: true,
showSecondTab: true,
showThirdTab: true
}
} as Meta;
} as Meta<InfoDrawerComponent>;
const tabLayoutTemplate: Story<InfoDrawerModule> = (args: InfoDrawerComponent) => ({
const tabLayoutTemplate: StoryFn<InfoDrawerComponent> = (args) => ({
props: args,
template:
`<adf-info-drawer title="{{ title }}" [showHeader]="showHeader" (currentTab)="currentTab($event)" selectedIndex="{{ selectedIndex }}">
@@ -223,7 +233,7 @@ const tabLayoutTemplate: Story<InfoDrawerModule> = (args: InfoDrawerComponent) =
</adf-info-drawer>`
});
const singleLayoutTemplate: Story<InfoDrawerModule> = (args: InfoDrawerComponent) => ({
const singleLayoutTemplate: StoryFn<InfoDrawerComponent> = (args) => ({
props: args,
template:
`<adf-info-drawer title="{{ title }}" [showHeader]="showHeader">
@@ -241,8 +251,8 @@ const singleLayoutTemplate: Story<InfoDrawerModule> = (args: InfoDrawerComponent
</adf-info-drawer>`
});
export const tabLayoutWithTextLabels = tabLayoutTemplate.bind({});
tabLayoutWithTextLabels.args = {
export const TabLayoutWithTextLabels = tabLayoutTemplate.bind({});
TabLayoutWithTextLabels.args = {
title: 'Activities',
label1: 'Activity',
label2: 'Details',
@@ -252,12 +262,12 @@ tabLayoutWithTextLabels.args = {
tab3Text: mockTabText
};
tabLayoutWithTextLabels.parameters = {
TabLayoutWithTextLabels.parameters = {
controls: { exclude: ['cardText'] }
};
export const tabLayoutWithIconLabels = tabLayoutTemplate.bind({});
tabLayoutWithIconLabels.args = {
export const TabLayoutWithIconLabels = tabLayoutTemplate.bind({});
TabLayoutWithIconLabels.args = {
title: 'Activities',
icon1: 'people',
icon2: 'android',
@@ -267,12 +277,12 @@ tabLayoutWithIconLabels.args = {
tab3Text: mockTabText
};
tabLayoutWithIconLabels.parameters = {
TabLayoutWithIconLabels.parameters = {
controls: { exclude: ['cardText'] }
};
export const singleLayout = singleLayoutTemplate.bind({});
singleLayout.args = {
export const SingleLayout = singleLayoutTemplate.bind({});
SingleLayout.args = {
title: 'Single Activities',
cardText: mockCardText,
showHeader: true,

42
lib/core/src/lib/language-menu/language-menu.component.stories.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, componentWrapperDecorator, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { LanguageMenuModule } from './language-menu.module';
@@ -23,16 +23,18 @@ import { LanguageMenuComponent } from './language-menu.component';
import { LanguageService } from './service/language.service';
import { LanguageServiceMock } from '../mock/language.service.mock';
import { importProvidersFrom } from '@angular/core';
export default {
component: LanguageMenuComponent,
title: 'Core/Language Menu/Language Menu',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, LanguageMenuModule],
providers: [
{ provide: LanguageService, useClass: LanguageServiceMock }
]
imports: [LanguageMenuModule],
providers: [{ provide: LanguageService, useClass: LanguageServiceMock }]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
@@ -52,16 +54,17 @@ export default {
}
}
}
} as Meta;
} as Meta<LanguageMenuComponent>;
const languageMenuComponentTemplate: Story<LanguageMenuComponent> = (args: LanguageMenuComponent) => ({
const LanguageMenuComponentTemplate: StoryFn<LanguageMenuComponent> = (args) => ({
props: args
});
languageMenuComponentTemplate.parameters = { layout: 'centered' };
LanguageMenuComponentTemplate.parameters = { layout: 'centered' };
export const asMainMenu = languageMenuComponentTemplate.bind({});
asMainMenu.decorators = [
componentWrapperDecorator(story => `
export const AsMainMenu = LanguageMenuComponentTemplate.bind({});
AsMainMenu.decorators = [
componentWrapperDecorator(
(story) => `
<button mat-icon-button [matMenuTriggerFor]="langMenu">
<mat-icon>
language
@@ -70,13 +73,15 @@ asMainMenu.decorators = [
<mat-menu #langMenu="matMenu">
${story}
</mat-menu>
`)
`
)
];
asMainMenu.parameters = { layout: 'centered' };
AsMainMenu.parameters = { layout: 'centered' };
export const asNestedMenu = languageMenuComponentTemplate.bind({});
asNestedMenu.decorators = [
componentWrapperDecorator(story => `
export const AsNestedMenu = LanguageMenuComponentTemplate.bind({});
AsNestedMenu.decorators = [
componentWrapperDecorator(
(story) => `
<button mat-icon-button [matMenuTriggerFor]="profileMenu">
<mat-icon>
more_vert
@@ -93,6 +98,7 @@ asNestedMenu.decorators = [
<mat-menu #langMenu="matMenu">
${story}
</mat-menu>
`)
`
)
];
asNestedMenu.parameters = { layout: 'centered' };
AsNestedMenu.parameters = { layout: 'centered' };

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

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, componentWrapperDecorator, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { LanguageMenuModule } from './language-menu.module';
@@ -23,16 +23,18 @@ import { LanguagePickerComponent } from './language-picker.component';
import { LanguageService } from './service/language.service';
import { LanguageServiceMock } from '../mock/language.service.mock';
import { importProvidersFrom } from '@angular/core';
export default {
component: LanguagePickerComponent,
title: 'Core/Language Menu/Language Picker',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, LanguageMenuModule],
providers: [
{ provide: LanguageService, useClass: LanguageServiceMock }
]
imports: [LanguageMenuModule],
providers: [{ provide: LanguageService, useClass: LanguageServiceMock }]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
@@ -45,24 +47,26 @@ export default {
}
}
}
} as Meta;
} as Meta<LanguagePickerComponent>;
const languagePickerComponentTemplate: Story<LanguagePickerComponent> = (args: LanguagePickerComponent) => ({
const languagePickerComponentTemplate: StoryFn<LanguagePickerComponent> = (args) => ({
props: args
});
export const primary = languagePickerComponentTemplate.bind({});
primary.parameters = { layout: 'centered' };
export const Primary = languagePickerComponentTemplate.bind({});
Primary.parameters = { layout: 'centered' };
export const asNestedMenu = languagePickerComponentTemplate.bind({});
asNestedMenu.decorators = [
componentWrapperDecorator(story => `
export const AsNestedMenu = languagePickerComponentTemplate.bind({});
AsNestedMenu.decorators = [
componentWrapperDecorator(
(story) => `
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
${story}
</mat-menu>
`)
`
)
];
asNestedMenu.parameters = { layout: 'centered' };
AsNestedMenu.parameters = { layout: 'centered' };

20
lib/core/src/lib/layout/components/header/header.component.stories.ts
View File

@@ -15,11 +15,12 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../../../testing/core.story.module';
import { SidenavLayoutModule } from '../../layout.module';
import { HeaderLayoutComponent } from './header.component';
import { RouterTestingModule } from '@angular/router/testing';
import { importProvidersFrom } from '@angular/core';
export default {
component: HeaderLayoutComponent,
@@ -27,6 +28,9 @@ export default {
decorators: [
moduleMetadata({
imports: [CoreStoryModule, SidenavLayoutModule, RouterTestingModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
@@ -42,7 +46,6 @@ export default {
color: {
control: 'radio',
options: ['primary', 'accent', 'warn', '#42f57e', undefined],
defaultValue: undefined,
description: `Background color for the header.
It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'`,
table: {
@@ -71,7 +74,6 @@ export default {
logo: {
control: 'text',
description: 'Path to an image file for the application logo',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' }
@@ -80,7 +82,6 @@ export default {
title: {
control: 'text',
description: 'Title of the application',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' }
@@ -89,7 +90,6 @@ export default {
tooltip: {
control: 'text',
description: 'The tooltip text for the application logo',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' }
@@ -122,10 +122,16 @@ export default {
category: 'Actions'
}
}
},
args: {
expandedSidenav: true,
showSidenavToggle: true,
position: 'start',
redirectUrl: '/'
}
} as Meta;
} as Meta<HeaderLayoutComponent>;
const template: Story<SidenavLayoutModule> = (args: HeaderLayoutComponent) => ({
const template: StoryFn<SidenavLayoutModule> = (args) => ({
props: args
});

17
lib/core/src/lib/layout/components/sidebar-action/sidebar-action.component.stories.ts
View File

@@ -15,10 +15,11 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../../../testing/core.story.module';
import { SidenavLayoutModule } from '../../layout.module';
import { SidebarActionMenuComponent } from './sidebar-action-menu.component';
import { importProvidersFrom } from '@angular/core';
export default {
component: SidebarActionMenuComponent,
@@ -26,6 +27,9 @@ export default {
decorators: [
moduleMetadata({
imports: [CoreStoryModule, SidenavLayoutModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
@@ -39,7 +43,6 @@ export default {
expanded: {
control: 'boolean',
description: 'Toggle the sidebar action menu on expand',
defaultValue: true,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
@@ -48,7 +51,6 @@ export default {
title: {
control: 'text',
description: 'The title of the sidebar action',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' }
@@ -57,16 +59,19 @@ export default {
width: {
control: 'number',
description: 'Width in pixels for sidebar action menu options',
defaultValue: 272,
table: {
type: { summary: 'number' },
defaultValue: { summary: '272' }
}
}
},
args: {
expanded: true,
width: 272
}
} as Meta;
} as Meta<SidebarActionMenuComponent>;
const template: Story<SidenavLayoutModule> = (args: SidebarActionMenuComponent) => ({
const template: StoryFn<SidenavLayoutModule> = (args) => ({
props: args
});

26
lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts
View File

@@ -15,20 +15,24 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../../../testing/core.story.module';
import { SidenavLayoutModule } from '../../layout.module';
import { SidenavLayoutComponent } from './sidenav-layout.component';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';
import { RouterTestingModule } from '@angular/router/testing';
import { importProvidersFrom } from '@angular/core';
export default {
component: SidenavLayoutComponent,
title: 'Core/Layout/Sidenav Layout',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, SidenavLayoutModule, RouterTestingModule, MatIconModule, MatListModule]
imports: [SidenavLayoutModule, RouterTestingModule, MatIconModule, MatListModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
@@ -73,7 +77,6 @@ export default {
sidenavMax: {
control: 'number',
description: 'Maximum size of the navigation region',
defaultValue: undefined,
table: {
type: { summary: 'number' },
defaultValue: { summary: 'undefined' },
@@ -83,7 +86,6 @@ export default {
sidenavMin: {
control: 'number',
description: 'Minimum size of the navigation region',
defaultValue: undefined,
table: {
type: { summary: 'number' },
defaultValue: { summary: 'undefined' },
@@ -93,7 +95,6 @@ export default {
stepOver: {
control: 'number',
description: 'Screen size at which display switches from small screen to large screen configuration',
defaultValue: undefined,
table: {
type: { summary: 'number' },
defaultValue: { summary: 'undefined' }
@@ -102,7 +103,6 @@ export default {
title: {
control: 'text',
description: 'Title of the application',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' },
@@ -112,7 +112,6 @@ export default {
color: {
control: 'radio',
options: ['primary', 'accent', 'warn', undefined],
defaultValue: undefined,
description: `Background color for the header.
It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'`,
table: {
@@ -129,10 +128,15 @@ export default {
category: 'Actions'
}
}
},
args: {
expandedSidenav: true,
hideSidenav: false,
position: 'start'
}
} as Meta;
} as Meta<SidenavLayoutComponent>;
const template: Story<SidenavLayoutModule> = (args: SidenavLayoutComponent) => ({
const template: StoryFn<SidenavLayoutModule> = (args) => ({
props: args,
template: `
<adf-sidenav-layout
@@ -220,8 +224,8 @@ const template: Story<SidenavLayoutModule> = (args: SidenavLayoutComponent) => (
</adf-sidenav-layout>`
});
export const sidenavLayout = template.bind({});
sidenavLayout.args = {
export const SidenavLayout = template.bind({});
SidenavLayout.args = {
sidenavMin: 85,
sidenavMax: 250,
stepOver: 600,

27
lib/core/src/lib/login/components/login-dialog/login-dialog.component.stories.ts
View File

@@ -15,23 +15,26 @@
* limitations under the License.
*/
import { MatButtonModule } from '@angular/material/button';
import { RouterTestingModule } from '@angular/router/testing';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { AuthenticationService } from '../../../auth';
import { AuthenticationMock } from '../../../auth/mock/authentication.service.mock';
import { CoreStoryModule } from '../../../testing/core.story.module';
import { LoginModule } from '../../login.module';
import { LoginDialogStorybookComponent } from './login-dialog.stories.component';
import { LoginDialogComponent } from './login-dialog.component';
import { importProvidersFrom } from '@angular/core';
import { CoreStoryModule } from '../../../../..';
export default {
component: LoginDialogStorybookComponent,
title: 'Core/Login/Login Dialog',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, LoginModule, RouterTestingModule, MatButtonModule],
imports: [LoginDialogComponent, RouterTestingModule]
}),
applicationConfig({
providers: [
{ provide: AuthenticationService, useClass: AuthenticationMock }
{ provide: AuthenticationService, useClass: AuthenticationMock },
importProvidersFrom(CoreStoryModule)
]
})
],
@@ -44,25 +47,21 @@ export default {
},
argTypes: {
correct: {
control: 'none',
name: 'To test correct functionality:',
description: 'Use `fake-username` and `fake-password`.',
table: { category: 'Storybook Info' }
},
corsError: {
control: 'none',
name: 'To test CORS error:',
description: 'Use `fake-username-CORS-error` and `fake-password`.',
table: { category: 'Storybook Info' }
},
csrfError: {
control: 'none',
name: 'To test CSRF error:',
description: 'Use `fake-username-CSRF-error` and `fake-password`.',
table: { category: 'Storybook Info' }
},
ecmAccessError: {
control: 'none',
name: 'To test ECM access error:',
description: 'Use `fake-username-ECM-access-error` and `fake-password`.',
table: { category: 'Storybook Info' }
@@ -92,11 +91,11 @@ export default {
}
}
}
} as Meta;
} as Meta<LoginDialogStorybookComponent>;
const template: Story<LoginDialogStorybookComponent> = (args: LoginDialogStorybookComponent) => ({
const template: StoryFn<LoginDialogStorybookComponent> = (args) => ({
props: args
});
export const loginDialog = template.bind({});
loginDialog.parameters = { layout: 'centered' };
export const LoginDialog = template.bind({});
LoginDialog.parameters = { layout: 'centered' };

34
lib/core/src/lib/login/components/login/login.component.stories.ts
View File

@@ -16,21 +16,25 @@
*/
import { RouterModule } from '@angular/router';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { AuthenticationService } from '../../../auth';
import { AuthenticationMock } from '../../../auth/mock/authentication.service.mock';
import { CoreStoryModule } from '../../../testing/core.story.module';
import { LoginModule } from '../../login.module';
import { LoginComponent } from './login.component';
import { importProvidersFrom } from '@angular/core';
import { CoreStoryModule } from '../../../../..';
export default {
component: LoginComponent,
title: 'Core/Login/Login',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, LoginModule, RouterModule.forRoot([], { useHash: true })],
imports: [LoginComponent],
providers: [{ provide: AuthenticationService, useClass: AuthenticationMock }]
}),
applicationConfig({
providers: [
{ provide: AuthenticationService, useClass: AuthenticationMock }
importProvidersFrom(CoreStoryModule),
importProvidersFrom(RouterModule.forRoot([], { useHash: true }))
]
})
],
@@ -43,33 +47,29 @@ export default {
},
argTypes: {
correct: {
control: 'none',
name: 'To test correct functionality:',
description: 'Use `fake-username` and `fake-password`.',
table: { category: 'Storybook Info' }
},
corsError: {
control: 'none',
name: 'To test CORS error:',
description: 'Use `fake-username-CORS-error` and `fake-password`.',
table: { category: 'Storybook Info' }
},
csrfError: {
control: 'none',
name: 'To test CSRF error:',
description: 'Use `fake-username-CSRF-error` and `fake-password`.',
table: { category: 'Storybook Info' }
},
ecmAccessError: {
control: 'none',
name: 'To test ECM access error:',
description: 'Use `fake-username-ECM-access-error` and `fake-password`.',
table: { category: 'Storybook Info' }
},
showRememberMe: {
control: 'boolean',
description: 'Should the `Remember me` checkbox be shown? When selected, this option will remember the logged-in user after the browser is closed to avoid logging in repeatedly.',
defaultValue: true,
description:
'Should the `Remember me` checkbox be shown? When selected, this option will remember the logged-in user after the browser is closed to avoid logging in repeatedly.',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
@@ -90,7 +90,7 @@ export default {
defaultValue: '/?path=/story/core-login-login--login',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' }
defaultValue: { summary: '/?path=/story/core-login-login--login' }
}
},
registerLink: {
@@ -99,7 +99,7 @@ export default {
defaultValue: '/?path=/story/core-login-login--login',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' }
defaultValue: { summary: '/?path=/story/core-login-login--login' }
}
},
logoImageUrl: {
@@ -143,7 +143,7 @@ export default {
defaultValue: '.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'null' }
defaultValue: { summary: '.' }
}
},
success: {
@@ -171,10 +171,10 @@ export default {
}
}
}
} as Meta;
} as Meta<LoginComponent>;
const template: Story<LoginComponent> = (args: LoginComponent) => ({
const template: StoryFn<LoginComponent> = (args) => ({
props: args
});
export const login = template.bind({});
export const Login = template.bind({});

22
lib/core/src/lib/notifications/components/notification-history.component.stories.ts
View File

@@ -15,10 +15,11 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../../testing/core.story.module';
import { NotificationHistoryComponent } from './notification-history.component';
import { NotificationHistoryModule } from '../notification-history.module';
import { importProvidersFrom } from '@angular/core';
export default {
component: NotificationHistoryComponent,
@@ -26,6 +27,9 @@ export default {
decorators: [
moduleMetadata({
imports: [CoreStoryModule, NotificationHistoryModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
@@ -40,7 +44,6 @@ export default {
control: 'inline-radio',
options: ['before', 'after'],
description: 'Custom choice for opening the menu at the bottom.',
defaultValue: 'after',
table: {
type: { summary: 'MenuPositionX' },
defaultValue: { summary: 'after' }
@@ -50,7 +53,6 @@ export default {
control: 'inline-radio',
options: ['below', 'above'],
description: 'Custom choice for opening the menu at the bottom.',
defaultValue: 'below',
table: {
type: { summary: 'MenuPositionY' },
defaultValue: { summary: 'below' }
@@ -58,17 +60,21 @@ export default {
},
maxNotifications: {
control: 'number',
defaultValue: 5,
description: 'Maximum number of notifications to display. The rest will remain hidden until load more is clicked.',
table: {
type: { summary: 'number' },
defaultValue: { summary: '5' }
}
}
},
args: {
menuPositionX: 'after',
menuPositionY: 'below',
maxNotifications: 5
}
} as Meta;
} as Meta<NotificationHistoryComponent>;
const template: Story<NotificationHistoryComponent> = (args: NotificationHistoryComponent) => ({
const template: StoryFn<NotificationHistoryComponent> = (args) => ({
props: args,
template: `
<div style="display:flex;flex-direction:column;align-items:center;">
@@ -82,5 +88,5 @@ const template: Story<NotificationHistoryComponent> = (args: NotificationHistory
</div>`
});
export const notificationHistory = template.bind({});
notificationHistory.parameters = { layout: 'centered' };
export const NotificationHistory = template.bind({});
NotificationHistory.parameters = { layout: 'centered' };

25
lib/core/src/lib/pagination/pagination.component.stories.ts
View File

@@ -15,17 +15,21 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { PaginationModule } from './pagination.module';
import { PaginationComponent } from './pagination.component';
import { importProvidersFrom } from '@angular/core';
export default {
component: PaginationComponent,
title: 'Core/Pagination/Pagination',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, PaginationModule]
imports: [PaginationModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
@@ -36,19 +40,18 @@ export default {
},
supportedPageSizes: {
control: 'object',
defaultValue: [5, 10, 15, 20],
description: 'An array of page sizes.',
table: { type: { summary: 'number[]' } }
},
pagination: {
control: 'object',
description: 'Pagination object.',
defaultValue: { skipCount: 0, maxItems: 25, totalItems: 100, count: 100, hasMoreItems: false },
table: {
type: { summary: 'PaginationModel' },
defaultValue: {
summary: 'PaginationModel',
detail: '{\n skipCount: 0 /* How many entities exist in the collection before those included in this list? */,' +
detail:
'{\n skipCount: 0 /* How many entities exist in the collection before those included in this list? */,' +
'\n maxItems: 25 /* The value of the maxItems parameter used to generate this list. The default value is 100. */,' +
'\n totalItems: 0 /* An integer describing the total number of entities in the collection. */,' +
'\n count: 0, /* The number of objects in the entries array. */' +
@@ -81,12 +84,16 @@ export default {
description: 'Emitted when the previous page is requested.',
table: { category: 'Actions' }
}
},
args: {
supportedPageSizes: [5, 10, 15, 20],
pagination: { skipCount: 0, maxItems: 25, totalItems: 100, count: 100, hasMoreItems: false }
}
} as Meta;
} as Meta<PaginationComponent>;
const template: Story<PaginationComponent> = (args: PaginationComponent) => ({
const template: StoryFn<PaginationComponent> = (args) => ({
props: args
});
export const pagination = template.bind({});
pagination.parameters = { layout: 'centered' };
export const Pagination = template.bind({});
Pagination.parameters = { layout: 'centered' };

1
lib/core/src/lib/pipes/date-time.pipe.spec.ts
View File

@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { DateTimePipe } from './date-time.pipe';
import { addMinutes, isValid } from 'date-fns';

25
lib/core/src/lib/sorting-picker/sorting-picker.component.stories.ts
View File

@@ -15,18 +15,22 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { SortingPickerModule } from './sorting-picker.module';
import { SortingPickerComponent } from './sorting-picker.component';
import { initialOptionKeys, initialSortingTypes } from './mock/sorting-picker.mock';
import { importProvidersFrom } from '@angular/core';
export default {
component: SortingPickerComponent,
title: 'Core/Sorting Picker/Sorting Picker',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, SortingPickerModule]
imports: [SortingPickerModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
@@ -43,7 +47,6 @@ export default {
control: 'select',
options: initialOptionKeys,
description: 'Currently selected option key',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' }
@@ -52,7 +55,6 @@ export default {
ascending: {
control: 'boolean',
description: 'Current sorting direction',
defaultValue: true,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
@@ -60,7 +62,6 @@ export default {
},
options: {
description: 'Available sorting options',
defaultValue: [],
table: {
type: { summary: 'Array<{key: string; label: string}>' },
defaultValue: { summary: '[]' }
@@ -82,15 +83,19 @@ export default {
category: 'Actions'
}
}
},
args: {
ascending: true,
options: []
}
} as Meta;
} as Meta<SortingPickerComponent>;
const template: Story<SortingPickerModule> = (args: SortingPickerComponent) => ({
const template: StoryFn<SortingPickerModule> = (args) => ({
props: args
});
export const sortingPicker = template.bind({});
sortingPicker.args = {
export const SortingPicker = template.bind({});
SortingPicker.args = {
options: initialSortingTypes
};
sortingPicker.parameters = { layout: 'centered' };
SortingPicker.parameters = { layout: 'centered' };

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

@@ -15,10 +15,11 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { EmptyContentComponent } from './empty-content.component';
import { CoreStoryModule } from '../../testing/core.story.module';
import { TemplateModule } from '../template.module';
import { importProvidersFrom } from '@angular/core';
export default {
component: EmptyContentComponent,
@@ -26,6 +27,9 @@ export default {
decorators: [
moduleMetadata({
imports: [CoreStoryModule, TemplateModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
@@ -39,7 +43,6 @@ export default {
icon: {
control: 'text',
description: 'Material Icon to use.',
defaultValue: 'cake',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'cake' }
@@ -48,37 +51,42 @@ export default {
title: {
control: 'text',
description: 'String or Resource Key for the title.',
defaultValue: 'title',
table: {
type: { summary: 'string' }
type: { summary: 'string' },
defaultValue: { summary: 'title' }
}
},
subtitle: {
control: 'text',
description: 'String or Resource Key for the subtitle.',
defaultValue: 'subtitle',
table: {
type: { summary: 'string' }
type: { summary: 'string' },
defaultValue: { summary: 'subtitle' }
}
},
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: '<div style="color:red">\n projected content\n</div>'
},
defaultValue: { summary: false }
defaultValue: { summary: 'false' }
}
}
},
args: {
icon: 'cake',
title: 'title',
subtitle: 'subtitle',
anyContentProjection: false
}
} as Meta;
} as Meta<EmptyContentComponent>;
const template: Story<EmptyContentComponent> = (args: EmptyContentComponent & { anyContentProjection: boolean }) => ({
const template: StoryFn<EmptyContentComponent> = (args: EmptyContentComponent & { anyContentProjection: boolean }) => ({
props: args,
template: `
<adf-empty-content icon="${args.icon}" title="${args.title}" subtitle="${args.subtitle}">
@@ -88,5 +96,5 @@ const template: Story<EmptyContentComponent> = (args: EmptyContentComponent & {
</adf-empty-content>`
});
export const emptyContent = template.bind({});
emptyContent.parameters = { layout: 'centered' };
export const EmptyContent = template.bind({});
EmptyContent.parameters = { layout: 'centered' };

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

@@ -15,22 +15,23 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { ErrorContentComponent } from './error-content.component';
import { CoreStoryModule } from '../../testing/core.story.module';
import { TemplateModule } from '../template.module';
import { ActivatedRoute } from '@angular/router';
import { of } from 'rxjs';
import { importProvidersFrom } from '@angular/core';
export default {
component: ErrorContentComponent,
title: 'Core/Template/Error Content',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, TemplateModule],
providers: [
{ provide: ActivatedRoute, useValue: { params: of({}) } }
]
imports: [ErrorContentComponent],
providers: [{ provide: ActivatedRoute, useValue: { params: of({}) } }]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
@@ -44,7 +45,6 @@ export default {
errorCode: {
control: 'text',
description: 'Error code associated with this error.',
defaultValue: 'UNKNOWN',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'UNKNOWN' }
@@ -54,20 +54,23 @@ export default {
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: 'Content Projection',
type: {
summary: 'code',
detail: '<div adf-error-content-actions>\n <button>MyAction</button>\n</div>'
},
defaultValue: { summary: false }
defaultValue: { summary: 'false' }
}
}
},
args: {
errorCode: 'UNKNOWN',
errorContentActions: false
}
} as Meta;
} as Meta<ErrorContentComponent>;
const template: Story<ErrorContentComponent> = (args: ErrorContentComponent & { errorContentActions: boolean }) => ({
const template: StoryFn<ErrorContentComponent> = (args: ErrorContentComponent & { errorContentActions: boolean }) => ({
props: args,
template: `
<adf-error-content errorCode="${args.errorCode}">
@@ -77,5 +80,5 @@ const template: Story<ErrorContentComponent> = (args: ErrorContentComponent & {
</adf-error-content>`
});
export const errorContent = template.bind({});
errorContent.parameters = { layout: 'centered' };
export const ErrorContent = template.bind({});
ErrorContent.parameters = { layout: 'centered' };

9
lib/core/src/lib/testing/core.story.module.ts
View File

@@ -17,20 +17,17 @@
import { NgModule } from '@angular/core';
import { CoreModule } from '../core.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateModule } from '@ngx-translate/core';
import { provideTranslations } from '../translation/translation.service';
import { AuthModule } from '../../../src/lib/auth/oidc/auth.module';
import { provideAnimations } from '@angular/platform-browser/animations';
@NgModule({
imports: [
AuthModule.forRoot(),
TranslateModule.forRoot(),
CoreModule.forRoot(),
BrowserAnimationsModule
],
providers: [
provideTranslations('adf-core', 'assets/adf-core')
]
providers: [provideTranslations('adf-core', 'assets/adf-core'), provideAnimations()]
})
export class CoreStoryModule { }
export class CoreStoryModule {}

1
lib/core/src/lib/testing/index.ts
View File

@@ -17,4 +17,5 @@
export * from './setup-test-bed';
export * from './core.testing.module';
export * from './core.story.module';
export * from './automation.service';

31
lib/core/src/lib/toolbar/toolbar.component.stories.ts
View File

@@ -15,10 +15,11 @@
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { ToolbarComponent } from './toolbar.component';
import { ToolbarModule } from './toolbar.module';
import { importProvidersFrom } from '@angular/core';
export default {
component: ToolbarComponent,
@@ -26,6 +27,9 @@ export default {
decorators: [
moduleMetadata({
imports: [CoreStoryModule, ToolbarModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
@@ -33,7 +37,6 @@ export default {
control: 'radio',
options: ['primary', 'accent', 'warn', undefined],
description: 'Toolbar color.',
defaultValue: undefined,
table: {
type: { summary: 'ThemePalette' },
defaultValue: { summary: 'undefined' }
@@ -42,7 +45,6 @@ export default {
title: {
control: 'text',
description: 'Toolbar title.',
defaultValue: '',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' }
@@ -52,48 +54,53 @@ export default {
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 }
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 }
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 }
defaultValue: { summary: 'false' }
}
}
},
args: {
title: '',
toolbarTitle: false,
toolbarDivider: false,
anyContentProjection: false
}
} as Meta;
} as Meta<ToolbarComponent>;
const template: Story<ToolbarComponent> = (args: ToolbarComponent & { anyContentProjection: boolean } & { toolbarDivider: boolean } & { toolbarTitle: boolean } ) => ({
const template: StoryFn<ToolbarComponent> = (
args: ToolbarComponent & { anyContentProjection: boolean } & { toolbarDivider: boolean } & { toolbarTitle: boolean }
) => ({
props: args,
template: `
<adf-toolbar color="${args.color}" title="${args.title}">
@@ -105,4 +112,4 @@ const template: Story<ToolbarComponent> = (args: ToolbarComponent & { anyContent
</adf-toolbar>`
});
export const toolbar = template.bind({});
export const Toolbar = template.bind({});