From a8112ec9eba20747fd54872af9063708c5cbb275 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Mon, 8 Jan 2024 13:42:10 -0500
Subject: [PATCH] chore(progress-indicator): update progress-indicator stories
 to sb v7

---
 .../carbon-web-components/.storybook/main.ts  |   2 +
 .../progress-indicator-story.ts               | 140 ---------------
 ...cator-story.mdx => progress-indicator.mdx} |  13 +-
 .../progress-indicator.stories.ts             | 161 ++++++++++++++++++
 4 files changed, 171 insertions(+), 145 deletions(-)
 delete mode 100644 packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.ts
 rename packages/carbon-web-components/src/components/progress-indicator/{progress-indicator-story.mdx => progress-indicator.mdx} (87%)
 create mode 100644 packages/carbon-web-components/src/components/progress-indicator/progress-indicator.stories.ts

diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
index dcd6c9c6491..da410a4c868 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/**/progress-indicator.mdx',
+    '../src/**/progress-indicator.stories.ts',
   ],
   {
     ignore: ['../src/**/docs/*.mdx'],
diff --git a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.ts b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.ts
deleted file mode 100644
index 854aab154e0..00000000000
--- a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { boolean } from '@storybook/addon-knobs';
-import textNullable from '../../../.storybook/knob-text-nullable';
-import './progress-indicator';
-import './progress-step';
-import './progress-indicator-skeleton';
-import './progress-step-skeleton';
-import storyDocs from './progress-indicator-story.mdx';
-import { prefix } from '../../globals/settings';
-
-export const Default = () => html`
-  <cds-progress-indicator>
-    <cds-progress-step
-      state="complete"
-      label="First step"
-      secondary-label="Optional label"
-      description="Step 1: Getting started with Carbon Design System"></cds-progress-step>
-    <cds-progress-step
-      label="Second step with tooltip"
-      state="current"></cds-progress-step>
-    <cds-progress-step
-      label="Third step with tooltip"
-      state="incomplete"></cds-progress-step>
-    <cds-progress-step
-      label="Fourth step"
-      secondary-label="Example invalid step"
-      state="invalid"></cds-progress-step>
-    <cds-progress-step
-      disabled
-      label="Fifth step"
-      state="incomplete"></cds-progress-step>
-  </cds-progress-indicator>
-`;
-
-export const Interactive = () => html`
-  <cds-progress-indicator>
-    <cds-progress-step
-      label="Click me"
-      description="Step 1: Register a onChange event"
-      state="complete"></cds-progress-step>
-    <cds-progress-step
-      label="Really long label"
-      description="The progress indicator will listen for clicks on the steps"
-      state="current"></cds-progress-step>
-    <cds-progress-step
-      label="Third step with tooltip"
-      description="The progress indicator will listen for clicks on the steps"
-      state="incomplete"></cds-progress-step>
-  </cds-progress-indicator>
-`;
-
-export const Playground = (args) => {
-  const { vertical, spaceEqually } =
-    args?.[`${prefix}-progress-indicator`] ?? {};
-  const { iconLabel, secondaryLabelText } =
-    args?.[`${prefix}-progress-step`] ?? {};
-  return html`
-    <cds-progress-indicator
-      ?vertical="${vertical}"
-      ?space-equally="${spaceEqually}">
-      <cds-progress-step
-        description="${ifDefined(iconLabel)}"
-        label="First step"
-        secondary-label="${ifDefined(secondaryLabelText)}"
-        state="complete"></cds-progress-step>
-      <cds-progress-step
-        description="${ifDefined(iconLabel)}"
-        label="Second step with tooltip"
-        state="current"></cds-progress-step>
-      <cds-progress-step
-        description="${ifDefined(iconLabel)}"
-        label="Third step with tooltip"
-        state="incomplete"></cds-progress-step>
-      <cds-progress-step
-        description="${ifDefined(iconLabel)}"
-        label="Fourth step"
-        secondary-label="Example invalid step"
-        state="invalid"></cds-progress-step>
-      <cds-progress-step
-        disabled
-        description="${ifDefined(iconLabel)}"
-        label="Fifth step"
-        state="incomplete"></cds-progress-step>
-    </cds-progress-indicator>
-  `;
-};
-
-Playground.parameters = {
-  ...storyDocs.parameters,
-  knobs: {
-    [`${prefix}-progress-indicator`]: () => ({
-      vertical: boolean('Vertical (vertical)', false),
-      spaceEqually: boolean('Space equally (space-equally)', false),
-    }),
-    [`${prefix}-progress-step`]: () => ({
-      description: textNullable('Icon label (description)', ''),
-      secondaryLabelText: textNullable(
-        'Secondary label text (secondary-label)',
-        'Optional label'
-      ),
-    }),
-  },
-};
-
-export const skeleton = (args) => {
-  const { vertical } = args?.[`${prefix}-progress-indicator-skeleton`];
-  return html`
-    <cds-progress-indicator-skeleton ?vertical="${vertical}">
-      <cds-progress-step-skeleton></cds-progress-step-skeleton>
-      <cds-progress-step-skeleton></cds-progress-step-skeleton>
-      <cds-progress-step-skeleton></cds-progress-step-skeleton>
-      <cds-progress-step-skeleton></cds-progress-step-skeleton>
-    </cds-progress-indicator-skeleton>
-  `;
-};
-
-skeleton.parameters = {
-  percy: {
-    skip: true,
-  },
-  knobs: {
-    [`${prefix}-progress-indicator-skeleton`]: () => ({
-      vertical: boolean('Vertical (vertical)', false),
-    }),
-  },
-};
-
-export default {
-  title: 'Components/Progress indicator',
-};
diff --git a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.mdx b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.mdx
similarity index 87%
rename from packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.mdx
rename to packages/carbon-web-components/src/components/progress-indicator/progress-indicator.mdx
index a816f37957d..cf90dc441c7 100644
--- a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.mdx
+++ b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Meta, Description, Markdown } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as ProgressIndicatorStories from './progress-indicator.stories';
+
+<Meta of={ProgressIndicatorStories} />
 
 # Progress indicator
 
