diff --git a/web-components/packages/carbon-web-components/.storybook/main.ts b/web-components/packages/carbon-web-components/.storybook/main.ts index f99232c31d1f..56731736d57d 100644 --- a/web-components/packages/carbon-web-components/.storybook/main.ts +++ b/web-components/packages/carbon-web-components/.storybook/main.ts @@ -86,6 +86,10 @@ const stories = glob.sync( '../src/**/skip-to-content.stories.ts', '../src/**/slider.mdx', '../src/**/slider.stories.ts', + '../src/**/structured-list.stories.ts', + '../src/**/structured-list.mdx', + '../src/**/tabs.stories.ts', + '../src/**/tabs.mdx', '../src/**/slug.mdx', '../src/**/slug.stories.ts', '../src/**/slug-example.stories.ts', @@ -93,8 +97,14 @@ const stories = glob.sync( '../src/**/slug-form.stories.ts', '../src/**/tag.mdx', '../src/**/tag.stories.ts', + '../src/**/textarea.mdx', + '../src/**/textarea.stories.ts', + '../src/**/text-input.mdx', + '../src/**/text-input.stories.ts', '../src/**/tooltip.mdx', '../src/**/tooltip.stories.ts', + '../src/**/ui-shell.mdx', + '../src/**/ui-shell.stories.ts', '../src/**/toggle.mdx', '../src/**/toggle.stories.ts', '../src/**/toggletip.mdx', diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts deleted file mode 100644 index 69069bbb24dd..000000000000 --- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts +++ /dev/null @@ -1,225 +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 { boolean } from '@storybook/addon-knobs'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import './structured-list'; -import './structured-list-head'; -import './structured-list-header-row'; -import './structured-list-header-cell'; -import './structured-list-body'; -import './structured-list-row'; -import './structured-list-cell'; -import './structured-list-header-cell-skeleton'; -import storyDocs from './structured-list-story.mdx'; -import { prefix } from '../../globals/settings'; - -export const Default = (args) => { - const { hasSelection } = args?.[`${prefix}-structured-list`] ?? {}; - const selectionName = !hasSelection ? undefined : 'structured-list-selection'; - const selectionValues = !hasSelection - ? [] - : [ - 'structured-list-selection-0', - 'structured-list-selection-1', - 'structured-list-selection-2', - ]; - return html` - - - - - ColumnA - - - ColumnB - - - ColumnC - - - - - Row 1 - Row 1 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque - vulputate nisl a porttitor interdum. - - - Row 2 - Row 2 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque - vulputate nisl a porttitor interdum. - - - - `; -}; - -export const Selection = () => { - const selectionName = 'structured-list-selection'; - const selectionValues = [ - 'structured-list-selection-0', - 'structured-list-selection-1', - 'structured-list-selection-2', - 'structured-list-selection-3', - ]; - return html` - - - - - ColumnA - - - ColumnB - - - ColumnC - - - - - ${selectionValues.map( - (selectionValue, index) => html` - Row ${index} - Row ${index} - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean - posuere sem vel euismod dignissim. Nulla ut cursus dolor. - Pellentesque vulputate nisl a porttitor - interdum. - ` - )} - - - `; -}; - -export const Playground = (args) => { - const { condensed, flush, hasSelection } = - args?.[`${prefix}-structured-list`] ?? {}; - const selectionName = !hasSelection ? undefined : 'structured-list-selection'; - const selectionValues = !hasSelection - ? [] - : [ - 'structured-list-selection-0', - 'structured-list-selection-1', - 'structured-list-selection-2', - ]; - return html` - - - - - ColumnA - - - ColumnB - - - ColumnC - - - - - Row 1 - Row 1 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque - vulputate nisl a porttitor interdum. - - - Row 2 - Row 2 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque - vulputate nisl a porttitor interdum. - - - - `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-structured-list`]: () => ({ - condensed: boolean('Condensed (condensed)', false), - flush: boolean('Flush (flush)', false), - hasSelection: boolean( - 'Supports selection feature (has-selection)', - false - ), - }), - }, -}; - -export const skeleton = () => html` -
- ${Array.apply(null, Array(2)).map( - () => html` - - - - ${Array.apply(null, Array(3)).map( - () => html` - - - ` - )} - - - - ${Array.apply(null, Array(5)).map( - () => html` - - - - ` - )} - - - ` - )} -
-`; - -skeleton.parameters = { - percy: { - skip: true, - }, -}; - -export default { - title: 'Components/Structured list', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.mdx similarity index 96% rename from web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx rename to web-components/packages/carbon-web-components/src/components/structured-list/structured-list.mdx index 7784c896329f..639ac9c5482f 100644 --- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx +++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Description } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # Structured list @@ -108,7 +108,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `has-selection` attribute). - + ## `` attributes and properties @@ -116,4 +116,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `selected` attribute). - + diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.stories.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.stories.ts new file mode 100644 index 000000000000..c7ccbdcf634f --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.stories.ts @@ -0,0 +1,251 @@ +/** + * @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 './structured-list'; +import './structured-list-head'; +import './structured-list-header-row'; +import './structured-list-header-cell'; +import './structured-list-body'; +import './structured-list-row'; +import './structured-list-cell'; +import './structured-list-header-cell-skeleton'; +import storyDocs from './structured-list.mdx'; + +const defaultArgs = { + condensed: false, + flush: false, + hasSelection: false, +}; + +const controls = { + condensed: { + control: 'boolean', + description: 'Condensed (condensed)', + }, + flush: { + control: 'boolean', + description: 'Flush (flush)', + }, + hasSelection: { + control: 'boolean', + description: 'Supports selection feature (has-selection)', + }, +}; + +export const Default = { + argTypes: { + hasSelection: { + control: 'boolean', + description: 'Supports selection feature (has-selection)', + }, + }, + args: { hasSelection: false }, + render: ({ hasSelection }) => { + const selectionName = !hasSelection + ? undefined + : 'structured-list-selection'; + const selectionValues = !hasSelection + ? [] + : [ + 'structured-list-selection-0', + 'structured-list-selection-1', + 'structured-list-selection-2', + ]; + return html` + + + + + ColumnA + + + ColumnB + + + ColumnC + + + + + Row 1 + Row 1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + Row 2 + Row 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + `; + }, +}; + +export const Selection = { + render: () => { + const selectionName = 'structured-list-selection'; + const selectionValues = [ + 'structured-list-selection-0', + 'structured-list-selection-1', + 'structured-list-selection-2', + 'structured-list-selection-3', + ]; + + return html` + + + + + ColumnA + + + ColumnB + + + ColumnC + + + + + ${selectionValues.map( + (selectionValue, index) => html` + Row ${index} + Row ${index} + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc + dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean + posuere sem vel euismod dignissim. Nulla ut cursus dolor. + Pellentesque vulputate nisl a porttitor + interdum. + ` + )} + + + `; + }, +}; + +export const Playground = { + args: defaultArgs, + argTypes: controls, + render: ({ condensed, flush, hasSelection }) => { + const selectionName = !hasSelection + ? undefined + : 'structured-list-selection'; + const selectionValues = !hasSelection + ? [] + : [ + 'structured-list-selection-0', + 'structured-list-selection-1', + 'structured-list-selection-2', + ]; + return html` + + + + + ColumnA + + + ColumnB + + + ColumnC + + + + + Row 1 + Row 1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + Row 2 + Row 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + `; + }, +}; + +export const skeleton = { + parameters: { + percy: { + skip: true, + }, + }, + render: () => html` +
+ ${Array.apply(null, Array(2)).map( + () => html` + + + + ${Array.apply(null, Array(3)).map( + () => html` + + + ` + )} + + + + ${Array.apply(null, Array(5)).map( + () => html` + + + + ` + )} + + + ` + )} +
+ `, +}; + +export default { + title: 'Components/Structured list', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; diff --git a/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.ts b/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.ts deleted file mode 100644 index ffef7f42bb12..000000000000 --- a/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.ts +++ /dev/null @@ -1,255 +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 { TABS_TYPE } from './tabs'; -import './tab'; -import './tabs-skeleton'; -import './tab-skeleton'; -import styles from './tabs-story.scss?lit'; -import storyDocs from './tabs-story.mdx'; -import { prefix } from '../../globals/settings'; - -const noop = () => {}; - -const types = { - 'Regular type': null, - [`Container type (${TABS_TYPE.CONTAINED})`]: TABS_TYPE.CONTAINED, -}; - -export const Default = () => html` - - - Tab label 1 - - Tab label 2 - - - Tab label 3 - - Tab label 4 - -
- - - - -
-`; - -export const Contained = () => html` - - - Tab label 1 - - Tab label 2 - - - Tab label 3 - - Tab label 4 - - Tab label 5 - - -
- - - - - -
-`; - -export const skeleton = () => html` - - - - - - - -`; - -skeleton.parameters = { - percy: { - skip: true, - }, -}; - -export const Playground = (args) => { - const { - triggerContent, - type, - value, - disableSelection, - onBeforeSelect = noop, - onSelect = noop, - } = args?.[`${prefix}-tabs`] || {}; - const handleBeforeSelected = (event: CustomEvent) => { - onBeforeSelect(event); - if (disableSelection) { - event.preventDefault(); - } - }; - return html` - - - Tab label 1 - - Tab label 2 - - - Tab label 3 - - Tab label 4 - -
- - - - -
- `; -}; - -Playground.parameters = { - ...storyDocs.parameters, - knobs: { - [`${prefix}-tabs`]: () => ({ - triggerContent: textNullable( - 'The default content of the trigger button for narrow screen (trigger-content)', - 'Select an item' - ), - type: select('Tabs type (type)', types, null), - value: textNullable('The value of the selected item (value)', 'all'), - disableSelection: boolean( - `Disable user-initiated selection change (Call event.preventDefault() in ${prefix}-content-switcher-beingselected event)`, - false - ), - onBeforeSelect: action(`${prefix}-tabs-beingselected`), - onSelect: action(`${prefix}-tabs-selected`), - }), - }, -}; - -export default { - title: 'Components/Tabs', -}; diff --git a/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.mdx b/web-components/packages/carbon-web-components/src/components/tabs/tabs.mdx similarity index 95% rename from web-components/packages/carbon-web-components/src/components/tabs/tabs-story.mdx rename to web-components/packages/carbon-web-components/src/components/tabs/tabs.mdx index cdb86e1d57f6..ecc70660977f 100644 --- a/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.mdx +++ b/web-components/packages/carbon-web-components/src/components/tabs/tabs.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgTypes, Markdown } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # Tabs @@ -27,8 +27,8 @@ import '@carbon/web-components/es/components/tabs/index.js'; @use '@carbon/styles/scss/components/tabs'; ``` - - +{`${cdnJs({ components: ['tabs'] })}`} +{`${cdnCss()}`} ### HTML @@ -122,7 +122,7 @@ For the skeleton variation, utilize `` and Note: `cds-content-switcher-*` events are not fired from ``. - + ## `` attributes, properties and events @@ -130,4 +130,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/web-components/packages/carbon-web-components/src/components/tabs/tabs.stories.ts b/web-components/packages/carbon-web-components/src/components/tabs/tabs.stories.ts new file mode 100644 index 000000000000..7b961ba40fba --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/tabs/tabs.stories.ts @@ -0,0 +1,301 @@ +/** + * @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 { TABS_TYPE } from './tabs'; +import styles from './tabs-story.scss?lit'; +import storyDocs from './tabs.mdx'; +import { prefix } from '../../globals/settings'; +import '../button'; +import '../checkbox'; +import './index'; +import '../text-input'; + +const types = { + 'Regular type': null, + [`Container type (${TABS_TYPE.CONTAINED})`]: TABS_TYPE.CONTAINED, +}; + +const args = { + triggerContent: 'Select an item', + type: null, + value: 'all', + disableSelection: false, +}; + +const argTypes = { + triggerContent: { + control: 'text', + description: + 'The default content of the trigger button for narrow screen (trigger-content)', + }, + type: { + control: 'select', + description: 'Tabs type (type)', + options: types, + }, + value: { + control: 'text', + description: 'The value of the selected item (value)', + }, + disableSelection: { + control: 'boolean', + description: `Disable user-initiated selection change (Call event.preventDefault() in ${prefix}-content-switcher-beingselected event)`, + }, + onBeforeSelect: { + action: `${prefix}-tabs-beingselected`, + table: { + disable: true, + }, + }, + onSelect: { + action: `${prefix}-tabs-selected`, + table: { + disable: true, + }, + }, +}; + +export const Default = { + render: () => html` + + + Tab label 1 + + Tab label 2 + + + Tab label 3 + + Tab label 4 + +
+ + + + +
+ `, +}; + +export const Contained = { + render: () => html` + + + Tab label 1 + + Tab label 2 + + + Tab label 3 + + Tab label 4 + + Tab label 5 + + +
+ + + + + +
+ `, +}; + +export const skeleton = { + parameters: { + percy: { + skip: true, + }, + }, + render: () => html` + + + + + + + + `, +}; + +export const Playground = { + args, + argTypes, + render: ({ + triggerContent, + type, + value, + disableSelection, + onBeforeSelect, + onSelect, + }) => { + const handleBeforeSelected = (event: CustomEvent) => { + onBeforeSelect(event); + if (disableSelection) { + event.preventDefault(); + } + }; + return html` + + + Tab label 1 + + Tab label 2 + + + Tab label 3 + + Tab label 4 + +
+ + + + +
+ `; + }, +}; + +export default { + title: 'Components/Tabs', + actions: { argTypesRegex: '^on.*' }, + parameters: { + docs: { + page: storyDocs, + }, + }, +}; diff --git a/web-components/packages/carbon-web-components/src/components/text-input/text-input-story.ts b/web-components/packages/carbon-web-components/src/components/text-input/text-input-story.ts deleted file mode 100644 index f1c9f92b2088..000000000000 --- a/web-components/packages/carbon-web-components/src/components/text-input/text-input-story.ts +++ /dev/null @@ -1,164 +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, select, number } from '@storybook/addon-knobs'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import storyDocs from './text-input-story.mdx'; -import { prefix } from '../../globals/settings'; -import './index'; -import '../layer'; -import '../form/form-item'; -import '../../../.storybook/templates/with-layer'; - -import { action } from '@storybook/addon-actions'; -import { INPUT_SIZE } from './text-input'; - -const sizes = { - [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL, - [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM, - [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE, -}; - -export const Default = () => { - return html` - - - `; -}; - -Default.storyName = 'Default'; - -export const ReadOnly = () => { - return html` - - - `; -}; - -export const Skeleton = () => { - return html` `; -}; - -export const TogglePasswordVisibility = () => { - return html` - - - `; -}; - -export const WithLayer = () => { - return html` - - - - - `; -}; - -export const Playground = (args) => { - const { - disabled, - enableCounter, - helperText, - hideLabel, - inline, - invalid, - invalidText, - labelText, - maxCount, - placeholder, - playgroundWidth, - readonly, - size, - type, - value, - warn, - warnText, - onInput, - } = args?.[`${prefix}-input`] ?? {}; - return html` -
- - -
- `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-input`]: () => ({ - disabled: boolean('Disabled (disabled)', false), - enableCounter: boolean('Enable counter (enable-counter)', false), - helperText: textNullable('Helper text (helper-text)', 'Helper text'), - hideLabel: boolean('Hide label (hide-label)', false), - inline: boolean('Inline (inline)', false), - invalid: boolean('Invalid (invalid)', false), - invalidText: textNullable( - 'Invalid text (invalid-text)', - 'Error message goes here' - ), - labelText: textNullable('Label text (label)', 'Label text'), - maxCount: textNullable('Max count (max-count)', '100'), - placeholder: textNullable( - 'Placeholder (placeholder)', - 'Placeholder text' - ), - playgroundWidth: number('Playground width', 300, { - range: true, - min: 300, - max: 800, - step: 50, - }), - size: select('Size (size)', sizes, INPUT_SIZE.MEDIUM), - readonly: boolean('Read only (readonly)', false), - type: textNullable('Type (type)', 'text'), - warn: boolean('Warn (warn)', false), - warnText: textNullable( - 'Warn text (warn-text)', - 'Warning message that is really long can wrap to more lines but should not be excessively long.' - ), - value: textNullable('Value of input (value)', ''), - onInput: action(`${prefix}-select-selected`), - }), - }, -}; - -export default { - title: 'Components/Text Input', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/web-components/packages/carbon-web-components/src/components/text-input/text-input-story.mdx b/web-components/packages/carbon-web-components/src/components/text-input/text-input.mdx similarity index 86% rename from web-components/packages/carbon-web-components/src/components/text-input/text-input-story.mdx rename to web-components/packages/carbon-web-components/src/components/text-input/text-input.mdx index e2f64bbfa4e0..01de04de43f1 100644 --- a/web-components/packages/carbon-web-components/src/components/text-input/text-input-story.mdx +++ b/web-components/packages/carbon-web-components/src/components/text-input/text-input.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgTypes, Markdown } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # Text Input @@ -23,8 +23,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/text-input/index.js'; ``` - - +{`${cdnJs({ components: ['text-input'] })}`} +{`${cdnCss()}`} ### HTML @@ -45,7 +45,7 @@ If the input is part of a form, make sure to import and wrap the input with import '@carbon/web-components/es/components/form/index.js'; ``` - +{`${cdnJs({ components: ['form'] })}`} ```html @@ -63,4 +63,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `required` attribute). - + diff --git a/web-components/packages/carbon-web-components/src/components/text-input/text-input.stories.ts b/web-components/packages/carbon-web-components/src/components/text-input/text-input.stories.ts new file mode 100644 index 000000000000..354205311351 --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/text-input/text-input.stories.ts @@ -0,0 +1,227 @@ +/** + * @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 storyDocs from './text-input.mdx'; +import { prefix } from '../../globals/settings'; +import './index'; +import '../form/form-item'; +import { INPUT_SIZE } from './text-input'; + +const sizes = { + [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL, + [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM, + [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE, +}; + +const args = { + disabled: false, + enableCounter: false, + helperText: 'Helper text', + hideLabel: false, + inline: false, + invalid: false, + invalidText: 'Error message goes here', + labelText: 'Label text', + maxCount: '100', + placeholder: 'Placeholder text', + playgroundWidth: 300, + size: INPUT_SIZE.MEDIUM, + readonly: false, + type: 'text', + warn: false, + warnText: + 'Warning message that is really long can wrap to more lines but should not be excessively long.', + value: '', + onInput: `${prefix}-select-selected`, +}; + +const argTypes = { + disabled: { + control: 'boolean', + description: 'Disabled (disabled)', + }, + enableCounter: { + control: 'boolean', + description: 'Enable counter (enable-counter)', + }, + helperText: { + control: 'text', + description: 'Helper text (helper-text)', + }, + hideLabel: { + control: 'boolean', + description: 'Hide label (hide-label)', + }, + inline: { + control: 'boolean', + description: 'Inline (inline)', + }, + invalid: { + control: 'boolean', + description: 'Invalid (invalid)', + }, + invalidText: { + control: 'text', + description: 'Invalid text (invalid-text)', + }, + labelText: { + control: 'text', + description: 'Label text (label)', + }, + maxCount: { + control: 'text', + description: 'Max count (max-count)', + }, + placeholder: { + control: 'text', + description: 'Placeholder (placeholder)', + }, + playgroundWidth: { + control: 'number', + description: 'Playground width', + options: { + range: true, + min: 300, + max: 800, + step: 50, + }, + }, + size: { + control: 'select', + description: 'Size (size)', + options: sizes, + }, + readonly: { + control: 'boolean', + description: 'Read only (readonly)', + }, + type: { + control: 'text', + description: 'Type (type)', + }, + warn: { + control: 'boolean', + description: 'Warn (warn)', + }, + warnText: { + control: 'text', + description: 'Warn text (warn-text)', + }, + value: { + control: 'text', + description: 'Value of input (value)', + }, + onInput: { + action: `${prefix}-select-selected`, + table: { + disable: true, + }, + }, +}; + +export const Default = { + render: () => html` + + + `, +}; + +export const ReadOnly = { + render: () => html` + + + `, +}; + +export const Skeleton = { + render: () => html` `, +}; + +export const TogglePasswordVisibility = { + render: () => html` + + + `, +}; + +export const WithLayer = { + render: () => html` + + + + + `, +}; + +export const Playground = { + args, + argTypes, + render: ({ + disabled, + enableCounter, + helperText, + hideLabel, + inline, + invalid, + invalidText, + labelText, + maxCount, + placeholder, + playgroundWidth, + readonly, + size, + type, + value, + warn, + warnText, + onInput, + }) => html` +
+ + +
+ `, +}; + +export default { + title: 'Components/Text Input', + actions: { argTypesRegex: '^on.*' }, + parameters: { + docs: { + page: storyDocs, + }, + }, +}; diff --git a/web-components/packages/carbon-web-components/src/components/textarea/textarea-story.ts b/web-components/packages/carbon-web-components/src/components/textarea/textarea-story.ts deleted file mode 100644 index 259b52a366f0..000000000000 --- a/web-components/packages/carbon-web-components/src/components/textarea/textarea-story.ts +++ /dev/null @@ -1,111 +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 * as knobs from '@storybook/addon-knobs'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import './textarea'; -import './textarea-skeleton'; -import '../form/form-item'; -import '../layer'; -import createProps from './stories/helpers'; -import storyDocs from './textarea-story.mdx'; -import { prefix } from '../../globals/settings'; -import '../../../.storybook/templates/with-layer'; - -export const Default = () => { - return html` - - - - - `; -}; - -Default.storyName = 'Default'; - -export const skeleton = () => - html` `; - -skeleton.parameters = { - percy: { - skip: true, - }, -}; - -export const WithLayer = () => { - return html` - - - - - `; -}; - -WithLayer.storyName = 'With Layer'; - -export const Playground = (args) => { - const { - cols, - disabled, - enableCounter, - helperText, - hideLabel, - invalid, - invalidText, - label, - maxCount, - onInput, - placeholder, - readonly, - rows, - value, - warn, - warnText, - } = args?.[`${prefix}-textarea`] ?? {}; - return html` - - - ${value} - - - `; -}; - -Playground.storyName = 'Playground'; - -Playground.parameters = { - knobs: { - [`${prefix}-textarea`]: () => createProps({ ...knobs, textNullable }), - }, -}; - -export default { - title: 'Components/Text Area', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/web-components/packages/carbon-web-components/src/components/textarea/textarea-story.mdx b/web-components/packages/carbon-web-components/src/components/textarea/textarea.mdx similarity index 91% rename from web-components/packages/carbon-web-components/src/components/textarea/textarea-story.mdx rename to web-components/packages/carbon-web-components/src/components/textarea/textarea.mdx index de11994cc3db..fdb3a7f46764 100644 --- a/web-components/packages/carbon-web-components/src/components/textarea/textarea-story.mdx +++ b/web-components/packages/carbon-web-components/src/components/textarea/textarea.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgTypes, Markdown } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # Textarea @@ -24,8 +24,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/textarea/index.js'; ``` - - +{`${cdnJs({ components: ['textarea'] })}`} +{`${cdnCss()}`} ### HTML @@ -70,4 +70,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `autofocus` attribute). - + diff --git a/web-components/packages/carbon-web-components/src/components/textarea/textarea.stories.ts b/web-components/packages/carbon-web-components/src/components/textarea/textarea.stories.ts new file mode 100644 index 000000000000..259df013a6f1 --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/textarea/textarea.stories.ts @@ -0,0 +1,183 @@ +/** + * @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 './index'; +import '../form/form-item'; +import storyDocs from './textarea.mdx'; + +const args = { + cols: 0, + disabled: false, + enableCounter: true, + helperText: 'Textarea helper text', + hideLabel: false, + invalid: false, + invalidText: 'Invalid text', + label: 'Textarea label', + maxCount: 500, + onInput: 'input', + placeholder: '', + readonly: false, + rows: 4, + value: '', + warn: false, + warnText: 'This is a warning message.', +}; + +const argTypes = { + cols: { + control: 'number', + description: 'Number of columns (cols)', + }, + disabled: { + control: 'boolean', + description: 'Disabled (disabled)', + }, + enableCounter: { + control: 'boolean', + description: 'Enable character counter (enable-counter)', + }, + helperText: { + control: 'text', + description: 'Helper text (helper-text)', + }, + hideLabel: { + control: 'boolean', + description: 'Hide label (hide-label)', + }, + invalid: { + control: 'boolean', + description: 'Invalid (invalid)', + }, + invalidText: { + control: 'text', + description: 'Invalid text (invalid-text)', + }, + label: { + control: 'text', + description: 'Label (label)', + }, + maxCount: { + control: 'number', + description: 'Max character count (max-count)', + }, + onInput: { + action: `input`, + table: { + disable: true, + }, + }, + placeholder: { + control: 'text', + description: 'Placeholder text (placeholder)', + }, + readonly: { + control: 'boolean', + description: 'Read only (readonly)', + }, + rows: { + control: 'number', + description: 'Number of rows (rows)', + }, + value: { + control: 'text', + description: 'Value (value)', + }, + warn: { + control: 'boolean', + description: 'Warn (warn)', + }, + warnText: { + control: 'text', + description: 'Warn text (warn-text)', + }, +}; + +export const Default = { + render: () => html` + + + + + `, +}; + +export const skeleton = { + parameters: { + percy: { + skip: true, + }, + }, + render: () => html` `, +}; + +export const WithLayer = { + render: () => html` + + + + + `, +}; + +export const Playground = { + args, + argTypes, + render: ({ + cols, + disabled, + enableCounter, + helperText, + hideLabel, + invalid, + invalidText, + label, + maxCount, + onInput, + placeholder, + readonly, + rows, + value, + warn, + warnText, + }) => html` + + + ${value} + + + `, +}; + +export default { + title: 'Components/Text Area', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx b/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell.mdx similarity index 93% rename from web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx rename to web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell.mdx index fab6ba477d06..c57eed87993f 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgTypes, Markdown } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # UI Shell @@ -21,8 +21,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/ui-shell/index.js'; ``` - - +{`${cdnJs({ components: ['ui-shell'] })}`} +{`${cdnCss()}`} ### HTML @@ -181,7 +181,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `expanded` attribute). - + ### `` attributes and properties @@ -189,7 +189,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `active` attribute). - + ### `` attributes and properties @@ -197,7 +197,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `active` attribute). - + ### `` attributes and properties @@ -205,7 +205,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `active` attribute). - + ## Header nav @@ -221,17 +221,13 @@ Header nav in UI Shell consists of the following components: | `` | The expando button for side nav | | `` | The UI to show product name | - - - - ### `` attributes and properties - + ### `` attributes and properties - + ### `` attributes and properties @@ -239,7 +235,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `expanded` attribute). - + ### `` attributes and properties @@ -247,12 +243,12 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `active` attribute). - + ### `` attributes and properties - + ### `` attributes and properties - + diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell.stories.ts similarity index 72% rename from web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts rename to web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell.stories.ts index 91e6a40cca9a..a6e56ca0ec77 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell.stories.ts @@ -23,7 +23,7 @@ import '../skip-to-content'; import '../modal/modal'; import '../button/button'; import styles from './ui-shell-story.scss?lit'; -import storyDocs from './ui-shell-story.mdx'; +import storyDocs from './ui-shell.mdx'; import { prefix } from '../../globals/settings'; const linksHref = 'https://www.carbondesignsystem.com/'; @@ -120,205 +120,217 @@ const StoryContent = ({ useResponsiveOffset = true }) => { `; }; -export const FixedSideNav = () => { - const result = html` - - - - - - L0 menu item - - - L0 menu item - - - L0 menu item - - - - - L0 menu item - - - L0 menu item - - - L0 menu item - - - - - L0 menu item - - - L0 menu item - - - L0 menu item - - - L0 link - L0 link - - - ${StoryContent({ useResponsiveOffset: false })} - `; - (result as any).hasMainTag = true; - return result; +export const FixedSideNav = { + name: 'Fixed SideNav', + render: () => { + const result = html` + + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + L0 link + L0 link + + + ${StoryContent({ useResponsiveOffset: false })} + `; + (result as any).hasMainTag = true; + return result; + }, }; -FixedSideNav.storyName = 'Fixed SideNav'; - -export const FixedSideNavDivider = () => { - const result = html` - - - - - - L0 menu item - - - L0 menu item - - - L0 menu item - - - - - L0 menu item - - - L0 menu item - - - L0 menu item - - - - - L0 menu item - - - L0 menu item - - - L0 menu item - - - - L0 link - L0 link - - - ${StoryContent({ useResponsiveOffset: false })} - `; - (result as any).hasMainTag = true; - return result; +export const FixedSideNavDivider = { + name: 'Fixed SideNav w/Divider', + render: () => { + const result = html` + + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + L0 link + L0 link + + + ${StoryContent({ useResponsiveOffset: false })} + `; + (result as any).hasMainTag = true; + return result; + }, }; -FixedSideNavDivider.storyName = 'Fixed SideNav w/ Divider'; - -export const FixedSideNavIcons = () => { - const result = html` - - - - - ${Fade16({ slot: 'title-icon' })} - - Link - - - Link - - - Link - - - - ${Fade16({ slot: 'title-icon' })} - - Link - - - Link - - - Link - - - - ${Fade16({ slot: 'title-icon' })} - - Link - - - Link - - - Link - - - ${Fade16({ slot: 'title-icon' })}Link - ${Fade16({ slot: 'title-icon' })}Link - - - ${StoryContent({ useResponsiveOffset: false })} - `; - (result as any).hasMainTag = true; - return result; +export const FixedSideNavIcons = { + name: 'Fixed SideNav w/ Icons', + render: () => { + const result = html` + + + + + ${Fade16({ slot: 'title-icon' })} + + Link + + + Link + + + Link + + + + ${Fade16({ slot: 'title-icon' })} + + Link + + + Link + + + Link + + + + ${Fade16({ slot: 'title-icon' })} + + Link + + + Link + + + Link + + + ${Fade16({ slot: 'title-icon' })}Link + ${Fade16({ slot: 'title-icon' })}Link + + + ${StoryContent({ useResponsiveOffset: false })} + `; + (result as any).hasMainTag = true; + return result; + }, }; -FixedSideNavIcons.storyName = 'Fixed SideNav w/ Icons'; - -export const HeaderBase = () => { - return html` [Platform] - `; + `, }; -export const HeaderBaseWActions = () => { - return html` @@ -341,13 +353,12 @@ export const HeaderBaseWActions = () => { ${SwitcherIcon20({ slot: 'icon' })} - `; + `, }; -HeaderBaseWActions.storyName = 'Header Base w/ Actions'; - -export const HeaderBaseWActionsRightPanel = () => { - return html` @@ -375,14 +386,12 @@ export const HeaderBaseWActionsRightPanel = () => { id="notification-panel" expanded aria-label="Header Panel"> - `; + `, }; -HeaderBaseWActionsRightPanel.storyName = - 'Header Base w/ Actions and Right Panel'; - -export const HeaderBaseWActionsSwitcher = () => { - return html` @@ -432,13 +441,12 @@ export const HeaderBaseWActionsSwitcher = () => { - ${StoryContent({ useResponsiveOffset: true })}`; + ${StoryContent({ useResponsiveOffset: true })}`, }; -HeaderBaseWActionsSwitcher.storyName = 'Header Base w/ Actions and Switcher'; - -export const HeaderBaseWNavigationActionsAndSideNav = () => { - return html` @@ -557,14 +565,12 @@ export const HeaderBaseWNavigationActionsAndSideNav = () => { - ${StoryContent({ useResponsiveOffset: true })}`; + ${StoryContent({ useResponsiveOffset: true })}`, }; -HeaderBaseWNavigationActionsAndSideNav.storyName = - 'Header Base w/ Navigation, Actions and SideNav'; - -export const HeaderBaseWNavigationActions = () => { - return html` @@ -639,14 +645,12 @@ export const HeaderBaseWNavigationActions = () => { - `; + `, }; -HeaderBaseWNavigationActions.storyName = - 'Header Base w/ Navigation and Actions'; - -export const HeaderBaseWNavigation = () => { - return html` @@ -705,85 +709,85 @@ export const HeaderBaseWNavigation = () => { - `; + `, }; -HeaderBaseWNavigation.storyName = 'Header Base w/ Navigation'; - -export const HeaderBaseWSideNav = () => { - const result = html` - - - - [Platform] - - - - ${Fade16({ slot: 'title-icon' })} - - Link - - - Link - - - Link - - - - ${Fade16({ slot: 'title-icon' })} - - Link - - - Link - - - Link - - - - ${Fade16({ slot: 'title-icon' })} - - Link - - - Link - - - Link - - - ${Fade16({ slot: 'title-icon' })}Link - ${Fade16({ slot: 'title-icon' })}Link - - - - ${StoryContent({ useResponsiveOffset: true })} - `; - (result as any).hasMainTag = true; - return result; +export const HeaderBaseWSideNav = { + name: 'Header Base w/ SideNav', + render: () => { + const result = html` + + + + [Platform] + + + + ${Fade16({ slot: 'title-icon' })} + + Link + + + Link + + + Link + + + + ${Fade16({ slot: 'title-icon' })} + + Link + + + Link + + + Link + + + + ${Fade16({ slot: 'title-icon' })} + + Link + + + Link + + + Link + + + ${Fade16({ slot: 'title-icon' })}Link + ${Fade16({ slot: 'title-icon' })}Link + + + + ${StoryContent({ useResponsiveOffset: true })} + `; + (result as any).hasMainTag = true; + return result; + }, }; -HeaderBaseWSideNav.storyName = 'Header Base w/ SideNav'; - -export const HeaderBaseWSkipToContent = () => { - return html` @@ -808,13 +812,12 @@ export const HeaderBaseWSkipToContent = () => { - ${StoryContent({ useResponsiveOffset: true })}`; + ${StoryContent({ useResponsiveOffset: true })}`, }; -HeaderBaseWSkipToContent.storyName = 'Header Base w/ SkipToContent'; - -export const SideNavRail = () => { - return html` { > - ${StoryContent({ useResponsiveOffset: true })}`; + ${StoryContent({ useResponsiveOffset: true })}`, }; -SideNavRail.storyName = 'SideNav Rail'; - -export const SideNavRailWHeader = () => { - return html` @@ -974,64 +976,66 @@ export const SideNavRailWHeader = () => { - ${StoryContent({ useResponsiveOffset: true })}`; + ${StoryContent({ useResponsiveOffset: true })}`, }; -SideNavRailWHeader.storyName = 'SideNav Rail w/ Header'; - -export const SideNavWLargeSideNavItems = () => { - const result = html` - - - - - - Menu 1 - - - Menu 2 - - - Menu 3 - - - Large link - ${Fade16({ slot: 'title-icon' })} - - Menu 1 - - - Menu 2 - - - Menu 3 - - - - ${Fade16({ slot: 'title-icon' })} Large link w/icon - - - ${StoryContent({ useResponsiveOffset: true })} - `; - (result as any).hasMainTag = true; - return result; +export const SideNavWLargeSideNavItems = { + name: 'SideNav w/ large side nav items', + render: () => { + const result = html` + + + + + + Menu 1 + + + Menu 2 + + + Menu 3 + + + Large link + ${Fade16({ slot: 'title-icon' })} + + Menu 1 + + + Menu 2 + + + Menu 3 + + + + ${Fade16({ slot: 'title-icon' })} Large link + w/icon + + + ${StoryContent({ useResponsiveOffset: true })} + `; + (result as any).hasMainTag = true; + return result; + }, }; -SideNavWLargeSideNavItems.storyName = 'SideNav w/ large side nav items'; - export default { title: 'Components/UI Shell', parameters: { - ...storyDocs.parameters, + docs: { + page: storyDocs, + }, }, }; diff --git a/web-components/packages/carbon-web-components/tests/spec/structured-list_spec.ts b/web-components/packages/carbon-web-components/tests/spec/structured-list_spec.ts index 074c3d34b2dc..8f79467d8f73 100644 --- a/web-components/packages/carbon-web-components/tests/spec/structured-list_spec.ts +++ b/web-components/packages/carbon-web-components/tests/spec/structured-list_spec.ts @@ -9,7 +9,7 @@ import { render } from 'lit'; import BXStructuredListRow from '../../src/components/structured-list/structured-list-row'; -import { Playground } from '../../src/components/structured-list/structured-list-story'; +import { Playground } from '../../src/components/structured-list/structured-list.stories'; const template = (props?) => Playground({ diff --git a/web-components/packages/carbon-web-components/tests/spec/tabs_spec.ts b/web-components/packages/carbon-web-components/tests/spec/tabs_spec.ts index b637e6e0cd3b..3407cd3e00c4 100644 --- a/web-components/packages/carbon-web-components/tests/spec/tabs_spec.ts +++ b/web-components/packages/carbon-web-components/tests/spec/tabs_spec.ts @@ -11,7 +11,7 @@ import { render } from 'lit'; import EventManager from '../utils/event-manager'; import CDSTabs from '../../src/components/tabs/tabs'; import CDSTab from '../../src/components/tabs/tab'; -import { Playground } from '../../src/components/tabs/tabs-story'; +import { Playground } from '../../src/components/tabs/tabs.stories'; const template = (props?) => Playground({ diff --git a/web-components/packages/carbon-web-components/tests/spec/text-input_spec.ts b/web-components/packages/carbon-web-components/tests/spec/text-input_spec.ts index 1bd3a374fb6d..9541a7fbe162 100644 --- a/web-components/packages/carbon-web-components/tests/spec/text-input_spec.ts +++ b/web-components/packages/carbon-web-components/tests/spec/text-input_spec.ts @@ -13,7 +13,7 @@ import EventManager from '../utils/event-manager'; import CDSTextInput, { INPUT_TYPE, } from '../../src/components/text-input/text-input'; -import { Playground } from '../../src/components/text-input/text-input-story'; +import { Playground } from '../../src/components/text-input/text-input.stories'; /** * @param formData A `FormData` instance. diff --git a/web-components/packages/carbon-web-components/tests/spec/textarea_spec.ts b/web-components/packages/carbon-web-components/tests/spec/textarea_spec.ts index 9f142b855243..d5109ff574ea 100644 --- a/web-components/packages/carbon-web-components/tests/spec/textarea_spec.ts +++ b/web-components/packages/carbon-web-components/tests/spec/textarea_spec.ts @@ -11,7 +11,7 @@ import { html, render } from 'lit'; import EventManager from '../utils/event-manager'; import CDSTextarea from '../../src/components/textarea/textarea'; -import { Playground } from '../../src/components/textarea/textarea-story'; +import { Playground } from '../../src/components/textarea/textarea.stories'; /** * @param formData A `FormData` instance.