From 24f8cd08120610059490cf2c82865927af9a7560 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Wed, 10 Jan 2024 08:29:25 -0500
Subject: [PATCH 1/3] chore(slider): update slider stories to sb v7 (#11374)

---
 .../carbon-web-components/.storybook/main.ts  |   2 +
 .../src/components/slider/slider-story.ts     | 223 -------------
 .../slider/{slider-story.mdx => slider.mdx}   |  13 +-
 .../src/components/slider/slider.stories.ts   | 306 ++++++++++++++++++
 4 files changed, 316 insertions(+), 228 deletions(-)
 delete mode 100644 packages/carbon-web-components/src/components/slider/slider-story.ts
 rename packages/carbon-web-components/src/components/slider/{slider-story.mdx => slider.mdx} (85%)
 create mode 100644 packages/carbon-web-components/src/components/slider/slider.stories.ts

diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
index dcd6c9c6491..4de8d6d55cc 100644
--- a/packages/carbon-web-components/.storybook/main.ts
+++ b/packages/carbon-web-components/.storybook/main.ts
@@ -26,6 +26,8 @@ const stories = glob.sync(
     '../src/**/file-uploader.stories.ts',
     '../src/**/overflow-menu.mdx',
     '../src/**/overflow-menu.stories.ts',
+    '../src/**/slider.mdx',
+    '../src/**/slider.stories.ts',
   ],
   {
     ignore: ['../src/**/docs/*.mdx'],
diff --git a/packages/carbon-web-components/src/components/slider/slider-story.ts b/packages/carbon-web-components/src/components/slider/slider-story.ts
deleted file mode 100644
index 636955df9bb..00000000000
--- a/packages/carbon-web-components/src/components/slider/slider-story.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit';
-import { action } from '@storybook/addon-actions';
-import { boolean, number, text } from '@storybook/addon-knobs';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import './slider';
-import './slider-input';
-import './slider-skeleton';
-import '../form/form-item';
-import '../layer';
-import storyDocs from './slider-story.mdx';
-import { prefix } from '../../globals/settings';
-import '../../../.storybook/templates/with-layer';
-
-export const Default = () => {
-  return html`
-    <cds-form-item>
-      <cds-slider
-        label-text="Slider Label"
-        max="100"
-        min="0"
-        step="1"
-        value="50">
-        <cds-slider-input
-          aria-label="Slider value"
-          type="number"></cds-slider-input>
-      </cds-slider>
-    </cds-form-item>
-  `;
-};
-
-export const ControlledSlider = () => {
-  let value = 87;
-  function onClick() {
-    value = Math.round(Math.random() * 100);
-    const sliders = document.getElementsByTagName('cds-slider');
-    for (const slider of sliders) {
-      slider.setAttribute('value', `${value}`);
-    }
-
-    const headers = document.getElementsByClassName('slider-headers');
-    for (const header of headers) {
-      header.innerHTML = `${value}`;
-    }
-  }
-  return html`
-    <button type="button" @click="${onClick}">randomize value</button>
-    <cds-form-item>
-      <cds-slider max="100" min="0" step="1" value="${ifDefined(value)}">
-        <cds-slider-input
-          aria-label="Slider value"
-          type="number"></cds-slider-input>
-      </cds-slider>
-    </cds-form-item>
-    <h1 class="slider-headers">${value}</h1>
-  `;
-};
-
-export const ControlledSliderWithLayer = () => {
-  let value = 87;
-  function onClick() {
-    value = Math.round(Math.random() * 100);
-    const sliders = document.getElementsByTagName('cds-slider');
-    for (const slider of sliders) {
-      slider.setAttribute('value', `${value}`);
-    }
-
-    const headers = document.getElementsByClassName('slider-headers');
-    for (const header of headers) {
-      header.innerHTML = `${value}`;
-    }
-  }
-
-  return html`
-    <sb-template-layers>
-      <div>
-        <button type="button" @click="${onClick}">randomize value</button>
-        <cds-form-item>
-          <cds-slider max="100" min="0" step="1" value="${ifDefined(value)}">
-            <cds-slider-input
-              aria-label="Slider value"
-              type="number"></cds-slider-input>
-          </cds-slider>
-        </cds-form-item>
-        <h1 class="slider-headers">${value}</h1>
-      </div>
-    </sb-template-layers>
-  `;
-};
-
-export const WithLayer = () => {
-  return html`
-    <sb-template-layers>
-      <cds-form-item>
-        <cds-slider
-          label-text="Slider label"
-          max="100"
-          min="0"
-          step="1"
-          value="50">
-          <cds-slider-input
-            aria-label="Slider value"
-            type="number"></cds-slider-input>
-        </cds-slider>
-      </cds-form-item>
-    </sb-template-layers>
-  `;
-};
-
-export const skeleton = () =>
-  html`
-    <cds-form-item><cds-slider-skeleton></cds-slider-skeleton></cds-form-item>
-  `;
-
-skeleton.parameters = {
-  percy: {
-    skip: true,
-  },
-};
-
-export const Playground = (args) => {
-  const {
-    ariaLabelInput,
-    disabled,
-    hideTextInput,
-    invalid,
-    invalidText,
-    inputType,
-    labelText,
-    max,
-    min,
-    maxLabel,
-    minLabel,
-    name,
-    readonly,
-    required,
-    step,
-    stepMultiplier,
-    warn,
-    warnText,
-    value,
-    onChange,
-  } = args?.[`${prefix}-slider`] || {};
-  return html`
-    <cds-form-item>
-      <cds-slider
-        ?disabled="${disabled}"
-        ?hide-text-input="${hideTextInput}"
-        ?invalid="${invalid}"
-        invalid-text="${ifDefined(invalidText)}"
-        label-text="${labelText}"
-        max="${ifDefined(max)}"
-        min="${ifDefined(min)}"
-        max-label="${ifDefined(maxLabel)}"
-        min-label="${ifDefined(minLabel)}"
-        ?readonly="${ifDefined(readonly)}"
-        step="${ifDefined(step)}"
-        step-multiplier="${ifDefined(stepMultiplier)}"
-        ?warn="${warn}"
-        warn-text="${warnText}"
-        value="${ifDefined(value)}"
-        @cds-slider-changed="${onChange}">
-        ${!hideTextInput
-          ? html`<cds-slider-input
-              aria-label="${ifDefined(ariaLabelInput)}"
-              type="${ifDefined(inputType)}"
-              ?required="${ifDefined(required)}"
-              ?name="${ifDefined(name)}"></cds-slider-input>`
-          : null}
-      </cds-slider>
-    </cds-form-item>
-  `;
-};
-
-Playground.storyName = 'Playground';
-
-Playground.parameters = {
-  knobs: {
-    [`${prefix}-slider`]: () => ({
-      ariaLabelInput: text('Aria label for input (aria-label-input)', ''),
-      disabled: boolean('Disabled (disabled)', false),
-      hideTextInput: boolean('Hide text input (hide-text-input)', false),
-      labelText: text(
-        'Label text (label-text)',
-        'Slider (must be an increment of 5)'
-      ),
-      inputType: text('Input type (type)', 'number'),
-      invalid: boolean('Invalid (invalid)', false),
-      invalidText: text(
-        'Invalid text (invalid-text)',
-        'Invalid message goes here'
-      ),
-      name: text('Name (name)', ''),
-      max: number('Maximum value (max)', 100),
-      min: number('Minimum value (min)', 0),
-      maxLabel: text('Maximum value label (max-label)', ''),
-      minLabel: text('Minimum value label (min-label)', ''),
-      readonly: boolean('Readonly (readonly)', false),
-      required: boolean('Required (required)', false),
-      step: number('Step (step)', 5),
-      stepMultiplier: number('Step multiplier (step-multiplier)', 5),
-      warn: boolean('Warn (warn)', false),
-      warnText: text('Warn text (warn-text)', 'Warning message goes here'),
-      value: number('Value (value)', 50),
-      onAfterChange: action(`${prefix}-slider-changed`),
-    }),
-  },
-};
-
-export default {
-  title: 'Components/Slider',
-  parameters: {
-    ...storyDocs.parameters,
-  },
-};
diff --git a/packages/carbon-web-components/src/components/slider/slider-story.mdx b/packages/carbon-web-components/src/components/slider/slider.mdx
similarity index 85%
rename from packages/carbon-web-components/src/components/slider/slider-story.mdx
rename to packages/carbon-web-components/src/components/slider/slider.mdx
index dbdad58c33b..b222f0b4641 100644
--- a/packages/carbon-web-components/src/components/slider/slider-story.mdx
+++ b/packages/carbon-web-components/src/components/slider/slider.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 SliderStories from './slider.stories';
+
+<Meta of={SliderStories} />
 
 # Slider
 
@@ -22,8 +25,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/slider/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['slider'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['slider'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -60,7 +63,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-slider disabled>`) and `false` means not setting the attribute (e.g.
 `<cds-slider>` without `disabled` attribute).
 
-<Props of="cds-slider" />
+<ArgsTable of="cds-slider" />
 
 ## `<cds-slider-input>` attributes, properties and events
 
@@ -68,4 +71,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-slider-input invalid>`) and `false` means not setting the attribute (e.g.
 `<cds-slider-input>` without `invalid` attribute).
 
-<Props of="cds-slider-input" />
+<ArgsTable of="cds-slider-input" />
diff --git a/packages/carbon-web-components/src/components/slider/slider.stories.ts b/packages/carbon-web-components/src/components/slider/slider.stories.ts
new file mode 100644
index 00000000000..cfd4d3a7ea9
--- /dev/null
+++ b/packages/carbon-web-components/src/components/slider/slider.stories.ts
@@ -0,0 +1,306 @@
+/**
+ * @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 './index';
+import '../form/form-item';
+import '../layer';
+import storyDocs from './slider.mdx';
+import { prefix } from '../../globals/settings';
+import '../../../.storybook/templates/with-layer';
+
+const args = {
+  ariaLabelInput: 'Lower bound',
+  disabled: false,
+  hideTextInput: false,
+  labelText: 'Slider (must be an increment of 5)',
+  invalid: false,
+  invalidText: 'Invalid message goes here',
+  max: 100,
+  min: 0,
+  readOnly: false,
+  required: false,
+  step: 5,
+  stepMultiplier: 5,
+  warn: false,
+  warnText: 'Warning message goes here',
+  value: 50,
+};
+
+const argTypes = {
+  ariaLabelInput: {
+    control: 'text',
+    description:
+      'The <code>ariaLabel</code> for the <code>&lt;input&gt;</code>.',
+  },
+  disabled: {
+    control: 'boolean',
+    description: '<code>true</code> to disable this slider.',
+  },
+  hideTextInput: {
+    control: 'boolean',
+    description: '<code>true</code> to hide the number input box.',
+  },
+  labelText: {
+    control: 'text',
+    description: 'Provide the text for the slider label.',
+  },
+  inputType: {
+    control: 'text',
+    description: 'The type attribute of the <code>&lt;input&gt;</code>.',
+  },
+  invalid: {
+    control: 'boolean',
+    description: 'Specify whether the Slider is currently invalid.',
+  },
+  invalidText: {
+    control: 'text',
+    description:
+      'Provide the text that is displayed when the Slider is in an invalid state.',
+  },
+  name: {
+    control: 'text',
+    description: 'The name attribute of the <code>&lt;input&gt;</code>.',
+  },
+  max: {
+    control: 'number',
+    description: 'The maximum value.',
+  },
+  min: {
+    control: 'number',
+    description: 'The minimum value.',
+  },
+  maxLabel: {
+    control: 'text',
+    description: 'The label associated with the maximum value.',
+  },
+  minLabel: {
+    control: 'text',
+    description: 'The label associated with the minimum value.',
+  },
+  readOnly: {
+    control: 'boolean',
+    description: 'Whether the slider should be read-only.',
+  },
+  required: {
+    control: 'boolean',
+    description: '<code>true</code> to specify if the control is required.',
+  },
+  step: {
+    control: 'number',
+    description:
+      'A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is <em>not</em> hidden, the new step requirement should be added to a visible label. Values outside the <code>step</code> increment will be considered invalid.',
+  },
+  stepMultiplier: {
+    control: 'number',
+    description:
+      'A value determining how much the value should increase/decrease by Shift+arrow keys, which will be <code>(max - min) / stepMultiplier</code>.',
+  },
+  warn: {
+    control: 'boolean',
+    description: 'Specify whether the control is currently in warning state.',
+  },
+  warnText: {
+    control: 'text',
+    description:
+      'Provide the text that is displayed when the control is in warning state.',
+  },
+  value: {
+    control: 'number',
+    description:
+      'The value of the slider. When there are two handles, value is the lower bound.',
+  },
+  onAfterChange: {
+    action: `${prefix}-slider-changed`,
+    table: {
+      disable: true,
+    },
+  },
+};
+
+export const Default = {
+  render: () => {
+    return html`
+      <cds-form-item>
+        <cds-slider
+          label-text="Slider Label"
+          max="100"
+          min="0"
+          step="1"
+          value="50">
+          <cds-slider-input
+            aria-label="Slider value"
+            type="number"></cds-slider-input>
+        </cds-slider>
+      </cds-form-item>
+    `;
+  },
+};
+
+export const ControlledSlider = {
+  render: () => {
+    let value = 87;
+    function onClick() {
+      value = Math.round(Math.random() * 100);
+      const sliders = document.getElementsByTagName('cds-slider');
+      for (const slider of sliders) {
+        slider.setAttribute('value', `${value}`);
+      }
+
+      const headers = document.getElementsByClassName('slider-headers');
+      for (const header of headers) {
+        header.innerHTML = `${value}`;
+      }
+    }
+    return html`
+      <button type="button" @click="${onClick}">randomize value</button>
+      <cds-form-item>
+        <cds-slider max="100" min="0" step="1" value="${ifDefined(value)}">
+          <cds-slider-input
+            aria-label="Slider value"
+            type="number"></cds-slider-input>
+        </cds-slider>
+      </cds-form-item>
+      <h1 class="slider-headers">${value}</h1>
+    `;
+  },
+};
+
+export const ControlledSliderWithLayer = {
+  render: () => {
+    let value = 87;
+    function onClick() {
+      value = Math.round(Math.random() * 100);
+      const sliders = document.getElementsByTagName('cds-slider');
+      for (const slider of sliders) {
+        slider.setAttribute('value', `${value}`);
+      }
+
+      const headers = document.getElementsByClassName('slider-headers');
+      for (const header of headers) {
+        header.innerHTML = `${value}`;
+      }
+    }
+
+    return html`
+      <sb-template-layers>
+        <div>
+          <button type="button" @click="${onClick}">randomize value</button>
+          <cds-form-item>
+            <cds-slider max="100" min="0" step="1" value="${ifDefined(value)}">
+              <cds-slider-input
+                aria-label="Slider value"
+                type="number"></cds-slider-input>
+            </cds-slider>
+          </cds-form-item>
+          <h1 class="slider-headers">${value}</h1>
+        </div>
+      </sb-template-layers>
+    `;
+  },
+};
+
+export const WithLayer = {
+  render: () => {
+    return html`
+      <sb-template-layers>
+        <cds-form-item>
+          <cds-slider
+            label-text="Slider label"
+            max="100"
+            min="0"
+            step="1"
+            value="50">
+            <cds-slider-input
+              aria-label="Slider value"
+              type="number"></cds-slider-input>
+          </cds-slider>
+        </cds-form-item>
+      </sb-template-layers>
+    `;
+  },
+};
+
+export const Skeleton = {
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  render: () =>
+    html`
+      <cds-form-item><cds-slider-skeleton></cds-slider-skeleton></cds-form-item>
+    `,
+};
+
+export const Playground = {
+  args,
+  argTypes,
+  render: (args) => {
+    const {
+      ariaLabelInput,
+      disabled,
+      hideTextInput,
+      invalid,
+      invalidText,
+      inputType,
+      labelText,
+      max,
+      min,
+      maxLabel,
+      minLabel,
+      name,
+      readOnly,
+      required,
+      step,
+      stepMultiplier,
+      warn,
+      warnText,
+      value,
+      onChange,
+    } = args || {};
+    return html`
+      <cds-form-item>
+        <cds-slider
+          ?disabled="${disabled}"
+          ?hide-text-input="${hideTextInput}"
+          ?invalid="${invalid}"
+          invalid-text="${ifDefined(invalidText)}"
+          label-text="${labelText}"
+          max="${ifDefined(max)}"
+          min="${ifDefined(min)}"
+          max-label="${ifDefined(maxLabel)}"
+          min-label="${ifDefined(minLabel)}"
+          ?readonly="${ifDefined(readOnly)}"
+          step="${ifDefined(step)}"
+          step-multiplier="${ifDefined(stepMultiplier)}"
+          ?warn="${warn}"
+          warn-text="${warnText}"
+          value="${ifDefined(value)}"
+          @cds-slider-changed="${onChange}">
+          ${!hideTextInput
+            ? html`<cds-slider-input
+                aria-label="${ifDefined(ariaLabelInput)}"
+                type="${ifDefined(inputType)}"
+                ?required="${ifDefined(required)}"
+                ?name="${ifDefined(name)}"></cds-slider-input>`
+            : null}
+        </cds-slider>
+      </cds-form-item>
+    `;
+  },
+};
+
+export default {
+  title: 'Components/Slider',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};

From 0b3cc72f7498246cac6ba631387efd46c64fa399 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Wed, 10 Jan 2024 08:30:48 -0500
Subject: [PATCH 2/3] chore(skip-to-content): update skip-to-content stories to
 sb v7 (#11372)

Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>
---
 .../carbon-web-components/.storybook/main.ts  |  2 +
 .../skip-to-content/skip-to-content-story.ts  | 75 -----------------
 ...-content-story.mdx => skip-to-content.mdx} | 12 ++-
 .../skip-to-content.stories.ts                | 82 +++++++++++++++++++
 4 files changed, 92 insertions(+), 79 deletions(-)
 delete mode 100644 packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts
 rename packages/carbon-web-components/src/components/skip-to-content/{skip-to-content-story.mdx => skip-to-content.mdx} (70%)
 create mode 100644 packages/carbon-web-components/src/components/skip-to-content/skip-to-content.stories.ts

diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
index 4de8d6d55cc..50b8e33defe 100644
--- a/packages/carbon-web-components/.storybook/main.ts
+++ b/packages/carbon-web-components/.storybook/main.ts
@@ -26,6 +26,8 @@ const stories = glob.sync(
     '../src/**/file-uploader.stories.ts',
     '../src/**/overflow-menu.mdx',
     '../src/**/overflow-menu.stories.ts',
+    '../src/**/skip-to-content.mdx',
+    '../src/**/skip-to-content.stories.ts',
     '../src/**/slider.mdx',
     '../src/**/slider.stories.ts',
   ],
diff --git a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts
deleted file mode 100644
index 58484d45702..00000000000
--- a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 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 './skip-to-content';
-import styles from './skip-to-content-story.scss?lit';
-import storyDocs from './skip-to-content-story.mdx';
-import { prefix } from '../../globals/settings';
-
-export const Default = () => html`
-  <style>
-    ${styles}
-  </style>
-  <div class="${prefix}--content ${prefix}--grid">
-    <div class="${prefix}--row">
-      <div class="${prefix}--col-lg-13">
-        <h2>Purpose and function</h2>
-        <p>
-          The shell is perhaps the most crucial piece of any UI built with
-          Carbon. It contains the shared navigation framework for the entire
-          design system and ties the products in IBM’s portfolio together in a
-          cohesive and elegant way. The shell is the home of the topmost
-          navigation, where users can quickly and dependably gain their bearings
-          and move between pages.
-          <br />
-          <br />
-          The shell was designed with maximum flexibility built in, to serve the
-          needs of a broad range of products and users. Adopting the shell
-          ensures compliance with IBM design standards, simplifies development
-          efforts, and provides great user experiences. All IBM products built
-          with Carbon are required to use the shell’s header.
-          <br />
-          <br />
-          To better understand the purpose and function of the UI shell,
-          consider the “shell” of MacOS, which contains the Apple menu,
-          top-level navigation, and universal, OS-level controls at the top of
-          the screen, as well as a universal dock along the bottom or side of
-          the screen. The Carbon UI shell is roughly analogous in function to
-          these parts of the Mac UI. For example, the app switcher portion of
-          the shell can be compared to the dock in MacOS.
-        </p>
-        <h2>Header responsive behavior</h2>
-        <p>
-          As a header scales down to fit smaller screen sizes, headers with
-          persistent side nav menus should have the side nav collapse into
-          “hamburger” menu. See the example to better understand responsive
-          behavior of the header.
-        </p>
-        <h2>Secondary navigation</h2>
-        <p>
-          The side-nav contains secondary navigation and fits below the header.
-          It can be configured to be either fixed-width or flexible, with only
-          one level of nested items allowed. Both links and category lists can
-          be used in the side-nav and may be mixed together. There are several
-          configurations of the side-nav, but only one configuration should be
-          used per product section. If tabs are needed on a page when using a
-          side-nav, then the tabs are secondary in hierarchy to the side-nav.
-        </p>
-      </div>
-    </div>
-  </div>
-`;
-
-export default {
-  title: 'Components/Skip to content',
-  parameters: {
-    ...storyDocs.parameters,
-  },
-};
diff --git a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.mdx
similarity index 70%
rename from packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx
rename to packages/carbon-web-components/src/components/skip-to-content/skip-to-content.mdx
index 93c22b66d17..6c53a070adf 100644
--- a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx
+++ b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.mdx
@@ -1,4 +1,8 @@
-import { Props } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as SkipToContentStories from './skip-to-content.stories';
+
+<Meta of={SkipToContentStories} />
 
 # Skip to content
 
@@ -21,8 +25,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/skip-to-content/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['skip-to-content'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['skip-to-content'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -32,4 +36,4 @@ import '@carbon/web-components/es/components/skip-to-content/index.js';
 
 ## `<cds-skip-to-content>` attributes and properties
 
-<Props of="cds-skip-to-content" />
+<ArgsTable of="cds-skip-to-content" />
diff --git a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.stories.ts b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.stories.ts
new file mode 100644
index 00000000000..1b653a4f272
--- /dev/null
+++ b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.stories.ts
@@ -0,0 +1,82 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 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 './skip-to-content';
+import styles from './skip-to-content-story.scss?lit';
+import storyDocs from './skip-to-content.mdx';
+import { prefix } from '../../globals/settings';
+
+export const Default = {
+  render: () => html`
+    <style>
+      ${styles}
+    </style>
+    <div class="${prefix}--content ${prefix}--grid">
+      <div class="${prefix}--row">
+        <div class="${prefix}--col-lg-13">
+          <h2>Purpose and function</h2>
+          <p>
+            The shell is perhaps the most crucial piece of any UI built with
+            Carbon. It contains the shared navigation framework for the entire
+            design system and ties the products in IBM’s portfolio together in a
+            cohesive and elegant way. The shell is the home of the topmost
+            navigation, where users can quickly and dependably gain their
+            bearings and move between pages.
+            <br />
+            <br />
+            The shell was designed with maximum flexibility built in, to serve
+            the needs of a broad range of products and users. Adopting the shell
+            ensures compliance with IBM design standards, simplifies development
+            efforts, and provides great user experiences. All IBM products built
+            with Carbon are required to use the shell’s header.
+            <br />
+            <br />
+            To better understand the purpose and function of the UI shell,
+            consider the “shell” of MacOS, which contains the Apple menu,
+            top-level navigation, and universal, OS-level controls at the top of
+            the screen, as well as a universal dock along the bottom or side of
+            the screen. The Carbon UI shell is roughly analogous in function to
+            these parts of the Mac UI. For example, the app switcher portion of
+            the shell can be compared to the dock in MacOS.
+          </p>
+          <h2>Header responsive behavior</h2>
+          <p>
+            As a header scales down to fit smaller screen sizes, headers with
+            persistent side nav menus should have the side nav collapse into
+            “hamburger” menu. See the example to better understand responsive
+            behavior of the header.
+          </p>
+          <h2>Secondary navigation</h2>
+          <p>
+            The side-nav contains secondary navigation and fits below the
+            header. It can be configured to be either fixed-width or flexible,
+            with only one level of nested items allowed. Both links and category
+            lists can be used in the side-nav and may be mixed together. There
+            are several configurations of the side-nav, but only one
+            configuration should be used per product section. If tabs are needed
+            on a page when using a side-nav, then the tabs are secondary in
+            hierarchy to the side-nav.
+          </p>
+        </div>
+      </div>
+    </div>
+  `,
+};
+
+const meta = {
+  title: 'Components/Skip To Content',
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
+};
+
+export default meta;

From edb9de9a667a6f3b7c0afeacde097bcecae44d57 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Wed, 10 Jan 2024 09:09:09 -0500
Subject: [PATCH 3/3] feat(skeleton): update story to Storybook v7 (#11363)

* chore(skeleton): update skeleton stories to sb v7

* chore(storybook): remove unused var

---------

Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>
---
 .../carbon-web-components/.storybook/main.ts  |  4 +
 .../skeleton-placeholder-story.ts             | 30 -------
 ...der-story.mdx => skeleton-placeholder.mdx} | 11 ++-
 .../skeleton-placeholder.stories.ts           | 32 +++++++
 .../skeleton-text/skeleton-text-story.ts      | 67 ---------------
 ...leton-text-story.mdx => skeleton-text.mdx} | 11 ++-
 .../skeleton-text/skeleton-text.stories.ts    | 85 +++++++++++++++++++
 7 files changed, 135 insertions(+), 105 deletions(-)
 delete mode 100644 packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts
 rename packages/carbon-web-components/src/components/skeleton-placeholder/{skeleton-placeholder-story.mdx => skeleton-placeholder.mdx} (72%)
 create mode 100644 packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.stories.ts
 delete mode 100644 packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts
 rename packages/carbon-web-components/src/components/skeleton-text/{skeleton-text-story.mdx => skeleton-text.mdx} (78%)
 create mode 100644 packages/carbon-web-components/src/components/skeleton-text/skeleton-text.stories.ts

diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
index 50b8e33defe..c11b69c1939 100644
--- a/packages/carbon-web-components/.storybook/main.ts
+++ b/packages/carbon-web-components/.storybook/main.ts
@@ -26,6 +26,10 @@ const stories = glob.sync(
     '../src/**/file-uploader.stories.ts',
     '../src/**/overflow-menu.mdx',
     '../src/**/overflow-menu.stories.ts',
+    '../src/**/skeleton-placeholder.mdx',
+    '../src/**/skeleton-placeholder.stories.ts',
+    '../src/**/skeleton-text.mdx',
+    '../src/**/skeleton-text.stories.ts',
     '../src/**/skip-to-content.mdx',
     '../src/**/skip-to-content.stories.ts',
     '../src/**/slider.mdx',
diff --git a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts
deleted file mode 100644
index 9cb37821bdf..00000000000
--- a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts
+++ /dev/null
@@ -1,30 +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 './skeleton-placeholder';
-import storyDocs from './skeleton-placeholder-story.mdx';
-
-export const Default = () =>
-  html`<cds-skeleton-placeholder></cds-skeleton-placeholder>`;
-
-Default.storyName = 'Default';
-
-Default.parameters = {
-  percy: {
-    skip: true,
-  },
-};
-
-export default {
-  title: 'Components/Skeleton/Skeleton placeholder',
-  parameters: {
-    ...storyDocs.parameters,
-  },
-};
diff --git a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.mdx
similarity index 72%
rename from packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx
rename to packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.mdx
index fcb3bf9676e..ef10759a074 100644
--- a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx
+++ b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.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 SkeletonPlaceholderStories from './skeleton-placeholder.stories';
+
+<Meta of={SkeletonPlaceholderStories} />
 
 # Skeleton placeholder
 
@@ -19,8 +22,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/skeleton-placeholder/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['skeleton-placeholder'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['skeleton-placeholder'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -30,4 +33,4 @@ import '@carbon/web-components/es/components/skeleton-placeholder/index.js';
 
 ## `<cds-skeleton-placeholder>` attributes, properties and events
 
-<Props of="cds-skeleton-placeholder" />
+<ArgsTable of="cds-skeleton-placeholder" />
diff --git a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.stories.ts b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.stories.ts
new file mode 100644
index 00000000000..0d455f997b1
--- /dev/null
+++ b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.stories.ts
@@ -0,0 +1,32 @@
+/**
+ * @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 './skeleton-placeholder';
+import storyDocs from './skeleton-placeholder.mdx';
+
+export const Default = {
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  render: () => html`<cds-skeleton-placeholder></cds-skeleton-placeholder>`,
+};
+
+const meta = {
+  title: 'Components/Skeleton/Skeleton Placeholder',
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
+};
+
+export default meta;
diff --git a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts
deleted file mode 100644
index 032c03c4dbc..00000000000
--- a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts
+++ /dev/null
@@ -1,67 +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, number, select, text } from '@storybook/addon-knobs';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { prefix } from '../../globals/settings';
-import { SKELETON_TEXT_TYPE } from './skeleton-text';
-import storyDocs from './skeleton-text-story.mdx';
-
-const types = {
-  Regular: null,
-  [`Heading (${SKELETON_TEXT_TYPE.HEADING})`]: SKELETON_TEXT_TYPE.HEADING,
-};
-
-export const Default = () => html` <cds-skeleton-text></cds-skeleton-text>`;
-
-Default.storyName = 'Default';
-
-Default.parameters = {
-  percy: {
-    skip: true,
-  },
-};
-
-export const Playground = (args) => {
-  const { type, paragraph, lineCount, width } =
-    args?.[`${prefix}-skeleton-text`] ?? {};
-  return html`
-    <cds-skeleton-text
-      type="${ifDefined(type)}"
-      ?paragraph="${paragraph}"
-      lineCount="${lineCount}"
-      width="${width}">
-    </cds-skeleton-text>
-  `;
-};
-
-Playground.parameters = {
-  knobs: {
-    [`${prefix}-skeleton-text`]: () => ({
-      type: select('Skeleton text type (type)', types, null),
-      paragraph: boolean('Use multiple lines of text (paragraph)', true),
-      lineCount: number('The number of lines in a paragraph (lineCount)', 3),
-      width: text(
-        'Width (in px or %) of single line of text or max-width of paragraph lines (width)',
-        '100%'
-      ),
-    }),
-  },
-};
-
-export default {
-  title: 'Components/Skeleton/Skeleton text',
-  parameters: {
-    ...storyDocs.parameters,
-    percy: {
-      skip: true,
-    },
-  },
-};
diff --git a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.mdx
similarity index 78%
rename from packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx
rename to packages/carbon-web-components/src/components/skeleton-text/skeleton-text.mdx
index 860c3aee993..6a523900234 100644
--- a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx
+++ b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.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 SkeletonTextStories from './skeleton-text.stories';
+
+<Meta of={SkeletonTextStories} />
 
 # Skeleton text
 
@@ -19,8 +22,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/skeleton-text/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['skeleton-text'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['skeleton-text'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -41,4 +44,4 @@ multiple instances of `<cds-skeleton-text>`.
 
 ## `<cds-skeleton-text>` attributes and properties
 
-<Props of="cds-skeleton-text" />
+<ArgsTable of="cds-skeleton-text" />
diff --git a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.stories.ts b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.stories.ts
new file mode 100644
index 00000000000..107efa685ff
--- /dev/null
+++ b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.stories.ts
@@ -0,0 +1,85 @@
+/**
+ * @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 { SKELETON_TEXT_TYPE } from './skeleton-text';
+import storyDocs from './skeleton-text.mdx';
+
+const types = {
+  Regular: null,
+  [`Heading (${SKELETON_TEXT_TYPE.HEADING})`]: SKELETON_TEXT_TYPE.HEADING,
+};
+
+const args = {
+  type: null,
+  paragraph: true,
+  lineCount: 3,
+  width: '100%',
+};
+
+const argTypes = {
+  type: {
+    control: 'select',
+    description: 'Indicate the type of skeleton text, heading or regular.',
+    options: types,
+  },
+  paragraph: {
+    control: 'boolean',
+    description: 'Set this to true to generate multiple lines of text.',
+  },
+  lineCount: {
+    control: 'number',
+    description: 'The number of lines shown if paragraph is true.',
+  },
+  width: {
+    control: 'text',
+    description:
+      'Width (in px or %) of single line of text or max-width of paragraph lines.',
+  },
+};
+
+export const Default = {
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  render: () => html`<cds-skeleton-text></cds-skeleton-text>`,
+};
+
+export const Playground = {
+  args,
+  argTypes,
+  render: (args) => {
+    const { type, paragraph, lineCount, width } = args ?? {};
+    return html`
+      <cds-skeleton-text
+        type="${ifDefined(type)}"
+        ?paragraph="${paragraph}"
+        lineCount="${lineCount}"
+        width="${width}">
+      </cds-skeleton-text>
+    `;
+  },
+};
+
+const meta = {
+  title: 'Components/Skeleton/Skeleton Text',
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+    percy: {
+      skip: true,
+    },
+  },
+};
+
+export default meta;