status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add size variants to Step (#552) 

* add size variants to Size

* u

* Create soft-gorillas-tap.md

* u
This commit is contained in:
Felicio Mununga 2024-04-29 08:02:32 +02:00 committed by GitHub
parent 8afb049840
commit 7093144ceb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 70 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/soft-gorillas-tap.md Normal file
View File

@ -0,0 +1,5 @@
---
"@status-im/components": patch
---
add size variants to Step

37
packages/components/src/step/step.stories.tsx
View File

@ -56,20 +56,39 @@ export const AllVariants: Story = {
args: {}, args: {},
render: () => ( render: () => (
<Stack space flexDirection="row"> <Stack space flexDirection="row">
<Stack space flexDirection="column">
<Stack space alignItems="center"> <Stack space alignItems="center">
<Step type="neutral" value={1} /> <Step size={18} type="neutral" value={1} />
<Step type="neutral" value={10} /> <Step size={18} type="neutral" value={10} />
<Step type="neutral" value={999} /> <Step size={18} type="neutral" value={999} />
</Stack> </Stack>
<Stack space alignItems="center"> <Stack space alignItems="center">
<Step type="complete" value={1} /> <Step size={18} type="complete" value={1} />
<Step type="complete" value={10} /> <Step size={18} type="complete" value={10} />
<Step type="complete" value={999} /> <Step size={18} type="complete" value={999} />
</Stack> </Stack>
<Stack space alignItems="center"> <Stack space alignItems="center">
<Step type="active" value={1} /> <Step size={18} type="active" value={1} />
<Step type="active" value={10} /> <Step size={18} type="active" value={10} />
<Step type="active" value={999} /> <Step size={18} type="active" value={999} />
</Stack>
</Stack>
<Stack space flexDirection="column">
<Stack space alignItems="center">
<Step size={22} type="neutral" value={1} />
<Step size={22} type="neutral" value={10} />
<Step size={22} type="neutral" value={999} />
</Stack>
<Stack space alignItems="center">
<Step size={22} type="complete" value={1} />
<Step size={22} type="complete" value={10} />
<Step size={22} type="complete" value={999} />
</Stack>
<Stack space alignItems="center">
<Step size={22} type="active" value={1} />
<Step size={22} type="active" value={10} />
<Step size={22} type="active" value={999} />
</Stack>
</Stack> </Stack>
</Stack> </Stack>
), ),

37
packages/components/src/step/step.tsx
View File

@ -9,15 +9,16 @@ export type StepVariants = 'neutral' | 'complete' | 'active'
type Props = { type Props = {
value: number value: number
size?: 18 | 22
type?: StepVariants type?: StepVariants
} }
const Step = (props: Props) => { const Step = (props: Props) => {
const { value, type = 'neutral' } = props const { size = 18, value, type = 'neutral' } = props
return ( return (
<Base> <Base size={size}>
<Content type={type}> <Content size={size} type={type}>
<Text size={11} weight="medium" color={textColors[type]}> <Text size={11} weight="medium" color={textColors[type]}>
{value} {value}
</Text> </Text>
@ -30,7 +31,6 @@ export { Step }
export type { Props as StepProps } export type { Props as StepProps }
const Base = styled(Stack, { const Base = styled(Stack, {
paddingVertical: 1,
minWidth: 20, minWidth: 20,
maxWidth: 28, maxWidth: 28,
display: 'inline-flex', display: 'inline-flex',
@ -38,6 +38,20 @@ const Base = styled(Stack, {
alignItems: 'center', alignItems: 'center',
flexBasis: 'fit-content', flexBasis: 'fit-content',
width: 'fit-content', width: 'fit-content',
variants: {
size: {
18: {
paddingVertical: 1,
minWidth: 20,
maxWidth: 28,
},
22: {
minWidth: 24,
maxWidth: 32,
},
},
},
}) })
const Content = styled(Stack, { const Content = styled(Stack, {
@ -45,9 +59,6 @@ const Content = styled(Stack, {
paddingHorizontal: 3, paddingHorizontal: 3,
paddingVertical: 0, paddingVertical: 0,
borderRadius: '$6', borderRadius: '$6',
height: 18,
minWidth: 18,
maxWidth: 28,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
borderWidth: 1, borderWidth: 1,
@ -66,6 +77,18 @@ const Content = styled(Stack, {
backgroundColor: '$blue/10', backgroundColor: '$blue/10',
}, },
}, },
size: {
18: {
height: 18,
minWidth: 18,
maxWidth: 28,
},
22: {
height: 22,
minWidth: 22,
maxWidth: 32,
},
},
}, },
}) })

4
packages/components/src/tabs/tabs.tsx
View File

@ -119,7 +119,9 @@ const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
color, color,
})} })}
{props.type === 'step' && <Step type="complete" value={props.step} />} {props.type === 'step' && (
<Step size={18} type="complete" value={props.step} />
)}
<Text size={textSize} weight="medium" color={color}> <Text size={textSize} weight="medium" color={color}>
{children} {children}