#54/create text UI component

webapp/package.json

@@ -13,6 +13,7 @@
     "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:coverage": "react-scripts test --coverage .",
     "test-ci": "react-scripts test --watchAll=false",
     "eject": "react-scripts eject"
   },
@@ -42,9 +43,20 @@
     "@types/node": "^16.11.41",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
+    "@types/react-test-renderer": "^18.0.0",
     "eslint": "^8.18.0",
     "prettier": "2.7.1",
     "react-scripts": "^5.0.1",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^4.7.4"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{ts,tsx}",
+      "!src/**/index.{ts,tsx}",
+      "!src/react-app-env.d.ts",
+      "!src/reportWebVitals.ts",
+      "!src/shared/types.ts"
+    ]
   }
 }

webapp/src/index.css

@@ -9,12 +9,15 @@
   --color-light: #ffffff;
   --color-background: #191b1f;
   --color-dark: #262934;
-  --color-game: linear-gradient(
+
+  --gradient-game: linear-gradient(
     269.73deg,
     #4b52ee 40.15%,
     #fb4e78 78.32%,
     #3fc6a2 99.73%
   );
+
+  --primary-font: 'DM Sans', sans-serif;
 }
 
 html {
@@ -35,54 +38,54 @@ body {
 
 .text-style-0-bold {
   font-size: 3rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: var(--primary-font);
   font-weight: 700;
 }
 
 .text-style-1-bold {
-  font-size: 3rem;
-  font-family: 'DM Sans', sans-serif;
+  font-size: 2.5rem;
+  font-family: var(--primary-font);
   font-weight: 700;
 }
 
 .text-style-2-bold {
   font-size: 1.5rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: var(--primary-font);
   font-weight: 700;
 }
 
 .text-style-3-bold {
   font-size: 1.25rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: var(--primary-font);
   font-weight: 700;
 }
 
 .text-style-4-regular {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: var(--primary-font);
   font-weight: 400;
 }
 
 .text-style-4-medium {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: var(--primary-font);
   font-weight: 500;
 }
 
 .text-style-4-bold {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: var(--primary-font);
   font-weight: 700;
 }
 
 .text-style-5-regular {
   font-size: 0.875rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: var(--primary-font);
   font-weight: 400;
 }
 
 .text-style-6-regular {
   font-size: 0.75rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: var(--primary-font);
   font-weight: 400;
 }

webapp/src/pages/Landing/Landing.tsx

@@ -1,4 +1,13 @@
-import { Icon, IconSize, IconType } from '../../shared/components';
+import {
+  Icon,
+  IconSize,
+  IconType,
+  Text,
+  TextColor,
+  TextSize,
+  TextType,
+  TextWeight,
+} from '../../shared/components';
 import { Color } from '../../shared/types';
 import './Landing.css';
 
@@ -7,10 +16,17 @@ export default function Landing() {
     <section className="Landing">
       <Icon
         type={IconType.PLAY}
-        color={Color.LIGHT}
+        color={Color.ONLINE}
         size={IconSize.LARGE}
       ></Icon>
-      <h1 className="text-style-0-bold">Landing 🚀</h1>
+      <Text
+        type={TextType.HEADER}
+        size={TextSize.LARGE}
+        color={TextColor.GAME}
+        weight={TextWeight.MEDIUM}
+      >
+        Landing 🚀
+      </Text>
     </section>
   );
 }

webapp/src/shared/components/Text/Text.css

@@ -0,0 +1,34 @@
+.text-warning {
+  color: var(--color-warning);
+}
+
+.text-submit {
+  color: var(--color-submit);
+}
+
+.text-online {
+  color: var(--color-online);
+}
+
+.text-offline {
+  color: var(--color-offline);
+}
+
+.text-light {
+  color: var(--color-light);
+}
+
+.text-background {
+  color: var(--color-background);
+}
+
+.text-dark {
+  color: var(--color-dark);
+}
+
+.text-game {
+  background: var(--gradient-game);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

webapp/src/shared/components/Text/Text.tsx

@@ -0,0 +1,59 @@
+import './Text.css';
+
+export enum TextType {
+  HEADER = 'h1',
+  TITLE = 'h3',
+  SUBTITLE = 'h5',
+  DESCRIPTION = 'p',
+}
+
+export enum TextColor {
+  WARNING = 'text-warning',
+  SUBMIT = 'text-submit',
+  ONLINE = 'text-online',
+  OFFLINE = 'text-offline',
+  LIGHT = 'text-light',
+  BACKGROUND = 'text-background',
+  DARK = 'text-dark',
+  GAME = 'text-game',
+}
+
+export enum TextSize {
+  EXTRA_SMALL = '0.75rem',
+  SMALL = '0.875rem',
+  SMALL_MEDIUM = '1rem',
+  MEDIUM = '1.25rem',
+  MEDIUM_LARGE = '1.5rem',
+  LARGE = '2.5rem',
+  EXTRA_LARGE = '3rem',
+}
+
+export enum TextWeight {
+  REGULAR = '400',
+  MEDIUM = '500',
+  BOLD = '700',
+}
+
+type TextProps = {
+  children: string;
+  type: TextType;
+  color?: TextColor;
+  size?: TextSize;
+  weight?: TextWeight;
+};
+
+export default function Text({
+  type,
+  size = TextSize.MEDIUM,
+  color = TextColor.DARK,
+  weight = TextWeight.REGULAR,
+  children,
+}: TextProps) {
+  const TextTag = type as React.ElementType;
+
+  return (
+    <TextTag style={{ fontSize: size, fontWeight: weight }} className={color}>
+      {children}
+    </TextTag>
+  );
+}

webapp/src/shared/components/Text/__tests__/Text.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import { create } from 'react-test-renderer';
+import Text, { TextColor, TextSize, TextType, TextWeight } from '../Text';
+
+test('renders default text', () => {
+  render(<Text type={TextType.DESCRIPTION}>Hello World!</Text>);
+
+  const textElement = screen.getByText(/hello world!/i);
+  expect(textElement).toBeInTheDocument();
+  expect(textElement).toHaveStyle({
+    fontSize: TextSize.MEDIUM,
+    fontWeight: TextWeight.REGULAR,
+  });
+});
+
+test('renders custom text', () => {
+  render(
+    <Text
+      type={TextType.HEADER}
+      size={TextSize.EXTRA_LARGE}
+      weight={TextWeight.BOLD}
+    >
+      Hello World!
+    </Text>,
+  );
+
+  const textElement = screen.getByText(/hello world!/i);
+  expect(textElement).toBeInTheDocument();
+  expect(textElement).toHaveStyle({
+    fontSize: TextSize.EXTRA_LARGE,
+    fontWeight: TextWeight.BOLD,
+  });
+});
+
+test('renders correctly with default text', () => {
+  const tree = create(<Text type={TextType.TITLE}>Hello World!</Text>).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('renders correctly with custom text', () => {
+  const tree = create(
+    <Text
+      type={TextType.TITLE}
+      size={TextSize.EXTRA_LARGE}
+      color={TextColor.LIGHT}
+      weight={TextWeight.BOLD}
+    >
+      Hello World!
+    </Text>,
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});

webapp/src/shared/components/Text/__tests__/__snapshots__/Text.test.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly with custom text 1`] = `
+<h3
+  className="text-light"
+  style={
+    Object {
+      "fontSize": "3rem",
+      "fontWeight": "700",
+    }
+  }
+>
+  Hello World!
+</h3>
+`;
+
+exports[`renders correctly with default text 1`] = `
+<h3
+  className="text-dark"
+  style={
+    Object {
+      "fontSize": "1.25rem",
+      "fontWeight": "400",
+    }
+  }
+>
+  Hello World!
+</h3>
+`;

webapp/src/shared/components/index.tsx → webapp/src/shared/components/index.ts

@@ -1,2 +1,4 @@
 export { default as Icon } from './Icon/Icon';
 export * from './Icon/Icon';
+export { default as Text } from './Text/Text';
+export * from './Text/Text';

webapp/src/shared/types.ts

@@ -6,5 +6,4 @@ export enum Color {
   LIGHT = '--color-light',
   BACKGROUND = '--color-background',
   DARK = '--color-dark',
-  GAME = '--color-game',
 }