From 2f3afc34f9bfedd4870f17556b9b518a9da01424 Mon Sep 17 00:00:00 2001
From: Nicholas Barnett <n-barnett@hotmail.com>
Date: Tue, 22 Oct 2024 18:45:50 -0500
Subject: [PATCH] feat: sdkfsuhdfwq

---
 src/stories/Elevation.stories.tsx | 78 +++++++++++++++++++++++++++----
 1 file changed, 69 insertions(+), 9 deletions(-)

diff --git a/src/stories/Elevation.stories.tsx b/src/stories/Elevation.stories.tsx
index 5a81ec386..acff37ae8 100644
--- 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>;