diff --git a/web-components/packages/carbon-web-components/.storybook/main.ts b/web-components/packages/carbon-web-components/.storybook/main.ts index 983c80c03413..f3c87a42dc74 100644 --- a/web-components/packages/carbon-web-components/.storybook/main.ts +++ b/web-components/packages/carbon-web-components/.storybook/main.ts @@ -44,6 +44,10 @@ const stories = glob.sync( '../src/**/skip-to-content.stories.ts', '../src/**/slider.mdx', '../src/**/slider.stories.ts', + '../src/**/tag.mdx', + '../src/**/tag.stories.ts', + '../src/**/tooltip.mdx', + '../src/**/tooltip.stories.ts', ], { ignore: ['../src/**/docs/*.mdx'], diff --git a/web-components/packages/carbon-web-components/src/components/tag/tag-story.ts b/web-components/packages/carbon-web-components/src/components/tag/tag-story.ts deleted file mode 100644 index ce6887efdf96..000000000000 --- a/web-components/packages/carbon-web-components/src/components/tag/tag-story.ts +++ /dev/null @@ -1,94 +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 { action } from '@storybook/addon-actions'; -import { boolean, select } from '@storybook/addon-knobs'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { TAG_SIZE, TAG_TYPE } from './tag'; -import './index'; -import storyDocs from './tag-story.mdx'; -import { prefix } from '../../globals/settings'; - -const sizes = { - [`Medium size (${TAG_SIZE.MEDIUM})`]: TAG_SIZE.MEDIUM, - [`Small size (${TAG_SIZE.SMALL})`]: TAG_SIZE.SMALL, -}; - -const types = [ - 'red', - 'magenta', - 'purple', - 'blue', - 'cyan', - 'teal', - 'green', - 'gray', - 'cool-gray', - 'warm-gray', - 'high-contrast', - 'outline', -]; - -export const Default = () => { - return html` - ${types.map((e) => html`Tag content`)} - `; -}; - -export const Playground = (args) => { - const { open, filter, size, type, title, disabled } = - args?.[`${prefix}-tag`] ?? {}; - - return html` - - This is a tag - - `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-tag`]: () => ({ - disabled: boolean('Disabled (disabled)', false), - title: textNullable('Title (title)', 'Clear Selection'), - size: select('Tag size (size)', sizes, TAG_SIZE.MEDIUM), - type: select( - 'Tag type (type)', - Object.values(TAG_TYPE).reduce( - (acc, type) => ({ - ...acc, - [`${type} (${type})`]: type, - }), - {} - ), - 'gray' - ), - open: boolean('Open', true), - filter: boolean('Filter', false), - onClick: action('click'), - onBeforeClose: action(`${prefix}-tag-beingclosed`), - onClose: action(`${prefix}-tag-closed`), - }), - }, -}; - -export default { - parameters: { - ...storyDocs.parameters, - }, - title: 'Components/Tag', -}; diff --git a/web-components/packages/carbon-web-components/src/components/tag/tag-story.mdx b/web-components/packages/carbon-web-components/src/components/tag/tag.mdx similarity index 85% rename from web-components/packages/carbon-web-components/src/components/tag/tag-story.mdx rename to web-components/packages/carbon-web-components/src/components/tag/tag.mdx index 1c38708a9024..f6bd77de6fe8 100644 --- a/web-components/packages/carbon-web-components/src/components/tag/tag-story.mdx +++ b/web-components/packages/carbon-web-components/src/components/tag/tag.mdx @@ -1,5 +1,8 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Description, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as TagStories from './tag.stories'; + + # Tag @@ -69,7 +72,7 @@ function App() { html` This is a tag ${Download16({ slot: 'icon' })}` ); } - +``` ## `` attributes and properties @@ -77,13 +80,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). - - -## `` attributes and properties - -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/web-components/packages/carbon-web-components/src/components/tag/tag.stories.ts b/web-components/packages/carbon-web-components/src/components/tag/tag.stories.ts new file mode 100644 index 000000000000..d308be1e7c2a --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/tag/tag.stories.ts @@ -0,0 +1,97 @@ +/** + * @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 { TAG_SIZE } from './tag'; +import './index'; +import storyDocs from './tag.mdx'; + +const sizes = { + [`Medium size (${TAG_SIZE.MEDIUM})`]: TAG_SIZE.MEDIUM, + [`Small size (${TAG_SIZE.SMALL})`]: TAG_SIZE.SMALL, +}; + +const types = [ + 'red', + 'magenta', + 'purple', + 'blue', + 'cyan', + 'teal', + 'green', + 'gray', + 'cool-gray', + 'warm-gray', + 'high-contrast', + 'outline', +]; + +const defaultArgs = { + disabled: false, + filter: false, + title: 'Clear filter', + size: TAG_SIZE.MEDIUM, +}; + +const controls = { + disabled: { + control: 'boolean', + description: 'Specify if the Tag is disabled', + }, + filter: { + control: 'boolean', + description: 'Determine if Tag is a filter/chip', + }, + size: { + control: 'select', + description: + 'Specify the size of the Tag. Currently supports either sm or "md" (default) sizes.', + options: sizes, + }, + title: { + control: 'text', + description: 'Text to show on clear filters', + }, + type: { + control: 'select', + description: 'Specify the type of the Tag.', + options: types, + }, +}; + +export const Default = { + render: () => + html`${types.map((e) => html`Tag content`)}`, +}; + +export const Playground = { + argTypes: controls, + args: defaultArgs, + render: ({ filter, size, type, title, disabled }) => html` + + Tag content + + `, +}; + +const meta = { + title: 'Components/Tag', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta; diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.scss b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.scss index ff8ddb944fee..52aecf270113 100644 --- a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.scss +++ b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.scss @@ -29,7 +29,6 @@ justify-content: center; width: $spacing-07; height: $spacing-07; - border: 1px solid theme.$border-subtle; } .sb-tooltip-trigger svg { diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.mdx b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip.mdx similarity index 96% rename from web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.mdx rename to web-components/packages/carbon-web-components/src/components/tooltip/tooltip.mdx index 22d60fbeeadf..b264609b4856 100644 --- a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.mdx +++ b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Description } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # Tooltip @@ -60,4 +60,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `open` attribute). - + diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip.stories.ts similarity index 60% rename from web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts rename to web-components/packages/carbon-web-components/src/components/tooltip/tooltip.stories.ts index 580662628047..23df05ef638d 100644 --- a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts +++ b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip.stories.ts @@ -8,16 +8,13 @@ */ import { html } from 'lit'; -import { boolean, number, select, text } from '@storybook/addon-knobs'; // Below path will be there when an application installs `@carbon/web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore -import './tooltip'; -import './tooltip-content'; +import './index'; import { POPOVER_ALIGNMENT } from '../popover/defs'; -import { prefix } from '../../globals/settings'; import styles from './tooltip-story.scss?lit'; -import storyDocs from './tooltip-story.mdx'; +import storyDocs from './tooltip.mdx'; import Information16 from '@carbon/icons/lib/information/16'; const tooltipAlignments = { @@ -35,11 +32,49 @@ const tooltipAlignments = { [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP, }; -export const Default = () => { - return html` - +const defaultArgs = { + align: POPOVER_ALIGNMENT.BOTTOM, + closeOnActivation: false, + defaultOpen: true, + enterDelayMs: 100, + label: 'Custom label', + leaveDelayMs: 300, +}; + +const controls = { + align: { + control: 'select', + description: 'Specify how the trigger should align with the tooltip', + options: tooltipAlignments, + }, + closeOnActivation: { + control: 'boolean', + description: + 'Determines wether the tooltip should close when inner content is activated (click, Enter or Space)', + }, + defaultOpen: { + control: 'boolean', + description: + 'Specify whether the tooltip should be open when it first renders', + }, + enterDelayMs: { + control: 'number', + description: + 'Specify the duration in milliseconds to delay before displaying the tooltip', + }, + label: { + control: 'text', + description: 'Provide the label to be rendered inside of the Tooltip.', + }, + leaveDelayMs: { + control: 'number', + description: + 'Specify the duration in milliseconds to delay before hiding the tooltip', + }, +}; + +export const Default = { + render: () => html` Label one - `; + `, }; -export const Playground = (args) => { - const { - alignment, +export const Playground = { + argTypes: controls, + args: defaultArgs, + render: ({ + align, + closeOnActivation, defaultOpen, + enterDelayMs, label, - enterDelay, - leaveDelay, - closeOnActivation, - } = args?.['cds-tooltip'] ?? {}; - return html` - + leaveDelayMs, + }) => html` ${label} - `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-tooltip`]: () => ({ - defaultOpen: boolean('Default open (defaultOpen)', false), - alignment: select( - 'Tooltip alignment to trigger button (alignment)', - tooltipAlignments, - POPOVER_ALIGNMENT.TOP - ), - label: text('Label (label)', 'Custom label'), - enterDelay: number('Enter delay (in ms)', 100), - leaveDelay: number('Leave delay (in ms)', 300), - closeOnActivation: boolean( - 'Close on activation (closeOnActivation)', - false - ), - }), - }, + `, }; -Default.storyName = 'Default'; - -export default { +const meta = { title: 'Components/Tooltip', parameters: { - ...storyDocs.parameters, + docs: { + page: storyDocs, + }, }, - decorators: [(story) => html`
${story()}
`], + decorators: [ + (story) => html`
+ ${story()} +
`, + ], }; + +export default meta; diff --git a/web-components/packages/carbon-web-components/tests/spec/tag_spec.ts b/web-components/packages/carbon-web-components/tests/spec/tag_spec.ts index 10107c81d2f1..f594131167b8 100644 --- a/web-components/packages/carbon-web-components/tests/spec/tag_spec.ts +++ b/web-components/packages/carbon-web-components/tests/spec/tag_spec.ts @@ -9,7 +9,7 @@ import { render } from 'lit'; import EventManager from '../utils/event-manager'; -import { Default, Playground } from '../../src/components/tag/tag-story'; +import { Default, Playground } from '../../src/components/tag/tag.stories'; const tagTemplate = () => Default(); diff --git a/web-components/packages/carbon-web-components/tests/spec/tooltip_spec.ts b/web-components/packages/carbon-web-components/tests/spec/tooltip_spec.ts index 9dacc49ec540..8069cfe8be10 100644 --- a/web-components/packages/carbon-web-components/tests/spec/tooltip_spec.ts +++ b/web-components/packages/carbon-web-components/tests/spec/tooltip_spec.ts @@ -12,7 +12,7 @@ import ResizeObserver from 'resize-observer-polyfill'; import CDSTooltip from '../../src/components/tooltip/tooltip'; import CDSTooltipContent from '../../src/components/tooltip/tooltip-content'; import { POPOVER_ALIGNMENT } from '../../src/components/popover/defs'; -import { Playground } from '../../src/components/tooltip/tooltip-story'; +import { Playground } from '../../src/components/tooltip/tooltip.stories'; const bodyTemplate = () => html` `; const contentTemplate = ({