diff options
author | Sebastian <sebasjm@gmail.com> | 2022-06-09 13:37:33 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-06-09 13:37:33 -0300 |
commit | ff49e3477e155b94e752c516cf58fdea1ca19d54 (patch) | |
tree | c47cdb74081caf6e703306f8f9f15669d1cdd30b /packages/taler-wallet-webextension/src/components/Amount.stories.tsx | |
parent | eb8bcc95324f3282003b4870d890d0b9f570ee46 (diff) | |
download | wallet-core-ff49e3477e155b94e752c516cf58fdea1ca19d54.tar.xz |
format amount so it is align to fractional digitls
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/Amount.stories.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/Amount.stories.tsx | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Amount.stories.tsx b/packages/taler-wallet-webextension/src/components/Amount.stories.tsx new file mode 100644 index 000000000..caf35d57e --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/Amount.stories.tsx @@ -0,0 +1,114 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { styled } from "@linaria/react"; +import { Fragment, h, VNode } from "preact"; +import { Amount } from "./Amount.js"; + +export default { + title: "components/amount", + component: Amount, +}; + +const Table = styled.table` + td { + padding: 4px; + } + td { + border-bottom: 1px solid black; + } +`; + +function ProductTable( + prods: string[], + AmountRender: (p: { value: string; index: number }) => VNode = Amount, +): VNode { + return ( + <Table> + <tr> + <td>product</td> + <td>price</td> + </tr> + {prods.map((value, i) => { + return ( + <tr key={i}> + <td>p{i}</td> + <td> + <AmountRender value={value} index={i} /> + {/* <Amount value={value} fracSize={fracSize} /> */} + </td> + </tr> + ); + })} + </Table> + ); +} + +export const WithoutFixedSizeDefault = (): VNode => + ProductTable(["ARS:19", "ARS:0.1", "ARS:10.02"]); + +export const WithFixedSizeZero = (): VNode => + ProductTable(["ARS:19", "ARS:0.1", "ARS:10.02"], ({ value }) => { + return <Amount value={value} maxFracSize={0} />; + }); + +export const WithFixedSizeFour = (): VNode => + ProductTable( + ["ARS:19", "ARS:0.1", "ARS:10.02", "ARS:10.0123", "ARS:10.0123123"], + ({ value }) => { + return <Amount value={value} maxFracSize={4} />; + }, + ); + +export const WithFixedSizeFourNegative = (): VNode => + ProductTable( + ["ARS:19", "ARS:0.1", "ARS:10.02", "ARS:10.0123", "ARS:10.0123123"], + ({ value, index }) => { + return ( + <Amount value={value} maxFracSize={4} negative={index % 2 === 0} /> + ); + }, + ); + +export const WithFixedSizeFourOverflow = (): VNode => + ProductTable( + ["ARS:19", "ARS:0.1", "ARS:10123123.02", "ARS:10.0123", "ARS:10.0123123"], + ({ value, index }) => { + return ( + <Amount value={value} maxFracSize={4} negative={index % 2 === 0} /> + ); + }, + ); + +export const WithFixedSizeFourAccounting = (): VNode => + ProductTable( + ["ARS:19", "ARS:0.1", "ARS:10123123.02", "ARS:10.0123", "ARS:10.0123123"], + ({ value, index }) => { + return ( + <Amount + value={value} + signType="accounting" + maxFracSize={4} + negative={index % 2 === 0} + /> + ); + }, + ); |