diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
index bc8fae8c5ab..a9f8668f769 100644
--- a/packages/carbon-web-components/.storybook/main.ts
+++ b/packages/carbon-web-components/.storybook/main.ts
@@ -22,6 +22,8 @@ const stories = glob.sync(
// add mdx/story files as they are being worked on
'../src/**/combo-box.stories.ts',
'../src/**/combo-box.mdx',
+ '../src/**/content-switcher.mdx',
+ '../src/**/content-switcher.stories.ts',
'../src/**/dropdown.stories.ts',
'../src/**/dropdown.mdx',
'../src/**/data-table-*.stories.ts',
diff --git a/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.ts b/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.ts
deleted file mode 100644
index 5bdff77ba51..00000000000
--- a/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit';
-import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
-import textNullable from '../../../.storybook/knob-text-nullable';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { CONTENT_SWITCHER_SIZE } from './content-switcher';
-import './content-switcher-item';
-import storyDocs from './content-switcher-story.mdx';
-import { prefix } from '../../globals/settings';
-import TableOfContents16 from '@carbon/web-components/es/icons/table-of-contents/16';
-import Workspace16 from '@carbon/web-components/es/icons/workspace/16';
-import ViewMode2_16 from '@carbon/web-components/es/icons/view--mode-2/16';
-import '../../../.storybook/templates/with-layer';
-
-const noop = () => {};
-
-const sizes = {
- 'Medium (md - default)': null,
- [`Small (${CONTENT_SWITCHER_SIZE.SMALL})`]: CONTENT_SWITCHER_SIZE.SMALL,
- [`Large (${CONTENT_SWITCHER_SIZE.LARGE})`]: CONTENT_SWITCHER_SIZE.LARGE,
-};
-
-export const Default = () => html`
-
-
- First section
-
-
- Second section
-
-
- Third section
-
-
-`;
-
-export default {
- title: 'Components/Content switcher',
-};
-
-export const IconOnly = () => html`
-
-
- ${TableOfContents16()}
- Table of Contents
-
-
- ${Workspace16()}
- Workspace Test
-
-
- ${ViewMode2_16()}
- View Mode
-
-
-`;
-
-export const IconOnlyWithLayer = () => html`
-
-
-
- ${TableOfContents16()}
- Table of Contents
-
-
- ${Workspace16()}
- Workspace Test
-
-
- ${ViewMode2_16()}
- View Mode
-
-
-
-`;
-
-export const WithLayer = () => html`
-
-
-
- First section
-
-
- Second section
-
-
- Third section
-
-
-
-`;
-
-export const Playground = (args) => {
- const {
- value,
- disableSelection,
- onBeforeSelect = noop,
- onSelect = noop,
- size,
- } = args?.[`${prefix}-content-switcher`] ?? {};
- const handleBeforeSelected = (event: CustomEvent) => {
- onBeforeSelect(event);
- if (disableSelection) {
- event.preventDefault();
- }
- };
-
- return html`
-
-
- First section
-
-
- Second section
-
-
- Third section
-
-
- `;
-};
-
-Playground.parameters = {
- ...storyDocs.parameters,
- knobs: {
- [`${prefix}-content-switcher`]: () => ({
- value: textNullable('The value of the selected item (value)', ''),
- size: select('Button size (size)', sizes, null),
- disableSelection: boolean(
- `Disable user-initiated selection change (Call event.preventDefault() in ${prefix}-content-switcher-beingselected event)`,
- false
- ),
- onBeforeSelect: action(`${prefix}-content-switcher-beingselected`),
- onSelect: action(`${prefix}-content-switcher-selected`),
- }),
- },
-};
diff --git a/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.mdx b/packages/carbon-web-components/src/components/content-switcher/content-switcher.mdx
similarity index 86%
rename from packages/carbon-web-components/src/components/content-switcher/content-switcher-story.mdx
rename to packages/carbon-web-components/src/components/content-switcher/content-switcher.mdx
index 89f5daa93aa..057680a7f69 100644
--- a/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.mdx
+++ b/packages/carbon-web-components/src/components/content-switcher/content-switcher.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks';
import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as ContentSwitcherStories from './content-switcher.stories';
+
+
# Content switcher
@@ -44,8 +47,8 @@ import '@carbon/web-components/es/components/content-switcher/index.js';
## `` attributes, properties and events
-
+
## `` attributes and properties
-
+
diff --git a/packages/carbon-web-components/src/components/content-switcher/content-switcher.scss b/packages/carbon-web-components/src/components/content-switcher/content-switcher.scss
index e530ed5776b..7259866c5bb 100644
--- a/packages/carbon-web-components/src/components/content-switcher/content-switcher.scss
+++ b/packages/carbon-web-components/src/components/content-switcher/content-switcher.scss
@@ -1,5 +1,5 @@
//
-// Copyright IBM Corp. 2019, 2023
+// Copyright IBM Corp. 2019, 2024
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
@@ -77,7 +77,7 @@ $css--plex: true !default;
}
}
-:host(#{$prefix}-content-switcher-item)[icon] {
+:host(#{$prefix}-content-switcher-item[icon]) {
width: initial;
.#{$prefix}--content-switcher-btn {
diff --git a/packages/carbon-web-components/src/components/content-switcher/content-switcher.stories.ts b/packages/carbon-web-components/src/components/content-switcher/content-switcher.stories.ts
new file mode 100644
index 00000000000..68c70414794
--- /dev/null
+++ b/packages/carbon-web-components/src/components/content-switcher/content-switcher.stories.ts
@@ -0,0 +1,179 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { CONTENT_SWITCHER_SIZE } from './content-switcher';
+import './index';
+import storyDocs from './content-switcher.mdx';
+import { prefix } from '../../globals/settings';
+import TableOfContents16 from '@carbon/web-components/es/icons/table-of-contents/16';
+import Workspace16 from '@carbon/web-components/es/icons/workspace/16';
+import ViewMode2_16 from '@carbon/web-components/es/icons/view--mode-2/16';
+import '../layer/index';
+import '../../../.storybook/templates/with-layer';
+
+const noop = () => {};
+
+const sizes = {
+ 'Medium (md - default)': null,
+ [`Small (${CONTENT_SWITCHER_SIZE.SMALL})`]: CONTENT_SWITCHER_SIZE.SMALL,
+ [`Large (${CONTENT_SWITCHER_SIZE.LARGE})`]: CONTENT_SWITCHER_SIZE.LARGE,
+};
+
+const args = {
+ value: '',
+ size: null,
+ disableSelection: false,
+};
+
+const argTypes = {
+ value: {
+ control: 'text',
+ description: 'The value of the selected item (value)',
+ },
+ size: {
+ control: 'select',
+ options: sizes,
+ description: 'Button size (size)',
+ },
+ disableSelection: {
+ control: 'boolean',
+ description: `Disable user-initiated selection change (Call event.preventDefault() in ${prefix}-content-switcher-beingselected event)`,
+ },
+ onBeforeSelect: {
+ action: `${prefix}-content-switcher-beingselected`,
+ },
+ onSelect: {
+ action: `${prefix}-content-switcher-selected`,
+ },
+};
+
+export const Default = {
+ render: () => html`
+
+
+ First section
+
+
+ Second section
+
+
+ Third section
+
+
+ `,
+};
+
+export const IconOnly = {
+ render: () => html`
+
+
+ ${TableOfContents16()}
+ Table of Contents
+
+
+ ${Workspace16()}
+ Workspace Test
+
+
+ ${ViewMode2_16()}
+ View Mode
+
+
+ `,
+};
+
+export const IconOnlyWithLayer = {
+ render: () => html`
+
+
+
+ ${TableOfContents16()}
+ Table of Contents
+
+
+ ${Workspace16()}
+ Workspace Test
+
+
+ ${ViewMode2_16()}
+ View Mode
+
+
+
+ `,
+};
+
+export const WithLayer = {
+ render: () => html`
+
+
+
+ First section
+
+
+ Second section
+
+
+ Third section
+
+
+
+ `,
+};
+
+export const Playground = {
+ args,
+ argTypes,
+ render: (args) => {
+ const {
+ value,
+ disableSelection,
+ onBeforeSelect = noop,
+ onSelect = noop,
+ size,
+ } = args ?? {};
+ const handleBeforeSelected = (event: CustomEvent) => {
+ onBeforeSelect(event);
+ if (disableSelection) {
+ event.preventDefault();
+ }
+ };
+
+ return html`
+
+
+ First section
+
+
+ Second section
+
+
+ Third section
+
+
+ `;
+ },
+};
+
+const meta = {
+ title: 'Components/Content switcher',
+ parameters: {
+ docs: {
+ page: storyDocs,
+ },
+ },
+};
+
+export default meta;
diff --git a/packages/carbon-web-components/src/components/content-switcher/index.ts b/packages/carbon-web-components/src/components/content-switcher/index.ts
index 1112fccef39..0cc82cd4fa5 100644
--- a/packages/carbon-web-components/src/components/content-switcher/index.ts
+++ b/packages/carbon-web-components/src/components/content-switcher/index.ts
@@ -1,11 +1,13 @@
/**
* @license
*
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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 '../tooltip/tooltip';
+import '../tooltip/tooltip-content';
import './content-switcher';
import './content-switcher-item';