feat(Box): add new navBar elevation type

Author: Ajuska

packages/orbit-components/src/Box/Box.stories.tsx

@@ -66,6 +66,7 @@ enum ELEVATION {
   LEVEL_3 = "level3",
   LEVEL_3REVERSE = "level3Reverse",
   LEVEL_4 = "level4",
+  NAVBAR = "navBar",
 }
 
 enum BORDER_RADIUS {

packages/orbit-components/src/Box/README.md

@@ -150,6 +150,7 @@ All this properties - objects have the some own properties and none is required.
 | `"level3"`        |
 | `"level3Reverse"` |
 | `"level4"`        |
+| `"navBar"`        |
 
 ### spacingObject
 

packages/orbit-components/src/Box/TYPESCRIPT_TEMPLATE.template

@@ -11,7 +11,8 @@ export type Elevation =
   | "level2"
   | "level3"
   | "level3Reverse"
-  | "level4";
+  | "level4"
+  | "navBar";
 
 export type ColorTokens =%TOKENS%
 

packages/orbit-components/src/Box/__tests__/index.test.tsx

@@ -275,5 +275,6 @@ describe("#Box", () => {
     expect(testEl(4)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel3BoxShadow });
     expect(testEl(5)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel3ReverseBoxShadow });
     expect(testEl(6)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel4BoxShadow });
+    expect(testEl(7)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationNavBarBoxShadow });
   });
 });

packages/orbit-components/src/Box/helpers/tailwindClasses.ts

@@ -47,6 +47,7 @@ export enum SHADOWS {
   LEVEL3 = "level3",
   LEVEL3_REVERSE = "level3Reverse",
   LEVEL4 = "level4",
+  NAVBAR = "navBar",
 }
 
 export const shadowClasses: {
@@ -59,6 +60,7 @@ export const shadowClasses: {
   [SHADOWS.LEVEL3]: "shadow-level3",
   [SHADOWS.LEVEL3_REVERSE]: "shadow-level3-reverse",
   [SHADOWS.LEVEL4]: "shadow-level4",
+  [SHADOWS.NAVBAR]: "shadow-navbar",
   [QUERIES.LARGEDESKTOP]: {
     [SHADOWS.FIXED]: "ld:shadow-fixed",
     [SHADOWS.FIXED_REVERSE]: "ld:shadow-fixed-reverse",
@@ -67,6 +69,7 @@ export const shadowClasses: {
     [SHADOWS.LEVEL3]: "ld:shadow-level3",
     [SHADOWS.LEVEL3_REVERSE]: "ld:shadow-level3-reverse",
     [SHADOWS.LEVEL4]: "ld:shadow-level4",
+    [SHADOWS.NAVBAR]: "ld:shadow-navbar",
   },
   [QUERIES.DESKTOP]: {
     [SHADOWS.FIXED]: "de:shadow-fixed",
@@ -76,6 +79,7 @@ export const shadowClasses: {
     [SHADOWS.LEVEL3]: "de:shadow-level3",
     [SHADOWS.LEVEL3_REVERSE]: "de:shadow-level3-reverse",
     [SHADOWS.LEVEL4]: "de:shadow-level4",
+    [SHADOWS.NAVBAR]: "de:shadow-navbar",
   },
   [QUERIES.TABLET]: {
     [SHADOWS.FIXED]: "tb:shadow-fixed",
@@ -85,6 +89,7 @@ export const shadowClasses: {
     [SHADOWS.LEVEL3]: "tb:shadow-level3",
     [SHADOWS.LEVEL3_REVERSE]: "tb:shadow-level3-reverse",
     [SHADOWS.LEVEL4]: "tb:shadow-level4",
+    [SHADOWS.NAVBAR]: "tb:shadow-navbar",
   },
   [QUERIES.LARGEMOBILE]: {
     [SHADOWS.FIXED]: "lm:shadow-fixed",
@@ -94,6 +99,7 @@ export const shadowClasses: {
     [SHADOWS.LEVEL3]: "lm:shadow-level3",
     [SHADOWS.LEVEL3_REVERSE]: "lm:shadow-level3-reverse",
     [SHADOWS.LEVEL4]: "lm:shadow-level4",
+    [SHADOWS.NAVBAR]: "lm:shadow-navbar",
   },
   [QUERIES.MEDIUMMOBILE]: {
     [SHADOWS.FIXED]: "mm:shadow-fixed",
@@ -103,6 +109,7 @@ export const shadowClasses: {
     [SHADOWS.LEVEL3]: "mm:shadow-level3",
     [SHADOWS.LEVEL3_REVERSE]: "mm:shadow-level3-reverse",
     [SHADOWS.LEVEL4]: "mm:shadow-level4",
+    [SHADOWS.NAVBAR]: "mm:shadow-navbar",
   },
 };
 

packages/orbit-components/src/Box/types.d.ts

@@ -11,7 +11,8 @@ export type Elevation =
   | "level2"
   | "level3"
   | "level3Reverse"
-  | "level4";
+  | "level4"
+  | "navBar";
 
 export type ColorTokens =
   | "blueLight"