diff options
author | Sebastian <sebasjm@gmail.com> | 2022-03-11 02:17:40 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-03-11 11:15:06 -0300 |
commit | 4d66f774c3ad4040f522d2ec52b5b4c2edd2b478 (patch) | |
tree | b73ce595926f6db58a206968666e7d3a0978feaf /packages/taler-wallet-webextension/src/components/Banner.stories.tsx | |
parent | 2150f3d96b25772dd608e245cd3508f857478c5b (diff) | |
download | wallet-core-4d66f774c3ad4040f522d2ec52b5b4c2edd2b478.tar.xz |
pending operations
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/Banner.stories.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/Banner.stories.tsx | 68 |
1 files changed, 66 insertions, 2 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx index 136302166..665b0de6f 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx @@ -20,7 +20,10 @@ */ import { Banner } from "./Banner"; -import { Fragment, h } from "preact"; +import { Fragment, h, VNode } from "preact"; +import { Avatar } from "../mui/Avatar"; +import { Icon } from "./styled"; +import { Typography } from "../mui/Typography"; export default { title: "mui/banner", @@ -44,11 +47,72 @@ function Wrapper({ children }: any) { </div> ); } +function SignalWifiOffIcon({ ...rest }: any): VNode { + return <Icon {...rest} />; +} export const BasicExample = () => ( <Fragment> <Wrapper> - <Banner /> + <p> + Example taken from: + <a + target="_blank" + rel="noreferrer" + href="https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df" + > + https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df + </a> + </p> + <Banner + elements={[ + { + icon: <SignalWifiOffIcon />, + description: ( + <Typography> + You have lost connection to the internet. This app is offline. + </Typography> + ), + }, + ]} + confirm={{ + label: "turn on wifi", + action: () => { + return null; + }, + }} + /> + </Wrapper> + </Fragment> +); + +export const PendingOperation = () => ( + <Fragment> + <Wrapper> + <Banner + title="PENDING TRANSACTIONS" + style={{ backgroundColor: "lightblue", padding: 8 }} + elements={[ + { + icon: ( + <Avatar + style={{ + border: "solid blue 1px", + color: "blue", + boxSizing: "border-box", + }} + > + P + </Avatar> + ), + description: ( + <Typography> + <b>EUR 37.95</b> - 5 feb 2022 + </Typography> + ), + }, + ]} + /> </Wrapper> </Fragment> ); |