#54/create text UI component

webapp/package.json

@@ -42,9 +42,11 @@
     "@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"
   }
 }

webapp/src/index.css

@@ -40,7 +40,7 @@ body {
 }
 
 .text-style-1-bold {
-  font-size: 3rem;
+  font-size: 2.5rem;
   font-family: 'DM Sans', sans-serif;
   font-weight: 700;
 }

webapp/src/pages/Landing/Landing.tsx

@@ -1,4 +1,11 @@
-import { Icon, IconSize, IconType } from '../../shared/components';
+import {
+  Icon,
+  IconSize,
+  IconType,
+  Text,
+  TextSize,
+  TextWeight,
+} from '../../shared/components';
 import { Color } from '../../shared/types';
 import './Landing.css';
 
@@ -7,10 +14,16 @@ 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
+        size={TextSize.LARGE}
+        color={Color.ONLINE}
+        weight={TextWeight.MEDIUM}
+      >
+        Landing 🚀
+      </Text>
     </section>
   );
 }

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

@@ -0,0 +1,37 @@
+import { Color } from '../../types';
+
+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;
+  size?: TextSize;
+  color?: Color;
+  weight?: TextWeight;
+};
+
+export default function Text({
+  size = TextSize.MEDIUM,
+  color = Color.DARK,
+  weight = TextWeight.REGULAR,
+  children,
+}: TextProps) {
+  return (
+    <div style={{ fontSize: size, color: `var(${color})`, fontWeight: weight }}>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react';
+import { create } from 'react-test-renderer';
+import { Color } from '../../../types';
+import Text, { TextSize, TextWeight } from '../Text';
+
+test('renders default text', () => {
+  render(<Text>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 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>Hello World!</Text>).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('renders correctly with custom text', () => {
+  const tree = create(
+    <Text
+      size={TextSize.EXTRA_LARGE}
+      color={Color.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`] = `
+<div
+  style={
+    Object {
+      "color": "var(--color-light)",
+      "fontSize": "3rem",
+      "fontWeight": "700",
+    }
+  }
+>
+  Hello World!
+</div>
+`;
+
+exports[`renders correctly with default text 1`] = `
+<div
+  style={
+    Object {
+      "color": "var(--color-dark)",
+      "fontSize": "1.25rem",
+      "fontWeight": "400",
+    }
+  }
+>
+  Hello World!
+</div>
+`;

webapp/src/shared/components/index.tsx

@@ -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';