#54/create text UI component (#85)

* #54/Create text UI-component

* Add tests for the Text component

* Add snapshot tests for the Text

* Rename barrel files to .ts instead of .tsx

* Update webapp package.json

Add test:coverage script to run coverage tests

Update index.css
  Rename --color-game to --gradient-game
  Add --primary-font variable

* Update Color enum
Use CSS classes instead of variables
Update TextColor enum: extend the Color enums
Update Icon component, pass the color as a className

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 {
@@ -33,56 +36,80 @@ body {
   padding: 0;
 }
 
-.text-style-0-bold {
+/* text styles */
+.title-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;
+.subtitle-bold {
+  font-size: 2.5rem;
+  font-family: var(--primary-font);
   font-weight: 700;
 }
 
-.text-style-2-bold {
+.heading-bold {
   font-size: 1.5rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: var(--primary-font);
   font-weight: 700;
 }
 
-.text-style-3-bold {
+.subheading-bold {
   font-size: 1.25rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: var(--primary-font);
   font-weight: 700;
 }
 
-.text-style-4-regular {
+.paragraph-regular {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: var(--primary-font);
   font-weight: 400;
 }
 
-.text-style-4-medium {
+.paragraph-medium {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: var(--primary-font);
   font-weight: 500;
 }
 
-.text-style-4-bold {
+.paragraph-bold {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: var(--primary-font);
   font-weight: 700;
 }
 
-.text-style-5-regular {
+.caption-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-weight: 400;
+/* colors */
+.color-warning {
+  color: var(--color-warning);
+}
+
+.color-submit {
+  color: var(--color-submit);
+}
+
+.color-online {
+  color: var(--color-online);
+}
+
+.color-offline {
+  color: var(--color-offline);
+}
+
+.color-light {
+  color: var(--color-light);
+}
+
+.color-background {
+  color: var(--color-background);
+}
+
+.color-dark {
+  color: var(--color-dark);
 }

webapp/src/pages/Landing/Landing.tsx

@@ -1,16 +1,30 @@
-import { Icon, IconSize, IconType } from '../../shared/components';
+import {
+  Icon,
+  IconSize,
+  IconVariant,
+  Text,
+  TextColor,
+  TextVariant,
+  TextWeight,
+} from '../../shared/components';
 import { Color } from '../../shared/types';
 import './Landing.css';
 
 export default function Landing() {
   return (
     <section className="Landing">
       <Icon
-        type={IconType.PLAY}
-        color={Color.LIGHT}
+        variant={IconVariant.PLAY}
+        color={Color.ONLINE}
         size={IconSize.LARGE}
       ></Icon>
-      <h1 className="text-style-0-bold">Landing 🚀</h1>
+      <Text
+        variant={TextVariant.TITLE}
+        color={TextColor.GAME}
+        weight={TextWeight.MEDIUM}
+      >
+        Landing 🚀
+      </Text>
     </section>
   );
 }

webapp/src/shared/components/Icon/Icon.tsx

@@ -12,7 +12,7 @@ import {
   Users,
 } from './assets/icons';
 
-export enum IconType {
+export enum IconVariant {
   ARROW_BACK = 'ARROW_BACK',
   ARROW_FORWARD = 'ARROW_FORWARD',
   CHAT = 'CHAT',
@@ -31,7 +31,7 @@ type SVGProps = React.SVGProps<SVGSVGElement> & {
 
 type SVGComponent = React.FunctionComponent<SVGProps>;
 
-const Icons: { [key in IconType]: SVGComponent } = {
+const Icons: { [key in IconVariant]: SVGComponent } = {
   ARROW_BACK: ArrowBack,
   ARROW_FORWARD: ArrowForward,
   CHAT: Chat,
@@ -50,14 +50,12 @@ export enum IconSize {
 }
 
 type IconProps = {
-  type: IconType;
+  variant: IconVariant;
   size?: IconSize | undefined;
   color?: Color | undefined;
 };
 
-export default function Icon({ type, color, size }: IconProps) {
-  const NameTag = Icons[type];
-  return (
-    <NameTag style={{ color: `var(${color})` }} height={size} width={size} />
-  );
+export default function Icon({ variant, color, size }: IconProps) {
+  const IconTag = Icons[variant];
+  return <IconTag className={color} height={size} width={size} />;
 }

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

@@ -0,0 +1,6 @@
+.text-color-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,50 @@
+import { Color } from '../../types';
+import './Text.css';
+
+export class TextVariant {
+  public static TITLE = new TextVariant('h1', '3rem');
+  public static SUBTITLE = new TextVariant('h2', '2.5rem');
+  public static HEADING = new TextVariant('h3', '1.5rem');
+  public static SUBHEADING = new TextVariant('h4', '1.25rem');
+  public static PARAGRAPH = new TextVariant('p', '1rem');
+  public static CAPTION = new TextVariant('p', '0.875rem');
+
+  private constructor(public tag: string, public size: string) {}
+}
+
+enum CustomTextColor {
+  GAME = 'text-color-game',
+}
+
+type TextColor = Color | CustomTextColor;
+// eslint-disable-next-line @typescript-eslint/no-redeclare -- intentionally naming the variable the same as the type
+export const TextColor = { ...Color, ...CustomTextColor };
+
+export enum TextWeight {
+  REGULAR = '400',
+  MEDIUM = '500',
+  BOLD = '700',
+}
+
+type TextProps = {
+  variant: TextVariant;
+  color?: TextColor;
+  weight?: TextWeight;
+  children: string;
+};
+
+export default function Text({
+  variant,
+  color = TextColor.DARK,
+  weight = TextWeight.REGULAR,
+  children,
+}: TextProps) {
+  const { tag, size } = variant;
+  const TextTag = tag 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,49 @@
+import { render, screen } from '@testing-library/react';
+import { create } from 'react-test-renderer';
+import Text, { TextColor, TextVariant, TextWeight } from '../Text';
+
+test('renders default text', () => {
+  render(<Text variant={TextVariant.PARAGRAPH}>Hello World!</Text>);
+
+  const textElement = screen.getByText(/hello world!/i);
+  expect(textElement).toBeInTheDocument();
+  expect(textElement).toHaveStyle({
+    fontSize: TextVariant.PARAGRAPH.size,
+    fontWeight: TextWeight.REGULAR,
+  });
+});
+
+test('renders custom text', () => {
+  render(
+    <Text variant={TextVariant.HEADING} weight={TextWeight.BOLD}>
+      Hello World!
+    </Text>,
+  );
+
+  const textElement = screen.getByText(/hello world!/i);
+  expect(textElement).toBeInTheDocument();
+  expect(textElement).toHaveStyle({
+    fontSize: TextVariant.HEADING.size,
+    fontWeight: TextWeight.BOLD,
+  });
+});
+
+test('renders correctly with default text', () => {
+  const tree = create(
+    <Text variant={TextVariant.TITLE}>Hello World!</Text>,
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('renders correctly with custom text', () => {
+  const tree = create(
+    <Text
+      variant={TextVariant.TITLE}
+      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`] = `
+<h1
+  className="color-light"
+  style={
+    Object {
+      "fontSize": "3rem",
+      "fontWeight": "700",
+    }
+  }
+>
+  Hello World!
+</h1>
+`;
+
+exports[`renders correctly with default text 1`] = `
+<h1
+  className="color-dark"
+  style={
+    Object {
+      "fontSize": "3rem",
+      "fontWeight": "400",
+    }
+  }
+>
+  Hello World!
+</h1>
+`;

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

@@ -1,10 +1,9 @@
 export enum Color {
-  WARNING = '--color-warning',
-  SUBMIT = '--color-submit',
-  ONLINE = '--color-online',
-  OFFLINE = '--color-offline',
-  LIGHT = '--color-light',
-  BACKGROUND = '--color-background',
-  DARK = '--color-dark',
-  GAME = '--color-game',
+  WARNING = 'color-warning',
+  SUBMIT = 'color-submit',
+  ONLINE = 'color-online',
+  OFFLINE = 'color-offline',
+  LIGHT = 'color-light',
+  BACKGROUND = 'color-background',
+  DARK = 'color-dark',
 }