From 7093144cebe51d0b3f53fde37fdb488fcf889744 Mon Sep 17 00:00:00 2001
From: Felicio Mununga <felicio@users.noreply.github.com>
Date: Mon, 29 Apr 2024 08:02:32 +0200
Subject: [PATCH] add size variants to Step (#552)

* add size variants to Size

* u

* Create soft-gorillas-tap.md

* u
---
 .changeset/soft-gorillas-tap.md               |  5 +++
 packages/components/src/step/step.stories.tsx | 45 +++++++++++++------
 packages/components/src/step/step.tsx         | 37 ++++++++++++---
 packages/components/src/tabs/tabs.tsx         |  4 +-
 4 files changed, 70 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/soft-gorillas-tap.md

diff --git a/.changeset/soft-gorillas-tap.md b/.changeset/soft-gorillas-tap.md
new file mode 100644
index 000000000..5b4567a41
--- /dev/null
+++ 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
index 1aa1f45b0..ae4f9e99f 100644
--- 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
index 27bfbe5ae..3c3d8d27c 100644
--- 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,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,
+      },
+    },
   },
 })
 
diff --git a/packages/components/src/tabs/tabs.tsx b/packages/components/src/tabs/tabs.tsx
index e0471ca24..f58fbc439 100644
--- 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}