orcs-design-system 3.1.15 → 3.1.17

package/es/components/Badge/index.js

@@ -66,11 +66,7 @@ var Item = styled("span").withConfig({
         bg: themeGet("colors.primaryLight")(props)
       },
       secondary: {
-        color: themeGet("colors.secondaryDarker")(props),
-        bg: themeGet("colors.secondaryLightest")(props)
-      },
-      secondaryPending: {
-        color: themeGet("colors.secondary")(props),
+        color: themeGet("colors.secondaryDarkest")(props),
         bg: themeGet("colors.secondaryEvenLighter")(props)
       }
     }

package/es/components/Notification/index.js

@@ -56,7 +56,7 @@ var NotificationWrapper = styled("div").withConfig({
       },
       warning: {
         bg: themeGet("colors.warningLight")(props),
-        color: themeGet("colors.black70")(props)
+        color: themeGet("colors.black80")(props)
       },
       "default": {}
     }
@@ -71,7 +71,7 @@ var NotificationWrapper = styled("div").withConfig({
     },
     warning: {
       bg: themeGet("colors.warningLight"),
-      color: themeGet("colors.black70")
+      color: themeGet("colors.black80")
     },
     "default": {
       bg: themeGet("colors.primaryDark")
@@ -114,7 +114,7 @@ var NotificationIcon = styled(Icon).withConfig({
   componentId: "sc-1p26rkq-3"
 })(function (props) {
   return css({
-    color: props.colour === "warning" ? themeGet("colors.black70")(props) : themeGet("colors.white")(props),
+    color: props.colour === "warning" ? themeGet("colors.black80")(props) : themeGet("colors.white")(props),
     fontSize: themeGet("fontSizes.2")(props),
     mr: "s"
   });
@@ -190,7 +190,7 @@ export default function Notification(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "times"],
     size: "lg",
-    color: colour === "warning" ? "black70" : "white"
+    color: colour === "warning" ? "black80" : "white"
   })));
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme

package/es/components/SideNav/NavItem.js

