diff --git a/package.json b/package.json index 0c5f96c..b8c01da 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sensearena/ui", - "version": "0.2.63", + "version": "0.2.64", "scripts": { "dev": "vite", "build": "tsc && vite build", diff --git a/src/components/typography/Heading.tsx b/src/components/typography/Heading.tsx index a5481a6..045dd49 100644 --- a/src/components/typography/Heading.tsx +++ b/src/components/typography/Heading.tsx @@ -10,7 +10,10 @@ type Props = { className?: string; style?: CSSProperties; }; - +/** + * + * @deprecated use UniTypography + */ export const Heading: FC = ({ children, weight, root = 'h1', className, style, variant }) => { const Root = root; return ( diff --git a/src/components/typography/Paragraph.tsx b/src/components/typography/Paragraph.tsx index 2ba7ac7..ffe494e 100644 --- a/src/components/typography/Paragraph.tsx +++ b/src/components/typography/Paragraph.tsx @@ -7,6 +7,10 @@ type Props = { children?: ReactNode; } & DetailedHTMLProps, HTMLParagraphElement>; +/** + * + * @deprecated use UniTypography + */ export const Paragraph: FC = ({ children, variant, className, style, ...rest }) => { return (

diff --git a/src/components/typography/UniversalTypography.tsx b/src/components/typography/UniversalTypography.tsx new file mode 100644 index 0000000..4c719a9 --- /dev/null +++ b/src/components/typography/UniversalTypography.tsx @@ -0,0 +1,34 @@ +import { DetailedHTMLProps, HTMLAttributes, ReactNode, forwardRef } from 'react'; +import { clsx } from '../../utils'; +import { uniTypoStyle } from './typography.style.css'; + +export type UniTypographyProps = { + weight?: 'light' | 'medium' | 'normal' | 'bold' | 'semiBold'; + children?: ReactNode; + root?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'; + font?: 'base' | 'atp'; + transform?: 'up'; + size?: string | number; + lineHeight?: string | number; +} & DetailedHTMLProps, HTMLHeadingElement>; + +export const UniTypography = forwardRef( + ({ weight, font, children, root = 'p', ref, className, transform, style = {}, lineHeight, size, ...rest }) => { + const Root = root; + + return ( + + {children} + + ); + }, +); diff --git a/src/components/typography/index.ts b/src/components/typography/index.ts index a14dcfd..a96218e 100644 --- a/src/components/typography/index.ts +++ b/src/components/typography/index.ts @@ -1,2 +1,3 @@ export * from './Heading'; export * from './Paragraph'; +export * from './UniversalTypography'; diff --git a/src/components/typography/typography.style.css.ts b/src/components/typography/typography.style.css.ts index 7d3f73e..2e4b623 100644 --- a/src/components/typography/typography.style.css.ts +++ b/src/components/typography/typography.style.css.ts @@ -193,3 +193,46 @@ export const paragraphStyle = recipe({ variant: 'body', }, }); + +export const uniTypoStyle = recipe({ + base: { + letterSpacing: 0, + margin: 0, + }, + variants: { + weight: { + light: { + fontWeight: 300, + }, + normal: { + fontWeight: 400, + }, + medium: { + fontWeight: 500, + }, + semiBold: { + fontWeight: 600, + }, + bold: { + fontWeight: 700, + }, + }, + font: { + base: { + fontFamily: vars.font.family, + }, + atp: { + fontFamily: vars.font.atpFamily, + }, + }, + transform: { + up: { + textTransform: 'uppercase', + }, + }, + }, + defaultVariants: { + weight: 'normal', + font: 'base', + }, +});