diff --git a/web-components/packages/carbon-web-components/.storybook/main.ts b/web-components/packages/carbon-web-components/.storybook/main.ts index f3c87a42dc74..d4b3225e1046 100644 --- a/web-components/packages/carbon-web-components/.storybook/main.ts +++ b/web-components/packages/carbon-web-components/.storybook/main.ts @@ -20,11 +20,24 @@ const stories = glob.sync( // '../src/**/*.mdx', // '../src/**/*.stories.@(js|jsx|ts|tsx)', // add mdx/story files as they are being worked on + '../src/**/data-table-*.stories.ts', + '../src/**/data-table.mdx', + '../src/**/ordered-list.stories.ts', + '../src/**/unordered-list.stories.ts', + '../src/**/list.mdx', + '../src/**/checkbox.stories.ts', + '../src/**/inline-loading.mdx', + '../src/**/inline-loading.stories.ts', + '../src/**/checkbox.mdx', + '../src/**/loading.stories.ts', + '../src/**/loading.mdx', '../src/**/button.mdx', '../src/**/button.stories.ts', '../src/**/link.mdx', '../src/**/link.stories.ts', '../src/**/file-uploader.mdx', + '../src/**/modal.stories.ts', + '../src/**/modal.mdx', '../src/**/file-uploader.stories.ts', '../src/**/overflow-menu.mdx', '../src/**/overflow-menu.stories.ts', diff --git a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts deleted file mode 100644 index 5a46c9fc5ffc..000000000000 --- a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts +++ /dev/null @@ -1,119 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { html } from 'lit'; -import { action } from '@storybook/addon-actions'; -import { boolean } from '@storybook/addon-knobs'; -import { prefix } from '../../globals/settings'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import './index'; -import storyDocs from './checkbox-story.mdx'; - -const checkboxLabel = 'Checkbox label'; - -export const Default = () => { - return html` - - ${checkboxLabel} - ${checkboxLabel} - - `; -}; - -Default.storyName = 'Default'; - -export const Skeleton = () => { - return html` -
- ${checkboxLabel} -
- `; -}; - -export const Single = () => { - return html` - ${checkboxLabel} -

- ${checkboxLabel} -

- ${checkboxLabel} -

- ${checkboxLabel} - `; -}; - -export const Playground = (args) => { - const { - disabled, - readonly, - onChange, - helperText, - invalid, - invalidText, - legendText, - warn, - warnText, - } = args?.[`${prefix}-checkbox`] ?? {}; - return html` - - Checkbox label - Checkbox label - Checkbox label - - `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-checkbox`]: () => ({ - onChange: action(`${prefix}-checkbox-changed`), - disabled: boolean('Disabled (disabled)', false), - helperText: textNullable( - 'Helper text (helper-text)', - 'Helper text goes here' - ), - invalid: boolean('Invalid (invalid)', false), - invalidText: textNullable( - 'Invalid text (invalid-text)', - 'Invalid message goes here' - ), - legendText: textNullable('Legend text (legend-text)', 'Group label'), - readonly: boolean('Read only (readonly)', false), - warn: boolean('Warn (warn)', false), - warnText: textNullable('Warn text (warn-text)', 'Warn message goes here'), - }), - }, -}; - -export default { - title: 'Components/Checkbox', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox-story.mdx b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.mdx similarity index 83% rename from web-components/packages/carbon-web-components/src/components/checkbox/checkbox-story.mdx rename to web-components/packages/carbon-web-components/src/components/checkbox/checkbox.mdx index 668f682383f2..7003121de562 100644 --- a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox-story.mdx +++ b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.mdx @@ -1,6 +1,10 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as CheckboxStories from './checkbox.stories'; + + + # Check box > 💡 Check our @@ -22,8 +26,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/checkbox/index.js'; ``` - - +{`${cdnJs({ components: ['checkbox'] })}`} +{`${cdnCss()}`} ### HTML @@ -49,4 +53,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `checked` attribute). - + diff --git a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.stories.ts b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.stories.ts new file mode 100644 index 000000000000..86337e04973a --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.stories.ts @@ -0,0 +1,148 @@ +/** + * @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 { prefix } from '../../globals/settings'; +import storyDocs from './checkbox.mdx'; +import './index'; + +const checkboxLabel = 'Checkbox label'; + +const defaultArgs = { + disabled: false, + helperText: 'Helper text goes here', + invalid: false, + invalidText: 'Invalid message goes here', + legendText: 'Group label', + readonly: false, + warn: false, + warnText: 'Warn message goes here', +}; + +const controls = { + disabled: { + control: 'boolean', + description: 'Specify whether the checkbox should be disabled.', + }, + helperText: { + control: 'textNullable', + description: 'Provide text for the form group for additional help.', + }, + invalid: { + control: 'boolean', + description: 'Specify whether the form group is currently invalid.', + }, + invalidText: { + control: 'textNullable', + description: + 'Provide the text that is displayed when the form group is in an invalid state.', + }, + legendText: { + control: 'textNullable', + description: 'Provide the text to be rendered inside of the fieldset.', + }, + readonly: { + control: 'boolean', + description: 'Specify whether the checkbox group is read-only.', + }, + warn: { + control: 'boolean', + description: + 'Specify whether the form group is currently in warning state.', + }, + warnText: { + control: 'textNullable', + description: + 'Provide the text that is displayed when the form group is in warning state.', + }, +}; + +export const Default = { + render: () => html` + + ${checkboxLabel} + ${checkboxLabel} + + `, +}; + +export const Skeleton = { + render: () => html` +
+ ${checkboxLabel} +
+ `, +}; + +export const Single = { + render: () => html` + ${checkboxLabel} +

+ ${checkboxLabel} +

+ ${checkboxLabel} +

+ ${checkboxLabel} + `, +}; + +export const Playground = { + args: defaultArgs, + argTypes: controls, + render: ({ + disabled, + readonly, + onChange, + helperText, + invalid, + invalidText, + legendText, + warn, + warnText, + }) => + html` + + Checkbox label + Checkbox label + Checkbox label + + `, +}; + +const meta = { + title: 'Components/Checkbox', + parameters: { + actions: { argTypesRegex: '^on.*' }, + docs: { + page: storyDocs, + }, + }, +}; + +export default meta; diff --git a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-basic-story.ts b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-basic.stories.ts similarity index 88% rename from web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-basic-story.ts rename to web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-basic.stories.ts index 419539e9453d..8ff372e69f84 100644 --- a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-basic-story.ts +++ b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-basic.stories.ts @@ -8,11 +8,9 @@ */ import { html } from 'lit'; -import { boolean, select, text } from '@storybook/addon-knobs'; -import { prefix } from '../../../globals/settings'; import { TABLE_SIZE } from '../table'; import '../index'; -import storyDocs from './data-table-story.mdx'; +import storyDocs from './data-table.mdx'; const sizes = { [`xs (${TABLE_SIZE.XS})`]: TABLE_SIZE.XS, @@ -22,8 +20,35 @@ const sizes = { [`xl (${TABLE_SIZE.XL})`]: TABLE_SIZE.XL, }; -export const Default = () => { - return html` +const defaultArgs = { + locale: 'en', + size: TABLE_SIZE.LG, + useStaticWidth: false, + useZebraStyles: false, +}; + +const controls = { + locale: { + control: 'text', + description: 'Provide a string for the current locale.', + }, + size: { + control: 'radio', + description: 'Change the row height of table.', + options: sizes, + }, + useStaticWidth: { + control: 'boolean', + description: 'Use static width.', + }, + useZebraStyles: { + control: 'boolean', + description: 'Use zebra styles.', + }, +}; + +export const Default = { + render: () => html` @@ -86,11 +111,11 @@ export const Default = () => { - `; + `, }; -export const XLWithTwoLines = () => { - return html` +export const XLWithTwoLines = { + render: () => html` @@ -113,8 +138,8 @@ export const XLWithTwoLines = () => { 22 - Load Balancer 2 + + Load Balancer 2 Austin, Tx DNS delegation @@ -123,8 +148,8 @@ export const XLWithTwoLines = () => { 22 - Load Balancer 3 + + Load Balancer 3 Austin, Tx Round robin @@ -133,8 +158,8 @@ export const XLWithTwoLines = () => { 22 - Load Balancer 4 + + Load Balancer 4 Austin, Tx Round robin @@ -143,8 +168,8 @@ export const XLWithTwoLines = () => { 22 - Load Balancer 5 + + Load Balancer 5 Austin, Tx Round robin @@ -153,8 +178,8 @@ export const XLWithTwoLines = () => { 22 - Load Balancer 6 + + Load Balancer 6 Austin, Tx Round robin @@ -163,8 +188,8 @@ export const XLWithTwoLines = () => { 22 - Load Balancer 7 + + Load Balancer 7 Austin, Tx Round robin @@ -174,13 +199,13 @@ export const XLWithTwoLines = () => { - `; + `, }; -export const Playground = (args) => { - const { locale, size, useStaticWidth, useZebraStyles } = - args?.[`${prefix}-table`] ?? {}; - return html` +export const Playground = { + args: defaultArgs, + argTypes: controls, + render: ({ locale, size, useStaticWidth, useZebraStyles }) => html` { - `; + `, }; -Playground.parameters = { - knobs: { - [`${prefix}-table`]: () => ({ - locale: text('Locale', 'en'), - size: select('Size', sizes, TABLE_SIZE.LG), - useStaticWidth: boolean('Use static width', false), - useZebraStyles: boolean('Use zebra styles', false), - }), - }, -}; - -export default { +const meta = { title: 'Components/DataTable/Basic', parameters: { - ...storyDocs.parameters, + docs: { + page: storyDocs, + }, }, }; + +export default meta; diff --git a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-batch-actions-story.ts b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-batch-actions.stories.ts similarity index 91% rename from web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-batch-actions-story.ts rename to web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-batch-actions.stories.ts index 0fdfa4bb30d5..9dc9b4bb8ddc 100644 --- a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-batch-actions-story.ts +++ b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-batch-actions.stories.ts @@ -8,7 +8,6 @@ */ import { html } from 'lit'; -import { boolean, select, text } from '@storybook/addon-knobs'; import { prefix } from '../../../globals/settings'; import { TABLE_SIZE } from '../table'; import Add from '@carbon/web-components/es/icons/add/16'; @@ -18,8 +17,9 @@ import TrashCan from '@carbon/web-components/es/icons/trash-can/16'; import Download16 from '@carbon/web-components/es/icons/download/16'; // @ts-ignore import Settings16 from '@carbon/web-components/es/icons/settings/16'; +import '../../overflow-menu'; import '../index'; -import storyDocs from './data-table-story.mdx'; +import storyDocs from './data-table.mdx'; const sizes = { [`xs (${TABLE_SIZE.XS})`]: TABLE_SIZE.XS, @@ -29,8 +29,45 @@ const sizes = { [`xl (${TABLE_SIZE.XL})`]: TABLE_SIZE.XL, }; -export const Default = () => { - return html` +const defaultArgs = { + isSortable: false, + locale: 'en', + radio: false, + size: TABLE_SIZE.LG, + useStaticWidth: false, + useZebraStyles: false, +}; + +const controls = { + isSortable: { + control: 'boolean', + description: 'Is sortable', + }, + locale: { + control: 'text', + description: 'Locale', + }, + radio: { + control: 'boolean', + description: 'Radio', + }, + size: { + control: 'radio', + description: 'Size', + options: sizes, + }, + useStaticWidth: { + control: 'boolean', + description: 'Use static width', + }, + useZebraStyles: { + control: 'boolean', + description: 'Use zebra styles', + }, +}; + +export const Default = { + render: () => html` DataTable { - `; + `, }; -export const Playground = (args) => { - const { isSortable, locale, radio, size, useStaticWidth, useZebraStyles } = - args?.[`${prefix}-table`] ?? {}; - return html` +export const Playground = { + args: defaultArgs, + argsType: controls, + render: ({ + isSortable, + locale, + radio, + size, + useStaticWidth, + useZebraStyles, + }) => html` { - `; + `, }; -Playground.parameters = { - knobs: { - [`${prefix}-table`]: () => ({ - isSortable: boolean('Is sortable', false), - locale: text('Locale', 'en'), - radio: boolean('Radio', false), - size: select('Size', sizes, TABLE_SIZE.LG), - useStaticWidth: boolean('Use static width', false), - useZebraStyles: boolean('Use zebra styles', false), - }), - }, -}; - -export default { +const meta = { title: 'Components/DataTable/Batch Actions', parameters: { - ...storyDocs.parameters, + docs: { + page: storyDocs, + }, }, }; + +export default meta; diff --git a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-dynamic-story.ts b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-dynamic.stories.ts similarity index 93% rename from web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-dynamic-story.ts rename to web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-dynamic.stories.ts index 0b0767c4e82a..79a39c70586e 100644 --- a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-dynamic-story.ts +++ b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-dynamic.stories.ts @@ -8,7 +8,6 @@ */ import { html } from 'lit'; -import { boolean, select, text } from '@storybook/addon-knobs'; import { prefix } from '../../../globals/settings'; import { TABLE_SIZE } from '../table'; import Add from '@carbon/web-components/es/icons/add/16'; @@ -19,7 +18,7 @@ import Download16 from '@carbon/web-components/es/icons/download/16'; // @ts-ignore import Settings16 from '@carbon/web-components/es/icons/settings/16'; import '../index'; -import storyDocs from './data-table-story.mdx'; +import storyDocs from './data-table.mdx'; const sizes = { [`xs (${TABLE_SIZE.XS})`]: TABLE_SIZE.XS, @@ -29,6 +28,43 @@ const sizes = { [`xl (${TABLE_SIZE.XL})`]: TABLE_SIZE.XL, }; +const defaultArgs = { + isSortable: false, + locale: 'en', + radio: false, + size: TABLE_SIZE.LG, + useStaticWidth: false, + useZebraStyles: false, +}; + +const controls = { + isSortable: { + control: 'boolean', + description: 'Is sortable', + }, + locale: { + control: 'text', + description: 'Locale', + }, + radio: { + control: 'boolean', + description: 'Radio', + }, + size: { + control: 'radio', + description: 'Size', + options: sizes, + }, + useStaticWidth: { + control: 'boolean', + description: 'Use static width', + }, + useZebraStyles: { + control: 'boolean', + description: 'Use zebra styles', + }, +}; + let headerCount = 6; let rowCount = 1; @@ -91,8 +127,8 @@ const addHeader = () => { headerCount++; }; -export const Default = () => { - return html` +export const Default = { + render: () => html` DataTable { - `; + `, }; -export const Playground = (args) => { - const { isSortable, locale, radio, size, useStaticWidth, useZebraStyles } = - args?.[`${prefix}-table`] ?? {}; - return html` +export const Playground = { + args: defaultArgs, + argTypes: controls, + render: ({ + isSortable, + locale, + radio, + size, + useStaticWidth, + useZebraStyles, + }) => html` { - `; + `, }; -Playground.parameters = { - knobs: { - [`${prefix}-table`]: () => ({ - isSortable: boolean('Is sortable', false), - locale: text('Locale', 'en'), - radio: boolean('Radio', false), - size: select('Size', sizes, TABLE_SIZE.LG), - useStaticWidth: boolean('Use static width', false), - useZebraStyles: boolean('Use zebra styles', false), - }), - }, -}; - -export default { +const meta = { title: 'Components/DataTable/Dynamic', parameters: { - ...storyDocs.parameters, + docs: { + page: storyDocs, + }, }, }; + +export default meta; diff --git a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-expansion-story.ts b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-expansion.stories.ts similarity index 93% rename from web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-expansion-story.ts rename to web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-expansion.stories.ts index 5fc4f8c0b4c9..196afe42a666 100644 --- a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-expansion-story.ts +++ b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-expansion.stories.ts @@ -8,11 +8,9 @@ */ import { html } from 'lit'; -import { boolean, select, text } from '@storybook/addon-knobs'; -import { prefix } from '../../../globals/settings'; import { TABLE_SIZE } from '../table'; import '../index'; -import storyDocs from './data-table-story.mdx'; +import storyDocs from './data-table.mdx'; const sizes = { [`xs (${TABLE_SIZE.XS})`]: TABLE_SIZE.XS, @@ -22,8 +20,40 @@ const sizes = { [`xl (${TABLE_SIZE.XL})`]: TABLE_SIZE.XL, }; -export const Default = () => { - return html` +const defaultArgs = { + isSortable: false, + locale: 'en', + size: TABLE_SIZE.LG, + useStaticWidth: false, + useZebraStyles: false, +}; + +const controls = { + isSortable: { + control: 'boolean', + description: 'Is sortable', + }, + locale: { + control: 'text', + description: 'Locale', + }, + size: { + control: 'radio', + description: 'Size', + options: sizes, + }, + useStaticWidth: { + control: 'boolean', + description: 'Use static width', + }, + useZebraStyles: { + control: 'boolean', + description: 'Use zebra styles', + }, +}; + +export const Default = { + render: () => html` DataTable { - `; + `, }; -export const BatchExpansion = () => { - return html` +export const BatchExpansion = { + render: () => html` DataTable { - `; + `, }; -export const Playground = (args) => { - const { isSortable, locale, size, useStaticWidth, useZebraStyles } = - args?.[`${prefix}-table`] ?? {}; - return html` +export const Playground = { + args: defaultArgs, + argTypes: controls, + render: ({ + isSortable, + locale, + size, + useStaticWidth, + useZebraStyles, + }) => html` { - `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-table`]: () => ({ - isSortable: boolean('Is sortable', false), - locale: text('Locale', 'en'), - size: select('Size', sizes, TABLE_SIZE.LG), - useStaticWidth: boolean('Use static width', false), - useZebraStyles: boolean('Use zebra styles', false), - }), - }, + `, }; -export default { +const meta = { title: 'Components/DataTable/Expansion', parameters: { - ...storyDocs.parameters, + docs: { + page: storyDocs, + }, }, }; + +export default meta; diff --git a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-filtering-story.ts b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-filtering.stories.ts similarity index 90% rename from web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-filtering-story.ts rename to web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-filtering.stories.ts index b25f2ff3ac65..e7071a11d49b 100644 --- a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-filtering-story.ts +++ b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-filtering.stories.ts @@ -8,13 +8,12 @@ */ import { html } from 'lit'; -import { boolean, select, text } from '@storybook/addon-knobs'; import { prefix } from '../../../globals/settings'; import { TABLE_SIZE } from '../table'; // @ts-ignore import Settings16 from '@carbon/web-components/es/icons/settings/16'; import '../index'; -import storyDocs from './data-table-story.mdx'; +import storyDocs from './data-table.mdx'; const sizes = { [`xs (${TABLE_SIZE.XS})`]: TABLE_SIZE.XS, @@ -24,8 +23,40 @@ const sizes = { [`xl (${TABLE_SIZE.XL})`]: TABLE_SIZE.XL, }; -export const Default = () => { - return html` +const defaultArgs = { + isSortable: false, + locale: 'en', + size: TABLE_SIZE.LG, + useStaticWidth: false, + useZebraStyles: false, +}; + +const controls = { + isSortable: { + control: 'boolean', + description: 'Is sortable', + }, + locale: { + control: 'text', + description: 'Locale', + }, + size: { + control: 'radio', + description: 'Size', + options: sizes, + }, + useStaticWidth: { + control: 'boolean', + description: 'Use static width', + }, + useZebraStyles: { + control: 'boolean', + description: 'Use zebra styles', + }, +}; + +export const Default = { + render: () => html` DataTable { - `; + `, }; -export const Playground = (args) => { - const { isSortable, locale, radio, size, useStaticWidth, useZebraStyles } = - args?.[`${prefix}-table`] ?? {}; - return html` +export const Playground = { + args: defaultArgs, + argTypes: controls, + render: ({ + isSortable, + locale, + radio, + size, + useStaticWidth, + useZebraStyles, + }) => html` { - `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-table`]: () => ({ - isSortable: boolean('Is sortable', false), - locale: text('Locale', 'en'), - size: select('Size', sizes, TABLE_SIZE.LG), - useStaticWidth: boolean('Use static width', false), - useZebraStyles: boolean('Use zebra styles', false), - }), - }, + `, }; -export default { +const meta = { title: 'Components/DataTable/Filtering', parameters: { - ...storyDocs.parameters, + docs: { + page: storyDocs, + }, }, }; + +export default meta; diff --git a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-selection-story.ts b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-selection.stories.ts similarity index 92% rename from web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-selection-story.ts rename to web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-selection.stories.ts index 36c024927734..4062c6147328 100644 --- a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-selection-story.ts +++ b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-selection.stories.ts @@ -8,11 +8,9 @@ */ import { html } from 'lit'; -import { boolean, select, text } from '@storybook/addon-knobs'; -import { prefix } from '../../../globals/settings'; import { TABLE_SIZE } from '../table'; import '../index'; -import storyDocs from './data-table-story.mdx'; +import storyDocs from './data-table.mdx'; const sizes = { [`xs (${TABLE_SIZE.XS})`]: TABLE_SIZE.XS, @@ -22,8 +20,45 @@ const sizes = { [`xl (${TABLE_SIZE.XL})`]: TABLE_SIZE.XL, }; -export const Default = () => { - return html` +const defaultArgs = { + isSortable: false, + locale: 'en', + radio: false, + size: TABLE_SIZE.LG, + useStaticWidth: false, + useZebraStyles: false, +}; + +const controls = { + isSortable: { + control: 'boolean', + description: 'Is sortable', + }, + locale: { + control: 'text', + description: 'Locale', + }, + radio: { + control: 'boolean', + description: 'Radio', + }, + size: { + control: 'radio', + description: 'Size', + options: sizes, + }, + useStaticWidth: { + control: 'boolean', + description: 'Use static width', + }, + useZebraStyles: { + control: 'boolean', + description: 'Use zebra styles', + }, +}; + +export const Default = { + render: () => html` DataTable { - `; + `, }; -export const WithRadioSelection = () => { - return html` - +export const WithRadioSelection = { + render: () => html` + DataTable With selection { - `; + `, }; -export const WithSelectionAndSorting = () => { - return html` +export const WithSelectionAndSorting = { + render: () => html` DataTable { - `; + `, }; -export const Playground = (args) => { - const { isSortable, locale, radio, size, useStaticWidth, useZebraStyles } = - args?.[`${prefix}-table`] ?? {}; - return html` +export const Playground = { + args: defaultArgs, + argTypes: controls, + render: ({ + isSortable, + locale, + radio, + size, + useStaticWidth, + useZebraStyles, + }) => html` { - `; + `, }; -Playground.parameters = { - knobs: { - [`${prefix}-table`]: () => ({ - isSortable: boolean('Is sortable', false), - locale: text('Locale', 'en'), - radio: boolean('Radio', false), - size: select('Size', sizes, TABLE_SIZE.LG), - useStaticWidth: boolean('Use static width', false), - useZebraStyles: boolean('Use zebra styles', false), - }), - }, -}; - -export default { +const meta = { title: 'Components/DataTable/Selection', parameters: { - ...storyDocs.parameters, + docs: { + page: storyDocs, + }, }, }; + +export default meta; diff --git a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-skeleton-story.ts b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-skeleton-story.ts deleted file mode 100644 index 883e3770f66e..000000000000 --- a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-skeleton-story.ts +++ /dev/null @@ -1,63 +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 } from '@storybook/addon-knobs'; -import { prefix } from '../../../globals/settings'; -import storyDocs from './data-table-story.mdx'; -import '../index'; - -const headers = [ - 'Name', - 'Protocol', - 'Port', - 'Rule', - 'Attached groups', - 'Status', -]; - -export const Default = () => { - return html` `; -}; - -export const Playground = (args) => { - const { columnCount, rowCount, showHeader, showToolbar, zebra } = - args?.[`${prefix}-table`] ?? {}; - - return html` - - - `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-table`]: () => ({ - compact: boolean('Compact', false), - columnCount: number('Column count', 5), - rowCount: number('Row count', 5), - showHeader: boolean('Show header', true), - showToolbar: boolean('Show toolbar', true), - zebra: boolean('Use zebra styles', false), - }), - }, -}; - -export default { - title: 'Components/DataTable/Skeleton', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-skeleton.stories.ts b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-skeleton.stories.ts new file mode 100644 index 000000000000..20a9bc1e80be --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-skeleton.stories.ts @@ -0,0 +1,88 @@ +/** + * @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 storyDocs from './data-table.mdx'; +import '../index'; + +const headers = [ + 'Name', + 'Protocol', + 'Port', + 'Rule', + 'Attached groups', + 'Status', +]; + +const defaultArgs = { + compact: false, + columnCount: 5, + rowCount: 5, + showHeader: true, + showToolbar: true, + zebra: false, +}; + +const controls = { + compact: { + control: 'boolean', + description: 'Compact', + }, + columnCount: { + control: 'number', + description: 'Column count', + }, + rowCount: { + control: 'number', + description: 'Row count', + }, + showHeader: { + control: 'boolean', + description: 'Show header', + }, + showToolbar: { + control: 'boolean', + description: 'Show toolbar', + }, + zebra: { + control: 'boolean', + description: 'Use zebra styles', + }, +}; + +export const Default = { + render: () => + html` `, +}; + +export const Playground = { + args: defaultArgs, + argTypes: controls, + render: ({ columnCount, rowCount, showHeader, showToolbar, zebra }) => html` + + + `, +}; + +const meta = { + title: 'Components/DataTable/Skeleton', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta; diff --git a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-sorting-story.ts b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-sorting.stories.ts similarity index 88% rename from web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-sorting-story.ts rename to web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-sorting.stories.ts index b3bd7172c124..2f7bb9d1cd41 100644 --- a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-sorting-story.ts +++ b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-sorting.stories.ts @@ -8,11 +8,9 @@ */ import { html } from 'lit'; -import { boolean, select, text } from '@storybook/addon-knobs'; -import { prefix } from '../../../globals/settings'; import { TABLE_SIZE } from '../table'; import '../index'; -import storyDocs from './data-table-story.mdx'; +import storyDocs from './data-table.mdx'; const sizes = { [`xs (${TABLE_SIZE.XS})`]: TABLE_SIZE.XS, @@ -22,8 +20,40 @@ const sizes = { [`xl (${TABLE_SIZE.XL})`]: TABLE_SIZE.XL, }; -export const Default = () => { - return html` +const defaultArgs = { + isSortable: true, + locale: 'en', + size: TABLE_SIZE.LG, + useStaticWidth: false, + useZebraStyles: false, +}; + +const controls = { + isSortable: { + control: 'boolean', + description: 'Is sortable', + }, + locale: { + control: 'text', + description: 'Locale', + }, + size: { + control: 'radio', + description: 'Size', + options: sizes, + }, + useStaticWidth: { + control: 'boolean', + description: 'Use static width', + }, + useZebraStyles: { + control: 'boolean', + description: 'Use zebra styles', + }, +}; + +export const Default = { + render: () => html` DataTable { - `; + `, }; -export const Playground = (args) => { - const { isSortable, locale, size, useStaticWidth, useZebraStyles } = - args?.[`${prefix}-table`] ?? {}; - return html` +export const Playground = { + args: defaultArgs, + argTypes: controls, + render: ({ + isSortable, + locale, + size, + useStaticWidth, + useZebraStyles, + }) => html` { - `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-table`]: () => ({ - isSortable: boolean('Is sortable', true), - locale: text('Locale', 'en'), - size: select('Size', sizes, TABLE_SIZE.LG), - useStaticWidth: boolean('Use static width', false), - useZebraStyles: boolean('Use zebra styles', false), - }), - }, + `, }; -export default { +const meta = { title: 'Components/DataTable/Sorting', parameters: { - ...storyDocs.parameters, + docs: { + page: storyDocs, + }, }, }; + +export default meta; diff --git a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-toolbar-story.ts b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-toolbar.stories.ts similarity index 81% rename from web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-toolbar-story.ts rename to web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-toolbar.stories.ts index d5808e46f688..9992561f5dc3 100644 --- a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-toolbar-story.ts +++ b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-toolbar.stories.ts @@ -8,13 +8,12 @@ */ import { html } from 'lit'; -import { boolean, select, text } from '@storybook/addon-knobs'; import { prefix } from '../../../globals/settings'; import { TABLE_SIZE } from '../table'; import Settings16 from '@carbon/web-components/es/icons/settings/16'; import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16'; +import storyDocs from './data-table.mdx'; import '../index'; -import storyDocs from './data-table-story.mdx'; const sizes = { [`xs (${TABLE_SIZE.XS})`]: TABLE_SIZE.XS, @@ -24,109 +23,153 @@ const sizes = { [`xl (${TABLE_SIZE.XL})`]: TABLE_SIZE.XL, }; -export const Default = () => { - return html` - - DataTable - With toolbar +const defaultArgs = { + isSortable: false, + locale: 'en', + overflowMenuOnHover: false, + radio: false, + size: TABLE_SIZE.LG, + useStaticWidth: false, + useZebraStyles: false, +}; - - - - - ${Settings16({ - slot: 'icon', - class: `${prefix}--overflow-menu__icon`, - })} - - alert('Alert 1')}> - Action 1 - - alert('Alert 2')}> - Action 2 - - alert('Alert 3')}> - Action 3 - - - - Primary button - - +const controls = { + isSortable: { + control: 'boolean', + description: 'Is sortable', + }, + locale: { + control: 'text', + description: 'Locale', + }, + overflowMenuOnHover: { + control: 'boolean', + description: 'Overflow menu on hover', + }, + radio: { + control: 'boolean', + description: 'Radio', + }, + size: { + control: 'select', + description: 'Size', + options: sizes, + }, + useStaticWidth: { + control: 'boolean', + description: 'Use static width', + }, + useZebraStyles: { + control: 'boolean', + description: 'Use zebra styles', + }, +}; - - - Name - Protocol - Port - Rule - Attached groups - Status - - - - - Load Balancer 3 - HTTP - 3000 - Round robin - Kevin's VM Groups - Disabled - - - Load Balancer 1 - HTTP - 443 - Round robin - Maureen's VM Groups - Starting - - - Load Balancer 2 - HTTP - 80 - DNS delegation - Andrew's VM Groups - Active - - - Load Balancer 6 - HTTP - 3000 - Round robin - Marc's VM Groups - Disabled - - - Load Balancer 4 - HTTP - 443 - Round robin - Mel's VM Groups - Starting - - - Load Balancer 5 - HTTP - 80 - DNS delegation - Ronja's VM Groups - Active - - - - `; +export const Default = { + render: () => { + return html` + + DataTable + With toolbar + + + + + + ${Settings16({ + slot: 'icon', + class: `${prefix}--overflow-menu__icon`, + })} + + alert('Alert 1')}> + Action 1 + + alert('Alert 2')}> + Action 2 + + alert('Alert 3')}> + Action 3 + + + + Primary button + + + + + + Name + Protocol + Port + Rule + Attached groups + Status + + + + + Load Balancer 3 + HTTP + 3000 + Round robin + Kevin's VM Groups + Disabled + + + Load Balancer 1 + HTTP + 443 + Round robin + Maureen's VM Groups + Starting + + + Load Balancer 2 + HTTP + 80 + DNS delegation + Andrew's VM Groups + Active + + + Load Balancer 6 + HTTP + 3000 + Round robin + Marc's VM Groups + Disabled + + + Load Balancer 4 + HTTP + 443 + Round robin + Mel's VM Groups + Starting + + + Load Balancer 5 + HTTP + 80 + DNS delegation + Ronja's VM Groups + Active + + + + `; + }, }; -export const PersistentToolbar = () => { - return html` +export const PersistentToolbar = { + render: () => html` DataTable { - `; + `, }; -export const SmallPersistentToolbar = () => { - return html` +export const SmallPersistentToolbar = { + render: () => html` DataTable { - `; + `, }; -export const WithOverflowMenu = () => { - return html` +export const WithOverflowMenu = { + render: () => html` DataTable { - `; + `, }; -export const Playground = (args) => { - const { +export const Playground = { + args: defaultArgs, + argTypes: controls, + + render: ({ isSortable, locale, radio, @@ -506,8 +552,7 @@ export const Playground = (args) => { size, useStaticWidth, useZebraStyles, - } = args?.[`${prefix}-table`] ?? {}; - return html` + }) => html` { - `; + `, }; -Playground.parameters = { - knobs: { - [`${prefix}-table`]: () => ({ - isSortable: boolean('Is sortable', false), - locale: text('Locale', 'en'), - overflowMenuOnHover: boolean('Overflow menu on hover', false), - radio: boolean('Radio', false), - size: select('Size', sizes, TABLE_SIZE.LG), - useStaticWidth: boolean('Use static width', false), - useZebraStyles: boolean('Use zebra styles', false), - }), - }, -}; - -export default { +const meta = { title: 'Components/DataTable/Toolbar', parameters: { - ...storyDocs.parameters, + docs: { + page: storyDocs, + }, }, }; + +export default meta; diff --git a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-story.mdx b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table.mdx similarity index 96% rename from web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-story.mdx rename to web-components/packages/carbon-web-components/src/components/data-table/stories/data-table.mdx index 1081f4df8c56..72703f2b98cd 100644 --- a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-story.mdx +++ b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn'; # Data table @@ -51,8 +51,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/data-table/index.js'; ``` - - +{`${cdnJs({ components: ['data-table'] })}`} +{`${cdnCss()}`} ### HTML @@ -562,48 +562,48 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ### `` - + ### `` - + ### `` - + ### `` - + ### `` - + ### `` - + ### ` + ### `` - + ### `` - + ### `` - + ### `` - + ### `cds-table-skeleton` - + diff --git a/web-components/packages/carbon-web-components/src/components/data-table/table-row.ts b/web-components/packages/carbon-web-components/src/components/data-table/table-row.ts index 38c8c6761315..d30a2225542e 100644 --- a/web-components/packages/carbon-web-components/src/components/data-table/table-row.ts +++ b/web-components/packages/carbon-web-components/src/components/data-table/table-row.ts @@ -19,6 +19,8 @@ import HostListener from '../../globals/decorators/host-listener'; import HostListenerMixin from '../../globals/mixins/host-listener'; import CDSTableExpandedRow from './table-expanded-row'; import CDSTableCell from './table-cell'; +import '../checkbox'; +import '../radio-button'; /** * Data table row. diff --git a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader.mdx b/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader.mdx index ec698c2ca0e7..6f5ec6f52669 100644 --- a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader.mdx +++ b/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import * as FileUploaderStories from './file-uploader.stories'; @@ -25,8 +25,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/file-uploader/index.js'; ``` - - +{`${cdnJs({ components: ['file-uploader'] })}`} +{`${cdnCss()}`} ### HTML diff --git a/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.ts b/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.ts deleted file mode 100644 index b1462d93b1f7..000000000000 --- a/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.ts +++ /dev/null @@ -1,66 +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, text } from '@storybook/addon-knobs'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { INLINE_LOADING_STATE } from './inline-loading'; -import storyDocs from './inline-loading-story.mdx'; -import { prefix } from '../../globals/settings'; - -const states = { - [`Inactive (${INLINE_LOADING_STATE.INACTIVE})`]: - INLINE_LOADING_STATE.INACTIVE, - [`Active (${INLINE_LOADING_STATE.ACTIVE})`]: INLINE_LOADING_STATE.ACTIVE, - [`Finished (${INLINE_LOADING_STATE.FINISHED})`]: - INLINE_LOADING_STATE.FINISHED, - [`Failed (${INLINE_LOADING_STATE.ERROR})`]: INLINE_LOADING_STATE.ERROR, -}; - -export const Default = () => - html`Loading data...`; - -export default { - title: 'Components/Inline loading', - parameters: { ...storyDocs.parameters }, -}; - -export const Playground = (args) => { - const { assistiveText, description, status } = - args?.[`${prefix}-inline-loading`] ?? {}; - return html` - - ${description} - - `; -}; - -Playground.parameters = { - ...storyDocs.parameters, - percy: { skip: true }, - knobs: { - [`${prefix}-inline-loading`]: () => ({ - description: text( - 'Description (description) - Specify the description for the inline loading text', - 'Loading data...' - ), - assistiveText: text( - 'Assistive text (assistive-text) - Specify a description that would be used to best describe the loading state', - 'Loading' - ), - status: select( - 'Loading status (status)', - states, - INLINE_LOADING_STATE.ACTIVE - ), - }), - }, -}; diff --git a/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.mdx b/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading.mdx similarity index 82% rename from web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.mdx rename to web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading.mdx index f8ba29221678..e15df102c9fb 100644 --- a/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.mdx +++ b/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading.mdx @@ -1,5 +1,8 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as InlineLoadingStories from './inline-loading.stories'; + + # Inline loading @@ -30,8 +33,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/inline-loading/index.js'; ``` - - +{`${cdnJs({ components: ['inline-loading'] })}`} +{`${cdnCss()}`} ### HTML @@ -41,4 +44,4 @@ import '@carbon/web-components/es/components/inline-loading/index.js'; ## `` attributes and properties - + diff --git a/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading.stories.ts b/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading.stories.ts new file mode 100644 index 000000000000..b2017dae706f --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading.stories.ts @@ -0,0 +1,73 @@ +/** + * @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 { INLINE_LOADING_STATE } from './inline-loading'; +import storyDocs from './inline-loading.mdx'; + +const states = { + [`Inactive (${INLINE_LOADING_STATE.INACTIVE})`]: + INLINE_LOADING_STATE.INACTIVE, + [`Active (${INLINE_LOADING_STATE.ACTIVE})`]: INLINE_LOADING_STATE.ACTIVE, + [`Finished (${INLINE_LOADING_STATE.FINISHED})`]: + INLINE_LOADING_STATE.FINISHED, + [`Failed (${INLINE_LOADING_STATE.ERROR})`]: INLINE_LOADING_STATE.ERROR, +}; + +const defaultArgs = { + description: 'Loading data...', + assistiveText: 'Loading', + status: INLINE_LOADING_STATE.ACTIVE, +}; + +const controls = { + description: { + control: 'text', + description: 'Specify the description for the inline loading text.', + }, + assistiveText: { + control: 'text', + description: + 'Specify a description that would be used to best describe the loading state.', + }, + status: { + control: 'select', + description: 'Specify the loading status.', + options: states, + }, +}; + +export const Default = { + render: () => html`Loading data...`, +}; + +export const Playground = { + args: defaultArgs, + argTypes: controls, + parameters: { + percy: { skip: true }, + }, + render: ({ assistiveText, description, status }) => + html` + + ${description} + + `, +}; + +const meta = { + title: 'Components/Inline loading', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta; diff --git a/web-components/packages/carbon-web-components/src/components/link/link.mdx b/web-components/packages/carbon-web-components/src/components/link/link.mdx index 9fb784f106e2..af00b41745a4 100644 --- a/web-components/packages/carbon-web-components/src/components/link/link.mdx +++ b/web-components/packages/carbon-web-components/src/components/link/link.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 LinkStories from './link.stories'; @@ -25,8 +25,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/list/index.js'; ``` - - +{`${cdnJs({ components: ['list'] })}`} +{`${cdnCss()}`} ### HTML diff --git a/web-components/packages/carbon-web-components/src/components/list/list-story.mdx b/web-components/packages/carbon-web-components/src/components/list/list.mdx similarity index 91% rename from web-components/packages/carbon-web-components/src/components/list/list-story.mdx rename to web-components/packages/carbon-web-components/src/components/list/list.mdx index f5b566f15f47..e4041bf78479 100644 --- a/web-components/packages/carbon-web-components/src/components/list/list-story.mdx +++ b/web-components/packages/carbon-web-components/src/components/list/list.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # List @@ -21,8 +21,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/list/index.js'; ``` - - +{`${cdnJs({ components: ['list'] })}`} +{`${cdnCss()}`} ### HTML @@ -74,4 +74,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `nested` attribute). - + diff --git a/web-components/packages/carbon-web-components/src/components/list/ordered-list-story.ts b/web-components/packages/carbon-web-components/src/components/list/ordered-list-story.ts deleted file mode 100644 index e594074ec914..000000000000 --- a/web-components/packages/carbon-web-components/src/components/list/ordered-list-story.ts +++ /dev/null @@ -1,120 +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 './ordered-list'; -import './list-item'; -import { boolean } from '@storybook/addon-knobs'; -import storyDocs from './list-story.mdx'; -import { prefix } from '../../globals/settings'; - -export const Default = () => html` - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 -`; - -export default { - title: 'Components/Ordered List', -}; - -export const NativeListStyles = () => html` - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - - Ordered List level 1 - - Ordered List level 2 - Ordered List level 2 - Ordered List level 2 - Ordered List level 2 - - - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 -`; - -export const Nested = () => html` - - Ordered List level 1 - - Ordered List level 2 - - Ordered List level 2 - - Ordered List level 3 - Ordered List level 3 - - - - - Ordered List level 1 - Ordered List level 1 -`; - -export const Playground = (args) => { - const { isExpressive, native } = args?.[`${prefix}-list`] ?? {}; - return html` - - - Ordered List level 1 - - Ordered List level 2 - - Ordered List level 2 - - Ordered List level 2 - Ordered List level 2 - - - - - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - - - `; -}; - -Playground.parameters = { - ...storyDocs.parameters, - knobs: { - [`${prefix}-list`]: () => ({ - isExpressive: boolean('Expressive (isExpressive)', false), - native: boolean('Native (native)', false), - }), - }, -}; diff --git a/web-components/packages/carbon-web-components/src/components/list/ordered-list.stories.ts b/web-components/packages/carbon-web-components/src/components/list/ordered-list.stories.ts new file mode 100644 index 000000000000..6771ae556a4e --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/list/ordered-list.stories.ts @@ -0,0 +1,138 @@ +/** + * @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 storyDocs from './list.mdx'; +import './index'; + +const defaultArgs = { + isExpressive: false, + native: true, +}; + +const controls = { + isExpressive: { + control: 'boolean', + description: 'Specify whether this ordered list expressive or not.', + }, + native: { + control: 'boolean', + description: + 'Specify whether this ordered list should use native list styles instead of custom counter.', + }, +}; + +export const Default = { + render: () => html` + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + `, +}; + +export const NativeListStyles = { + render: () => html` + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + + Ordered List level 1 + + Ordered List level 2 + Ordered List level 2 + Ordered List level 2 + Ordered List level 2 + + + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + `, +}; + +export const Nested = { + render: () => html` + + Ordered List level 1 + + Ordered List level 2 + + Ordered List level 2 + + Ordered List level 3 + Ordered List level 3 + + + + + Ordered List level 1 + Ordered List level 1 + `, +}; + +export const Playground = { + args: defaultArgs, + argTypes: controls, + render: ({ isExpressive, native }) => html` + + + Ordered List level 1 + + Ordered List level 2 + + Ordered List level 2 + + Ordered List level 2 + Ordered List level 2 + + + + + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + Ordered List level 1 + + + `, +}; + +const meta = { + title: 'Components/Ordered list', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta; diff --git a/web-components/packages/carbon-web-components/src/components/list/unordered-list-story.ts b/web-components/packages/carbon-web-components/src/components/list/unordered-list-story.ts deleted file mode 100644 index d37874cf2684..000000000000 --- a/web-components/packages/carbon-web-components/src/components/list/unordered-list-story.ts +++ /dev/null @@ -1,75 +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 './unordered-list'; -import './list-item'; -import { boolean } from '@storybook/addon-knobs'; -import storyDocs from './list-story.mdx'; -import { prefix } from '../../globals/settings'; - -export const Default = () => html` - Unordered List level 1 - Unordered List level 1 - Unordered List level 1 -`; - -export default { - title: 'Components/Unordered List', -}; - -export const Nested = () => html` - - Unordered List level 1 - - Unordered List level 2 - - Unordered List level 2 - - Unordered List level 3 - Unordered List level 3 - - - - - Unordered List level 1 - Unordered List level 1 -`; - -export const Playground = (args) => { - const { isExpressive } = args?.[`${prefix}-list`] ?? {}; - return html` - - - Unordered List level 1 - - Unordered List level 2 - - Unordered List level 2 - - Unordered List level 2 - Unordered List level 2 - - - - - Unordered List level 1 - Unordered List level 1 - - `; -}; - -Playground.parameters = { - ...storyDocs.parameters, - knobs: { - [`${prefix}-list`]: () => ({ - isExpressive: boolean('Expressive (isExpressive)', false), - }), - }, -}; diff --git a/web-components/packages/carbon-web-components/src/components/list/unordered-list.stories.ts b/web-components/packages/carbon-web-components/src/components/list/unordered-list.stories.ts new file mode 100644 index 000000000000..21d42b8ea365 --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/list/unordered-list.stories.ts @@ -0,0 +1,87 @@ +/** + * @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 storyDocs from './list.mdx'; +import './index'; + +const defaultArgs = { + isExpressive: false, +}; + +const controls = { + isExpressive: { + control: 'boolean', + description: 'Specify whether this ordered list expressive or not.', + }, +}; + +export const Default = { + render: () => html` + Unordered List level 1 + Unordered List level 1 + Unordered List level 1 + `, +}; + +export const Nested = { + render: () => html` + + Unordered List level 1 + + Unordered List level 2 + + Unordered List level 2 + + Unordered List level 3 + Unordered List level 3 + + + + + Unordered List level 1 + Unordered List level 1 + `, +}; + +export const Playground = { + args: defaultArgs, + argTypes: controls, + + render: ({ isExpressive }) => html` + + + Unordered List level 1 + + Unordered List level 2 + + Unordered List level 2 + + Unordered List level 2 + Unordered List level 2 + + + + + Unordered List level 1 + Unordered List level 1 + + `, +}; + +const meta = { + title: 'Components/Unordered list', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta; diff --git a/web-components/packages/carbon-web-components/src/components/loading/loading-story.ts b/web-components/packages/carbon-web-components/src/components/loading/loading-story.ts deleted file mode 100644 index 30a6337f0f88..000000000000 --- a/web-components/packages/carbon-web-components/src/components/loading/loading-story.ts +++ /dev/null @@ -1,54 +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, select, text } from '@storybook/addon-knobs'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { LOADING_TYPE } from './loading'; -import storyDocs from './loading-story.mdx'; -import { prefix } from '../../globals/settings'; - -const types = { - [`Regular (${LOADING_TYPE.REGULAR})`]: null, - [`Small (${LOADING_TYPE.SMALL})`]: LOADING_TYPE.SMALL, -}; - -export const Default = () => html` `; - -export default { - title: 'Components/Loading', - parameters: { ...storyDocs.parameters }, -}; - -export const Playground = (args) => { - const { inactive, assistiveText, type, withOverlay } = - args?.[`${prefix}-loading`] ?? {}; - return html` - - `; -}; - -Playground.parameters = { - ...storyDocs.parameters, - knobs: { - [`${prefix}-loading`]: () => ({ - inactive: boolean('Inactive (inactive)', false), - assistiveText: text( - 'Assistive text (assistive-text) - Specify a description that would be used to best describe the loading state', - 'Loading' - ), - type: select('The spinner type (type)', types, null), - withOverlay: boolean('With overlay (withOverlay)', false), - }), - }, -}; diff --git a/web-components/packages/carbon-web-components/src/components/loading/loading-story.mdx b/web-components/packages/carbon-web-components/src/components/loading/loading.mdx similarity index 83% rename from web-components/packages/carbon-web-components/src/components/loading/loading-story.mdx rename to web-components/packages/carbon-web-components/src/components/loading/loading.mdx index 6765f136dcda..31883edbfc8c 100644 --- a/web-components/packages/carbon-web-components/src/components/loading/loading-story.mdx +++ b/web-components/packages/carbon-web-components/src/components/loading/loading.mdx @@ -1,5 +1,8 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as LoadingStories from './loading.stories'; + + # Loading @@ -25,8 +28,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/loading/index.js'; ``` - - +{`${cdnJs({ components: ['loading'] })}`} +{`${cdnCss()}`} ### HTML @@ -42,4 +45,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `inactive` attribute). - + diff --git a/web-components/packages/carbon-web-components/src/components/loading/loading.stories.ts b/web-components/packages/carbon-web-components/src/components/loading/loading.stories.ts new file mode 100644 index 000000000000..7ccfb14b2be3 --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/loading/loading.stories.ts @@ -0,0 +1,73 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { LOADING_TYPE } from './loading'; +import storyDocs from './loading.mdx'; + +const types = { + [`Regular (${LOADING_TYPE.REGULAR})`]: null, + [`Small (${LOADING_TYPE.SMALL})`]: LOADING_TYPE.SMALL, +}; + +const defaultArgs = { + inactive: false, + assistiveText: 'Loading', + type: null, + withOverlay: false, +}; + +const controls = { + inactive: { + control: 'boolean', + description: `Specify whether the component should be inactive, or not.`, + }, + assistiveText: { + control: 'text', + description: `Specify a description that would be used to best describe the loading state.`, + }, + type: { + control: 'radio', + options: types, + description: `Specify the spinner type.`, + }, + withOverlay: { + control: 'boolean', + description: `Specify whether the loading should be an overlay.`, + }, +}; + +export const Default = { + render: () => html` `, +}; + +export const Playground = { + args: defaultArgs, + argTypes: controls, + render: ({ inactive, assistiveText, type, withOverlay }) => + html` + + `, +}; + +const meta = { + title: 'Components/Loading', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta; diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-story.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-story.ts deleted file mode 100644 index 8c7dc0abd55c..000000000000 --- a/web-components/packages/carbon-web-components/src/components/modal/modal-story.ts +++ /dev/null @@ -1,392 +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, select, text } from '@storybook/addon-knobs'; -import '../button/button'; -import { MODAL_SIZE } from './modal'; -import './index'; -import storyDocs from './modal-story.mdx'; - -const toggleButton = () => { - document.querySelector('cds-modal')?.toggleAttribute('open'); -}; - -const sizes = { - [`Extra small size (${MODAL_SIZE.EXTRA_SMALL})`]: MODAL_SIZE.EXTRA_SMALL, - [`Small size (${MODAL_SIZE.SMALL})`]: MODAL_SIZE.SMALL, - [`Medium size (${MODAL_SIZE.MEDIUM})`]: MODAL_SIZE.MEDIUM, - [`Large size (${MODAL_SIZE.LARGE})`]: MODAL_SIZE.LARGE, -}; - -const buttons = { - 'One (1)': 1, - 'Two (2)': 2, - 'Three (3)': 3, -}; - -export const Default = () => { - return html` - - - - Account resources - Add a custom domain - - - - Custom domains direct requests for your apps in this Cloud Foundry - organization to a URL that you own. A custom domain can be a shared - domain, a shared subdomain, or a shared domain and host. - - - - - - - - - US South - US East - - - - - One - Two - - - - Option 1 - Option 2 - - - - Cancel - Add - - - `; -}; - -export const DangerModal = () => { - return html` - - - - Account resources - Are you sure you want to delete this custom - domain? - - - Cancel - Delete - - - `; -}; - -export const FullWidth = () => { - return html` - - - - An example of a modal with no padding - Full Width Modal - - - - - - Column A - Column B - Column C - - - - - Row 1 - Row 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc - dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean - posuere sem vel euismod dignissim. Nulla ut cursus dolor. - Pellentesque vulputate nisl a porttitor interdum. - - - - Row 2 - Row 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc - dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean - posuere sem vel euismod dignissim. Nulla ut cursus dolor. - Pellentesque vulputate nisl a porttitor interdum. - - - - Row 3 - Row 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc - dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean - posuere sem vel euismod dignissim. Nulla ut cursus dolor. - Pellentesque vulputate nisl a porttitor interdum. - - - - - - - Cancel - Add - - - `; -}; - -export const PassiveModal = () => { - return html` - - - - You have been successfully signed out - - - - `; -}; - -export const WithStateManager = () => { - return html` - - - - Account resources - Add a custom domain - - - - Custom domains direct requests for your apps in this Cloud Foundry - organization to a URL that you own. A custom domain can be a shared - domain, a shared subdomain, or a shared domain and host. - - - - - - - Option 1 - Option 2 - - - - Cancel - Add - - - Launch modal - `; -}; - -export const Playground = (args) => { - const { - alert, - ariaLabel, - danger, - open, - closeButtonLabel, - hasScrollingContent, - fullWidth, - modalHeading, - modalLabel, - numberOfButtons, - passiveModal, - preventCloseOnClickOutside, - primaryButtonDisabled, - size, - } = args?.['cds-modal'] ?? {}; - return html` - - - - ${modalLabel} - ${modalHeading} - - - - Custom domains direct requests for your apps in this Cloud Foundry - organization to a URL that you own. A custom domain can be a shared - domain, a shared subdomain, or a shared domain and host. - - - - - - - Option 1 - Option 2 - - - ${hasScrollingContent - ? html` - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean - id accumsan augue. Phasellus consequat augue vitae tellus - tincidunt posuere. Curabitur justo urna, consectetur vel elit - iaculis, ultrices condimentum risus. Nulla facilisi. Etiam - venenatis molestie tellus. Quisque consectetur non risus eu - rutrum. - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean - id accumsan augue. Phasellus consequat augue vitae tellus - tincidunt posuere. Curabitur justo urna, consectetur vel elit - iaculis, ultrices condimentum risus. Nulla facilisi. Etiam - venenatis molestie tellus. Quisque consectetur non risus eu - rutrum. - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean - id accumsan augue. Phasellus consequat augue vitae tellus - tincidunt posuere. Curabitur justo urna, consectetur vel elit - iaculis, ultrices condimentum risus. Nulla facilisi. Etiam - venenatis molestie tellus. Quisque consectetur non risus eu - rutrum. - -

Lorem ipsum

- - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean - id accumsan augue. Phasellus consequat augue vitae tellus - tincidunt posuere. Curabitur justo urna, consectetur vel elit - iaculis, ultrices condimentum risus. Nulla facilisi. Etiam - venenatis molestie tellus. Quisque consectetur non risus eu - rutrum. - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean - id accumsan augue. Phasellus consequat augue vitae tellus - tincidunt posuere. Curabitur justo urna, consectetur vel elit - iaculis, ultrices condimentum risus. Nulla facilisi. Etiam - venenatis molestie tellus. Quisque consectetur non risus eu - rutrum. - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean - id accumsan augue. Phasellus consequat augue vitae tellus - tincidunt posuere. Curabitur justo urna, consectetur vel elit - iaculis, ultrices condimentum risus. Nulla facilisi. Etiam - venenatis molestie tellus. Quisque consectetur non risus eu - rutrum. - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean - id accumsan augue. Phasellus consequat augue vitae tellus - tincidunt posuere. Curabitur justo urna, consectetur vel elit - iaculis, ultrices condimentum risus. Nulla facilisi. Etiam - venenatis molestie tellus. Quisque consectetur non risus eu - rutrum. - ` - : ``} - - - ${passiveModal - ? `` - : html` - ${numberOfButtons > 2 - ? html` Keep both` - : ``} - ${numberOfButtons >= 2 - ? html` ${numberOfButtons === 2 - ? html`Cancel` - : 'Rename'}` - : ``} - - Add - `} - - `; -}; - -Playground.parameters = { - ...storyDocs.parameters, - knobs: { - 'cds-modal': () => ({ - alert: boolean('Alert (alert)', false), - ariaLabel: text('Aria label (aria-label)', ''), - closeButtonLabel: text( - 'Close button label (close-button-label)', - 'Close' - ), - danger: boolean('Danger mode (danger)', false), - fullWidth: boolean('Full width (full-width)', false), - hasScrollingContent: boolean( - 'Has scrolling content (has-scrolling-content)', - false - ), - modalHeading: text('Modal heading', 'Add a custom domain'), - modalLabel: text('Modal label', ''), - numberOfButtons: select('Number of buttons', buttons, 2), - open: boolean('Open (open)', true), - passiveModal: boolean('Passive modal (passive-modal)', false), - preventCloseOnClickOutside: boolean( - 'Prevent close on click outside', - false - ), - primaryButtonDisabled: boolean('Primary button disabled', false), - size: select('Modal size (size)', sizes, null), - }), - }, -}; - -export default { - title: 'Components/Modal', - decorators: [(story) => html` ${story()} `], - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-story.mdx b/web-components/packages/carbon-web-components/src/components/modal/modal.mdx similarity index 95% rename from web-components/packages/carbon-web-components/src/components/modal/modal-story.mdx rename to web-components/packages/carbon-web-components/src/components/modal/modal.mdx index d774aa5f5104..a98b039a7f63 100644 --- a/web-components/packages/carbon-web-components/src/components/modal/modal-story.mdx +++ b/web-components/packages/carbon-web-components/src/components/modal/modal.mdx @@ -1,6 +1,10 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as ModalStories from './modal.stories'; + + + # Modal > 💡 Check our @@ -36,8 +40,8 @@ import '@carbon/web-components/es/components/modal/index.js'; import '@carbon/web-components/es/components/button/index.js'; ``` - - +{`${cdnJs({ components: ['modal', 'button'] })}`} +{`${cdnCss()}`} ### HTML @@ -74,7 +78,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `open` attribute). - + ## `` attributes and properties @@ -82,7 +86,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `disabled` attribute). - + ## Opening/closing modal diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal.stories.ts b/web-components/packages/carbon-web-components/src/components/modal/modal.stories.ts new file mode 100644 index 000000000000..28377ae89ad0 --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/modal/modal.stories.ts @@ -0,0 +1,445 @@ +/** + * @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 '../structured-list'; +import { MODAL_SIZE } from './modal'; +import './index'; +import storyDocs from './modal.mdx'; + +const toggleButton = () => { + document.querySelector('cds-modal')?.toggleAttribute('open'); +}; + +const sizes = { + [`Extra small size (${MODAL_SIZE.EXTRA_SMALL})`]: MODAL_SIZE.EXTRA_SMALL, + [`Small size (${MODAL_SIZE.SMALL})`]: MODAL_SIZE.SMALL, + [`Medium size (${MODAL_SIZE.MEDIUM})`]: MODAL_SIZE.MEDIUM, + [`Large size (${MODAL_SIZE.LARGE})`]: MODAL_SIZE.LARGE, +}; + +const buttons = { + 'One (1)': 1, + 'Two (2)': 2, + 'Three (3)': 3, +}; + +const defaultArgs = { + alert: false, + ariaLabel: '', + closeButtonLabel: 'Close', + danger: false, + fullWidth: false, + hasScrollingContent: false, + modalHeading: 'Add a custom domain', + modalLabel: '', + numberOfButtons: 2, + open: true, + passiveModal: false, + preventCloseOnClickOutside: false, + primaryButtonDisabled: false, + size: null, +}; + +const controls = { + alert: { + control: 'boolean', + description: + 'Specify whether the Modal is displaying an alert, error or warning Should go hand in hand with the danger prop.', + }, + ariaLabel: { + control: 'text', + description: 'Required props for the accessibility label of the header.', + }, + closeButtonLabel: { + control: 'text', + description: 'Required props for the accessibility label of the header.', + }, + danger: { + control: 'boolean', + description: 'Specify whether the Modal is for dangerous actions.', + }, + fullWidth: { + control: 'boolean', + description: + 'Specify whether or not the Modal content should have any inner padding.', + }, + hasScrollingContent: { + control: 'boolean', + description: 'Specify whether the modal contains scrolling content.', + }, + modalHeading: { + control: 'text', + description: 'Specify the content of the modal header title.', + }, + modalLabel: { + control: 'text', + description: 'Specify the content of the modal header label.', + }, + numberOfButtons: { + control: 'radio', + description: 'Count of Footer Buttons', + options: buttons, + }, + open: { + control: 'boolean', + description: 'Specify whether the modal is currently open.', + }, + passiveModal: { + control: 'boolean', + description: 'Specify whether the Modal should be passive, or not.', + }, + preventCloseOnClickOutside: { + control: 'boolean', + description: 'Prevent close on click outside.', + }, + primaryButtonDisabled: { + control: 'boolean', + description: 'Primary button disabled.', + }, + size: { + control: 'select', + description: 'Modal size.', + options: sizes, + }, +}; + +export const Default = { + render: () => html` + + + + Account resources + Add a custom domain + + + + Custom domains direct requests for your apps in this Cloud Foundry + organization to a URL that you own. A custom domain can be a shared + domain, a shared subdomain, or a shared domain and host. + + + + + + + + + US South + US East + + + + + One + Two + + + + Option 1 + Option 2 + + + + Cancel + Add + + + `, +}; + +export const DangerModal = { + render: () => html` + + + + Account resources + Are you sure you want to delete this custom + domain? + + + Cancel + Delete + + + `, +}; + +export const FullWidth = { + render: () => html` + + + + An example of a modal with no padding + Full Width Modal + + + + + + Column A + Column B + Column C + + + + + Row 1 + Row 1 + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc + dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean + posuere sem vel euismod dignissim. Nulla ut cursus dolor. + Pellentesque vulputate nisl a porttitor interdum. + + + + Row 2 + Row 2 + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc + dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean + posuere sem vel euismod dignissim. Nulla ut cursus dolor. + Pellentesque vulputate nisl a porttitor interdum. + + + + Row 3 + Row 3 + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc + dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean + posuere sem vel euismod dignissim. Nulla ut cursus dolor. + Pellentesque vulputate nisl a porttitor interdum. + + + + + + + Cancel + Add + + + `, +}; + +export const PassiveModal = { + render: () => html` + + + + You have been successfully signed out + + + + `, +}; + +export const WithStateManager = { + render: () => html` + + + + Account resources + Add a custom domain + + + + Custom domains direct requests for your apps in this Cloud Foundry + organization to a URL that you own. A custom domain can be a shared + domain, a shared subdomain, or a shared domain and host. + + + + + + + Option 1 + Option 2 + + + + Cancel + Add + + + Launch modal + `, +}; + +export const Playground = { + args: defaultArgs, + argTypes: controls, + render: ({ + alert, + ariaLabel, + danger, + open, + closeButtonLabel, + hasScrollingContent, + fullWidth, + modalHeading, + modalLabel, + numberOfButtons, + passiveModal, + preventCloseOnClickOutside, + primaryButtonDisabled, + size, + }) => + html` + + + + ${modalLabel} + ${modalHeading} + + + + Custom domains direct requests for your apps in this Cloud Foundry + organization to a URL that you own. A custom domain can be a shared + domain, a shared subdomain, or a shared domain and host. + + + + + + + Option 1 + Option 2 + + + ${hasScrollingContent + ? html` + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean id accumsan augue. Phasellus consequat augue vitae + tellus tincidunt posuere. Curabitur justo urna, consectetur + vel elit iaculis, ultrices condimentum risus. Nulla facilisi. + Etiam venenatis molestie tellus. Quisque consectetur non risus + eu rutrum. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean id accumsan augue. Phasellus consequat augue vitae + tellus tincidunt posuere. Curabitur justo urna, consectetur + vel elit iaculis, ultrices condimentum risus. Nulla facilisi. + Etiam venenatis molestie tellus. Quisque consectetur non risus + eu rutrum. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean id accumsan augue. Phasellus consequat augue vitae + tellus tincidunt posuere. Curabitur justo urna, consectetur + vel elit iaculis, ultrices condimentum risus. Nulla facilisi. + Etiam venenatis molestie tellus. Quisque consectetur non risus + eu rutrum. + +

Lorem ipsum

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean id accumsan augue. Phasellus consequat augue vitae + tellus tincidunt posuere. Curabitur justo urna, consectetur + vel elit iaculis, ultrices condimentum risus. Nulla facilisi. + Etiam venenatis molestie tellus. Quisque consectetur non risus + eu rutrum. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean id accumsan augue. Phasellus consequat augue vitae + tellus tincidunt posuere. Curabitur justo urna, consectetur + vel elit iaculis, ultrices condimentum risus. Nulla facilisi. + Etiam venenatis molestie tellus. Quisque consectetur non risus + eu rutrum. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean id accumsan augue. Phasellus consequat augue vitae + tellus tincidunt posuere. Curabitur justo urna, consectetur + vel elit iaculis, ultrices condimentum risus. Nulla facilisi. + Etiam venenatis molestie tellus. Quisque consectetur non risus + eu rutrum. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean id accumsan augue. Phasellus consequat augue vitae + tellus tincidunt posuere. Curabitur justo urna, consectetur + vel elit iaculis, ultrices condimentum risus. Nulla facilisi. + Etiam venenatis molestie tellus. Quisque consectetur non risus + eu rutrum. + ` + : ``} + + + ${passiveModal + ? `` + : html` + ${numberOfButtons > 2 + ? html` Keep both` + : ``} + ${numberOfButtons >= 2 + ? html` ${numberOfButtons === 2 + ? html`Cancel` + : 'Rename'}` + : ``} + + Add + `} + + `, +}; + +const meta = { + title: 'Components/Modal', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta; diff --git a/web-components/packages/carbon-web-components/tests/spec/checkbox_spec.ts b/web-components/packages/carbon-web-components/tests/spec/checkbox_spec.ts index 88808ad3040b..d44aa61f6d6e 100644 --- a/web-components/packages/carbon-web-components/tests/spec/checkbox_spec.ts +++ b/web-components/packages/carbon-web-components/tests/spec/checkbox_spec.ts @@ -8,7 +8,7 @@ */ import { html, render } from 'lit'; -import { Playground as Default } from '../../src/components/checkbox/checkbox-story'; +import { Playground as Default } from '../../src/components/checkbox/checkbox.stories'; /** * @param formData A `FormData` instance. diff --git a/web-components/packages/carbon-web-components/tests/spec/data-table_spec.ts b/web-components/packages/carbon-web-components/tests/spec/data-table_spec.ts index d78594227d48..56ceb5df7a68 100644 --- a/web-components/packages/carbon-web-components/tests/spec/data-table_spec.ts +++ b/web-components/packages/carbon-web-components/tests/spec/data-table_spec.ts @@ -18,7 +18,7 @@ import CDSTableHeaderCell, { import CDSTableRow from '../../src/components/data-table/table-row'; import CDSTableExpandedRow from '../../src/components/data-table/table-expanded-row'; import CDSTableToolbarSearch from '../../src/components/data-table/table-toolbar-search'; -import { Playground } from '../../src/components/data-table/stories/data-table-basic-story'; +import { Playground } from '../../src/components/data-table/stories/data-table-basic.stories'; const template = ({ ...rest } = {}) => Playground({ diff --git a/web-components/packages/carbon-web-components/tests/spec/inline-loading_spec.ts b/web-components/packages/carbon-web-components/tests/spec/inline-loading_spec.ts index 5da912e7d42e..e40fb006a8dc 100644 --- a/web-components/packages/carbon-web-components/tests/spec/inline-loading_spec.ts +++ b/web-components/packages/carbon-web-components/tests/spec/inline-loading_spec.ts @@ -12,7 +12,7 @@ import { render } from 'lit'; import CDSInlineLoading, { INLINE_LOADING_STATE, } from '../../src/components/inline-loading/inline-loading'; -import { Playground } from '../../src/components/inline-loading/inline-loading-story'; +import { Playground } from '../../src/components/inline-loading/inline-loading.stories'; const template = (props?) => Playground({