feat(shape-indicator): new component

e2e/components/ShapeIndicator/ShapeIndicator-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 ShapeIndicator', () => {
+  test('@avt-default-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ShapeIndicator',
+      id: 'experimental-statusindicators-unstable-shapeindicator--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ShapeIndicator');
+  });
+});

e2e/components/ShapeIndicator/ShapeIndicator-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('ShapeIndicator', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('shape indicator @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'ShapeIndicator',
+          id: 'experimental-statusindicators-unstable-shapeindicator--default',
+          theme,
+        });
+      });
+    });
+  });
+});

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

@@ -11069,6 +11069,47 @@ Map {
     },
     "render": [Function],
   },
+  "unstable__ShapeIndicator" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "kind": Object {
+        "args": Array [
+          Array [
+            "failed",
+            "critical",
+            "high",
+            "medium",
+            "low",
+            "cautious",
+            "undefined",
+            "stable",
+            "informative",
+            "incomplete",
+            "draft",
+          ],
+        ],
+        "isRequired": true,
+        "type": "oneOf",
+      },
+      "label": Object {
+        "isRequired": true,
+        "type": "string",
+      },
+      "textSize": Object {
+        "args": Array [
+          Array [
+            12,
+            14,
+          ],
+        ],
+        "type": "oneOf",
+      },
+    },
+    "render": [Function],
+  },
   "unstable__Slug" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {

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

@@ -285,6 +285,7 @@ describe('Carbon Components React', () => {
         "unstable__FluidTimePickerSelect",
         "unstable__FluidTimePickerSkeleton",
         "unstable__IconIndicator",
+        "unstable__ShapeIndicator",
         "unstable__Slug",
         "unstable__SlugActions",
         "unstable__SlugContent",

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

@@ -0,0 +1,54 @@
+import { ArgTypes, Meta } from '@storybook/blocks';
+
+<Meta isTemplate />
+
+# ShapeIndicator
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ShapeIndicator)
+&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
+
+`ShapeIndicator`
+
+```jsx
+import { ShapeIndicator as unstable__ShapeIndicator } from '@carbon/react';
+
+function ExampleComponent() {
+  return (
+    <ShapeIndicator kind="failed" label="Failed">
+  );
+}
+```
+
+## Kind
+
+Shape indicators can take the form of failed, critical, high, medium, low, cautious, undefined, stable, informative, incomplete, and draft.
+
+## Text Size
+
+Shape indicators have two text size options 12 and 14. The default is 12.
+
+## Customizing the label
+
+You can set a string to customize the label of the Shape 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/ShapeIndicator/ShapeIndicator.mdx).

packages/react/src/components/ShapeIndicator/ShapeIndicator.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 ShapeIndicator from '.';
+import { ShapeIndicatorKinds } from './index';
+import mdx from './ShapeIndicator.mdx';
+
+export default {
+  title: 'Experimental/StatusIndicators/unstable__ShapeIndicator',
+  component: ShapeIndicator,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = () => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'auto auto',
+        columnGap: '1rem',
+        rowGap: '0.5rem',
+        width: 'fit-content',
+      }}>
+      {ShapeIndicatorKinds.map((type) => (
+        <>
+          <ShapeIndicator kind={type} label={type} />
+          <ShapeIndicator kind={type} label={type} textSize={14} />
+        </>
+      ))}
+    </div>
+  );
+};
+
+const PlaygroundStory = (props) => {
+  return <ShapeIndicator {...props} />;
+};
+
+export const Playground = PlaygroundStory.bind({});
+
+Playground.args = {
+  label: 'Custom label',
+  kind: 'failed',
+  textSize: 12,
+};
+
+Playground.argTypes = {
+  label: {
+    control: {
+      type: 'text',
+    },
+  },
+  kind: {
+    control: {
+      type: 'select',
+    },
+    options: ShapeIndicatorKinds,
+  },
+  textSize: {
+    control: {
+      type: 'select',
+    },
+    options: [12, 14],
+  },
+};

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

@@ -0,0 +1,44 @@
+/**
+ * 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 ShapeIndicator from '../index';
+
+describe('ShapeIndicator', () => {
+  it('should use a custom label', () => {
+    render(<ShapeIndicator kind="failed" label="label" />);
+    expect(screen.getByText('label')).toBeInTheDocument();
+  });
+
+  it('should update with textSize prop', () => {
+    render(<ShapeIndicator kind="failed" label="label" textSize={14} />);
+    expect(screen.getByText('label')).toHaveClass('cds--shape-indicator--14');
+  });
+
+  it('should update with kind prop', () => {
+    render(<ShapeIndicator kind="critical" label="label" size={14} />);
+    expect(document.querySelector('svg')).toHaveClass(
+      'cds--shape-indicator--critical'
+    );
+  });
+
+  it('should support a custom class name on the outermost element', () => {
+    const { container } = render(
+      <ShapeIndicator kind="failed" label="label" className="custom-class" />
+    );
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('should support a ref on the outermost element', () => {
+    const ref = jest.fn();
+    const { container } = render(
+      <ShapeIndicator kind="failed" label="label" ref={ref} />
+    );
+    expect(ref).toHaveBeenCalledWith(container.firstChild);
+  });
+});

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

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