feat(icon-indicator): new component (carbon-design-system#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]>
guidari · Jan 6, 2025 · 03ec6cb · 03ec6cb
1 parent 3c6ffa9
commit 03ec6cb
Show file tree

Hide file tree

Showing 53 changed files with 1,633 additions and 19 deletions.
diff --git a/e2e/components/IconIndicator/IconIndicator-test.avt.e2e.js b/e2e/components/IconIndicator/IconIndicator-test.avt.e2e.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+import { expect, test } from '@playwright/test';
+import { visitStory } from '../../test-utils/storybook';
+
+test.describe('@avt IconIndicator', () => {
+  test('@avt-default-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'IconIndicator',
+      id: 'experimental-statusindicators-unstable-iconindicator--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('IconIndicator');
+  });
+});
diff --git a/e2e/components/IconIndicator/IconIndicator-test.e2e.js b/e2e/components/IconIndicator/IconIndicator-test.e2e.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+const { test } = require('@playwright/test');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory } = require('../../test-utils/storybook');
+
+test.describe('IconIndicator', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('icon indicator @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'IconIndicator',
+          id: 'experimental-statusindicators-unstable-iconindicator--default',
+          theme,
+        });
+      });
+    });
+  });
+});
diff --git a/packages/carbon-components-react/scss/components/icon-indicator/_icon-indicator.scss b/packages/carbon-components-react/scss/components/icon-indicator/_icon-indicator.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator/icon-indicator';
diff --git a/packages/carbon-components-react/scss/components/icon-indicator/_index.scss b/packages/carbon-components-react/scss/components/icon-indicator/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator';
diff --git a/packages/carbon-components/scss/components/icon-indicator/_icon-indicator.scss b/packages/carbon-components/scss/components/icon-indicator/_icon-indicator.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator/icon-indicator';
diff --git a/packages/carbon-components/scss/components/icon-indicator/_index.scss b/packages/carbon-components/scss/components/icon-indicator/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator';
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -324,6 +324,7 @@ Array [
   "spacing11",
   "spacing12",
   "spacing13",
+  "statusTokens",
   "styles",
   "supportCautionMajor",
   "supportCautionMinor",

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -10986,6 +10986,48 @@ Map {
       },
     },
   },
