FCT 1079 - filters Chip

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');
   });
 });

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;

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>
   );
 };

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>
   );
 }