UI typography: export reusable types
This commit is contained in:
@@ -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>;
|
||||||
|
|||||||
Reference in New Issue
Block a user