From deff5b2cf11492148342047b224b1c09354c039d Mon Sep 17 00:00:00 2001 From: Matthew Oliveira Date: Fri, 5 Jan 2024 10:50:37 -0500 Subject: [PATCH] chore(overflow-menu): update overflow-menu stories to sb v7 (#11338) --- .../carbon-web-components/.storybook/main.ts | 2 + .../overflow-menu/overflow-menu-story.ts | 119 -------------- ...rflow-menu-story.mdx => overflow-menu.mdx} | 15 +- .../overflow-menu/overflow-menu.stories.ts | 146 ++++++++++++++++++ 4 files changed, 157 insertions(+), 125 deletions(-) delete mode 100644 packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.ts rename packages/carbon-web-components/src/components/overflow-menu/{overflow-menu-story.mdx => overflow-menu.mdx} (84%) create mode 100644 packages/carbon-web-components/src/components/overflow-menu/overflow-menu.stories.ts diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts index e67e7d2c039..af2b6b91f3f 100644 --- a/packages/carbon-web-components/.storybook/main.ts +++ b/packages/carbon-web-components/.storybook/main.ts @@ -15,6 +15,8 @@ const stories = glob.sync( '../src/**/link.stories.ts', '../src/**/file-uploader.mdx', '../src/**/file-uploader.stories.ts', + '../src/**/overflow-menu.mdx', + '../src/**/overflow-menu.stories.ts', ], { ignore: ['../src/**/docs/*.mdx'], diff --git a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.ts b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.ts deleted file mode 100644 index 03cd05e7fb0..00000000000 --- a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.ts +++ /dev/null @@ -1,119 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2023 - * - * 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 { boolean, number, select } from '@storybook/addon-knobs'; -import textNullable from '../../../.storybook-backup/knob-text-nullable'; -import { OVERFLOW_MENU_SIZE } from './overflow-menu'; -import './overflow-menu-body'; -import './overflow-menu-item'; -import storyDocs from './overflow-menu-story.mdx'; -import { prefix } from '../../globals/settings'; -import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16'; -import Filter16 from '@carbon/icons/lib/filter/16'; - -const sizes = { - [`Small size (${OVERFLOW_MENU_SIZE.SMALL})`]: OVERFLOW_MENU_SIZE.SMALL, - [`Medium size (default) (${OVERFLOW_MENU_SIZE.MEDIUM})`]: - OVERFLOW_MENU_SIZE.MEDIUM, - [`Lg size (${OVERFLOW_MENU_SIZE.LARGE})`]: OVERFLOW_MENU_SIZE.LARGE, -}; - -export const Default = () => { - return html` - - ${OverflowMenuVertical16({ - class: `${prefix}--overflow-menu__icon`, - slot: 'icon', - })} - Options - - Stop app - Restart app - Rename app - Clone and move app - Edit routes and access - Delete app - - - `; -}; - -export const renderCustomIcon = () => { - return html` - - ${Filter16({ - class: `${prefix}--overflow-menu__icon`, - slot: 'icon', - })} - Options - - Filter A - Filter B - - - `; -}; - -export const Playground = (args) => { - const { flipped, iconDescription, open, index, size } = - args?.[`${prefix}-overflow-menu`] ?? {}; - return html` - - ${OverflowMenuVertical16({ - class: `${prefix}--overflow-menu__icon`, - slot: 'icon', - })} - ${iconDescription} - - Stop app - Restart app - Rename app - Clone and move app - Edit routes and access - Delete app - - - `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-overflow-menu`]: () => ({ - flipped: boolean('Flipped (flipped)', false), - iconDescription: textNullable( - 'Icon description (iconDescription)', - 'Options' - ), - open: boolean('Open (open)', false), - index: number('Index focus (index)', 1), - size: select( - 'Overflow menu size (size)', - sizes, - OVERFLOW_MENU_SIZE.MEDIUM - ), - }), - }, -}; - -export default { - title: 'Components/Overflow menu', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.mdx b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.mdx similarity index 84% rename from packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.mdx rename to packages/carbon-web-components/src/components/overflow-menu/overflow-menu.mdx index f573484e105..1ef3fad2bc6 100644 --- a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.mdx +++ b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.mdx @@ -1,5 +1,8 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as OverflowMenuStories from './overflow-menu.stories'; + + # Overflow menu @@ -24,8 +27,8 @@ import '@carbon/web-components/es/components/overflow-menu/index.js'; import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16'; ``` - - +{`${cdnJs({ components: ['overflow-menu'] })}`} +{`${cdnCss()}`} ### HTML @@ -50,11 +53,11 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `open` attribute). - + ## `` attributes and properties - + ## `` attributes and properties @@ -62,4 +65,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `disabled` attribute). - + diff --git a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.stories.ts b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.stories.ts new file mode 100644 index 00000000000..dbf13824101 --- /dev/null +++ b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.stories.ts @@ -0,0 +1,146 @@ +/** + * @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 { OVERFLOW_MENU_SIZE } from './overflow-menu'; +import './overflow-menu-body'; +import './overflow-menu-item'; +import storyDocs from './overflow-menu.mdx'; +import { prefix } from '../../globals/settings'; +import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16'; +import Filter16 from '@carbon/icons/lib/filter/16'; + +const sizes = { + [`Small size (${OVERFLOW_MENU_SIZE.SMALL})`]: OVERFLOW_MENU_SIZE.SMALL, + [`Medium size (default) (${OVERFLOW_MENU_SIZE.MEDIUM})`]: + OVERFLOW_MENU_SIZE.MEDIUM, + [`Lg size (${OVERFLOW_MENU_SIZE.LARGE})`]: OVERFLOW_MENU_SIZE.LARGE, +}; + +const args = { + flipped: false, + iconDescription: 'Options', + open: false, + index: 1, + size: OVERFLOW_MENU_SIZE.MEDIUM, +}; + +const argTypes = { + flipped: { + control: 'boolean', + description: 'true if the menu alignment should be flipped.', + }, + iconDescription: { + control: 'text', + description: 'The icon description.', + }, + open: { + control: 'boolean', + description: 'true if the menu should be open.\n', + }, + index: { + control: 'number', + description: 'The index for the item which should be focused in the menu.', + }, + size: { + control: 'select', + description: + 'Specify the size of the OverflowMenu. Currently supports either sm, md (default) or lg as an option.', + options: sizes, + }, +}; + +export const Default = { + render: () => { + return html` + + ${OverflowMenuVertical16({ + class: `${prefix}--overflow-menu__icon`, + slot: 'icon', + })} + Options + + Stop app + Restart app + Rename app + Clone and move app + Edit routes and access + Delete app + + + `; + }, +}; + +export const RenderCustomIcon = { + render: () => { + return html` + + ${Filter16({ + class: `${prefix}--overflow-menu__icon`, + slot: 'icon', + })} + Options + + Filter A + Filter B + + + `; + }, +}; + +export const Playground = { + args, + argTypes, + render: (args) => { + const { flipped, iconDescription, open, index, size } = args ?? {}; + return html` + + ${OverflowMenuVertical16({ + class: `${prefix}--overflow-menu__icon`, + slot: 'icon', + })} + ${iconDescription} + + Stop app + Restart app + Rename app + Clone and move app + Edit routes and access + Delete app + + + `; + }, +}; + +const meta = { + title: 'Components/Overflow Menu', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta;