diff options
author | Sebastian <sebasjm@gmail.com> | 2022-04-05 12:16:09 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-04-05 12:16:09 -0300 |
commit | a30a547ac5596c787252ce23a845093c426dc2ef (patch) | |
tree | e1dff892172cbcb0e34133f14a9e3f9e7f1c0250 /packages/taler-wallet-webextension/src/mui/Typography.tsx | |
parent | c9adb4a5e292ae9a2c359a7a55083746486e11d9 (diff) | |
download | wallet-core-a30a547ac5596c787252ce23a845093c426dc2ef.tar.xz |
mui alert and not enough blanance ported to material
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui/Typography.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/mui/Typography.tsx | 29 |
1 files changed, 22 insertions, 7 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/Typography.tsx b/packages/taler-wallet-webextension/src/mui/Typography.tsx index ecd2b8ec3..1610a1c66 100644 --- a/packages/taler-wallet-webextension/src/mui/Typography.tsx +++ b/packages/taler-wallet-webextension/src/mui/Typography.tsx @@ -1,5 +1,6 @@ import { css } from "@linaria/core"; import { ComponentChildren, h, VNode } from "preact"; +import { useTranslationContext } from "../context/translation.js"; // eslint-disable-next-line import/extensions import { theme } from "./style"; @@ -22,10 +23,13 @@ type VariantEnum = interface Props { align?: "center" | "inherit" | "justify" | "left" | "right"; gutterBottom?: boolean; + bold?: boolean; + inline?: boolean; noWrap?: boolean; paragraph?: boolean; variant?: VariantEnum; - children?: ComponentChildren; + children: string[] | string; + class?: string; } const defaultVariantMapping = { @@ -57,6 +61,9 @@ const gutterBottomStyle = css` const paragraphStyle = css` margin-bottom: 16px; `; +const boldStyle = css` + font-weight: bold; +`; export function Typography({ align, @@ -64,9 +71,16 @@ export function Typography({ noWrap = false, paragraph = false, variant = "body1", + bold, + inline, children, + class: _class, }: Props): VNode { - const cmp = paragraph + const { i18n } = useTranslationContext(); + + const Component = inline + ? "span" + : paragraph === true ? "p" : defaultVariantMapping[variant as "h1"] || "span"; @@ -76,20 +90,21 @@ export function Typography({ : { textAlign: align, }; + return h( - cmp, + Component, { class: [ + _class, root, noWrap && noWrapStyle, gutterBottom && gutterBottomStyle, paragraph && paragraphStyle, + bold && boldStyle, theme.typography[variant as "button"], //FIXME: implement the rest of the typography and remove the casting ].join(" "), - style: { - ...alignStyle, - }, + style: alignStyle, }, - children, + <i18n.Translate>{children}</i18n.Translate>, ); } |