orcs-design-system 3.2.39 → 3.2.41

package/es/components/ActionsMenu/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useImperativeHandle, createContext, useContext, useMemo, useId, useLayoutEffect } from "react";
-import styled, { keyframes, ThemeProvider } from "styled-components";
+import styled, { css, keyframes, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import { space, layout } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
@@ -88,6 +88,11 @@ export const ActionsMenuItem = styled(props => {
       ["data-action-menu-id"]: id
     };
   }
+  if (props.Component) return /*#__PURE__*/_jsx(props.Component, {
+    ...newProps,
+    onClick: onClick,
+    disabled: disabled
+  });
   return /*#__PURE__*/_jsx(Component, {
     ...newProps,
     onClick: onClick,
@@ -98,8 +103,13 @@ export const ActionsMenuItem = styled(props => {
 }).withConfig({
   displayName: "ActionsMenu__ActionsMenuItem",
   componentId: "sc-yvbni2-6"
-})(["white-space:nowrap;display:block;width:100%;text-align:left;cursor:pointer;margin:0;padding:8px;appearance:none;background-color:", ";border:none;border-bottom:solid 1px ", ";border-radius:0;color:", ";font-size:", ";line-height:", ";font-family:", ";font-weight:", ";text-decoration:none;transition:", ";&:hover,&:focus{outline:0;background-color:", ";}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border:0;border-radius:0 0 ", " ", ";}&:only-child{border-radius:", ";}"], props => props.selected ? themeGet("colors.successDark")(props) : "transparent", props => themeGet("colors.greyDarkest")(props), props => themeGet("colors.white")(props), props => themeGet("fontSizes.1")(props), props => themeGet("fontSizes.1")(props), props => themeGet("fonts.main")(props), props => themeGet("fontWeights.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primaryDark")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props));
-export const ActionsMenuBody = _ref => {
+})(["", ""], _ref => {
+  let {
+    Component
+  } = _ref;
+  return Component ? "" : css(["white-space:nowrap;display:block;width:100%;text-align:left;cursor:pointer;margin:0;padding:8px;appearance:none;background-color:", ";border:none;border-bottom:solid 1px ", ";border-radius:0;color:", ";font-size:", ";line-height:", ";font-family:", ";font-weight:", ";text-decoration:none;transition:", ";&:hover,&:focus{outline:0;background-color:", ";}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border:0;border-radius:0 0 ", " ", ";}&:only-child{border-radius:", ";}"], props => props.selected ? themeGet("colors.successDark")(props) : "transparent", props => themeGet("colors.greyDarkest")(props), props => themeGet("colors.white")(props), props => themeGet("fontSizes.1")(props), props => themeGet("fontSizes.1")(props), props => themeGet("fonts.main")(props), props => themeGet("fontWeights.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primaryDark")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props));
+});
+export const ActionsMenuBody = _ref2 => {
   let {
     theme,
     onToggle,
@@ -115,7 +125,7 @@ export const ActionsMenuBody = _ref => {
     closeOnClick = false,
     "data-testid": dataTestId = "ActionsMenu",
     ...props
-  } = _ref;
+  } = _ref2;
   const id = useId();
   const actionMenu = useActionMenu({
     placement: direction,

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

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from "react";
 import SideNav from "./index";
-import { BrowserRouter as Router, Route, Link, Routes, useParams, useMatch, Navigate } from "react-router-dom";
+import { BrowserRouter as Router, Route, Link, useLocation, matchPath, Switch, Redirect, useParams } from "react-router-dom";
 import { H5, P } from "../Typography";
 import Box from "../Box";
 import { far } from "@fortawesome/free-regular-svg-icons";
@@ -59,46 +59,59 @@ const PageCard = _ref2 => {
   });
 };
 const SideBarWithConfig = () => {
-  const isHome = useMatch("/");
-  const isProfile = useMatch("/profile");
-  const isSearch = useMatch("/search");
+  const location = useLocation();
   const items = [{
     iconName: "building",
     name: "Home",
     component: makeLinkComponent("/"),
     actionType: "link",
-    isActive: !!isHome
+    isActive: matchPath(location.pathname, {
+      path: "/",
+      exact: true
+    })
   }, {
     iconName: "user",
     name: "My profile",
     component: makeLinkComponent("/profile"),
     actionType: "link",
-    isActive: !!isProfile
+    isActive: matchPath(location.pathname, {
+      path: "/profile"
+    })
   }, {
     iconName: "id-card",
     name: "Search Page",
     component: makeLinkComponent("/search"),
     actionType: "link",
-    isActive: isSearch
+    isActive: matchPath(location.pathname, {
+      path: "/search"
+    })
   }, {
     iconName: "snowflake",
     name: "Filter",
-    hide: !isSearch,
+    hide: !matchPath(location.pathname, {
+      path: "/search"
+    }),
     // Specify hide if you want to hide this item
     component: makePanelComponent("Filter"),
     actionType: "component",
     // Use 'component' for a component
-    pageSpecific: isSearch,
+    pageSpecific: matchPath(location.pathname, {
+      path: "/search"
+    }),
     isExpandedByDefault: true
   }, {
     iconName: "sun",
     name: "People",
-    hide: !isProfile,
+    hide: !matchPath(location.pathname, {
+      path: "/profile"
+    }),
     // Specify hide if you want to hide this item
     component: makePanelComponent("People"),
     actionType: "component",
     // Use 'component' for a component
-    pageSpecific: isProfile,
+    pageSpecific: matchPath(location.pathname, {
+      path: "/profile"
+    }),
     isExpandedByDefault: true
   }, {
     iconName: "bell",
@@ -159,32 +172,30 @@ const SideBarWithConfig = () => {
     children: [/*#__PURE__*/_jsx(SideNav, {
       items: items,
       sideNavHeight: "500px"
-    }), /*#__PURE__*/_jsxs(Routes, {
+    }), /*#__PURE__*/_jsxs(Switch, {
       children: [/*#__PURE__*/_jsx(Route, {
+        exact: true,
         path: "/",
-        element: /*#__PURE__*/_jsx(PageCard, {
+        children: /*#__PURE__*/_jsx(PageCard, {
           children: /*#__PURE__*/_jsx("div", {
             children: "Home"
           })
         })
       }), /*#__PURE__*/_jsx(Route, {
         path: "/profile",
-        element: /*#__PURE__*/_jsx(PageCard, {
+        children: /*#__PURE__*/_jsx(PageCard, {
           children: /*#__PURE__*/_jsx("div", {
             children: "Profile route"
           })
         })
       }), /*#__PURE__*/_jsx(Route, {
         path: "/teams/:teamId",
-        element: /*#__PURE__*/_jsx(PageCard, {
+        children: /*#__PURE__*/_jsx(PageCard, {
           children: /*#__PURE__*/_jsx(Teams, {})
         })
-      }), /*#__PURE__*/_jsx(Route, {
-        path: "/iframe.html",
-        element: /*#__PURE__*/_jsx(Navigate, {
-          to: "/",
-          replace: true
-        })
+      }), /*#__PURE__*/_jsx(Redirect, {
+        from: "/iframe.html",
+        to: "/"
       })]
     })]
   });

package/es/components/SideNav/index.js

@@ -91,7 +91,7 @@ const SideNavExpanded = styled("div").withConfig({
   maxWidth: props.large ? "calc(" + themeGet("appScale.sidebarMaxWidthLarge")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")" : "calc(" + themeGet("appScale.sidebarMaxWidth")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")",
   height: "inherit",
   overflowY: "auto",
-  padding: "r",
+  padding: "16px",
   borderLeft: `solid 1px ${themeGet("colors.greyLighter")(props)}`,
   "&:focus": {
     outline: "0"

package/es/components/StyledLink/StyledLink.stories.js

@@ -3,7 +3,7 @@ import StyledLink from ".";
 import Box from "../Box";
 import Flex from "../Flex";
 import Spacer from "../Spacer";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/StyledLink",
@@ -72,10 +72,11 @@ export const reactLink = () => /*#__PURE__*/_jsxs(BrowserRouter, {
   children: [routes.map(route => /*#__PURE__*/_jsx(StyledLink, {
     to: route.path,
     children: route.label
-  }, route.path)), /*#__PURE__*/_jsx(Routes, {
+  }, route.path)), /*#__PURE__*/_jsx(Switch, {
     children: routes.map(route => /*#__PURE__*/_jsx(Route, {
       path: route.path,
-      element: /*#__PURE__*/_jsxs("div", {
+      exact: route.exact,
+      children: /*#__PURE__*/_jsxs("div", {
         style: {
           padding: "100px"
         },

package/es/components/Tabs/Tabs.stories.js

@@ -0,0 +1,67 @@
+import React from "react";
+import Tabs from ".";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
+import Box from "../Box";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: "Components/Tabs",
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    bg: "greyLightest",
+    p: "xl",
+    pb: "300px",
+    children: storyFn()
+  })],
+  component: Tabs
+};
+const tabsList = [{
+  label: "Details",
+  path: "/details"
+}, {
+  label: "Strategy",
+  path: "/strategy"
+}, {
+  label: "Associations",
+  path: "/associations"
+}, {
+  label: "Visualisation",
+  path: "/visualisation"
+}, {
+  label: "Principles",
+  path: "/principles"
+}, {
+  label: "Planner",
+  path: "/planner"
+}, {
+  label: "Forecast",
+  path: "/forecast"
+}, {
+  label: "Team Builder",
+  path: "/teambuilder"
+}, {
+  label: "History",
+  path: "/history",
+  isVisible: false
+}];
+export const defaultTabs = () => /*#__PURE__*/_jsxs(BrowserRouter, {
+  children: [/*#__PURE__*/_jsx(Tabs, {
+    tabsList: tabsList
+  }), /*#__PURE__*/_jsx(Switch, {
+    children: tabsList.map(tab => /*#__PURE__*/_jsx(Route, {
+      path: tab.path,
+      children: /*#__PURE__*/_jsxs(Box, {
+        bg: "white",
+        borderRadius: 2,
+        boxBorder: "default",
+        p: "l",
+        mt: "l",
+        children: ["ROUTE RENDERED: ", tab.label]
+      })
+    }, tab.path))
+  })]
+});
+defaultTabs.storyName = "Default";
+defaultTabs.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "defaultTabs"
+};

package/es/components/Tabs/index.js

@@ -1,196 +1,206 @@
-import React from "react";
-import PropTypes from "prop-types";
-import styled, { ThemeProvider } from "styled-components";
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import styled, { css } from "styled-components";
+import { NavLink, useLocation } from "react-router-dom";
+import { isEqual } from "lodash";
+import ActionsMenu, { ActionsMenuItem } from "../ActionsMenu";
+import Icon from "../Icon";
+import FlexItem from "../Flex";
 import { themeGet } from "@styled-system/theme-get";
-import { css } from "@styled-system/css";
-import { space, color } from "styled-system";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const TabsContainerItem = styled("div").withConfig({
-  displayName: "Tabs__TabsContainerItem",
+import PropTypes from "prop-types";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TabsContainer = styled.div.withConfig({
+  displayName: "Tabs__TabsContainer",
   componentId: "sc-15tpvnt-0"
-})(css({
-  width: "100%",
-  display: "flex",
-  alignItems: "center",
-  flexWrap: "wrap",
-  bg: "transparent"
-}), space);
-export const TabItem = styled("div").withConfig({
-  displayName: "Tabs__TabItem",
+})(["position:relative;"]);
+const TabWrapper = styled.div.withConfig({
+  displayName: "Tabs__TabWrapper",
   componentId: "sc-15tpvnt-1"
-})(props => css({
-  marginRight: 3,
-  a: {
-    borderRadius: themeGet("radii.2")(props),
-    bg: themeGet("colors.greyLighter")(props),
-    transition: themeGet("transition.transitionDefault")(props),
-    px: 4,
-    py: 3,
-    fontSize: themeGet("fontSizes.1")(props),
-    fontWeight: themeGet("fontWeights.2")(props),
-    color: themeGet("colors.greyDarker")(props),
-    display: "flex",
-    alignItems: "center",
-    position: "relative",
-    whiteSpace: "nowrap",
-    textDecoration: "none",
-    textAlign: "center",
-    textTransform: "uppercase",
-    cursor: "pointer",
-    "&:hover": {
-      bg: themeGet("colors.greyLight")(props),
-      color: themeGet("colors.greyDarker")(props),
-      outline: "0"
-    },
-    "&:focus": {
-      color: themeGet("colors.greyDarker")(props),
-      outline: "0",
-      boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.grey")(props)
-    },
-    button: {
-      marginLeft: 2
-    }
-  },
-  "&.active": {
-    a: {
-      color: themeGet("colors.primary")(props),
-      bg: themeGet("colors.white")(props),
-      "&:hover": {
-        cursor: "default"
-      }
-    }
-  },
-  "&.notification": {
-    a: {
-      "&::after": {
-        position: "absolute",
-        top: "calc(8px * -1)",
-        right: "calc(4px * -2)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: "20px",
-        height: "20px",
-        borderRadius: "50%",
-        fontSize: themeGet("fontSizes.0")(props),
-        fontWeight: themeGet("fontWeights.2")(props),
-        content: `"${props.notification}"`,
-        bg: themeGet("colors.danger")(props),
-        color: themeGet("colors.white")(props),
-        zIndex: 4
-      }
-    }
-  }
-}), space, color);
-export const Tab = _ref => {
+})(["position:relative;"]);
+const VisibleTabs = styled.div.withConfig({
+  displayName: "Tabs__VisibleTabs",
+  componentId: "sc-15tpvnt-2"
+})(["flex-shrink:1;display:flex;align-items:center;overflow:hidden;"]);
+const activeTabStyle = css(["background-color:", ";color:", ";cursor:default;&:hover{background-color:", ";color:", ";}&:focus{color:", ";}"], themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primary"));
+const Tab = styled(NavLink).withConfig({
+  displayName: "Tabs__Tab",
+  componentId: "sc-15tpvnt-3"
+})(["width:", ";display:block;border-radius:", ";transition:background 200ms ease-in-out,color 200ms ease-in-out;padding:", " ", ";font-size:", ";font-weight:", ";position:relative;white-space:nowrap;text-decoration:none;text-align:center;text-transform:uppercase;background-color:", ";color:", ";cursor:pointer;", " &:hover{outline:0;background-color:", ";color:", ";}&:focus{outline:0;color:", ";box-shadow:inset ", " ", ";}&.active{", "}"], _ref => {
   let {
-    theme,
-    children,
-    active,
-    notification,
-    ...props
+    fullWidth
   } = _ref;
-  const component = /*#__PURE__*/_jsx(TabItem, {
-    active: active,
-    notification: notification,
-    role: "presentation",
-    className: `${active ? "active" : ""} ${notification ? "notification notification-" + notification : ""}`,
-    ...props,
-    children: React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
-      role: "tab",
-      "aria-selected": `${active}`
-    }))
-  });
-  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
-    theme: theme,
-    children: component
-  }) : component;
-};
-Tab.propTypes = {
-  /** Specifies whether the tab is the active tab */
-  active: PropTypes.bool,
-  /** Specifies any notifications attached to the Tab */
-  notification: PropTypes.string,
-  /** Specifies the colour theme */
-  theme: PropTypes.object,
-  /** The content of the Tab is passed as a child. */
-  children: PropTypes.node
-};
-export const TabsContainer = _ref2 => {
+  return fullWidth ? "100%" : "fit-content";
+}, themeGet("radii.2"), themeGet("space.3"), themeGet("space.4"), themeGet("fontSizes.1"), themeGet("fontWeights.2"), themeGet("colors.greyLighter"), themeGet("colors.greyDarker"), _ref2 => {
   let {
-    theme,
-    children,
-    ...props
+    tabInShowMore
   } = _ref2;
-  const component = /*#__PURE__*/_jsx(TabsContainerItem, {
-    role: "tablist",
-    ...props,
-    children: children
+  return tabInShowMore ? css(["position:absolute;visibility:hidden;"]) : "";
+}, themeGet("colors.greyLight"), themeGet("colors.greyDarker"), themeGet("colors.greyDarker"), themeGet("shadows.thinOutline"), themeGet("colors.grey"), activeTabStyle);
+const ShowMoreButton = styled.button.withConfig({
+  displayName: "Tabs__ShowMoreButton",
+  componentId: "sc-15tpvnt-4"
+})(["appearance:none;border:none;font-family:", ";font-size:", ";font-weight:", ";border-radius:", ";background-color:", ";transition:", ";padding:", " ", ";color:", ";display:", ";align-items:center;&:hover{background-color:", ";color:", ";outline:0;}&:focus{color:", ";outline:0;box-shadow:inset ", " ", ";}&.hasActive{", "}"], themeGet("fonts.main"), themeGet("fontSizes.1"), themeGet("fontWeights.2"), themeGet("radii.2"), themeGet("colors.greyLighter"), themeGet("transition.transitionDefault"), themeGet("space.3"), themeGet("space.4"), themeGet("colors.greyDarker"), _ref3 => {
+  let {
+    showMoreVisible
+  } = _ref3;
+  return showMoreVisible ? "flex" : "none";
+}, themeGet("colors.greyLight"), themeGet("colors.greyDarker"), themeGet("colors.greyDarker"), themeGet("shadows.thinOutline"), themeGet("colors.grey"), activeTabStyle);
+const ShowMoreTabs = styled.div.withConfig({
+  displayName: "Tabs__ShowMoreTabs",
+  componentId: "sc-15tpvnt-5"
+})(["border-radius:", ";background-color:", ";min-width:84px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;box-shadow:inset ", " ", ",", ";"], themeGet("radii.2"), themeGet("colors.white"), themeGet("shadows.thinOutline"), themeGet("colors.greyLighter"), themeGet("shadows.boxDefault"));
+const tabsGap = 6;
+const Tabs = _ref4 => {
+  let {
+    tabsList
+  } = _ref4;
+  const [isMounted, setIsMounted] = useState(false);
+  const containerRef = useRef(null);
+  const showMoreButtonRef = useRef();
+  const containerVisibleWidth = useRef(0);
+  const [showMoreTabs, setShowMoreTabs] = useState([]);
+  const calculateVisibility = useCallback(actionElements => {
+    const showMoreButtonWidth = showMoreButtonRef?.current?.offsetWidth ?? 0;
+    // as we loop through the tabs, we need to calculate the width of the visible tabs.
+    let calculatedWidth = showMoreTabs.length ? showMoreButtonWidth : 0;
+
+    // variable for the list of hidden tabs which will be put to react state
+    const newShowMoreTabs = [];
+    [...actionElements].filter(el => el.tagName === "A") // this ensures that the ShowMore button is not included in this logic
+    .forEach((actionEl, i) => {
+      // visibleElementsWidth will be increased by
+      // the corresponding width of the element + gapWidth
+      calculatedWidth += actionEl.offsetWidth + tabsGap;
+
+      // compare computed widths and push into newShowMoreTabs if current tab width is bigger than container width
+      if (calculatedWidth >= containerVisibleWidth.current) {
+        newShowMoreTabs.push(i);
+      }
+    });
+    if (!isEqual(showMoreTabs, newShowMoreTabs)) {
+      // update React state with the list of hidden tabs
+      setShowMoreTabs(newShowMoreTabs);
+    }
+  }, [showMoreTabs]);
+  useEffect(() => {
+    const actionElements = containerRef.current?.children || [];
+    const resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        if (entry.contentBoxSize) {
+          const contentBoxSize = entry.contentBoxSize[0];
+
+          // Math.ceil is necessary to round up and return
+          // the smallest integer for the size of observed element
+          containerVisibleWidth.current = Math.ceil(contentBoxSize.inlineSize);
+
+          // invoke the functions which calculates tabs visibility
+          // and sets data to the list of hidden tabs
+          calculateVisibility(actionElements);
+        }
+      }
+    });
+
+    // This is to help in cases where useEffect callback is triggered before React repaint.
+    if (!isMounted) {
+      setTimeout(() => {
+        setIsMounted(true);
+        calculateVisibility(actionElements);
+      }, 500);
+    } else {
+      // adding ResizeObserver to the observed container
+      resizeObserver.observe(containerRef.current);
+    }
+  }, [calculateVisibility, isMounted]);
+  const visibleTabsList = tabsList.filter(tab => tab.isVisible ?? true);
+  const showMoreTabsList = visibleTabsList.filter((_tab, i) => showMoreTabs.includes(i));
+  const location = useLocation();
+  const showMoreItemActive = showMoreTabsList.find(action => location.pathname.endsWith(action.path));
+  return /*#__PURE__*/_jsx(TabsContainer, {
+    children: /*#__PURE__*/_jsx(TabWrapper, {
+      children: /*#__PURE__*/_jsxs(VisibleTabs, {
+        style: {
+          gap: tabsGap
+        },
+        ref: containerRef,
+        children: [visibleTabsList.map((tab, i) => /*#__PURE__*/_jsx(Tab, {
+          className: tab.className,
+          id: tab.id,
+          "data-testid": tab["data-testid"],
+          tabInShowMore: showMoreTabs.includes(i),
+          to: tab.path,
+          children: tab.label
+        }, tab.path)), /*#__PURE__*/_jsx(ActionsMenu, {
+          direction: "bottom-end",
+          customTriggerComponent: /*#__PURE__*/_jsxs(ShowMoreButton, {
+            ref: showMoreButtonRef,
+            showMoreVisible: showMoreTabsList.length,
+            className: showMoreItemActive && "hasActive",
+            children: [/*#__PURE__*/_jsx(FlexItem, {
+              flex: "0 0 auto",
+              children: "More"
+            }), /*#__PURE__*/_jsx(FlexItem, {
+              flex: "0 0 auto",
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: ["fas", "chevron-down"],
+                title: "Down",
+                ml: "s",
+                size: "sm"
+              })
+            })]
+          }),
+          closeOnClick: true,
+          children: /*#__PURE__*/_jsx(ShowMoreTabs, {
+            children: showMoreTabsList.map(tab => /*#__PURE__*/_jsx(ActionsMenuItem, {
+              className: tab.className,
+              id: tab.id,
+              "data-testid": tab["data-testid"],
+              Component: Tab,
+              fullWidth: true,
+              to: tab.path,
+              children: tab.label
+            }, tab.path))
+          })
+        })]
+      })
+    })
   });
-  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
-    theme: theme,
-    children: component
-  }) : component;
 };
-TabsContainer.propTypes = {
-  /** The contents of the TabsContainer are passed as a child. */
-  children: PropTypes.node,
-  /** Specifies the colour theme of the container */
-  theme: PropTypes.object
+Tabs.propTypes = {
+  /** isVisible defaults to true if not passed */
+  tabsList: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    path: PropTypes.string.isRequired,
+    isVisible: PropTypes.bool
+  })).isRequired
 };
-Tab.__docgenInfo = {
+Tabs.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "Tab",
+  "displayName": "Tabs",
   "props": {
-    "active": {
-      "description": "Specifies whether the tab is the active tab",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "notification": {
-      "description": "Specifies any notifications attached to the Tab",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "theme": {
-      "description": "Specifies the colour theme",
-      "type": {
-        "name": "object"
-      },
-      "required": false
-    },
-    "children": {
-      "description": "The content of the Tab is passed as a child.",
+    "tabsList": {
+      "description": "isVisible defaults to true if not passed",
       "type": {
-        "name": "node"
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "label": {
+              "name": "string",
+              "required": true
+            },
+            "path": {
+              "name": "string",
+              "required": true
+            },
+            "isVisible": {
+              "name": "bool",
+              "required": false
+            }
+          }
+        }
       },
-      "required": false
+      "required": true
     }
   }
 };
-TabsContainer.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "TabsContainer",
-  "props": {
-    "children": {
-      "description": "The contents of the TabsContainer are passed as a child.",
-      "type": {
-        "name": "node"
-      },
-      "required": false
-    },
-    "theme": {
-      "description": "Specifies the colour theme of the container",
-      "type": {
-        "name": "object"
-      },
-      "required": false
-    }
-  }
-};
+export default Tabs;

package/es/components.test.js

@@ -55,9 +55,8 @@ test("all components exported", () => {
       "StatusDot",
       "StyledLink",
       "SystemThemeProvider",
-      "Tab",
       "Table",
-      "TabsContainer",
+      "Tabs",
       "Tag",
       "Text",
       "TextArea",

package/es/index.js

@@ -37,7 +37,7 @@ export { default as Spacer } from "./components/Spacer";
 export { default as StatusDot } from "./components/StatusDot";
 export { default as StyledLink, styleLink } from "./components/StyledLink";
 export { default as Table } from "./components/Table";
-export { Tab, TabsContainer } from "./components/Tabs";
+export { default as Tabs } from "./components/Tabs";
 export { default as Tag } from "./components/Tag";
 export { default as TextInput } from "./components/TextInput";
 export { default as TextArea } from "./components/TextArea";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.39",
+  "version": "3.2.41",
   "engines": {
     "node": "20.12.2"
   },
@@ -47,16 +47,15 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@floating-ui/react": "^0.26.19",
-    "@mui/icons-material": "^6.0.2",
-    "@mui/material": "^6.0.2",
-    "@mui/utils": "^6.0.2",
-    "@mui/x-date-pickers": "^7.16.0",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
+    "@mui/x-date-pickers": "^7.14.0",
     "@styled-system/css": "^5.1.5",
     "@styled-system/prop-types": "^5.1.5",
     "@styled-system/should-forward-prop": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",
     "focus-trap-react": "^10.2.3",
-    "material-react-table": "^2.13.0",
+    "material-react-table": "^2.13.2",
     "polished": "^3.7.1",
     "prop-types": "^15.6.2",
     "react-app-polyfill": "^2.0.0",
@@ -66,7 +65,7 @@
     "react-intersection-observer": "^9.4.3",
     "react-moment-proptypes": "^1.8.1",
     "react-number-format": "^5.3.0",
-    "react-router-dom": "^6.26.2",
+    "react-router-dom": "^5.3.4",
     "react-select": "^5.7.4",
     "styled-system": "^5.1.5"
   },
@@ -97,7 +96,7 @@
     "@storybook/core-events": "^8.1.7",
     "@storybook/manager-api": "^8.1.7",
     "@storybook/mdx1-csf": "^1.0.0",
-    "@storybook/preset-create-react-app": "^8.1.7",
+    "@storybook/preset-create-react-app": "^8.3.3",
     "@storybook/react": "^8.1.7",
     "@storybook/react-webpack5": "^8.2.9",
     "@storybook/storybook-deployer": "2.8.16",
@@ -161,7 +160,16 @@
       "path-to-regexp": "0.1.10"
     },
     "send": "0.19.0",
-    "redux": "4.2.1"
+    "redux": "4.2.1",
+    "workbox-build": {
+      "rollup": ">=3.29.5"
+    },
+    "@rollup/plugin-babel": {
+      "rollup": ">=3.29.5"
+    },
+    "@rollup/plugin-replace": {
+      "rollup": ">=3.29.5"
+    }
   },
   "browserslist": [
     ">0.2%",

package/es/components/Tabs/Tab.stories.js

@@ -1,91 +0,0 @@
-import React from "react";
-import Box from "../Box";
-import { TabsContainer, Tab } from ".";
-import Popover from "../Popover";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default {
-  title: "Components/Tabs/Tab",
-  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
-    bg: "greyLightest",
-    p: "xl",
-    children: storyFn()
-  })],
-  component: Tab
-};
-export const activeTab = () => /*#__PURE__*/_jsxs(TabsContainer, {
-  children: [/*#__PURE__*/_jsx(Tab, {
-    children: /*#__PURE__*/_jsx("a", {
-      href: "#",
-      children: "Details"
-    })
-  }), /*#__PURE__*/_jsx(Tab, {
-    active: true,
-    children: /*#__PURE__*/_jsx("a", {
-      href: "#",
-      children: "Planning"
-    })
-  })]
-});
-activeTab.story = {
-  name: "Active Tab"
-};
-export const withNotificationsTab = () => /*#__PURE__*/_jsxs(TabsContainer, {
-  children: [/*#__PURE__*/_jsx(Tab, {
-    notification: "1",
-    children: /*#__PURE__*/_jsx("a", {
-      href: "#",
-      children: "Details"
-    })
-  }), /*#__PURE__*/_jsx(Tab, {
-    notification: "7",
-    children: /*#__PURE__*/_jsx("a", {
-      href: "#",
-      children: "Planning"
-    })
-  })]
-});
-activeTab.story = {
-  name: "With Notifications Tab"
-};
-export const withPopoverTab = () => /*#__PURE__*/_jsxs(TabsContainer, {
-  children: [/*#__PURE__*/_jsx(Popover, {
-    direction: "right",
-    text: "Example with tooltip explaining tab",
-    width: "218px",
-    children: /*#__PURE__*/_jsx(Tab, {
-      children: /*#__PURE__*/_jsx("a", {
-        href: "#",
-        children: "Details"
-      })
-    })
-  }), /*#__PURE__*/_jsx(Popover, {
-    direction: "top",
-    text: "Example with tooltip explaining tab",
-    width: "218px",
-    children: /*#__PURE__*/_jsx(Tab, {
-      children: /*#__PURE__*/_jsx("a", {
-        href: "#",
-        tabIndex: "-1",
-        children: "Additional information"
-      })
-    })
-  })]
-});
-withPopoverTab.story = {
-  name: "With Popover Tab"
-};
-activeTab.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "activeTab"
-};
-withNotificationsTab.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "withNotificationsTab"
-};
-withPopoverTab.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "withPopoverTab"
-};

package/es/components/Tabs/TabsContainer.stories.js

@@ -1,48 +0,0 @@
-import React from "react";
-import Box from "../Box";
-import Popover from "../Popover";
-import { TabsContainer, Tab } from ".";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default {
-  title: "Components/Tabs",
-  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
-    bg: "greyLightest",
-    p: "xl",
-    children: storyFn()
-  })],
-  component: TabsContainer
-};
-export const defaultTabs = () => /*#__PURE__*/_jsxs(TabsContainer, {
-  children: [/*#__PURE__*/_jsx(Tab, {
-    children: /*#__PURE__*/_jsx("a", {
-      href: "#",
-      children: "Details"
-    })
-  }), /*#__PURE__*/_jsx(Popover, {
-    direction: "top",
-    text: "Example with tooltip explaining tab",
-    width: "218px",
-    children: /*#__PURE__*/_jsx(Tab, {
-      active: true,
-      children: /*#__PURE__*/_jsx("a", {
-        href: "#",
-        tabIndex: "-1",
-        children: "Additional information"
-      })
-    })
-  }), /*#__PURE__*/_jsx(Tab, {
-    notification: "97",
-    children: /*#__PURE__*/_jsx("a", {
-      href: "#",
-      children: "Planning"
-    })
-  })]
-});
-defaultTabs.story = {
-  name: "Default Tabs"
-};
-defaultTabs.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "defaultTabs"
-};