@@ -27,8 +30,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/progress-indicator/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['progress-indicator'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['progress-indicator'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -75,7 +78,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-progress-indicator vertical>`) and `false` means not setting the attribute
 (e.g. `<cds-progress-indicator>` without `vertical` attribute).
 
-<Props of="cds-progress-indicator" />
+<ArgsTable of="cds-progress-indicator" />
 
 ## `<cds-progress-step>` attributes and properties
 
@@ -83,4 +86,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-progress-step disabled>`) and `false` means not setting the attribute
 (e.g. `<cds-progress-step>` without `disabled` attribute).
 
-<Props of="cds-progress-step" />
+<ArgsTable of="cds-progress-step" />
diff --git a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.stories.ts b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.stories.ts
new file mode 100644
index 00000000000..236d0b9c1c4
--- /dev/null
+++ b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.stories.ts
@@ -0,0 +1,161 @@
+/**
+ * @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 storyDocs from './progress-indicator.mdx';
+import ifNonEmpty from '../../globals/directives/if-non-empty';
+
+const args = {
+  vertical: false,
+  spaceEqually: false,
+  iconLabel: '',
+  secondaryLabelText: 'Optional label',
+};
+
+const argTypes = {
+  vertical: {
+    control: 'boolean',
+    description:
+      'Determines whether or not the Progress Indicator should be rendered vertically.',
+  },
+  spaceEqually: {
+    control: 'boolean',
+    description:
+      'Specify whether the progress steps should be split equally in size in the div.',
+  },
+  iconLabel: {
+    control: 'text',
+    description: 'Label used for the SVG icons in each step.',
+  },
+  secondaryLabelText: {
+    control: 'text',
+    description: 'The secondary progress label.',
+  },
+};
+
+export const Default = {
+  render: () => html`
+    <cds-progress-indicator>
+      <cds-progress-step
+        state="complete"
+        label="First step"
+        secondary-label="Optional label"
+        description="Step 1: Getting started with Carbon Design System"></cds-progress-step>
+      <cds-progress-step
+        label="Second step with tooltip"
+        state="current"></cds-progress-step>
+      <cds-progress-step
+        label="Third step with tooltip"
+        state="incomplete"></cds-progress-step>
+      <cds-progress-step
+        label="Fourth step"
+        secondary-label="Example invalid step"
+        state="invalid"></cds-progress-step>
+      <cds-progress-step
+        disabled
+        label="Fifth step"
+        state="incomplete"></cds-progress-step>
+    </cds-progress-indicator>
+  `,
+};
+
+export const Interactive = {
+  render: () => html`
+    <cds-progress-indicator>
+      <cds-progress-step
+        label="Click me"
+        description="Step 1: Register a onChange event"
+        state="complete"></cds-progress-step>
+      <cds-progress-step
+        label="Really long label"
+        description="The progress indicator will listen for clicks on the steps"
+        state="current"></cds-progress-step>
+      <cds-progress-step
+        label="Third step with tooltip"
+        description="The progress indicator will listen for clicks on the steps"
+        state="incomplete"></cds-progress-step>
+    </cds-progress-indicator>
+  `,
+};
+
+export const Skeleton = {
+  args: {
+    vertical: args['vertical'],
+  },
+  argTypes: {
+    vertical: args['vertical'],
+  },
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  render: (args) => {
+    const { vertical } = args ?? {};
+    return html`
+      <cds-progress-indicator-skeleton ?vertical="${vertical}">
+        <cds-progress-step-skeleton></cds-progress-step-skeleton>
+        <cds-progress-step-skeleton></cds-progress-step-skeleton>
+        <cds-progress-step-skeleton></cds-progress-step-skeleton>
+        <cds-progress-step-skeleton></cds-progress-step-skeleton>
+      </cds-progress-indicator-skeleton>
+    `;
+  },
+};
+
+export const Playground = {
+  args,
+  argTypes,
+  render: (args) => {
+    const { iconLabel, secondaryLabelText, spaceEqually, vertical } =
+      args ?? {};
+    return html`
+      <cds-progress-indicator
+        ?vertical="${vertical}"
+        ?space-equally="${spaceEqually}">
+        <cds-progress-step
+          description="${ifNonEmpty(iconLabel)}"
+          label="First step"
+          secondary-label="${ifDefined(secondaryLabelText)}"
+          state="complete"></cds-progress-step>
+        <cds-progress-step
+          description="${ifNonEmpty(iconLabel)}"
+          label="Second step with tooltip"
+          state="current"></cds-progress-step>
+        <cds-progress-step
+          description="${ifNonEmpty(iconLabel)}"
+          label="Third step with tooltip"
+          state="incomplete"></cds-progress-step>
+        <cds-progress-step
+          description="${ifNonEmpty(iconLabel)}"
+          label="Fourth step"
+          secondary-label="Example invalid step"
+          state="invalid"></cds-progress-step>
+        <cds-progress-step
+          disabled
+          description="${ifNonEmpty(iconLabel)}"
+          label="Fifth step"
+          state="incomplete"></cds-progress-step>
+      </cds-progress-indicator>
+    `;
+  },
+};
+
+const meta = {
+  title: 'Components/Progress Indicator',
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
+};
+
+export default meta;