UI typography: export reusable types

This commit is contained in:
Johannes Kirschbauer
2024-12-20 18:11:19 +01:00
parent dacfd69855
commit 9de16d2e81

View File

@@ -3,7 +3,7 @@ import { Dynamic } from "solid-js/web";
import cx from "classnames"; import cx from "classnames";
import "./css/typography.css"; import "./css/typography.css";
type Hierarchy = "body" | "title" | "headline" | "label"; export type Hierarchy = "body" | "title" | "headline" | "label";
type Color = "primary" | "secondary" | "tertiary"; type Color = "primary" | "secondary" | "tertiary";
type Weight = "normal" | "medium" | "bold"; type Weight = "normal" | "medium" | "bold";
type Tag = "span" | "p" | "h1" | "h2" | "h3" | "h4"; type Tag = "span" | "p" | "h1" | "h2" | "h3" | "h4";
@@ -75,7 +75,7 @@ const weightMap: Record<Weight, string> = {
bold: cx("fnt-weight-bold"), bold: cx("fnt-weight-bold"),
}; };
interface TypographyProps<H extends Hierarchy> { interface _TypographyProps<H extends Hierarchy> {
hierarchy: H; hierarchy: H;
size: AllowedSizes<H>; size: AllowedSizes<H>;
children: JSX.Element; children: JSX.Element;
@@ -86,7 +86,8 @@ interface TypographyProps<H extends Hierarchy> {
class?: string; class?: string;
classList?: Record<string, boolean>; classList?: Record<string, boolean>;
} }
export const Typography = <H extends Hierarchy>(props: TypographyProps<H>) => {
export const Typography = <H extends Hierarchy>(props: _TypographyProps<H>) => {
return ( return (
<Dynamic <Dynamic
component={props.tag || "span"} component={props.tag || "span"}
@@ -103,3 +104,5 @@ export const Typography = <H extends Hierarchy>(props: TypographyProps<H>) => {
</Dynamic> </Dynamic>
); );
}; };
export type TypographyProps = _TypographyProps<Hierarchy>;