docs(Box): update elevation docs and examples

Co-Authored-By: [email protected] <[email protected]>
kiwicom · Jan 10, 2025 · 16f527d · 16f527d
1 parent a3bf812
commit 16f527d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/docs/src/__examples__/Box/DEFAULT.tsx b/docs/src/__examples__/Box/DEFAULT.tsx
@@ -101,7 +101,15 @@ export default {
         {
           name: "elevation",
           type: "select",
-          options: ["action", "fixed", "overlay", "raised", "fixedReverse", "raisedReverse"],
+          options: [
+            "fixed",
+            "fixedReverse",
+            "level1",
+            "level2",
+            "level3",
+            "level3Reverse",
+            "level4",
+          ],
           defaultValue: "",
         },
         {

diff --git a/packages/orbit-components/src/Box/README.md b/packages/orbit-components/src/Box/README.md
@@ -150,6 +150,23 @@ All this properties - objects have the some own properties and none is required.
 | `"level3Reverse"` |
 | `"level4"`        |
 
+#### Examples
+
+```jsx
+// Fixed elevation - useful for elements that stay in place
+<Box elevation="fixed">Fixed elevation box</Box>
+
+// Reverse fixed elevation - reversed shadow direction
+<Box elevation="fixedReverse">Fixed reverse elevation box</Box>
+
+// Level 1-4 elevations - increasing shadow depths
+<Box elevation="level1">Subtle elevation</Box>
+<Box elevation="level2">Medium elevation</Box>
+<Box elevation="level3">Prominent elevation</Box>
+<Box elevation="level3Reverse">Prominent elevation (reversed)</Box>
+<Box elevation="level4">Highest elevation</Box>
+```
+
 ### spacingObject
 
 | key        | value                           |