add size variants to Step (#552)

* add size variants to Size * u * Create soft-gorillas-tap.md * u
status-im · Apr 29, 2024 · 7093144 · 7093144
1 parent 8afb049
commit 7093144
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 21 deletions.
diff --git a/.changeset/soft-gorillas-tap.md b/.changeset/soft-gorillas-tap.md
@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+add size variants to Step
diff --git a/packages/components/src/step/step.stories.tsx b/packages/components/src/step/step.stories.tsx
@@ -56,20 +56,39 @@ export const AllVariants: Story = {
   args: {},
   render: () => (
     <Stack space flexDirection="row">
-      <Stack space alignItems="center">
-        <Step type="neutral" value={1} />
-        <Step type="neutral" value={10} />
-        <Step type="neutral" value={999} />
+      <Stack space flexDirection="column">
+        <Stack space alignItems="center">
+          <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 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 size={18} type="active" value={1} />
+          <Step size={18} type="active" value={10} />
+          <Step size={18} type="active" value={999} />
+        </Stack>
       </Stack>
-      <Stack space alignItems="center">
-        <Step type="complete" value={1} />
-        <Step type="complete" value={10} />
-        <Step type="complete" value={999} />
-      </Stack>
-      <Stack space alignItems="center">
-        <Step type="active" value={1} />
-        <Step type="active" value={10} />
-        <Step type="active" value={999} />
+      <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>
   ),

diff --git a/packages/components/src/step/step.tsx b/packages/components/src/step/step.tsx
@@ -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,24 +31,34 @@ export { Step }
 export type { Props as StepProps }
 
 const Base = styled(Stack, {
-  paddingVertical: 1,
   minWidth: 20,
   maxWidth: 28,
   display: 'inline-flex',
   justifyContent: 'center',
   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, {
   backgroundColor: '$white-100',
   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,
+      },
+    },
   },
 })
 

diff --git a/packages/components/src/tabs/tabs.tsx b/packages/components/src/tabs/tabs.tsx
@@ -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}