From bc8f0a8aae73bbb5d5908b21b13fe7f426f5eb44 Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Wed, 3 Jan 2024 17:47:00 -0800
Subject: [PATCH 1/5] feat(layer): updated to v7

---
 .../carbon-web-components/.storybook/main.ts  |  2 +
 .../layer/{layer-story.mdx => layer.mdx}      |  7 +-
 .../{layer-story.ts => layer.stories.ts}      | 84 ++++++++++---------
 3 files changed, 50 insertions(+), 43 deletions(-)
 rename packages/carbon-web-components/src/components/layer/{layer-story.mdx => layer.mdx} (94%)
 rename packages/carbon-web-components/src/components/layer/{layer-story.ts => layer.stories.ts} (58%)

diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
index 14911c61884..a039799ea0a 100644
--- a/packages/carbon-web-components/.storybook/main.ts
+++ b/packages/carbon-web-components/.storybook/main.ts
@@ -13,6 +13,8 @@ const stories = glob.sync(
     // add mdx/story files as they are being worked on
     '../src/**/link.mdx',
     '../src/**/link.stories.ts',
+    '../src/**/layer.stories.ts',
+    '../src/**/layer.mdx',
   ],
   {
     ignore: ['../src/**/docs/*.mdx'],
diff --git a/packages/carbon-web-components/src/components/layer/layer-story.mdx b/packages/carbon-web-components/src/components/layer/layer.mdx
similarity index 94%
rename from packages/carbon-web-components/src/components/layer/layer-story.mdx
rename to packages/carbon-web-components/src/components/layer/layer.mdx
index 0a70d3e16e6..5e36785f3d6 100644
--- a/packages/carbon-web-components/src/components/layer/layer-story.mdx
+++ b/packages/carbon-web-components/src/components/layer/layer.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Description, Meta } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as LayerStories from './layer.stories';
+
+<Meta of={LayerStories} /> 
 
 # Layer
 
@@ -108,4 +111,4 @@ like the Layer component to be seen as a section you could write the following:
 
 ## `<cds-layer>` attributes, properties and events
 
-<Props of="cds-layer" />
+<ArgsTable of="cds-layer" />
diff --git a/packages/carbon-web-components/src/components/layer/layer-story.ts b/packages/carbon-web-components/src/components/layer/layer.stories.ts
similarity index 58%
rename from packages/carbon-web-components/src/components/layer/layer-story.ts
rename to packages/carbon-web-components/src/components/layer/layer.stories.ts
index 7bd115c39b1..de7e39e5bc2 100644
--- a/packages/carbon-web-components/src/components/layer/layer-story.ts
+++ b/packages/carbon-web-components/src/components/layer/layer.stories.ts
@@ -8,11 +8,10 @@
  */
 
 import { html } from 'lit';
-import { radios } from '@storybook/addon-knobs';
 import { prefix } from '../../globals/settings';
-import storyDocs from './layer-story.mdx';
 import styles from './layer-story.scss?lit';
