From 4f318983fb2717d1f144b959f84329275203d141 Mon Sep 17 00:00:00 2001 From: Matthew Oliveira Date: Thu, 18 Jan 2024 13:21:55 -0500 Subject: [PATCH] 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;