Display "space[index+1]" for spacing story (#86)

LedgerHQ · Nov 18, 2021 · fe64e10 · fe64e10 · vercel · Nov 18, 2021
1 parent 71b0c15
commit fe64e10
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git 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
@@ -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={{