-import './index.ts';
+import storyDocs from './layer.mdx';
+import './index';
 
 const levels = {
   'First layer': '0',
@@ -20,8 +19,19 @@ const levels = {
   'Third layer': '2',
 };
 
-export const Default = () => {
-  return html`
+const defaultArgs = {
+  level: '0'
+}
+
+const controls = {
+  level: {
+    control: 'radio', options: levels,
+    description: `Specify the layer level.`
+  },
+}
+
+export const Default = {
+  render: () => html`
     <cds-layer>
       <div class="example-layer-test-component">Test component</div>
       <cds-layer>
@@ -34,33 +44,32 @@ export const Default = () => {
     <style>
       ${styles}
     </style>
-  `;
+  `
 };
 
-Default.storyName = 'Default';
-
-export const CustomLevel = () => {
-  return html`
+export const CustomLevel = {
+  name: 'Custom level',
+  render: () => html`
     <cds-layer level="0">
       <div class="example-layer-test-component">Test component</div>
     </cds-layer>
     <style>
       ${styles}
     </style>
-  `;
+  `
 };
 
-CustomLevel.storyName = 'Custom level';
-
-export const UseLayer = () => {
-  document.addEventListener(`${prefix}-use-layer`, (e) => {
-    const { layer, level } = (e as any).detail;
-    layer.querySelector(
-      '.example-layer-test-component.use-layer'
-    ).innerText = `The current layer level is: ${level + 1}`;
-  });
+export const UseLayer = {
+  name: 'useLayer',
+  render: () => {
+    document.addEventListener(`${prefix}-use-layer`, (e) => {
+      const { layer, level } = (e as any).detail;
+      layer.querySelector(
+        '.example-layer-test-component.use-layer'
+      ).innerText = `The current layer level is: ${level + 1}`;
+    });
 
-  return html`
+    return html`
     <cds-layer>
       <div class="example-layer-test-component use-layer"></div>
       <cds-layer>
@@ -70,37 +79,30 @@ export const UseLayer = () => {
     <style>
       ${styles}
     </style>
-  `;
+  `
+  }
 };
 
-UseLayer.storyName = 'useLayer';
-
-export const Playground = (args) => {
-  const { level } = args?.[`${prefix}-layer-playground`] ?? {};
-  return html`
+export const Playground = {
+  args: defaultArgs,
+  argTypes: controls,
+  render: ({level}) => html`
     <cds-layer level="${level}">
       <div class="example-layer-test-component">Test component</div>
     </cds-layer>
     <style>
       ${styles}
     </style>
-  `;
+  `,
 };
 
-Playground.parameters = {
-  percy: {
-    skip: true,
-  },
-  knobs: {
-    [`${prefix}-layer-playground`]: () => ({
-      level: radios('Specify the layer level', levels, '0'),
-    }),
-  },
-};
-
-export default {
+const meta = {
   title: 'Components/Layer',
   parameters: {
-    ...storyDocs.parameters,
+    docs: {
+      page: storyDocs,
+    },
   },
 };
+
+export default meta;
\ No newline at end of file

From b6870c72d6ee1745ca1479c41b7264d3d7074a86 Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Wed, 3 Jan 2024 18:35:35 -0800
Subject: [PATCH 2/5] feat(dropdown): update story

---
 .../carbon-web-components/.storybook/main.ts  |   2 +
 .../.storybook/preview.js                     |   1 +
 .../{dropdown-story.mdx => dropdown.mdx}      |   9 +-
 ...{dropdown-story.ts => dropdown.stories.ts} | 183 +++++++++++-------
 .../tests/spec/dropdown_spec.ts               |   2 +-
 5 files changed, 122 insertions(+), 75 deletions(-)
 rename packages/carbon-web-components/src/components/dropdown/{dropdown-story.mdx => dropdown.mdx} (91%)
 rename packages/carbon-web-components/src/components/dropdown/{dropdown-story.ts => dropdown.stories.ts} (61%)

diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
index a039799ea0a..8a6feecf799 100644
--- a/packages/carbon-web-components/.storybook/main.ts
+++ b/packages/carbon-web-components/.storybook/main.ts
@@ -11,6 +11,8 @@ const stories = glob.sync(
     // '../src/**/*.mdx',
     // '../src/**/*.stories.@(js|jsx|ts|tsx)',
     // add mdx/story files as they are being worked on
+    '../src/**/dropdown.stories.ts',
+    '../src/**/dropdown.mdx',    
     '../src/**/link.mdx',
     '../src/**/link.stories.ts',
     '../src/**/layer.stories.ts',
diff --git a/packages/carbon-web-components/.storybook/preview.js b/packages/carbon-web-components/.storybook/preview.js
index f2bca308240..71896f81aa2 100644
--- a/packages/carbon-web-components/.storybook/preview.js
+++ b/packages/carbon-web-components/.storybook/preview.js
@@ -4,6 +4,7 @@ import container from './container';
 import { white, g10, g90, g100 } from '@carbon/themes';
 import { breakpoints } from '@carbon/layout';
 import theme from './theme';
+import './templates/with-layer';
 
 setCustomElementsManifest(customElements);
 
diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx b/packages/carbon-web-components/src/components/dropdown/dropdown.mdx
similarity index 91%
rename from packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx
rename to packages/carbon-web-components/src/components/dropdown/dropdown.mdx
index 850bf26eb79..81bc990c420 100644
--- a/packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx
+++ b/packages/carbon-web-components/src/components/dropdown/dropdown.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Description, Meta } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as DropdownStories from './dropdown.stories';
+
+<Meta of={DropdownStories} /> 
 
 # Dropdown
 
@@ -75,7 +78,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-dropdown open>`) and `false` means not setting the attribute (e.g.
 `<cds-dropdown>` without `open` attribute).
 
-<Props of="cds-dropdown" />
+<ArgsTable of="cds-dropdown" />
 
 ## `<cds-dropdown-item>` attributes and properties
 
@@ -83,4 +86,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-dropdown-item disabled>`) and `false` means not setting the attribute
 (e.g. `<cds-dropdown-item>` without `disabled` attribute).
 
-<Props of="cds-dropdown-item" />
+<ArgsTable of="cds-dropdown-item" />
diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown-story.ts b/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts
similarity index 61%
rename from packages/carbon-web-components/src/components/dropdown/dropdown-story.ts
rename to packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts
index b02a7dbb52d..cd29f1b25e0 100644
--- a/packages/carbon-web-components/src/components/dropdown/dropdown-story.ts
+++ b/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts
@@ -8,14 +8,11 @@
  */
 
 import { html } from 'lit';
-import { boolean, select } from '@storybook/addon-knobs';
-import { prefix } from '../../globals/settings';
-import textNullable from '../../../.storybook/knob-text-nullable';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { DROPDOWN_DIRECTION, DROPDOWN_SIZE, DROPDOWN_TYPE } from './dropdown';
 import './dropdown-item';
 import './dropdown-skeleton';
-import storyDocs from './dropdown-story.mdx';
+import storyDocs from './dropdown.mdx';
 
 const directionOptions = {
   [`Top`]: DROPDOWN_DIRECTION.TOP,
@@ -61,8 +58,89 @@ const items = [
   },
 ];
 
-export const Default = () => {
-  return html`
+const defaultArgs = {
+  direction: 'bottom',
+  disabled: false,
+  hideLabel: false,
+  helperText: 'This is some helper text',
+  invalid: false,
+  invalidText: 'invalid selection',
+  label: 'This is an example label',
+  open: false,
+  readOnly: false,
+  size: null,
+  titleText: 'This is an example title',
+  type: null,
+  value: '',
+  warn: false,
+  warnText: 'please notice the warning',  
+}
+
+const controls = {
+  disabled: {
+    control: 'boolean',
+    description: `Specify if the dropdown should be disabled, or not`,
+  },
+  direction: {
+    control: 'select', options: directionOptions,
+    description: `Dropdown direction`
+  },
+  hideLabel: {
+    control: 'boolean',
+    description: `Specify if the title text should be hidden, or not`,
+  },
+  helperText: {
+    control: 'text',
+    description: `The helper text for the dropdown.`,
+  },
+  invalid: {
+    control: 'boolean',
+    description: `Specify if the dropdown should display an invalid icon, or not`,
+  },
+  invalidText: {
+    control: 'text',
+    description: `Message which is displayed if the value is invalid.`,
+  },
+  label: {
+    control: 'text',
+    description: `The default content of the trigger button.`,
+  },
+  open: {
+    control: 'boolean',
+    description: `Specify if the dropdown should be open, or not`,
+  },
+  readOnly: {
+    control: 'boolean',
+    description: `Specify if the dropdown should be read only, or not`,
+  },
+  size: {
+    control: 'select', options: sizes,
+    description: `Dropdown size`
+  },
+  titleText: {
+    control: 'text',
+    description: `Text that will be read by a screen reader when visiting this control.`,
+  },
+  type: {
+    control: 'select', options: types,
+    description: `Dropdown size`
+  },
+  value: {
+    control: 'text',
+    description: `The value of the selected item.`,
+  },
+  warn: {
+    control: 'boolean',
+    description: `Specify whether the control is currently in warning state`,
+  },
+  warnText: {
+    control: 'text',
+    description: `Text that is displayed when the control is in warning state.`,
+  },
+};
+
+export const Default = {
+  render: () => html`
     <cds-dropdown
       helper-text="This is some helper text"
       title-text="Dropdown label"
@@ -75,11 +153,11 @@ export const Default = () => {
         `
       )}
     </cds-dropdown>
-  `;
+  `
 };
 
-export const Inline = () => {
-  return html`
+export const Inline = {
+  render: () => html`
     <cds-dropdown
       type="inline"
       title-text="Inline dropdown label"
@@ -92,11 +170,11 @@ export const Inline = () => {
         `
       )}
     </cds-dropdown>
-  `;
+  `
 };
 
-export const InlineWithLayer = () => {
-  return html`
+export const InlineWithLayer = {
+  render: () => html`
     <sb-template-layers>
       <div style="width:400px">
         <cds-dropdown
@@ -115,11 +193,11 @@ export const InlineWithLayer = () => {
         </cds-dropdown>
       </div>
     </sb-template-layers>
-  `;
+  `
 };
 
-export const WithLayer = () => {
-  return html`
+export const WithLayer = {
+  render: () => html`
     <sb-template-layers>
       <div style="width:400px">
         <cds-dropdown
@@ -138,11 +216,13 @@ export const WithLayer = () => {
         </cds-dropdown>
       </div>
     </sb-template-layers>
-  `;
+  `
 };
 
-export const Playground = (args) => {
-  const {
+export const Playground = {
+  argTypes: controls,
+  args: defaultArgs,
+  render: ({
     open,
     direction,
     disabled,
@@ -158,9 +238,8 @@ export const Playground = (args) => {
     label,
     warn,
     warnText,
-  } = args?.[`${prefix}-dropdown`] ?? {};
-
-  return html`
+  }) =>
+   html`
     <cds-dropdown
       ?open=${open}
       ?disabled="${disabled}"
@@ -185,64 +264,26 @@ export const Playground = (args) => {
         `
       )}
     </cds-dropdown>
-  `;
-};
-
-Playground.parameters = {
-  knobs: {
-    [`${prefix}-dropdown`]: () => ({
-      open: boolean('Open (open)', false),
-      direction: select('Direction', directionOptions, null),
-      disabled: boolean('Disabled (disabled)', false),
-      helperText: textNullable(
-        'Helper text (helper-text)',
-        'This is some helper text'
-      ),
-      hideLabel: boolean('Hide label (hide-label)', false),
-      invalid: boolean('Invalid (invalid)', false),
-      invalidText: textNullable(
-        'Invalid text (invalid-text)',
-        'invalid selection'
-      ),
-      readOnly: boolean('Read only (read-only)', false),
-      label: textNullable(
-        'The default content of the trigger button (label)',
-        'This is an example label'
-      ),
-      titleText: textNullable(
-        'Title text (title-text)',
-        'This is an example title'
-      ),
-      size: select('Dropdown size (size)', sizes, null),
-      type: select('Dropdown type (type)', types, null),
-      value: textNullable('Selected value (value)', ''),
-      warn: boolean('Warn (warn)', false),
-      warnText: textNullable(
-        'Warn text (warn-text)',
-        'please notice the warning'
-      ),
-    }),
-  },
+  `
 };
 
-export const skeleton = () =>
-  html` <cds-dropdown-skeleton></cds-dropdown-skeleton> `;
+export const skeleton = {
+  render: () => html` <cds-dropdown-skeleton></cds-dropdown-skeleton> `
+}
 
-skeleton.parameters = {
-  percy: {
-    skip: true,
-  },
-};
-
-export default {
+const meta = {
   title: 'Components/Dropdown',
-  parameters: {
-    ...storyDocs.parameters,
-  },
   decorators: [
     (story, { name }) => {
       const width = !name.toLowerCase().includes('layer') ? `width:400px` : ``;
       return html` <div style="${width}">${story()}</div> `;
     },
   ],
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
 };
+
+export default meta;
diff --git a/packages/carbon-web-components/tests/spec/dropdown_spec.ts b/packages/carbon-web-components/tests/spec/dropdown_spec.ts
index 96f81421bf8..5279f252e7b 100644
--- a/packages/carbon-web-components/tests/spec/dropdown_spec.ts
+++ b/packages/carbon-web-components/tests/spec/dropdown_spec.ts
@@ -13,7 +13,7 @@ import EventManager from '../utils/event-manager';
 
 import CDSDropdown from '../../src/components/dropdown/dropdown';
 import CDSDropdownItem from '../../src/components/dropdown/dropdown-item';
-import { Playground } from '../../src/components/dropdown/dropdown-story';
+import { Playground } from '../../src/components/dropdown/dropdown.stories';
 
 const template = (props?) =>
   Playground({

From 8e92981294d09eccc5cbdb185c1b94d2d4571f02 Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Wed, 3 Jan 2024 18:47:41 -0800
Subject: [PATCH 3/5] feat(combo-box): update to v7

---
 .../carbon-web-components/.storybook/main.ts  |   2 +
 .../{combo-box-story.mdx => combo-box.mdx}    |   9 +-
 ...ombo-box-story.ts => combo-box.stories.ts} | 146 +++++++++++-------
 .../tests/spec/combo-box_spec.ts              |   2 +-
 4 files changed, 102 insertions(+), 57 deletions(-)
 rename packages/carbon-web-components/src/components/combo-box/{combo-box-story.mdx => combo-box.mdx} (94%)
 rename packages/carbon-web-components/src/components/combo-box/{combo-box-story.ts => combo-box.stories.ts} (59%)

diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
index 8a6feecf799..ca6fe9ec85c 100644
--- a/packages/carbon-web-components/.storybook/main.ts
+++ b/packages/carbon-web-components/.storybook/main.ts
@@ -11,6 +11,8 @@ const stories = glob.sync(
     // '../src/**/*.mdx',
     // '../src/**/*.stories.@(js|jsx|ts|tsx)',
     // add mdx/story files as they are being worked on
+    '../src/**/combo-box.stories.ts',
+    '../src/**/combo-box.mdx',    
     '../src/**/dropdown.stories.ts',
     '../src/**/dropdown.mdx',    
     '../src/**/link.mdx',
diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx b/packages/carbon-web-components/src/components/combo-box/combo-box.mdx
similarity index 94%
rename from packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx
rename to packages/carbon-web-components/src/components/combo-box/combo-box.mdx
index e6f034ab047..dbea5d6411a 100644
--- a/packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx
+++ b/packages/carbon-web-components/src/components/combo-box/combo-box.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Description, Meta } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as ComboBoxStories from './combo-box.stories';
+
+<Meta of={ComboBoxStories} /> 
 
 # Combo box
 
@@ -94,7 +97,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-combo-box open>`) and `false` means not setting the attribute (e.g.
 `<cds-combo-box>` without `open` attribute).
 
-<Props of="cds-combo-box" />
+<ArgsTable of="cds-combo-box" />
 
 ## `<cds-combo-box-item>` attributes and properties
 
@@ -102,4 +105,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-combo-box-item disabled>`) and `false` means not setting the attribute
 (e.g. `<cds-combo-box-item>` without `disabled` attribute).
 
-<Props of="cds-combo-box-item" />
+<ArgsTable of="cds-combo-box-item" />
diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts b/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts
similarity index 59%
rename from packages/carbon-web-components/src/components/combo-box/combo-box-story.ts
rename to packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts
index 9560e430d1b..145fe3aef14 100644
--- a/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts
+++ b/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts
@@ -9,12 +9,9 @@
 
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { boolean, select } from '@storybook/addon-knobs';
 import { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from './combo-box';
 import './combo-box-item';
-import storyDocs from './combo-box-story.mdx';
-import { prefix } from '../../globals/settings';
-import textNullable from '../../../.storybook/knob-text-nullable';
+import storyDocs from './combo-box.mdx';
 
 const items = [
   {
@@ -55,8 +52,79 @@ const sizes = {
   [`Large size (${DROPDOWN_SIZE.LARGE})`]: DROPDOWN_SIZE.LARGE,
 };
 
-export const Default = () => {
-  return html`
+const defaultArgs = {
+  direction: 'bottom',
+  disabled: false,
+  hideLabel: false,
+  helperText: 'This is some helper text',
+  invalid: false,
+  invalidText: 'invalid selection',
+  label: 'This is an example label',
+  readOnly: false,
+  size: null,
+  titleText: 'This is an example title',
+  value: '',
+  warn: false,
+  warnText: 'please notice the warning',  
+}
+
+const controls = {
+  disabled: {
+    control: 'boolean',
+    description: `Specify if the dropdown should be disabled, or not`,
+  },
+  direction: {
+    control: 'select', options: directionOptions,
+    description: `Dropdown direction`
+  },
+  hideLabel: {
+    control: 'boolean',
+    description: `Specify if the title text should be hidden, or not`,
+  },
+  helperText: {
+    control: 'text',
+    description: `The helper text for the dropdown.`,
+  },
+  invalid: {
+    control: 'boolean',
+    description: `Specify if the dropdown should display an invalid icon, or not`,
+  },
+  invalidText: {
+    control: 'text',
+    description: `Message which is displayed if the value is invalid.`,
+  },
+  label: {
+    control: 'text',
+    description: `The default content of the trigger button.`,
+  },
+  readOnly: {
+    control: 'boolean',
+    description: `Specify if the dropdown should be read only, or not`,
+  },
+  size: {
+    control: 'select', options: sizes,
+    description: `Dropdown size`
+  },
+  titleText: {
+    control: 'text',
+    description: `Text that will be read by a screen reader when visiting this control.`,
+  },
+  value: {
+    control: 'text',
+    description: `The value of the selected item.`,
+  },
+  warn: {
+    control: 'boolean',
+    description: `Specify whether the control is currently in warning state`,
+  },
+  warnText: {
+    control: 'text',
+    description: `Text that is displayed when the control is in warning state.`,
+  },
+};
+
+export const Default = {
+  render: () => html`
     <cds-combo-box
       helper-text="Combobox helper text"
       title-text="ComboBox title">
@@ -68,11 +136,11 @@ export const Default = () => {
         `
       )}
     </cds-combo-box>
-  `;
+  `
 };
 
-export const WithLayer = () => {
-  return html`
+export const WithLayer = {
+  render: () => html`
     <sb-template-layers>
       <div style="width:300px">
         <cds-combo-box
@@ -91,11 +159,13 @@ export const WithLayer = () => {
         </cds-combo-box>
       </div>
     </sb-template-layers>
-  `;
+  `
 };
 
-export const Playground = (args) => {
-  const {
+export const Playground = {
+  argTypes: controls,
+  args: defaultArgs,
+  render: ({
     disabled,
     helperText,
     invalid,
@@ -110,8 +180,7 @@ export const Playground = (args) => {
     type,
     invalidText,
     value,
-  } = args?.[`${prefix}-combo-box`] ?? {};
-  return html`
+  }) => html`
     <cds-combo-box
       ?disabled="${disabled}"
       ?hide-label=${hideLabel}
@@ -135,51 +204,22 @@ export const Playground = (args) => {
         `
       )}
     </cds-combo-box>
-  `;
-};
-
-Playground.parameters = {
-  knobs: {
-    [`${prefix}-combo-box`]: () => ({
-      direction: select(
-        'Direction',
-        directionOptions,
-        DROPDOWN_DIRECTION.BOTTOM
-      ),
-      disabled: boolean('Disabled (disabled)', false),
-      helperText: textNullable(
-        'Helper text (helper-text)',
-        'Optional helper text'
-      ),
-      hideLabel: boolean('Hide label (hide-label)', false),
-      invalid: boolean('Invalid (invalid)', false),
-      invalidText: textNullable(
-        'Invalid text (invalid-text)',
-        'invalid selection'
-      ),
-      readOnly: boolean('Read only (read-only)', false),
-      titleText: textNullable('Title text (title-text)', 'ComboBox title'),
-      size: select('Size (size)', sizes, null),
-      value: textNullable('Selected value (value)', ''),
-      label: textNullable('Placeholder (label)', ''),
-      warn: boolean('Warn (warn)', false),
-      warnText: textNullable(
-        'Warn text (warn-text)',
-        'please notice the warning'
-      ),
-    }),
-  },
-};
+  `
+}
 
-export default {
+const meta = {
   title: 'Components/Combo box',
-  parameters: {
-    ...storyDocs.parameters,
-  },
   decorators: [
     (story, { name }) => {
       const width = !name.toLowerCase().includes('layer') ? `width:300px` : ``;
       return html` <div style="${width}">${story()}</div> `;
     },
   ],
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
 };
+
+export default meta;
\ No newline at end of file
diff --git a/packages/carbon-web-components/tests/spec/combo-box_spec.ts b/packages/carbon-web-components/tests/spec/combo-box_spec.ts
index 553f9d5f9ba..cc460ecc2fd 100644
--- a/packages/carbon-web-components/tests/spec/combo-box_spec.ts
+++ b/packages/carbon-web-components/tests/spec/combo-box_spec.ts
@@ -13,7 +13,7 @@ import EventManager from '../utils/event-manager';
 
 import CDSComboBox from '../../src/components/combo-box/combo-box';
 import CDSComboBoxItem from '../../src/components/combo-box/combo-box-item';
-import { Playground } from '../../src/components/combo-box/combo-box-story';
+import { Playground } from '../../src/components/combo-box/combo-box.stories';
 
 const template = (props?) =>
   Playground({

From 5e00a654a466bb98b8eb196a2b4de32bf7cc42cb Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Thu, 4 Jan 2024 15:17:15 -0800
Subject: [PATCH 4/5] fix(stories): addressed feedback

---
 .../components/combo-box/combo-box.stories.ts | 16 +++++------
 .../components/dropdown/dropdown.stories.ts   | 27 +++++++++++--------
 .../src/components/layer/layer.stories.ts     |  7 ++++-
 3 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts b/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts
index 145fe3aef14..8862273943c 100644
--- a/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts
+++ b/packages/carbon-web-components/src/components/combo-box/combo-box.stories.ts
@@ -53,7 +53,7 @@ const sizes = {
 };
 
 const defaultArgs = {
-  direction: 'bottom',
+  direction: DROPDOWN_DIRECTION.BOTTOM,
   disabled: false,
   hideLabel: false,
   helperText: 'This is some helper text',
@@ -71,7 +71,7 @@ const defaultArgs = {
 const controls = {
   disabled: {
     control: 'boolean',
-    description: `Specify if the dropdown should be disabled, or not`,
+    description: `Specify if the dropdown should be disabled, or not.`,
   },
   direction: {
     control: 'select', options: directionOptions,
@@ -79,7 +79,7 @@ const controls = {
   },
   hideLabel: {
     control: 'boolean',
-    description: `Specify if the title text should be hidden, or not`,
+    description: `Specify if the title text should be hidden, or not.`,
   },
   helperText: {
     control: 'text',
@@ -87,7 +87,7 @@ const controls = {
   },
   invalid: {
     control: 'boolean',
-    description: `Specify if the dropdown should display an invalid icon, or not`,
+    description: `Specify if the dropdown should display an invalid icon, or not.`,
   },
   invalidText: {
     control: 'text',
@@ -99,11 +99,11 @@ const controls = {
   },
   readOnly: {
     control: 'boolean',
-    description: `Specify if the dropdown should be read only, or not`,
+    description: `Specify if the dropdown should be read only, or not.`,
   },
   size: {
     control: 'select', options: sizes,
-    description: `Dropdown size`
+    description: `Dropdown size.`
   },
   titleText: {
     control: 'text',
@@ -115,7 +115,7 @@ const controls = {
   },
   warn: {
     control: 'boolean',
-    description: `Specify whether the control is currently in warning state`,
+    description: `Specify whether the control is currently in warning state.`,
   },
   warnText: {
     control: 'text',
@@ -222,4 +222,4 @@ const meta = {
   },
 };
 
-export default meta;
\ No newline at end of file
+export default meta;
diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts b/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts
index cd29f1b25e0..049ce8e9d0b 100644
--- a/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts
+++ b/packages/carbon-web-components/src/components/dropdown/dropdown.stories.ts
@@ -59,7 +59,7 @@ const items = [
 ];
 
 const defaultArgs = {
-  direction: 'bottom',
+  direction: DROPDOWN_DIRECTION.BOTTOM,
   disabled: false,
   hideLabel: false,
   helperText: 'This is some helper text',
@@ -79,15 +79,15 @@ const defaultArgs = {
 const controls = {
   disabled: {
     control: 'boolean',
-    description: `Specify if the dropdown should be disabled, or not`,
+    description: `Specify if the dropdown should be disabled, or not.`,
   },
   direction: {
     control: 'select', options: directionOptions,
-    description: `Dropdown direction`
+    description: `Dropdown direction.`
   },
   hideLabel: {
     control: 'boolean',
-    description: `Specify if the title text should be hidden, or not`,
+    description: `Specify if the title text should be hidden, or not.`,
   },
   helperText: {
     control: 'text',
@@ -95,7 +95,7 @@ const controls = {
   },
   invalid: {
     control: 'boolean',
-    description: `Specify if the dropdown should display an invalid icon, or not`,
+    description: `Specify if the dropdown should display an invalid icon, or not.`,
   },
   invalidText: {
     control: 'text',
@@ -107,15 +107,15 @@ const controls = {
   },
   open: {
     control: 'boolean',
-    description: `Specify if the dropdown should be open, or not`,
+    description: `Specify if the dropdown should be open, or not.`,
   },
   readOnly: {
     control: 'boolean',
-    description: `Specify if the dropdown should be read only, or not`,
+    description: `Specify if the dropdown should be read only, or not.`,
   },
   size: {
     control: 'select', options: sizes,
-    description: `Dropdown size`
+    description: `Dropdown size.`
   },
   titleText: {
     control: 'text',
@@ -123,7 +123,7 @@ const controls = {
   },
   type: {
     control: 'select', options: types,
-    description: `Dropdown size`
+    description: `Dropdown size.`
   },
   value: {
     control: 'text',
@@ -131,7 +131,7 @@ const controls = {
   },
   warn: {
     control: 'boolean',
-    description: `Specify whether the control is currently in warning state`,
+    description: `Specify whether the control is currently in warning state.`,
   },
   warnText: {
     control: 'text',
@@ -267,7 +267,12 @@ export const Playground = {
   `
 };
 
-export const skeleton = {
+export const Skeleton = {
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
   render: () => html` <cds-dropdown-skeleton></cds-dropdown-skeleton> `
 }
 
diff --git a/packages/carbon-web-components/src/components/layer/layer.stories.ts b/packages/carbon-web-components/src/components/layer/layer.stories.ts
index de7e39e5bc2..79ff1580ff1 100644
--- a/packages/carbon-web-components/src/components/layer/layer.stories.ts
+++ b/packages/carbon-web-components/src/components/layer/layer.stories.ts
@@ -86,6 +86,11 @@ export const UseLayer = {
 export const Playground = {
   args: defaultArgs,
   argTypes: controls,
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
   render: ({level}) => html`
     <cds-layer level="${level}">
       <div class="example-layer-test-component">Test component</div>
@@ -105,4 +110,4 @@ const meta = {
   },
 };
 
-export default meta;
\ No newline at end of file
+export default meta;

From ff2d40d085fb680956759030da0f2f561e1c8a1e Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Mon, 8 Jan 2024 16:58:27 -0800
Subject: [PATCH 5/5] fix(markdown): replaced description

---
 .../src/components/combo-box/combo-box.mdx                  | 6 +++---
 .../src/components/dropdown/dropdown.mdx                    | 6 +++---
 .../carbon-web-components/src/components/layer/layer.mdx    | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box.mdx b/packages/carbon-web-components/src/components/combo-box/combo-box.mdx
index dbea5d6411a..a1f783dcf50 100644
--- a/packages/carbon-web-components/src/components/combo-box/combo-box.mdx
+++ b/packages/carbon-web-components/src/components/combo-box/combo-box.mdx
@@ -1,4 +1,4 @@
-import { ArgsTable, Description, Meta } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 import * as ComboBoxStories from './combo-box.stories';
 
@@ -25,8 +25,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/combo-box/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['combo-box'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['combo-box'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown.mdx b/packages/carbon-web-components/src/components/dropdown/dropdown.mdx
index 81bc990c420..21b362ca8e2 100644
--- a/packages/carbon-web-components/src/components/dropdown/dropdown.mdx
+++ b/packages/carbon-web-components/src/components/dropdown/dropdown.mdx
@@ -1,4 +1,4 @@
-import { ArgsTable, Description, Meta } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 import * as DropdownStories from './dropdown.stories';
 
@@ -25,8 +25,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/dropdown/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['dropdown'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['dropdown'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
diff --git a/packages/carbon-web-components/src/components/layer/layer.mdx b/packages/carbon-web-components/src/components/layer/layer.mdx
index 5e36785f3d6..1c4bd90815a 100644
--- a/packages/carbon-web-components/src/components/layer/layer.mdx
+++ b/packages/carbon-web-components/src/components/layer/layer.mdx
@@ -1,4 +1,4 @@
-import { ArgsTable, Description, Meta } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 import * as LayerStories from './layer.stories';
 
@@ -31,8 +31,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/layer/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['layer'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['layer'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML