From e3bb85d45734235125578a27bf3137859b621798 Mon Sep 17 00:00:00 2001 From: Matthew Oliveira Date: Mon, 8 Jan 2024 16:56:47 -0500 Subject: [PATCH 1/2] chore(skeleton): update skeleton stories to sb v7 --- .../carbon-web-components/.storybook/main.ts | 4 + .../skeleton-placeholder-story.ts | 30 ------- ...der-story.mdx => skeleton-placeholder.mdx} | 11 ++- .../skeleton-placeholder.stories.ts | 32 +++++++ .../skeleton-text/skeleton-text-story.ts | 67 --------------- ...leton-text-story.mdx => skeleton-text.mdx} | 11 ++- .../skeleton-text/skeleton-text.stories.ts | 86 +++++++++++++++++++ 7 files changed, 136 insertions(+), 105 deletions(-) delete mode 100644 packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts rename packages/carbon-web-components/src/components/skeleton-placeholder/{skeleton-placeholder-story.mdx => skeleton-placeholder.mdx} (72%) create mode 100644 packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.stories.ts delete mode 100644 packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts rename packages/carbon-web-components/src/components/skeleton-text/{skeleton-text-story.mdx => skeleton-text.mdx} (78%) create mode 100644 packages/carbon-web-components/src/components/skeleton-text/skeleton-text.stories.ts diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts index dcd6c9c6491..2fe08b227a1 100644 --- a/packages/carbon-web-components/.storybook/main.ts +++ b/packages/carbon-web-components/.storybook/main.ts @@ -26,6 +26,10 @@ const stories = glob.sync( '../src/**/file-uploader.stories.ts', '../src/**/overflow-menu.mdx', '../src/**/overflow-menu.stories.ts', + '../src/**/skeleton-placeholder.mdx', + '../src/**/skeleton-placeholder.stories.ts', + '../src/**/skeleton-text.mdx', + '../src/**/skeleton-text.stories.ts', ], { ignore: ['../src/**/docs/*.mdx'], diff --git a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts deleted file mode 100644 index 9cb37821bdf..00000000000 --- a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts +++ /dev/null @@ -1,30 +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 './skeleton-placeholder'; -import storyDocs from './skeleton-placeholder-story.mdx'; - -export const Default = () => - html``; - -Default.storyName = 'Default'; - -Default.parameters = { - percy: { - skip: true, - }, -}; - -export default { - title: 'Components/Skeleton/Skeleton placeholder', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.mdx similarity index 72% rename from packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx rename to packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.mdx index fcb3bf9676e..ef10759a074 100644 --- a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx +++ b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.mdx @@ -1,5 +1,8 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as SkeletonPlaceholderStories from './skeleton-placeholder.stories'; + + # Skeleton placeholder @@ -19,8 +22,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/skeleton-placeholder/index.js'; ``` - - +{`${cdnJs({ components: ['skeleton-placeholder'] })}`} +{`${cdnCss()}`} ### HTML @@ -30,4 +33,4 @@ import '@carbon/web-components/es/components/skeleton-placeholder/index.js'; ## `` attributes, properties and events - + 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 new file mode 100644 index 00000000000..0d455f997b1 --- /dev/null +++ b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.stories.ts @@ -0,0 +1,32 @@ +/** + * @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 './skeleton-placeholder'; +import storyDocs from './skeleton-placeholder.mdx'; + +export const Default = { + parameters: { + percy: { + skip: true, + }, + }, + render: () => html``, +}; + +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-story.ts b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts deleted file mode 100644 index 032c03c4dbc..00000000000 --- a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts +++ /dev/null @@ -1,67 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { html } from 'lit'; -import { boolean, number, select, text } from '@storybook/addon-knobs'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { prefix } from '../../globals/settings'; -import { SKELETON_TEXT_TYPE } from './skeleton-text'; -import storyDocs from './skeleton-text-story.mdx'; - -const types = { - Regular: null, - [`Heading (${SKELETON_TEXT_TYPE.HEADING})`]: SKELETON_TEXT_TYPE.HEADING, -}; - -export const Default = () => html` `; - -Default.storyName = 'Default'; - -Default.parameters = { - percy: { - skip: true, - }, -}; - -export const Playground = (args) => { - const { type, paragraph, lineCount, width } = - args?.[`${prefix}-skeleton-text`] ?? {}; - return html` - - - `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-skeleton-text`]: () => ({ - type: select('Skeleton text type (type)', types, null), - paragraph: boolean('Use multiple lines of text (paragraph)', true), - lineCount: number('The number of lines in a paragraph (lineCount)', 3), - width: text( - 'Width (in px or %) of single line of text or max-width of paragraph lines (width)', - '100%' - ), - }), - }, -}; - -export default { - title: 'Components/Skeleton/Skeleton text', - parameters: { - ...storyDocs.parameters, - percy: { - skip: true, - }, - }, -}; diff --git a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.mdx similarity index 78% rename from packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx rename to packages/carbon-web-components/src/components/skeleton-text/skeleton-text.mdx index 860c3aee993..6a523900234 100644 --- a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx +++ b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.mdx @@ -1,5 +1,8 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as SkeletonTextStories from './skeleton-text.stories'; + + # Skeleton text @@ -19,8 +22,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/skeleton-text/index.js'; ``` - - +{`${cdnJs({ components: ['skeleton-text'] })}`} +{`${cdnCss()}`} ### HTML @@ -41,4 +44,4 @@ multiple instances of ``. ## `` attributes and properties - + 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 new file mode 100644 index 00000000000..744a5bfabe4 --- /dev/null +++ b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.stories.ts @@ -0,0 +1,86 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { prefix } from '../../globals/settings'; +import { SKELETON_TEXT_TYPE } from './skeleton-text'; +import storyDocs from './skeleton-text.mdx'; + +const types = { + Regular: null, + [`Heading (${SKELETON_TEXT_TYPE.HEADING})`]: SKELETON_TEXT_TYPE.HEADING, +}; + +const args = { + type: null, + paragraph: true, + lineCount: 3, + width: '100%', +}; + +const argTypes = { + type: { + control: 'select', + description: 'Indicate the type of skeleton text, heading or regular.', + options: types, + }, + paragraph: { + control: 'boolean', + description: 'Set this to true to generate multiple lines of text.', + }, + lineCount: { + control: 'number', + description: 'The number of lines shown if paragraph is true.', + }, + width: { + control: 'text', + description: + 'Width (in px or %) of single line of text or max-width of paragraph lines.', + }, +}; + +export const Default = { + parameters: { + percy: { + skip: true, + }, + }, + render: () => html``, +}; + +export const Playground = { + args, + argTypes, + render: (args) => { + const { type, paragraph, lineCount, width } = args ?? {}; + return html` + + + `; + }, +}; + +const meta = { + title: 'Components/Skeleton/Skeleton Text', + parameters: { + docs: { + page: storyDocs, + }, + percy: { + skip: true, + }, + }, +}; + +export default meta; From 0db1891f89d1dbf4a5e48d3900821ea697124e1f Mon Sep 17 00:00:00 2001 From: kennylam <909118+kennylam@users.noreply.github.com> Date: Wed, 10 Jan 2024 08:43:32 -0500 Subject: [PATCH 2/2] chore(storybook): remove unused var --- .../src/components/skeleton-text/skeleton-text.stories.ts | 1 - 1 file changed, 1 deletion(-) 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 744a5bfabe4..107efa685ff 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 @@ -9,7 +9,6 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { prefix } from '../../globals/settings'; import { SKELETON_TEXT_TYPE } from './skeleton-text'; import storyDocs from './skeleton-text.mdx';