orcs-design-system 3.3.39 → 3.3.41

package/es/components/StatusDot/StatusDot.stories.js

@@ -19,7 +19,7 @@ export const defaultStatusDot = () => /*#__PURE__*/_jsx(Box, {
       direction: "top",
       text: "New approvals received",
       textAlign: "center",
-      width: "170px",
+      width: "fit-content",
       children: /*#__PURE__*/_jsx(StatusDot, {})
     })
   })
@@ -34,9 +34,9 @@ export const colour = () => /*#__PURE__*/_jsx(Box, {
       m: "xxs",
       children: [/*#__PURE__*/_jsx(Popover, {
         direction: "top",
-        text: "Team has a dedicated Product Owner. STATUS: Met",
+        text: "Team has a Product Owner. STATUS: Met",
         textAlign: "left",
-        width: "250px",
+        width: "fit-content",
         children: /*#__PURE__*/_jsx(StatusDot, {
           variant: "success"
         })
@@ -44,92 +44,79 @@ export const colour = () => /*#__PURE__*/_jsx(Box, {
         direction: "top",
         text: "Team members are in less than 3 locations. STATUS: Not enough data",
         textAlign: "left",
-        width: "250px",
+        width: "fit-content",
         children: /*#__PURE__*/_jsx(StatusDot, {
           variant: "warning"
         })
       }), /*#__PURE__*/_jsx(Popover, {
         direction: "top",
-        text: "Team has a dedicated Engineering Lead. STATUS: Not met",
+        text: "Team has a Team Lead. STATUS: Not met",
         textAlign: "left",
-        width: "250px",
+        width: "fit-content",
         children: /*#__PURE__*/_jsx(StatusDot, {
           variant: "danger"
         })
-      })]
-    })
-  })
-});
-export const withIcon = () => /*#__PURE__*/_jsx(Box, {
-  p: "l",
-  children: /*#__PURE__*/_jsx(Flex, {
-    justifyContent: "center",
-    alignItems: "center",
-    children: /*#__PURE__*/_jsxs(Spacer, {
-      m: "xxs",
-      children: [/*#__PURE__*/_jsx(Popover, {
-        direction: "top",
-        text: "Additional info",
-        textAlign: "center",
-        width: "110px",
-        children: /*#__PURE__*/_jsx(StatusDot, {
-          icon: true,
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: ["fas", "question"],
-            color: "white",
-            size: "xs",
-            transform: "up-2"
-          })
-        })
       }), /*#__PURE__*/_jsx(Popover, {
         direction: "top",
-        text: "Target met",
-        textAlign: "center",
-        width: "110px",
-        children: /*#__PURE__*/_jsx(StatusDot, {
-          variant: "success",
-          icon: true,
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: ["fas", "check"],
-            color: "white",
-            size: "xs",
-            transform: "up-2"
-          })
-        })
-      }), /*#__PURE__*/_jsx(Popover, {
-        direction: "top",
-        text: "Under allocated",
-        textAlign: "center",
-        width: "110px",
-        children: /*#__PURE__*/_jsx(StatusDot, {
-          variant: "warning",
-          icon: true,
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: ["fas", "exclamation"],
-            color: "white",
-            size: "xs",
-            transform: "up-2"
-          })
-        })
-      }), /*#__PURE__*/_jsx(Popover, {
-        direction: "top",
-        text: "Over allocated",
-        textAlign: "center",
-        width: "110px",
+        text: "Team has an Engineering Lead. STATUS: Not applicable",
+        textAlign: "left",
+        width: "fit-content",
         children: /*#__PURE__*/_jsx(StatusDot, {
-          variant: "danger",
-          icon: true,
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: ["fas", "bell"],
-            color: "white",
-            size: "xs",
-            transform: "up-2"
-          })
+          variant: "disabled"
         })
       })]
     })
   })
 });
+export const withIcon = () => /*#__PURE__*/_jsxs(Flex, {
+  p: "l",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "s",
+  children: [/*#__PURE__*/_jsx(Popover, {
+    direction: "top",
+    text: "On track",
+    textAlign: "center",
+    width: "fit-content",
+    children: /*#__PURE__*/_jsx(StatusDot, {
+      variant: "success",
+      icon: true,
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "check"],
+        color: "white",
+        size: "xs"
+      })
+    })
+  }), /*#__PURE__*/_jsx(Popover, {
+    direction: "top",
+    text: "Blocked",
+    textAlign: "center",
+    width: "fit-content",
+    children: /*#__PURE__*/_jsx(StatusDot, {
+      variant: "warning",
+      icon: true,
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "ban"],
+        color: "white",
+        size: "xs"
+      })
+    })
+  }), /*#__PURE__*/_jsx(Popover, {
+    direction: "top",
+    text: "At risk",
+    textAlign: "center",
+    width: "fit-content",
+    children: /*#__PURE__*/_jsx(StatusDot, {
+      variant: "danger",
+      icon: true,
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "exclamation"],
+        color: "white",
+        size: "xs"
+      })
+    })
+  })]
+});
 defaultStatusDot.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/StatusDot/index.js

