Feature/chip

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"
   }
 }

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

src/ui/chip/chip.model.tsx

@@ -0,0 +1,5 @@
+export type BaseChipProps = {
+  label: string;
+  outlined?: boolean;
+  className?: string;
+};

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

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

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

src/ui/chip/index.ts

@@ -0,0 +1,3 @@
+export * from './chip.component';
+export * from './chip.model';
+export * from './chip.utils';

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