diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
index c11b69c1939..50961ac4838 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',
'../src/**/skeleton-placeholder.mdx',
'../src/**/skeleton-placeholder.stories.ts',
'../src/**/skeleton-text.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`
-
-
-
-
-
-
-
-`;
-
-export const Interactive = () => html`
-
-
-
-
-
-`;
-
-export const Playground = (args) => {
- const { vertical, spaceEqually } =
- args?.[`${prefix}-progress-indicator`] ?? {};
- const { iconLabel, secondaryLabelText } =
- args?.[`${prefix}-progress-step`] ?? {};
- return html`
-
-
-
-
-
-
-
- `;
-};
-
-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`
-
-
-
-
-
-
- `;
-};
-
-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';
+
+
# 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';
```
-
-
+{`${cdnJs({ components: ['progress-indicator'] })}`}
+{`${cdnCss()}`}
### HTML
@@ -75,7 +78,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
``) and `false` means not setting the attribute
(e.g. `` without `vertical` attribute).
-
+
## `` attributes and properties
@@ -83,4 +86,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
``) and `false` means not setting the attribute
(e.g. `` without `disabled` attribute).
-
+
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`
+
+
+
+
+
+
+
+ `,
+};
+
+export const Interactive = {
+ render: () => html`
+
+
+
+
+
+ `,
+};
+
+export const Skeleton = {
+ args: {
+ vertical: args['vertical'],
+ },
+ argTypes: {
+ vertical: args['vertical'],
+ },
+ parameters: {
+ percy: {
+ skip: true,
+ },
+ },
+ render: (args) => {
+ const { vertical } = args ?? {};
+ return html`
+
+
+
+
+
+
+ `;
+ },
+};
+
+export const Playground = {
+ args,
+ argTypes,
+ render: (args) => {
+ const { iconLabel, secondaryLabelText, spaceEqually, vertical } =
+ args ?? {};
+ return html`
+
+
+
+
+
+
+
+ `;
+ },
+};
+
+const meta = {
+ title: 'Components/Progress Indicator',
+ parameters: {
+ docs: {
+ page: storyDocs,
+ },
+ },
+};
+
+export default meta;