chore: use tokens in layout stories (#2167)

Frontify · Jan 20, 2025 · 2cacc39 · 2cacc39
1 parent 8616752
commit 2cacc39
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 14 deletions.
diff --git a/packages/components/src/components/Box/Box.stories.tsx b/packages/components/src/components/Box/Box.stories.tsx
@@ -17,8 +17,8 @@ const meta: Meta<typeof Box> = {
         },
     },
     args: {
-        width: '100px',
-        height: '100px',
+        width: 25,
+        height: 25,
     },
 };
 export default meta;
@@ -33,10 +33,10 @@ export const Default: Story = {
     },
 };
 
-export const WithSizeToken: Story = {
+export const PixelValues: Story = {
     args: {
-        width: 25,
-        height: 25,
+        width: '100px',
+        height: '100px',
     },
     render: (args) => {
         return (

diff --git a/packages/components/src/components/Flex/Flex.stories.tsx b/packages/components/src/components/Flex/Flex.stories.tsx
@@ -14,6 +14,7 @@ const DecorativeBox = (props: ComponentProps<typeof Box>) => (
         <DecorativeContent />
     </Box>
 );
+DecorativeBox.displayName = 'DecorativeBox';
 
 type Story = StoryObj<typeof Flex>;
 const meta: Meta<typeof Flex> = {
@@ -26,7 +27,7 @@ const meta: Meta<typeof Flex> = {
         },
     },
     args: {
-        gap: '20px',
+        gap: 4,
         direction: 'column',
     },
 };
@@ -36,14 +37,14 @@ export const Default: Story = {
     render: (args) => {
         return (
             <Flex {...args}>
-                <Flex gapX="10px">
+                <Flex gapX={3}>
                     <DecorativeBox />
                     <DecorativeBox />
                     <DecorativeBox />
                     <DecorativeBox />
                     <DecorativeBox />
                 </Flex>
-                <Flex gapX="10px">
+                <Flex gapX={3}>
                     <DecorativeBox />
                     <DecorativeBox />
                     <DecorativeBox />
@@ -55,11 +56,37 @@ export const Default: Story = {
     },
 };
 
+export const PixelValues: Story = {
+    render: (args) => {
+        return (
+            <Flex {...args}>
+                <Flex gapX="12px">
+                    <DecorativeBox />
+                    <DecorativeBox />
+                    <DecorativeBox />
+                    <DecorativeBox />
+                    <DecorativeBox />
+                </Flex>
+                <Flex gapX="12px">
+                    <DecorativeBox />
+                    <DecorativeBox />
+                    <DecorativeBox />
+                    <DecorativeBox />
+                    <DecorativeBox />
+                </Flex>
+            </Flex>
+        );
+    },
+    args: {
+        gap: '16px',
+    },
+};
+
 export const Nested: Story = {
     render: (args) => {
         return (
             <Flex {...args}>
-                <Flex gapX="10px">
+                <Flex gapX={3}>
                     <DecorativeBox />
                     <DecorativeBox />
                     <DecorativeBox />
@@ -73,13 +100,13 @@ export const Nested: Story = {
                         <DecorativeBox />
                     </Flex>
                 </Flex>
-                <Flex p="20px">
+                <Flex p={5}>
                     <DecorativeBox />
                     <DecorativeBox />
                     <DecorativeBox />
                     <DecorativeBox />
                     <DecorativeBox />
-                    <Flex gapX="10px">
+                    <Flex gapX={3}>
                         <DecorativeBox />
                         <DecorativeBox />
                         <DecorativeBox />
@@ -104,7 +131,7 @@ export const Responsive: Story = {
             >
                 <Flex
                     gapX={{ sm: '10px' }}
-                    gapY={{ base: '10px', sm: '0px' }}
+                    gapY={{ base: '10px', sm: 0 }}
                     direction={{
                         base: 'column',
                         sm: 'row',
@@ -119,7 +146,7 @@ export const Responsive: Story = {
 
                 <Flex
                     gapX={{ sm: '10px' }}
-                    gapY={{ base: '10px', sm: '0px' }}
+                    gapY={{ base: '10px', sm: 0 }}
                     direction={{
                         base: 'column',
                         sm: 'row',

diff --git a/packages/components/src/components/Grid/Grid.stories.tsx b/packages/components/src/components/Grid/Grid.stories.tsx
@@ -14,6 +14,7 @@ const DecorativeBox = (props: ComponentProps<typeof Box>) => (
         <DecorativeContent />
     </Box>
 );
+DecorativeBox.displayName = 'DecorativeBox';
 
 type Story = StoryObj<typeof Grid>;
 const meta: Meta<typeof Grid> = {
@@ -27,7 +28,7 @@ const meta: Meta<typeof Grid> = {
     },
     args: {
         columns: 'repeat(3, 1fr)',
-        gap: '16px',
+        gap: 4,
     },
 };
 export default meta;