feat: updated Text component to latest design specification (#70)

src/views/components/common/Text/Text.module.scss

@@ -2,59 +2,64 @@
 @use 'src/views/styles/fonts.module.scss';
 
 .text {
-    font-family: 'Inter', sans-serif;
-    color: colors.$charcoal;
-    line-height: initial;
+    font-family: 'Roboto Flex', sans-serif;
+    line-height: normal;
+    font-style: normal;
 }
 
-.light_weight {
-    font-weight: fonts.$light_weight;
+.mini {
+    font-size: 0.79rem;
+    font-weight: 500;
 }
 
-.regular_weight {
-    font-weight: fonts.$regular_weight;
+.small {
+    font-size: 0.88875rem;
+    font-weight: 500;
 }
 
-.normal_weight {
-    font-weight: fonts.$normal_weight;
+.p {
+    font-size: 1rem;
+    font-weight: 400;
+    letter-spacing: 0.025rem;
 }
 
-.semi_bold_weight {
-    font-weight: fonts.$semi_bold_weight;
+.h4 {
+    font-size: 1.125rem;
+    font-weight: 500;
 }
 
-.bold_weight {
-    font-weight: fonts.$bold_weight;
+.h3-course {
+    font-size: 0.6875rem;
+    font-weight: 400;
+    line-height: 100%; /* 0.6875rem */
 }
 
-.black_weight {
-    font-weight: fonts.$black_weight;
+.h3 {
+    font-size: 1.26563rem;
+    font-weight: 600;
+    text-transform: uppercase;
 }
 
-.x_small_size {
-    font-size: fonts.$x_small_size;
+.h2-course {
+    font-size: 1rem;
+    font-weight: 500;
+    letter-spacing: 0.03125rem;
+    text-transform: capitalize;
 }
 
-.xx_small_size {
-    font-size: fonts.$xx_small_size;
+.h2 {
+    font-size: 1.42375rem;
+    font-weight: 500;
 }
 
-.small_size {
-    font-size: fonts.$small_size;
+.h1-course {
+    font-size: 1rem;
+    font-weight: 600;
+    text-transform: capitalize;
 }
 
-.medium_size {
-    font-size: fonts.$medium_size;
-}
-
-.large_size {
-    font-size: fonts.$large_size;
-}
-
-.x_large_size {
-    font-size: fonts.$x_large_size;
-}
-
-.xx_large_size {
-    font-size: fonts.$xx_large_size;
+.h1 {
+    font-size: 1.60188rem;
+    font-weight: 700;
+    text-transform: uppercase;
 }

src/views/components/common/Text/Text.tsx

@@ -1,50 +1,32 @@
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
-import colors, { Color } from '@views/styles/colors.module.scss';
-import { Size, Weight } from '@views/styles/fonts.module.scss';
 import styles from './Text.module.scss';
 
 /**
  *
  */
 export type TextProps = {
-    color?: Color;
-    weight?: Weight;
-    size?: Size;
-    span?: boolean;
-    className?: string;
-    onClick?: () => void;
-    title?: string;
-    align?: React.CSSProperties['textAlign'];
-    style?: React.CSSProperties;
-};
+    variant?: Variant;
+} & (
+    | (React.HTMLAttributes<HTMLSpanElement> & { as?: 'span' })
+    | (React.HTMLAttributes<HTMLDivElement> & { as: 'div' })
+);
+
+const variants = ['mini', 'small', 'p', 'h4', 'h3-course', 'h3', 'h2-course', 'h2', 'h1-course', 'h1'] as const;
+
+type Variant = (typeof variants)[number];
 
 /**
  * A reusable Text component with props that build on top of the design system for the extension
  */
-export default function Text(props: PropsWithChildren<TextProps>) {
-    const style: React.CSSProperties = {
-        ...props.style,
-        textAlign: props.align,
-        color: props.color ? colors[props.color] : undefined,
-    };
+export default function Text({ variant, as, className, ...props }: PropsWithChildren<TextProps>) {
+    const mergedClassName = classNames(styles.text, styles[variant], className);
 
-    const weightClass = `${props.weight ?? 'regular'}_weight`;
-    const fontSizeClass = `${props.size ?? 'medium'}_size`;
-
-    const className = classNames(styles.text, styles[weightClass], styles[fontSizeClass], props.className);
-
-    if (props.span) {
-        return (
-            <span title={props.title} className={className} style={style} onClick={props.onClick}>
-                {props.children}
-            </span>
-        );
-    }
+    if (as === 'div') return <div className={mergedClassName} {...props} />;
 
     return (
-        <div title={props.title} className={className} style={style} onClick={props.onClick}>
+        <span className={mergedClassName} {...props}>
             {props.children}
-        </div>
+        </span>
     );
 }