feat: 💄 Create Badge Component

Create badge component for use in Card

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@faker-js/faker": "^6.0.0-alpha.7",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.3",
     "@testing-library/user-event": "13.5.0",

src/shared/ui/badge/Badge.test.tsx

@@ -0,0 +1,45 @@
+import faker from '@faker-js/faker';
+import { render } from '@testing-library/react';
+import { Badge } from './Badge';
+
+describe('the badge', () => {
+    it('should render a badge with the correct label', () => {
+        const testLabel = faker.lorem.sentence();
+
+        const { getByText } = render(
+            <Badge colour='gray' label={testLabel} />
+        );
+
+        expect(getByText(testLabel)).toBeInTheDocument();
+    });
+
+    it('should render a badge with the correct colour when gray is selected', () => {
+        const testLabel = 'Test Label';
+
+        const { getByText } = render(
+            <Badge colour='gray' label={testLabel} />
+        );
+
+        expect(getByText(testLabel)).toHaveClass('bg-gray-500');
+    });
+
+    it('should render a badge with the correct colour when blue is selected', () => {
+        const testLabel = 'Test Label';
+
+        const { getByText } = render(
+            <Badge colour='blue' label={testLabel} />
+        );
+
+        expect(getByText(testLabel)).toHaveClass('bg-blue-500');
+    });
+
+    it('should render a badge with the correct colour when red is selected', () => {
+        const testLabel = 'Test Label';
+
+        const { getByText } = render(
+            <Badge colour='red' label={testLabel} />
+        );
+
+        expect(getByText(testLabel)).toHaveClass('bg-red-500');
+    });
+});

src/shared/ui/badge/Badge.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { determineBadgeColour } from './helpers/determineBadgeColour';
+
+interface IBadgeProps {
+    label: string;
+    colour: 'red' | 'blue' | 'gray';
+}
+
+export const Badge: React.FunctionComponent<IBadgeProps> = ({ colour, label }) => {
+    return <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${determineBadgeColour(colour)} text-white`}>
+        {label}
+    </span>;
+};

src/shared/ui/badge/helpers/determineBadgeColour.test.ts

@@ -0,0 +1,13 @@
+import { determineBadgeColour } from './determineBadgeColour';
+
+describe('determineBadgeColour', () => {
+    it('should return the correct string', () => {
+        const redColourString = determineBadgeColour('red');
+        const blueColourString = determineBadgeColour('blue');
+        const grayColourString = determineBadgeColour('gray');
+
+        expect(blueColourString).toEqual('bg-blue-500');
+        expect(redColourString).toEqual('bg-red-500');
+        expect(grayColourString).toEqual('bg-gray-500');
+    });
+});

src/shared/ui/badge/helpers/determineBadgeColour.ts

@@ -0,0 +1,9 @@
+export const determineBadgeColour = (colour: 'red' | 'blue' | 'gray'): string => {
+    switch (colour) {
+        case 'red': return 'bg-red-500';
+        case 'blue': return 'bg-blue-500';
+        case 'gray': return 'bg-gray-500';
+        default:
+            return 'bg-gray-500';
+    }
+};