feat: sdkfsuhdfwq

hirosystems · Oct 22, 2024 · 2f3afc3 · 2f3afc3
1 parent d81a69c
commit 2f3afc3
Showing 1 changed file with 69 additions and 9 deletions.
diff --git a/src/stories/Elevation.stories.tsx b/src/stories/Elevation.stories.tsx
@@ -28,12 +28,9 @@ const ElevationDemo = () => {
               alignItems="center"
               justifyContent="center"
             >
-              <Text>{elevationName}</Text>
+              <Text color="black">{elevationName}</Text>
             </Box>
-            <Text>
-              {elevationName}:{' '}
-              {(elevationValue as any)[colorMode === 'light' ? 'default' : '_dark']}
-            </Text>
+            <Text>{(elevationValue as any)[colorMode === 'light' ? 'default' : '_dark']}</Text>
           </Flex>
         ))}
       </Flex>
@@ -50,11 +47,9 @@ const ElevationDemo = () => {
               alignItems="center"
               justifyContent="center"
             >
-              <Text>{elevationName}</Text>
+              <Text color="white">{elevationName}</Text>
             </Box>
-            <Text color="white">
-              {elevationName}: {(elevationValue as any)._dark}
-            </Text>
+            <Text color="white">{(elevationValue as any)._dark}</Text>
           </Flex>
         ))}
       </Flex>
@@ -67,6 +62,71 @@ const meta = {
   component: ElevationDemo,
   parameters: {
     layout: 'padded',
+    docs: {
+      source: {
+        code: `
+          //Showing ElevationDemo for light mode. For dark mode, use _dark instead of default.
+   const ElevationDemo = () => (
+  <Stack spacing={8}>
+    <Text fontSize="2xl" fontWeight="bold">Elevation Showcase</Text>
+    
+    <Flex direction="column" gap={4}>
+      <Text fontSize="xl" fontWeight="semibold">elevation1</Text>
+      <Box 
+        boxShadow="elevation1" 
+        p={4} 
+        borderRadius="md" 
+        bg="surface"
+        width="200px"
+        height="100px"
+      >
+        <Text color='white'>elevation1</Text>
+        <Text fontSize="sm" color="textSubdued">
+            0 2px 6px rgba(183, 180, 176, 0.2)
+        </Text>
+      </Box>
+    </Flex>
+
+    <Flex direction="column" gap={4}>
+      <Text fontSize="xl" fontWeight="semibold">elevation2</Text>
+      <Box 
+        boxShadow="elevation2" 
+        p={4} 
+        borderRadius="md" 
+        bg="surface"
+        width="200px"
+        height="100px"
+      >
+        <Text color='white'>elevation2</Text>
+        <Text fontSize="sm" color="textSubdued">
+            0 2px 6px rgba(183, 180, 176, 0.2)
+        </Text>
+      </Box>
+    </Flex>
+
+    <Flex direction="column" gap={4}>
+      <Text fontSize="xl" fontWeight="semibold">elevation3</Text>
+      <Box 
+        boxShadow="elevation3" 
+        p={4} 
+        borderRadius="md" 
+        bg="surface"
+        width="200px"
+        height="100px"
+      >
+        <Text color='white'>elevation3</Text>
+        <Text fontSize="sm" color="textSubdued">
+            0 2px 6px rgba(183, 180, 176, 0.2)
+        </Text>
+      </Box>
+    </Flex>
+  </Stack>
+);
+              `,
+        language: 'tsx',
+        type: 'auto',
+      },
+    },
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof ElevationDemo>;