FCT-1072 - implement filters Badge component (#2936)

* chore(rebase): rebase yarn.lock with main

* fix(triggerButton): remove import/render of badge from triggerbutton temporarily so ts likes me again

* fix(filters test): you try to do nice things and then you get yelled at by jest and ts, here you go jest plz be happy now that the filters component is displaying the fake label prop

* fix(bage styles): badge height 24px

* feat(badge): set aria-label only when passed as props, update test

* chore(badge): add local-dev tag back to storybook so that we dont publish the filters story on prod, use design tokens in throwaway filters component

packages/components/filters/README.md

@@ -42,6 +42,6 @@ export default Example;
 
 ## Properties
 
-| Props   | Type     | Required | Default | Description          |
-| ------- | -------- | :------: | ------- | -------------------- |
-| `label` | `string` |    ✅    |         | This is a stub prop! |
+| Props   | Type     | Required | Default | Description         |
+| ------- | -------- | :------: | ------- | ------------------- |
+| `label` | `string` |          |         | This is a stub prop |

packages/components/filters/package.json

@@ -21,7 +21,9 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
+    "@commercetools-uikit/design-system": "workspace:^",
     "@commercetools-uikit/dropdown-menu": "workspace:^",
+    "@commercetools-uikit/utils": "workspace:^",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "prop-types": "15.8.1",

packages/components/filters/src/badge/badge.spec.tsx

@@ -1,12 +1,14 @@
 import { screen, render } from '../../../../../test/test-utils';
 import Badge from './badge';
 
-/**
- * THIS IS A PLACEHOLDER, PLEASE UPDATE IT
- */
-describe('FilterMenu Badge', () => {
+const defaultProps = {
+  label: '+1',
+  id: 'test-badge',
+};
+describe('Filters Badge', () => {
   it('should render the badge', async () => {
-    await render(<Badge />);
-    await screen.findByText('badge');
+    await render(<Badge {...defaultProps} />);
+    const badge = await screen.findByRole('status');
+    expect(badge.textContent).toEqual('+1');
   });
 });

packages/components/filters/src/badge/badge.tsx

@@ -1,5 +1,57 @@
-function Badge() {
-  return <div>badge</div>;
+import { css } from '@emotion/react';
+import { designTokens } from '@commercetools-uikit/design-system';
+
+export type TBadgeProps = {
+  /**
+   * CSS ID for badge, used to specify relationship with parent in parent's `aria-controls` property
+   * see https://www.w3.org/TR/wai-aria-1.1/#status
+   */
+  id: string;
+  /**
+   * If `true`, indicates that the element is in a disabled state.
+   */
+  isDisabled?: boolean;
+  /**
+   * String to be displayed in badge, generally a count of some kind
+   */
+  label: string;
+
+  /**
+   * Optional descriptive explanation of label (e.g. "+4 additional filters applied")
+   */
+  ['aria-label']?: string;
+};
+
+const badgeStyles = css`
+  font-size: ${designTokens.fontSize20};
+  font-weight: ${designTokens.fontWeight500};
+  line-height: ${designTokens.lineHeight20};
+  color: ${designTokens.colorSurface};
+  background-color: ${designTokens.colorInfo};
+  padding: 0 calc(${designTokens.spacing05} + ${designTokens.spacing10});
+  border-radius: ${designTokens.borderRadius20};
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: ${designTokens.spacing40};
+`;
+
+const disabledBageStyles = css`
+  background-color: ${designTokens.colorNeutral};
+`;
+
+function Badge(props: TBadgeProps) {
+  return (
+    <span
+      aria-label={props['aria-label']}
+      css={[badgeStyles, props.isDisabled && disabledBageStyles]}
+      id={props.id}
+      role="status"
+    >
+      {props.label}
+    </span>
+  );
 }
 
 export default Badge;

packages/components/filters/src/filter-menu/trigger-button/trigger-button.tsx

@@ -1,4 +1,3 @@
-import { Badge } from '../../badge';
 import { Chip } from '../chip';
 
 export type TFilterMenuTriggerButtonProps = {
@@ -9,7 +8,6 @@ const TriggerButton = (props: TFilterMenuTriggerButtonProps) => {
   return (
     <button>
       <div>{props.label}</div>
-      <Badge />
       <Chip />
     </button>
   );

packages/components/filters/src/filters.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import Filters from './filters';
 
 const meta: Meta<typeof Filters> = {
@@ -13,10 +13,8 @@ const meta: Meta<typeof Filters> = {
 };
 export default meta;
 
-type Story = StoryObj<typeof Filters>;
+type Story = StoryFn<typeof Filters>;
 
-export const BasicExample: Story = {
-  args: {
-    label: 'A component for applying multiple filter controls',
-  },
+export const BasicExample: Story = () => {
+  return <Filters label={'test'} />;
 };

packages/components/filters/src/filters.tsx

@@ -1,3 +1,5 @@
+import { designTokens } from '@commercetools-uikit/design-system';
+
 export type TFiltersProps = {
   /**
    * This is a stub prop
@@ -6,6 +8,10 @@ export type TFiltersProps = {
 };
 
 function Filters(props: TFiltersProps) {
-  return <div>{props.label}</div>;
+  return (
+    <div style={{ display: 'flex', gap: designTokens.spacing20 }}>
+      <div>{props.label}</div>
+    </div>
+  );
 }
 export default Filters;

yarn.lock

@@ -3089,7 +3089,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@commercetools-uikit/[email protected], @commercetools-uikit/design-system@workspace:design-system":
+"@commercetools-uikit/[email protected], @commercetools-uikit/design-system@workspace:^, @commercetools-uikit/design-system@workspace:design-system":
   version: 0.0.0-use.local
   resolution: "@commercetools-uikit/design-system@workspace:design-system"
   dependencies:
@@ -3229,7 +3229,9 @@ __metadata:
   dependencies:
     "@babel/runtime": ^7.20.13
     "@babel/runtime-corejs3": ^7.20.13
+    "@commercetools-uikit/design-system": "workspace:^"
     "@commercetools-uikit/dropdown-menu": "workspace:^"
+    "@commercetools-uikit/utils": "workspace:^"
     "@emotion/react": ^11.10.5
     "@emotion/styled": ^11.10.5
     prop-types: 15.8.1
@@ -4668,7 +4670,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@commercetools-uikit/[email protected], @commercetools-uikit/utils@workspace:packages/utils":
+"@commercetools-uikit/[email protected], @commercetools-uikit/utils@workspace:^, @commercetools-uikit/utils@workspace:packages/utils":
   version: 0.0.0-use.local
   resolution: "@commercetools-uikit/utils@workspace:packages/utils"
   dependencies: