-
Notifications
You must be signed in to change notification settings - Fork 159
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(content-switcher): update story to Storybook v7 (#11315)
* chore(content-switcher): update content-switcher to sb v7 * fix(content-switcher): add imports for content-switcher dependencies * fix(content-switcher): fix css selector for icon only styles * fix(content-switcher): restore the size options * chore(content-switcher): include storybook layers components --------- Co-authored-by: kennylam <[email protected]>
- Loading branch information
Showing
6 changed files
with
192 additions
and
156 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
150 changes: 0 additions & 150 deletions
150
packages/carbon-web-components/src/components/content-switcher/content-switcher-story.ts
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
179 changes: 179 additions & 0 deletions
179
packages/carbon-web-components/src/components/content-switcher/content-switcher.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,179 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Copyright IBM Corp. 2019, 2024 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import { html } from 'lit'; | ||
| import { ifDefined } from 'lit/directives/if-defined.js'; | ||
| import { CONTENT_SWITCHER_SIZE } from './content-switcher'; | ||
| import './index'; | ||
| import storyDocs from './content-switcher.mdx'; | ||
| import { prefix } from '../../globals/settings'; | ||
| import TableOfContents16 from '@carbon/web-components/es/icons/table-of-contents/16'; | ||
| import Workspace16 from '@carbon/web-components/es/icons/workspace/16'; | ||
| import ViewMode2_16 from '@carbon/web-components/es/icons/view--mode-2/16'; | ||
| import '../layer/index'; | ||
| import '../../../.storybook/templates/with-layer'; | ||
|
|
||
| const noop = () => {}; | ||
|
|
||
| const sizes = { | ||
| 'Medium (md - default)': null, | ||
| [`Small (${CONTENT_SWITCHER_SIZE.SMALL})`]: CONTENT_SWITCHER_SIZE.SMALL, | ||
| [`Large (${CONTENT_SWITCHER_SIZE.LARGE})`]: CONTENT_SWITCHER_SIZE.LARGE, | ||
| }; | ||
|
|
||
| const args = { | ||
| value: '', | ||
| size: null, | ||
| disableSelection: false, | ||
| }; | ||
|
|
||
| const argTypes = { | ||
| value: { | ||
| control: 'text', | ||
| description: 'The value of the selected item (value)', | ||
| }, | ||
| size: { | ||
| control: 'select', | ||
| options: sizes, | ||
| description: 'Button size (size)', | ||
| }, | ||
| disableSelection: { | ||
| control: 'boolean', | ||
| description: `Disable user-initiated selection change (Call event.preventDefault() in ${prefix}-content-switcher-beingselected event)`, | ||
| }, | ||
| onBeforeSelect: { | ||
| action: `${prefix}-content-switcher-beingselected`, | ||
| }, | ||
| onSelect: { | ||
| action: `${prefix}-content-switcher-selected`, | ||
| }, | ||
| }; | ||
|
|
||
| export const Default = { | ||
| render: () => html` | ||
| <cds-content-switcher value="all"> | ||
| <cds-content-switcher-item value="all"> | ||
| First section | ||
| </cds-content-switcher-item> | ||
| <cds-content-switcher-item value="cloudFoundry"> | ||
| Second section | ||
| </cds-content-switcher-item> | ||
| <cds-content-switcher-item value="staging"> | ||
| Third section | ||
| </cds-content-switcher-item> | ||
| </cds-content-switcher> | ||
| `, | ||
| }; | ||
|
|
||
| export const IconOnly = { | ||
| render: () => html` | ||
| <cds-content-switcher value="all"> | ||
| <cds-content-switcher-item icon value="all"> | ||
| ${TableOfContents16()} | ||
| <span slot="tooltip-content">Table of Contents</span> | ||
| </cds-content-switcher-item> | ||
| <cds-content-switcher-item icon value="cloudFoundry"> | ||
| ${Workspace16()} | ||
| <span slot="tooltip-content">Workspace Test</span> | ||
| </cds-content-switcher-item> | ||
| <cds-content-switcher-item icon value="staging"> | ||
| ${ViewMode2_16()} | ||
| <span slot="tooltip-content">View Mode</span> | ||
| </cds-content-switcher-item> | ||
| </cds-content-switcher> | ||
| `, | ||
| }; | ||
|
|
||
| export const IconOnlyWithLayer = { | ||
| render: () => html` | ||
| <sb-template-layers> | ||
| <cds-content-switcher value="all"> | ||
| <cds-content-switcher-item icon value="all"> | ||
| ${TableOfContents16()} | ||
| <span slot="tooltip-content">Table of Contents</span> | ||
| </cds-content-switcher-item> | ||
| <cds-content-switcher-item icon value="cloudFoundry"> | ||
| ${Workspace16()} | ||
| <span slot="tooltip-content">Workspace Test</span> | ||
| </cds-content-switcher-item> | ||
| <cds-content-switcher-item icon value="staging"> | ||
| ${ViewMode2_16()} | ||
| <span slot="tooltip-content">View Mode</span> | ||
| </cds-content-switcher-item> | ||
| </cds-content-switcher> | ||
| </sb-template-layers> | ||
| `, | ||
| }; | ||
|
|
||
| export const WithLayer = { | ||
| render: () => html` | ||
| <sb-template-layers> | ||
| <cds-content-switcher value="all"> | ||
| <cds-content-switcher-item value="all"> | ||
| First section | ||
| </cds-content-switcher-item> | ||
| <cds-content-switcher-item value="cloudFoundry"> | ||
| Second section | ||
| </cds-content-switcher-item> | ||
| <cds-content-switcher-item value="staging"> | ||
| Third section | ||
| </cds-content-switcher-item> | ||
| </cds-content-switcher> | ||
| </sb-template-layers> | ||
| `, | ||
| }; | ||
|
|
||
| export const Playground = { | ||
| args, | ||
| argTypes, | ||
| render: (args) => { | ||
| const { | ||
| value, | ||
| disableSelection, | ||
| onBeforeSelect = noop, | ||
| onSelect = noop, | ||
| size, | ||
| } = args ?? {}; | ||
| const handleBeforeSelected = (event: CustomEvent) => { | ||
| onBeforeSelect(event); | ||
| if (disableSelection) { | ||
| event.preventDefault(); | ||
| } | ||
| }; | ||
|
|
||
| return html` | ||
| <cds-content-switcher | ||
| value="${ifDefined(value)}" | ||
| @cds-content-switcher-beingselected="${handleBeforeSelected}" | ||
| @cds-content-switcher-selected="${onSelect}" | ||
| size="${size}"> | ||
| <cds-content-switcher-item value="all"> | ||
| First section | ||
| </cds-content-switcher-item> | ||
| <cds-content-switcher-item value="cloudFoundry"> | ||
| Second section | ||
| </cds-content-switcher-item> | ||
| <cds-content-switcher-item value="staging"> | ||
| Third section | ||
| </cds-content-switcher-item> | ||
| </cds-content-switcher> | ||
| `; | ||
| }, | ||
| }; | ||
|
|
||
| const meta = { | ||
| title: 'Components/Content switcher', | ||
| parameters: { | ||
| docs: { | ||
| page: storyDocs, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; |
4 changes: 3 additions & 1 deletion
4
packages/carbon-web-components/src/components/content-switcher/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,13 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Copyright IBM Corp. 2021, 2022 | ||
| * Copyright IBM Corp. 2021, 2024 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import '../tooltip/tooltip'; | ||
| import '../tooltip/tooltip-content'; | ||
| import './content-switcher'; | ||
| import './content-switcher-item'; |