@@ -0,0 +1,301 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from "react";
+import styled from "styled-components";
+import { css } from "@styled-system/css";
+import { themeGet } from "@styled-system/theme-get";
+import PropTypes from "prop-types";
+import Icon from "../Icon";
+import Popover from "../Popover";
+var SideNavItemLink = styled("div").withConfig({
+  displayName: "NavItem__SideNavItemLink",
+  componentId: "sc-hkm2u8-0"
+})(function (props) {
+  return css({
+    "& > a": {
+      cursor: "pointer",
+      padding: "s",
+      textDecoration: "none",
+      borderRadius: themeGet("radii.2")(props),
+      width: "100%",
+      path: {
+        transition: themeGet("transition.transitionDefault")(props),
+        fill: themeGet("colors.greyDarker")(props)
+      },
+      fontFamily: themeGet("fonts.main")(props),
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      // width: "100%",
+      transition: themeGet("transition.transitionDefault")(props),
+      bg: "transparent",
+      fontSize: "1.4rem",
+      fontWeight: themeGet("fontWeights.1")(props),
+      "&:hover, &:focus": {
+        path: {
+          fill: themeGet("colors.primary")(props)
+        }
+      },
+      "@media screen and (max-width: 900px)": {
+        width: "auto"
+      },
+      "&:focus": {
+        outline: "0",
+        color: themeGet("colors.primary")(props),
+        path: {
+          fill: themeGet("colors.primary")(props)
+        }
+      }
+    }
+  });
+}, function (props) {
+  return props.active && css({
+    "& > a": {
+      bg: themeGet("colors.primary")(props),
+      path: {
+        fill: themeGet("colors.white")(props)
+      },
+      "&:hover, &:focus": {
+        path: {
+          fill: themeGet("colors.white")(props)
+        }
+      },
+      "&:focus": {
+        path: {
+          fill: themeGet("colors.white")(props)
+        }
+      }
+    }
+  });
+});
+var BadgeNumber = styled("div").withConfig({
+  displayName: "NavItem__BadgeNumber",
+  componentId: "sc-hkm2u8-1"
+})(function (props) {
+  return css({
+    position: "absolute",
+    height: "16px",
+    width: "16px",
+    bg: themeGet("colors.danger")(props),
+    fontSize: "1rem",
+    fontWeight: themeGet("fontWeights.2")(props),
+    color: themeGet("colors.white")(props),
+    borderRadius: "50%",
+    top: "0",
+    right: "0",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  });
+});
+var BadgeDot = styled("div").withConfig({
+  displayName: "NavItem__BadgeDot",
+  componentId: "sc-hkm2u8-2"
+})(function (props) {
+  return css({
+    position: "absolute",
+    height: "8px",
+    width: "8px",
+    bg: themeGet("colors.primary")(props),
+    borderRadius: "50%",
+    top: "2px",
+    right: "0"
+  });
+});
+var SideNavItemPopover = styled(Popover).withConfig({
+  displayName: "NavItem__SideNavItemPopover",
+  componentId: "sc-hkm2u8-3"
+})(function (props) {
+  return css({
+    width: "100%",
+    marginBottom: props.bottomAligned ? "0" : "s",
+    marginTop: props.bottomAligned ? "s" : "0",
+    "&:hover,&:focus-within": {
+      "& .popoverText": {
+        opacity: "1",
+        zIndex: "100",
+        visibility: "visible",
+        pointerEvents: "auto",
+        display: "initial"
+      }
+    },
+    "&:focus-within": {
+      "& .popoverText": {
+        opacity: props.active ? "0" : "1",
+        zIndex: props.active ? "-100" : "100",
+        visibility: props.active ? "hidden" : "visible",
+        pointerEvents: props.active ? "none" : "auto",
+        display: props.active ? "none" : "initial"
+      }
+    },
+    "@media screen and (max-width: 900px)": {
+      width: "auto",
+      marginBottom: "0",
+      marginTop: "0",
+      "&:hover,&:focus-within": {
+        "& .popoverText": {
+          opacity: "0",
+          zIndex: "-100",
+          visibility: "hidden",
+          pointerEvents: "none",
+          justifyContent: "space-around",
+          display: "none"
+        }
+      }
+    }
+  });
+});
+var SideNavItem = styled("button").withConfig({
+  displayName: "NavItem__SideNavItem",
+  componentId: "sc-hkm2u8-4"
+})(function (props) {
+  return css({
+    fontFamily: themeGet("fonts.main")(props),
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    borderRadius: themeGet("radii.2")(props),
+    transition: themeGet("transition.transitionDefault")(props),
+    bg: "transparent",
+    cursor: "pointer",
+    border: "none",
+    padding: "s",
+    fontSize: "1.4rem",
+    fontWeight: themeGet("fontWeights.1")(props),
+    color: themeGet("colors.greyDarker")(props),
+    path: {
+      transition: themeGet("transition.transitionDefault")(props),
+      fill: themeGet("colors.greyDarker")(props)
+    },
+    "&:hover, &:focus": {
+      outline: "0",
+      color: themeGet("colors.primary")(props),
+      path: {
+        fill: themeGet("colors.primary")(props)
+      }
+    },
+    "@media screen and (max-width: 900px)": {
+      width: "auto"
+    }
+  });
+}, function (props) {
+  return props.active && css({
+    bg: themeGet("colors.primary")(props),
+    path: {
+      fill: themeGet("colors.white")(props)
+    },
+    "&:hover, &:focus": {
+      path: {
+        fill: themeGet("colors.white")(props)
+      }
+    }
+  });
+});
+var NavItem = function NavItem(_ref) {
+  var item = _ref.item,
+    Component = _ref.Component,
+    activeItem = _ref.activeItem,
+    handleItemClick = _ref.handleItemClick,
+    navItemRefs = _ref.navItemRefs;
+  // Use the ternary operator to render the appropriate component based on actionType
+  var accessibilityProps = _objectSpread(_objectSpread({}, item.actionType === "component" && {
+    "aria-expanded": item.index === activeItem ? "true" : "false"
+  }), {}, {
+    "aria-label": item.name
+  });
+  return item.actionType === "link" ? /*#__PURE__*/React.createElement(SideNavItemPopover, {
+    text: item.name,
+    textAlign: "center",
+    width: "124px",
+    active: item.index === activeItem,
+    bottomAligned: item.bottomAligned
+  }, /*#__PURE__*/React.createElement(SideNavItemLink, {
+    key: item.index,
+    active: item.index === activeItem,
+    bottomAligned: item.bottomAligned,
+    onClick: function onClick() {
+      return handleItemClick(item);
+    },
+    ref: function ref(el) {
+      return navItemRefs.current[item.index] = el;
+    }
+  }, /*#__PURE__*/React.createElement(Component, {
+    item: item
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: ["far", item.iconName]
+  })))) : /*#__PURE__*/React.createElement(SideNavItemPopover, {
+    text: item.name,
+    textAlign: "center",
+    width: "124px",
+    active: item.index === activeItem,
+    bottomAligned: item.bottomAligned
+  }, /*#__PURE__*/React.createElement(SideNavItem, _extends({
+    key: item.index,
+    active: item.index === activeItem,
+    onClick: function onClick() {
+      return handleItemClick(item);
+    },
+    bottomAligned: item.bottomAligned
+  }, accessibilityProps, {
+    ref: function ref(el) {
+      return navItemRefs.current[item.index] = el;
+    }
+  }), item.badgeNumber && /*#__PURE__*/React.createElement(BadgeNumber, null, item.badgeNumber), item.badgeDot && /*#__PURE__*/React.createElement(BadgeDot, null), /*#__PURE__*/React.createElement(Icon, {
+    icon: ["far", item.iconName]
+  })));
+};
+NavItem.propTypes = {
+  item: PropTypes.object,
+  Component: PropTypes.elementType,
+  activeItem: PropTypes.string,
+  handleItemClick: PropTypes.func,
+  navItemRefs: PropTypes.object
+};
+NavItem.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "NavItem",
+  "props": {
+    "item": {
+      "description": "",
+      "type": {
+        "name": "object"
+      },
+      "required": false
+    },
+    "Component": {
+      "description": "",
+      "type": {
+        "name": "elementType"
+      },
+      "required": false
+    },
+    "activeItem": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "handleItemClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "navItemRefs": {
+      "description": "",
+      "type": {
+        "name": "object"
+      },
+      "required": false
+    }
+  }
+};
+export default NavItem;

