From 1282ed50638af4048f856f5c5b468afd01bea160 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Mon, 25 Sep 2023 23:41:07 -0300 Subject: [PATCH 01/11] feat: implement font color type --- src/types/FontColor.d.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/types/FontColor.d.ts diff --git a/src/types/FontColor.d.ts b/src/types/FontColor.d.ts new file mode 100644 index 0000000..962e644 --- /dev/null +++ b/src/types/FontColor.d.ts @@ -0,0 +1,8 @@ +type FontColor = + | 'purple' + | 'purple-light' + | 'purple-dark' + | 'white' + | 'gray' + | 'gray-light' + | 'yellow'; From 771d9235c897a849f74aba1ffaf832111e4ea0f5 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Mon, 25 Sep 2023 23:41:28 -0300 Subject: [PATCH 02/11] feat: implement font colors type --- src/types/FontColors.d.ts | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/types/FontColors.d.ts diff --git a/src/types/FontColors.d.ts b/src/types/FontColors.d.ts new file mode 100644 index 0000000..381a6bf --- /dev/null +++ b/src/types/FontColors.d.ts @@ -0,0 +1,4 @@ +type FontColors = { + label: FontColor; + value: string; +}; From 2f1c0926c20c5e9d61619ee7cbd4519a9acb8fc2 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Mon, 25 Sep 2023 23:41:48 -0300 Subject: [PATCH 03/11] feat: implement font size type --- src/types/FontSize.d.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/types/FontSize.d.ts diff --git a/src/types/FontSize.d.ts b/src/types/FontSize.d.ts new file mode 100644 index 0000000..1b5cbbd --- /dev/null +++ b/src/types/FontSize.d.ts @@ -0,0 +1 @@ +type FontSize = 'normal' | 'small' | 'xsmall' | 'medium' | 'large' | 'xlarge'; From 9cbe1dc35e2110cec7af484658194afc155f4116 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Mon, 25 Sep 2023 23:42:03 -0300 Subject: [PATCH 04/11] feat: implement font sizes type --- src/types/FontSizes.d.ts | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/types/FontSizes.d.ts diff --git a/src/types/FontSizes.d.ts b/src/types/FontSizes.d.ts new file mode 100644 index 0000000..fb4e764 --- /dev/null +++ b/src/types/FontSizes.d.ts @@ -0,0 +1,4 @@ +type FontSizes = { + label: FontSize; + value: string; +}; From 220ef3045348fd6b934ffae9cf93981c47a6a8b7 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Mon, 25 Sep 2023 23:42:28 -0300 Subject: [PATCH 05/11] feat: implement font style type --- src/types/FontStyle.d.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/types/FontStyle.d.ts diff --git a/src/types/FontStyle.d.ts b/src/types/FontStyle.d.ts new file mode 100644 index 0000000..31008f8 --- /dev/null +++ b/src/types/FontStyle.d.ts @@ -0,0 +1 @@ +type FontStyle = 'normal' | 'italic'; From aef2819babce666055b99d9e4fb8d401b468c71e Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Mon, 25 Sep 2023 23:42:48 -0300 Subject: [PATCH 06/11] feat: implement font weight type --- src/types/FontWeight.d.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/types/FontWeight.d.ts diff --git a/src/types/FontWeight.d.ts b/src/types/FontWeight.d.ts new file mode 100644 index 0000000..1b78e1f --- /dev/null +++ b/src/types/FontWeight.d.ts @@ -0,0 +1 @@ +type FontWeight = 'normal' | 'bold' | 'lighter'; From 482c4b9a82b7c0459bdc0c068ff0d55b85bdf3f7 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Mon, 25 Sep 2023 23:43:08 -0300 Subject: [PATCH 07/11] feat: implement text props type --- src/types/TextProps.d.ts | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/types/TextProps.d.ts diff --git a/src/types/TextProps.d.ts b/src/types/TextProps.d.ts new file mode 100644 index 0000000..89688ae --- /dev/null +++ b/src/types/TextProps.d.ts @@ -0,0 +1,7 @@ +type TextProps = { + fontSize?: FontSize; + fontWeight?: FontWeight; + fontColor?: FontColor; + label: string; + fontStyle?: FontStyle; +}; From fdd7cf333e10f4bbed49e508d04b4ffef7ee5c67 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Mon, 25 Sep 2023 23:44:34 -0300 Subject: [PATCH 08/11] feat: implement Text component --- src/components/Text/index.tsx | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/components/Text/index.tsx diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx new file mode 100644 index 0000000..e1fdac1 --- /dev/null +++ b/src/components/Text/index.tsx @@ -0,0 +1,7 @@ +import * as S from './styles'; + +const Text = (props: TextProps) => { + return {props.label}; +}; + +export default Text; From 5d1c25d896ace487829ba6d049d615019ae8058e Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Mon, 25 Sep 2023 23:45:04 -0300 Subject: [PATCH 09/11] feat: implement Text component styles --- src/components/Text/styles.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/components/Text/styles.ts diff --git a/src/components/Text/styles.ts b/src/components/Text/styles.ts new file mode 100644 index 0000000..f4cd837 --- /dev/null +++ b/src/components/Text/styles.ts @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +export const Text = styled.p` + color: ${({ fontColor }) => + fontColor ? `var(--${fontColor})` : 'var(--purple-dark)'}; + font-size: ${({ fontSize }) => + fontSize ? `var(--font-size-${fontSize})` : 'var(--font-size-normal)'}; + font-weight: ${({ fontWeight }) => (fontWeight ? `${fontWeight}` : 'normal')}; + font-style: ${({ fontStyle }) => (fontStyle ? `${fontStyle}` : 'normal')}; + display: flex; + justify-content: center; + align-items: center; +`; From 65161a96b03dd0c7cdb03b18021ccbaccfe6da12 Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Mon, 25 Sep 2023 23:45:27 -0300 Subject: [PATCH 10/11] text: Text component --- src/components/Text/index.test.tsx | 54 ++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 src/components/Text/index.test.tsx diff --git a/src/components/Text/index.test.tsx b/src/components/Text/index.test.tsx new file mode 100644 index 0000000..9c3c82e --- /dev/null +++ b/src/components/Text/index.test.tsx @@ -0,0 +1,54 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { render, screen } from '@testing-library/react'; +import { expect } from '@jest/globals'; +import '@testing-library/jest-dom/extend-expect'; + +import { fontSizes, fontColors } from './test-helpers'; + +import Text from './'; + +describe('', () => { + it('should be defined', () => { + render(); + + const element = screen.getByText('test'); + + expect(element).toBeDefined(); + }); + + fontSizes.forEach(fontSize => { + it(`should render with font-size: ${fontSize.value}`, () => { + render(); + + const element = screen.getByText('test'); + + (expect as any)(element).toHaveStyle(`font-size: + ${fontSize.value}`); + }); + }); + + fontColors.forEach(fontColor => { + it(`should render with color: ${fontColor.value}`, () => { + render(); + + const element = screen.getByText('test'); + + (expect as any)(element).toHaveStyle(`color: + ${fontColor.value}`); + }); + }); + + it('should render with font-size: 16px as default', () => { + render(); + + const element = screen.getByText('test'); + + (expect as any)(element).toHaveStyle('font-size: + 16px'); + }); + + it('should render with color: #1A1033 as default', () => { + render(); + + const element = screen.getByText('test'); + + (expect as any)(element).toHaveStyle('color: + #1A1033'); + }); +}); From 65dde14fe92294d312cc37a223921099cb96855c Mon Sep 17 00:00:00 2001 From: cesarhenrq Date: Mon, 25 Sep 2023 23:45:59 -0300 Subject: [PATCH 11/11] test: implement some helpers to test Text component --- src/components/Text/test-helpers.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 src/components/Text/test-helpers.ts diff --git a/src/components/Text/test-helpers.ts b/src/components/Text/test-helpers.ts new file mode 100644 index 0000000..96398cc --- /dev/null +++ b/src/components/Text/test-helpers.ts @@ -0,0 +1,18 @@ +export const fontSizes: FontSizes[] = [ + { label: 'xsmall', value: '12px' }, + { label: 'small', value: '14px' }, + { label: 'normal', value: '16px' }, + { label: 'medium', value: '18px' }, + { label: 'large', value: '32px' }, + { label: 'xlarge', value: '48px' }, +]; + +export const fontColors: FontColors[] = [ + { label: 'purple', value: '#5D5FEF' }, + { label: 'purple-light', value: '#B2A1D9' }, + { label: 'purple-dark', value: '#1A1033' }, + { label: 'white', value: '#FFFFFF' }, + { label: 'gray', value: '#A6A8AB' }, + { label: 'gray-light', value: '#D1D1D1' }, + { label: 'yellow', value: '#FBB04D' }, +];