diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
index 1170bcc4b1d..56731736d57 100644
--- a/packages/carbon-web-components/.storybook/main.ts
+++ b/packages/carbon-web-components/.storybook/main.ts
@@ -90,6 +90,11 @@ const stories = glob.sync(
'../src/**/structured-list.mdx',
'../src/**/tabs.stories.ts',
'../src/**/tabs.mdx',
+ '../src/**/slug.mdx',
+ '../src/**/slug.stories.ts',
+ '../src/**/slug-example.stories.ts',
+ '../src/**/slug-data-table.stories.ts',
+ '../src/**/slug-form.stories.ts',
'../src/**/tag.mdx',
'../src/**/tag.stories.ts',
'../src/**/textarea.mdx',
@@ -100,6 +105,10 @@ const stories = glob.sync(
'../src/**/tooltip.stories.ts',
'../src/**/ui-shell.mdx',
'../src/**/ui-shell.stories.ts',
+ '../src/**/toggle.mdx',
+ '../src/**/toggle.stories.ts',
+ '../src/**/toggletip.mdx',
+ '../src/**/toggletip.stories.ts',
],
{
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
+
+
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
+
+
-
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
-
- ${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
+
+ ${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
-
- ${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.
-
-
-
${content}${actions}
-
-
-
-
-
Title
-
- Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
- at consectetur turpis mauris gravida penatibus.
-
-
-
-
-
-
-
Title
-
- Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
- at consectetur turpis mauris gravida penatibus.
-
-
-
${content}${actions}
-
-
-
-
-
-
Title
-
- Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
- at consectetur turpis mauris gravida penatibus.
-
-
-
-
- Expanded Section
-
- Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
- at consectetur turpis mauris.
-
-
- ${content}${actions}
-
-
+
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
+
+ ${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.
+
+
+
${content}${actions}
+
+
+
+
+
Title
+
+ Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
+ at consectetur turpis mauris gravida penatibus.
+
+
+
+
+
+
+
Title
+
+ Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
+ at consectetur turpis mauris gravida penatibus.
+
+
+
${content}${actions}
+
+
+
+
+
+
Title
+
+ Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum
+ sit at consectetur turpis mauris gravida penatibus.
+
+
+
+
+ Expanded Section
+
+ Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
+ at consectetur turpis mauris.
+
+
+ ${content}${actions}
+
+
-
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
-
- ${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
+
+ ${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
-
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';
+
+{`${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).
-
+
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
+
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;
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.
-
-[](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';
-```
-
-
-
-
- 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 More Create
-
-
-
-```
-
-## 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
-
-```
-
-### `` attributes and properties
-
-
- ${Filter16()}
-
-```
-
-### `` attributes and properties
-
-
- 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.
+
+[](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';
+```
+
+
+ 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).
+
+
+
+
+ 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
+
+
+
+ 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`
- ` attributes, properties and events
-