feat(badge-indicators): new component (#18342)

* feat(badge-indicators): new component

* fix(badge): clean up stories and add imports

* test(avt): badge indicator

* fix(button): revert

* fix(Styles): badge

* chore(test): update

* fix(badge-indicator): make internal and add prop

* fix(badgeIndicator): add badgeCountLabel

* refactor: combines label and badgeLabel props

* fix: updates SR announcement & stories

* fix(iconButton): default is really lg and label

* fix(badgeIndicator): remove badgeCountLabel use aria-describedby

* fix(button): cleanup

* fix(icon-button): badgeId and label description

* feat: badge compononent for WC

* chore: revert tabs changes

* fix(badge-indicator): remove when disabled

* fix: adds warnings for invalid prop usage

* fix: cleanup in iconbutton

* chore: clean up on IconButton

* chore(test): add avt/e2e

* fix(button): align wc stories

* Update packages/react/src/index.ts

---------

Co-authored-by: Nikhil Tomar <nikhiltomar753@gmail.com>
Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>
Co-authored-by: Anna Wen <54281166+annawen1@users.noreply.github.com>

Author: 3 people

e2e/components/Button/Button-test.avt.e2e.js

@@ -55,6 +55,17 @@ test.describe('@avt Button', () => {
     await expect(page).toHaveNoACViolations('Button-icon-button');
   });
 
+  test('@avt-advanced-states icon-button with badge', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Button',
+      id: 'components-button--icon-button-with-badge',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Button-icon-button-with-badge');
+  });
+
   test('@avt-advanced-states secondary', async ({ page }) => {
     await visitStory(page, {
       component: 'Button',

e2e/components/Button/Button-test.e2e.js

@@ -62,6 +62,14 @@ test.describe('Button', () => {
         });
       });
 
+      test('icon button with badge indicator @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Button',
+          id: 'components-button--icon-button-with-badge',
+          theme,
+        });
+      });
+
       test('set of buttons @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Button',

packages/carbon-components-react/scss/components/badge-indicator/_badge-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/badge-indicator/badge-indicator';

packages/carbon-components-react/scss/components/badge-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/badge-indicator';

packages/carbon-components/scss/components/badge-indicator/_badge-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/badge-indicator/badge-indicator';

packages/carbon-components/scss/components/badge-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/badge-indicator';

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

@@ -4240,6 +4240,9 @@ Map {
       "autoAlign": Object {
         "type": "bool",
       },
+      "badgeCount": Object {
+        "type": "number",
+      },
       "children": Object {
         "type": "node",
       },

packages/react/scss/components/badge-indicator/_badge-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/badge-indicator/badge-indicator';

packages/react/scss/components/badge-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/badge-indicator';

packages/react/src/components/BadgeIndicator/__tests__/BadgeIndicator.js

@@ -0,0 +1,33 @@
+// /**
+//  * 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 BadgeIndicator from '../index';
+
+describe('BadgeIndicator', () => {
+  it('should set a count', () => {
+    render(<BadgeIndicator count={3} />);
+    expect(screen.getByText('3')).toBeInTheDocument();
+  });
+
+  it('should truncate the count over 999', () => {
+    render(<BadgeIndicator count={2342} />);
+    expect(screen.getByText('999+')).toBeInTheDocument();
+  });
+
+  it('should support a custom class name on the outermost element', () => {
+    const { container } = render(<BadgeIndicator 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(<BadgeIndicator ref={ref} />);
+    expect(ref).toHaveBeenCalledWith(container.firstChild);
+  });
+});