@@ -20,7 +20,7 @@ const StatusDotItem = styled("div").withConfig({
   justifyContent: "center",
   lineHeight: "0",
   svg: {
-    filter: props.icon ? "drop-shadow(0 1px 1px rgba(0,0,0,0.7))" : "none"
+    filter: props.icon ? "drop-shadow(0 1px 1px rgba(0,0,0,0.6))" : "none"
   }
 }), props => variant({
   variants: {
@@ -28,19 +28,25 @@ const StatusDotItem = styled("div").withConfig({
     success: {
       bg: themeGet("colors.success")(props),
       svg: {
-        filter: props.icon ? "drop-shadow(0 1px 1px rgba(0,0,0,0.6))" : "none"
+        filter: props.icon ? "drop-shadow(0 1px 1px rgba(0,0,0,0.5))" : "none"
       }
     },
     warning: {
       bg: themeGet("colors.warning")(props),
       svg: {
-        filter: props.icon ? "drop-shadow(0 1px 1px rgba(147,101,0,1))" : "none"
+        filter: props.icon ? "drop-shadow(0 1px 1px rgba(147,101,0,0.9))" : "none"
       }
     },
     danger: {
       bg: themeGet("colors.danger")(props),
       svg: {
-        filter: props.icon ? "drop-shadow(0 1px 1px rgba(0,0,0,0.7))" : "none"
+        filter: props.icon ? "drop-shadow(0 1px 1px rgba(0,0,0,0.6))" : "none"
+      }
+    },
+    disabled: {
+      bg: themeGet("colors.greyDark")(props),
+      svg: {
+        filter: props.icon ? "drop-shadow(0 1px 1px rgba(0,0,0,0.8))" : "none"
       }
     }
   }
@@ -59,7 +65,7 @@ export default function StatusDot(_ref) {
 }
 StatusDot.propTypes = {
   /** Specifies StatusDot colour. Colours are taken from the standard design system colours. */
-  variant: PropTypes.oneOf(["success", "warning", "danger"]),
+  variant: PropTypes.oneOf(["success", "warning", "danger", "disabled"]),
   /** Specifies that this StatusDot contains an icon */
   icon: PropTypes.bool,
   /** Can specify an Icon componet as a child item */
@@ -85,6 +91,9 @@ StatusDot.__docgenInfo = {
         }, {
           "value": "\"danger\"",
           "computed": false
+        }, {
+          "value": "\"disabled\"",
+          "computed": false
         }]
       },
       "required": false

package/es/components.test.js

@@ -46,8 +46,11 @@ test("all components exported", () => {
       "Quote",
       "RadioButton",
       "Range",
+      "RenderCurrentViewSection",
       "Select",
       "SideNav",
+      "SideNavStateProvider",
+      "SideNavV2",
       "Sidebar",
       "SidebarClose",
       "SidebarPanel",
@@ -74,6 +77,7 @@ test("all components exported", () => {
       "styleLink",
       "systemThemeCollapsed",
       "systemtheme",
+      "useSideNavStateContext",
     ]
   `);
 });

package/es/index.js

@@ -37,6 +37,7 @@ export { default as Range } from "./components/Range";
 export { default as Select } from "./components/Select";
 export { default as Sidebar, SidebarTabs, SidebarTab, SidebarPanels, SidebarPanel, SidebarClose } from "./components/Sidebar";
 export { default as SideNav } from "./components/SideNav";
+export { default as SideNavV2, SideNavStateProvider, useSideNavStateContext, RenderCurrentViewSection } from "./components/SideNavV2";
 export { default as Spacer } from "./components/Spacer";
 export { default as StatusDot } from "./components/StatusDot";
 export { default as StyledLink, styleLink } from "./components/StyledLink";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.39",
+  "version": "3.3.41",
   "engines": {
     "node": "20.12.2"
   },
@@ -103,7 +103,7 @@
     "@storybook/react-webpack5": "^8.3.7",
     "@storybook/storybook-deployer": "2.8.16",
     "@storybook/theming": "^8.1.7",
-    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^11.2.2",
     "@types/jest": "^27.5.2",
     "@types/styled-components": "^5.1.7",
@@ -184,6 +184,10 @@
     "es"
   ],
   "jest": {
+    "testEnvironment": "jsdom",
+    "setupFilesAfterEnv": [
+      "<rootDir>/config/jest/setup.js"
+    ],
     "coverageThreshold": {
       "global": {
         "branches": 0,