package/es/components/SideNav/SideNav.stories.js

@@ -4,6 +4,7 @@ import SideNav from ".";
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import { H5, P } from "../Typography";
 import Box from "../Box";
+import Button from "../Button";
 export default {
   title: "Components/SideNav",
   decorators: [function (storyFn) {
@@ -53,7 +54,12 @@ var Announcements = function Announcements() {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(H5, {
     fontWeight: "bold",
     mb: "r"
-  }, "Announcements"), /*#__PURE__*/React.createElement(P, null, "Announcements content"));
+  }, "Announcements"), /*#__PURE__*/React.createElement(P, {
+    mb: "r"
+  }, "Announcements content"), /*#__PURE__*/React.createElement(Button, {
+    small: true,
+    variant: "ghost"
+  }, "Read more"));
 };
 var items = [{
   iconName: "user",
@@ -111,7 +117,6 @@ var items = [{
 }
 // Add more items as needed...
 ];
-
 export var sidebarNavigation = function sidebarNavigation() {
   return /*#__PURE__*/React.createElement(Router, null, /*#__PURE__*/React.createElement(Route, {
     exact: true,

package/es/components/SideNav/index.js

@@ -1,9 +1,8 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useState, useEffect } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import styled from "styled-components";
 import { css } from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
@@ -12,6 +11,7 @@ import Icon from "../Icon";
 import Popover from "../Popover";
 import Divider from "../Divider";
 import Box from "../Box";
+import NavItem from "./NavItem";
 var SideNavWrapper = styled("div").withConfig({
   displayName: "SideNav__SideNavWrapper",
   componentId: "sc-1heo0i9-0"
@@ -59,11 +59,6 @@ var SideNavItems = styled("div").withConfig({
     alignItems: "center",
     justifyContent: "flex-start",
     textAlign: "center",
-    // "&:hover, &:focus": {
-    //   "& .sideNavItemName": {
-    //     display: "block"
-    //   }
-    // },
     "@media screen and (max-width: 900px)": {
       height: themeGet("appScale.navBarSize")(props),
       flexDirection: "row",
@@ -78,15 +73,16 @@ var PanelControlTooltip = styled(Popover).withConfig({
   componentId: "sc-1heo0i9-2"
 })(function (props) {
   return css({
-    alignSelf: props.showItemNames ? "flex-end" : "center",
+    alignSelf: "center",
     position: props.hideExpandedControl ? "absolute" : "relative",
     right: props.hideExpandedControl ? "r" : "initial",
+    top: "r",
     display: props.hideExpandedControl ? "block" : "none !important",
     borderTop: props.hideExpandedControl ? "none" : "solid 1px",
     borderTopColor: themeGet("colors.greyLighter")(props),
     paddingTop: props.hideExpandedControl ? "0" : "r",
     width: props.hideExpandedControl ? "auto" : "100%",
-    justifyContent: props.showItemNames ? "flex-end" : "center",
+    justifyContent: "center",
     "&:focus": {
       outline: "0"
     },
@@ -116,194 +112,9 @@ var PanelControl = styled("button").withConfig({
     border: "none"
   });
 });
-var SideNavItemPopover = styled(Popover).withConfig({
-  displayName: "SideNav__SideNavItemPopover",
-  componentId: "sc-1heo0i9-4"
-})(function (props) {
-  return css({
-    width: "100%",
-    marginBottom: props.bottomAligned ? "0" : "s",
-    marginTop: props.bottomAligned ? "s" : "0",
-    "&:hover,&:focus-within": {
-      "& .popoverText": {
-        opacity: props.showItemNames ? "0" : "1",
-        zIndex: props.showItemNames ? "-100" : "100",
-        visibility: props.showItemNames ? "hidden" : "visible",
-        pointerEvents: props.showItemNames ? "none" : "auto",
-        display: props.showItemNames ? "none" : "initial"
-      }
-    },
-    "&:focus-within": {
-      "& .popoverText": {
-        opacity: props.active ? "0" : "1",
-        zIndex: props.active ? "-100" : "100",
-        visibility: props.active ? "hidden" : "visible",
-        pointerEvents: props.active ? "none" : "auto",
-        display: props.active ? "none" : "initial"
-      }
-    },
-    "@media screen and (max-width: 900px)": {
-      width: "auto",
-      marginBottom: "0",
-      marginTop: "0",
-      "&:hover,&:focus-within": {
-        "& .popoverText": {
-          opacity: "0",
-          zIndex: "-100",
-          visibility: "hidden",
-          pointerEvents: "none",
-          justifyContent: "space-around",
-          display: "none"
-        }
-        // "&:hover, &:focus": {
-        //   "& .sideNavItemName": {
-        //     display: "none"
-        //   }
-        // }
-      }
-    }
-  });
-});
-
-var SideNavItem = styled("button").withConfig({
-  displayName: "SideNav__SideNavItem",
-  componentId: "sc-1heo0i9-5"
-})(function (props) {
-  return css({
-    fontFamily: themeGet("fonts.main")(props),
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    borderRadius: themeGet("radii.2")(props),
-    transition: themeGet("transition.transitionDefault")(props),
-    bg: "transparent",
-    cursor: "pointer",
-    border: "none",
-    padding: "s",
-    // marginBottom: props.bottomAligned ? "0" : "s",
-    // marginTop: props.bottomAligned ? "s" : "0",
-    fontSize: "1.4rem",
-    fontWeight: themeGet("fontWeights.1")(props),
-    color: themeGet("colors.greyDarker")(props),
-    path: {
-      transition: themeGet("transition.transitionDefault")(props),
-      fill: themeGet("colors.greyDarker")(props)
-    },
-    "&:hover, &:focus": {
-      outline: "0",
-      color: themeGet("colors.primary")(props),
-      path: {
-        fill: themeGet("colors.primary")(props)
-      },
-      "& .sideNavItemName": {
-        color: themeGet("colors.primary")(props)
-      }
-      // "& .sideNavItemName": {
-      //   color: themeGet("colors.primary")(props)
-      // }
-    },
-
-    "@media screen and (max-width: 900px)": {
-      width: "auto"
-    }
-  });
-}, function (props) {
-  return props.active && css({
-    bg: themeGet("colors.primary")(props),
-    path: {
-      fill: themeGet("colors.white")(props)
-    },
-    // "& .sideNavItemName": {
-    //   color: themeGet("colors.white")(props)
-    // },
-    "&:hover, &:focus": {
-      path: {
-        fill: themeGet("colors.white")(props)
-      },
-      "& .sideNavItemName": {
-        color: themeGet("colors.white")(props)
-      }
-      // "& .sideNavItemName": {
-      //   color: themeGet("colors.white")(props)
-      // }
-    }
-  });
-});
-
-var SideNavItemLink = styled("div").withConfig({
-  displayName: "SideNav__SideNavItemLink",
-  componentId: "sc-1heo0i9-6"
-})(function (props) {
-  return css({
-    "& > a": {
-      cursor: "pointer",
-      padding: "s",
-      textDecoration: "none",
-      borderRadius: themeGet("radii.2")(props),
-      width: "100%",
-      path: {
-        transition: themeGet("transition.transitionDefault")(props),
-        fill: themeGet("colors.greyDarker")(props)
-      },
-      fontFamily: themeGet("fonts.main")(props),
-      position: "relative",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      // width: "100%",
-      transition: themeGet("transition.transitionDefault")(props),
-      bg: "transparent",
-      fontSize: "1.4rem",
-      fontWeight: themeGet("fontWeights.1")(props),
-      "&:hover, &:focus": {
-        "& .sideNavItemName": {
-          color: themeGet("colors.primary")(props)
-        },
-        path: {
-          fill: themeGet("colors.primary")(props)
-        }
-      },
-      "@media screen and (max-width: 900px)": {
-        width: "auto"
-      },
-      "&:focus": {
-        outline: "0",
-        color: themeGet("colors.primary")(props),
-        path: {
-          fill: themeGet("colors.primary")(props)
-        }
-      }
-    }
-  });
-}, function (props) {
-  return props.active && css({
-    "& > a": {
-      bg: themeGet("colors.primary")(props),
-      path: {
-        fill: themeGet("colors.white")(props)
-      },
-      "&:hover, &:focus": {
-        path: {
-          fill: themeGet("colors.white")(props)
-        }
-        // "& .sideNavItemName": {
-        //   color: themeGet("colors.white")(props)
-        // }
-      },
-
-      "&:focus": {
-        path: {
-          fill: themeGet("colors.white")(props)
-        }
-      }
-    }
-  });
-});
 var BottomAlignedNavItems = styled("div").withConfig({
   displayName: "SideNav__BottomAlignedNavItems",
-  componentId: "sc-1heo0i9-7"
+  componentId: "sc-1heo0i9-4"
 })(function () {
   return css({
     marginTop: "auto",
@@ -317,58 +128,9 @@ var BottomAlignedNavItems = styled("div").withConfig({
     }
   });
 });
-var BadgeNumber = styled("div").withConfig({
-  displayName: "SideNav__BadgeNumber",
-  componentId: "sc-1heo0i9-8"
-})(function (props) {
-  return css({
-    position: "absolute",
-    height: "16px",
-    width: "16px",
-    bg: themeGet("colors.danger")(props),
-    fontSize: "1rem",
-    fontWeight: themeGet("fontWeights.2")(props),
-    color: themeGet("colors.white")(props),
-    borderRadius: "50%",
-    top: "0",
-    right: "0",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  });
-});
-var BadgeDot = styled("div").withConfig({
-  displayName: "SideNav__BadgeDot",
-  componentId: "sc-1heo0i9-9"
-})(function (props) {
-  return css({
-    position: "absolute",
-    height: "8px",
-    width: "8px",
-    bg: themeGet("colors.primary")(props),
-    borderRadius: "50%",
-    top: "2px",
-    right: "0"
-  });
-});
-
-// const SideNavItemName = styled("div")((props) =>
-//   css({
-//     lineHeight: "0",
-//     marginLeft: themeGet("space.r")(props),
-//     fontSize: themeGet("fontSizes.1")(props),
-//     whiteSpace: "nowrap",
-//     textDecoration: "none",
-//     color: themeGet("colors.greyDarker")(props),
-//     "&:hover, &:focus": {
-//       color: themeGet("colors.primary")(props)
-//     }
-//   })
-// );
-
 var SideNavExpanded = styled("div").withConfig({
   displayName: "SideNav__SideNavExpanded",
-  componentId: "sc-1heo0i9-10"
+  componentId: "sc-1heo0i9-5"
 })(function (props) {
   return css({
     position: "relative",
@@ -379,6 +141,9 @@ var SideNavExpanded = styled("div").withConfig({
     overflowY: "auto",
     padding: "r",
     borderLeft: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
+    "&:focus": {
+      outline: "0"
+    },
     "@media screen and (max-width: 900px)": {
       width: "100%",
       minWidth: "initial",
@@ -389,56 +154,9 @@ var SideNavExpanded = styled("div").withConfig({
     }
   });
 });
-var NavItem = function NavItem(_ref) {
-  var item = _ref.item,
-    Component = _ref.Component,
-    activeItem = _ref.activeItem,
-    handleItemClick = _ref.handleItemClick;
-  // Use the ternary operator to render the appropriate component based on actionType
-  var accessibilityProps = _objectSpread(_objectSpread({}, item.actionType === "component" && {
-    "aria-expanded": item.index === activeItem ? "true" : "false"
-  }), {}, {
-    "aria-label": item.name
-  });
-  return item.actionType === "link" ? /*#__PURE__*/React.createElement(SideNavItemPopover, {
-    text: item.name,
-    textAlign: "center",
-    width: "124px",
-    active: item.index === activeItem,
-    bottomAligned: item.bottomAligned
-    // showItemNames={showItemNames}
-  }, /*#__PURE__*/React.createElement(SideNavItemLink, {
-    key: item.index,
-    active: item.index === activeItem,
-    bottomAligned: item.bottomAligned,
-    onClick: function onClick() {
-      return handleItemClick(item);
-    }
-  }, /*#__PURE__*/React.createElement(Component, {
-    item: item
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["far", item.iconName]
-  })))) : /*#__PURE__*/React.createElement(SideNavItemPopover, {
-    text: item.name,
-    textAlign: "center",
-    width: "124px",
-    active: item.index === activeItem,
-    bottomAligned: item.bottomAligned
-    // showItemNames={showItemNames}
-  }, /*#__PURE__*/React.createElement(SideNavItem, _extends({
-    key: item.index,
-    active: item.index === activeItem,
-    onClick: function onClick() {
-      return handleItemClick(item);
-    },
-    bottomAligned: item.bottomAligned
-  }, accessibilityProps), item.badgeNumber && /*#__PURE__*/React.createElement(BadgeNumber, null, item.badgeNumber), item.badgeDot && /*#__PURE__*/React.createElement(BadgeDot, null), /*#__PURE__*/React.createElement(Icon, {
-    icon: ["far", item.iconName]
-  })));
-};
-var SideNav = function SideNav(_ref2) {
-  var items = _ref2.items,
-    sideNavHeight = _ref2.sideNavHeight;
+var SideNav = function SideNav(_ref) {
+  var items = _ref.items,
+    sideNavHeight = _ref.sideNavHeight;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     expandedItem = _useState2[0],
@@ -447,6 +165,10 @@ var SideNav = function SideNav(_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     activeItem = _useState4[0],
     setActiveItem = _useState4[1];
+
+  // Initialize a ref for SideNavExpanded
+  var expandedRef = useRef(null);
+  var navItemRefs = useRef({});
   var handleItemClick = function handleItemClick(item) {
     var itemIndex = item.index,
       actionType = item.actionType,
@@ -457,6 +179,7 @@ var SideNav = function SideNav(_ref2) {
     } else {
       setExpandedItem(itemIndex === expandedItem ? null : itemIndex);
       onButtonClick && onButtonClick(item);
+      itemIndex === expandedItem && navItemRefs.current && navItemRefs.current[itemIndex] && navItemRefs.current[itemIndex].focus();
     }
     setActiveItem(itemIndex === activeItem ? null : itemIndex);
   };
@@ -499,12 +222,15 @@ var SideNav = function SideNav(_ref2) {
     };
   });
 
-  // Toggle nav item names on click of panel control button
-  // const [showItemNames, setShowItemNames] = useState(false);
-  // const toggleItemNames = () => {
-  //   setShowItemNames((prevState) => !prevState);
-  // };
-
+  // Use a useEffect to focus on the expanded item
+  useEffect(function () {
+    if (expandedItem !== null && expandedRef.current) {
+      expandedRef.current.focus();
+    }
+  }, [expandedItem]);
+  var handleBlur = function handleBlur(item) {
+    handleItemClick(item);
+  };
   return /*#__PURE__*/React.createElement(SideNavWrapper, {
     sideNavHeight: sideNavHeight
   }, /*#__PURE__*/React.createElement(SideNavItems, null, topAlignedItems.map(function (item) {
@@ -515,11 +241,10 @@ var SideNav = function SideNav(_ref2) {
     return /*#__PURE__*/React.createElement(NavItem, {
       key: item.index,
       item: item,
-      Component: Component
-      // showItemNames={showItemNames}
-      ,
+      Component: Component,
       activeItem: activeItem,
-      handleItemClick: handleItemClick
+      handleItemClick: handleItemClick,
+      navItemRefs: navItemRefs
     });
   }), pageSpecificItems.length > 0 &&
   /*#__PURE__*/
@@ -539,11 +264,10 @@ var SideNav = function SideNav(_ref2) {
     return /*#__PURE__*/React.createElement(NavItem, {
       key: item.index,
       item: item,
-      Component: Component
-      // showItemNames={showItemNames}
-      ,
+      Component: Component,
       activeItem: activeItem,
-      handleItemClick: handleItemClick
+      handleItemClick: handleItemClick,
+      navItemRefs: navItemRefs
     });
   })), bottomAlignedItems.length > 0 && (
   // Render the special-container only if there are bottom-aligned items
@@ -555,11 +279,10 @@ var SideNav = function SideNav(_ref2) {
     return /*#__PURE__*/React.createElement(NavItem, {
       key: item.index,
       item: item,
-      Component: Component
-      // showItemNames={showItemNames}
-      ,
+      Component: Component,
       activeItem: activeItem,
-      handleItemClick: handleItemClick
+      handleItemClick: handleItemClick,
+      navItemRefs: navItemRefs
     });
   })) : bottomAlignedItems.map(function (item) {
     if (item.hide) {
@@ -569,17 +292,18 @@ var SideNav = function SideNav(_ref2) {
     return /*#__PURE__*/React.createElement(NavItem, {
       key: item.index,
       item: item,
-      Component: Component
-      // showItemNames={showItemNames}
-      ,
+      Component: Component,
       activeItem: activeItem,
-      handleItemClick: handleItemClick
+      handleItemClick: handleItemClick,
+      navItemRefs: navItemRefs
     });
   }))), expandedItem !== null && allItems[expandedItem] && allItems[expandedItem].component ? /*#__PURE__*/React.createElement(SideNavExpanded, {
+    ref: expandedRef,
+    tabIndex: "0",
     sideNavHeight: sideNavHeight,
     active: expandedItem === activeItem,
     large: allItems[expandedItem] && allItems[expandedItem].large
-  }, /*#__PURE__*/React.createElement(PanelControlTooltip, {
+  }, allItems[expandedItem].component(), /*#__PURE__*/React.createElement(PanelControlTooltip, {
     width: "80px",
     textAlign: "center",
     hideExpandedControl: true,
@@ -589,21 +313,16 @@ var SideNav = function SideNav(_ref2) {
     onClick: function onClick() {
       return handleItemClick(allItems[expandedItem]);
     },
-    "aria-label": "toggle panel"
+    "aria-label": "toggle panel",
+    onBlur: function onBlur() {
+      return handleBlur(allItems[expandedItem]);
+    }
   }, isGreaterThan900 === true ? /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "chevron-left"]
   }) : /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "chevron-down"]
-  }))), allItems[expandedItem].component()) : null);
-};
-NavItem.propTypes = {
-  item: PropTypes.object,
-  Component: PropTypes.elementType,
-  activeItem: PropTypes.string,
-  handleItemClick: PropTypes.func
-  // showItemNames: PropTypes.bool
+  })))) : null);
 };
-
 SideNav.propTypes = {
   sideNavHeight: PropTypes.string.isRequired,
   // Used to specify the height of the sideNav
@@ -619,10 +338,8 @@ SideNav.propTypes = {
     link: PropTypes.string,
     onClick: PropTypes.func
   })).isRequired,
-  LinkComponent: PropTypes.elementType // React Router Link component
+  LinkComponent: PropTypes.elementType
 };
-
-/** @component */
 SideNav.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Tag/index.js

@@ -41,7 +41,7 @@ var TagValue = styled.button.attrs(function (props) {
 }, function (props) {
   return props.disabled ? themeGet("colors.greyLighter")(props) : props.selected && props.highlighted ? themeGet("colors.warningLight")(props) : props.selected ? themeGet("colors.primary")(props) : themeGet("colors.white")(props);
 }, function (props) {
-  return props.disabled ? themeGet("colors.greyDarker")(props) : props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props);
+  return props.disabled ? themeGet("colors.greyDarker")(props) : props.selected && props.highlighted ? themeGet("colors.black80")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props);
 }, function (props) {
   return props.disabled ? css([""]) : css(["&:hover,&:focus{outline:0;border:", ";color:", ";background-color:", ";div{color:", ";}div[class*=\"TagType\"]{background-color:", ";}}"], function (props) {
     return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningLighter")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
@@ -103,7 +103,7 @@ var TagType = styled.div.withConfig({
 }, function (props) {
   return props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? themeGet("colors.warningLighter")(props) : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props);
 }, function (props) {
-  return props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.warningDarkest")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
+  return props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
 });
 var TagAvatar = styled(Avatar).withConfig({
   displayName: "Tag__TagAvatar",
@@ -117,7 +117,7 @@ var TagAvatar = styled(Avatar).withConfig({
 }, function (props) {
   return props.small ? themeGet("tagScale.tagAvatarFontSizeSmall") : themeGet("tagScale.tagAvatarFontSizeDefault");
 }, function (props) {
-  return props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? themeGet("colors.warningDarkest")(props) : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props);
+  return props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props);
 }, function (props) {
   return props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.white")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
 });

package/es/systemThemeCollapsed.js

@@ -45,7 +45,7 @@ var primary = "#007ac4"; // Potential new colour: #2a5ec1. Base primary brand co
 var secondary = "#8714f2"; // Change to #7211ED with new colour palette. Potential new purple colour. Introduce new secondary colour maybe purple when we re-design our colour palette
 //const tertiary = "#FF9E44"; // A tertiary colour for limited use. Not sure if needed.
 var success = "#00883b"; // Base brand success colour (green) - Mainly used to indicate success, status=good, valid, add, or save states
-var successDesaturated = desaturate(0.1, success); // This is because the lighter versions of success were too saturated and 'minty' coloured.
+var successDesaturated = desaturate(0.3, success); // This is because the lighter versions of success were too saturated and 'minty' coloured.
 var warning = "#ffb71c"; // Base brand warning colour - Mainly used to indicate warnings, slipping or near due states
 var warningSaturated = saturate(1, warning); // This is because the darker versions of warning were too under saturated and mustard looking.
 var danger = "#d90f27"; // Base brand danger/error colour - Mainly used to indicate error, status=bad, at risk or over due states
@@ -155,7 +155,7 @@ export var colors = {
   warningLightest: lighten(0.4, warning),
   warningDark: darken(0.1, warningSaturated),
   warningDarker: darken(0.2, warningSaturated),
-  warningDarkest: darken(0.3, warningSaturated),
+  warningDarkest: darken(0.4, warningSaturated),
   warning10: rgba(warning, 0.1),
   warning20: rgba(warning, 0.2),
   warning30: rgba(warning, 0.3),

package/es/systemtheme.js

@@ -44,7 +44,7 @@ var primary = "#007BC7"; // Potential new colour: #2a5ec1. Base primary brand co
 var secondary = "#8714f2"; // Change to #7211ED with new colour palette. Potential new purple colour. Introduce new secondary colour maybe purple when we re-design our colour palette
 //const tertiary = "#FF9E44"; // A tertiary colour for limited use. Not sure if needed.
 var success = "#00883b"; // Base brand success colour (green) - Mainly used to indicate success, status=good, valid, add, or save states
-var successDesaturated = desaturate(0.1, success); // This is because the lighter versions of success were too saturated and 'minty' coloured.
+var successDesaturated = desaturate(0.3, success); // This is because the lighter versions of success were too saturated and 'minty' coloured.
 var warning = "#ffb71c"; // Base brand warning colour - Mainly used to indicate warnings, slipping or near due states
 var warningSaturated = saturate(1, warning); // This is because the darker versions of warning were too under saturated and mustard looking.
 var danger = "#d90f27"; // Base brand danger/error colour - Mainly used to indicate error, status=bad, at risk or over due states
@@ -154,7 +154,7 @@ export var colors = {
   warningLightest: lighten(0.4, warningSaturated),
   warningDark: darken(0.1, warningSaturated),
   warningDarker: darken(0.2, warningSaturated),
-  warningDarkest: darken(0.3, warningSaturated),
+  warningDarkest: darken(0.4, warningSaturated),
   warning10: rgba(warning, 0.1),
   warning20: rgba(warning, 0.2),
   warning30: rgba(warning, 0.3),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.1.15",
+  "version": "3.1.17",
   "engines": {
     "node": "18.17.1"
   },
@@ -78,25 +78,25 @@
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@storybook/addon-a11y": "^7.5.0",
-    "@storybook/addon-actions": "^7.3.2",
-    "@storybook/addon-docs": "^7.3.2",
+    "@storybook/addon-a11y": "^7.6.7",
+    "@storybook/addon-actions": "^7.6.7",
+    "@storybook/addon-docs": "^7.6.7",
     "@storybook/addon-knobs": "^7.0.2",
-    "@storybook/addon-links": "^7.3.2",
-    "@storybook/addon-mdx-gfm": "^7.3.2",
-    "@storybook/addon-storyshots": "^7.3.2",
-    "@storybook/addon-toolbars": "^7.3.2",
-    "@storybook/addon-viewport": "^7.3.2",
-    "@storybook/addons": "^7.3.2",
-    "@storybook/api": "^7.3.2",
-    "@storybook/blocks": "^7.3.2",
-    "@storybook/components": "^7.3.2",
-    "@storybook/core-events": "^7.3.2",
-    "@storybook/manager-api": "^7.3.2",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-mdx-gfm": "^7.6.7",
+    "@storybook/addon-storyshots": "^7.6.7",
+    "@storybook/addon-toolbars": "^7.6.7",
+    "@storybook/addon-viewport": "^7.6.7",
+    "@storybook/addons": "^7.6.7",
+    "@storybook/api": "^7.6.7",
+    "@storybook/blocks": "^7.6.7",
+    "@storybook/components": "^7.6.7",
+    "@storybook/core-events": "^7.6.7",
+    "@storybook/manager-api": "^7.6.7",
     "@storybook/mdx1-csf": "^1.0.0",
-    "@storybook/preset-create-react-app": "^7.3.2",
-    "@storybook/react": "^7.3.2",
-    "@storybook/react-webpack5": "^7.3.2",
+    "@storybook/preset-create-react-app": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
     "@storybook/storybook-deployer": "2.8.16",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
@@ -127,7 +127,7 @@
     "prettier": "^2.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.3.2",
+    "storybook": "^7.6.7",
     "style-loader": "^2.0.0",
     "styled-components": "^5.2.1",
     "webpack": "^5.88.2",
@@ -141,7 +141,8 @@
     "remark-parse": "10.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "eslint-plugin-testing-library": "^5.11.1"
+    "eslint-plugin-testing-library": "^5.11.1",
+    "typescript": "5.2.2"
   },
   "browserslist": {
     "development": [