Merge branch 'CE-3691-lab-environment-appbar' into 'main'

CE-3691: Add lab environment color

See merge request !219

package-lock.json

 {
   "name": "@ess-ics/ce-ui-common",
-  "version": "16.0.0",
+  "version": "16.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ess-ics/ce-ui-common",
-      "version": "16.0.0",
+      "version": "16.1.0",
       "dependencies": {
         "@fontsource/titillium-web": "^5.0.22",
         "@mui/x-data-grid-pro": "^6.5.0",

package.json

 {
   "name": "@ess-ics/ce-ui-common",
-  "version": "16.0.0",
+  "version": "16.1.0",
   "private": true,
   "type": "module",
   "main": "dist/index.js",

src/components/navigation/ButtonAppBar/ButtonAppBar.tsx

@@ -34,6 +34,18 @@ const defaultStyle = ({ theme }: StyleProps) => ({
   }
 });
 
+const getEnvColor = (theme: Theme, environment: Environment) => {
+  if (environment === "PROD") {
+    return theme.palette.environment.production.main;
+  }
+
+  if (environment === "LAB") {
+    return theme.palette.environment.lab.main;
+  }
+
+  return theme.palette.environment.development.main;
+};
+
 export const ButtonAppBar = styled(
   ({
     title,
@@ -53,8 +65,7 @@ export const ButtonAppBar = styled(
         <Toolbar
           className="CeuiButtonAppBar-Toolbar"
           sx={{
-            background: (theme) =>
-              `${environment === "PROD" ? theme.palette.environment.production.main : theme.palette.environment.development.main}`
+            background: (theme) => getEnvColor(theme, environment)
           }}
         >
           <div className="CeuiButtonAppBar-HomeBox">{defaultHomeButton}</div>

src/components/navigation/Environment.ts

@@ -2,5 +2,6 @@ export enum Environment {
   LOCAL = "LOCAL",
   DEMO = "DEMO",
   TEST = "TEST",
-  PROD = "PROD"
+  PROD = "PROD",
+  LAB = "LAB"
 }

src/stories/common/AlertBanner/AlertBanner.stories.jsx

@@ -11,7 +11,7 @@ export default {
 
 export const Default = (args) => <AlertBanner {...args} />;
 Default.args = {
-  type: "warning",
+  type: "WARNING",
   message: "Your custom message here"
 };
 
@@ -32,15 +32,15 @@ ManyAlerts.argTypes = {
 ManyAlerts.args = {
   alerts: [
     {
-      type: "info",
+      type: "INFO",
       message: "Your info message here"
     },
     {
-      type: "warning",
+      type: "WARNING",
       message: "Your warning message here"
     },
     {
-      type: "error",
+      type: "ERROR",
       message: "Your error message here",
       link: "#"
     }

src/stories/navigation/ButtonAppBar/ButtonAppBar.stories.jsx

@@ -18,7 +18,8 @@ export default {
         Environment.PROD,
         Environment.TEST,
         Environment.DEMO,
-        Environment.LOCAL
+        Environment.LOCAL,
+        Environment.LAB
       ],
       control: { type: "radio" }
     }

src/stories/navigation/GlobalAppBar/GlobalAppBar.stories.jsx

@@ -26,6 +26,7 @@ export default {
     environment: {
       options: [
         Environment.PROD,
+        Environment.LAB,
         Environment.TEST,
         Environment.DEMO,
         Environment.LOCAL

src/style/Theme.ts

@@ -32,6 +32,7 @@ declare module "@mui/material/styles" {
     essNavy: Palette["primary"];
     environment: {
       production: Palette["primary"];
+      lab: Palette["primary"];
       development: Palette["primary"];
     };
   }
@@ -47,6 +48,7 @@ declare module "@mui/material/styles" {
     essNavy: Palette["primary"];
     environment: {
       production: Palette["primary"];
+      lab: Palette["primary"];
       development: Palette["primary"];
     };
   }
@@ -128,6 +130,12 @@ theme = createTheme(theme, {
         },
         name: "production"
       }),
+      lab: theme.palette.augmentColor({
+        color: {
+          main: theme.palette.essNavy.main
+        },
+        name: "lab"
+      }),
       development: theme.palette.augmentColor({
         color: {
           main: theme.palette.essOrange.main