From 522dee2f9928a7166b912cdb961ba5d8fbf97d9b Mon Sep 17 00:00:00 2001 From: Andrea A Fernandes Date: Thu, 29 Feb 2024 21:11:32 +0530 Subject: [PATCH] chore(modal): update stories to CSFv3 (#1286) - CDE-1534 [Storybook] - Refactor modal stories to CSFv3 ## PR Checklist Please check if your PR fulfills the following requirements: - [ ] Tests for the changes have been added (for bug fixes / features) - [x] Docs have been added / updated (for bug fixes / features) - [ ] If applicable, have a visual design approval ## PR Type What kind of change does this PR introduce? - [ ] Bugfix - [ ] Feature - [ ] Code style update (formatting, local variables) - [x] Refactoring (no functional changes, no api changes) - [ ] Build related changes - [ ] CI related changes - [ ] Documentation content changes - [ ] Other... Please describe: ## What is the current behavior? Issue Number: [CDE-1534](https://jira.eng.vmware.com/browse/CDE-1534) ## What is the new behavior? Refactored modal stories to CSFv3 ## Does this PR introduce a breaking change? - [ ] Yes - [x] No ## Other information --------- Signed-off-by: Andrea Fernandes Co-authored-by: Andrea Fernandes Co-authored-by: GitHub --- .../stories/modal/modal-static.stories.ts | 62 ++++++++------ .storybook/stories/modal/modal.stories.ts | 78 +++++++++--------- .../modal/nested-datagrid-detail.stories.ts | 40 +++++---- .../stories/modal/nested-popover.stories.ts | 40 +++++---- .../stories/modal/stacked-modal.stories.ts | 42 ++++++---- ...re-dark.png => modal--modal-core-dark.png} | Bin ...-light.png => modal--modal-core-light.png} | Bin ...tail--nested-datagrid-detail-core-dark.png | Bin 0 -> 6591 bytes ...ail--nested-datagrid-detail-core-light.png | Bin 0 -> 6529 bytes ...sted-popover--nested-popover-core-dark.png | Bin 0 -> 2524 bytes ...ted-popover--nested-popover-core-light.png | Bin 0 -> 2545 bytes ...stacked-modal--stacked-modal-core-dark.png | Bin 0 -> 6621 bytes ...tacked-modal--stacked-modal-core-light.png | Bin 0 -> 6596 bytes .../static--extra-large-modal-core-dark.png | Bin 0 -> 10305 bytes .../static--extra-large-modal-core-light.png | Bin 0 -> 10420 bytes .../modal/static--large-modal-core-dark.png | Bin 0 -> 9175 bytes .../modal/static--large-modal-core-light.png | Bin 0 -> 9367 bytes .../modal/static--medium-modal-core-dark.png | Bin 0 -> 8933 bytes .../modal/static--medium-modal-core-light.png | Bin 0 -> 9060 bytes .../modal/static--small-modal-core-dark.png | Bin 0 -> 8513 bytes .../modal/static--small-modal-core-light.png | Bin 0 -> 8646 bytes .../modal/static--variants-core-dark.png | Bin 35937 -> 0 bytes .../modal/static--variants-core-light.png | Bin 36495 -> 0 bytes ...re-dark.png => modal--modal-core-dark.png} | Bin ...-light.png => modal--modal-core-light.png} | Bin ...tail--nested-datagrid-detail-core-dark.png | Bin 0 -> 10264 bytes ...ail--nested-datagrid-detail-core-light.png | Bin 0 -> 10114 bytes ...sted-popover--nested-popover-core-dark.png | Bin 0 -> 4613 bytes ...ted-popover--nested-popover-core-light.png | Bin 0 -> 4552 bytes ...stacked-modal--stacked-modal-core-dark.png | Bin 0 -> 10310 bytes ...tacked-modal--stacked-modal-core-light.png | Bin 0 -> 10172 bytes .../static--extra-large-modal-core-dark.png | Bin 0 -> 21102 bytes .../static--extra-large-modal-core-light.png | Bin 0 -> 20915 bytes .../modal/static--large-modal-core-dark.png | Bin 0 -> 19296 bytes .../modal/static--large-modal-core-light.png | Bin 0 -> 19198 bytes .../modal/static--medium-modal-core-dark.png | Bin 0 -> 19813 bytes .../modal/static--medium-modal-core-light.png | Bin 0 -> 19893 bytes .../modal/static--small-modal-core-dark.png | Bin 0 -> 18815 bytes .../modal/static--small-modal-core-light.png | Bin 0 -> 18938 bytes .../modal/static--variants-core-dark.png | Bin 76766 -> 0 bytes .../modal/static--variants-core-light.png | Bin 76574 -> 0 bytes 41 files changed, 148 insertions(+), 114 deletions(-) rename tests/snapshots/chromium/modal/{modal--variants-core-dark.png => modal--modal-core-dark.png} (100%) rename tests/snapshots/chromium/modal/{modal--variants-core-light.png => modal--modal-core-light.png} (100%) create mode 100644 tests/snapshots/chromium/modal/nested-datagrid-detail--nested-datagrid-detail-core-dark.png create mode 100644 tests/snapshots/chromium/modal/nested-datagrid-detail--nested-datagrid-detail-core-light.png create mode 100644 tests/snapshots/chromium/modal/nested-popover--nested-popover-core-dark.png create mode 100644 tests/snapshots/chromium/modal/nested-popover--nested-popover-core-light.png create mode 100644 tests/snapshots/chromium/modal/stacked-modal--stacked-modal-core-dark.png create mode 100644 tests/snapshots/chromium/modal/stacked-modal--stacked-modal-core-light.png create mode 100644 tests/snapshots/chromium/modal/static--extra-large-modal-core-dark.png create mode 100644 tests/snapshots/chromium/modal/static--extra-large-modal-core-light.png create mode 100644 tests/snapshots/chromium/modal/static--large-modal-core-dark.png create mode 100644 tests/snapshots/chromium/modal/static--large-modal-core-light.png create mode 100644 tests/snapshots/chromium/modal/static--medium-modal-core-dark.png create mode 100644 tests/snapshots/chromium/modal/static--medium-modal-core-light.png create mode 100644 tests/snapshots/chromium/modal/static--small-modal-core-dark.png create mode 100644 tests/snapshots/chromium/modal/static--small-modal-core-light.png delete mode 100644 tests/snapshots/chromium/modal/static--variants-core-dark.png delete mode 100644 tests/snapshots/chromium/modal/static--variants-core-light.png rename tests/snapshots/firefox/modal/{modal--variants-core-dark.png => modal--modal-core-dark.png} (100%) rename tests/snapshots/firefox/modal/{modal--variants-core-light.png => modal--modal-core-light.png} (100%) create mode 100644 tests/snapshots/firefox/modal/nested-datagrid-detail--nested-datagrid-detail-core-dark.png create mode 100644 tests/snapshots/firefox/modal/nested-datagrid-detail--nested-datagrid-detail-core-light.png create mode 100644 tests/snapshots/firefox/modal/nested-popover--nested-popover-core-dark.png create mode 100644 tests/snapshots/firefox/modal/nested-popover--nested-popover-core-light.png create mode 100644 tests/snapshots/firefox/modal/stacked-modal--stacked-modal-core-dark.png create mode 100644 tests/snapshots/firefox/modal/stacked-modal--stacked-modal-core-light.png create mode 100644 tests/snapshots/firefox/modal/static--extra-large-modal-core-dark.png create mode 100644 tests/snapshots/firefox/modal/static--extra-large-modal-core-light.png create mode 100644 tests/snapshots/firefox/modal/static--large-modal-core-dark.png create mode 100644 tests/snapshots/firefox/modal/static--large-modal-core-light.png create mode 100644 tests/snapshots/firefox/modal/static--medium-modal-core-dark.png create mode 100644 tests/snapshots/firefox/modal/static--medium-modal-core-light.png create mode 100644 tests/snapshots/firefox/modal/static--small-modal-core-dark.png create mode 100644 tests/snapshots/firefox/modal/static--small-modal-core-light.png delete mode 100644 tests/snapshots/firefox/modal/static--variants-core-dark.png delete mode 100644 tests/snapshots/firefox/modal/static--variants-core-light.png diff --git a/.storybook/stories/modal/modal-static.stories.ts b/.storybook/stories/modal/modal-static.stories.ts index 88e4a54d6b..e819f322cf 100644 --- a/.storybook/stories/modal/modal-static.stories.ts +++ b/.storybook/stories/modal/modal-static.stories.ts @@ -5,12 +5,28 @@ */ import { ClrModalModule } from '@clr/angular'; -import { Parameters } from '@storybook/addons'; -import { Story } from '@storybook/angular'; +import { moduleMetadata, Story, StoryObj } from '@storybook/angular'; -import { setupStorybook } from '../../helpers/setup-storybook.helpers'; +import { CommonModules } from '../../helpers/common'; -const defaultStory: Story = args => ({ +export default { + title: 'Modal/Static', + decorators: [ + moduleMetadata({ + imports: [...CommonModules, ClrModalModule], + }), + ], + argTypes: { + size: { defaultValue: 'md', control: { type: 'radio', options: ['sm', 'md', 'lg', 'xl'] } }, + }, + args: { + title: 'Small Modal', + body: 'This is a small modal.', + size: 'sm', + }, +}; + +const ModalStaticTemplate: Story = args => ({ template: `