feat(icon-indicator): new component

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: 'components-statusindicators-iconindicator--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('IconIndicator');
+  });
+});

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: 'components-statusindicators-iconindicator--default',
+          theme,
+        });
+      });
+    });
+  });
+});

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

@@ -324,6 +324,7 @@ Array [
   "spacing11",
   "spacing12",
   "spacing13",
+  "statusTokens",
   "styles",
   "supportCautionMajor",
   "supportCautionMinor",

packages/react/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="error" label="Error" />,
+  },
+  {
+    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="error" label="Error" />,
+  },
+  {
+    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',

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 } from '@carbon/react';
+
+function ExampleComponent() {
+  return (
+    <IconIndicator kind="error" label="Error">
+  );
+}
+```
+
+## Kind
+
+Icon indicators can take the form of error, caution major, caution minor,
+undefined, succeeded, normal, in-progressm incomplete, not started, pending,
+unknown, and information.
+
+## 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).

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

@@ -0,0 +1,62 @@
+/**
+ * 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: 'Components/StatusIndicators/IconIndicator',
+  component: IconIndicator,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = () => {
+  return IconIndicatorKinds.map((type) => (
+    <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
+      <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: 'error',
+  size: 16,
+};
+
+Playground.argTypes = {
+  label: {
+    control: {
+      type: 'text',
+    },
+  },
+  kind: {
+    control: {
+      type: 'select',
+    },
+    options: IconIndicatorKinds,
+  },
+  size: {
+    control: {
+      type: 'select',
+    },
+    options: [16, 20],
+  },
+};

packages/react/src/components/IconIndicator/__tests__/IconIndicator-test.js

@@ -0,0 +1,36 @@
+/**
+ * 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 { render, screen } from '@testing-library/react';
+import React from 'react';
+import IconIndicator from '../index';
+
+describe('IconIndicator', () => {
+  it('should use a custom label', () => {
+    render(<IconIndicator kind="error" label="label" />);
+    expect(screen.getByText('label')).toBeInTheDocument();
+  });
+
+  it('should update with size prop', () => {
+    render(<IconIndicator kind="error" label="label" size={20} />);
+    expect(screen.getByText('label')).toHaveClass('cds--icon-indicator--20');
+  });
+
+  it('should update with kind prop', () => {
+    render(<IconIndicator kind="pending" label="label" size={20} />);
+    expect(document.querySelector('svg')).toHaveClass(
+      'cds--icon-indicator--pending'
+    );
+  });
+
+  it('should pass in an extra className when one is given', () => {
+    render(
+      <IconIndicator kind="error" label="label" className="custom-class" />
+    );
+    expect(screen.getByText('label')).toHaveClass('custom-class');
+  });
+});

packages/react/src/components/IconIndicator/docs/overview.mdx

@@ -0,0 +1,12 @@
+## Live demo
+
+<StorybookDemo
+  themeSelector
+  url="https://react.carbondesignsystem.com"
+  variants={[
+    {
+      label: 'Default',
+      variant: 'components-statusindicator-iconindicator--playground'
+    }
+  ]}
+/>