From 73f1f8e7453f82393b7565e8a945e370e92bfac6 Mon Sep 17 00:00:00 2001
From: Byron Wall <87667330+ByronDWall@users.noreply.github.com>
Date: Mon, 7 Oct 2024 10:08:21 -0400
Subject: [PATCH] FCT 1079 - filters `Chip` (#2937)

* chore(rebase): update filters files

* chore(filters chip): remove local dev tag from Filters story so that reviewers can see component in preview storybook

* chore(rebase): update filters files

* fix(chip styles): disabled text color now colorNeutral40

* chore(rebase): update filters files
---
 .../src/filter-menu/chip/chip.spec.tsx        |  8 ++--
 .../filters/src/filter-menu/chip/chip.tsx     | 39 ++++++++++++++++++-
 .../trigger-button/trigger-button.tsx         |  3 --
 packages/components/filters/src/filters.tsx   |  1 +
 4 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/packages/components/filters/src/filter-menu/chip/chip.spec.tsx b/packages/components/filters/src/filter-menu/chip/chip.spec.tsx
index b2701dde41..724c713c8e 100644
--- a/packages/components/filters/src/filter-menu/chip/chip.spec.tsx
+++ b/packages/components/filters/src/filter-menu/chip/chip.spec.tsx
@@ -1,12 +1,10 @@
 import { screen, render } from '../../../../../../test/test-utils';
 import Chip from './chip';
 
-/**
- * THIS IS A PLACEHOLDER, PLEASE UPDATE IT
- */
 describe('FilterMenu Chip', () => {
   it('should render the chip', async () => {
-    await render(<Chip />);
-    await screen.findByText('chip');
+    await render(<Chip label="test" />);
+    const chip = await screen.findByRole('listitem');
+    expect(chip.textContent).toEqual('test');
   });
 });
diff --git a/packages/components/filters/src/filter-menu/chip/chip.tsx b/packages/components/filters/src/filter-menu/chip/chip.tsx
index 0983398fdc..a50cd0202a 100644
--- a/packages/components/filters/src/filter-menu/chip/chip.tsx
+++ b/packages/components/filters/src/filter-menu/chip/chip.tsx
@@ -1,5 +1,40 @@
-function Chip() {
-  return <div>chip</div>;
+import { type ReactNode } from 'react';
+import { designTokens } from '@commercetools-uikit/design-system';
+import { css } from '@emotion/react';
+
+export type TFilterMenuChipProps = {
+  isDisabled?: boolean;
+  label: ReactNode;
+};
+
+const chipStyles = css`
+  font-size: ${designTokens.fontSize20};
+  font-weight: ${designTokens.fontWeight400};
+  line-height: ${designTokens.lineHeight20};
+  color: ${designTokens.colorPrimary20};
+  background-color: ${designTokens.colorPrimary95};
+  height: ${designTokens.spacing40};
+  padding: 0 ${designTokens.spacing20};
+  border-radius: calc(
+    ${designTokens.borderRadius20} - ${designTokens.borderRadius4}
+  );
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  list-style: none;
+`;
+
+const disabledChipStyles = css`
+  color: ${designTokens.colorNeutral40};
+  background-color: ${designTokens.colorNeutral90};
+`;
+
+function Chip(props: TFilterMenuChipProps) {
+  return (
+    <li css={[chipStyles, props.isDisabled && disabledChipStyles]}>
+      {props.label}
+    </li>
+  );
 }
 
 export default Chip;
diff --git a/packages/components/filters/src/filter-menu/trigger-button/trigger-button.tsx b/packages/components/filters/src/filter-menu/trigger-button/trigger-button.tsx
index 4e992dfc28..c2b512310f 100644
--- a/packages/components/filters/src/filter-menu/trigger-button/trigger-button.tsx
+++ b/packages/components/filters/src/filter-menu/trigger-button/trigger-button.tsx
@@ -1,5 +1,3 @@
-import { Chip } from '../chip';
-
 export type TFilterMenuTriggerButtonProps = {
   label: string;
 };
@@ -8,7 +6,6 @@ const TriggerButton = (props: TFilterMenuTriggerButtonProps) => {
   return (
     <button>
       <div>{props.label}</div>
-      <Chip />
     </button>
   );
 };
diff --git a/packages/components/filters/src/filters.tsx b/packages/components/filters/src/filters.tsx
index c3a5baeac3..d3d6b8eb3c 100644
--- a/packages/components/filters/src/filters.tsx
+++ b/packages/components/filters/src/filters.tsx
@@ -11,6 +11,7 @@ function Filters(props: TFiltersProps) {
   return (
     <div style={{ display: 'flex', gap: designTokens.spacing20 }}>
       <div>{props.label}</div>
+      <div style={{ display: 'flex', gap: designTokens.spacing20 }}></div>
     </div>
   );
 }