diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui/Typography.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/mui/Typography.tsx | 89 |
1 files changed, 86 insertions, 3 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/Typography.tsx b/packages/taler-wallet-webextension/src/mui/Typography.tsx index 4fc614463..830f1005a 100644 --- a/packages/taler-wallet-webextension/src/mui/Typography.tsx +++ b/packages/taler-wallet-webextension/src/mui/Typography.tsx @@ -1,9 +1,92 @@ +import { css } from "@linaria/core"; import { h, Fragment, VNode, ComponentChildren } from "preact"; +type VariantEnum = + | "body1" + | "body2" + | "button" + | "caption" + | "h1" + | "h2" + | "h3" + | "h4" + | "h5" + | "h6" + | "inherit" + | "overline" + | "subtitle1" + | "subtitle2"; + interface Props { - children: ComponentChildren; + align?: "center" | "inherit" | "justify" | "left" | "right"; + gutterBottom?: boolean; + noWrap?: boolean; + paragraph?: boolean; + variant?: VariantEnum; + children?: ComponentChildren; } -export function Typography({ children }: Props): VNode { - return <p>{children}</p>; +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, + }; + return h( + cmp, + { + class: [ + root, + noWrap && noWrapStyle, + gutterBottom && gutterBottomStyle, + paragraph && paragraphStyle, + ].join(" "), + style: { + ...alignStyle, + }, + }, + children, + ); } |