From d9ddd12e49774f2756acfa4b25b4e46126c7dfe3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rados=C5=82aw=20Terelak?= <64163335+Venrofi@users.noreply.github.com> Date: Mon, 12 Sep 2022 15:51:49 +0200 Subject: [PATCH] [AAE-10280] Storybook stories for Sorting Picker component (#7773) * Added Output types to descriptions * [AAE-10280] Storybook stories for Sorting Picker component --- .../comment-list.component.stories.ts | 14 ++- .../comments/comments.component.stories.ts | 15 ++- .../src/lib/icon/icon.component.stories.ts | 7 ++ .../info-drawer.component.stories.ts | 14 ++- .../language-menu.component.stories.ts | 12 ++- .../language-picker.component.stories.ts | 5 +- .../mock/sorting-picker.mock.ts | 24 +++++ .../sorting-picker.component.stories.ts | 95 +++++++++++++++++++ .../sorting-picker/sorting-picker.module.ts | 8 +- .../empty-content.component.stories.ts | 7 ++ .../error-content.component.stories.ts | 7 ++ 11 files changed, 198 insertions(+), 10 deletions(-) create mode 100644 lib/core/src/lib/sorting-picker/mock/sorting-picker.mock.ts create mode 100644 lib/core/src/lib/sorting-picker/sorting-picker.component.stories.ts diff --git a/lib/core/src/lib/comments/comment-list.component.stories.ts b/lib/core/src/lib/comments/comment-list.component.stories.ts index 26d21ff6fc..656fff0d17 100644 --- a/lib/core/src/lib/comments/comment-list.component.stories.ts +++ b/lib/core/src/lib/comments/comment-list.component.stories.ts @@ -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 ' } + } } } } as Meta; diff --git a/lib/core/src/lib/comments/comments.component.stories.ts b/lib/core/src/lib/comments/comments.component.stories.ts index 1b68c5dfd9..91a7f4b9e6 100644 --- a/lib/core/src/lib/comments/comments.component.stories.ts +++ b/lib/core/src/lib/comments/comments.component.stories.ts @@ -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 ' } + } } } } as Meta; diff --git a/lib/core/src/lib/icon/icon.component.stories.ts b/lib/core/src/lib/icon/icon.component.stories.ts index 5fb2cd51bb..c1dd96df88 100644 --- a/lib/core/src/lib/icon/icon.component.stories.ts +++ b/lib/core/src/lib/icon/icon.component.stories.ts @@ -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', diff --git a/lib/core/src/lib/info-drawer/info-drawer.component.stories.ts b/lib/core/src/lib/info-drawer/info-drawer.component.stories.ts index 9c405cee92..f96ed17e3e 100644 --- a/lib/core/src/lib/info-drawer/info-drawer.component.stories.ts +++ b/lib/core/src/lib/info-drawer/info-drawer.component.stories.ts @@ -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 ' }, + category: 'Actions' + } } } } as Meta; diff --git a/lib/core/src/lib/language-menu/language-menu.component.stories.ts b/lib/core/src/lib/language-menu/language-menu.component.stories.ts index 1388802f13..459208541b 100644 --- a/lib/core/src/lib/language-menu/language-menu.component.stories.ts +++ b/lib/core/src/lib/language-menu/language-menu.component.stories.ts @@ -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 ' } + } } } } as Meta; diff --git a/lib/core/src/lib/language-menu/language-picker.component.stories.ts b/lib/core/src/lib/language-menu/language-picker.component.stories.ts index 4b26bc9091..39bbcb9d27 100644 --- a/lib/core/src/lib/language-menu/language-picker.component.stories.ts +++ b/lib/core/src/lib/language-menu/language-picker.component.stories.ts @@ -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 ' } + } } } } as Meta; diff --git a/lib/core/src/lib/sorting-picker/mock/sorting-picker.mock.ts b/lib/core/src/lib/sorting-picker/mock/sorting-picker.mock.ts new file mode 100644 index 0000000000..97d24a94e3 --- /dev/null +++ b/lib/core/src/lib/sorting-picker/mock/sorting-picker.mock.ts @@ -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())]; diff --git a/lib/core/src/lib/sorting-picker/sorting-picker.component.stories.ts b/lib/core/src/lib/sorting-picker/sorting-picker.component.stories.ts new file mode 100644 index 0000000000..ec7da29e87 --- /dev/null +++ b/lib/core/src/lib/sorting-picker/sorting-picker.component.stories.ts @@ -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 ' }, + category: 'Actions' + } + }, + sortingChange: { + action: 'sortingChange', + description: 'Raised each time direction gets changed', + table: { + type: { summary: 'EventEmitter ' }, + category: 'Actions' + } + } + } +} as Meta; + +const template: Story = (args: SortingPickerComponent) => ({ + props: args +}); + +export const SortingPicker = template.bind({}); +SortingPicker.args = { + options: initialSortingTypes +}; diff --git a/lib/core/src/lib/sorting-picker/sorting-picker.module.ts b/lib/core/src/lib/sorting-picker/sorting-picker.module.ts index cf24cd3906..2df9aa4c07 100644 --- a/lib/core/src/lib/sorting-picker/sorting-picker.module.ts +++ b/lib/core/src/lib/sorting-picker/sorting-picker.module.ts @@ -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: [ diff --git a/lib/core/src/lib/templates/empty-content/empty-content.component.stories.ts b/lib/core/src/lib/templates/empty-content/empty-content.component.stories.ts index 5ea8be5416..8acc106311 100644 --- a/lib/core/src/lib/templates/empty-content/empty-content.component.stories.ts +++ b/lib/core/src/lib/templates/empty-content/empty-content.component.stories.ts @@ -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', diff --git a/lib/core/src/lib/templates/error-content/error-content.component.stories.ts b/lib/core/src/lib/templates/error-content/error-content.component.stories.ts index 115ffa9bbe..2a93dd017c 100644 --- a/lib/core/src/lib/templates/error-content/error-content.component.stories.ts +++ b/lib/core/src/lib/templates/error-content/error-content.component.stories.ts @@ -32,6 +32,13 @@ export default { ] }) ], + parameters: { + docs: { + description: { + component: `Displays information about a specific error.` + } + } + }, argTypes: { errorCode: { control: 'text',