Skip to content

Commit 03ec6cb

Browse files
ariellalgilmoretay1orjonesannawen12nikhiltom
authored
feat(icon-indicator): new component (#18191)
* feat(icon-indicators): new component * fix(icon-indicator): styles * feat(react): add icon-indicator and more updates * feat(data-table): dyanmic with icon-indicators * fix(icon-indicator): review comment updates * fix(icon-indicator): web-components * chore(update): missing imports and unstable mdx * chore: generated style files * fix(custom-theme): remove for now * fix(snapshot): add styles * chore(update): api * fix(icon-indicator): add wc export * fix(icon-indicator): error to failed and information to informative * fix(icon-indicator): snapshots * fix(data-table): icon-indicator story * fix(data-table): icon-indicator story wc --------- Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: Anna Wen <[email protected]> Co-authored-by: Nikhil Tomar <[email protected]>
1 parent 3c6ffa9 commit 03ec6cb

File tree

53 files changed

+1633
-19
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1633
-19
lines changed

‎e2e/components/IconIndicator/IconIndicator-test.avt.e2e.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* Copyright IBM Corp. 2016, 2023
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
'use strict';
9+
import { expect, test } from '@playwright/test';
10+
import { visitStory } from '../../test-utils/storybook';
11+
12+
test.describe('@avt IconIndicator', () => {
13+
test('@avt-default-state', async ({ page }) => {
14+
await visitStory(page, {
15+
component: 'IconIndicator',
16+
id: 'experimental-statusindicators-unstable-iconindicator--default',
17+
globals: {
18+
theme: 'white',
19+
},
20+
});
21+
await expect(page).toHaveNoACViolations('IconIndicator');
22+
});
23+
});

‎e2e/components/IconIndicator/IconIndicator-test.e2e.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* Copyright IBM Corp. 2016, 2023
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
'use strict';
9+
const { test } = require('@playwright/test');
10+
const { themes } = require('../../test-utils/env');
11+
const { snapshotStory } = require('../../test-utils/storybook');
12+
13+
test.describe('IconIndicator', () => {
14+
themes.forEach((theme) => {
15+
test.describe(theme, () => {
16+
test('icon indicator @vrt', async ({ page }) => {
17+
await snapshotStory(page, {
18+
component: 'IconIndicator',
19+
id: 'experimental-statusindicators-unstable-iconindicator--default',
20+
theme,
21+
});
22+
});
23+
});
24+
});
25+
});

‎packages/carbon-components-react/scss/components/icon-indicator/_icon-indicator.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by carbon-components-react. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2023
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/icon-indicator/icon-indicator';

‎packages/carbon-components-react/scss/components/icon-indicator/_index.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by carbon-components-react. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2023
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/icon-indicator';

‎packages/carbon-components/scss/components/icon-indicator/_icon-indicator.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by carbon-components. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2023
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/icon-indicator/icon-indicator';

‎packages/carbon-components/scss/components/icon-indicator/_index.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by carbon-components. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2023
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/icon-indicator';

‎packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -324,6 +324,7 @@ Array [
324324
"spacing11",
325325
"spacing12",
326326
"spacing13",
327+
"statusTokens",
327328
"styles",
328329
"supportCautionMajor",
329330
"supportCautionMinor",

‎packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10986,6 +10986,48 @@ Map {
1098610986
},
1098710987
},
1098810988
},
10989+
"unstable__IconIndicator" => Object {
10990+
"$$typeof": Symbol(react.forward_ref),
10991+
"propTypes": Object {
10992+
"className": Object {
10993+
"type": "string",
10994+
},
10995+
"kind": Object {
10996+
"args": Array [
10997+
Array [
10998+
"failed",
10999+
"caution-major",
11000+
"caution-minor",
11001+
"undefined",
11002+
"succeeded",
11003+
"normal",
11004+
"in-progress",
11005+
"incomplete",
11006+
"not-started",
11007+
"pending",
11008+
"unknown",
11009+
"informative",
11010+
],
11011+
],
11012+
"isRequired": true,
11013+
"type": "oneOf",
11014+
},
11015+
"label": Object {
11016+
"isRequired": true,
11017+
"type": "string",
11018+
},
11019+
"size": Object {
11020+
"args": Array [
11021+
Array [
11022+
16,
11023+
20,
11024+
],
11025+
],
11026+
"type": "oneOf",
11027+
},
11028+
},
11029+
"render": [Function],
11030+
},
1098911031
"unstable__Slug" => Object {
1099011032
"$$typeof": Symbol(react.forward_ref),
1099111033
"propTypes": Object {

‎packages/react/scss/components/icon-indicator/_icon-indicator.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by @carbon/react. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2023
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/icon-indicator/icon-indicator';

‎packages/react/scss/components/icon-indicator/_index.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by @carbon/react. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2023
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/icon-indicator';

‎packages/react/src/__tests__/index-test.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -284,6 +284,7 @@ describe('Carbon Components React', () => {
284284
"unstable__FluidTimePicker",
285285
"unstable__FluidTimePickerSelect",
286286
"unstable__FluidTimePickerSkeleton",
287+
"unstable__IconIndicator",
287288
"unstable__Slug",
288289
"unstable__SlugActions",
289290
"unstable__SlugContent",

‎packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,65 @@ import DataTable, {
3131
TableToolbarSearch,
3232
TableToolbarMenu,
3333
} from '../..';
34-
import { batchActionClick, rows, headers } from '../shared';
34+
import { batchActionClick, headers } from '../shared';
35+
import IconIndicator from '../../../IconIndicator';
36+
37+
const rows = [
38+
{
39+
id: 'a',
40+
name: 'Load Balancer 3',
41+
protocol: 'HTTP',
42+
port: 3000,
43+
rule: 'Round robin',
44+
attached_groups: 'Kevin’s VM Groups',
45+
status: <IconIndicator kind="failed" label="Failed" />,
46+
},
47+
{
48+
id: 'b',
49+
name: 'Load Balancer 1',
50+
protocol: 'HTTP',
51+
port: 443,
52+
rule: 'Round robin',
53+
attached_groups: 'Maureen’s VM Groups',
54+
status: <IconIndicator kind="in-progress" label="In progress" />,
55+
},
56+
{
57+
id: 'c',
58+
name: 'Load Balancer 2',
59+
protocol: 'HTTP',
60+
port: 80,
61+
rule: 'DNS delegation',
62+
attached_groups: 'Andrew’s VM Groups',
63+
status: <IconIndicator kind="succeeded" label="Succeeded" />,
64+
},
65+
{
66+
id: 'd',
67+
name: 'Load Balancer 6',
68+
protocol: 'HTTP',
69+
port: 3000,
70+
rule: 'Round robin',
71+
attached_groups: 'Marc’s VM Groups',
72+
status: <IconIndicator kind="failed" label="Failed" />,
73+
},
74+
{
75+
id: 'e',
76+
name: 'Load Balancer 4',
77+
protocol: 'HTTP',
78+
port: 443,
79+
rule: 'Round robin',
80+
attached_groups: 'Mel’s VM Groups',
81+
status: <IconIndicator kind="in-progress" label="In progress" />,
82+
},
83+
{
84+
id: 'f',
85+
name: 'Load Balancer 5',
86+
protocol: 'HTTP',
87+
port: 80,
88+
rule: 'DNS delegation',
89+
attached_groups: 'Ronja’s VM Groups',
90+
status: <IconIndicator kind="succeeded" label="Succeeded" />,
91+
},
92+
];
3593

3694
export default {
3795
title: 'Components/DataTable/Dynamic',

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { ArgTypes, Meta } from '@storybook/blocks';
2+
3+
<Meta isTemplate />
4+
5+
# IconIndicator
6+
7+
[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/IconIndicator)
8+
&nbsp;
9+
10+
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
11+
12+
## Table of Contents
13+
14+
- [Overview](#overview)
15+
- [Component API](#component-api)
16+
- [Feedback](#feedback)
17+
18+
{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}
19+
20+
## Overview
21+
22+
The `IconIndicator` component is useful for communicating severity level
23+
information to users. The shapes and colors, communicate severity that enables
24+
users to quickly assess and identify status and respond accordingly.
25+
26+
```jsx
27+
import { IconIndicator as unstable__IconIndicator } from '@carbon/react';
28+
29+
function ExampleComponent() {
30+
return (
31+
<IconIndicator kind="failed" label="Failed">
32+
);
33+
}
34+
```
35+
36+
## Kind
37+
38+
Icon indicators can take the form of failed, caution major, caution minor,
39+
undefined, succeeded, normal, in-progressm incomplete, not started, pending,
40+
unknown, and informative.
41+
42+
## Size
43+
44+
Icon indicators have two size options 16 and 20. The default is 16.
45+
46+
## Customizing the label
47+
48+
You can set a string to customize the label of the Icon indicator.
49+
50+
## Component API
51+
52+
<ArgTypes />
53+
54+
## Feedback
55+
56+
Help us improve this component by providing feedback, asking questions on Slack,
57+
or updating this file on
58+
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/IconIndicator/IconIndicator.mdx).

‎packages/react/src/components/IconIndicator/IconIndicator.stories.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/**
2+
* Copyright IBM Corp. 2016, 2023
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import React from 'react';
9+
import IconIndicator from '.';
10+
import { IconIndicatorKinds } from './index';
11+
import mdx from './IconIndicator.mdx';
12+
13+
export default {
14+
title: 'Experimental/StatusIndicators/unstable__IconIndicator',
15+
component: IconIndicator,
16+
parameters: {
17+
docs: {
18+
page: mdx,
19+
},
20+
},
21+
};
22+
23+
export const Default = () => {
24+
return (
25+
<div
26+
style={{
27+
display: 'grid',
28+
gridTemplateColumns: 'auto auto',
29+
columnGap: '1rem',
30+
rowGap: '0.5rem',
31+
width: 'fit-content',
32+
}}>
33+
{IconIndicatorKinds.map((type) => (
34+
<>
35+
<IconIndicator kind={type} label={type} />
36+
<IconIndicator kind={type} label={type} size={20} />
37+
</>
38+
))}
39+
</div>
40+
);
41+
};
42+
43+
const PlaygroundStory = (props) => {
44+
return <IconIndicator {...props} />;
45+
};
46+
47+
export const Playground = PlaygroundStory.bind({});
48+
49+
Playground.args = {
50+
label: 'Custom label',
51+
kind: 'failed',
52+
size: 16,
53+
};
54+
55+
Playground.argTypes = {
56+
label: {
57+
control: {
58+
type: 'text',
59+
},
60+
},
61+
kind: {
62+
control: {
63+
type: 'select',
64+
},
65+
options: IconIndicatorKinds,
66+
},
67+
size: {
68+
control: {
69+
type: 'select',
70+
},
71+
options: [16, 20],
72+
},
73+
};

0 commit comments

Comments
 (0)