+  "unstable__IconIndicator" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "kind": Object {
+        "args": Array [
+          Array [
+            "failed",
+            "caution-major",
+            "caution-minor",
+            "undefined",
+            "succeeded",
+            "normal",
+            "in-progress",
+            "incomplete",
+            "not-started",
+            "pending",
+            "unknown",
+            "informative",
+          ],
+        ],
+        "isRequired": true,
+        "type": "oneOf",
+      },
+      "label": Object {
+        "isRequired": true,
+        "type": "string",
+      },
+      "size": Object {
+        "args": Array [
+          Array [
+            16,
+            20,
+          ],
+        ],
+        "type": "oneOf",
+      },
+    },
+    "render": [Function],
+  },
   "unstable__Slug" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {

diff --git a/packages/react/scss/components/icon-indicator/_icon-indicator.scss b/packages/react/scss/components/icon-indicator/_icon-indicator.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator/icon-indicator';
diff --git a/packages/react/scss/components/icon-indicator/_index.scss b/packages/react/scss/components/icon-indicator/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator';
diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -284,6 +284,7 @@ describe('Carbon Components React', () => {
         "unstable__FluidTimePicker",
         "unstable__FluidTimePickerSelect",
         "unstable__FluidTimePickerSkeleton",
+        "unstable__IconIndicator",
         "unstable__Slug",
         "unstable__SlugActions",
         "unstable__SlugContent",

diff --git a/...act/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js b/...act/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js
@@ -31,7 +31,65 @@ import DataTable, {
   TableToolbarSearch,
   TableToolbarMenu,
 } from '../..';
-import { batchActionClick, rows, headers } from '../shared';
+import { batchActionClick, headers } from '../shared';
+import IconIndicator from '../../../IconIndicator';
+
+const rows = [
+  {
+    id: 'a',
+    name: 'Load Balancer 3',
+    protocol: 'HTTP',
+    port: 3000,
+    rule: 'Round robin',
+    attached_groups: 'Kevin’s VM Groups',
+    status: <IconIndicator kind="failed" label="Failed" />,
+  },
+  {
+    id: 'b',
+    name: 'Load Balancer 1',
+    protocol: 'HTTP',
+    port: 443,
+    rule: 'Round robin',
+    attached_groups: 'Maureen’s VM Groups',
+    status: <IconIndicator kind="in-progress" label="In progress" />,
+  },
+  {
+    id: 'c',
+    name: 'Load Balancer 2',
+    protocol: 'HTTP',
+    port: 80,
+    rule: 'DNS delegation',
+    attached_groups: 'Andrew’s VM Groups',
+    status: <IconIndicator kind="succeeded" label="Succeeded" />,
+  },
+  {
+    id: 'd',
+    name: 'Load Balancer 6',
+    protocol: 'HTTP',
+    port: 3000,
+    rule: 'Round robin',
+    attached_groups: 'Marc’s VM Groups',
+    status: <IconIndicator kind="failed" label="Failed" />,
+  },
+  {
+    id: 'e',
+    name: 'Load Balancer 4',
+    protocol: 'HTTP',
+    port: 443,
+    rule: 'Round robin',
+    attached_groups: 'Mel’s VM Groups',
+    status: <IconIndicator kind="in-progress" label="In progress" />,
+  },
+  {
+    id: 'f',
+    name: 'Load Balancer 5',
+    protocol: 'HTTP',
+    port: 80,
+    rule: 'DNS delegation',
+    attached_groups: 'Ronja’s VM Groups',
+    status: <IconIndicator kind="succeeded" label="Succeeded" />,
+  },
+];
 
 export default {
   title: 'Components/DataTable/Dynamic',

diff --git a/packages/react/src/components/IconIndicator/IconIndicator.mdx b/packages/react/src/components/IconIndicator/IconIndicator.mdx
@@ -0,0 +1,58 @@
+import { ArgTypes, Meta } from '@storybook/blocks';
+
+<Meta isTemplate />
+
+# IconIndicator
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/IconIndicator)
+&nbsp;
+
+{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
+{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}
+
+## Overview
+
+The `IconIndicator` component is useful for communicating severity level
+information to users. The shapes and colors, communicate severity that enables
+users to quickly assess and identify status and respond accordingly.
+
+```jsx
+import { IconIndicator as unstable__IconIndicator } from '@carbon/react';
+
+function ExampleComponent() {
+  return (
+    <IconIndicator kind="failed" label="Failed">
+  );
+}
+```
+
+## Kind
+
+Icon indicators can take the form of failed, caution major, caution minor,
+undefined, succeeded, normal, in-progressm incomplete, not started, pending,
+unknown, and informative.
+
+## Size
+
+Icon indicators have two size options 16 and 20. The default is 16.
+
+## Customizing the label
+
+You can set a string to customize the label of the Icon indicator.
+
+## Component API
+
+<ArgTypes />
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/IconIndicator/IconIndicator.mdx).
diff --git a/packages/react/src/components/IconIndicator/IconIndicator.stories.js b/packages/react/src/components/IconIndicator/IconIndicator.stories.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright IBM Corp. 2016, 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 React from 'react';
+import IconIndicator from '.';
+import { IconIndicatorKinds } from './index';
+import mdx from './IconIndicator.mdx';
+
+export default {
+  title: 'Experimental/StatusIndicators/unstable__IconIndicator',
+  component: IconIndicator,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = () => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'auto auto',
+        columnGap: '1rem',
+        rowGap: '0.5rem',
+        width: 'fit-content',
+      }}>
+      {IconIndicatorKinds.map((type) => (
+        <>
+          <IconIndicator kind={type} label={type} />
+          <IconIndicator kind={type} label={type} size={20} />
+        </>
+      ))}
+    </div>
+  );
+};
+
+const PlaygroundStory = (props) => {
+  return <IconIndicator {...props} />;
+};
+
+export const Playground = PlaygroundStory.bind({});
+
+Playground.args = {
+  label: 'Custom label',
+  kind: 'failed',
+  size: 16,
+};
+
+Playground.argTypes = {
+  label: {
+    control: {
+      type: 'text',
+    },
+  },
+  kind: {
+    control: {
+      type: 'select',
+    },
+    options: IconIndicatorKinds,
+  },
+  size: {
+    control: {
+      type: 'select',
+    },
+    options: [16, 20],
+  },
+};