From 4f318983fb2717d1f144b959f84329275203d141 Mon Sep 17 00:00:00 2001 From: Matthew Oliveira Date: Thu, 18 Jan 2024 13:21:55 -0500 Subject: [PATCH 1/4] feat(slug): update story to Storybook v7 (#11384) * chore(slug): update slug stories to sb v7 * chore(slug): update slug example stories to sb v7 * chore(slug): update slug data table stories to sb v7 * chore(slug): update slug form stories to sb v7 --- .../carbon-web-components/.storybook/main.ts | 5 + .../components/slug/slug-data-table-story.ts | 600 ---------------- .../slug/slug-data-table.stories.ts | 616 ++++++++++++++++ .../src/components/slug/slug-example-story.ts | 614 ---------------- .../components/slug/slug-example.stories.ts | 662 ++++++++++++++++++ .../src/components/slug/slug-form-story.ts | 365 ---------- .../src/components/slug/slug-form.stories.ts | 399 +++++++++++ .../src/components/slug/slug-story.ts | 254 ------- .../slug/{slug-story.mdx => slug.mdx} | 11 +- .../src/components/slug/slug.stories.ts | 275 ++++++++ 10 files changed, 1964 insertions(+), 1837 deletions(-) delete mode 100644 packages/carbon-web-components/src/components/slug/slug-data-table-story.ts create mode 100644 packages/carbon-web-components/src/components/slug/slug-data-table.stories.ts delete mode 100644 packages/carbon-web-components/src/components/slug/slug-example-story.ts create mode 100644 packages/carbon-web-components/src/components/slug/slug-example.stories.ts delete mode 100644 packages/carbon-web-components/src/components/slug/slug-form-story.ts create mode 100644 packages/carbon-web-components/src/components/slug/slug-form.stories.ts delete mode 100644 packages/carbon-web-components/src/components/slug/slug-story.ts rename packages/carbon-web-components/src/components/slug/{slug-story.mdx => slug.mdx} (84%) create mode 100644 packages/carbon-web-components/src/components/slug/slug.stories.ts diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts index 622d8584ff0..c1d6741fa7f 100644 --- a/packages/carbon-web-components/.storybook/main.ts +++ b/packages/carbon-web-components/.storybook/main.ts @@ -86,6 +86,11 @@ const stories = glob.sync( '../src/**/skip-to-content.stories.ts', '../src/**/slider.mdx', '../src/**/slider.stories.ts', + '../src/**/slug.mdx', + '../src/**/slug.stories.ts', + '../src/**/slug-example.stories.ts', + '../src/**/slug-data-table.stories.ts', + '../src/**/slug-form.stories.ts', '../src/**/tag.mdx', '../src/**/tag.stories.ts', '../src/**/tooltip.mdx', diff --git a/packages/carbon-web-components/src/components/slug/slug-data-table-story.ts b/packages/carbon-web-components/src/components/slug/slug-data-table-story.ts deleted file mode 100644 index 16af9651e5e..00000000000 --- a/packages/carbon-web-components/src/components/slug/slug-data-table-story.ts +++ /dev/null @@ -1,600 +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 View16 from '@carbon/icons/lib/view/16'; -import FolderOpen16 from '@carbon/icons/lib/folder--open/16'; -import Folders16 from '@carbon/icons/lib/folders/16'; -import '../data-table/index'; - -const content = html` -
-

AI Explained

-

84%

-

Confidence score

-

- Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. -

-
-

Model type

-

Foundation model

-
-`; - -const actions = html` - - ${View16({ slot: 'icon' })} - View - - - ${FolderOpen16({ slot: 'icon' })} - Open folder - - - ${Folders16({ slot: 'icon' })} - Folders - - View Literature -`; - -export default { - title: 'Experimental/Slug/DataTable', -}; - -export const _ColumnSlugSort = () => { - return html` - - DataTable - With expansion - - - - Name - Protocol - Port - Rule - Attached groups - ${content}${actions} - 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 _ColumnSlugWithSelectionAndExpansion = () => { - return html` - - DataTable - With sorting - - - - Name - Protocol - ${content}${actions} - - Port - Rule - Attached groups - Status - - - - - Load Balancer 3 - HTTP - 3000 - Round robin - Kevin's VM Groups - Disabled - - -
Expandable row content
-
Description here
- - - Load Balancer 1 - HTTP - 443 - Round robin - Maureen's VM Groups - Starting - - -
Expandable row content
-
Description here
- - - Load Balancer 2 - HTTP - 80 - DNS delegation - Andrew's VM Groups - Active - - -
Expandable row content
-
Description here
- - - Load Balancer 6 - HTTP - 3000 - Round robin - Marc's VM Groups - Disabled - - -
Expandable row content
-
Description here
- - - Load Balancer 4 - HTTP - 443 - Round robin - Mel's VM Groups - Starting - - -
Expandable row content
-
Description here
- - - Load Balancer 5 - HTTP - 80 - DNS delegation - Ronja's VM Groups - Active - - -
Expandable row content
-
Description here
- - - - `; -}; - -export const _SlugWithExpansion = () => { - return html` - - DataTable - With sorting - - - - Name - Protocol - Port - Rule - Attached groups - Status - - - - - Load Balancer 3 - HTTP - 3000 - Round robin - Kevin's VM Groups - Disabled - - -
Expandable row content
-
Description here
- - - ${content}${actions} - Load Balancer 1 - HTTP - 443 - Round robin - Maureen's VM Groups - Starting - - -
Expandable row content
-
Description here
- - - Load Balancer 2 - HTTP - 80 - DNS delegation - Andrew's VM Groups - Active - - -
Expandable row content
-
Description here
- - - ${content}${actions} - Load Balancer 6 - HTTP - 3000 - Round robin - Marc's VM Groups - Disabled - - -
Expandable row content
-
Description here
- - - ${content}${actions} - Load Balancer 4 - HTTP - 443 - Round robin - Mel's VM Groups - Starting - - -
Expandable row content
-
Description here
- - - Load Balancer 5 - HTTP - 80 - DNS delegation - Ronja's VM Groups - Active - - -
Expandable row content
-
Description here
- - - - `; -}; - -export const _SlugWithRadioSelection = () => { - return html` - - DataTable - With selection - - - - Name - Protocol - Port - Rule - Attached groups - Status - - - - - Load Balancer 3 - HTTP - 3000 - Round robin - Kevin's VM Groups - Disabled - - - ${content}${actions} - - Load Balancer 1 - HTTP - 443 - Round robin - Maureen's VM Groups - Starting - - - Load Balancer 2 - HTTP - 80 - DNS delegation - Andrew's VM Groups - Active - - - ${content}${actions} - - Load Balancer 6 - HTTP - 3000 - Round robin - Marc's VM Groups - Disabled - - - ${content}${actions} - - 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 SlugWithSelection = () => { - return html` - - DataTable - With selection - - - - Name - Protocol - Port - Rule - Attached groups - Status - - - - - Load Balancer 3 - HTTP - 3000 - Round robin - Kevin's VM Groups - Disabled - - - ${content}${actions} - Load Balancer 1 - HTTP - 443 - Round robin - Maureen's VM Groups - Starting - - - Load Balancer 2 - HTTP - 80 - DNS delegation - Andrew's VM Groups - Active - - - ${content}${actions} - Load Balancer 6 - HTTP - 3000 - Round robin - Marc's VM Groups - Disabled - - - ${content}${actions} - 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 SlugWithSelectionAndExpansion = () => { - return html` - - DataTable - With selection - - - - Name - Protocol - Port - Rule - Attached groups - Status - - - - - Load Balancer 3 - HTTP - 3000 - Round robin - Kevin's VM Groups - Disabled - - -
Expandable row content
-
Description here
- - - ${content}${actions} - Load Balancer 1 - HTTP - 443 - Round robin - Maureen's VM Groups - Starting - - -
Expandable row content
-
Description here
- - - Load Balancer 2 - HTTP - 80 - DNS delegation - Andrew's VM Groups - Active - - -
Expandable row content
-
Description here
- - - ${content}${actions} - Load Balancer 6 - HTTP - 3000 - Round robin - Marc's VM Groups - Disabled - - -
Expandable row content
-
Description here
- - - ${content}${actions} - Load Balancer 4 - HTTP - 443 - Round robin - Mel's VM Groups - Starting - - -
Expandable row content
-
Description here
- - - Load Balancer 5 - HTTP - 80 - DNS delegation - Ronja's VM Groups - Active - - -
Expandable row content
-
Description here
- - - - `; -}; diff --git a/packages/carbon-web-components/src/components/slug/slug-data-table.stories.ts b/packages/carbon-web-components/src/components/slug/slug-data-table.stories.ts new file mode 100644 index 00000000000..fecce2f9a5d --- /dev/null +++ b/packages/carbon-web-components/src/components/slug/slug-data-table.stories.ts @@ -0,0 +1,616 @@ +/** + * @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 View16 from '@carbon/icons/lib/view/16'; +import FolderOpen16 from '@carbon/icons/lib/folder--open/16'; +import Folders16 from '@carbon/icons/lib/folders/16'; +import '../data-table/index'; +import '../icon-button/index'; +import '../link/index'; + +const content = html` +
+

AI Explained

+

84%

+

Confidence score

+

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+
+

Model type

+

Foundation model

+
+`; + +const actions = html` + + ${View16({ slot: 'icon' })} + View + + + ${FolderOpen16({ slot: 'icon' })} + Open folder + + + ${Folders16({ slot: 'icon' })} + Folders + + View Literature +`; + +export const _ColumnSlugSort = { + render: () => { + return html` + + DataTable + With expansion + + + + Name + Protocol + Port + Rule + Attached groups + ${content}${actions} + 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 _ColumnSlugWithSelectionAndExpansion = { + render: () => { + return html` + + DataTable + With sorting + + + + Name + Protocol + ${content}${actions} + + Port + Rule + Attached groups + Status + + + + + Load Balancer 3 + HTTP + 3000 + Round robin + Kevin's VM Groups + Disabled + + +
Expandable row content
+
Description here
+ + + Load Balancer 1 + HTTP + 443 + Round robin + Maureen's VM Groups + Starting + + +
Expandable row content
+
Description here
+ + + Load Balancer 2 + HTTP + 80 + DNS delegation + Andrew's VM Groups + Active + + +
Expandable row content
+
Description here
+ + + Load Balancer 6 + HTTP + 3000 + Round robin + Marc's VM Groups + Disabled + + +
Expandable row content
+
Description here
+ + + Load Balancer 4 + HTTP + 443 + Round robin + Mel's VM Groups + Starting + + +
Expandable row content
+
Description here
+ + + Load Balancer 5 + HTTP + 80 + DNS delegation + Ronja's VM Groups + Active + + +
Expandable row content
+
Description here
+ + + + `; + }, +}; + +export const _SlugWithExpansion = { + render: () => { + return html` + + DataTable + With sorting + + + + Name + Protocol + Port + Rule + Attached groups + Status + + + + + Load Balancer 3 + HTTP + 3000 + Round robin + Kevin's VM Groups + Disabled + + +
Expandable row content
+
Description here
+ + + ${content}${actions} + Load Balancer 1 + HTTP + 443 + Round robin + Maureen's VM Groups + Starting + + +
Expandable row content
+
Description here
+ + + Load Balancer 2 + HTTP + 80 + DNS delegation + Andrew's VM Groups + Active + + +
Expandable row content
+
Description here
+ + + ${content}${actions} + Load Balancer 6 + HTTP + 3000 + Round robin + Marc's VM Groups + Disabled + + +
Expandable row content
+
Description here
+ + + ${content}${actions} + Load Balancer 4 + HTTP + 443 + Round robin + Mel's VM Groups + Starting + + +
Expandable row content
+
Description here
+ + + Load Balancer 5 + HTTP + 80 + DNS delegation + Ronja's VM Groups + Active + + +
Expandable row content
+
Description here
+ + + + `; + }, +}; + +export const _SlugWithRadioSelection = { + render: () => { + return html` + + DataTable + With selection + + + + Name + Protocol + Port + Rule + Attached groups + Status + + + + + Load Balancer 3 + HTTP + 3000 + Round robin + Kevin's VM Groups + Disabled + + + ${content}${actions} + + Load Balancer 1 + HTTP + 443 + Round robin + Maureen's VM Groups + Starting + + + Load Balancer 2 + HTTP + 80 + DNS delegation + Andrew's VM Groups + Active + + + ${content}${actions} + + Load Balancer 6 + HTTP + 3000 + Round robin + Marc's VM Groups + Disabled + + + ${content}${actions} + + 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 SlugWithSelection = { + render: () => { + return html` + + DataTable + With selection + + + + Name + Protocol + Port + Rule + Attached groups + Status + + + + + Load Balancer 3 + HTTP + 3000 + Round robin + Kevin's VM Groups + Disabled + + + ${content}${actions} + Load Balancer 1 + HTTP + 443 + Round robin + Maureen's VM Groups + Starting + + + Load Balancer 2 + HTTP + 80 + DNS delegation + Andrew's VM Groups + Active + + + ${content}${actions} + Load Balancer 6 + HTTP + 3000 + Round robin + Marc's VM Groups + Disabled + + + ${content}${actions} + 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 SlugWithSelectionAndExpansion = { + render: () => { + return html` + + DataTable + With selection + + + + Name + Protocol + Port + Rule + Attached groups + Status + + + + + Load Balancer 3 + HTTP + 3000 + Round robin + Kevin's VM Groups + Disabled + + +
Expandable row content
+
Description here
+ + + ${content}${actions} + Load Balancer 1 + HTTP + 443 + Round robin + Maureen's VM Groups + Starting + + +
Expandable row content
+
Description here
+ + + Load Balancer 2 + HTTP + 80 + DNS delegation + Andrew's VM Groups + Active + + +
Expandable row content
+
Description here
+ + + ${content}${actions} + Load Balancer 6 + HTTP + 3000 + Round robin + Marc's VM Groups + Disabled + + +
Expandable row content
+
Description here
+ + + ${content}${actions} + Load Balancer 4 + HTTP + 443 + Round robin + Mel's VM Groups + Starting + + +
Expandable row content
+
Description here
+ + + Load Balancer 5 + HTTP + 80 + DNS delegation + Ronja's VM Groups + Active + + +
Expandable row content
+
Description here
+ + + + `; + }, +}; + +const meta = { + title: 'Experimental/Slug/DataTable', +}; + +export default meta; diff --git a/packages/carbon-web-components/src/components/slug/slug-example-story.ts b/packages/carbon-web-components/src/components/slug/slug-example-story.ts deleted file mode 100644 index 4881b859498..00000000000 --- a/packages/carbon-web-components/src/components/slug/slug-example-story.ts +++ /dev/null @@ -1,614 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { html } from 'lit'; -import { boolean } from '@storybook/addon-knobs'; -import View16 from '@carbon/icons/lib/view/16'; -import FolderOpen16 from '@carbon/icons/lib/folder--open/16'; -import Folders16 from '@carbon/icons/lib/folders/16'; -import Asleep16 from '@carbon/icons/lib/asleep/16'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import { prefix } from '../../globals/settings'; -import './index'; -import '../icon-button/index'; -import styles from './slug-story.scss?lit'; - -const items = [ - { - value: 'option-0', - text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.', - }, - { - value: 'option-1', - text: 'Option 1', - }, - { - value: 'option-2', - text: 'Option 2', - }, - { - value: 'option-3', - text: 'Option 3 - a disabled item', - disabled: true, - }, - { - value: 'option-4', - text: 'Option 4', - }, - { - value: 'option-5', - text: 'Option 5', - }, -]; - -const content = html` -
-

AI Explained

-

84%

-

Confidence score

-

- Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. -

-
-

Model type

-

Foundation model

-
-`; - -const actions = html` - - ${View16({ slot: 'icon' })} - View - - - ${FolderOpen16({ slot: 'icon' })} - Open folder - - - ${Folders16({ slot: 'icon' })} - Folders - - View Literature -`; - -export default { - title: 'Experimental/Slug/Examples', -}; - -export const _Checkbox = (args) => { - const { disabled, invalid, invalidText, warn, warnText } = - args?.['cds-checkbox'] ?? {}; - - return html` - -
- - ${content}${actions} - Checkbox label - Checkbox label - Checkbox label - - - - - Checkbox label - ${content}${actions} - - - Checkbox label - ${content}${actions} - - Checkbox label - - - - - Checkbox label - - ${content}${actions} - - - - Checkbox label - - ${content}${actions} - - - Checkbox label - -
- `; -}; - -_Checkbox.parameters = { - knobs: { - [`${prefix}-checkbox`]: () => ({ - disabled: boolean('Disabled (disabled)', false), - invalid: boolean('Invalid (invalid)', false), - invalidText: textNullable( - 'Invalid text (invalid-text)', - 'Error message goes here' - ), - warn: boolean('Warn (warn)', false), - warnText: textNullable( - 'Warn text (warn-text)', - 'Warning message that is really long can wrap to more lines but should not be excessively long.' - ), - }), - }, -}; - -export const _Combobox = () => { - return html` -
- - ${content}${actions} - - Option 1 - Option 2 - Option 3 - Option 4 - Option 5 - Option 6 - Option 7 - Option 8 - -
`; -}; - -export const _DatePicker = () => { - return html` -
- - - ${content}${actions} - - -
`; -}; - -export const _Dropdown = () => { - return html` -
- - ${content}${actions} - ${items.map( - (elem) => html` - ${elem.text} - ` - )} - -
`; -}; - -export const _Multiselect = () => { - return html` -
- - ${content}${actions} - - An example option that is really long to show what should be done to - handle long text - Option 1 - Option 2 - Option 3 - a disabled item - Option 4 - Option 5 - -
`; -}; - -export const _FilterableMultiselect = () => { - return html` -
- - ${content}${actions} - An example option that is really long to show what should be done to - handle long text - Option 1 - Option 2 - Option 3 - a disabled item - Option 4 - Option 5 - -
`; -}; - -export const _NumberItem = () => { - return html` -
- - ${content}${actions} - -
`; -}; - -export const _RadioButton = (args) => { - const { disabled, invalid, invalidText, warn, warnText } = - args?.['cds-radio-button'] ?? {}; - - return html` - - - ${content}${actions} - - - - - - - - ${content}${actions} - - - ${content}${actions} - - - - - - - - ${content}${actions} - - - - - ${content}${actions} - - - - - `; -}; - -_RadioButton.parameters = { - knobs: { - [`${prefix}-radio-button`]: () => ({ - disabled: boolean('Disabled (disabled)', false), - invalid: boolean('Invalid (invalid)', false), - invalidText: textNullable( - 'Invalid text (invalid-text)', - 'Error message goes here' - ), - warn: boolean('Warn (warn)', false), - warnText: textNullable( - 'Warn text (warn-text)', - 'Warning message that is really long can wrap to more lines but should not be excessively long.' - ), - }), - }, -}; - -export const _Select = () => { - return html` -
- - ${content}${actions} - - Option 1 - Option 2 - - - Option 3 - Option 4 - Option 5 - - -
`; -}; - -const tagTypes = [ - 'red', - 'magenta', - 'purple', - 'blue', - 'cyan', - 'teal', - 'green', - 'gray', - 'cool-gray', - 'warm-gray', - 'high-contrast', - 'outline', -]; - -export const _Tag = () => { - return html` - -
- ${tagTypes.map( - (e) => html`Tag - ${content}${actions} - ` - )} -
- -
- ${tagTypes.map( - (e) => - html` - Tag - ${content}${actions} - ` - )} -
- -
- ${tagTypes.map( - (e) => - html` - ${Asleep16({ slot: 'icon' })} Tag - ${content}${actions} - ` - )} -
- -
- ${tagTypes.map( - (e) => - html` - ${Asleep16({ slot: 'icon' })} Tag - ${content}${actions} - ` - )} -
- `; -}; - -export const _TextInput = () => { - return html` -
- - ${content}${actions} - -
`; -}; - -export const _TextArea = () => { - return html` -
- - ${content}${actions} - -
`; -}; - -export const _Tile = (args) => { - const { hasRoundedCorners } = args?.['cds-tile'] ?? {}; - return html` -
- -
-

Title

-

- Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit - at consectetur turpis mauris gravida penatibus. -

-
-
-

Data Quality

-

85%

-
-
-

Label text

-

16%

-
-
-
- ${content}${actions} - - - -
-

Title

-

- Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit - at consectetur turpis mauris gravida penatibus. -

-
-
-

Data Quality

-

85%

-
-
-

Label text

-

16%

-
-
-
- - - -
-

Title

-

- Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit - at consectetur turpis mauris gravida penatibus. -

-
-
-

Data Quality

-

85%

-
-
-

Label text

-

16%

-
-
-
- ${content}${actions} - - - - -
-

Title

-

- Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit - at consectetur turpis mauris gravida penatibus. -

-
-
-

Data Quality

-

85%

-
-
-

Label text

-

16%

-
-
-
- - -
Expanded Section
-

- Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit - at consectetur turpis mauris. -

- - ${content}${actions} - -
`; -}; - -_Tile.parameters = { - knobs: { - [`${prefix}-tile`]: () => ({ - hasRoundedCorners: boolean( - 'hasRoundedCorners (has-rounded-corners)', - false - ), - }), - }, -}; diff --git a/packages/carbon-web-components/src/components/slug/slug-example.stories.ts b/packages/carbon-web-components/src/components/slug/slug-example.stories.ts new file mode 100644 index 00000000000..7b530523024 --- /dev/null +++ b/packages/carbon-web-components/src/components/slug/slug-example.stories.ts @@ -0,0 +1,662 @@ +/** + * @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 View16 from '@carbon/icons/lib/view/16'; +import FolderOpen16 from '@carbon/icons/lib/folder--open/16'; +import Folders16 from '@carbon/icons/lib/folders/16'; +import Asleep16 from '@carbon/icons/lib/asleep/16'; +import './index'; +import '../icon-button/index'; +import '../checkbox/index'; +import '../combo-box/index'; +import '../date-picker/index'; +import '../dropdown/index'; +import '../multi-select/index'; +import '../number-input/index'; +import '../radio-button/index'; +import '../select/index'; +import '../tag/index'; +import '../text-input/index'; +import '../textarea/index'; +import '../tile/index'; +import styles from './slug-story.scss?lit'; + +const items = [ + { + value: 'option-0', + text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.', + }, + { + value: 'option-1', + text: 'Option 1', + }, + { + value: 'option-2', + text: 'Option 2', + }, + { + value: 'option-3', + text: 'Option 3 - a disabled item', + disabled: true, + }, + { + value: 'option-4', + text: 'Option 4', + }, + { + value: 'option-5', + text: 'Option 5', + }, +]; + +const content = html` +
+

AI Explained

+

84%

+

Confidence score

+

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+
+

Model type

+

Foundation model

+
+`; + +const actions = html` + + ${View16({ slot: 'icon' })} + View + + + ${FolderOpen16({ slot: 'icon' })} + Open folder + + + ${Folders16({ slot: 'icon' })} + Folders + + View Literature +`; + +export const _Checkbox = { + args: { + disabled: false, + invalid: false, + invalidText: 'Error message goes here', + warn: false, + warnText: + 'Warning message that is really long can wrap to more lines but should not be excessively long.', + }, + argTypes: { + disabled: { + control: 'boolean', + }, + invalid: { + control: 'boolean', + }, + invalidText: { + control: 'text', + }, + warn: { + control: 'boolean', + }, + warnText: { + control: 'text', + }, + }, + render: (args) => { + const { disabled, invalid, invalidText, warn, warnText } = args ?? {}; + + return html` + +
+ + ${content}${actions} + Checkbox label + Checkbox label + Checkbox label + + + + + Checkbox label + ${content}${actions} + + + Checkbox label + ${content}${actions} + + Checkbox label + + + + + Checkbox label + + ${content}${actions} + + + + Checkbox label + + ${content}${actions} + + + Checkbox label + +
+ `; + }, +}; + +export const _Combobox = { + render: () => { + return html` +
+ + ${content}${actions} + + Option 1 + Option 2 + Option 3 + Option 4 + Option 5 + Option 6 + Option 7 + Option 8 + +
`; + }, +}; + +export const _DatePicker = { + render: () => { + return html` +
+ + + ${content}${actions} + + +
`; + }, +}; + +export const _Dropdown = { + render: () => { + return html` +
+ + ${content}${actions} + ${items.map( + (elem) => html` + ${elem.text} + ` + )} + +
`; + }, +}; + +export const _Multiselect = { + render: () => { + return html` +
+ + ${content}${actions} + + An example option that is really long to show what should be done to + handle long text + Option 1 + Option 2 + Option 3 - a disabled item + Option 4 + Option 5 + +
`; + }, +}; + +export const _FilterableMultiselect = { + render: () => { + return html` +
+ + ${content}${actions} + An example option that is really long to show what should be done + to handle long text + Option 1 + Option 2 + Option 3 - a disabled item + Option 4 + Option 5 + +
`; + }, +}; + +export const _NumberItem = { + render: () => { + return html` +
+ + ${content}${actions} + +
`; + }, +}; + +export const _RadioButton = { + args: { + disabled: false, + invalid: false, + invalidText: 'Error message goes here', + warn: false, + warnText: + 'Warning message that is really long can wrap to more lines but should not be excessively long.', + }, + argTypes: { + disabled: { + control: 'boolean', + }, + invalid: { + control: 'boolean', + }, + invalidText: { + control: 'text', + }, + warn: { + control: 'boolean', + }, + warnText: { + control: 'text', + }, + }, + render: (args) => { + const { disabled, invalid, invalidText, warn, warnText } = args ?? {}; + + return html` + + + ${content}${actions} + + + + + + + + ${content}${actions} + + + ${content}${actions} + + + + + + + + ${content}${actions} + + + + + ${content}${actions} + + + + + `; + }, +}; + +export const _Select = { + render: () => { + return html` +
+ + ${content}${actions} + + Option 1 + Option 2 + + + Option 3 + Option 4 + Option 5 + + +
`; + }, +}; + +const tagTypes = [ + 'red', + 'magenta', + 'purple', + 'blue', + 'cyan', + 'teal', + 'green', + 'gray', + 'cool-gray', + 'warm-gray', + 'high-contrast', + 'outline', +]; + +export const _Tag = { + render: () => { + return html` + +
+ ${tagTypes.map( + (e) => html`Tag + ${content}${actions} + ` + )} +
+ +
+ ${tagTypes.map( + (e) => + html` + Tag + ${content}${actions} + ` + )} +
+ +
+ ${tagTypes.map( + (e) => + html` + ${Asleep16({ slot: 'icon' })} Tag + ${content}${actions} + ` + )} +
+ +
+ ${tagTypes.map( + (e) => + html` + ${Asleep16({ slot: 'icon' })} Tag + ${content}${actions} + ` + )} +
+ `; + }, +}; + +export const _TextInput = { + render: () => { + return html` +
+ + ${content}${actions} + +
`; + }, +}; + +export const _TextArea = { + render: () => { + return html` +
+ + ${content}${actions} + +
`; + }, +}; + +export const _Tile = { + args: { + hasRoundedCorners: false, + }, + argTypes: { + hasRoundedCorners: { + control: 'boolean', + }, + }, + render: (args) => { + const { hasRoundedCorners } = args ?? {}; + return html` +
+ +
+

Title

+

+ Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit + at consectetur turpis mauris gravida penatibus. +

+
+
+

Data Quality

+

85%

+
+
+

Label text

+

16%

+
+
+
+ ${content}${actions} + + + +
+

Title

+

+ Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit + at consectetur turpis mauris gravida penatibus. +

+
+
+

Data Quality

+

85%

+
+
+

Label text

+

16%

+
+
+
+ + + +
+

Title

+

+ Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit + at consectetur turpis mauris gravida penatibus. +

+
+
+

Data Quality

+

85%

+
+
+

Label text

+

16%

+
+
+
+ ${content}${actions} + + + + +
+

Title

+

+ Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum + sit at consectetur turpis mauris gravida penatibus. +

+
+
+

Data Quality

+

85%

+
+
+

Label text

+

16%

+
+
+
+ + +
Expanded Section
+

+ Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit + at consectetur turpis mauris. +

+ + ${content}${actions} + +
`; + }, +}; + +const meta = { + title: 'Experimental/Slug/Examples', +}; + +export default meta; diff --git a/packages/carbon-web-components/src/components/slug/slug-form-story.ts b/packages/carbon-web-components/src/components/slug/slug-form-story.ts deleted file mode 100644 index c1b790e0266..00000000000 --- a/packages/carbon-web-components/src/components/slug/slug-form-story.ts +++ /dev/null @@ -1,365 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { html } from 'lit'; -import { boolean } from '@storybook/addon-knobs'; -import View16 from '@carbon/icons/lib/view/16'; -import FolderOpen16 from '@carbon/icons/lib/folder--open/16'; -import Folders16 from '@carbon/icons/lib/folders/16'; - -import textNullable from '../../../.storybook/knob-text-nullable'; -import { prefix } from '../../globals/settings'; -import './index'; -import '../icon-button/index'; - -const items = [ - { - value: 'option-0', - text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.', - }, - { - value: 'option-1', - text: 'Option 1', - }, - { - value: 'option-2', - text: 'Option 2', - }, - { - value: 'option-3', - text: 'Option 3 - a disabled item', - disabled: true, - }, - { - value: 'option-4', - text: 'Option 4', - }, - { - value: 'option-5', - text: 'Option 5', - }, -]; - -const content = html` -
-

AI Explained

-

84%

-

Confidence score

-

- Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. -

-
-

Model type

-

Foundation model

-
-`; - -const actions = html` - - ${View16({ slot: 'icon' })} - View - - - ${FolderOpen16({ slot: 'icon' })} - Open folder - - - ${Folders16({ slot: 'icon' })} - Folders - - View Literature -`; - -export default { - title: 'Experimental/Slug/Form', -}; - -export const _AIForm = (args) => { - const { disabled, invalid, invalidText, warn, warnText, revert } = - args?.['cds-form-group'] ?? {}; - - return html` -
- - - - - - ${content}${actions} - - - - - - - - - ${content}${actions} - - - - - - - - ${content}${actions} - - - - - - - ${content}${actions} - - - - - - - ${content}${actions} - ${items.map( - (elem) => html` - ${elem.text} - ` - )} - - - - - - ${content}${actions} - - An example option that is really long to show what should be done - to handle long text - Option 1 - Option 2 - Option 3 - a disabled item - Option 4 - Option 5 - - - - - ${content}${actions} - An example option that is really long to show what should be done - to handle long text - Option 1 - Option 2 - Option 3 - a disabled item - Option 4 - Option 5 - - - - - ${content}${actions} - - Option 1 - Option 2 - Option 3 - Option 4 - Option 5 - Option 6 - Option 7 - Option 8 - - - - - ${content}${actions} - - Option 1 - Option 2 - - - Option 3 - Option 4 - Option 5 - - - - Submit - - -
- `; -}; - -_AIForm.parameters = { - knobs: { - [`${prefix}-form-group`]: () => ({ - disabled: boolean('Disabled (disabled)', false), - invalid: boolean('Invalid (invalid)', false), - invalidText: textNullable( - 'Invalid text (invalid-text)', - 'Error message goes here' - ), - warn: boolean('Warn (warn)', false), - warnText: textNullable( - 'Warn text (warn-text)', - 'Warning message that is really long can wrap to more lines but should not be excessively long.' - ), - revert: boolean('Revert active (revert-active)', false), - }), - }, -}; - -export const _RevertTest = () => { - const handleInput = (event) => { - event.target?.querySelector('cds-slug')?.setAttribute('revert-active', ''); - }; - - const handleRevert = (value) => { - return (event) => { - (event.target as HTMLElement).parentElement?.querySelector('cds-slug') - ? (event.target as HTMLElement).parentElement?.setAttribute( - 'value', - value - ) - : ''; - }; - }; - - return html` -
- - - - - ${content} - - - - - - ${content} - - - - -
- `; -}; diff --git a/packages/carbon-web-components/src/components/slug/slug-form.stories.ts b/packages/carbon-web-components/src/components/slug/slug-form.stories.ts new file mode 100644 index 00000000000..1a4630797ab --- /dev/null +++ b/packages/carbon-web-components/src/components/slug/slug-form.stories.ts @@ -0,0 +1,399 @@ +/** + * @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 View16 from '@carbon/icons/lib/view/16'; +import FolderOpen16 from '@carbon/icons/lib/folder--open/16'; +import Folders16 from '@carbon/icons/lib/folders/16'; +import './index'; +import '../button/index'; +import '../combo-box/index'; +import '../date-picker/index'; +import '../dropdown/index'; +import '../form/index'; +import '../form-group/index'; +import '../icon-button/index'; +import '../multi-select/index'; +import '../number-input/index'; +import '../select/index'; +import '../stack/index'; +import '../textarea/index'; +import '../text-input/index'; + +const items = [ + { + value: 'option-0', + text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.', + }, + { + value: 'option-1', + text: 'Option 1', + }, + { + value: 'option-2', + text: 'Option 2', + }, + { + value: 'option-3', + text: 'Option 3 - a disabled item', + disabled: true, + }, + { + value: 'option-4', + text: 'Option 4', + }, + { + value: 'option-5', + text: 'Option 5', + }, +]; + +const content = html` +
+

AI Explained

+

84%

+

Confidence score

+

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+
+

Model type

+

Foundation model

+
+`; + +const actions = html` + + ${View16({ slot: 'icon' })} + View + + + ${FolderOpen16({ slot: 'icon' })} + Open folder + + + ${Folders16({ slot: 'icon' })} + Folders + + View Literature +`; + +export const _AIForm = { + args: { + disabled: false, + invalid: false, + invalidText: 'Error message goes here', + warn: false, + warnText: + 'Warning message that is really long can wrap to more lines but should not be excessively long.', + revert: false, + }, + argTypes: { + disabled: { + control: 'boolean', + }, + invalid: { + control: 'boolean', + }, + invalidText: { + control: 'text', + }, + warn: { + control: 'boolean', + }, + warnText: { + control: 'text', + }, + revert: { + control: 'boolean', + }, + }, + render: (args) => { + const { disabled, invalid, invalidText, warn, warnText, revert } = + args ?? {}; + + return html` +
+ + + + + + ${content}${actions} + + + + + + + + + ${content}${actions} + + + + + + + + ${content}${actions} + + + + + + + ${content}${actions} + + + + + + + ${content}${actions} + ${items.map( + (elem) => html` + ${elem.text} + ` + )} + + + + + + ${content}${actions} + + An example option that is really long to show what should be + done to handle long text + Option 1 + Option 2 + Option 3 - a disabled item + Option 4 + Option 5 + + + + + ${content}${actions} + An example option that is really long to show what should be + done to handle long text + Option 1 + Option 2 + Option 3 - a disabled item + Option 4 + Option 5 + + + + + ${content}${actions} + + Option 1 + Option 2 + Option 3 + Option 4 + Option 5 + Option 6 + Option 7 + Option 8 + + + + + ${content}${actions} + + Option 1 + Option 2 + + + Option 3 + Option 4 + Option 5 + + + + Submit + + +
+ `; + }, +}; + +export const _RevertTest = { + render: () => { + const handleInput = (event) => { + event.target + ?.querySelector('cds-slug') + ?.setAttribute('revert-active', ''); + }; + + const handleRevert = (value) => { + return (event) => { + (event.target as HTMLElement).parentElement?.querySelector('cds-slug') + ? (event.target as HTMLElement).parentElement?.setAttribute( + 'value', + value + ) + : ''; + }; + }; + + return html` +
+ + + + + ${content} + + + + + + ${content} + + + + +
+ `; + }, +}; + +const meta = { + title: 'Experimental/Slug/Form', +}; + +export default meta; diff --git a/packages/carbon-web-components/src/components/slug/slug-story.ts b/packages/carbon-web-components/src/components/slug/slug-story.ts deleted file mode 100644 index 88a38738817..00000000000 --- a/packages/carbon-web-components/src/components/slug/slug-story.ts +++ /dev/null @@ -1,254 +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, boolean } from '@storybook/addon-knobs'; -import View16 from '@carbon/icons/lib/view/16'; -import FolderOpen16 from '@carbon/icons/lib/folder--open/16'; -import Folders16 from '@carbon/icons/lib/folders/16'; - -import textNullable from '../../../.storybook/knob-text-nullable'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { prefix } from '../../globals/settings'; -import './index'; -import '../icon-button/index'; -import styles from './slug-story.scss?lit'; -import storyDocs from './slug-story.mdx'; - -import { POPOVER_ALIGNMENT } from '../popover/defs'; -import { SLUG_SIZE } from './defs'; - -const tooltipAlignments = { - [`top`]: POPOVER_ALIGNMENT.TOP, - [`top-left`]: POPOVER_ALIGNMENT.TOP_LEFT, - [`top-right`]: POPOVER_ALIGNMENT.TOP_RIGHT, - [`bottom`]: POPOVER_ALIGNMENT.BOTTOM, - [`bottom-left`]: POPOVER_ALIGNMENT.BOTTOM_LEFT, - [`bottom-right`]: POPOVER_ALIGNMENT.BOTTOM_RIGHT, - [`left`]: POPOVER_ALIGNMENT.LEFT, - [`left-bottom`]: POPOVER_ALIGNMENT.LEFT_BOTTOM, - [`left-top`]: POPOVER_ALIGNMENT.LEFT_TOP, - [`right`]: POPOVER_ALIGNMENT.RIGHT, - [`right-bottom`]: POPOVER_ALIGNMENT.RIGHT_BOTTOM, - [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP, -}; - -const sizes = { - [`Mini size (${SLUG_SIZE.MINI})`]: SLUG_SIZE.MINI, - [`2XS size (${SLUG_SIZE.EXTRA_EXTRA_SMALL})`]: SLUG_SIZE.EXTRA_EXTRA_SMALL, - [`XS size (${SLUG_SIZE.EXTRA_SMALL})`]: SLUG_SIZE.EXTRA_SMALL, - [`Small size (${SLUG_SIZE.SMALL})`]: SLUG_SIZE.SMALL, - [`Medium size (${SLUG_SIZE.MEDIUM})`]: SLUG_SIZE.MEDIUM, - [`Large size (${SLUG_SIZE.LARGE})`]: SLUG_SIZE.LARGE, - [`XL size (${SLUG_SIZE.EXTRA_LARGE})`]: SLUG_SIZE.EXTRA_LARGE, -}; - -const content = html` -
-

AI Explained

-

84%

-

Confidence score

-

- Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. -

-
-

Model type

-

Foundation model

-
-`; - -const hollowContent = html`AI was used to generate this content`; - -const actions = html` - - ${View16({ slot: 'icon' })} - View - - - ${FolderOpen16({ slot: 'icon' })} - Open folder - - - ${Folders16({ slot: 'icon' })} - Folders - - View Literature -`; - -export const Default = () => { - return html` - -
- ${content} - ${content} - ${content} - ${content} - ${content} - ${content} - ${content} -
-
- - ${hollowContent} - - - ${hollowContent} - - - ${hollowContent} - -
-
- - ${content} - - - ${content} - - - ${content} - -
-
- - ${content} - - - ${content} - - - ${content} - -
-
- - ${hollowContent} - - - ${hollowContent} - - - ${hollowContent} - -
-
- - ${hollowContent} - - - ${hollowContent} - - - ${hollowContent} - -
- `; -}; - -export const Playground = (args) => { - const { alignment, aiTextLabel, size, kind, dotType, revertActive } = - args?.[`${prefix}-slug`] ?? {}; - return html` - -
- - ${kind === 'hollow' || dotType === 'hollow' ? hollowContent : content} - ${kind === 'hollow' || dotType === 'hollow' ? '' : actions} - -
- `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-slug`]: () => { - const kind = select( - 'Kind (kind)', - ['default', 'hollow', 'inline'], - 'default' - ); - const dotType = - kind === 'inline' - ? select('DotType (dotType)', ['default', 'hollow'], 'default') - : ``; - - return { - alignment: select( - 'Slug alignment to trigger button (alignment)', - tooltipAlignments, - POPOVER_ALIGNMENT.BOTTOM - ), - size: select('Slug size (size)', sizes, SLUG_SIZE.MEDIUM), - kind, - dotType, - aiTextLabel: textNullable('Ai text label', ''), - revertActive: boolean('Revert active', false), - }; - }, - }, -}; - -export default { - title: 'Experimental/Slug', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/packages/carbon-web-components/src/components/slug/slug-story.mdx b/packages/carbon-web-components/src/components/slug/slug.mdx similarity index 84% rename from packages/carbon-web-components/src/components/slug/slug-story.mdx rename to packages/carbon-web-components/src/components/slug/slug.mdx index 076dbd432a9..beabac715af 100644 --- a/packages/carbon-web-components/src/components/slug/slug-story.mdx +++ b/packages/carbon-web-components/src/components/slug/slug.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 SlugStories from './slug.stories'; + + # Slug @@ -21,8 +24,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/slug/index.js'; ``` - - +{`${cdnJs({ components: ['slug'] })}`} +{`${cdnCss()}`} ### HTML @@ -49,4 +52,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `revertActive` attribute). - + diff --git a/packages/carbon-web-components/src/components/slug/slug.stories.ts b/packages/carbon-web-components/src/components/slug/slug.stories.ts new file mode 100644 index 00000000000..28f382b1d26 --- /dev/null +++ b/packages/carbon-web-components/src/components/slug/slug.stories.ts @@ -0,0 +1,275 @@ +/** + * @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 View16 from '@carbon/icons/lib/view/16'; +import FolderOpen16 from '@carbon/icons/lib/folder--open/16'; +import Folders16 from '@carbon/icons/lib/folders/16'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import './index'; +import '../icon-button/index'; +import styles from './slug-story.scss?lit'; +import storyDocs from './slug.mdx'; + +import { POPOVER_ALIGNMENT } from '../popover/defs'; +import { SLUG_SIZE } from './defs'; + +const tooltipAlignments = { + [`top`]: POPOVER_ALIGNMENT.TOP, + [`top-left`]: POPOVER_ALIGNMENT.TOP_LEFT, + [`top-right`]: POPOVER_ALIGNMENT.TOP_RIGHT, + [`bottom`]: POPOVER_ALIGNMENT.BOTTOM, + [`bottom-left`]: POPOVER_ALIGNMENT.BOTTOM_LEFT, + [`bottom-right`]: POPOVER_ALIGNMENT.BOTTOM_RIGHT, + [`left`]: POPOVER_ALIGNMENT.LEFT, + [`left-bottom`]: POPOVER_ALIGNMENT.LEFT_BOTTOM, + [`left-top`]: POPOVER_ALIGNMENT.LEFT_TOP, + [`right`]: POPOVER_ALIGNMENT.RIGHT, + [`right-bottom`]: POPOVER_ALIGNMENT.RIGHT_BOTTOM, + [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP, +}; + +const sizes = { + [`Mini size (${SLUG_SIZE.MINI})`]: SLUG_SIZE.MINI, + [`2XS size (${SLUG_SIZE.EXTRA_EXTRA_SMALL})`]: SLUG_SIZE.EXTRA_EXTRA_SMALL, + [`XS size (${SLUG_SIZE.EXTRA_SMALL})`]: SLUG_SIZE.EXTRA_SMALL, + [`Small size (${SLUG_SIZE.SMALL})`]: SLUG_SIZE.SMALL, + [`Medium size (${SLUG_SIZE.MEDIUM})`]: SLUG_SIZE.MEDIUM, + [`Large size (${SLUG_SIZE.LARGE})`]: SLUG_SIZE.LARGE, + [`XL size (${SLUG_SIZE.EXTRA_LARGE})`]: SLUG_SIZE.EXTRA_LARGE, +}; + +const content = html` +
+

AI Explained

+

84%

+

Confidence score

+

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+
+

Model type

+

Foundation model

+
+`; + +const hollowContent = html`AI was used to generate this content`; + +const actions = html` + + ${View16({ slot: 'icon' })} + View + + + ${FolderOpen16({ slot: 'icon' })} + Open folder + + + ${Folders16({ slot: 'icon' })} + Folders + + View Literature +`; + +const args = { + aiTextLabel: '', + alignment: POPOVER_ALIGNMENT.BOTTOM, + dotType: 'default', + kind: 'inline', + revertActive: false, + size: SLUG_SIZE.MEDIUM, +}; + +const argTypes = { + aiTextLabel: { + control: 'text', + description: + 'Specify additional text to be rendered next to the AI label in the inline variant.', + }, + alignment: { + control: 'select', + description: 'Specify how the popover should align with the button.', + options: tooltipAlignments, + }, + dotType: { + control: 'radio', + description: + 'Specify the type of dot that should be rendered in front of the inline variant.', + options: ['default', 'hollow'], + }, + kind: { + control: 'radio', + description: + 'Specify the type of Slug, from the following list of types: default, hollow, or inline.', + options: ['default', 'hollow', 'inline'], + }, + size: { + control: 'select', + description: + 'Specify the size of the button, from the following list of sizes: mini, 2xs, xs, sm, md, lg, xl.', + options: sizes, + }, + revertActive: { + control: 'boolean', + description: 'Specify whether the revert button should be visible.', + }, +}; + +export const Default = { + render: () => { + return html` + +
+ ${content} + ${content} + ${content} + ${content} + ${content} + ${content} + ${content} +
+
+ + ${hollowContent} + + + ${hollowContent} + + + ${hollowContent} + +
+
+ + ${content} + + + ${content} + + + ${content} + +
+
+ + ${content} + + + ${content} + + + ${content} + +
+
+ + ${hollowContent} + + + ${hollowContent} + + + ${hollowContent} + +
+
+ + ${hollowContent} + + + ${hollowContent} + + + ${hollowContent} + +
+ `; + }, +}; + +export const Playground = { + args, + argTypes, + render: (args) => { + const { alignment, aiTextLabel, dotType, kind, revertActive, size } = + args ?? {}; + return html` + +
+ + ${kind === 'hollow' || dotType === 'hollow' ? hollowContent : content} + ${kind === 'hollow' || dotType === 'hollow' ? '' : actions} + +
+ `; + }, +}; + +const meta = { + title: 'Experimental/Slug', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta; From 1f9a6e53c8be2e9dc59efd4c193e9fc1a5b1aaa2 Mon Sep 17 00:00:00 2001 From: Ariella Gilmore Date: Thu, 18 Jan 2024 10:46:00 -0800 Subject: [PATCH 2/4] feat(toggle/toggletip): cwc controls (#11395) * feat(toggle/toggletip): cwc controls * fix(toggletip): open prop * fix(toggletip): body text font --------- Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> --- .../carbon-web-components/.storybook/main.ts | 4 + .../basic/components/toggletip/.babelrc | 22 ++++ .../basic/components/toggletip/.gitignore | 22 ++++ .../basic/components/toggletip/.sassrc | 6 + .../basic/components/toggletip/cdn.html | 41 ++++++ .../basic/components/toggletip/index.html | 39 ++++++ .../basic/components/toggletip/package.json | 23 ++++ .../components/toggletip/sandbox.config.json | 3 + .../basic/components/toggletip/src/index.js | 12 ++ .../components/toggletip/src/styles.scss | 9 ++ .../components/combo-box/combo-box.stories.ts | 22 ++-- .../components/dropdown/dropdown.stories.ts | 83 ++++++------ .../src/components/layer/layer.stories.ts | 33 ++--- .../components/toggle-tip/toggletip-story.mdx | 105 --------------- .../components/toggle-tip/toggletip-story.ts | 70 ---------- .../src/components/toggle-tip/toggletip.mdx | 49 +++++++ .../src/components/toggle-tip/toggletip.scss | 7 +- .../toggle-tip/toggletip.stories.ts | 107 ++++++++++++++++ .../src/components/toggle/toggle-story.ts | 107 ---------------- .../toggle/{toggle-story.mdx => toggle.mdx} | 4 +- .../src/components/toggle/toggle.stories.ts | 120 ++++++++++++++++++ .../tests/spec/toggle_spec.ts | 2 +- 22 files changed, 538 insertions(+), 352 deletions(-) create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.babelrc create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.gitignore create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.sassrc create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/cdn.html create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/index.html create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/package.json create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/sandbox.config.json create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/index.js create mode 100644 packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/styles.scss delete mode 100644 packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx delete mode 100644 packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts create mode 100644 packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx create mode 100644 packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts delete mode 100644 packages/carbon-web-components/src/components/toggle/toggle-story.ts rename packages/carbon-web-components/src/components/toggle/{toggle-story.mdx => toggle.mdx} (93%) create mode 100644 packages/carbon-web-components/src/components/toggle/toggle.stories.ts diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts index c1d6741fa7f..f99232c31d1 100644 --- a/packages/carbon-web-components/.storybook/main.ts +++ b/packages/carbon-web-components/.storybook/main.ts @@ -95,6 +95,10 @@ const stories = glob.sync( '../src/**/tag.stories.ts', '../src/**/tooltip.mdx', '../src/**/tooltip.stories.ts', + '../src/**/toggle.mdx', + '../src/**/toggle.stories.ts', + '../src/**/toggletip.mdx', + '../src/**/toggletip.stories.ts', ], { ignore: ['../src/**/docs/*.mdx'], diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.babelrc b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.babelrc new file mode 100644 index 00000000000..74450eed94b --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.babelrc @@ -0,0 +1,22 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "modules": false, + "targets": [ + "last 1 version", + "Firefox ESR", + "not opera > 0", + "not op_mini > 0", + "not op_mob > 0", + "not android > 0", + "not edge > 0", + "not ie > 0", + "not ie_mob > 0" + ] + } + ] + ], + "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]] +} diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.gitignore b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.gitignore new file mode 100644 index 00000000000..d94d6e13e94 --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.gitignore @@ -0,0 +1,22 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +/node_modules + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.cache +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.sassrc b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.sassrc new file mode 100644 index 00000000000..956b9e0a3d8 --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/.sassrc @@ -0,0 +1,6 @@ +{ + "includePaths": [ + "node_modules", + "../../node_modules" + ] +} \ No newline at end of file diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/cdn.html b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/cdn.html new file mode 100644 index 00000000000..7405916a678 --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/cdn.html @@ -0,0 +1,41 @@ + + + + + @carbon/ibmdotcom-web-components example + + + + + + + + + + +
+ + Toggletip label + +

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+ Test + Button + +
+ + diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/index.html b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/index.html new file mode 100644 index 00000000000..03cc7b8daa9 --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/index.html @@ -0,0 +1,39 @@ + + + + + carbon-web-components example + + + + + + + + +
+ + Toggletip label + +

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+ Test + Button + +
+ + diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/package.json b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/package.json new file mode 100644 index 00000000000..4053d08df66 --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/package.json @@ -0,0 +1,23 @@ +{ + "name": "carbon-web-components-toggletip-example", + "version": "0.1.0", + "private": true, + "description": "Sample project for getting started with the Web Components from Carbon.", + "license": "Apache-2", + "main": "index.html", + "scripts": { + "build": "parcel build *.html --no-minify --public-url ./", + "clean": "rimraf node_modules dist .cache", + "start": "parcel index.html --port=9000 --no-hmr" + }, + "dependencies": { + "@carbon/styles": "^1.34.0", + "@carbon/web-components": "latest", + "sass": "^1.64.1" + }, + "devDependencies": { + "@babel/core": "^7.0.0-0", + "parcel-bundler": "1.12.3", + "rimraf": "^3.0.2" + } +} diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/sandbox.config.json b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/sandbox.config.json new file mode 100644 index 00000000000..a4df8557d7b --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "node" +} diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/index.js b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/index.js new file mode 100644 index 00000000000..8099e03865a --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/index.js @@ -0,0 +1,12 @@ +/** + * @license + * + * Copyright IBM Corp. 2020, 2022 + * + * 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 '@carbon/web-components/es/components/toggle-tip/index.js'; +import '@carbon/web-components/es/components/link/index.js'; +import '@carbon/web-components/es/components/button/index.js'; diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/styles.scss b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/styles.scss new file mode 100644 index 00000000000..5bde587c9b5 --- /dev/null +++ b/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip/src/styles.scss @@ -0,0 +1,9 @@ +@use '@carbon/styles/scss/reset'; +@use '@carbon/styles/scss/theme'; +@use '@carbon/styles/scss/themes'; + +:root { + @include theme.theme(themes.$white); + background-color: var(--cds-background); + color: var(--cds-text-primary); +} diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts b/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts index 8862273943c..00590bc0620 100644 --- a/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts +++ b/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts @@ -65,8 +65,8 @@ const defaultArgs = { titleText: 'This is an example title', value: '', warn: false, - warnText: 'please notice the warning', -} + warnText: 'please notice the warning', +}; const controls = { disabled: { @@ -74,8 +74,9 @@ const controls = { description: `Specify if the dropdown should be disabled, or not.`, }, direction: { - control: 'select', options: directionOptions, - description: `Dropdown direction` + control: 'select', + options: directionOptions, + description: `Dropdown direction`, }, hideLabel: { control: 'boolean', @@ -102,8 +103,9 @@ const controls = { description: `Specify if the dropdown should be read only, or not.`, }, size: { - control: 'select', options: sizes, - description: `Dropdown size.` + control: 'select', + options: sizes, + description: `Dropdown size.`, }, titleText: { control: 'text', @@ -136,7 +138,7 @@ export const Default = { ` )} - ` + `, }; export const WithLayer = { @@ -159,7 +161,7 @@ export const WithLayer = { - ` + `, }; export const Playground = { @@ -204,8 +206,8 @@ export const Playground = { ` )} - ` -} + `, +}; const meta = { title: 'Components/Combo box', diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts b/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts index 049ce8e9d0b..2f230d10902 100644 --- a/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts +++ b/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts @@ -73,8 +73,8 @@ const defaultArgs = { type: null, value: '', warn: false, - warnText: 'please notice the warning', -} + warnText: 'please notice the warning', +}; const controls = { disabled: { @@ -82,8 +82,9 @@ const controls = { description: `Specify if the dropdown should be disabled, or not.`, }, direction: { - control: 'select', options: directionOptions, - description: `Dropdown direction.` + control: 'select', + options: directionOptions, + description: `Dropdown direction.`, }, hideLabel: { control: 'boolean', @@ -114,16 +115,18 @@ const controls = { description: `Specify if the dropdown should be read only, or not.`, }, size: { - control: 'select', options: sizes, - description: `Dropdown size.` + control: 'select', + options: sizes, + description: `Dropdown size.`, }, titleText: { control: 'text', description: `Text that will be read by a screen reader when visiting this control.`, }, type: { - control: 'select', options: types, - description: `Dropdown size.` + control: 'select', + options: types, + description: `Dropdown size.`, }, value: { control: 'text', @@ -153,7 +156,7 @@ export const Default = { ` )} - ` + `, }; export const Inline = { @@ -170,7 +173,7 @@ export const Inline = { ` )} - ` + `, }; export const InlineWithLayer = { @@ -193,7 +196,7 @@ export const InlineWithLayer = { - ` + `, }; export const WithLayer = { @@ -216,7 +219,7 @@ export const WithLayer = { - ` + `, }; export const Playground = { @@ -239,32 +242,32 @@ export const Playground = { warn, warnText, }) => - html` - - ${items.map( - (elem) => html` - ${elem.text} - ` - )} - - ` + html` + + ${items.map( + (elem) => html` + ${elem.text} + ` + )} + + `, }; export const Skeleton = { @@ -273,8 +276,8 @@ export const Skeleton = { skip: true, }, }, - render: () => html` ` -} + render: () => html` `, +}; const meta = { title: 'Components/Dropdown', diff --git a/packages/carbon-web-components/src/components/layer/layer.stories.ts b/packages/carbon-web-components/src/components/layer/layer.stories.ts index 79ff1580ff1..7fccb76ffaa 100644 --- a/packages/carbon-web-components/src/components/layer/layer.stories.ts +++ b/packages/carbon-web-components/src/components/layer/layer.stories.ts @@ -20,15 +20,16 @@ const levels = { }; const defaultArgs = { - level: '0' -} + level: '0', +}; const controls = { level: { - control: 'radio', options: levels, - description: `Specify the layer level.` + control: 'radio', + options: levels, + description: `Specify the layer level.`, }, -} +}; export const Default = { render: () => html` @@ -44,7 +45,7 @@ export const Default = { - ` + `, }; export const CustomLevel = { @@ -56,7 +57,7 @@ export const CustomLevel = { - ` + `, }; export const UseLayer = { @@ -70,17 +71,17 @@ export const UseLayer = { }); return html` - -
+ +
+ - - - ` - } + + `; + }, }; export const Playground = { @@ -91,7 +92,7 @@ export const Playground = { skip: true, }, }, - render: ({level}) => html` + render: ({ level }) => html`
Test component
 diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx b/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx deleted file mode 100644 index 50064ebcf4a..00000000000 --- a/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx +++ /dev/null @@ -1,105 +0,0 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; -import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; - -# Tooltip - -> 💡 Check our -> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/basic/components/tooltip) -> example implementation. - -[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/stackblitz/basic/components/tooltip) - -Tooltips provide additional information upon hover or focus. The information -should be contextual, useful, and nonessential information. Keep tooltips short. - -## Getting started - -Here's a quick example to get you started. - -### JS (via import) - -```javascript -import '@carbon/web-components/es/components/tooltip/index.js'; -``` - - - - -### HTML - -```html - - -

- This is some tooltip text. This box shows the maximum amount of text that - should appear inside. If more room is needed please use a modal instead. -

- - Learn MoreCreate - - - -``` - -## Interactive tooltip (default) - -Interactive tooltips may contain rich text and other interactive elements like -buttons or links. In general, hiding interactive content in a tooltip is -discouraged. Interactive tooltips are best used for onboarding experiences and -product tours. - -- If a user may need to visit an external resource, like while using a form, - include a link in your interactive tooltip -- Don’t use without a label. Consider the context a user needs before clicking a - link - -### `` attributes and properties - -Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. -``) and `false` means not setting the attribute (e.g. -`` without `open` attribute). - - - -## Definition tooltip - -The definition tooltip provides additional help or defines an item or term. It -may be used on the label of a UI element, or on a word embedded in a paragraph. - -- Should contain brief, read-only text -- Use on proper nouns, technical terms, or acronyms with two letters or more -- Do not use a definition tooltip on words with fewer than two letters - -```html - - Definition Tooltip - -``` - -### `` attributes and properties - - - -## Icon tooltip - -An icon tooltip is used to clarify the action or name of an interactive icon -button. - -- The tooltip content should only contain one or two words. - -```html - - ${Filter16()} - -``` - -### `` attributes and properties - - diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts b/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts deleted file mode 100644 index 2ed06a0c498..00000000000 --- a/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts +++ /dev/null @@ -1,70 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { html } from 'lit'; -import { select } from '@storybook/addon-knobs'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { prefix } from '../../globals/settings'; -import './toggletip'; -import '../button'; -import { POPOVER_ALIGNMENT } from '../popover/defs'; -import storyDocs from './toggletip-story.mdx'; - -const tooltipAlignments = { - [`top`]: POPOVER_ALIGNMENT.TOP, - [`top-left`]: POPOVER_ALIGNMENT.TOP_LEFT, - [`top-right`]: POPOVER_ALIGNMENT.TOP_RIGHT, - [`bottom`]: POPOVER_ALIGNMENT.BOTTOM, - [`bottom-left`]: POPOVER_ALIGNMENT.BOTTOM_LEFT, - [`bottom-right`]: POPOVER_ALIGNMENT.BOTTOM_RIGHT, - [`left`]: POPOVER_ALIGNMENT.LEFT, - [`left-bottom`]: POPOVER_ALIGNMENT.LEFT_BOTTOM, - [`left-top`]: POPOVER_ALIGNMENT.LEFT_TOP, - [`right`]: POPOVER_ALIGNMENT.RIGHT, - [`right-bottom`]: POPOVER_ALIGNMENT.RIGHT_BOTTOM, - [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP, -}; - -export const Default = (args) => { - const { alignment, bodyText } = args?.[`${prefix}-toggletip`] ?? {}; - return html` - - Toggletip label - -

${bodyText}

- Test - Button - - `; -}; - -Default.parameters = { - knobs: { - [`${prefix}-toggletip`]: () => ({ - alignment: select( - 'Toggletip alignment to trigger button (alignment)', - tooltipAlignments, - POPOVER_ALIGNMENT.BOTTOM - ), - bodyText: textNullable( - 'Toggletip content (bodyText)', - `Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.` - ), - }), - }, -}; - -export default { - title: 'Components/Toggletip', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx b/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx new file mode 100644 index 00000000000..94316d26eb3 --- /dev/null +++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip.mdx @@ -0,0 +1,49 @@ +import { ArgsTable, Description, Meta } from '@storybook/blocks'; +import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; + +# Toggletip + +> 💡 Check our +> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/basic/components/toggletip) +> example implementation. + +[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/stackblitz/basic/components/toggletip) + +The Toggletip component provides an accessible way to render interactive content within a popover. If you do not have any interactive content inside of your Toggletip, consider using Tooltip instead. + +## Getting started + +Here's a quick example to get you started. + +### JS (via import) + +```javascript +import '@carbon/web-components/es/components/toggle-tip/index.js'; +import '@carbon/web-components/es/components/link/index.js'; +import '@carbon/web-components/es/components/button/index.js'; +``` + + + + +### HTML + +```html + + Toggletip label + +

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+ Test + Button + +``` + +### `` attributes and properties + +Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. +``) and `false` means not setting the attribute (e.g. +`` without `open` attribute). + + diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss b/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss index 9cce2504793..340bef4557a 100644 --- a/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss +++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2023 + * Copyright IBM Corp. 2019, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -12,6 +12,7 @@ @use '@carbon/styles/scss/utilities'; @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/type' as *; @use '@carbon/styles/scss/components/toggletip/index' as *; @use '@carbon/styles/scss/components/tooltip/index' as *; @use '@carbon/styles/scss/utilities/button-reset'; @@ -31,4 +32,8 @@ .#{$prefix}--popover-caret { background-color: $background-inverse; } + + ::slotted([slot='body-text']) { + all: unset !important; + } } diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts b/packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts new file mode 100644 index 00000000000..686bd3d88aa --- /dev/null +++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip.stories.ts @@ -0,0 +1,107 @@ +/** + * @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 './toggletip'; +import '../button'; +import { POPOVER_ALIGNMENT } from '../popover/defs'; +import storyDocs from './toggletip.mdx'; + +const tooltipAlignments = { + [`top`]: POPOVER_ALIGNMENT.TOP, + [`top-left`]: POPOVER_ALIGNMENT.TOP_LEFT, + [`top-right`]: POPOVER_ALIGNMENT.TOP_RIGHT, + [`bottom`]: POPOVER_ALIGNMENT.BOTTOM, + [`bottom-left`]: POPOVER_ALIGNMENT.BOTTOM_LEFT, + [`bottom-right`]: POPOVER_ALIGNMENT.BOTTOM_RIGHT, + [`left`]: POPOVER_ALIGNMENT.LEFT, + [`left-bottom`]: POPOVER_ALIGNMENT.LEFT_BOTTOM, + [`left-top`]: POPOVER_ALIGNMENT.LEFT_TOP, + [`right`]: POPOVER_ALIGNMENT.RIGHT, + [`right-bottom`]: POPOVER_ALIGNMENT.RIGHT_BOTTOM, + [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP, +}; + +const defaultArgs = { + alignment: 'bottom', + open: true, +}; + +const controls = { + alignment: { + control: 'select', + description: 'Specify how the toggletip should align with the button', + options: tooltipAlignments, + }, + open: { + control: 'boolean', + description: 'Specify if the toggletip should be open', + }, +}; + +export const Default = { + render: () => html` +
+
+ + Toggletip label + +

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+ Test + Button + +
+
+
+
+ + Toggletip label -- using open prop + +

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+ Test + Button + +
+
+ `, +}; + +export const Playground = { + argTypes: controls, + args: defaultArgs, + render: ({ alignment, open }) => html` + + Toggletip label -- using open prop + +

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+ Test + Button + + `, +}; + +const meta = { + title: 'Components/Toggletip', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta; diff --git a/packages/carbon-web-components/src/components/toggle/toggle-story.ts b/packages/carbon-web-components/src/components/toggle/toggle-story.ts deleted file mode 100644 index 8c64efa6ccb..00000000000 --- a/packages/carbon-web-components/src/components/toggle/toggle-story.ts +++ /dev/null @@ -1,107 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { html } from 'lit'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { action } from '@storybook/addon-actions'; -import { boolean, select } from '@storybook/addon-knobs'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import { prefix } from '../../globals/settings'; -import { TOGGLE_SIZE } from './toggle'; -import storyDocs from './toggle-story.mdx'; - -const sizes = { - 'Regular size': null, - [`Small size (${TOGGLE_SIZE.SMALL})`]: TOGGLE_SIZE.SMALL, -}; - -export const Default = (args) => { - const { onChange } = args?.[`${prefix}-toggle`] ?? {}; - return html` - - `; -}; - -Default.storyName = 'Default'; - -export const SmallToggle = (args) => { - const { onChange } = args?.[`${prefix}-toggle`] ?? {}; - return html` - - `; -}; - -SmallToggle.storyName = 'Small toggle'; - -export const Playground = (args) => { - const { - checked, - labelA, - disabled, - hideLabel, - labelText, - readOnly, - name, - size, - labelB, - value, - onChange, - } = args?.[`${prefix}-toggle`] ?? {}; - return html` - - `; -}; - -Playground.storyName = 'Playground'; -Playground.parameters = { - knobs: { - [`${prefix}-toggle`]: () => ({ - checked: boolean('Checked (checked)', true), - labelA: textNullable('Text for checked state (label-a)', 'On'), - disabled: boolean('Disabled (disabled)', false), - hideLabel: boolean('Hide label (hideLabel)', false), - labelText: textNullable('Label text (label-text)', ''), - readOnly: boolean('Read only (read-only)', false), - name: textNullable('Name (name)', ''), - size: select('Toggle size (size)', sizes, null), - labelB: textNullable('Text for unchecked state (label-b)', 'Off'), - value: textNullable('Value (value)', ''), - onChange: action(`${prefix}-toggle-changed`), - }), - }, -}; - -export default { - title: 'Components/Toggle', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/packages/carbon-web-components/src/components/toggle/toggle-story.mdx b/packages/carbon-web-components/src/components/toggle/toggle.mdx similarity index 93% rename from packages/carbon-web-components/src/components/toggle/toggle-story.mdx rename to packages/carbon-web-components/src/components/toggle/toggle.mdx index 1912dc63d46..1bb4e1d0a5e 100644 --- a/packages/carbon-web-components/src/components/toggle/toggle-story.mdx +++ b/packages/carbon-web-components/src/components/toggle/toggle.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Description, Meta } from '@storybook/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # Toggle @@ -47,4 +47,4 @@ import '@carbon/web-components/es/components/toggle/index.js'; ## `` attributes, properties and events - + diff --git a/packages/carbon-web-components/src/components/toggle/toggle.stories.ts b/packages/carbon-web-components/src/components/toggle/toggle.stories.ts new file mode 100644 index 00000000000..f230c52539e --- /dev/null +++ b/packages/carbon-web-components/src/components/toggle/toggle.stories.ts @@ -0,0 +1,120 @@ +/** + * @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 './index'; +import '../stack/index'; +import { TOGGLE_SIZE } from './toggle'; +import storyDocs from './toggle.mdx'; + +const sizes = { + 'Regular size': null, + [`Small size (${TOGGLE_SIZE.SMALL})`]: TOGGLE_SIZE.SMALL, +}; + +const defaultArgs = { + labelA: 'On', + labelB: 'Off', + checked: true, +}; + +const controls = { + disabled: { + control: 'boolean', + description: 'Whether this control should be disabled', + }, + hideLabel: { + control: 'boolean', + description: + "If true, the side labels (props.labelA and props.labelB) will be replaced by props.labelText (if passed), so that the toggle doesn't render a top label.", + }, + labelA: { + control: 'text', + description: 'The text for the checked state.', + }, + labelB: { + control: 'text', + description: 'The text for the unchecked state', + }, + labelText: { + control: 'text', + description: 'The text that is read for the control', + }, + readonly: { + control: 'boolean', + description: 'Whether the toggle should be read-only', + }, + size: { + control: 'radio', + description: + "Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)", + options: sizes, + }, + checked: { + control: 'boolean', + description: 'Specify whether the control is toggled', + }, +}; + +export const Default = { + render: () => html` + + `, +}; + +export const SmallToggle = { + render: () => html` + + `, +}; + +export const Playground = { + argTypes: controls, + args: defaultArgs, + render: ({ + disabled, + hideLabel, + labelA, + labelB, + labelText, + readonly, + size, + checked, + }) => html` + + `, +}; + +const meta = { + title: 'Components/Toggle', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta; diff --git a/packages/carbon-web-components/tests/spec/toggle_spec.ts b/packages/carbon-web-components/tests/spec/toggle_spec.ts index 2bda1322587..822a8258a44 100644 --- a/packages/carbon-web-components/tests/spec/toggle_spec.ts +++ b/packages/carbon-web-components/tests/spec/toggle_spec.ts @@ -8,7 +8,7 @@ */ import { html, render } from 'lit'; -import { Default } from '../../src/components/toggle/toggle-story'; +import { Default } from '../../src/components/toggle/toggle.stories'; /** * @param formData A `FormData` instance. From 0770bc470fdef9f55acc6c3fd50cd17199eb9511 Mon Sep 17 00:00:00 2001 From: Ignacio Becerra Date: Thu, 18 Jan 2024 11:03:00 -0800 Subject: [PATCH 3/4] feat(storybook): updated 5 components to v7 (#11397) * feat(structured-list): update to v7 * feat(tabs): update to v7 * feat(ui-shell): update to v7 * feat(text-input): update to v7 * feat(textarea): update to v7 * fix(prettier): ran prettier --------- Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> --- .../carbon-web-components/.storybook/main.ts | 10 + .../structured-list/structured-list-story.ts | 225 ------ ...red-list-story.mdx => structured-list.mdx} | 6 +- .../structured-list.stories.ts | 251 +++++++ .../src/components/tabs/tabs-story.ts | 255 ------- .../tabs/{tabs-story.mdx => tabs.mdx} | 10 +- .../src/components/tabs/tabs.stories.ts | 301 ++++++++ .../components/text-input/text-input-story.ts | 164 ---- .../{text-input-story.mdx => text-input.mdx} | 10 +- .../text-input/text-input.stories.ts | 227 ++++++ .../src/components/textarea/textarea-story.ts | 111 --- .../{textarea-story.mdx => textarea.mdx} | 8 +- .../components/textarea/textarea.stories.ts | 183 +++++ .../{ui-shell-story.mdx => ui-shell.mdx} | 30 +- ...{ui-shell-story.ts => ui-shell.stories.ts} | 706 +++++++++--------- .../tests/spec/structured-list_spec.ts | 2 +- .../tests/spec/tabs_spec.ts | 2 +- .../tests/spec/text-input_spec.ts | 2 +- .../tests/spec/textarea_spec.ts | 2 +- 19 files changed, 1361 insertions(+), 1144 deletions(-) delete mode 100644 packages/carbon-web-components/src/components/structured-list/structured-list-story.ts rename packages/carbon-web-components/src/components/structured-list/{structured-list-story.mdx => structured-list.mdx} (96%) create mode 100644 packages/carbon-web-components/src/components/structured-list/structured-list.stories.ts delete mode 100644 packages/carbon-web-components/src/components/tabs/tabs-story.ts rename packages/carbon-web-components/src/components/tabs/{tabs-story.mdx => tabs.mdx} (95%) create mode 100644 packages/carbon-web-components/src/components/tabs/tabs.stories.ts delete mode 100644 packages/carbon-web-components/src/components/text-input/text-input-story.ts rename packages/carbon-web-components/src/components/text-input/{text-input-story.mdx => text-input.mdx} (86%) create mode 100644 packages/carbon-web-components/src/components/text-input/text-input.stories.ts delete mode 100644 packages/carbon-web-components/src/components/textarea/textarea-story.ts rename packages/carbon-web-components/src/components/textarea/{textarea-story.mdx => textarea.mdx} (91%) create mode 100644 packages/carbon-web-components/src/components/textarea/textarea.stories.ts rename packages/carbon-web-components/src/components/ui-shell/{ui-shell-story.mdx => ui-shell.mdx} (93%) rename packages/carbon-web-components/src/components/ui-shell/{ui-shell-story.ts => ui-shell.stories.ts} (72%) diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts index f99232c31d1..56731736d57 100644 --- a/packages/carbon-web-components/.storybook/main.ts +++ b/packages/carbon-web-components/.storybook/main.ts @@ -86,6 +86,10 @@ const stories = glob.sync( '../src/**/skip-to-content.stories.ts', '../src/**/slider.mdx', '../src/**/slider.stories.ts', + '../src/**/structured-list.stories.ts', + '../src/**/structured-list.mdx', + '../src/**/tabs.stories.ts', + '../src/**/tabs.mdx', '../src/**/slug.mdx', '../src/**/slug.stories.ts', '../src/**/slug-example.stories.ts', @@ -93,8 +97,14 @@ const stories = glob.sync( '../src/**/slug-form.stories.ts', '../src/**/tag.mdx', '../src/**/tag.stories.ts', + '../src/**/textarea.mdx', + '../src/**/textarea.stories.ts', + '../src/**/text-input.mdx', + '../src/**/text-input.stories.ts', '../src/**/tooltip.mdx', '../src/**/tooltip.stories.ts', + '../src/**/ui-shell.mdx', + '../src/**/ui-shell.stories.ts', '../src/**/toggle.mdx', '../src/**/toggle.stories.ts', '../src/**/toggletip.mdx', diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts b/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts deleted file mode 100644 index 69069bbb24d..00000000000 --- a/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts +++ /dev/null @@ -1,225 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { html } from 'lit'; -import { boolean } from '@storybook/addon-knobs'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import './structured-list'; -import './structured-list-head'; -import './structured-list-header-row'; -import './structured-list-header-cell'; -import './structured-list-body'; -import './structured-list-row'; -import './structured-list-cell'; -import './structured-list-header-cell-skeleton'; -import storyDocs from './structured-list-story.mdx'; -import { prefix } from '../../globals/settings'; - -export const Default = (args) => { - const { hasSelection } = args?.[`${prefix}-structured-list`] ?? {}; - const selectionName = !hasSelection ? undefined : 'structured-list-selection'; - const selectionValues = !hasSelection - ? [] - : [ - 'structured-list-selection-0', - 'structured-list-selection-1', - 'structured-list-selection-2', - ]; - return html` - - - - - ColumnA - - - ColumnB - - - ColumnC - - - - - Row 1 - Row 1 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque - vulputate nisl a porttitor interdum. - - - Row 2 - Row 2 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque - vulputate nisl a porttitor interdum. - - - - `; -}; - -export const Selection = () => { - const selectionName = 'structured-list-selection'; - const selectionValues = [ - 'structured-list-selection-0', - 'structured-list-selection-1', - 'structured-list-selection-2', - 'structured-list-selection-3', - ]; - return html` - - - - - ColumnA - - - ColumnB - - - ColumnC - - - - - ${selectionValues.map( - (selectionValue, index) => html` - Row ${index} - Row ${index} - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean - posuere sem vel euismod dignissim. Nulla ut cursus dolor. - Pellentesque vulputate nisl a porttitor - interdum. - ` - )} - - - `; -}; - -export const Playground = (args) => { - const { condensed, flush, hasSelection } = - args?.[`${prefix}-structured-list`] ?? {}; - const selectionName = !hasSelection ? undefined : 'structured-list-selection'; - const selectionValues = !hasSelection - ? [] - : [ - 'structured-list-selection-0', - 'structured-list-selection-1', - 'structured-list-selection-2', - ]; - return html` - - - - - ColumnA - - - ColumnB - - - ColumnC - - - - - Row 1 - Row 1 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque - vulputate nisl a porttitor interdum. - - - Row 2 - Row 2 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque - vulputate nisl a porttitor interdum. - - - - `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-structured-list`]: () => ({ - condensed: boolean('Condensed (condensed)', false), - flush: boolean('Flush (flush)', false), - hasSelection: boolean( - 'Supports selection feature (has-selection)', - false - ), - }), - }, -}; - -export const skeleton = () => html` -
- ${Array.apply(null, Array(2)).map( - () => html` - - - - ${Array.apply(null, Array(3)).map( - () => html` - - - ` - )} - - - - ${Array.apply(null, Array(5)).map( - () => html` - - - - ` - )} - - - ` - )} -
-`; - -skeleton.parameters = { - percy: { - skip: true, - }, -}; - -export default { - title: 'Components/Structured list', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx b/packages/carbon-web-components/src/components/structured-list/structured-list.mdx similarity index 96% rename from packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx rename to packages/carbon-web-components/src/components/structured-list/structured-list.mdx index 7784c896329..639ac9c5482 100644 --- a/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx +++ b/packages/carbon-web-components/src/components/structured-list/structured-list.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Description } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # Structured list @@ -108,7 +108,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `has-selection` attribute). - + ## `` attributes and properties @@ -116,4 +116,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `selected` attribute). - + diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list.stories.ts b/packages/carbon-web-components/src/components/structured-list/structured-list.stories.ts new file mode 100644 index 00000000000..c7ccbdcf634 --- /dev/null +++ b/packages/carbon-web-components/src/components/structured-list/structured-list.stories.ts @@ -0,0 +1,251 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import './structured-list'; +import './structured-list-head'; +import './structured-list-header-row'; +import './structured-list-header-cell'; +import './structured-list-body'; +import './structured-list-row'; +import './structured-list-cell'; +import './structured-list-header-cell-skeleton'; +import storyDocs from './structured-list.mdx'; + +const defaultArgs = { + condensed: false, + flush: false, + hasSelection: false, +}; + +const controls = { + condensed: { + control: 'boolean', + description: 'Condensed (condensed)', + }, + flush: { + control: 'boolean', + description: 'Flush (flush)', + }, + hasSelection: { + control: 'boolean', + description: 'Supports selection feature (has-selection)', + }, +}; + +export const Default = { + argTypes: { + hasSelection: { + control: 'boolean', + description: 'Supports selection feature (has-selection)', + }, + }, + args: { hasSelection: false }, + render: ({ hasSelection }) => { + const selectionName = !hasSelection + ? undefined + : 'structured-list-selection'; + const selectionValues = !hasSelection + ? [] + : [ + 'structured-list-selection-0', + 'structured-list-selection-1', + 'structured-list-selection-2', + ]; + return html` + + + + + ColumnA + + + ColumnB + + + ColumnC + + + + + Row 1 + Row 1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + Row 2 + Row 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + `; + }, +}; + +export const Selection = { + render: () => { + const selectionName = 'structured-list-selection'; + const selectionValues = [ + 'structured-list-selection-0', + 'structured-list-selection-1', + 'structured-list-selection-2', + 'structured-list-selection-3', + ]; + + return html` + + + + + ColumnA + + + ColumnB + + + ColumnC + + + + + ${selectionValues.map( + (selectionValue, index) => html` + Row ${index} + Row ${index} + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc + dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean + posuere sem vel euismod dignissim. Nulla ut cursus dolor. + Pellentesque vulputate nisl a porttitor + interdum. + ` + )} + + + `; + }, +}; + +export const Playground = { + args: defaultArgs, + argTypes: controls, + render: ({ condensed, flush, hasSelection }) => { + const selectionName = !hasSelection + ? undefined + : 'structured-list-selection'; + const selectionValues = !hasSelection + ? [] + : [ + 'structured-list-selection-0', + 'structured-list-selection-1', + 'structured-list-selection-2', + ]; + return html` + + + + + ColumnA + + + ColumnB + + + ColumnC + + + + + Row 1 + Row 1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + Row 2 + Row 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + `; + }, +}; + +export const skeleton = { + parameters: { + percy: { + skip: true, + }, + }, + render: () => html` +
+ ${Array.apply(null, Array(2)).map( + () => html` + + + + ${Array.apply(null, Array(3)).map( + () => html` + + + ` + )} + + + + ${Array.apply(null, Array(5)).map( + () => html` + + + + ` + )} + + + ` + )} +
+ `, +}; + +export default { + title: 'Components/Structured list', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; diff --git a/packages/carbon-web-components/src/components/tabs/tabs-story.ts b/packages/carbon-web-components/src/components/tabs/tabs-story.ts deleted file mode 100644 index ffef7f42bb1..00000000000 --- a/packages/carbon-web-components/src/components/tabs/tabs-story.ts +++ /dev/null @@ -1,255 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { html } from 'lit'; -import { action } from '@storybook/addon-actions'; -import { boolean, select } from '@storybook/addon-knobs'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { TABS_TYPE } from './tabs'; -import './tab'; -import './tabs-skeleton'; -import './tab-skeleton'; -import styles from './tabs-story.scss?lit'; -import storyDocs from './tabs-story.mdx'; -import { prefix } from '../../globals/settings'; - -const noop = () => {}; - -const types = { - 'Regular type': null, - [`Container type (${TABS_TYPE.CONTAINED})`]: TABS_TYPE.CONTAINED, -}; - -export const Default = () => html` - - - Tab label 1 - - Tab label 2 - - - Tab label 3 - - Tab label 4 - -
- - - - -
-`; - -export const Contained = () => html` - - - Tab label 1 - - Tab label 2 - - - Tab label 3 - - Tab label 4 - - Tab label 5 - - -
- - - - - -
-`; - -export const skeleton = () => html` - - - - - - - -`; - -skeleton.parameters = { - percy: { - skip: true, - }, -}; - -export const Playground = (args) => { - const { - triggerContent, - type, - value, - disableSelection, - onBeforeSelect = noop, - onSelect = noop, - } = args?.[`${prefix}-tabs`] || {}; - const handleBeforeSelected = (event: CustomEvent) => { - onBeforeSelect(event); - if (disableSelection) { - event.preventDefault(); - } - }; - return html` - - - Tab label 1 - - Tab label 2 - - - Tab label 3 - - Tab label 4 - -
- - - - -
- `; -}; - -Playground.parameters = { - ...storyDocs.parameters, - knobs: { - [`${prefix}-tabs`]: () => ({ - triggerContent: textNullable( - 'The default content of the trigger button for narrow screen (trigger-content)', - 'Select an item' - ), - type: select('Tabs type (type)', types, null), - value: textNullable('The value of the selected item (value)', 'all'), - disableSelection: boolean( - `Disable user-initiated selection change (Call event.preventDefault() in ${prefix}-content-switcher-beingselected event)`, - false - ), - onBeforeSelect: action(`${prefix}-tabs-beingselected`), - onSelect: action(`${prefix}-tabs-selected`), - }), - }, -}; - -export default { - title: 'Components/Tabs', -}; diff --git a/packages/carbon-web-components/src/components/tabs/tabs-story.mdx b/packages/carbon-web-components/src/components/tabs/tabs.mdx similarity index 95% rename from packages/carbon-web-components/src/components/tabs/tabs-story.mdx rename to packages/carbon-web-components/src/components/tabs/tabs.mdx index cdb86e1d57f..ecc70660977 100644 --- a/packages/carbon-web-components/src/components/tabs/tabs-story.mdx +++ b/packages/carbon-web-components/src/components/tabs/tabs.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgTypes, Markdown } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # Tabs @@ -27,8 +27,8 @@ import '@carbon/web-components/es/components/tabs/index.js'; @use '@carbon/styles/scss/components/tabs'; ``` - - +{`${cdnJs({ components: ['tabs'] })}`} +{`${cdnCss()}`} ### HTML @@ -122,7 +122,7 @@ For the skeleton variation, utilize `` and Note: `cds-content-switcher-*` events are not fired from ``. - + ## `` attributes, properties and events @@ -130,4 +130,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `disabled` attribute). - + diff --git a/packages/carbon-web-components/src/components/tabs/tabs.stories.ts b/packages/carbon-web-components/src/components/tabs/tabs.stories.ts new file mode 100644 index 00000000000..7b961ba40fb --- /dev/null +++ b/packages/carbon-web-components/src/components/tabs/tabs.stories.ts @@ -0,0 +1,301 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { TABS_TYPE } from './tabs'; +import styles from './tabs-story.scss?lit'; +import storyDocs from './tabs.mdx'; +import { prefix } from '../../globals/settings'; +import '../button'; +import '../checkbox'; +import './index'; +import '../text-input'; + +const types = { + 'Regular type': null, + [`Container type (${TABS_TYPE.CONTAINED})`]: TABS_TYPE.CONTAINED, +}; + +const args = { + triggerContent: 'Select an item', + type: null, + value: 'all', + disableSelection: false, +}; + +const argTypes = { + triggerContent: { + control: 'text', + description: + 'The default content of the trigger button for narrow screen (trigger-content)', + }, + type: { + control: 'select', + description: 'Tabs type (type)', + options: types, + }, + value: { + control: 'text', + description: 'The value of the selected item (value)', + }, + disableSelection: { + control: 'boolean', + description: `Disable user-initiated selection change (Call event.preventDefault() in ${prefix}-content-switcher-beingselected event)`, + }, + onBeforeSelect: { + action: `${prefix}-tabs-beingselected`, + table: { + disable: true, + }, + }, + onSelect: { + action: `${prefix}-tabs-selected`, + table: { + disable: true, + }, + }, +}; + +export const Default = { + render: () => html` + + + Tab label 1 + + Tab label 2 + + + Tab label 3 + + Tab label 4 + +
+ + + + +
+ `, +}; + +export const Contained = { + render: () => html` + + + Tab label 1 + + Tab label 2 + + + Tab label 3 + + Tab label 4 + + Tab label 5 + + +
+ + + + + +
+ `, +}; + +export const skeleton = { + parameters: { + percy: { + skip: true, + }, + }, + render: () => html` + + + + + + + + `, +}; + +export const Playground = { + args, + argTypes, + render: ({ + triggerContent, + type, + value, + disableSelection, + onBeforeSelect, + onSelect, + }) => { + const handleBeforeSelected = (event: CustomEvent) => { + onBeforeSelect(event); + if (disableSelection) { + event.preventDefault(); + } + }; + return html` + + + Tab label 1 + + Tab label 2 + + + Tab label 3 + + Tab label 4 + +
+ + + + +
+ `; + }, +}; + +export default { + title: 'Components/Tabs', + actions: { argTypesRegex: '^on.*' }, + parameters: { + docs: { + page: storyDocs, + }, + }, +}; diff --git a/packages/carbon-web-components/src/components/text-input/text-input-story.ts b/packages/carbon-web-components/src/components/text-input/text-input-story.ts deleted file mode 100644 index f1c9f92b208..00000000000 --- a/packages/carbon-web-components/src/components/text-input/text-input-story.ts +++ /dev/null @@ -1,164 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { html } from 'lit'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { boolean, select, number } from '@storybook/addon-knobs'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import storyDocs from './text-input-story.mdx'; -import { prefix } from '../../globals/settings'; -import './index'; -import '../layer'; -import '../form/form-item'; -import '../../../.storybook/templates/with-layer'; - -import { action } from '@storybook/addon-actions'; -import { INPUT_SIZE } from './text-input'; - -const sizes = { - [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL, - [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM, - [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE, -}; - -export const Default = () => { - return html` - - - `; -}; - -Default.storyName = 'Default'; - -export const ReadOnly = () => { - return html` - - - `; -}; - -export const Skeleton = () => { - return html` `; -}; - -export const TogglePasswordVisibility = () => { - return html` - - - `; -}; - -export const WithLayer = () => { - return html` - - - - - `; -}; - -export const Playground = (args) => { - const { - disabled, - enableCounter, - helperText, - hideLabel, - inline, - invalid, - invalidText, - labelText, - maxCount, - placeholder, - playgroundWidth, - readonly, - size, - type, - value, - warn, - warnText, - onInput, - } = args?.[`${prefix}-input`] ?? {}; - return html` -
- - -
- `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-input`]: () => ({ - disabled: boolean('Disabled (disabled)', false), - enableCounter: boolean('Enable counter (enable-counter)', false), - helperText: textNullable('Helper text (helper-text)', 'Helper text'), - hideLabel: boolean('Hide label (hide-label)', false), - inline: boolean('Inline (inline)', false), - invalid: boolean('Invalid (invalid)', false), - invalidText: textNullable( - 'Invalid text (invalid-text)', - 'Error message goes here' - ), - labelText: textNullable('Label text (label)', 'Label text'), - maxCount: textNullable('Max count (max-count)', '100'), - placeholder: textNullable( - 'Placeholder (placeholder)', - 'Placeholder text' - ), - playgroundWidth: number('Playground width', 300, { - range: true, - min: 300, - max: 800, - step: 50, - }), - size: select('Size (size)', sizes, INPUT_SIZE.MEDIUM), - readonly: boolean('Read only (readonly)', false), - type: textNullable('Type (type)', 'text'), - warn: boolean('Warn (warn)', false), - warnText: textNullable( - 'Warn text (warn-text)', - 'Warning message that is really long can wrap to more lines but should not be excessively long.' - ), - value: textNullable('Value of input (value)', ''), - onInput: action(`${prefix}-select-selected`), - }), - }, -}; - -export default { - title: 'Components/Text Input', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/packages/carbon-web-components/src/components/text-input/text-input-story.mdx b/packages/carbon-web-components/src/components/text-input/text-input.mdx similarity index 86% rename from packages/carbon-web-components/src/components/text-input/text-input-story.mdx rename to packages/carbon-web-components/src/components/text-input/text-input.mdx index e2f64bbfa4e..01de04de43f 100644 --- a/packages/carbon-web-components/src/components/text-input/text-input-story.mdx +++ b/packages/carbon-web-components/src/components/text-input/text-input.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgTypes, Markdown } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # Text Input @@ -23,8 +23,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/text-input/index.js'; ``` - - +{`${cdnJs({ components: ['text-input'] })}`} +{`${cdnCss()}`} ### HTML @@ -45,7 +45,7 @@ If the input is part of a form, make sure to import and wrap the input with import '@carbon/web-components/es/components/form/index.js'; ``` - +{`${cdnJs({ components: ['form'] })}`} ```html @@ -63,4 +63,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `required` attribute). - + diff --git a/packages/carbon-web-components/src/components/text-input/text-input.stories.ts b/packages/carbon-web-components/src/components/text-input/text-input.stories.ts new file mode 100644 index 00000000000..35420531135 --- /dev/null +++ b/packages/carbon-web-components/src/components/text-input/text-input.stories.ts @@ -0,0 +1,227 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import storyDocs from './text-input.mdx'; +import { prefix } from '../../globals/settings'; +import './index'; +import '../form/form-item'; +import { INPUT_SIZE } from './text-input'; + +const sizes = { + [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL, + [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM, + [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE, +}; + +const args = { + disabled: false, + enableCounter: false, + helperText: 'Helper text', + hideLabel: false, + inline: false, + invalid: false, + invalidText: 'Error message goes here', + labelText: 'Label text', + maxCount: '100', + placeholder: 'Placeholder text', + playgroundWidth: 300, + size: INPUT_SIZE.MEDIUM, + readonly: false, + type: 'text', + warn: false, + warnText: + 'Warning message that is really long can wrap to more lines but should not be excessively long.', + value: '', + onInput: `${prefix}-select-selected`, +}; + +const argTypes = { + disabled: { + control: 'boolean', + description: 'Disabled (disabled)', + }, + enableCounter: { + control: 'boolean', + description: 'Enable counter (enable-counter)', + }, + helperText: { + control: 'text', + description: 'Helper text (helper-text)', + }, + hideLabel: { + control: 'boolean', + description: 'Hide label (hide-label)', + }, + inline: { + control: 'boolean', + description: 'Inline (inline)', + }, + invalid: { + control: 'boolean', + description: 'Invalid (invalid)', + }, + invalidText: { + control: 'text', + description: 'Invalid text (invalid-text)', + }, + labelText: { + control: 'text', + description: 'Label text (label)', + }, + maxCount: { + control: 'text', + description: 'Max count (max-count)', + }, + placeholder: { + control: 'text', + description: 'Placeholder (placeholder)', + }, + playgroundWidth: { + control: 'number', + description: 'Playground width', + options: { + range: true, + min: 300, + max: 800, + step: 50, + }, + }, + size: { + control: 'select', + description: 'Size (size)', + options: sizes, + }, + readonly: { + control: 'boolean', + description: 'Read only (readonly)', + }, + type: { + control: 'text', + description: 'Type (type)', + }, + warn: { + control: 'boolean', + description: 'Warn (warn)', + }, + warnText: { + control: 'text', + description: 'Warn text (warn-text)', + }, + value: { + control: 'text', + description: 'Value of input (value)', + }, + onInput: { + action: `${prefix}-select-selected`, + table: { + disable: true, + }, + }, +}; + +export const Default = { + render: () => html` + + + `, +}; + +export const ReadOnly = { + render: () => html` + + + `, +}; + +export const Skeleton = { + render: () => html` `, +}; + +export const TogglePasswordVisibility = { + render: () => html` + + + `, +}; + +export const WithLayer = { + render: () => html` + + + + + `, +}; + +export const Playground = { + args, + argTypes, + render: ({ + disabled, + enableCounter, + helperText, + hideLabel, + inline, + invalid, + invalidText, + labelText, + maxCount, + placeholder, + playgroundWidth, + readonly, + size, + type, + value, + warn, + warnText, + onInput, + }) => html` +
+ + +
+ `, +}; + +export default { + title: 'Components/Text Input', + actions: { argTypesRegex: '^on.*' }, + parameters: { + docs: { + page: storyDocs, + }, + }, +}; diff --git a/packages/carbon-web-components/src/components/textarea/textarea-story.ts b/packages/carbon-web-components/src/components/textarea/textarea-story.ts deleted file mode 100644 index 259b52a366f..00000000000 --- a/packages/carbon-web-components/src/components/textarea/textarea-story.ts +++ /dev/null @@ -1,111 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { html } from 'lit'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import * as knobs from '@storybook/addon-knobs'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import './textarea'; -import './textarea-skeleton'; -import '../form/form-item'; -import '../layer'; -import createProps from './stories/helpers'; -import storyDocs from './textarea-story.mdx'; -import { prefix } from '../../globals/settings'; -import '../../../.storybook/templates/with-layer'; - -export const Default = () => { - return html` - - - - - `; -}; - -Default.storyName = 'Default'; - -export const skeleton = () => - html` `; - -skeleton.parameters = { - percy: { - skip: true, - }, -}; - -export const WithLayer = () => { - return html` - - - - - `; -}; - -WithLayer.storyName = 'With Layer'; - -export const Playground = (args) => { - const { - cols, - disabled, - enableCounter, - helperText, - hideLabel, - invalid, - invalidText, - label, - maxCount, - onInput, - placeholder, - readonly, - rows, - value, - warn, - warnText, - } = args?.[`${prefix}-textarea`] ?? {}; - return html` - - - ${value} - - - `; -}; - -Playground.storyName = 'Playground'; - -Playground.parameters = { - knobs: { - [`${prefix}-textarea`]: () => createProps({ ...knobs, textNullable }), - }, -}; - -export default { - title: 'Components/Text Area', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/packages/carbon-web-components/src/components/textarea/textarea-story.mdx b/packages/carbon-web-components/src/components/textarea/textarea.mdx similarity index 91% rename from packages/carbon-web-components/src/components/textarea/textarea-story.mdx rename to packages/carbon-web-components/src/components/textarea/textarea.mdx index de11994cc3d..fdb3a7f4676 100644 --- a/packages/carbon-web-components/src/components/textarea/textarea-story.mdx +++ b/packages/carbon-web-components/src/components/textarea/textarea.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgTypes, Markdown } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # Textarea @@ -24,8 +24,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/textarea/index.js'; ``` - - +{`${cdnJs({ components: ['textarea'] })}`} +{`${cdnCss()}`} ### HTML @@ -70,4 +70,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `autofocus` attribute). - + diff --git a/packages/carbon-web-components/src/components/textarea/textarea.stories.ts b/packages/carbon-web-components/src/components/textarea/textarea.stories.ts new file mode 100644 index 00000000000..259df013a6f --- /dev/null +++ b/packages/carbon-web-components/src/components/textarea/textarea.stories.ts @@ -0,0 +1,183 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import './index'; +import '../form/form-item'; +import storyDocs from './textarea.mdx'; + +const args = { + cols: 0, + disabled: false, + enableCounter: true, + helperText: 'Textarea helper text', + hideLabel: false, + invalid: false, + invalidText: 'Invalid text', + label: 'Textarea label', + maxCount: 500, + onInput: 'input', + placeholder: '', + readonly: false, + rows: 4, + value: '', + warn: false, + warnText: 'This is a warning message.', +}; + +const argTypes = { + cols: { + control: 'number', + description: 'Number of columns (cols)', + }, + disabled: { + control: 'boolean', + description: 'Disabled (disabled)', + }, + enableCounter: { + control: 'boolean', + description: 'Enable character counter (enable-counter)', + }, + helperText: { + control: 'text', + description: 'Helper text (helper-text)', + }, + hideLabel: { + control: 'boolean', + description: 'Hide label (hide-label)', + }, + invalid: { + control: 'boolean', + description: 'Invalid (invalid)', + }, + invalidText: { + control: 'text', + description: 'Invalid text (invalid-text)', + }, + label: { + control: 'text', + description: 'Label (label)', + }, + maxCount: { + control: 'number', + description: 'Max character count (max-count)', + }, + onInput: { + action: `input`, + table: { + disable: true, + }, + }, + placeholder: { + control: 'text', + description: 'Placeholder text (placeholder)', + }, + readonly: { + control: 'boolean', + description: 'Read only (readonly)', + }, + rows: { + control: 'number', + description: 'Number of rows (rows)', + }, + value: { + control: 'text', + description: 'Value (value)', + }, + warn: { + control: 'boolean', + description: 'Warn (warn)', + }, + warnText: { + control: 'text', + description: 'Warn text (warn-text)', + }, +}; + +export const Default = { + render: () => html` + + + + + `, +}; + +export const skeleton = { + parameters: { + percy: { + skip: true, + }, + }, + render: () => html` `, +}; + +export const WithLayer = { + render: () => html` + + + + + `, +}; + +export const Playground = { + args, + argTypes, + render: ({ + cols, + disabled, + enableCounter, + helperText, + hideLabel, + invalid, + invalidText, + label, + maxCount, + onInput, + placeholder, + readonly, + rows, + value, + warn, + warnText, + }) => html` + + + ${value} + + + `, +}; + +export default { + title: 'Components/Text Area', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; diff --git a/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx b/packages/carbon-web-components/src/components/ui-shell/ui-shell.mdx similarity index 93% rename from packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx rename to packages/carbon-web-components/src/components/ui-shell/ui-shell.mdx index fab6ba477d0..c57eed87993 100644 --- a/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx +++ b/packages/carbon-web-components/src/components/ui-shell/ui-shell.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgTypes, Markdown } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; # UI Shell @@ -21,8 +21,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/ui-shell/index.js'; ``` - - +{`${cdnJs({ components: ['ui-shell'] })}`} +{`${cdnCss()}`} ### HTML @@ -181,7 +181,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `expanded` attribute). - + ### `` attributes and properties @@ -189,7 +189,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `active` attribute). - + ### `` attributes and properties @@ -197,7 +197,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `active` attribute). - + ### `` attributes and properties @@ -205,7 +205,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `active` attribute). - + ## Header nav @@ -221,17 +221,13 @@ Header nav in UI Shell consists of the following components: | `` | The expando button for side nav | | `` | The UI to show product name | - - - - ### `` attributes and properties - + ### `` attributes and properties - + ### `` attributes and properties @@ -239,7 +235,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `expanded` attribute). - + ### `` attributes and properties @@ -247,12 +243,12 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `active` attribute). - + ### `` attributes and properties - + ### `` attributes and properties - + diff --git a/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts b/packages/carbon-web-components/src/components/ui-shell/ui-shell.stories.ts similarity index 72% rename from packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts rename to packages/carbon-web-components/src/components/ui-shell/ui-shell.stories.ts index 91e6a40cca9..a6e56ca0ec7 100644 --- a/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts +++ b/packages/carbon-web-components/src/components/ui-shell/ui-shell.stories.ts @@ -23,7 +23,7 @@ import '../skip-to-content'; import '../modal/modal'; import '../button/button'; import styles from './ui-shell-story.scss?lit'; -import storyDocs from './ui-shell-story.mdx'; +import storyDocs from './ui-shell.mdx'; import { prefix } from '../../globals/settings'; const linksHref = 'https://www.carbondesignsystem.com/'; @@ -120,205 +120,217 @@ const StoryContent = ({ useResponsiveOffset = true }) => { `; }; -export const FixedSideNav = () => { - const result = html` - - - - - - L0 menu item - - - L0 menu item - - - L0 menu item - - - - - L0 menu item - - - L0 menu item - - - L0 menu item - - - - - L0 menu item - - - L0 menu item - - - L0 menu item - - - L0 link - L0 link - - - ${StoryContent({ useResponsiveOffset: false })} - `; - (result as any).hasMainTag = true; - return result; +export const FixedSideNav = { + name: 'Fixed SideNav', + render: () => { + const result = html` + + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + L0 link + L0 link + + + ${StoryContent({ useResponsiveOffset: false })} + `; + (result as any).hasMainTag = true; + return result; + }, }; -FixedSideNav.storyName = 'Fixed SideNav'; - -export const FixedSideNavDivider = () => { - const result = html` - - - - - - L0 menu item - - - L0 menu item - - - L0 menu item - - - - - L0 menu item - - - L0 menu item - - - L0 menu item - - - - - L0 menu item - - - L0 menu item - - - L0 menu item - - - - L0 link - L0 link - - - ${StoryContent({ useResponsiveOffset: false })} - `; - (result as any).hasMainTag = true; - return result; +export const FixedSideNavDivider = { + name: 'Fixed SideNav w/Divider', + render: () => { + const result = html` + + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + L0 link + L0 link + + + ${StoryContent({ useResponsiveOffset: false })} + `; + (result as any).hasMainTag = true; + return result; + }, }; -FixedSideNavDivider.storyName = 'Fixed SideNav w/ Divider'; - -export const FixedSideNavIcons = () => { - const result = html` - - - - - ${Fade16({ slot: 'title-icon' })} - - Link - - - Link - - - Link - - - - ${Fade16({ slot: 'title-icon' })} - - Link - - - Link - - - Link - - - - ${Fade16({ slot: 'title-icon' })} - - Link - - - Link - - - Link - - - ${Fade16({ slot: 'title-icon' })}Link - ${Fade16({ slot: 'title-icon' })}Link - - - ${StoryContent({ useResponsiveOffset: false })} - `; - (result as any).hasMainTag = true; - return result; +export const FixedSideNavIcons = { + name: 'Fixed SideNav w/ Icons', + render: () => { + const result = html` + + + + + ${Fade16({ slot: 'title-icon' })} + + Link + + + Link + + + Link + + + + ${Fade16({ slot: 'title-icon' })} + + Link + + + Link + + + Link + + + + ${Fade16({ slot: 'title-icon' })} + + Link + + + Link + + + Link + + + ${Fade16({ slot: 'title-icon' })}Link + ${Fade16({ slot: 'title-icon' })}Link + + + ${StoryContent({ useResponsiveOffset: false })} + `; + (result as any).hasMainTag = true; + return result; + }, }; -FixedSideNavIcons.storyName = 'Fixed SideNav w/ Icons'; - -export const HeaderBase = () => { - return html` [Platform] - `; + `, }; -export const HeaderBaseWActions = () => { - return html` @@ -341,13 +353,12 @@ export const HeaderBaseWActions = () => { ${SwitcherIcon20({ slot: 'icon' })} - `; + `, }; -HeaderBaseWActions.storyName = 'Header Base w/ Actions'; - -export const HeaderBaseWActionsRightPanel = () => { - return html` @@ -375,14 +386,12 @@ export const HeaderBaseWActionsRightPanel = () => { id="notification-panel" expanded aria-label="Header Panel"> - `; + `, }; -HeaderBaseWActionsRightPanel.storyName = - 'Header Base w/ Actions and Right Panel'; - -export const HeaderBaseWActionsSwitcher = () => { - return html` @@ -432,13 +441,12 @@ export const HeaderBaseWActionsSwitcher = () => { - ${StoryContent({ useResponsiveOffset: true })}`; + ${StoryContent({ useResponsiveOffset: true })}`, }; -HeaderBaseWActionsSwitcher.storyName = 'Header Base w/ Actions and Switcher'; - -export const HeaderBaseWNavigationActionsAndSideNav = () => { - return html` @@ -557,14 +565,12 @@ export const HeaderBaseWNavigationActionsAndSideNav = () => { - ${StoryContent({ useResponsiveOffset: true })}`; + ${StoryContent({ useResponsiveOffset: true })}`, }; -HeaderBaseWNavigationActionsAndSideNav.storyName = - 'Header Base w/ Navigation, Actions and SideNav'; - -export const HeaderBaseWNavigationActions = () => { - return html` @@ -639,14 +645,12 @@ export const HeaderBaseWNavigationActions = () => { - `; + `, }; -HeaderBaseWNavigationActions.storyName = - 'Header Base w/ Navigation and Actions'; - -export const HeaderBaseWNavigation = () => { - return html` @@ -705,85 +709,85 @@ export const HeaderBaseWNavigation = () => { - `; + `, }; -HeaderBaseWNavigation.storyName = 'Header Base w/ Navigation'; - -export const HeaderBaseWSideNav = () => { - const result = html` - - - - [Platform] - - - - ${Fade16({ slot: 'title-icon' })} - - Link - - - Link - - - Link - - - - ${Fade16({ slot: 'title-icon' })} - - Link - - - Link - - - Link - - - - ${Fade16({ slot: 'title-icon' })} - - Link - - - Link - - - Link - - - ${Fade16({ slot: 'title-icon' })}Link - ${Fade16({ slot: 'title-icon' })}Link - - - - ${StoryContent({ useResponsiveOffset: true })} - `; - (result as any).hasMainTag = true; - return result; +export const HeaderBaseWSideNav = { + name: 'Header Base w/ SideNav', + render: () => { + const result = html` + + + + [Platform] + + + + ${Fade16({ slot: 'title-icon' })} + + Link + + + Link + + + Link + + + + ${Fade16({ slot: 'title-icon' })} + + Link + + + Link + + + Link + + + + ${Fade16({ slot: 'title-icon' })} + + Link + + + Link + + + Link + + + ${Fade16({ slot: 'title-icon' })}Link + ${Fade16({ slot: 'title-icon' })}Link + + + + ${StoryContent({ useResponsiveOffset: true })} + `; + (result as any).hasMainTag = true; + return result; + }, }; -HeaderBaseWSideNav.storyName = 'Header Base w/ SideNav'; - -export const HeaderBaseWSkipToContent = () => { - return html` @@ -808,13 +812,12 @@ export const HeaderBaseWSkipToContent = () => { - ${StoryContent({ useResponsiveOffset: true })}`; + ${StoryContent({ useResponsiveOffset: true })}`, }; -HeaderBaseWSkipToContent.storyName = 'Header Base w/ SkipToContent'; - -export const SideNavRail = () => { - return html` { > - ${StoryContent({ useResponsiveOffset: true })}`; + ${StoryContent({ useResponsiveOffset: true })}`, }; -SideNavRail.storyName = 'SideNav Rail'; - -export const SideNavRailWHeader = () => { - return html` @@ -974,64 +976,66 @@ export const SideNavRailWHeader = () => { - ${StoryContent({ useResponsiveOffset: true })}`; + ${StoryContent({ useResponsiveOffset: true })}`, }; -SideNavRailWHeader.storyName = 'SideNav Rail w/ Header'; - -export const SideNavWLargeSideNavItems = () => { - const result = html` - - - - - - Menu 1 - - - Menu 2 - - - Menu 3 - - - Large link - ${Fade16({ slot: 'title-icon' })} - - Menu 1 - - - Menu 2 - - - Menu 3 - - - - ${Fade16({ slot: 'title-icon' })} Large link w/icon - - - ${StoryContent({ useResponsiveOffset: true })} - `; - (result as any).hasMainTag = true; - return result; +export const SideNavWLargeSideNavItems = { + name: 'SideNav w/ large side nav items', + render: () => { + const result = html` + + + + + + Menu 1 + + + Menu 2 + + + Menu 3 + + + Large link + ${Fade16({ slot: 'title-icon' })} + + Menu 1 + + + Menu 2 + + + Menu 3 + + + + ${Fade16({ slot: 'title-icon' })} Large link + w/icon + + + ${StoryContent({ useResponsiveOffset: true })} + `; + (result as any).hasMainTag = true; + return result; + }, }; -SideNavWLargeSideNavItems.storyName = 'SideNav w/ large side nav items'; - export default { title: 'Components/UI Shell', parameters: { - ...storyDocs.parameters, + docs: { + page: storyDocs, + }, }, }; diff --git a/packages/carbon-web-components/tests/spec/structured-list_spec.ts b/packages/carbon-web-components/tests/spec/structured-list_spec.ts index 074c3d34b2d..8f79467d8f7 100644 --- a/packages/carbon-web-components/tests/spec/structured-list_spec.ts +++ b/packages/carbon-web-components/tests/spec/structured-list_spec.ts @@ -9,7 +9,7 @@ import { render } from 'lit'; import BXStructuredListRow from '../../src/components/structured-list/structured-list-row'; -import { Playground } from '../../src/components/structured-list/structured-list-story'; +import { Playground } from '../../src/components/structured-list/structured-list.stories'; const template = (props?) => Playground({ diff --git a/packages/carbon-web-components/tests/spec/tabs_spec.ts b/packages/carbon-web-components/tests/spec/tabs_spec.ts index b637e6e0cd3..3407cd3e00c 100644 --- a/packages/carbon-web-components/tests/spec/tabs_spec.ts +++ b/packages/carbon-web-components/tests/spec/tabs_spec.ts @@ -11,7 +11,7 @@ import { render } from 'lit'; import EventManager from '../utils/event-manager'; import CDSTabs from '../../src/components/tabs/tabs'; import CDSTab from '../../src/components/tabs/tab'; -import { Playground } from '../../src/components/tabs/tabs-story'; +import { Playground } from '../../src/components/tabs/tabs.stories'; const template = (props?) => Playground({ diff --git a/packages/carbon-web-components/tests/spec/text-input_spec.ts b/packages/carbon-web-components/tests/spec/text-input_spec.ts index 1bd3a374fb6..9541a7fbe16 100644 --- a/packages/carbon-web-components/tests/spec/text-input_spec.ts +++ b/packages/carbon-web-components/tests/spec/text-input_spec.ts @@ -13,7 +13,7 @@ import EventManager from '../utils/event-manager'; import CDSTextInput, { INPUT_TYPE, } from '../../src/components/text-input/text-input'; -import { Playground } from '../../src/components/text-input/text-input-story'; +import { Playground } from '../../src/components/text-input/text-input.stories'; /** * @param formData A `FormData` instance. diff --git a/packages/carbon-web-components/tests/spec/textarea_spec.ts b/packages/carbon-web-components/tests/spec/textarea_spec.ts index 9f142b85524..d5109ff574e 100644 --- a/packages/carbon-web-components/tests/spec/textarea_spec.ts +++ b/packages/carbon-web-components/tests/spec/textarea_spec.ts @@ -11,7 +11,7 @@ import { html, render } from 'lit'; import EventManager from '../utils/event-manager'; import CDSTextarea from '../../src/components/textarea/textarea'; -import { Playground } from '../../src/components/textarea/textarea-story'; +import { Playground } from '../../src/components/textarea/textarea.stories'; /** * @param formData A `FormData` instance. From 7a3a48f3aee096b78b876b712090dbdf469ecf2c Mon Sep 17 00:00:00 2001 From: Matthew Oliveira Date: Thu, 18 Jan 2024 14:15:08 -0500 Subject: [PATCH 4/4] feat(pagination): update story to Storybook v7 (#11401) * chore(pagination): update pagination stories to sb v7 * fix(pagination): fix backward-text control * fix(pagination): specify page-input-disabled property as boolean --------- Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> --- .../carbon-web-components/.storybook/main.ts | 2 + .../components/pagination/pagination-story.ts | 141 ------------ .../{pagination-story.mdx => pagination.mdx} | 15 +- .../pagination/pagination.stories.ts | 205 ++++++++++++++++++ .../src/components/pagination/pagination.ts | 6 +- 5 files changed, 219 insertions(+), 150 deletions(-) delete mode 100644 packages/carbon-web-components/src/components/pagination/pagination-story.ts rename packages/carbon-web-components/src/components/pagination/{pagination-story.mdx => pagination.mdx} (81%) create mode 100644 packages/carbon-web-components/src/components/pagination/pagination.stories.ts diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts index 56731736d57..9d2ed507ca0 100644 --- a/packages/carbon-web-components/.storybook/main.ts +++ b/packages/carbon-web-components/.storybook/main.ts @@ -70,6 +70,8 @@ const stories = glob.sync( '../src/**/toast-notification.stories.ts', '../src/**/overflow-menu.mdx', '../src/**/overflow-menu.stories.ts', + '../src/**/pagination.mdx', + '../src/**/pagination.stories.ts', '../src/**/progress-bar.mdx', '../src/**/progress-bar.stories.ts', '../src/**/progress-indicator.mdx', diff --git a/packages/carbon-web-components/src/components/pagination/pagination-story.ts b/packages/carbon-web-components/src/components/pagination/pagination-story.ts deleted file mode 100644 index 25e969b76d5..00000000000 --- a/packages/carbon-web-components/src/components/pagination/pagination-story.ts +++ /dev/null @@ -1,141 +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, number, text, select } from '@storybook/addon-knobs'; -import './index'; -import storyDocs from './pagination-story.mdx'; -import { prefix } from '../../globals/settings'; -import { PAGINATION_SIZE } from './defs'; - -const sizes = { - [`Small size (${PAGINATION_SIZE.SMALL})`]: PAGINATION_SIZE.SMALL, - [`Medium size (${PAGINATION_SIZE.MEDIUM})`]: PAGINATION_SIZE.MEDIUM, - [`Large size (${PAGINATION_SIZE.LARGE})`]: PAGINATION_SIZE.LARGE, -}; - -export const Default = () => { - return html` - - 10 - 20 - 30 - 40 - 50 - - `; -}; - -export const MultiplePaginationComponents = () => { - return html` - - 10 - 20 - 30 - 40 - 50 - - - 10 - 20 - 30 - 40 - 50 - - `; -}; - -MultiplePaginationComponents.storyName = 'Multiple Pagination components'; - -export const PaginationCustomPageSizeLabel = () => { - return html` - - Ten - Twenty - Thirty - Forty - Fifty - - `; -}; - -PaginationCustomPageSizeLabel.storyname = - 'Pagination with custom page sizes label'; - -export const Playground = (args) => { - const { - backwardText, - onChangedCurrent, - onChangedPageSizesSelect, - disabled, - forwardText, - isLastPage, - itemsPerPageText, - page, - pageInputDisabled, - pageSize, - pageSizeInputDisabled, - pagesUnknown, - size, - totalItems, - } = args?.[`${prefix}-pagination`] ?? {}; - return html` - - 10 - 20 - 30 - 40 - 50 - - `; -}; - -export default { - title: 'Components/Pagination', - parameters: { - ...storyDocs.parameters, - knobs: { - [`${prefix}-pagination`]: () => ({ - backwardText: text('Backward text', 'Previous page'), - disabled: boolean('Disabled', false), - forwardText: text('Forward text', 'Next page'), - isLastPage: boolean( - 'Explicitly state that the user is at the last page (is-last-page)', - false - ), - itemsPerPageText: text('Items per page text', 'Items per page:'), - page: number('The current page', 1), - pageSize: number('Number of rows per page (page-size)', 10), - pageInputDisabled: boolean('Pages input disabled', false), - pageSizeInputDisabled: boolean('Pages size input disabled', false), - pagesUnknown: boolean('Pages unknown', false), - size: select('Size (size)', sizes, PAGINATION_SIZE.MEDIUM), - totalItems: number('Total item count (total-items)', 103), - onChangedCurrent: action(`${prefix}-pagination-changed-current`), - onChangedPageSizesSelect: action(`${prefix}-page-sizes-select-changed`), - }), - }, - }, - decorators: [(story) => html`
${story()}
`], -}; diff --git a/packages/carbon-web-components/src/components/pagination/pagination-story.mdx b/packages/carbon-web-components/src/components/pagination/pagination.mdx similarity index 81% rename from packages/carbon-web-components/src/components/pagination/pagination-story.mdx rename to packages/carbon-web-components/src/components/pagination/pagination.mdx index 2451acbffdc..c7006a3cd15 100644 --- a/packages/carbon-web-components/src/components/pagination/pagination-story.mdx +++ b/packages/carbon-web-components/src/components/pagination/pagination.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 PaginationStories from './pagination.stories'; + + # Pagination @@ -23,8 +26,8 @@ Here's a quick example to get you started. import '@carbon/web-components/es/components/pagination/index.js'; ``` - - +{`${cdnJs({ components: ['pagination'] })}`} +{`${cdnCss()}`} ### HTML @@ -44,12 +47,12 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `at-last-page` attribute). - + ## `` attributes, properties and events - + ## `` attributes, properties and events - + diff --git a/packages/carbon-web-components/src/components/pagination/pagination.stories.ts b/packages/carbon-web-components/src/components/pagination/pagination.stories.ts new file mode 100644 index 00000000000..c42995cf2b7 --- /dev/null +++ b/packages/carbon-web-components/src/components/pagination/pagination.stories.ts @@ -0,0 +1,205 @@ +/** + * @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 './index'; +import '../select/index'; +import storyDocs from './pagination.mdx'; +import { prefix } from '../../globals/settings'; +import { PAGINATION_SIZE } from './defs'; + +const sizes = { + [`Small size (${PAGINATION_SIZE.SMALL})`]: PAGINATION_SIZE.SMALL, + [`Medium size (${PAGINATION_SIZE.MEDIUM})`]: PAGINATION_SIZE.MEDIUM, + [`Large size (${PAGINATION_SIZE.LARGE})`]: PAGINATION_SIZE.LARGE, +}; + +const args = { + backwardText: 'Previous page', + disabled: false, + forwardText: 'Next page', + isLastPage: false, + itemsPerPageText: 'Items per page:', + page: 1, + pageSize: 10, + pageInputDisabled: false, + pageSizeInputDisabled: false, + pagesUnknown: false, + size: PAGINATION_SIZE.MEDIUM, + totalItems: 103, +}; + +const argTypes = { + backwardText: { + control: 'text', + description: 'The description for the backward icon.', + }, + disabled: { + control: 'boolean', + description: + 'true if the backward/forward buttons, as well as the page select elements, should be disabled.', + }, + forwardText: { + control: 'text', + description: 'The description for the forward icon.', + }, + isLastPage: { + control: 'boolean', + description: + 'true if the current page should be the last page.', + }, + itemsPerPageText: { + control: 'text', + description: 'The text indicating the number of items per page.', + }, + page: { + control: 'number', + description: 'The current page.', + }, + pageSize: { + control: 'number', + description: 'The number dictating how many items a page contains.', + }, + pageInputDisabled: { + control: 'boolean', + description: + 'true if the select box to change the page should be disabled.', + }, + pageSizeInputDisabled: { + control: 'boolean', + description: + 'true if the select box to change the items per page should be disabled.', + }, + pagesUnknown: { + control: 'boolean', + description: 'true if the total number of items is unknown.', + }, + size: { + control: 'select', + description: 'Specify the size of the Pagination.', + options: sizes, + }, + totalItems: { + control: 'number', + description: 'The total number of items.', + }, + onChangedCurrent: { + action: `${prefix}-pagination-changed-current`, + }, + onChangedPageSizesSelect: { + action: `${prefix}-page-sizes-select-changed`, + }, +}; + +export const Default = { + render: () => { + return html` + + 10 + 20 + 30 + 40 + 50 + + `; + }, +}; + +export const MultiplePaginationComponents = { + render: () => { + return html` + + 10 + 20 + 30 + 40 + 50 + + + 10 + 20 + 30 + 40 + 50 + + `; + }, +}; + +export const PaginationWithCustomPageSizesLabel = { + render: () => { + return html` + + Ten + Twenty + Thirty + Forty + Fifty + + `; + }, +}; + +export const Playground = { + args, + argTypes, + render: (args) => { + const { + backwardText, + onChangedCurrent, + onChangedPageSizesSelect, + disabled, + forwardText, + isLastPage, + itemsPerPageText, + page, + pageInputDisabled, + pageSize, + pageSizeInputDisabled, + pagesUnknown, + size, + totalItems, + } = args ?? {}; + return html` + + 10 + 20 + 30 + 40 + 50 + + `; + }, +}; + +const meta = { + title: 'Components/Pagination', + parameters: { + docs: { + page: storyDocs, + }, + }, + decorators: [(story) => html`
${story()}
`], +}; + +export default meta; diff --git a/packages/carbon-web-components/src/components/pagination/pagination.ts b/packages/carbon-web-components/src/components/pagination/pagination.ts index 04486044b6a..e78551f1ff5 100644 --- a/packages/carbon-web-components/src/components/pagination/pagination.ts +++ b/packages/carbon-web-components/src/components/pagination/pagination.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2023 + * Copyright IBM Corp. 2019, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -216,8 +216,8 @@ class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) { /** * true if the select box to change the page should be disabled. */ - @property({ attribute: 'page-input-disabled' }) - pageInputDisabled; + @property({ type: Boolean, attribute: 'page-input-disabled' }) + pageInputDisabled = false; /** * Number of items per page.