diff options
author | Sebastian <sebasjm@gmail.com> | 2022-03-10 23:13:10 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-03-10 23:14:10 -0300 |
commit | 2150f3d96b25772dd608e245cd3508f857478c5b (patch) | |
tree | 7f449ec4df0f90c46774d1934ebee2eabb52cec7 /packages/taler-wallet-webextension/src/mui/Grid.stories.tsx | |
parent | 60a50babd14de6efbe16d9b427af85acc9da76e9 (diff) | |
download | wallet-core-2150f3d96b25772dd608e245cd3508f857478c5b.tar.xz |
grid implementation
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui/Grid.stories.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/mui/Grid.stories.tsx | 192 |
1 files changed, 192 insertions, 0 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx new file mode 100644 index 000000000..3c9361326 --- /dev/null +++ b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx @@ -0,0 +1,192 @@ +/* + This file is part of GNU Taler + (C) 2021 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 { Grid } from "./Grid"; +import { Fragment, h } from "preact"; + +export default { + title: "mui/grid", + component: Grid, +}; + +function Item({ children }: any) { + return ( + <div + style={{ + padding: 10, + backgroundColor: "white", + textAlign: "center", + color: "back", + }} + > + {children} + </div> + ); +} + +function Wrapper({ children }: any) { + return ( + <div + style={{ + display: "flex", + backgroundColor: "lightgray", + padding: 10, + width: "100%", + // width: 400, + // height: 400, + justifyContent: "center", + }} + > + <div style={{ flexGrow: 1 }}>{children}</div> + </div> + ); +} + +export const BasicExample = () => ( + <Fragment> + <Wrapper> + <Grid container spacing={2}> + <Grid item xs={8}> + <Item>xs=8</Item> + </Grid> + <Grid item xs={4}> + <Item>xs=4</Item> + </Grid> + <Grid item xs={4}> + <Item>xs=4</Item> + </Grid> + <Grid item xs={8}> + <Item>xs=8</Item> + </Grid> + </Grid> + </Wrapper> + <Wrapper> + <Grid container spacing={2}> + <Grid item xs={6} md={8}> + <Item>xs=6 md=8</Item> + </Grid> + <Grid item xs={6} md={4}> + <Item>xs=6 md=4</Item> + </Grid> + <Grid item xs={6} md={4}> + <Item>xs=6 md=4</Item> + </Grid> + <Grid item xs={6} md={8}> + <Item>xs=6 md=8</Item> + </Grid> + </Grid> + </Wrapper> + </Fragment> +); + +export const Responsive12ColumnsSize = () => ( + <Fragment> + <Wrapper> + <p>Item size is responsive: xs=6 sm=4 md=2</p> + <Grid container spacing={1} columns={12}> + {Array.from(Array(6)).map((_, index) => ( + <Grid item xs={6} sm={4} md={2} key={index}> + <Item>item {index}</Item> + </Grid> + ))} + </Grid> + </Wrapper> + <Wrapper> + <p>Item size is fixed</p> + <Grid container spacing={1} columns={12}> + {Array.from(Array(6)).map((_, index) => ( + <Grid item xs={6} key={index}> + <Item>item {index}</Item> + </Grid> + ))} + </Grid> + </Wrapper> + </Fragment> +); + +export const Responsive12Spacing = () => ( + <Fragment> + <Wrapper> + <p>Item space is responsive: xs=1 sm=2 md=3</p> + <Grid container spacing={{ xs: 2, sm: 4, md: 6 }} columns={12}> + {Array.from(Array(6)).map((_, index) => ( + <Grid item xs={6} key={index}> + <Item>item {index}</Item> + </Grid> + ))} + </Grid> + </Wrapper> + <Wrapper> + <p>Item space is fixed</p> + <Grid container spacing={1} columns={12}> + {Array.from(Array(6)).map((_, index) => ( + <Grid item xs={6} key={index}> + <Item>item {index}</Item> + </Grid> + ))} + </Grid> + </Wrapper> + + <Wrapper> + <p>Item row space is responsive: xs=6 sm=4 md=1</p> + <Grid + container + rowSpacing={{ xs: 6, sm: 3, md: 1 }} + columnSpacing={1} + columns={12} + > + {Array.from(Array(6)).map((_, index) => ( + <Grid item xs={6} key={index}> + <Item>item {index}</Item> + </Grid> + ))} + </Grid> + </Wrapper> + <Wrapper> + <p>Item col space is responsive: xs=6 sm=3 md=1</p> + <Grid + container + columnSpacing={{ xs: 6, sm: 3, md: 1 }} + rowSpacing={1} + columns={12} + > + {Array.from(Array(6)).map((_, index) => ( + <Grid item xs={6} key={index}> + <Item>item {index}</Item> + </Grid> + ))} + </Grid> + </Wrapper> + </Fragment> +); + +export const Example = () => ( + <Wrapper> + <p>Item row space is responsive: xs=6 sm=4 md=1</p> + <Grid container rowSpacing={3} columnSpacing={1} columns={12}> + {Array.from(Array(6)).map((_, index) => ( + <Grid item xs={6} key={index}> + <Item>item {index}</Item> + </Grid> + ))} + </Grid> + </Wrapper> +); |