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: {},
render: () => (
<Stack space flexDirection="row">
<Stack space flexDirection="column">
<Stack space alignItems="center">
<Step type="neutral" value={1} />
<Step type="neutral" value={10} />
<Step type="neutral" value={999} />
<Step size={18} type="neutral" value={1} />
<Step size={18} type="neutral" value={10} />
<Step size={18} type="neutral" value={999} />
</Stack>
<Stack space alignItems="center">
<Step type="complete" value={1} />
<Step type="complete" value={10} />
<Step type="complete" value={999} />
<Step size={18} type="complete" value={1} />
<Step size={18} type="complete" value={10} />
<Step size={18} type="complete" value={999} />
</Stack>
<Stack space alignItems="center">
<Step type="active" value={1} />
<Step type="active" value={10} />
<Step type="active" value={999} />
<Step size={18} type="active" value={1} />
<Step size={18} type="active" value={10} />
<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>
),

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

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