Skip to content

Commit c60111b

Browse files
kennylamariellalgilmoreriddhybansal
authored
chore(docs): update misc web component Storybook docs (carbon-design-system#19299)
* chore(docs): update various sb docs * chore(docs): update chat-button sb docs * chore(docs): update indicator sb docs * fix(ai-skeleton): icon story * Update packages/web-components/src/components/list/ordered-list.mdx Co-authored-by: Ariella Gilmore <[email protected]> * Update packages/web-components/src/components/chat-button/chat-button.ts Co-authored-by: Ariella Gilmore <[email protected]> --------- Co-authored-by: ariellalgilmore <[email protected]> Co-authored-by: Riddhi Bansal <[email protected]>
1 parent 8226181 commit c60111b

File tree

16 files changed

+309
-411
lines changed

16 files changed

+309
-411
lines changed

‎packages/react/src/components/ShapeIndicator/ShapeIndicator.mdx

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { ArgTypes, Meta } from '@storybook/blocks';
1+
import { ArgTypes, Meta, Canvas } from '@storybook/blocks';
2+
import * as ShapeIndicatorStories from './ShapeIndicator.stories';
3+
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
24

35
<Meta isTemplate />
46

@@ -12,6 +14,9 @@ import { ArgTypes, Meta } from '@storybook/blocks';
1214
## Table of Contents
1315

1416
- [Overview](#overview)
17+
- [Kind](#kind)
18+
- [Size](#size)
19+
- [Customizing the label](#customizing-the-label)
1520
- [Component API](#component-api)
1621
- [Feedback](#feedback)
1722

@@ -31,9 +36,20 @@ function ExampleComponent() {
3136
}
3237
```
3338

39+
<Canvas
40+
of={ShapeIndicatorStories.Default}
41+
additionalActions={[
42+
{
43+
title: 'Open in Stackblitz',
44+
onClick: () => stackblitzPrefillConfig(ShapeIndicatorStories.Default),
45+
},
46+
]}
47+
/>
48+
3449
## Kind
3550

36-
Shape indicators can take the form of failed, critical, high, medium, low, cautious, undefined, stable, informative, incomplete, and draft.
51+
Shape indicators can take the form of failed, critical, high, medium, low,
52+
cautious, undefined, stable, informative, incomplete, and draft.
3753

3854
## Text Size
3955

‎packages/web-components/src/components/ai-skeleton/ai-skeleton-icon.stories.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const AISkeletonIcon = {
3030
};
3131

3232
const meta = {
33-
title: 'Components/Skeleton/AISkeleton',
33+
title: 'Components/Skeleton/AI Skeleton',
3434
};
3535

3636
export default meta;

‎packages/web-components/src/components/chat-button/chat-button.mdx

Lines changed: 14 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,27 @@
1-
import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
2-
import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
1+
import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
2+
import { cdnJs } from '../../globals/internal/storybook-cdn';
33
import * as ChatButtonStories from './chat-button.stories';
44

55
<Meta of={ChatButtonStories} />
66

7-
# Chat Button
7+
# Chat button
88

9-
> 💡 Check our
10-
> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/chat-button)
11-
> example implementation.
9+
## Table of Contents
1210

13-
[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/chat-button)
11+
- [Component API](#component-api)
12+
- [CDN](#cdn)
13+
- [Feedback](#feedback)
1414

15-
## Getting started
15+
<Canvas of={ChatButtonStories.Default} />
1616

17-
Here's a quick example to get you started.
17+
## Component API
1818

19-
### JS (via import)
20-
21-
```javascript
22-
import '@carbon/web-components/es/components/chat-button/index.js';
23-
```
19+
<ArgTypes of="cds-chat-button" />
2420

2521
<Markdown>{`${cdnJs({ components: ['chat-button'] })}`}</Markdown>
26-
<Markdown>{`${cdnCss()}`}</Markdown>
27-
28-
```javascript
29-
import '@carbon/web-components/es/components/chat-button/index.js';
30-
import Add16 from '@carbon/icons/lib/add/16.js';
3122

32-
function App() {
33-
return html`<cds-chat-button>
34-
Primary ${Add16({ slot: 'icon' })}
35-
</cds-chat-button>`;
36-
}
37-
```
23+
## Feedback
3824

39-
## `<cds-chat-button>` attributes and properties
40-
41-
<ArgTypes of="cds-chat-button" />
42-
````
25+
Help us improve this component by providing feedback, asking questions on Slack,
26+
or updating this file on
27+
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/web-components/src/components/chat-button/chat-button.mdx).

‎packages/web-components/src/components/chat-button/chat-button.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ import styles from './chat-button.scss?lit';
1616
export { CHAT_BUTTON_SIZE, CHAT_BUTTON_KIND };
1717

1818
/**
19-
* Icon Button
19+
* Chat Button
20+
*
21+
* @element cds-chat-button
2022
*
2123
*/
2224
@customElement(`${prefix}-chat-button`)

‎packages/web-components/src/components/icon-indicator/docs/overview.mdx

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎packages/web-components/src/components/icon-indicator/icon-indicator.mdx

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,51 @@
1-
import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
2-
import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
1+
import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
2+
import { cdnJs } from '../../globals/internal/storybook-cdn';
33
import * as IconIndicatorStories from './icon-indicator.stories';
44

55
<Meta of={IconIndicatorStories} />
66

77
# Icon indicator
88

9-
The icon-indicator component is useful for communicating severity level
9+
## Table of Contents
10+
11+
- [Overview](#overview)
12+
- [Kind](#kind)
13+
- [Size](#size)
14+
- [Customizing the label](#customizing-the-label)
15+
- [Component API](#component-api)
16+
- [CDN](#cdn)
17+
- [Feedback](#feedback)
18+
19+
## Overview
20+
21+
The `icon-indicator` component is useful for communicating severity level
1022
information to users. The shapes and colors, communicate severity that enables
1123
users to quickly assess and identify status and respond accordingly.
1224

13-
> 💡 Check our
14-
> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/icon-indicator)
15-
> example implementation.
25+
<Canvas of={IconIndicatorStories.Default} />
1626

17-
[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/icon-indicator)
27+
## Kind
1828

19-
## Getting started
29+
Icon indicators can take the form of failed, caution major, caution minor,
30+
undefined, succeeded, normal, in-progress incomplete, not started, pending,
31+
unknown, and informative.
2032

21-
Here's a quick example to get you started.
33+
## Size
2234

23-
### JS (via import)
35+
Icon indicators have two size options 16 and 20. The default is 16.
2436

25-
```javascript
26-
import '@carbon/web-components/es/components/icon-indicator/index.js';
27-
```
37+
## Customizing the label
2838

29-
<Markdown>{`${cdnJs({ components: ['icon-indicator'] })}`}</Markdown>
30-
<Markdown>{`${cdnCss()}`}</Markdown>
39+
You can set a string to customize the label of the Icon indicator.
3140

32-
### HTML
41+
## Component API
3342

34-
```html
35-
<cds-icon-indicator kind="failed" text="Failed"></cds-icon-indicator>
36-
```
43+
<ArgTypes of="cds-icon-indicator" />
44+
45+
<Markdown>{`${cdnJs({ components: ['icon-indicator'] })}`}</Markdown>
3746

38-
## `<cds-icon-indicator>` attributes and properties
47+
## Feedback
3948

40-
<ArgTypes of="cds-icon-indicator" />
49+
Help us improve this component by providing feedback, asking questions on Slack,
50+
or updating this file on
51+
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/web-components/src/components/icon-indicator/icon-indicator.mdx).

‎packages/web-components/src/components/icons/docs/overview.mdx

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎packages/web-components/src/components/icons/icons.mdx

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,23 @@
1-
import { ArgTypes, Meta } from '@storybook/blocks';
1+
import { Canvas, Meta } from '@storybook/blocks';
22
import * as IconsStories from './icons.stories';
33

44
<Meta of={IconsStories} />
55

66
# Icons
77

8-
Icons can be utilized by specifying the icon name and size in the import.
8+
[Usage guidelines](https://carbondesignsystem.com/elements/icons/usage/)
99

10-
## Getting started
10+
## Table of Contents
1111

12-
Here's a quick example to get you started.
12+
- [Overview](#overview)
13+
- [Feedback](#feedback)
1314

14-
### JS (via import)
15+
## Overview
1516

16-
```javascript
17-
import Add16 from '@carbon/icons/lib/add/16.js';
17+
<Canvas of={IconsStories.Default} />
1818

19-
function App() {
20-
return (
21-
html`
22-
${Add16({
23-
class: 'test-class',
24-
'aria-label': 'add',
25-
'aria-describedby': 'id-title-1',
26-
children: svg`<title id="id-title-1">add</title>`, })}`
27-
);
28-
```
19+
## Feedback
2920

30-
Icons library can be found
31-
[here](https://www.carbondesignsystem.com/guidelines/icons/library).
21+
Help us improve this component by providing feedback, asking questions on Slack,
22+
or updating this file on
23+
[GitHub](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/icons/icons.mdx).

‎packages/web-components/src/components/link/link.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
2-
import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
2+
import { cdnJs } from '../../globals/internal/storybook-cdn';
33
import * as LinkStories from './link.stories';
44

55
<Meta of={LinkStories} />

‎packages/web-components/src/components/list/docs/overview.mdx

Lines changed: 0 additions & 16 deletions
This file was deleted.

0 commit comments

Comments
 (0)