feat: add variants to Text component based on fontSize

src/component/src/atoms/view/index.tsx

@@ -25,7 +25,7 @@ const useStyles = createUseStyles(
 
 type Style = 0 | false | undefined | CSSProperties | Style[];
 
-type Variant =
+export type Variant =
   | "div"
   | "a"
   | "h1"

src/component/src/molecules/text/index.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Variant } from "../../atoms/view";
 import { BaseText, BaseTextProps } from "./base";
 import { fontSizes, fontWeights, useThemes } from "./styles";
 
@@ -32,6 +33,8 @@ const Text = React.memo(
         style,
         size = "medium",
         weight = "medium",
+        numberOfLines,
+        variant,
         ...rest
       },
       ref,
@@ -41,9 +44,23 @@ const Text = React.memo(
       const fontWeight =
         typeof weight === "number" ? weight : fontWeights[weight];
 
+      const setVariant = React.useCallback((): Variant => {
+        if (typeof size !== "number" && size?.match(/<h(1|2|3|4|5|6).+?>/g)) {
+          return size as Variant;
+        }
+        if (numberOfLines && numberOfLines >= 3) {
+          return "article";
+        }
+        if (numberOfLines && numberOfLines < 3) {
+          return "p";
+        }
+        return variant || "div";
+      }, [numberOfLines, size, variant]);
+
       return (
         <BaseText
           ref={ref}
+          variant={variant || setVariant()}
           className={[
             themes[`${theme}${lang ? `-${lang}` : ""}` as keyof typeof themes],
             className,

src/component/src/molecules/text/styles.ts

@@ -28,6 +28,12 @@ export const fontSizes = {
   large: 18,
   xlarge: 20,
   xxlarge: 22,
+  h1: 32,
+  h2: 24,
+  h3: 18.7,
+  h4: 16,
+  h5: 13.2,
+  h6: 10.7,
 };
 
 const useThemes = createUseStyles<