From 4f2cebd0f6128c9ef2ba1d39a775ad996e774b5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Manuel=20Fuentes=20Trejo?= <futjesus@gmail.com>
Date: Wed, 19 Feb 2025 10:26:54 -0500
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20refactor:=20enhance=20T?=
 =?UTF-8?q?ypography=20component=20to=20support=20custom=20HTML=20tags?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/components/Typography/Typography.tsx      | 13 ++--
 lib/components/Typography/Typography.types.ts |  8 ++-
 .../Typography/Typography.variants.ts         | 71 +++++++++++++------
 3 files changed, 63 insertions(+), 29 deletions(-)

diff --git a/lib/components/Typography/Typography.tsx b/lib/components/Typography/Typography.tsx
index 341f276..81ccacd 100644
--- a/lib/components/Typography/Typography.tsx
+++ b/lib/components/Typography/Typography.tsx
@@ -1,7 +1,8 @@
 import { FunctionComponent, useId } from 'react';
 
-import { useTheme } from '../../contexts';
-import { TypographyProps } from './Typography.types';
+import { useTheme } from '@/contexts';
+
+import { HeadingTag, TypographyProps } from './Typography.types';
 import { typographyVariants } from './Typography.variants';
 
 const Typography: FunctionComponent<TypographyProps> = ({
@@ -9,13 +10,17 @@ const Typography: FunctionComponent<TypographyProps> = ({
   theme,
   children,
   variant,
+  component,
   ...delegated
 }) => {
   const id = useId();
   const { theme: themeContext } = useTheme();
 
+  const Component =
+    component ?? (variant?.includes('h') ? (variant as HeadingTag) : 'p');
+
   return (
-    <p
+    <Component
       id={id}
       className={typographyVariants({
         className,
@@ -25,7 +30,7 @@ const Typography: FunctionComponent<TypographyProps> = ({
       {...delegated}
     >
       {children}
-    </p>
+    </Component>
   );
 };
 
diff --git a/lib/components/Typography/Typography.types.ts b/lib/components/Typography/Typography.types.ts
index f8f5120..058da8c 100644
--- a/lib/components/Typography/Typography.types.ts
+++ b/lib/components/Typography/Typography.types.ts
@@ -1,9 +1,13 @@
 import { VariantProps } from 'class-variance-authority';
-import { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
+
 import { typographyVariants } from './Typography.variants';
 
+export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
 export interface TypographyProps
   extends InputHTMLAttributes<HTMLParagraphElement>,
     VariantProps<typeof typographyVariants> {
-  children: React.ReactNode;
+  children: ReactNode;
+  component?: HeadingTag | 'p' | 'span';
 }
diff --git a/lib/components/Typography/Typography.variants.ts b/lib/components/Typography/Typography.variants.ts
index 991bb71..d9b9b01 100644
--- a/lib/components/Typography/Typography.variants.ts
+++ b/lib/components/Typography/Typography.variants.ts
@@ -1,32 +1,57 @@
 import { cva } from 'class-variance-authority';
 
-export const typographyVariants = cva([''], {
+export const typographyVariants = cva(['font-normal', 'text-zinc-700'], {
   variants: {
     variant: {
-      h1: 'text-[57px] font-normal leading-[64px]',
-      h2: 'text-[45px] font-normal leading-[52px]',
-      h3: 'text-[36px] font-normal leading-[44px]',
-      h4: 'text-[32px] font-normal leading-[40px]',
-      h5: 'text-[28px] font-normal leading-[36px]',
-      h6: 'text-[24px] font-medium leading-[32px] tracking-[0.15px]',
-      subtitle1: 'text-[22px] font-normal leading-[28px]',
-      subtitle2: 'text-[16px] font-medium leading-[24px] tracking-[0.15px]',
-      subtitle3: 'text-[14px] font-medium leading-[20px] tracking-[0.1px]',
-      labelLarge: 'text-[14px] font-normal leading-[20px] tracking-[0.1px]',
-      labelMedium:
-        'text-[12px] font-medium leading-[16px] tracking-[0.5px] uppercase',
-      labelSmall:
-        'text-[11px] font-medium leading-[16px] tracking-[0.5px] uppercase',
-      buttonSmall: 'text-[14px] font-semibold leading-[20px] tracking-[0.25px]',
-      body1: 'text-[16px] font-normal leading-[24px] tracking-[0.5px]',
-      body2: 'text-[14px] font-normal leading-[20px] tracking-[0.25px]',
-      body3: 'text-[12px] font-normal leading-[16px] tracking-[0.4px]',
-      tooltip: 'text-[14px] font-normal leading-[22px]',
+      h1: ['text-[57px]', 'leading-[64px]'],
+      h2: ['text-[45px]', 'leading-[52px]'],
+      h3: ['text-[36px]', 'leading-[44px]'],
+      h4: ['text-[32px]', 'leading-[40px]'],
+      h5: ['text-[28px]', 'leading-[36px]'],
+      h6: ['text-[24px]', 'font-medium', 'leading-[32px]', 'tracking-[0.15px]'],
+      subtitle1: ['text-[22px]', 'leading-[28px]'],
+      subtitle2: [
+        'text-[16px]',
+        'font-medium',
+        'leading-[24px]',
+        'tracking-[0.15px]',
+      ],
+      subtitle3: [
+        'text-[14px]',
+        'font-medium',
+        'leading-[20px]',
+        'tracking-[0.1px]',
+      ],
+      labelLarge: ['text-[14px]', 'leading-[20px]', 'tracking-[0.1px]'],
+      labelMedium: [
+        'text-[12px]',
+        'font-medium',
+        'leading-[16px]',
+        'tracking-[0.5px]',
+        'uppercase',
+      ],
+      labelSmall: [
+        'text-[11px]',
+        'font-medium',
+        'leading-[16px]',
+        'tracking-[0.5px]',
+        'uppercase',
+      ],
+      buttonSmall: [
+        'text-[14px]',
+        'font-semibold',
+        'leading-[20px]',
+        'tracking-[0.25px]',
+      ],
+      body1: ['text-[16px]', 'leading-[24px]', 'tracking-[0.5px]'],
+      body2: ['text-[14px]', 'leading-[20px]', 'tracking-[0.25px]'],
+      body3: ['text-[12px]', 'leading-[16px]', 'tracking-[0.4px]'],
+      tooltip: ['text-[14px]', 'leading-[22px]'],
     },
     theme: {
-      kubefirst: 'text-zinc-700',
-      colony: 'text-zinc-700',
-      civo: 'text-zinc-700',
+      kubefirst: '',
+      colony: '',
+      civo: '',
     },
   },
   defaultVariants: {