Merge pull request #1 from cesarhenrq/qa

4567 - Text component

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('<Text />', () => {
+  it('should be defined', () => {
+    render(<Text label="test" />);
+
+    const element = screen.getByText('test');
+
+    expect(element).toBeDefined();
+  });
+
+  fontSizes.forEach(fontSize => {
+    it(`should render with font-size: ${fontSize.value}`, () => {
+      render(<Text label="test" fontSize={fontSize.label} />);
+
+      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(<Text label="test" fontColor={fontColor.label} />);
+
+      const element = screen.getByText('test');
+
+      (expect as any)(element).toHaveStyle(`color: + ${fontColor.value}`);
+    });
+  });
+
+  it('should render with font-size: 16px as default', () => {
+    render(<Text label="test" />);
+
+    const element = screen.getByText('test');
+
+    (expect as any)(element).toHaveStyle('font-size: + 16px');
+  });
+
+  it('should render with color: #1A1033 as default', () => {
+    render(<Text label="test" />);
+
+    const element = screen.getByText('test');
+
+    (expect as any)(element).toHaveStyle('color: + #1A1033');
+  });
+});

src/components/Text/index.tsx

@@ -0,0 +1,7 @@
+import * as S from './styles';
+
+const Text = (props: TextProps) => {
+  return <S.Text {...props}>{props.label}</S.Text>;
+};
+
+export default Text;

src/components/Text/styles.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const Text = styled.p<TextProps>`
+  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;
+`;

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

src/types/FontColor.d.ts

@@ -0,0 +1,8 @@
+type FontColor =
+  | 'purple'
+  | 'purple-light'
+  | 'purple-dark'
+  | 'white'
+  | 'gray'
+  | 'gray-light'
+  | 'yellow';

src/types/FontColors.d.ts

@@ -0,0 +1,4 @@
+type FontColors = {
+  label: FontColor;
+  value: string;
+};

src/types/FontSize.d.ts

@@ -0,0 +1 @@
+type FontSize = 'normal' | 'small' | 'xsmall' | 'medium' | 'large' | 'xlarge';

src/types/FontSizes.d.ts

@@ -0,0 +1,4 @@
+type FontSizes = {
+  label: FontSize;
+  value: string;
+};

src/types/FontStyle.d.ts

@@ -0,0 +1 @@
+type FontStyle = 'normal' | 'italic';

src/types/FontWeight.d.ts

@@ -0,0 +1 @@
+type FontWeight = 'normal' | 'bold' | 'lighter';

src/types/TextProps.d.ts

@@ -0,0 +1,7 @@
+type TextProps = {
+  fontSize?: FontSize;
+  fontWeight?: FontWeight;
+  fontColor?: FontColor;
+  label: string;
+  fontStyle?: FontStyle;
+};