From fe64e10b43523c606de243cd2bc36cda07588b38 Mon Sep 17 00:00:00 2001
From: ofreyssinet-ledger
 <91890529+ofreyssinet-ledger@users.noreply.github.com>
Date: Thu, 18 Nov 2021 09:25:02 +0100
Subject: [PATCH] Display "space[index+1]" for spacing story (#86)

---
 .../storybook/stories/Particles/Spacing.stories.tsx       | 7 +++++--
 packages/react/src/styles/Spacing.stories.tsx             | 8 +++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/native/storybook/stories/Particles/Spacing.stories.tsx b/packages/native/storybook/stories/Particles/Spacing.stories.tsx
index 93448c95..93c8672b 100644
--- a/packages/native/storybook/stories/Particles/Spacing.stories.tsx
+++ b/packages/native/storybook/stories/Particles/Spacing.stories.tsx
@@ -15,10 +15,13 @@ const SpacingStory = () => {
       contentContainerStyle={{ alignItems: "center", paddingVertical: 20 }}
       style={{ width: "100%" }}
     >
-      {space.map((value) => (
+      {space.map((value, index) => (
         <Flex mb={4} width="90%" key={value}>
-          <Text variant="subtitle" color={theme.colors.palette.neutral.c100}>
+          <Text variant="small" color={theme.colors.palette.neutral.c100}>
             {value}
+            <Text ml={4} variant="small" color="palette.neutral.c70">
+              space[{index + 1}]
+            </Text>
           </Text>
           <View
             style={{
diff --git a/packages/react/src/styles/Spacing.stories.tsx b/packages/react/src/styles/Spacing.stories.tsx
index c187be85..59a06611 100644
--- a/packages/react/src/styles/Spacing.stories.tsx
+++ b/packages/react/src/styles/Spacing.stories.tsx
@@ -35,7 +35,13 @@ export const Spacing = (): JSX.Element => {
     <Flex flexDirection="column" rowGap="24px">
       {space.map((value, index) => (
         <SpaceRow key={value} onClick={() => handleClick(index)}>
-          <Text variant="subtitle" style={{ minWidth: "5ch" }}>{`${value}px`}</Text>
+          <Text variant="small" style={{ minWidth: "5ch" }}>
+            {`${value}px`}
+            <br />
+            <Text variant="small" color="palette.neutral.c70">
+              space[{index + 1}]
+            </Text>
+          </Text>
           <Flex
             flexGrow={1}
             style={{