1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
import { css } from "@linaria/core";
import { h, Fragment, VNode, ComponentChildren } from "preact";
import { theme } from "./style";
type VariantEnum =
| "body1"
| "body2"
| "button"
| "caption"
| "h1"
| "h2"
| "h3"
| "h4"
| "h5"
| "h6"
| "inherit"
| "overline"
| "subtitle1"
| "subtitle2";
interface Props {
align?: "center" | "inherit" | "justify" | "left" | "right";
gutterBottom?: boolean;
noWrap?: boolean;
paragraph?: boolean;
variant?: VariantEnum;
children?: ComponentChildren;
}
const defaultVariantMapping = {
h1: "h1",
h2: "h2",
h3: "h3",
h4: "h4",
h5: "h5",
h6: "h6",
subtitle1: "h6",
subtitle2: "h6",
body1: "p",
body2: "p",
inherit: "p",
};
const root = css`
margin: 0;
`;
const noWrapStyle = css`
overflow: "hidden";
text-overflow: "ellipsis";
white-space: "nowrap";
`;
const gutterBottomStyle = css`
margin-bottom: 0.35em;
`;
const paragraphStyle = css`
margin-bottom: 16px;
`;
export function Typography({
align,
gutterBottom = false,
noWrap = false,
paragraph = false,
variant = "body1",
children,
}: Props): VNode {
const cmp = paragraph
? "p"
: defaultVariantMapping[variant as "h1"] || "span";
const alignStyle =
align == "inherit"
? {}
: {
textAlign: align,
};
console.log("typograph", cmp, variant);
return h(
cmp,
{
class: [
root,
noWrap && noWrapStyle,
gutterBottom && gutterBottomStyle,
paragraph && paragraphStyle,
theme.typography[variant as "button"], //FIXME: implement the rest of the typography and remove the casting
].join(" "),
style: {
...alignStyle,
},
},
children,
);
}
|