From 8680417bdee3d65bc4472b7cb17e6b6406641b7e Mon Sep 17 00:00:00 2001
From: Kacper Kruczek <>
Date: Thu, 24 Feb 2022 12:19:09 +0100
Subject: [PATCH 1/3] feat(chip): created chip componentn

Chip #33
---
 src/ui/chip/chip.component.tsx |  9 +++++++++
 src/ui/chip/chip.model.tsx     |  5 +++++
 src/ui/chip/chip.utils.ts      | 10 ++++++++++
 src/ui/chip/index.ts           |  3 +++
 src/ui/index.ts                |  1 +
 5 files changed, 28 insertions(+)
 create mode 100644 src/ui/chip/chip.component.tsx
 create mode 100644 src/ui/chip/chip.model.tsx
 create mode 100644 src/ui/chip/chip.utils.ts
 create mode 100644 src/ui/chip/index.ts

diff --git a/src/ui/chip/chip.component.tsx b/src/ui/chip/chip.component.tsx
new file mode 100644
index 0000000..ac0a0f5
--- /dev/null
+++ b/src/ui/chip/chip.component.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import clsx from 'clsx';
+
+import { BaseChipProps } from './chip.model';
+import { getChipClasses } from './chip.utils';
+
+export const Chip = ({ label, outlined, className }: BaseChipProps) => (
+  <div className={clsx(getChipClasses(outlined), className)}>{label}</div>
+);
diff --git a/src/ui/chip/chip.model.tsx b/src/ui/chip/chip.model.tsx
new file mode 100644
index 0000000..c7194c5
--- /dev/null
+++ b/src/ui/chip/chip.model.tsx
@@ -0,0 +1,5 @@
+export type BaseChipProps = {
+  label: string;
+  outlined?: boolean;
+  className?: string;
+};
diff --git a/src/ui/chip/chip.utils.ts b/src/ui/chip/chip.utils.ts
new file mode 100644
index 0000000..e589a04
--- /dev/null
+++ b/src/ui/chip/chip.utils.ts
@@ -0,0 +1,10 @@
+import clsx from 'clsx';
+
+export const getChipClasses = (outlined: boolean = false) =>
+  clsx(
+    'px-4 py-2 rounded-full text-gray-500 font-semibold text-sm flex align-center w-max cursor-pointer active:bg-gray-300 transition duration-300 ease',
+    {
+      ' border border-gray-300': outlined,
+      ' bg-gray-200 border border-transparent': !outlined,
+    }
+  );
diff --git a/src/ui/chip/index.ts b/src/ui/chip/index.ts
new file mode 100644
index 0000000..d5121b0
--- /dev/null
+++ b/src/ui/chip/index.ts
@@ -0,0 +1,3 @@
+export * from './chip.component';
+export * from './chip.model';
+export * from './chip.utils';
diff --git a/src/ui/index.ts b/src/ui/index.ts
index 52ab414..676c692 100644
--- a/src/ui/index.ts
+++ b/src/ui/index.ts
@@ -1,5 +1,6 @@
 export * from './alert';
 export * from './button';
+export * from './chip';
 export * from './date-format';
 export * from './label';
 export * from './pagination';

From b722870d74d25f6cae147faf21c8088869f8d0cb Mon Sep 17 00:00:00 2001
From: Kacper Kruczek <>
Date: Thu, 24 Feb 2022 12:19:38 +0100
Subject: [PATCH 2/3] test(chip): added simple render test for chip component

---
 src/ui/chip/chip.spec.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/ui/chip/chip.spec.tsx

diff --git a/src/ui/chip/chip.spec.tsx b/src/ui/chip/chip.spec.tsx
new file mode 100644
index 0000000..e02f106
--- /dev/null
+++ b/src/ui/chip/chip.spec.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import { Chip } from './chip.component';
+
+describe('Chip', () => {
+  test('should render', async () => {
+    const { container } = render(<Chip label="test" />);
+
+    expect(screen.getByText('test')).toBeInTheDocument();
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

From 4052ebb941300e94eda0b4d850fe7b533723f717 Mon Sep 17 00:00:00 2001
From: Kacper Kruczek <>
Date: Thu, 24 Feb 2022 12:23:43 +0100
Subject: [PATCH 3/3] feat(chip): created story for chip component

---
 src/i18n/locales/storybook.json |  3 ++-
 src/ui/chip/chip.stories.tsx    | 35 +++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 src/ui/chip/chip.stories.tsx

diff --git a/src/i18n/locales/storybook.json b/src/i18n/locales/storybook.json
index 39a993d..761f6ee 100644
--- a/src/i18n/locales/storybook.json
+++ b/src/i18n/locales/storybook.json
@@ -17,6 +17,7 @@
     "BUTTON": "Button",
     "BUTTON_LEFT": "Element on left",
     "BUTTON_RIGHT": "Element on right",
-    "BUTTON_BOTH": "Elements on both"
+    "BUTTON_BOTH": "Elements on both",
+    "CHIP": "Example Chip"
   }
 }
diff --git a/src/ui/chip/chip.stories.tsx b/src/ui/chip/chip.stories.tsx
new file mode 100644
index 0000000..0abb59d
--- /dev/null
+++ b/src/ui/chip/chip.stories.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { DefaultTestProviders } from '../../utils';
+import { Chip } from './chip.component';
+
+export default {
+  title: 'Atoms/Chip',
+  component: Chip,
+  decorators: [
+    (Story) => (
+      <DefaultTestProviders>
+        <Story />
+      </DefaultTestProviders>
+    ),
+  ],
+  argTypes: {
+    outlined: {
+      defaultValue: false,
+
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+} as ComponentMeta<typeof Chip>;
+
+export const Default: ComponentStory<typeof Chip> = (args) => {
+  const intl = useIntl();
+
+  return (
+    <Chip {...args} label={intl.formatMessage({ id: 'STORY_BOOK.CHIP' })} />
+  );
+};