Update Buttons storybook section
This commit is contained in:
Eric Bailey
@@ -1,3 +1,4 @@
|
||||
import {Fragment} from 'react'
|
||||
import {View} from 'react-native'
|
||||
|
||||
import {atoms as a} from '#/alf'
|
||||
@@ -5,159 +6,81 @@ 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',
|
||||
'negative_secondary',
|
||||
].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.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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user