diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts index fadd5737425..5ba7dde7fe6 100644 --- a/packages/carbon-web-components/.storybook/main.ts +++ b/packages/carbon-web-components/.storybook/main.ts @@ -16,109 +16,8 @@ const glob = require('fast-glob'); const stories = glob.sync( [ '../docs/**/*.mdx', - // go back to wildcard globs once all stories are written - // '../src/**/*.mdx', - // '../src/**/*.stories.@(js|jsx|ts|tsx)', - // add mdx/story files as they are being worked on - '../src/**/checkbox.stories.ts', - '../src/**/checkbox.mdx', - '../src/**/accordion.mdx', - '../src/**/accordion.stories.ts', - '../src/**/breadcrumb.mdx', - '../src/**/breadcrumb.stories.ts', - '../src/**/code-snippet.mdx', - '../src/**/code-snippet.stories.ts', - '../src/**/combo-box.stories.ts', - '../src/**/combo-box.mdx', - '../src/**/date-picker.mdx', - '../src/**/date-picker.stories.ts', - '../src/**/content-switcher.mdx', - '../src/**/content-switcher.stories.ts', - '../src/**/dropdown.stories.ts', - '../src/**/dropdown.mdx', - '../src/**/data-table-*.stories.ts', - '../src/**/data-table.mdx', - '../src/**/ordered-list.stories.ts', - '../src/**/unordered-list.stories.ts', - '../src/**/list.mdx', - '../src/**/icon-button.mdx', - '../src/**/icon-button.stories.ts', - '../src/**/inline-loading.mdx', - '../src/**/inline-loading.stories.ts', - '../src/**/loading.stories.ts', - '../src/**/loading.mdx', - '../src/**/button.mdx', - '../src/**/button.stories.ts', - '../src/**/link.mdx', - '../src/**/link.stories.ts', - '../src/**/layer.stories.ts', - '../src/**/layer.mdx', - '../src/**/file-uploader.mdx', - '../src/**/file-uploader.stories.ts', - '../src/**/popover.mdx', - '../src/**/popover.stories.ts', - '../src/**/form-group.mdx', - '../src/**/form-group.stories.ts', - '../src/**/modal.stories.ts', - '../src/**/modal.mdx', - '../src/**/file-uploader.stories.ts', - '../src/**/number-input.mdx', - '../src/**/number-input.stories.ts', - '../src/**/multi-select.mdx', - '../src/**/multi-select.stories.ts', - '../src/**/notification.mdx', - '../src/**/actionable-notification.stories.ts', - '../src/**/inline-notification.stories.ts', - '../src/**/toast-notification.stories.ts', - '../src/**/overflow-menu.mdx', - '../src/**/overflow-menu.stories.ts', - '../src/**/pagination.mdx', - '../src/**/pagination.stories.ts', - '../src/**/progress-bar.mdx', - '../src/**/progress-bar.stories.ts', - '../src/**/progress-indicator.mdx', - '../src/**/progress-indicator.stories.ts', - '../src/**/radio-button.mdx', - '../src/**/radio-button.stories.ts', - '../src/**/search.mdx', - '../src/**/search.stories.ts', - '../src/**/select.mdx', - '../src/**/select.stories.ts', - '../src/**/skeleton-icon.mdx', - '../src/**/skeleton-icon.stories.ts', - '../src/**/skeleton-placeholder.mdx', - '../src/**/skeleton-placeholder.stories.ts', - '../src/**/skeleton-text.mdx', - '../src/**/skeleton-text.stories.ts', - '../src/**/skip-to-content.mdx', - '../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', - '../src/**/slug-data-table.stories.ts', - '../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/**/tile.mdx', - '../src/**/tile.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', - '../src/**/toggletip.stories.ts', + '../src/**/*.mdx', + '../src/**/*.stories.@(js|jsx|ts|tsx)', ], { ignore: ['../src/**/docs/*.mdx'], @@ -130,8 +29,9 @@ const config: StorybookConfig = { stories: stories, addons: [ '@storybook/addon-links', - '@storybook/addon-essentials', '@storybook/addon-mdx-gfm', + '@storybook/addon-essentials', + '@storybook/addon-storysource', 'storybook-addon-accessibility-checker', ], framework: { @@ -140,16 +40,7 @@ const config: StorybookConfig = { }, async viteFinal(config) { // Merge custom configuration into the default config - const x = mergeConfig(config, { - // Add dependencies to pre-optimization) - // resolve: { - // alias: [{ find: "@", replacement: resolve(__dirname, "node_modules") }] - // }, - // resolve: { - // alias: { - // '@carbon/web-components/es/icons': path.resolve(__dirname, '@carbon/icons/lib') }, - // }, - assetsInclude: ['**/*.html'], + return mergeConfig(config, { plugins: [ litStyleLoader(), litTemplateLoader(), @@ -160,9 +51,6 @@ const config: StorybookConfig = { exclude: ['lit', 'lit-html'], }, }); - - // console.log(x) - return x; }, docs: { autodocs: true, diff --git a/packages/carbon-web-components/.storybook/manager-head.html b/packages/carbon-web-components/.storybook/manager-head.html new file mode 100644 index 00000000000..83569971fd0 --- /dev/null +++ b/packages/carbon-web-components/.storybook/manager-head.html @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/carbon-web-components/.storybook/preview.js b/packages/carbon-web-components/.storybook/preview.js index 71896f81aa2..fb6f655da7e 100644 --- a/packages/carbon-web-components/.storybook/preview.js +++ b/packages/carbon-web-components/.storybook/preview.js @@ -162,6 +162,7 @@ export const parameters = { }, options: { storySort: { + method: 'alphabetical', order: [ 'Introduction', [ diff --git a/packages/carbon-web-components/docs/carbon-cdn-style-helpers.mdx b/packages/carbon-web-components/docs/carbon-cdn-style-helpers.mdx index a17299981ba..664d0015876 100644 --- a/packages/carbon-web-components/docs/carbon-cdn-style-helpers.mdx +++ b/packages/carbon-web-components/docs/carbon-cdn-style-helpers.mdx @@ -1,4 +1,4 @@ -import { Description, Meta } from '@storybook/addon-docs/blocks'; +import { Description, Meta } from '@storybook/blocks'; diff --git a/packages/carbon-web-components/docs/form.mdx b/packages/carbon-web-components/docs/form.mdx index 1dbfc8d4bee..350b626cbae 100644 --- a/packages/carbon-web-components/docs/form.mdx +++ b/packages/carbon-web-components/docs/form.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs/blocks'; +import { Meta } from '@storybook/blocks'; diff --git a/packages/carbon-web-components/docs/styling.mdx b/packages/carbon-web-components/docs/styling.mdx index 62f2fd7e414..7722315c831 100644 --- a/packages/carbon-web-components/docs/styling.mdx +++ b/packages/carbon-web-components/docs/styling.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs/blocks'; +import { Meta } from '@storybook/blocks'; diff --git a/packages/carbon-web-components/docs/welcome.mdx b/packages/carbon-web-components/docs/welcome.mdx index f98ef3e050f..58b43b75fad 100644 --- a/packages/carbon-web-components/docs/welcome.mdx +++ b/packages/carbon-web-components/docs/welcome.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs/blocks'; +import { Meta } from '@storybook/blocks'; diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.babelrc b/packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/.babelrc similarity index 100% rename from packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.babelrc rename to packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/.babelrc diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.gitignore b/packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/.gitignore similarity index 100% rename from packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.gitignore rename to packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/.gitignore diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.sassrc b/packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/.sassrc similarity index 100% rename from packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.sassrc rename to packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/.sassrc diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/cdn.html b/packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/cdn.html similarity index 100% rename from packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/cdn.html rename to packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/cdn.html diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/index.html b/packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/index.html similarity index 100% rename from packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/index.html rename to packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/index.html diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/package.json b/packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/package.json similarity index 100% rename from packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/package.json rename to packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/package.json diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/sandbox.config.json b/packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/sandbox.config.json similarity index 100% rename from packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/sandbox.config.json rename to packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/sandbox.config.json diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/index.js b/packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/src/index.js similarity index 100% rename from packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/index.js rename to packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/src/index.js diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/styles.scss b/packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/src/styles.scss similarity index 100% rename from packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/styles.scss rename to packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon/src/styles.scss diff --git a/packages/carbon-web-components/src/components/accordion/accordion.mdx b/packages/carbon-web-components/src/components/accordion/accordion.mdx index c9b03f60048..9b2ed231590 100644 --- a/packages/carbon-web-components/src/components/accordion/accordion.mdx +++ b/packages/carbon-web-components/src/components/accordion/accordion.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as AccordionStories from './accordion.stories'; @@ -36,8 +36,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/accordion/index.js'; ``` - - +{`${cdnJs({ components: ['accordion'] })}`} +{`${cdnCss()}`} ### HTML diff --git a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.mdx b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.mdx index c0e1b92fc89..0363c6f98ef 100644 --- a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.mdx +++ b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as BreadcrumbStories from './breadcrumb.stories'; @@ -22,8 +22,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/breadcrumb/index.js'; ``` - - +{`${cdnJs({ components: ['breadcrumb'] })}`} +{`${cdnCss()}`} ### HTML diff --git a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.stories.ts b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.stories.ts index 1d0453947ff..42190f50828 100644 --- a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.stories.ts +++ b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.stories.ts @@ -14,7 +14,6 @@ import './breadcrumb-link'; import './breadcrumb-overflow-menu'; import '../overflow-menu/overflow-menu-body'; import './breadcrumb-skeleton'; -import storyDocs from './breadcrumb.mdx'; const args = { ariaLabel: '', @@ -123,11 +122,6 @@ export const Playground = { const meta = { title: 'Components/Breadcrumb', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts index 9828ef02e46..ccb2c49c151 100644 --- a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts +++ b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts @@ -46,7 +46,7 @@ class CDSBreadcrumb extends LitElement { `; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSBreadcrumb; diff --git a/packages/carbon-web-components/src/components/button/button-set.ts b/packages/carbon-web-components/src/components/button/button-set.ts index bf032b2d6ca..12b7bfb9c3d 100644 --- a/packages/carbon-web-components/src/components/button/button-set.ts +++ b/packages/carbon-web-components/src/components/button/button-set.ts @@ -68,7 +68,7 @@ class CDSButtonSet extends LitElement { return `${prefix}-button`; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ diff --git a/packages/carbon-web-components/src/components/button/button-skeleton.ts b/packages/carbon-web-components/src/components/button/button-skeleton.ts index 7f2a6aa09a4..80f933d8c9d 100644 --- a/packages/carbon-web-components/src/components/button/button-skeleton.ts +++ b/packages/carbon-web-components/src/components/button/button-skeleton.ts @@ -75,7 +75,7 @@ class CDSButtonSkeleton extends CDSButton { `; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSButtonSkeleton; diff --git a/packages/carbon-web-components/src/components/button/button.mdx b/packages/carbon-web-components/src/components/button/button.mdx index 8e433011e50..e77e55b099c 100644 --- a/packages/carbon-web-components/src/components/button/button.mdx +++ b/packages/carbon-web-components/src/components/button/button.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import Add16 from '@carbon/web-components/es/icons/add/16'; import * as ButtonStories from './button.stories'; @@ -36,8 +36,8 @@ import '@carbon/web-components/es/components/button/index.js'; @use '@carbon/styles/scss/components/button'; ``` - - +{`${cdnJs({ components: ['button'] })}`} +{`${cdnCss()}`} ### HTML diff --git a/packages/carbon-web-components/src/components/button/button.stories.ts b/packages/carbon-web-components/src/components/button/button.stories.ts index e8bfd58046f..6e07ba719d5 100644 --- a/packages/carbon-web-components/src/components/button/button.stories.ts +++ b/packages/carbon-web-components/src/components/button/button.stories.ts @@ -20,7 +20,6 @@ import { BUTTON_TOOLTIP_POSITION, } from './button'; import './index'; -import storyDocs from './button.mdx'; const kind = { [`Primary button (${BUTTON_KIND.PRIMARY})`]: BUTTON_KIND.PRIMARY, @@ -420,9 +419,6 @@ const meta = { title: 'Components/Button', parameters: { actions: { argTypesRegex: '^on.*' }, - docs: { - page: storyDocs, - }, }, }; diff --git a/packages/carbon-web-components/src/components/button/button.ts b/packages/carbon-web-components/src/components/button/button.ts index f3eb1853dd4..a680c592b1a 100644 --- a/packages/carbon-web-components/src/components/button/button.ts +++ b/packages/carbon-web-components/src/components/button/button.ts @@ -380,7 +380,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) { ...LitElement.shadowRootOptions, delegatesFocus: true, }; - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSButton; diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox-group.ts b/packages/carbon-web-components/src/components/checkbox/checkbox-group.ts index 7887bd42d48..20ea32c7a96 100644 --- a/packages/carbon-web-components/src/components/checkbox/checkbox-group.ts +++ b/packages/carbon-web-components/src/components/checkbox/checkbox-group.ts @@ -229,7 +229,7 @@ class CDSCheckboxGroup extends LitElement { ...LitElement.shadowRootOptions, delegatesFocus: true, }; - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSCheckboxGroup; diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox.mdx b/packages/carbon-web-components/src/components/checkbox/checkbox.mdx index 7003121de56..bf4bc9a7a25 100644 --- a/packages/carbon-web-components/src/components/checkbox/checkbox.mdx +++ b/packages/carbon-web-components/src/components/checkbox/checkbox.mdx @@ -1,6 +1,5 @@ -import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; - import * as CheckboxStories from './checkbox.stories'; diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox.stories.ts b/packages/carbon-web-components/src/components/checkbox/checkbox.stories.ts index 86337e04973..dbba153574d 100644 --- a/packages/carbon-web-components/src/components/checkbox/checkbox.stories.ts +++ b/packages/carbon-web-components/src/components/checkbox/checkbox.stories.ts @@ -9,7 +9,6 @@ import { html } from 'lit'; import { prefix } from '../../globals/settings'; -import storyDocs from './checkbox.mdx'; import './index'; const checkboxLabel = 'Checkbox label'; @@ -139,9 +138,6 @@ const meta = { title: 'Components/Checkbox', parameters: { actions: { argTypesRegex: '^on.*' }, - docs: { - page: storyDocs, - }, }, }; diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox.ts b/packages/carbon-web-components/src/components/checkbox/checkbox.ts index 62109de5379..55022c63538 100644 --- a/packages/carbon-web-components/src/components/checkbox/checkbox.ts +++ b/packages/carbon-web-components/src/components/checkbox/checkbox.ts @@ -299,7 +299,7 @@ class CDSCheckbox extends FocusMixin(FormMixin(LitElement)) { ...LitElement.shadowRootOptions, delegatesFocus: true, }; - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSCheckbox; diff --git a/packages/carbon-web-components/src/components/code-snippet/code-snippet.mdx b/packages/carbon-web-components/src/components/code-snippet/code-snippet.mdx index c7811cff78e..eff7f61ec25 100644 --- a/packages/carbon-web-components/src/components/code-snippet/code-snippet.mdx +++ b/packages/carbon-web-components/src/components/code-snippet/code-snippet.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as CodeSnippetStories from './code-snippet.stories'; @@ -25,8 +25,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/code-snippet/index.js'; ``` - - +{`${cdnJs({ components: ['code-snippet'] })}`} +{`${cdnCss()}`} ### HTML diff --git a/packages/carbon-web-components/src/components/code-snippet/code-snippet.stories.ts b/packages/carbon-web-components/src/components/code-snippet/code-snippet.stories.ts index 8b1ce887824..a80c69cb04e 100644 --- a/packages/carbon-web-components/src/components/code-snippet/code-snippet.stories.ts +++ b/packages/carbon-web-components/src/components/code-snippet/code-snippet.stories.ts @@ -8,7 +8,6 @@ */ import { html } from 'lit'; -import storyDocs from './code-snippet.mdx'; import './index'; import '../layer/index'; import '../../../.storybook/templates/with-layer'; @@ -281,11 +280,6 @@ export const Playground = { const meta = { title: 'Components/Code snippet', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box.mdx b/packages/carbon-web-components/src/components/combo-box/combo-box.mdx index a1f783dcf50..cdf915b7189 100644 --- a/packages/carbon-web-components/src/components/combo-box/combo-box.mdx +++ b/packages/carbon-web-components/src/components/combo-box/combo-box.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as ComboBoxStories from './combo-box.stories'; diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts b/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts index 00590bc0620..00d85d4a3fe 100644 --- a/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts +++ b/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts @@ -11,7 +11,6 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from './combo-box'; import './combo-box-item'; -import storyDocs from './combo-box.mdx'; const items = [ { @@ -217,11 +216,6 @@ const meta = { return html`
${story()}
`; }, ], - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/content-switcher/content-switcher.mdx b/packages/carbon-web-components/src/components/content-switcher/content-switcher.mdx index 057680a7f69..6e00d37d022 100644 --- a/packages/carbon-web-components/src/components/content-switcher/content-switcher.mdx +++ b/packages/carbon-web-components/src/components/content-switcher/content-switcher.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as ContentSwitcherStories from './content-switcher.stories'; @@ -26,8 +26,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/content-switcher/index.js'; ``` - - +{`${cdnJs({ components: ['content-switcher'] })}`} +{`${cdnCss()}`} ### HTML diff --git a/packages/carbon-web-components/src/components/content-switcher/content-switcher.stories.ts b/packages/carbon-web-components/src/components/content-switcher/content-switcher.stories.ts index 68c70414794..e5ecf5ed0de 100644 --- a/packages/carbon-web-components/src/components/content-switcher/content-switcher.stories.ts +++ b/packages/carbon-web-components/src/components/content-switcher/content-switcher.stories.ts @@ -11,7 +11,6 @@ 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'; @@ -169,11 +168,6 @@ export const Playground = { const meta = { title: 'Components/Content switcher', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/copy-button/copy-button.mdx b/packages/carbon-web-components/src/components/copy-button/copy-button.mdx index 86a68fa83f9..438cf46a931 100644 --- a/packages/carbon-web-components/src/components/copy-button/copy-button.mdx +++ b/packages/carbon-web-components/src/components/copy-button/copy-button.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Description, Meta } from '@storybook/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as CopyButtonStories from './copy-button.stories'; @@ -26,8 +26,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/copy-button/index.js'; ``` - - +{`${cdnJs({ components: ['copy-button'] })}`} +{`${cdnCss()}`} ### HTML diff --git a/packages/carbon-web-components/src/components/copy-button/copy-button.stories.ts b/packages/carbon-web-components/src/components/copy-button/copy-button.stories.ts index f0719e35219..340aa1d68bf 100644 --- a/packages/carbon-web-components/src/components/copy-button/copy-button.stories.ts +++ b/packages/carbon-web-components/src/components/copy-button/copy-button.stories.ts @@ -10,7 +10,6 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import type { Meta } from '@storybook/web-components'; -import storyDocs from './copy-button.mdx'; import './copy-button'; const defaultArgs = { @@ -36,11 +35,6 @@ const controls = { const meta: Meta = { title: 'Components/Copy button', - parameters: { - docs: { - page: storyDocs, - }, - }, render: ({ feedbackText, feedbackTimeout, onClick, iconDescription }) => html` # Data table diff --git a/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts b/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts index 4d5013ae557..23b5d60b407 100644 --- a/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts +++ b/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts @@ -88,7 +88,7 @@ class CDSTableExpandedRow extends HostListenerMixin(LitElement) { return `${prefix}-table-row`; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSTableExpandedRow; diff --git a/packages/carbon-web-components/src/components/date-picker/date-picker.mdx b/packages/carbon-web-components/src/components/date-picker/date-picker.mdx index b3ff2cb3736..a163de48765 100644 --- a/packages/carbon-web-components/src/components/date-picker/date-picker.mdx +++ b/packages/carbon-web-components/src/components/date-picker/date-picker.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as DatePickerStories from './date-picker.stories'; @@ -25,8 +25,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/date-picker/index.js'; ``` - - +{`${cdnJs({ components: ['date-picker'] })}`} +{`${cdnCss()}`} ### HTML diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown.mdx b/packages/carbon-web-components/src/components/dropdown/dropdown.mdx index 21b362ca8e2..de8425ec9ec 100644 --- a/packages/carbon-web-components/src/components/dropdown/dropdown.mdx +++ b/packages/carbon-web-components/src/components/dropdown/dropdown.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as DropdownStories from './dropdown.stories'; diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts b/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts index 2f230d10902..7c094b1403c 100644 --- a/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts +++ b/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts @@ -12,7 +12,6 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { DROPDOWN_DIRECTION, DROPDOWN_SIZE, DROPDOWN_TYPE } from './dropdown'; import './dropdown-item'; import './dropdown-skeleton'; -import storyDocs from './dropdown.mdx'; const directionOptions = { [`Top`]: DROPDOWN_DIRECTION.TOP, @@ -287,11 +286,6 @@ const meta = { return html`
${story()}
`; }, ], - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/file-uploader/file-uploader.mdx b/packages/carbon-web-components/src/components/file-uploader/file-uploader.mdx index 6f5ec6f5266..ea48fe5335f 100644 --- a/packages/carbon-web-components/src/components/file-uploader/file-uploader.mdx +++ b/packages/carbon-web-components/src/components/file-uploader/file-uploader.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as FileUploaderStories from './file-uploader.stories'; diff --git a/packages/carbon-web-components/src/components/file-uploader/file-uploader.stories.ts b/packages/carbon-web-components/src/components/file-uploader/file-uploader.stories.ts index 1cf2ef8ea95..bc9f2b9e402 100644 --- a/packages/carbon-web-components/src/components/file-uploader/file-uploader.stories.ts +++ b/packages/carbon-web-components/src/components/file-uploader/file-uploader.stories.ts @@ -14,7 +14,6 @@ import './index'; import './demo-file-uploader'; import { FILE_UPLOADER_ITEM_STATE } from './file-uploader-item'; import { BUTTON_KIND, BUTTON_SIZE } from '../button/button'; -import storyDocs from './file-uploader.mdx'; const kind = { [`Primary button (${BUTTON_KIND.PRIMARY})`]: BUTTON_KIND.PRIMARY, @@ -207,11 +206,6 @@ export const Playground = { const meta = { title: 'Components/File uploader', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/form-group/form-group.mdx b/packages/carbon-web-components/src/components/form-group/form-group.mdx index a8413e132d9..e1e850fd9b8 100644 --- a/packages/carbon-web-components/src/components/form-group/form-group.mdx +++ b/packages/carbon-web-components/src/components/form-group/form-group.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as FormGroupStories from './form-group.stories'; diff --git a/packages/carbon-web-components/src/components/form-group/form-group.stories.ts b/packages/carbon-web-components/src/components/form-group/form-group.stories.ts index 938c183ca8e..ac10584d9f5 100644 --- a/packages/carbon-web-components/src/components/form-group/form-group.stories.ts +++ b/packages/carbon-web-components/src/components/form-group/form-group.stories.ts @@ -14,7 +14,6 @@ import '../text-input'; import '../stack'; import '../radio-button/index'; import '../button'; -import storyDocs from './form-group.mdx'; const args = { legendText: 'FormGroup Legend', @@ -107,11 +106,6 @@ export const Playground = { const meta = { title: 'Components/Form Group', - parameters: { - docs: { - page: storyDocs, - }, - }, decorators: [ (story) => { return html`
${story()}
`; diff --git a/packages/carbon-web-components/src/components/form/form-item.ts b/packages/carbon-web-components/src/components/form/form-item.ts index 85d86aa7495..49db42c6427 100644 --- a/packages/carbon-web-components/src/components/form/form-item.ts +++ b/packages/carbon-web-components/src/components/form/form-item.ts @@ -23,7 +23,7 @@ class CDSFormItem extends LitElement { return html` `; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSFormItem; diff --git a/packages/carbon-web-components/src/components/icon-button/icon-button.mdx b/packages/carbon-web-components/src/components/icon-button/icon-button.mdx index 041ffc4554b..20b837132bb 100644 --- a/packages/carbon-web-components/src/components/icon-button/icon-button.mdx +++ b/packages/carbon-web-components/src/components/icon-button/icon-button.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as IconButtonStories from './icon-button.stories'; diff --git a/packages/carbon-web-components/src/components/icon-button/icon-button.stories.ts b/packages/carbon-web-components/src/components/icon-button/icon-button.stories.ts index d34e008d3c3..d2fa901bee6 100644 --- a/packages/carbon-web-components/src/components/icon-button/icon-button.stories.ts +++ b/packages/carbon-web-components/src/components/icon-button/icon-button.stories.ts @@ -10,7 +10,6 @@ import { html } from 'lit'; import './index'; import '../button/index'; -import storyDocs from './icon-button.mdx'; import { ICON_BUTTON_TOOLTIP_ALIGNMENT } from './defs'; import Edit16 from '@carbon/icons/lib/edit/16'; import { ICON_BUTTON_SIZE } from './defs'; @@ -148,11 +147,6 @@ export const Playground = { const meta = { decorators: [(story) => html`
${story()}
`], title: 'Components/Icon Button', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/icon-button/icon-button.ts b/packages/carbon-web-components/src/components/icon-button/icon-button.ts index 1efae6500ac..7ccc05fe7fc 100644 --- a/packages/carbon-web-components/src/components/icon-button/icon-button.ts +++ b/packages/carbon-web-components/src/components/icon-button/icon-button.ts @@ -106,7 +106,7 @@ class CDSIconButton extends CDSButton { `; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSIconButton; diff --git a/packages/carbon-web-components/src/components/icon/icon.stories.ts b/packages/carbon-web-components/src/components/icon/icon.stories.ts index 663cc49f2cc..cc11b17814c 100644 --- a/packages/carbon-web-components/src/components/icon/icon.stories.ts +++ b/packages/carbon-web-components/src/components/icon/icon.stories.ts @@ -20,8 +20,6 @@ import Add24 from '@carbon/web-components/es/icons/add/24'; // @ts-ignore import Add32 from '@carbon/web-components/es/icons/add/32'; -import storyDocs from './icon.mdx'; - export const Default = { render: () => html` ${Add16()} ${Add20()} ${Add24()} ${Add32()} `, }; @@ -75,11 +73,6 @@ export const withTitle = { const meta = { title: 'Components/Icon', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/inline-loading/inline-loading.mdx b/packages/carbon-web-components/src/components/inline-loading/inline-loading.mdx index e15df102c9f..1948de39f52 100644 --- a/packages/carbon-web-components/src/components/inline-loading/inline-loading.mdx +++ b/packages/carbon-web-components/src/components/inline-loading/inline-loading.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as InlineLoadingStories from './inline-loading.stories'; diff --git a/packages/carbon-web-components/src/components/inline-loading/inline-loading.stories.ts b/packages/carbon-web-components/src/components/inline-loading/inline-loading.stories.ts index b2017dae706..46c8f741f75 100644 --- a/packages/carbon-web-components/src/components/inline-loading/inline-loading.stories.ts +++ b/packages/carbon-web-components/src/components/inline-loading/inline-loading.stories.ts @@ -9,7 +9,6 @@ import { html } from 'lit'; import { INLINE_LOADING_STATE } from './inline-loading'; -import storyDocs from './inline-loading.mdx'; const states = { [`Inactive (${INLINE_LOADING_STATE.INACTIVE})`]: @@ -63,11 +62,6 @@ export const Playground = { const meta = { title: 'Components/Inline loading', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/inline-loading/inline-loading.ts b/packages/carbon-web-components/src/components/inline-loading/inline-loading.ts index bf6b6e9fc97..f0cabe8df1e 100644 --- a/packages/carbon-web-components/src/components/inline-loading/inline-loading.ts +++ b/packages/carbon-web-components/src/components/inline-loading/inline-loading.ts @@ -95,7 +95,7 @@ class CDSInlineLoading extends LitElement { `; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSInlineLoading; diff --git a/packages/carbon-web-components/src/components/layer/layer.mdx b/packages/carbon-web-components/src/components/layer/layer.mdx index 1c4bd90815a..9c97bb05095 100644 --- a/packages/carbon-web-components/src/components/layer/layer.mdx +++ b/packages/carbon-web-components/src/components/layer/layer.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as LayerStories from './layer.stories'; diff --git a/packages/carbon-web-components/src/components/layer/layer.stories.ts b/packages/carbon-web-components/src/components/layer/layer.stories.ts index 7fccb76ffaa..c3cefb39456 100644 --- a/packages/carbon-web-components/src/components/layer/layer.stories.ts +++ b/packages/carbon-web-components/src/components/layer/layer.stories.ts @@ -10,7 +10,6 @@ import { html } from 'lit'; import { prefix } from '../../globals/settings'; import styles from './layer-story.scss?lit'; -import storyDocs from './layer.mdx'; import './index'; const levels = { @@ -104,11 +103,6 @@ export const Playground = { const meta = { title: 'Components/Layer', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/link/link.stories.ts b/packages/carbon-web-components/src/components/link/link.stories.ts index 32d5f4d069e..62d9c4f3448 100644 --- a/packages/carbon-web-components/src/components/link/link.stories.ts +++ b/packages/carbon-web-components/src/components/link/link.stories.ts @@ -11,7 +11,6 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import Download16 from '@carbon/web-components/es/icons/download/16'; import { LINK_SIZE } from './link'; -import storyDocs from './link.mdx'; const defaultArgs = { disabled: false, @@ -101,11 +100,6 @@ export const Playground = { const meta = { title: 'Components/Link', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/link/link.ts b/packages/carbon-web-components/src/components/link/link.ts index 2ee192a4a4b..830b1c8bae5 100644 --- a/packages/carbon-web-components/src/components/link/link.ts +++ b/packages/carbon-web-components/src/components/link/link.ts @@ -220,7 +220,7 @@ class CDSLink extends FocusMixin(LitElement) { ...LitElement.shadowRootOptions, delegatesFocus: true, }; - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSLink; diff --git a/packages/carbon-web-components/src/components/list/list.mdx b/packages/carbon-web-components/src/components/list/list.mdx index 99d1b833f5f..21a126640ad 100644 --- a/packages/carbon-web-components/src/components/list/list.mdx +++ b/packages/carbon-web-components/src/components/list/list.mdx @@ -1,8 +1,5 @@ -import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; -import * as OrderedListStories from './ordered-list.stories'; - - # List diff --git a/packages/carbon-web-components/src/components/loading/loading.mdx b/packages/carbon-web-components/src/components/loading/loading.mdx index 31883edbfc8..f58d5041137 100644 --- a/packages/carbon-web-components/src/components/loading/loading.mdx +++ b/packages/carbon-web-components/src/components/loading/loading.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as LoadingStories from './loading.stories'; diff --git a/packages/carbon-web-components/src/components/loading/loading.stories.ts b/packages/carbon-web-components/src/components/loading/loading.stories.ts index 7ccfb14b2be..25e63b2c586 100644 --- a/packages/carbon-web-components/src/components/loading/loading.stories.ts +++ b/packages/carbon-web-components/src/components/loading/loading.stories.ts @@ -10,7 +10,6 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { LOADING_TYPE } from './loading'; -import storyDocs from './loading.mdx'; const types = { [`Regular (${LOADING_TYPE.REGULAR})`]: null, @@ -63,11 +62,6 @@ export const Playground = { const meta = { title: 'Components/Loading', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/loading/loading.ts b/packages/carbon-web-components/src/components/loading/loading.ts index 6e048f66986..7b44cf3d0cf 100644 --- a/packages/carbon-web-components/src/components/loading/loading.ts +++ b/packages/carbon-web-components/src/components/loading/loading.ts @@ -58,7 +58,7 @@ class CDSLoading extends LitElement { return overlay ? html`
${icon}
` : icon; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export { LOADING_TYPE }; diff --git a/packages/carbon-web-components/src/components/modal/modal-body-content.ts b/packages/carbon-web-components/src/components/modal/modal-body-content.ts index d90f8e8689d..d401dd27313 100644 --- a/packages/carbon-web-components/src/components/modal/modal-body-content.ts +++ b/packages/carbon-web-components/src/components/modal/modal-body-content.ts @@ -23,7 +23,7 @@ class CDSModalBodyContent extends LitElement { return html``; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSModalBodyContent; diff --git a/packages/carbon-web-components/src/components/modal/modal-body.ts b/packages/carbon-web-components/src/components/modal/modal-body.ts index 53ab3b27ef9..dee8b517b1b 100644 --- a/packages/carbon-web-components/src/components/modal/modal-body.ts +++ b/packages/carbon-web-components/src/components/modal/modal-body.ts @@ -23,7 +23,7 @@ class CDSModalBody extends LitElement { return html` `; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSModalBody; diff --git a/packages/carbon-web-components/src/components/modal/modal-close-button.ts b/packages/carbon-web-components/src/components/modal/modal-close-button.ts index 21d0bc96eb0..bdfdec3cc21 100644 --- a/packages/carbon-web-components/src/components/modal/modal-close-button.ts +++ b/packages/carbon-web-components/src/components/modal/modal-close-button.ts @@ -51,7 +51,7 @@ class CDSModalCloseButton extends FocusMixin(LitElement) { ...LitElement.shadowRootOptions, delegatesFocus: true, }; - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSModalCloseButton; diff --git a/packages/carbon-web-components/src/components/modal/modal-footer-button.ts b/packages/carbon-web-components/src/components/modal/modal-footer-button.ts index dcab26a29a3..b49c3842662 100644 --- a/packages/carbon-web-components/src/components/modal/modal-footer-button.ts +++ b/packages/carbon-web-components/src/components/modal/modal-footer-button.ts @@ -20,7 +20,7 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon- */ @customElement(`${prefix}-modal-footer-button`) class CDSModalFooterButton extends CDSButton { - static styles = [buttonStyles, styles]; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = [buttonStyles, styles]; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSModalFooterButton; diff --git a/packages/carbon-web-components/src/components/modal/modal-footer.ts b/packages/carbon-web-components/src/components/modal/modal-footer.ts index 43d11b1f5c1..4972dbf0060 100644 --- a/packages/carbon-web-components/src/components/modal/modal-footer.ts +++ b/packages/carbon-web-components/src/components/modal/modal-footer.ts @@ -53,7 +53,7 @@ class CDSModalFooter extends LitElement { return `${prefix}-button,${prefix}-modal-footer-button`; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSModalFooter; diff --git a/packages/carbon-web-components/src/components/modal/modal-header.ts b/packages/carbon-web-components/src/components/modal/modal-header.ts index fd2ce3f75db..d544255516c 100644 --- a/packages/carbon-web-components/src/components/modal/modal-header.ts +++ b/packages/carbon-web-components/src/components/modal/modal-header.ts @@ -23,7 +23,7 @@ class CDSModalHeader extends LitElement { return html` `; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSModalHeader; diff --git a/packages/carbon-web-components/src/components/modal/modal-heading.ts b/packages/carbon-web-components/src/components/modal/modal-heading.ts index 0d5803fa5f9..586a730b82c 100644 --- a/packages/carbon-web-components/src/components/modal/modal-heading.ts +++ b/packages/carbon-web-components/src/components/modal/modal-heading.ts @@ -23,7 +23,7 @@ class CDSModalHeading extends LitElement { return html` `; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSModalHeading; diff --git a/packages/carbon-web-components/src/components/modal/modal-label.ts b/packages/carbon-web-components/src/components/modal/modal-label.ts index 6a751d3b995..d18a0aa201b 100644 --- a/packages/carbon-web-components/src/components/modal/modal-label.ts +++ b/packages/carbon-web-components/src/components/modal/modal-label.ts @@ -23,7 +23,7 @@ class CDSModalLabel extends LitElement { return html` `; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSModalLabel; diff --git a/packages/carbon-web-components/src/components/modal/modal.mdx b/packages/carbon-web-components/src/components/modal/modal.mdx index a98b039a7f6..8fba815aa7d 100644 --- a/packages/carbon-web-components/src/components/modal/modal.mdx +++ b/packages/carbon-web-components/src/components/modal/modal.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as ModalStories from './modal.stories'; diff --git a/packages/carbon-web-components/src/components/modal/modal.stories.ts b/packages/carbon-web-components/src/components/modal/modal.stories.ts index 28377ae89ad..6647c7257a9 100644 --- a/packages/carbon-web-components/src/components/modal/modal.stories.ts +++ b/packages/carbon-web-components/src/components/modal/modal.stories.ts @@ -11,7 +11,6 @@ import { html } from 'lit'; import '../structured-list'; import { MODAL_SIZE } from './modal'; import './index'; -import storyDocs from './modal.mdx'; const toggleButton = () => { document.querySelector('cds-modal')?.toggleAttribute('open'); @@ -435,11 +434,6 @@ export const Playground = { const meta = { title: 'Components/Modal', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/modal/modal.ts b/packages/carbon-web-components/src/components/modal/modal.ts index 5284e6b0edf..6a27de558c5 100644 --- a/packages/carbon-web-components/src/components/modal/modal.ts +++ b/packages/carbon-web-components/src/components/modal/modal.ts @@ -411,7 +411,7 @@ class CDSModal extends HostListenerMixin(LitElement) { return `${prefix}-modal-closed`; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSModal; diff --git a/packages/carbon-web-components/src/components/multi-select/multi-select.mdx b/packages/carbon-web-components/src/components/multi-select/multi-select.mdx index 37702b3e828..965d5727d5b 100644 --- a/packages/carbon-web-components/src/components/multi-select/multi-select.mdx +++ b/packages/carbon-web-components/src/components/multi-select/multi-select.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as MultiSelectStories from './multi-select.stories'; @@ -34,8 +34,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/multi-select/index.js'; ``` - - +{`${cdnJs({ components: ['multi-select'] })}`} +{`${cdnCss()}`} ### HTML diff --git a/packages/carbon-web-components/src/components/multi-select/multi-select.stories.ts b/packages/carbon-web-components/src/components/multi-select/multi-select.stories.ts index 0b627d4c1ca..b19e936b541 100644 --- a/packages/carbon-web-components/src/components/multi-select/multi-select.stories.ts +++ b/packages/carbon-web-components/src/components/multi-select/multi-select.stories.ts @@ -18,7 +18,6 @@ import { import './multi-select-item'; import '../layer/index'; import '../../../.storybook/templates/with-layer'; -import storyDocs from './multi-select.mdx'; const sizes = { [`Small size (${DROPDOWN_SIZE.SMALL})`]: DROPDOWN_SIZE.SMALL, @@ -354,11 +353,6 @@ export const Playground = { const meta = { title: 'Components/Multi Select', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/notification/actionable-notification.ts b/packages/carbon-web-components/src/components/notification/actionable-notification.ts index a59a6af1738..d2544fbab69 100644 --- a/packages/carbon-web-components/src/components/notification/actionable-notification.ts +++ b/packages/carbon-web-components/src/components/notification/actionable-notification.ts @@ -178,7 +178,7 @@ class CDSActionableNotification extends HostListenerMixin( return `${prefix}-actionable-notification-button`; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSActionableNotification; diff --git a/packages/carbon-web-components/src/components/notification/inline-notification.ts b/packages/carbon-web-components/src/components/notification/inline-notification.ts index 1fd20328a94..8c59cca828b 100644 --- a/packages/carbon-web-components/src/components/notification/inline-notification.ts +++ b/packages/carbon-web-components/src/components/notification/inline-notification.ts @@ -284,7 +284,7 @@ class CDSInlineNotification extends FocusMixin(LitElement) { return `${prefix}-notification-closed`; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSInlineNotification; diff --git a/packages/carbon-web-components/src/components/notification/notification.mdx b/packages/carbon-web-components/src/components/notification/notification.mdx index 1056ffe57ff..c11556ffc8d 100644 --- a/packages/carbon-web-components/src/components/notification/notification.mdx +++ b/packages/carbon-web-components/src/components/notification/notification.mdx @@ -1,11 +1,9 @@ import { ArgsTable, - Markdown, Meta -} from '@storybook/addon-docs/blocks'; + Markdown, +} from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; -import * as ActionableNotification from './actionable-notification.stories'; - # Notification diff --git a/packages/carbon-web-components/src/components/notification/toast-notification.ts b/packages/carbon-web-components/src/components/notification/toast-notification.ts index b91c20767d4..35e7f8d6d54 100644 --- a/packages/carbon-web-components/src/components/notification/toast-notification.ts +++ b/packages/carbon-web-components/src/components/notification/toast-notification.ts @@ -65,7 +65,7 @@ class CDSToastNotification extends CDSInlineNotification { `; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSToastNotification; diff --git a/packages/carbon-web-components/src/components/number-input/number-input.mdx b/packages/carbon-web-components/src/components/number-input/number-input.mdx index e71ece78142..c1beae1eada 100644 --- a/packages/carbon-web-components/src/components/number-input/number-input.mdx +++ b/packages/carbon-web-components/src/components/number-input/number-input.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as NumberInputStories from './number-input.stories'; diff --git a/packages/carbon-web-components/src/components/number-input/number-input.stories.ts b/packages/carbon-web-components/src/components/number-input/number-input.stories.ts index c182e256f73..c1a8f116f3c 100644 --- a/packages/carbon-web-components/src/components/number-input/number-input.stories.ts +++ b/packages/carbon-web-components/src/components/number-input/number-input.stories.ts @@ -13,7 +13,6 @@ import { INPUT_SIZE } from '../text-input/text-input'; import './number-input'; import './number-input-skeleton'; import '../form/form-item'; -import storyDocs from './number-input.mdx'; const sizes = { [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL, @@ -214,7 +213,4 @@ export const Playground = { export default { title: 'Components/Number Input', - parameters: { - ...storyDocs.parameters, - }, }; diff --git a/packages/carbon-web-components/src/components/number-input/number-input.ts b/packages/carbon-web-components/src/components/number-input/number-input.ts index 1b040baf736..568db936611 100644 --- a/packages/carbon-web-components/src/components/number-input/number-input.ts +++ b/packages/carbon-web-components/src/components/number-input/number-input.ts @@ -353,7 +353,7 @@ class CDSNumberInput extends CDSTextInput { ...LitElement.shadowRootOptions, delegatesFocus: true, }; - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSNumberInput; diff --git a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-body.ts b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-body.ts index 1a57891a29d..0ba8ded7b23 100644 --- a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-body.ts +++ b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-body.ts @@ -164,7 +164,7 @@ class CDSOverflowMenuBody extends CDSFloatingMenu { return `${prefix}-overflow-menu-item:not([disabled])`; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSOverflowMenuBody; diff --git a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-item.ts b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-item.ts index 5f5d51e2ca9..58d8474897e 100644 --- a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-item.ts +++ b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-item.ts @@ -88,7 +88,7 @@ class CDSOverflowMenuItem extends FocusMixin(LitElement) { ...LitElement.shadowRootOptions, delegatesFocus: true, }; - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSOverflowMenuItem; diff --git a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.mdx b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.mdx index 1ef3fad2bc6..d51f7beccc2 100644 --- a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.mdx +++ b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as OverflowMenuStories from './overflow-menu.stories'; 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 index dbf13824101..46f60fd2155 100644 --- 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 @@ -12,7 +12,6 @@ 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'; @@ -136,11 +135,6 @@ export const Playground = { const meta = { title: 'Components/Overflow Menu', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.ts b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.ts index dcfa46905a4..fca55a2ef53 100644 --- a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.ts +++ b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.ts @@ -201,7 +201,7 @@ class CDSOverflowMenu return html` ${super.render()} `; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSOverflowMenu; diff --git a/packages/carbon-web-components/src/components/pagination/pagination.mdx b/packages/carbon-web-components/src/components/pagination/pagination.mdx index c7006a3cd15..a005ff01b98 100644 --- a/packages/carbon-web-components/src/components/pagination/pagination.mdx +++ b/packages/carbon-web-components/src/components/pagination/pagination.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as PaginationStories from './pagination.stories'; diff --git a/packages/carbon-web-components/src/components/pagination/pagination.stories.ts b/packages/carbon-web-components/src/components/pagination/pagination.stories.ts index c42995cf2b7..b51513ede1e 100644 --- a/packages/carbon-web-components/src/components/pagination/pagination.stories.ts +++ b/packages/carbon-web-components/src/components/pagination/pagination.stories.ts @@ -10,7 +10,6 @@ import { html } from 'lit'; import './index'; import '../select/index'; -import storyDocs from './pagination.mdx'; import { prefix } from '../../globals/settings'; import { PAGINATION_SIZE } from './defs'; @@ -194,11 +193,6 @@ export const Playground = { const meta = { title: 'Components/Pagination', - parameters: { - docs: { - page: storyDocs, - }, - }, decorators: [(story) => html`
${story()}
`], }; diff --git a/packages/carbon-web-components/src/components/pagination/pagination.ts b/packages/carbon-web-components/src/components/pagination/pagination.ts index e78551f1ff5..403bef7a02e 100644 --- a/packages/carbon-web-components/src/components/pagination/pagination.ts +++ b/packages/carbon-web-components/src/components/pagination/pagination.ts @@ -471,7 +471,7 @@ class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) { ...LitElement.shadowRootOptions, delegatesFocus: true, }; - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSPagination; diff --git a/packages/carbon-web-components/src/components/popover/popover-content.ts b/packages/carbon-web-components/src/components/popover/popover-content.ts index 5539af12e5a..f9a17ed9cd1 100644 --- a/packages/carbon-web-components/src/components/popover/popover-content.ts +++ b/packages/carbon-web-components/src/components/popover/popover-content.ts @@ -65,7 +65,7 @@ class CDSPopoverContent extends LitElement { `; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSPopoverContent; diff --git a/packages/carbon-web-components/src/components/popover/popover.mdx b/packages/carbon-web-components/src/components/popover/popover.mdx index 6a88042f80b..eb3aba2f585 100644 --- a/packages/carbon-web-components/src/components/popover/popover.mdx +++ b/packages/carbon-web-components/src/components/popover/popover.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Description, Meta } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import * as PopoverStories from './popover.stories'; @@ -25,8 +25,8 @@ import '@carbon/web-components/es/components/popover/index.js'; import Checkbox16 from '@carbon/icons/lib/checkbox/16'; ``` - - +{`${cdnJs({ components: ['popover'] })}`} +{`${cdnCss()}`} ### HTML diff --git a/packages/carbon-web-components/src/components/popover/popover.stories.ts b/packages/carbon-web-components/src/components/popover/popover.stories.ts index c1761a2d6cf..e92a3275a08 100644 --- a/packages/carbon-web-components/src/components/popover/popover.stories.ts +++ b/packages/carbon-web-components/src/components/popover/popover.stories.ts @@ -12,7 +12,6 @@ import './popover'; import './popover-content'; import '../radio-button/index'; import { POPOVER_ALIGNMENT } from './defs'; -import storyDocs from './popover.mdx'; import { prefix } from '../../globals/settings'; import Checkbox16 from '@carbon/icons/lib/checkbox/16'; import Settings16 from '@carbon/icons/lib/settings/16'; @@ -206,11 +205,6 @@ export const Playground = { const meta = { title: 'Components/Popover', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/popover/popover.ts b/packages/carbon-web-components/src/components/popover/popover.ts index 760596732ba..52fde93d1c6 100644 --- a/packages/carbon-web-components/src/components/popover/popover.ts +++ b/packages/carbon-web-components/src/components/popover/popover.ts @@ -124,7 +124,7 @@ class CDSPopover extends LitElement { return `${prefix}-popover-content`; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSPopover; diff --git a/packages/carbon-web-components/src/components/progress-bar/progress-bar.mdx b/packages/carbon-web-components/src/components/progress-bar/progress-bar.mdx index d0bbc4db3b1..9c3ffcbeba7 100644 --- a/packages/carbon-web-components/src/components/progress-bar/progress-bar.mdx +++ b/packages/carbon-web-components/src/components/progress-bar/progress-bar.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as ProgressBarStories from './progress-bar.stories'; diff --git a/packages/carbon-web-components/src/components/progress-bar/progress-bar.stories.ts b/packages/carbon-web-components/src/components/progress-bar/progress-bar.stories.ts index 8fae7089a36..4849d01fe49 100644 --- a/packages/carbon-web-components/src/components/progress-bar/progress-bar.stories.ts +++ b/packages/carbon-web-components/src/components/progress-bar/progress-bar.stories.ts @@ -16,7 +16,6 @@ import { } from '../progress-bar/progress-bar'; import './progress-bar'; import '../../../.storybook/templates/with-layer'; -import storyDocs from './progress-bar.mdx'; const sizes = { [`Small size (${PROGRESS_BAR_SIZE.SMALL})`]: PROGRESS_BAR_SIZE.SMALL, @@ -180,11 +179,6 @@ export const Playground = { const meta = { title: 'Components/Progress Bar', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.mdx b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.mdx index cf90dc441c7..07207f423dd 100644 --- a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.mdx +++ b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Description, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as ProgressIndicatorStories from './progress-indicator.stories'; diff --git a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.stories.ts b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.stories.ts index 236d0b9c1c4..46d8066999c 100644 --- a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.stories.ts +++ b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.stories.ts @@ -10,7 +10,6 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import './index'; -import storyDocs from './progress-indicator.mdx'; import ifNonEmpty from '../../globals/directives/if-non-empty'; const args = { @@ -151,11 +150,6 @@ export const Playground = { const meta = { title: 'Components/Progress Indicator', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/radio-button/radio-button.mdx b/packages/carbon-web-components/src/components/radio-button/radio-button.mdx index ef0e1ae1512..d4cbdaf8c2d 100644 --- a/packages/carbon-web-components/src/components/radio-button/radio-button.mdx +++ b/packages/carbon-web-components/src/components/radio-button/radio-button.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as RadioButtonStories from './radio-button.stories'; diff --git a/packages/carbon-web-components/src/components/radio-button/radio-button.stories.ts b/packages/carbon-web-components/src/components/radio-button/radio-button.stories.ts index 05f7c9b55ed..d080475da9b 100644 --- a/packages/carbon-web-components/src/components/radio-button/radio-button.stories.ts +++ b/packages/carbon-web-components/src/components/radio-button/radio-button.stories.ts @@ -13,7 +13,6 @@ import { prefix } from '../../globals/settings'; import { RADIO_BUTTON_ORIENTATION } from './radio-button-group'; import { RADIO_BUTTON_LABEL_POSITION } from './radio-button'; import './index'; -import storyDocs from './radio-button.mdx'; const orientations = { [`Horizontal (${RADIO_BUTTON_ORIENTATION.HORIZONTAL})`]: @@ -197,11 +196,6 @@ export const Playground = { const meta = { title: 'Components/Radio Button', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/search/search.mdx b/packages/carbon-web-components/src/components/search/search.mdx index 86f1aa8c1d4..960b24b6d24 100644 --- a/packages/carbon-web-components/src/components/search/search.mdx +++ b/packages/carbon-web-components/src/components/search/search.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as SearchStories from './search.stories'; diff --git a/packages/carbon-web-components/src/components/search/search.stories.ts b/packages/carbon-web-components/src/components/search/search.stories.ts index 446e5c9ef92..4129a6be39b 100644 --- a/packages/carbon-web-components/src/components/search/search.stories.ts +++ b/packages/carbon-web-components/src/components/search/search.stories.ts @@ -11,7 +11,6 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { INPUT_SIZE } from '../text-input/text-input'; import './search-skeleton'; -import storyDocs from './search.mdx'; import '../layer'; import '../../../.storybook/templates/with-layer'; import './index'; @@ -191,11 +190,6 @@ export const Playground = { const meta = { title: 'Components/Search', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/search/search.ts b/packages/carbon-web-components/src/components/search/search.ts index f2d871c80d0..c30a5bf7dbb 100644 --- a/packages/carbon-web-components/src/components/search/search.ts +++ b/packages/carbon-web-components/src/components/search/search.ts @@ -270,7 +270,7 @@ class CDSSearch extends HostListenerMixin(FocusMixin(FormMixin(LitElement))) { ...LitElement.shadowRootOptions, delegatesFocus: true, }; - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSSearch; diff --git a/packages/carbon-web-components/src/components/select/select.mdx b/packages/carbon-web-components/src/components/select/select.mdx index cd2445809e2..320e5838535 100644 --- a/packages/carbon-web-components/src/components/select/select.mdx +++ b/packages/carbon-web-components/src/components/select/select.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as SelectStories from './select.stories'; diff --git a/packages/carbon-web-components/src/components/select/select.stories.ts b/packages/carbon-web-components/src/components/select/select.stories.ts index 4f4ecf78730..b583dc93822 100644 --- a/packages/carbon-web-components/src/components/select/select.stories.ts +++ b/packages/carbon-web-components/src/components/select/select.stories.ts @@ -19,8 +19,6 @@ import '../form/form-item'; import '../layer'; import '../../../.storybook/templates/with-layer'; -import storyDocs from './select.mdx'; - const sizes = { [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL, [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM, @@ -248,11 +246,6 @@ const meta = { }, ], title: 'Components/Select', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/select/select.ts b/packages/carbon-web-components/src/components/select/select.ts index a21f1d03648..5028433583e 100644 --- a/packages/carbon-web-components/src/components/select/select.ts +++ b/packages/carbon-web-components/src/components/select/select.ts @@ -496,7 +496,7 @@ class CDSSelect extends FormMixin(LitElement) { ...LitElement.shadowRootOptions, delegatesFocus: true, }; - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSSelect; diff --git a/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.mdx b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.mdx index 5f7170ffb5e..b560700627d 100644 --- a/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.mdx +++ b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as SkeletonIconStories from './skeleton-icon.stories'; @@ -7,10 +7,10 @@ import * as SkeletonIconStories from './skeleton-icon.stories'; # Skeleton icon > 💡 Check our -> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon) +> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/basic/components/skeleton-icon) > example implementation. -[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon) +[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/stackblitz/basic/components/skeleton-icon) ## Getting started diff --git a/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.stories.ts b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.stories.ts index 3eb40e9d37f..63f6c42ff2b 100644 --- a/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.stories.ts +++ b/packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon.stories.ts @@ -9,7 +9,6 @@ import { html } from 'lit'; import './skeleton-icon'; -import storyDocs from './skeleton-icon.mdx'; export const Default = { parameters: { @@ -24,11 +23,6 @@ export const Default = { const meta = { title: 'Components/Skeleton/Skeleton Icon', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.mdx b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.mdx index ef10759a074..86d2c3e1f29 100644 --- a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.mdx +++ b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as SkeletonPlaceholderStories from './skeleton-placeholder.stories'; diff --git a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.stories.ts b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.stories.ts index 0d455f997b1..8287956a30f 100644 --- a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.stories.ts +++ b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.stories.ts @@ -9,7 +9,6 @@ import { html } from 'lit'; import './skeleton-placeholder'; -import storyDocs from './skeleton-placeholder.mdx'; export const Default = { parameters: { @@ -22,11 +21,6 @@ export const Default = { const meta = { title: 'Components/Skeleton/Skeleton Placeholder', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.mdx b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.mdx index 6a523900234..039fa91fb8c 100644 --- a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.mdx +++ b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as SkeletonTextStories from './skeleton-text.stories'; diff --git a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.stories.ts b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.stories.ts index 107efa685ff..cb7d6b6e1ef 100644 --- a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.stories.ts +++ b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.stories.ts @@ -10,7 +10,6 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { SKELETON_TEXT_TYPE } from './skeleton-text'; -import storyDocs from './skeleton-text.mdx'; const types = { Regular: null, @@ -73,9 +72,6 @@ export const Playground = { const meta = { title: 'Components/Skeleton/Skeleton Text', parameters: { - docs: { - page: storyDocs, - }, percy: { skip: true, }, diff --git a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.mdx b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.mdx index 6c53a070adf..566deddf7b9 100644 --- a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.mdx +++ b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as SkipToContentStories from './skip-to-content.stories'; diff --git a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.stories.ts b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.stories.ts index 1b653a4f272..9975536c462 100644 --- a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.stories.ts +++ b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.stories.ts @@ -10,7 +10,6 @@ import { html } from 'lit'; import './skip-to-content'; import styles from './skip-to-content-story.scss?lit'; -import storyDocs from './skip-to-content.mdx'; import { prefix } from '../../globals/settings'; export const Default = { @@ -72,11 +71,6 @@ export const Default = { const meta = { title: 'Components/Skip To Content', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.ts b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.ts index d182db666f6..b5bcb66aada 100644 --- a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.ts +++ b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.ts @@ -61,7 +61,7 @@ class CDSSkipToContent extends FocusMixin(LitElement) { ...LitElement.shadowRootOptions, delegatesFocus: true, }; - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSSkipToContent; diff --git a/packages/carbon-web-components/src/components/slider/slider.mdx b/packages/carbon-web-components/src/components/slider/slider.mdx index b222f0b4641..e6865551ddd 100644 --- a/packages/carbon-web-components/src/components/slider/slider.mdx +++ b/packages/carbon-web-components/src/components/slider/slider.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as SliderStories from './slider.stories'; diff --git a/packages/carbon-web-components/src/components/slider/slider.stories.ts b/packages/carbon-web-components/src/components/slider/slider.stories.ts index cfd4d3a7ea9..e03f538b2de 100644 --- a/packages/carbon-web-components/src/components/slider/slider.stories.ts +++ b/packages/carbon-web-components/src/components/slider/slider.stories.ts @@ -12,7 +12,6 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import './index'; import '../form/form-item'; import '../layer'; -import storyDocs from './slider.mdx'; import { prefix } from '../../globals/settings'; import '../../../.storybook/templates/with-layer'; @@ -300,7 +299,4 @@ export const Playground = { export default { title: 'Components/Slider', - parameters: { - ...storyDocs.parameters, - }, }; diff --git a/packages/carbon-web-components/src/components/slug/slug.mdx b/packages/carbon-web-components/src/components/slug/slug.mdx index beabac715af..5e1cc89c5dc 100644 --- a/packages/carbon-web-components/src/components/slug/slug.mdx +++ b/packages/carbon-web-components/src/components/slug/slug.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as SlugStories from './slug.stories'; diff --git a/packages/carbon-web-components/src/components/slug/slug.stories.ts b/packages/carbon-web-components/src/components/slug/slug.stories.ts index 28f382b1d26..15d4288e97c 100644 --- a/packages/carbon-web-components/src/components/slug/slug.stories.ts +++ b/packages/carbon-web-components/src/components/slug/slug.stories.ts @@ -15,7 +15,6 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import './index'; import '../icon-button/index'; import styles from './slug-story.scss?lit'; -import storyDocs from './slug.mdx'; import { POPOVER_ALIGNMENT } from '../popover/defs'; import { SLUG_SIZE } from './defs'; @@ -265,11 +264,6 @@ export const Playground = { const meta = { title: 'Experimental/Slug', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/stack/stack-story.ts b/packages/carbon-web-components/src/components/stack/stack-story.ts deleted file mode 100644 index 198cbd3574b..00000000000 --- a/packages/carbon-web-components/src/components/stack/stack-story.ts +++ /dev/null @@ -1,69 +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 { select } from '@storybook/addon-knobs'; -import { prefix } from '../../globals/settings'; -import storyDocs from './stack-story.mdx'; -import { STACK_ORIENTATION } from './stack'; -import './index.ts'; - -const orientationOptions = { - ['Vertical']: STACK_ORIENTATION.VERTICAL, - ['Horizontal']: STACK_ORIENTATION.HORIZONTAL, -}; - -export const Default = () => { - return html` -
Item 1
-
Item 2
-
Item 3
- `; -}; - -export const Horizontal = () => { - return html` -
Item 1
-
Item 2
-
Item 3
- `; -}; - -export const Playground = (args) => { - const { gap, orientation } = args?.['cds-stack'] ?? {}; - return html` -
Item 1
-
Item 2
-
Item 3
- `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-stack`]: () => ({ - gap: select( - 'gap', - ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'], - '0' - ), - orientation: select( - 'orientation', - orientationOptions, - STACK_ORIENTATION.VERTICAL - ), - }), - }, -}; - -export default { - title: 'Layout/Stack', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/packages/carbon-web-components/src/components/stack/stack-story.mdx b/packages/carbon-web-components/src/components/stack/stack.mdx similarity index 88% rename from packages/carbon-web-components/src/components/stack/stack-story.mdx rename to packages/carbon-web-components/src/components/stack/stack.mdx index 49074396951..770b9fe85c9 100644 --- a/packages/carbon-web-components/src/components/stack/stack-story.mdx +++ b/packages/carbon-web-components/src/components/stack/stack.mdx @@ -1,5 +1,8 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as StackStories from './stack.stories'; + + # Stack @@ -35,8 +38,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/stack/index.js'; ``` - - +{`${cdnJs({ components: ['stack'] })}`} +{`${cdnCss()}`} ### HTML @@ -63,4 +66,4 @@ attribute AND setting the `custom-gap-value` attribute to true. ## `` attributes, properties and events - + diff --git a/packages/carbon-web-components/src/components/stack/stack.stories.ts b/packages/carbon-web-components/src/components/stack/stack.stories.ts new file mode 100644 index 00000000000..a087ed0c5de --- /dev/null +++ b/packages/carbon-web-components/src/components/stack/stack.stories.ts @@ -0,0 +1,69 @@ +/** + * @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 { STACK_ORIENTATION } from './stack'; +import './index'; + +const orientationOptions = { + ['Vertical']: STACK_ORIENTATION.VERTICAL, + ['Horizontal']: STACK_ORIENTATION.HORIZONTAL, +}; + +const defaultArgs = { + gap: '0', + orientation: STACK_ORIENTATION.VERTICAL, +}; + +const controls = { + gap: { + control: 'select', + description: 'gap', + options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'], + }, + orientation: { + control: 'select', + description: 'orientation', + options: orientationOptions, + }, +}; + +export const Default = { + render: () => html` +
Item 1
+
Item 2
+
Item 3
+ `, +}; + +export const Horizontal = { + render: () => html` +
Item 1
+
Item 2
+
Item 3
+ `, +}; + +export const Playground = { + args: defaultArgs, + argTypes: controls, + render: ({ gap, orientation }) => html` +
Item 1
+
Item 2
+
Item 3
+ `, +}; + +const meta = { + title: 'Layout/Stack', +}; + +export default meta; diff --git a/packages/carbon-web-components/src/components/stack/stack.ts b/packages/carbon-web-components/src/components/stack/stack.ts index f371b3fc53e..2409868f8a5 100644 --- a/packages/carbon-web-components/src/components/stack/stack.ts +++ b/packages/carbon-web-components/src/components/stack/stack.ts @@ -70,7 +70,7 @@ class CDSStack extends LitElement { return html`
`; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSStack; diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list.mdx b/packages/carbon-web-components/src/components/structured-list/structured-list.mdx index e1c717e0355..874504d629d 100644 --- a/packages/carbon-web-components/src/components/structured-list/structured-list.mdx +++ b/packages/carbon-web-components/src/components/structured-list/structured-list.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Description, Meta } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as StructuredList from './structured-list.stories'; @@ -24,8 +24,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/structured-list/index.js'; ``` - - +{`${cdnJs({ components: ['structured-list'] })}`} +{`${cdnCss()}`} ### HTML diff --git a/packages/carbon-web-components/src/components/tabs/tabs.mdx b/packages/carbon-web-components/src/components/tabs/tabs.mdx index a53def8f278..ce66c0a1fd4 100644 --- a/packages/carbon-web-components/src/components/tabs/tabs.mdx +++ b/packages/carbon-web-components/src/components/tabs/tabs.mdx @@ -1,4 +1,4 @@ -import { ArgTypes, Markdown, Meta } from '@storybook/addon-docs/blocks'; +import { ArgTypes, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as TabsStories from './tabs.stories'; diff --git a/packages/carbon-web-components/src/components/tabs/tabs.stories.ts b/packages/carbon-web-components/src/components/tabs/tabs.stories.ts index 7b961ba40fb..715c49400db 100644 --- a/packages/carbon-web-components/src/components/tabs/tabs.stories.ts +++ b/packages/carbon-web-components/src/components/tabs/tabs.stories.ts @@ -11,7 +11,6 @@ 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'; @@ -293,9 +292,4 @@ export const Playground = { export default { title: 'Components/Tabs', actions: { argTypesRegex: '^on.*' }, - parameters: { - docs: { - page: storyDocs, - }, - }, }; diff --git a/packages/carbon-web-components/src/components/tag/tag.mdx b/packages/carbon-web-components/src/components/tag/tag.mdx index f6bd77de6fe..4604f96056d 100644 --- a/packages/carbon-web-components/src/components/tag/tag.mdx +++ b/packages/carbon-web-components/src/components/tag/tag.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Description, Meta } from '@storybook/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as TagStories from './tag.stories'; @@ -30,8 +30,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/tag/index.js'; ``` - - +{`${cdnJs({ components: ['tag'] })}`} +{`${cdnCss()}`} ### HTML diff --git a/packages/carbon-web-components/src/components/tag/tag.stories.ts b/packages/carbon-web-components/src/components/tag/tag.stories.ts index d308be1e7c2..12d9d23dbfd 100644 --- a/packages/carbon-web-components/src/components/tag/tag.stories.ts +++ b/packages/carbon-web-components/src/components/tag/tag.stories.ts @@ -10,7 +10,6 @@ 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, @@ -87,11 +86,6 @@ export const Playground = { const meta = { title: 'Components/Tag', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/tag/tag.ts b/packages/carbon-web-components/src/components/tag/tag.ts index f81a1baf9f6..a3058d9bfcf 100644 --- a/packages/carbon-web-components/src/components/tag/tag.ts +++ b/packages/carbon-web-components/src/components/tag/tag.ts @@ -174,7 +174,7 @@ class CDSTag extends HostListenerMixin(FocusMixin(LitElement)) { return `${prefix}-tag-closed`; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSTag; diff --git a/packages/carbon-web-components/src/components/text-input/text-input.mdx b/packages/carbon-web-components/src/components/text-input/text-input.mdx index 1b3e2ce0612..301793c41cc 100644 --- a/packages/carbon-web-components/src/components/text-input/text-input.mdx +++ b/packages/carbon-web-components/src/components/text-input/text-input.mdx @@ -1,4 +1,4 @@ -import { ArgTypes, Markdown, Meta } from '@storybook/addon-docs/blocks'; +import { ArgTypes, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as TextInput from './text-input.stories'; diff --git a/packages/carbon-web-components/src/components/text-input/text-input.stories.ts b/packages/carbon-web-components/src/components/text-input/text-input.stories.ts index 35420531135..f5fa305d580 100644 --- a/packages/carbon-web-components/src/components/text-input/text-input.stories.ts +++ b/packages/carbon-web-components/src/components/text-input/text-input.stories.ts @@ -9,7 +9,6 @@ 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'; @@ -219,9 +218,4 @@ export const Playground = { export default { title: 'Components/Text Input', actions: { argTypesRegex: '^on.*' }, - parameters: { - docs: { - page: storyDocs, - }, - }, }; diff --git a/packages/carbon-web-components/src/components/text-input/text-input.ts b/packages/carbon-web-components/src/components/text-input/text-input.ts index 71a29fb3acf..b87b6a1c309 100644 --- a/packages/carbon-web-components/src/components/text-input/text-input.ts +++ b/packages/carbon-web-components/src/components/text-input/text-input.ts @@ -512,7 +512,7 @@ class CDSTextInput extends ValidityMixin(FormMixin(LitElement)) { ...LitElement.shadowRootOptions, delegatesFocus: true, }; - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSTextInput; diff --git a/packages/carbon-web-components/src/components/textarea/textarea.mdx b/packages/carbon-web-components/src/components/textarea/textarea.mdx index 3372958a0e3..fe447beeed5 100644 --- a/packages/carbon-web-components/src/components/textarea/textarea.mdx +++ b/packages/carbon-web-components/src/components/textarea/textarea.mdx @@ -1,4 +1,4 @@ -import { ArgTypes, Markdown, Meta } from '@storybook/addon-docs/blocks'; +import { ArgTypes, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as TextArea from './textarea.stories'; diff --git a/packages/carbon-web-components/src/components/textarea/textarea.stories.ts b/packages/carbon-web-components/src/components/textarea/textarea.stories.ts index 259df013a6f..aa2c3eb2843 100644 --- a/packages/carbon-web-components/src/components/textarea/textarea.stories.ts +++ b/packages/carbon-web-components/src/components/textarea/textarea.stories.ts @@ -11,7 +11,6 @@ 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, @@ -175,9 +174,4 @@ export const Playground = { export default { title: 'Components/Text Area', - parameters: { - docs: { - page: storyDocs, - }, - }, }; diff --git a/packages/carbon-web-components/src/components/textarea/textarea.ts b/packages/carbon-web-components/src/components/textarea/textarea.ts index b488401963e..2249ee0befa 100644 --- a/packages/carbon-web-components/src/components/textarea/textarea.ts +++ b/packages/carbon-web-components/src/components/textarea/textarea.ts @@ -176,7 +176,7 @@ class CDSTextarea extends CDSTextInput { ...LitElement.shadowRootOptions, delegatesFocus: true, }; - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSTextarea; diff --git a/packages/carbon-web-components/src/components/tile/expandable-tile.ts b/packages/carbon-web-components/src/components/tile/expandable-tile.ts index 3901dfaf9d7..acacc980144 100644 --- a/packages/carbon-web-components/src/components/tile/expandable-tile.ts +++ b/packages/carbon-web-components/src/components/tile/expandable-tile.ts @@ -207,7 +207,7 @@ class CDSExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) { return `${prefix}-expandable-tile-toggled`; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSExpandableTile; diff --git a/packages/carbon-web-components/src/components/tile/tile-group.ts b/packages/carbon-web-components/src/components/tile/tile-group.ts index 554e347b633..8dba20a2f70 100644 --- a/packages/carbon-web-components/src/components/tile/tile-group.ts +++ b/packages/carbon-web-components/src/components/tile/tile-group.ts @@ -303,7 +303,7 @@ class CDSTileGroup extends HostListenerMixin(LitElement) { return `${prefix}-current-selectable-tile-selections`; } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSTileGroup; diff --git a/packages/carbon-web-components/src/components/tile/tile.mdx b/packages/carbon-web-components/src/components/tile/tile.mdx index 219e27ee624..5fa138b2d8b 100644 --- a/packages/carbon-web-components/src/components/tile/tile.mdx +++ b/packages/carbon-web-components/src/components/tile/tile.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Markdown } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # Tile diff --git a/packages/carbon-web-components/src/components/tile/tile.stories.ts b/packages/carbon-web-components/src/components/tile/tile.stories.ts index 38d837ddcd9..5e9089ecb43 100644 --- a/packages/carbon-web-components/src/components/tile/tile.stories.ts +++ b/packages/carbon-web-components/src/components/tile/tile.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2023 + * 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. @@ -24,41 +24,41 @@ const defaultArgs = { colorScheme: null, name: 'selectable-tile', value: '', - onInput: 'input' + onInput: 'input', }; const colorSchemeControl = { colorScheme: { control: 'select', description: 'Color scheme (color-scheme)', - options: colorSchemes + options: colorSchemes, }, -} +}; const defaultHref = { - href: 'https://example.com' + href: 'https://example.com', }; const hrefControl = { href: { control: 'text', - description: 'Href for clickable UI (href)' - } + description: 'Href for clickable UI (href)', + }, }; const radioControls = { checkmarkLabel: { control: 'text', - description: 'Label text for the checkmark icon (checkmark-label)' + description: 'Label text for the checkmark icon (checkmark-label)', }, ...colorSchemeControl, name: { control: 'text', - description: 'Name (name)' + description: 'Name (name)', }, value: { control: 'text', - description: 'Value (value)' + description: 'Value (value)', }, onInput: { action: `input`, @@ -72,27 +72,28 @@ const multiSelectableControls = { ...radioControls, selected: { control: 'boolean', - description: 'Selected (selected)' - } -} + description: 'Selected (selected)', + }, +}; const expandableArgs = { colorScheme: null, expanded: false, disableChange: false, onBeforeChange: 'cds-expandable-tile-beingchanged', - onChange: 'cds-expandable-tile-changed' + onChange: 'cds-expandable-tile-changed', }; const expandableControls = { ...colorSchemeControl, expanded: { control: 'boolean', - description: 'Expanded (expanded)' + description: 'Expanded (expanded)', }, disableChange: { control: 'boolean', - description: 'Disable user-initiated change in expanded state (Call event.preventDefault() in cds-expandable-tile-beingchanged event)' + description: + 'Disable user-initiated change in expanded state (Call event.preventDefault() in cds-expandable-tile-beingchanged event)', }, onBeforeChange: { action: 'cds-expandable-tile-beingchanged', @@ -105,31 +106,29 @@ const expandableControls = { table: { disable: true, }, - } + }, }; export const clickable = { args: defaultHref, argTypes: hrefControl, - render: ({href}) => html` - + render: ({ href }) => html` + Clickable tile - ` + `, }; export const ClickableWithLayer = { args: defaultHref, argTypes: hrefControl, - render: ({href}) => html` + render: ({ href }) => html` - + Clickable tile - ` + `, }; export const Default = { @@ -139,7 +138,7 @@ export const Default = { Default tile Link - ` + `, }; export const DefaultWithLayer = { @@ -151,84 +150,63 @@ export const DefaultWithLayer = { Link - ` + `, }; export const expandable = { args: expandableArgs, argTypes: expandableControls, - render: ({ colorScheme, expanded, disableChange, onBeforeChange, onChange }) => { - const handleBeforeChanged = (event: CustomEvent) => { - onBeforeChange(event); - if (disableChange) { - event.preventDefault(); - } - }; - return html` - - - Above the fold content here - - - Below the fold content here - - - `; -} + render: ({ + colorScheme, + expanded, + disableChange, + onBeforeChange, + onChange, + }) => { + const handleBeforeChanged = (event: CustomEvent) => { + onBeforeChange(event); + if (disableChange) { + event.preventDefault(); + } + }; + return html` + + + Above the fold content here + + + Below the fold content here + + + `; + }, }; export const ExpandableWithInteractive = { args: expandableArgs, argTypes: expandableControls, - render: ({ colorScheme, expanded, disableChange, onBeforeChange, onChange }) => { - const handleBeforeChanged = (event: CustomEvent) => { - onBeforeChange(event); - if (disableChange) { - event.preventDefault(); - } - }; - return html` - - - Above the fold content here -
- Example -
- - - Below the fold content here - - - - `; -} -}; - -export const ExpandableWithLayer = { - render: ({ colorScheme, expanded, disableChange, onBeforeChange, onChange } ) => { - const handleBeforeChanged = (event: CustomEvent) => { - onBeforeChange(event); - if (disableChange) { - event.preventDefault(); - } - }; - return html` - + render: ({ + colorScheme, + expanded, + disableChange, + onBeforeChange, + onChange, + }) => { + const handleBeforeChanged = (event: CustomEvent) => { + onBeforeChange(event); + if (disableChange) { + event.preventDefault(); + } + }; + return html` Above the fold content here +
+ Example +
Below the fold content here + - - `; -}}; + `; + }, +}; + +export const ExpandableWithLayer = { + render: ({ + colorScheme, + expanded, + disableChange, + onBeforeChange, + onChange, + }) => { + const handleBeforeChanged = (event: CustomEvent) => { + onBeforeChange(event); + if (disableChange) { + event.preventDefault(); + } + }; + return html` + + + + Above the fold content here + + + Below the fold content here + + + + `; + }, +}; export const MultiSelect = { args: defaultArgs, argTypes: multiSelectableControls, - render: ({ checkmarkLabel, colorScheme, name, selected, value, onInput }) => html` + render: ({ + checkmarkLabel, + colorScheme, + name, + selected, + value, + onInput, + }) => html` - ` + `, }; export const Radio = { @@ -313,7 +338,7 @@ export const Radio = { Option 3 - ` + `, }; export const RadioWithLayer = { @@ -325,12 +350,12 @@ export const RadioWithLayer = { Option 2 - ` + `, }; - export const Selectable = { - render: () => html` Default tile ` + render: () => + html` Default tile `, }; const meta = { diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx b/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx index b9a6668cb73..8205b8cac14 100644 --- a/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx +++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Description, Meta } from '@storybook/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as ToggleTip from './toggletip.stories'; @@ -26,8 +26,8 @@ import '@carbon/web-components/es/components/link/index.js'; import '@carbon/web-components/es/components/button/index.js'; ``` - - +{`${cdnJs({ components: ['toggle-tip'] })}`} +{`${cdnCss()}`} ### HTML diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts b/packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts index 686bd3d88aa..02307184ddd 100644 --- a/packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts +++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts @@ -11,7 +11,6 @@ import { html } from 'lit'; import './toggletip'; import '../button'; import { POPOVER_ALIGNMENT } from '../popover/defs'; -import storyDocs from './toggletip.mdx'; const tooltipAlignments = { [`top`]: POPOVER_ALIGNMENT.TOP, @@ -97,11 +96,6 @@ export const Playground = { const meta = { title: 'Components/Toggletip', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/toggle/toggle.mdx b/packages/carbon-web-components/src/components/toggle/toggle.mdx index d608a9e5c13..33ca6aba4ab 100644 --- a/packages/carbon-web-components/src/components/toggle/toggle.mdx +++ b/packages/carbon-web-components/src/components/toggle/toggle.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Description, Meta } from '@storybook/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as Toggle from './toggle.stories'; @@ -29,8 +29,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/toggle/index.js'; ``` - - +{`${cdnJs({ components: ['toggle'] })}`} +{`${cdnCss()}`} ### HTML diff --git a/packages/carbon-web-components/src/components/toggle/toggle.stories.ts b/packages/carbon-web-components/src/components/toggle/toggle.stories.ts index f230c52539e..a3ef3a794c0 100644 --- a/packages/carbon-web-components/src/components/toggle/toggle.stories.ts +++ b/packages/carbon-web-components/src/components/toggle/toggle.stories.ts @@ -11,7 +11,6 @@ import { html } from 'lit'; import './index'; import '../stack/index'; import { TOGGLE_SIZE } from './toggle'; -import storyDocs from './toggle.mdx'; const sizes = { 'Regular size': null, @@ -110,11 +109,6 @@ export const Playground = { const meta = { title: 'Components/Toggle', - parameters: { - docs: { - page: storyDocs, - }, - }, }; export default meta; diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip-content.ts b/packages/carbon-web-components/src/components/tooltip/tooltip-content.ts index b6fad784194..d258a599f86 100644 --- a/packages/carbon-web-components/src/components/tooltip/tooltip-content.ts +++ b/packages/carbon-web-components/src/components/tooltip/tooltip-content.ts @@ -33,7 +33,7 @@ class CDSTooltipContent extends CDSPopoverContent { ?.classList.add(`${prefix}--tooltip-content`); } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader } export default CDSTooltipContent; diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip.mdx b/packages/carbon-web-components/src/components/tooltip/tooltip.mdx index aa2eb3795d3..745b3c04393 100644 --- a/packages/carbon-web-components/src/components/tooltip/tooltip.mdx +++ b/packages/carbon-web-components/src/components/tooltip/tooltip.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Description, Meta } from '@storybook/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as Tooltip from './tooltip.stories'; @@ -30,8 +30,8 @@ import '@carbon/web-components/es/components/tooltip/index.js'; import Information16 from '@carbon/icons/lib/information/16'; ``` - - +{`${cdnJs({ components: ['tooltip'] })}`} +{`${cdnCss()}`} ### HTML diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip.stories.ts b/packages/carbon-web-components/src/components/tooltip/tooltip.stories.ts index 23df05ef638..732ad8afb61 100644 --- a/packages/carbon-web-components/src/components/tooltip/tooltip.stories.ts +++ b/packages/carbon-web-components/src/components/tooltip/tooltip.stories.ts @@ -14,7 +14,6 @@ import { html } from 'lit'; import './index'; import { POPOVER_ALIGNMENT } from '../popover/defs'; import styles from './tooltip-story.scss?lit'; -import storyDocs from './tooltip.mdx'; import Information16 from '@carbon/icons/lib/information/16'; const tooltipAlignments = { @@ -150,11 +149,6 @@ export const Playground = { const meta = { title: 'Components/Tooltip', - parameters: { - docs: { - page: storyDocs, - }, - }, decorators: [ (story) => html`