Skip to content

Commit

Permalink
chore(progress-indicator): update progress-indicator stories to sb v7
Browse files Browse the repository at this point in the history
  • Loading branch information
m4olivei committed Jan 8, 2024
1 parent 8a98504 commit a8112ec
Show file tree
Hide file tree
Showing 4 changed files with 171 additions and 145 deletions.
2 changes: 2 additions & 0 deletions packages/carbon-web-components/.storybook/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -75,12 +78,12 @@ 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

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" />
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit a8112ec

Please sign in to comment.