feat(content-switcher): update story to Storybook v7

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',

packages/carbon-web-components/src/components/content-switcher/content-switcher-story.mdx → 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';
+
+<Meta of={ContentSwitcherStories} />
 
 # Content switcher
 
@@ -44,8 +47,8 @@ import '@carbon/web-components/es/components/content-switcher/index.js';
 
 ## `<cds-content-switcher>` attributes, properties and events
 
-<Props of="cds-content-switcher" />
+<ArgsTable of="cds-content-switcher" />
 
 ## `<cds-content-switcher-item>` attributes and properties
 
-<Props of="cds-content-switcher-item" />
+<ArgsTable of="cds-content-switcher-item" />

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 {

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`
+    <cds-content-switcher value="all">
+      <cds-content-switcher-item value="all">
+        First section
+      </cds-content-switcher-item>
+      <cds-content-switcher-item value="cloudFoundry">
+        Second section
+      </cds-content-switcher-item>
+      <cds-content-switcher-item value="staging">
+        Third section
+      </cds-content-switcher-item>
+    </cds-content-switcher>
+  `,
+};
+
+export const IconOnly = {
+  render: () => html`
+    <cds-content-switcher value="all">
+      <cds-content-switcher-item icon value="all">
+        ${TableOfContents16()}
+        <span slot="tooltip-content">Table of Contents</span>
+      </cds-content-switcher-item>
+      <cds-content-switcher-item icon value="cloudFoundry">
+        ${Workspace16()}
+        <span slot="tooltip-content">Workspace Test</span>
+      </cds-content-switcher-item>
+      <cds-content-switcher-item icon value="staging">
+        ${ViewMode2_16()}
+        <span slot="tooltip-content">View Mode</span>
+      </cds-content-switcher-item>
+    </cds-content-switcher>
+  `,
+};
+
+export const IconOnlyWithLayer = {
+  render: () => html`
+    <sb-template-layers>
+      <cds-content-switcher value="all">
+        <cds-content-switcher-item icon value="all">
+          ${TableOfContents16()}
+          <span slot="tooltip-content">Table of Contents</span>
+        </cds-content-switcher-item>
+        <cds-content-switcher-item icon value="cloudFoundry">
+          ${Workspace16()}
+          <span slot="tooltip-content">Workspace Test</span>
+        </cds-content-switcher-item>
+        <cds-content-switcher-item icon value="staging">
+          ${ViewMode2_16()}
+          <span slot="tooltip-content">View Mode</span>
+        </cds-content-switcher-item>
+      </cds-content-switcher>
+    </sb-template-layers>
+  `,
+};
+
+export const WithLayer = {
+  render: () => html`
+    <sb-template-layers>
+      <cds-content-switcher value="all">
+        <cds-content-switcher-item value="all">
+          First section
+        </cds-content-switcher-item>
+        <cds-content-switcher-item value="cloudFoundry">
+          Second section
+        </cds-content-switcher-item>
+        <cds-content-switcher-item value="staging">
+          Third section
+        </cds-content-switcher-item>
+      </cds-content-switcher>
+    </sb-template-layers>
+  `,
+};
+
+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`
+      <cds-content-switcher
+        value="${ifDefined(value)}"
+        @cds-content-switcher-beingselected="${handleBeforeSelected}"
+        @cds-content-switcher-selected="${onSelect}"
+        size="${size}">
+        <cds-content-switcher-item value="all">
+          First section
+        </cds-content-switcher-item>
+        <cds-content-switcher-item value="cloudFoundry">
+          Second section
+        </cds-content-switcher-item>
+        <cds-content-switcher-item value="staging">
+          Third section
+        </cds-content-switcher-item>
+      </cds-content-switcher>
+    `;
+  },
+};
+
+const meta = {
+  title: 'Components/Content switcher',
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
+};
+
+export default meta;

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';