Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

♻️ refactor: enhance Typography component to support custom HTML tags #125

Merged
merged 1 commit into from
Feb 19, 2025
Merged

♻️ refactor: enhance Typography component to support custom HTML tags #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions lib/components/Typography/Typography.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -25,7 +30,7 @@ const Typography: FunctionComponent<TypographyProps> = ({
{...delegated}
>
{children}
</p>
</Component>
);
};

Expand Down
8 changes: 6 additions & 2 deletions lib/components/Typography/Typography.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
}
71 changes: 48 additions & 23 deletions lib/components/Typography/Typography.variants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down