From 5dc68aa93d366f815d18c32049d92a2f3ae74bec Mon Sep 17 00:00:00 2001 From: Cillian Barron Date: Sun, 27 Feb 2022 18:57:35 +0000 Subject: [PATCH] feat: :lipstick: Create Badge Component Create badge component for use in Card --- package-lock.json | 15 +++++++ package.json | 1 + src/shared/ui/badge/Badge.test.tsx | 45 +++++++++++++++++++ src/shared/ui/badge/Badge.tsx | 13 ++++++ .../helpers/determineBadgeColour.test.ts | 13 ++++++ .../ui/badge/helpers/determineBadgeColour.ts | 9 ++++ 6 files changed, 96 insertions(+) create mode 100644 src/shared/ui/badge/Badge.test.tsx create mode 100644 src/shared/ui/badge/Badge.tsx create mode 100644 src/shared/ui/badge/helpers/determineBadgeColour.test.ts create mode 100644 src/shared/ui/badge/helpers/determineBadgeColour.ts diff --git a/package-lock.json b/package-lock.json index b8a9977..828bcc4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "lokalise-frontend-homework", "version": "0.1.0", "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", @@ -2071,6 +2072,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@faker-js/faker": { + "version": "6.0.0-alpha.7", + "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-6.0.0-alpha.7.tgz", + "integrity": "sha512-T2nYE8+EfzfkRMLMSm7UvgC7fZ2KkKEyCMeyPVS0q2cuvENbt1SjWyu0bOJ0JqBbTs1g+gYMWMFMXspWlzNVmQ==", + "engines": { + "node": ">=14.0.0", + "npm": ">=7.0.0" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.9.5", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz", @@ -17657,6 +17667,11 @@ } } }, + "@faker-js/faker": { + "version": "6.0.0-alpha.7", + "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-6.0.0-alpha.7.tgz", + "integrity": "sha512-T2nYE8+EfzfkRMLMSm7UvgC7fZ2KkKEyCMeyPVS0q2cuvENbt1SjWyu0bOJ0JqBbTs1g+gYMWMFMXspWlzNVmQ==" + }, "@humanwhocodes/config-array": { "version": "0.9.5", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz", diff --git a/package.json b/package.json index 83a7033..98149df 100644 --- a/package.json +++ b/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", diff --git a/src/shared/ui/badge/Badge.test.tsx b/src/shared/ui/badge/Badge.test.tsx new file mode 100644 index 0000000..7632e54 --- /dev/null +++ b/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( + + ); + + expect(getByText(testLabel)).toBeInTheDocument(); + }); + + it('should render a badge with the correct colour when gray is selected', () => { + const testLabel = 'Test Label'; + + const { getByText } = render( + + ); + + 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( + + ); + + 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( + + ); + + expect(getByText(testLabel)).toHaveClass('bg-red-500'); + }); +}); \ No newline at end of file diff --git a/src/shared/ui/badge/Badge.tsx b/src/shared/ui/badge/Badge.tsx new file mode 100644 index 0000000..f59a2b1 --- /dev/null +++ b/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 = ({ colour, label }) => { + return + {label} + ; +}; diff --git a/src/shared/ui/badge/helpers/determineBadgeColour.test.ts b/src/shared/ui/badge/helpers/determineBadgeColour.test.ts new file mode 100644 index 0000000..9c65add --- /dev/null +++ b/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'); + }); +}); \ No newline at end of file diff --git a/src/shared/ui/badge/helpers/determineBadgeColour.ts b/src/shared/ui/badge/helpers/determineBadgeColour.ts new file mode 100644 index 0000000..6bba281 --- /dev/null +++ b/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'; + } +}; \ No newline at end of file