feat(Box): add new values for elevation prop and deprecate others

kiwicom · Aug 6, 2024 · 38af8f1 · 38af8f1
1 parent fb5f758
commit 38af8f1
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 42 deletions.
diff --git a/packages/orbit-components/src/Box/Box.stories.tsx b/packages/orbit-components/src/Box/Box.stories.tsx
@@ -60,12 +60,13 @@ enum TEXT_ALIGN {
 }
 
 enum ELEVATION {
-  ACTION = "action",
   FIXED = "fixed",
-  RAISED = "raised",
-  OVERLAY = "overlay",
   FIXEDREVERSE = "fixedReverse",
-  RAISEDREVERSE = "raisedReverse",
+  LEVEL_1 = "level1",
+  LEVEL_2 = "level2",
+  LEVEL_3 = "level3",
+  LEVEL_3REVERSE = "level3Reverse",
+  LEVEL_4 = "level4",
 }
 
 enum BORDER_RADIUS {
@@ -416,7 +417,7 @@ export const Elevation = ({ elevation }) => {
 };
 
 Elevation.args = {
-  elevation: ELEVATION.ACTION,
+  elevation: ELEVATION.LEVEL_1,
 };
 
 Elevation.argTypes = {
@@ -570,7 +571,7 @@ Playground.args = {
   maxWidth: "300px",
   height: "auto",
   maxHeight: "100px",
-  elevation: ELEVATION.ACTION,
+  elevation: ELEVATION.LEVEL_1,
   borderRadius: BORDER_RADIUS.ONE_HUNDRED,
   position: POSITION.RELATIVE,
   top: "10px",

diff --git a/packages/orbit-components/src/Box/README.md b/packages/orbit-components/src/Box/README.md
@@ -143,12 +143,19 @@ All this properties - objects have the some own properties and none is required.
 
 ### elevation
 
-| elevation   |
-| :---------- |
-| `"action"`  |
-| `"fixed"`   |
-| `"overlay"` |
-| `"raised"`  |
+| elevation                                                  |
+| :--------------------------------------------------------- |
+| `"action"` – **deprecated (use `"level1"`)**               |
+| `"fixed"`                                                  |
+| `"fixedReverse"`                                           |
+| `"overlay"` – **deprecated (use `"level4"`)**              |
+| `"raised"` – **deprecated (use `"level3"`)**               |
+| `"raisedReverse"` – **deprecated (use `"level3Reverse"`)** |
+| `"level1"`                                                 |
+| `"level2"`                                                 |
+| `"level3"`                                                 |
+| `"level3Reverse"`                                          |
+| `"level4"`                                                 |
 
 ### spacingObject
 

diff --git a/packages/orbit-components/src/Box/TYPESCRIPT_TEMPLATE.template b/packages/orbit-components/src/Box/TYPESCRIPT_TEMPLATE.template
@@ -10,7 +10,12 @@ export type Elevation =
   | "raised"
   | "overlay"
   | "fixedReverse"
-  | "raisedReverse";
+  | "raisedReverse"
+  | "level1"
+  | "level2"
+  | "level3"
+  | "level3Reverse"
+  | "level4";
 
 export type ColorTokens =%TOKENS%
 

diff --git a/packages/orbit-components/src/Box/helpers/tailwindClasses.ts b/packages/orbit-components/src/Box/helpers/tailwindClasses.ts
@@ -40,62 +40,97 @@ export const positionClasses: {
 };
 
 export enum SHADOWS {
-  ACTION = "action",
+  ACTION = "action", // deprecated
   FIXED = "fixed",
-  RAISED = "raised",
-  OVERLAY = "overlay",
+  RAISED = "raised", // deprecated
+  OVERLAY = "overlay", // deprecated
   FIXED_REVERSE = "fixedReverse",
-  RAISED_REVERSE = "raisedReverse",
+  RAISED_REVERSE = "raisedReverse", // deprecated
+  LEVEL1 = "level1",
+  LEVEL2 = "level2",
+  LEVEL3 = "level3",
+  LEVEL3_REVERSE = "level3Reverse",
+  LEVEL4 = "level4",
 }
 
 export const shadowClasses: {
   [K in QUERIES | SHADOWS]: K extends QUERIES ? Record<SHADOWS, string> : string;
 } = {
-  [SHADOWS.ACTION]: "shadow-action",
+  [SHADOWS.ACTION]: "shadow-action", // deprecated
   [SHADOWS.FIXED]: "shadow-fixed",
-  [SHADOWS.RAISED]: "shadow-raised",
-  [SHADOWS.OVERLAY]: "shadow-overlay",
+  [SHADOWS.RAISED]: "shadow-raised", // deprecated
+  [SHADOWS.OVERLAY]: "shadow-overlay", // deprecated
   [SHADOWS.FIXED_REVERSE]: "shadow-fixed-reverse",
-  [SHADOWS.RAISED_REVERSE]: "shadow-raised-reverse",
+  [SHADOWS.RAISED_REVERSE]: "shadow-raised-reverse", // deprecated
+  [SHADOWS.LEVEL1]: "shadow-level1",
+  [SHADOWS.LEVEL2]: "shadow-level2",
+  [SHADOWS.LEVEL3]: "shadow-level3",
+  [SHADOWS.LEVEL3_REVERSE]: "shadow-level3-reverse",
+  [SHADOWS.LEVEL4]: "shadow-level4",
   [QUERIES.LARGEDESKTOP]: {
-    [SHADOWS.ACTION]: "ld:shadow-action",
+    [SHADOWS.ACTION]: "ld:shadow-action", // deprecated
     [SHADOWS.FIXED]: "ld:shadow-fixed",
-    [SHADOWS.RAISED]: "ld:shadow-raised",
-    [SHADOWS.OVERLAY]: "ld:shadow-overlay",
+    [SHADOWS.RAISED]: "ld:shadow-raised", // deprecated
+    [SHADOWS.OVERLAY]: "ld:shadow-overlay", // deprecated
     [SHADOWS.FIXED_REVERSE]: "ld:shadow-fixed-reverse",
-    [SHADOWS.RAISED_REVERSE]: "ld:shadow-raised-reverse",
+    [SHADOWS.RAISED_REVERSE]: "ld:shadow-raised-reverse", // deprecated
+    [SHADOWS.LEVEL1]: "ld:shadow-level1",
+    [SHADOWS.LEVEL2]: "ld:shadow-level2",
+    [SHADOWS.LEVEL3]: "ld:shadow-level3",
+    [SHADOWS.LEVEL3_REVERSE]: "ld:shadow-level3-reverse",
+    [SHADOWS.LEVEL4]: "ld:shadow-level4",
   },
   [QUERIES.DESKTOP]: {
-    [SHADOWS.ACTION]: "de:shadow-action",
+    [SHADOWS.ACTION]: "de:shadow-action", // deprecated
     [SHADOWS.FIXED]: "de:shadow-fixed",
-    [SHADOWS.RAISED]: "de:shadow-raised",
-    [SHADOWS.OVERLAY]: "de:shadow-overlay",
+    [SHADOWS.RAISED]: "de:shadow-raised", // deprecated
+    [SHADOWS.OVERLAY]: "de:shadow-overlay", // deprecated
     [SHADOWS.FIXED_REVERSE]: "de:shadow-fixed-reverse",
-    [SHADOWS.RAISED_REVERSE]: "de:shadow-raised-reverse",
+    [SHADOWS.RAISED_REVERSE]: "de:shadow-raised-reverse", // deprecated
+    [SHADOWS.LEVEL1]: "de:shadow-level1",
+    [SHADOWS.LEVEL2]: "de:shadow-level2",
+    [SHADOWS.LEVEL3]: "de:shadow-level3",
+    [SHADOWS.LEVEL3_REVERSE]: "de:shadow-level3-reverse",
+    [SHADOWS.LEVEL4]: "de:shadow-level4",
   },
   [QUERIES.TABLET]: {
-    [SHADOWS.ACTION]: "tb:shadow-action",
+    [SHADOWS.ACTION]: "tb:shadow-action", // deprecated
     [SHADOWS.FIXED]: "tb:shadow-fixed",
-    [SHADOWS.RAISED]: "tb:shadow-raised",
-    [SHADOWS.OVERLAY]: "tb:shadow-overlay",
+    [SHADOWS.RAISED]: "tb:shadow-raised", // deprecated
+    [SHADOWS.OVERLAY]: "tb:shadow-overlay", // deprecated
     [SHADOWS.FIXED_REVERSE]: "tb:shadow-fixed-reverse",
-    [SHADOWS.RAISED_REVERSE]: "tb:shadow-raised-reverse",
+    [SHADOWS.RAISED_REVERSE]: "tb:shadow-raised-reverse", // deprecated
+    [SHADOWS.LEVEL1]: "tb:shadow-level1",
+    [SHADOWS.LEVEL2]: "tb:shadow-level2",
+    [SHADOWS.LEVEL3]: "tb:shadow-level3",
+    [SHADOWS.LEVEL3_REVERSE]: "tb:shadow-level3-reverse",
+    [SHADOWS.LEVEL4]: "tb:shadow-level4",
   },
   [QUERIES.LARGEMOBILE]: {
-    [SHADOWS.ACTION]: "lm:shadow-action",
+    [SHADOWS.ACTION]: "lm:shadow-action", // deprecated
     [SHADOWS.FIXED]: "lm:shadow-fixed",
-    [SHADOWS.RAISED]: "lm:shadow-raised",
-    [SHADOWS.OVERLAY]: "lm:shadow-overlay",
+    [SHADOWS.RAISED]: "lm:shadow-raised", // deprecated
+    [SHADOWS.OVERLAY]: "lm:shadow-overlay", // deprecated
     [SHADOWS.FIXED_REVERSE]: "lm:shadow-fixed-reverse",
-    [SHADOWS.RAISED_REVERSE]: "lm:shadow-raised-reverse",
+    [SHADOWS.RAISED_REVERSE]: "lm:shadow-raised-reverse", // deprecated
+    [SHADOWS.LEVEL1]: "lm:shadow-level1",
+    [SHADOWS.LEVEL2]: "lm:shadow-level2",
+    [SHADOWS.LEVEL3]: "lm:shadow-level3",
+    [SHADOWS.LEVEL3_REVERSE]: "lm:shadow-level3-reverse",
+    [SHADOWS.LEVEL4]: "lm:shadow-level4",
   },
   [QUERIES.MEDIUMMOBILE]: {
-    [SHADOWS.ACTION]: "mm:shadow-action",
+    [SHADOWS.ACTION]: "mm:shadow-action", // deprecated
     [SHADOWS.FIXED]: "mm:shadow-fixed",
-    [SHADOWS.RAISED]: "mm:shadow-raised",
-    [SHADOWS.OVERLAY]: "mm:shadow-overlay",
+    [SHADOWS.RAISED]: "mm:shadow-raised", // deprecated
+    [SHADOWS.OVERLAY]: "mm:shadow-overlay", // deprecated
     [SHADOWS.FIXED_REVERSE]: "mm:shadow-fixed-reverse",
-    [SHADOWS.RAISED_REVERSE]: "mm:shadow-raised-reverse",
+    [SHADOWS.RAISED_REVERSE]: "mm:shadow-raised-reverse", // deprecated
+    [SHADOWS.LEVEL1]: "mm:shadow-level1",
+    [SHADOWS.LEVEL2]: "mm:shadow-level2",
+    [SHADOWS.LEVEL3]: "mm:shadow-level3",
+    [SHADOWS.LEVEL3_REVERSE]: "mm:shadow-level3-reverse",
+    [SHADOWS.LEVEL4]: "mm:shadow-level4",
   },
 };
 

diff --git a/packages/orbit-components/src/Box/types.d.ts b/packages/orbit-components/src/Box/types.d.ts
@@ -10,7 +10,12 @@ export type Elevation =
   | "raised"
   | "overlay"
   | "fixedReverse"
-  | "raisedReverse";
+  | "raisedReverse"
+  | "level1"
+  | "level2"
+  | "level3"
+  | "level3Reverse"
+  | "level4";
 
 export type ColorTokens =
   | "blueLight"