♻️ refactor: enhance Typography component to support custom HTML tags (…

…#125)
konstructio · Feb 19, 2025 · ff0d5a6 · ff0d5a6
1 parent 4c1ec95
commit ff0d5a6
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 29 deletions.
diff --git a/lib/components/Typography/Typography.tsx b/lib/components/Typography/Typography.tsx
@@ -1,21 +1,26 @@
 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> = ({
   className,
   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
@@ -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
@@ -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: {