diff options
Diffstat (limited to 'src/view/screens/Storybook/Buttons.tsx')
| -rw-r--r-- | src/view/screens/Storybook/Buttons.tsx | 212 |
1 files changed, 68 insertions, 144 deletions
diff --git a/src/view/screens/Storybook/Buttons.tsx b/src/view/screens/Storybook/Buttons.tsx index eaf8bba7e..0db062913 100644 --- a/src/view/screens/Storybook/Buttons.tsx +++ b/src/view/screens/Storybook/Buttons.tsx @@ -1,3 +1,4 @@ +import {Fragment} from 'react' import {View} from 'react-native' import {atoms as a} from '#/alf' @@ -5,159 +6,82 @@ import { Button, type ButtonColor, ButtonIcon, + type ButtonSize, ButtonText, } from '#/components/Button' import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' -import {H1} from '#/components/Typography' +import {Text} from '#/components/Typography' export function Buttons() { return ( <View style={[a.gap_md]}> - <H1>Buttons</H1> + <Text style={[a.font_heavy, a.text_5xl]}>Buttons</Text> - <View style={[a.flex_row, a.flex_wrap, a.gap_md, a.align_start]}> - {[ - 'primary', - 'secondary', - 'secondary_inverted', - 'negative', - 'negative_secondary', - ].map(color => ( - <View key={color} style={[a.gap_md, a.align_start]}> - <Button - color={color as ButtonColor} - size="large" - label="Click here"> - <ButtonText>Button</ButtonText> - </Button> - <Button - disabled - color={color as ButtonColor} - size="large" - label="Click here"> - <ButtonText>Button</ButtonText> - </Button> - </View> - ))} - </View> - - <View style={[a.flex_wrap, a.gap_md, a.align_start]}> - <Button color="primary" size="large" label="Link out"> - <ButtonText>Button</ButtonText> - </Button> - <Button color="primary" size="large" label="Link out"> - <ButtonText>Button</ButtonText> - <ButtonIcon icon={Globe} position="right" /> - </Button> - - <Button color="primary" size="small" label="Link out"> - <ButtonText>Button</ButtonText> - </Button> - <Button color="primary" size="small" label="Link out"> - <ButtonText>Button</ButtonText> - <ButtonIcon icon={Globe} position="right" /> - </Button> - - <Button color="primary" size="tiny" label="Link out"> - <ButtonIcon icon={Globe} position="left" /> - <ButtonText>Button</ButtonText> - </Button> - </View> - - <View style={[a.flex_row, a.gap_md, a.align_center]}> - <Button color="primary" size="large" label="Link out"> - <ButtonText>Button</ButtonText> - </Button> - <Button color="primary" size="large" label="Link out"> - <ButtonText>Button</ButtonText> - <ButtonIcon icon={Globe} position="right" /> - </Button> - <Button color="primary" size="large" label="Link out"> - <ButtonText>Button</ButtonText> - <ButtonIcon icon={Globe} position="right" size="lg" /> - </Button> - <Button color="primary" size="large" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="large" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} size="lg" /> - </Button> - </View> - - <View style={[a.flex_row, a.gap_md, a.align_center]}> - <Button color="primary" size="small" label="Link out"> - <ButtonText>Button</ButtonText> - </Button> - <Button color="primary" size="small" label="Link out"> - <ButtonText>Button</ButtonText> - <ButtonIcon icon={Globe} position="right" /> - </Button> - <Button color="primary" size="small" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="small" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} size="lg" /> - </Button> - </View> - - <View style={[a.flex_row, a.gap_md, a.align_center]}> - <Button color="primary" size="tiny" label="Link out"> - <ButtonText>Button</ButtonText> - </Button> - <Button color="primary" size="tiny" label="Link out"> - <ButtonText>Button</ButtonText> - <ButtonIcon icon={Globe} position="right" /> - </Button> - <Button color="primary" size="tiny" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="tiny" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} size="md" /> - </Button> - </View> - - <View style={[a.flex_row, a.gap_md, a.align_center]}> - <Button color="primary" size="large" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="small" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="tiny" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="large" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="small" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="tiny" shape="round" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - </View> - - <View style={[a.flex_row, a.gap_md, a.align_start]}> - <Button color="primary" size="large" shape="square" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="small" shape="square" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="tiny" shape="square" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="large" shape="square" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="small" shape="square" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - <Button color="primary" size="tiny" shape="square" label="Link out"> - <ButtonIcon icon={ChevronLeft} /> - </Button> - </View> + {[ + 'primary', + 'secondary', + 'secondary_inverted', + 'negative', + 'primary_subtle', + 'negative_subtle', + ].map(color => ( + <Fragment key={color}> + {['tiny', 'small', 'large'].map(size => ( + <Fragment key={size}> + <Text style={[a.font_heavy, a.text_2xl]}> + color={color} size={size} + </Text> + <View style={[a.flex_row, a.align_start, a.gap_md]}> + <Button + color={color as ButtonColor} + size={size as ButtonSize} + label="Click here"> + <ButtonText>Button</ButtonText> + </Button> + <Button + disabled + color={color as ButtonColor} + size={size as ButtonSize} + label="Click here"> + <ButtonText>Button</ButtonText> + </Button> + <Button + color={color as ButtonColor} + size={size as ButtonSize} + shape="round" + label="Click here"> + <ButtonIcon icon={ChevronLeft} /> + </Button> + <Button + color={color as ButtonColor} + size={size as ButtonSize} + shape="square" + label="Click here"> + <ButtonIcon icon={ChevronLeft} /> + </Button> + </View> + <View style={[a.flex_row, a.gap_md]}> + <Button + color={color as ButtonColor} + size={size as ButtonSize} + label="Click here"> + <ButtonIcon icon={Globe} position="left" /> + <ButtonText>Button</ButtonText> + </Button> + <Button + disabled + color={color as ButtonColor} + size={size as ButtonSize} + label="Click here"> + <ButtonText>Button</ButtonText> + <ButtonIcon icon={Globe} position="right" /> + </Button> + </View> + </Fragment> + ))} + </Fragment> + ))} </View> ) } |