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-10280] Storybook stories for Sorting Picker component (#7773)

Browse Source 
* Added Output types to descriptions

* [AAE-10280] Storybook stories for Sorting Picker component
This commit is contained in:
Radosław Terelak
2022-09-12 15:51:49 +02:00
committed by GitHub
parent 48d71c5397
commit d9ddd12e49
11 changed files with 198 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,6 +33,13 @@ export default {
]
})
],
parameters: {
docs: {
description: {
component: 'Displays a list of comments from users involved in a specified task or node'
}
}
},
argTypes: {
comments: {
control: 'object',
@@ -43,8 +50,11 @@ export default {
},
clickRow: {
action: 'clickRow',
description: 'Emitted when the user clicks on one of the comment rows.',
table: { category: 'Actions' }
description: 'Emitted when the user clicks on one of the comment rows',
table: {
category: 'Actions',
type: { summary: 'EventEmitter <CommentModel>' }
}
}
}
} as Meta;

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

@@ -37,6 +37,14 @@ export default {
]
})
],
parameters: {
docs: {
description: {
component: `Displays comments from users involved in a specified task or node.
Allows an involved user to add a comment to a task or a node.`
}
}
},
argTypes: {
comments: {
control: 'object',
@@ -70,8 +78,11 @@ export default {
},
error: {
action: 'error',
description: 'Emitted when an error occurs while displaying/adding a comment.',
table: { category: 'Actions' }
description: 'Emitted when an error occurs while displaying/adding a comment',
table: {
category: 'Actions',
type: { summary: 'EventEmitter <any>' }
}
}
}
} as Meta;

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

@@ -28,6 +28,13 @@ export default {
imports: [CoreStoryModule, IconModule]
})
],
parameters: {
docs: {
description: {
component: `Provides a universal way of rendering registered and named icons.`
}
}
},
argTypes: {
color: {
control: 'radio',

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

@@ -29,6 +29,13 @@ export default {
imports: [CoreStoryModule, InfoDrawerModule]
})
],
parameters: {
docs: {
description: {
component: `Displays a sidebar-style information panel in single layout or using tabs.`
}
}
},
argTypes: {
selectedIndex: {
control: 'select',
@@ -184,8 +191,11 @@ export default {
},
currentTab: {
action: 'currentTab',
description: 'Emitted when the currently active tab changes.',
table: { category: 'Actions' }
description: 'Emitted when the currently active tab changes',
table: {
type: { summary: 'EventEmitter <number>' },
category: 'Actions'
}
}
}
} as Meta;

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

@@ -35,11 +35,21 @@ export default {
]
})
],
parameters: {
docs: {
description: {
component: `Displays all the languages that are present in "app.config.json" and the default (EN).`
}
}
},
argTypes: {
changedLanguage: {
action: 'changedLanguage',
description: 'Emitted when the user clicks on one of the language buttons.',
table: { category: 'Actions' }
table: {
category: 'Actions',
type: { summary: 'EventEmitter <LanguageItem>' }
}
}
}
} as Meta;

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

@@ -39,7 +39,10 @@ export default {
changedLanguage: {
action: 'changedLanguage',
description: 'Emitted when the user clicks on one of the language buttons.',
table: { category: 'Actions' }
table: {
category: 'Actions',
type: { summary: 'EventEmitter <LanguageItem>' }
}
}
}
} as Meta;

24
lib/core/src/lib/sorting-picker/mock/sorting-picker.mock.ts Normal file
View File

@@ -0,0 +1,24 @@
/*!
* @license
* Copyright 2022 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export const initialSortingTypes: Array<{key: string; label: string}> = [
{ key: 'sortByFirstName', label: 'First Name' },
{ key: 'sortByLastName', label: 'Last Name' },
{ key: 'sortByBirthDate', label: 'Birth Date' }
];
export const initialOptionKeys = [...initialSortingTypes.map((type) => type.key.toString())];

95
lib/core/src/lib/sorting-picker/sorting-picker.component.stories.ts Normal file
View File

@@ -0,0 +1,95 @@
/*!
* @license
* Copyright 2022 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Meta, moduleMetadata, Story } 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';
export default {
component: SortingPickerComponent,
title: 'Core/Sorting Picker/Sorting Picker',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, SortingPickerModule]
})
],
parameters: {
docs: {
description: {
component: `The picker shows the user a menu of sorting options (which could be data columns to sort on alphabetical vs numerical search, etc)
and the choice of ascending vs descending sort order.
Note that picker only implements the menu, so you are responsible for implementing the sorting options yourself.`
}
}
},
argTypes: {
selected: {
control: 'select',
options: initialOptionKeys,
description: 'Currently selected option key',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' }
}
},
ascending: {
control: 'boolean',
description: 'Current sorting direction',
defaultValue: true,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
options: {
description: 'Available sorting options',
defaultValue: [],
table: {
type: { summary: 'Array<{key: string; label: string}>' },
defaultValue: { summary: '[]' }
}
},
valueChange: {
action: 'valueChange',
description: 'Raised each time sorting key gets changed',
table: {
type: { summary: 'EventEmitter <string>' },
category: 'Actions'
}
},
sortingChange: {
action: 'sortingChange',
description: 'Raised each time direction gets changed',
table: {
type: { summary: 'EventEmitter <boolean>' },
category: 'Actions'
}
}
}
} as Meta;
const template: Story<SortingPickerModule> = (args: SortingPickerComponent) => ({
props: args
});
export const SortingPicker = template.bind({});
SortingPicker.args = {
options: initialSortingTypes
};

8
lib/core/src/lib/sorting-picker/sorting-picker.module.ts
View File

@@ -18,13 +18,17 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { MaterialModule } from '../material.module';
import { SortingPickerComponent } from './sorting-picker.component';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatSelectModule } from '@angular/material/select';
@NgModule({
imports: [
CommonModule,
MaterialModule,
MatButtonModule,
MatIconModule,
MatSelectModule,
TranslateModule
],
declarations: [

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

@@ -28,6 +28,13 @@ export default {
imports: [CoreStoryModule, TemplateModule]
})
],
parameters: {
docs: {
description: {
component: `Provides a generic "Empty Content" placeholder for components.`
}
}
},
argTypes: {
icon: {
control: 'text',

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

@@ -32,6 +32,13 @@ export default {
]
})
],
parameters: {
docs: {
description: {
component: `Displays information about a specific error.`
}
}
},
argTypes: {
errorCode: {
control: 'text',