orcs-design-system 3.3.1 → 3.3.2

package/es/components/TabsAlt/TabsAlt.stories.js

@@ -0,0 +1,64 @@
+import React from "react";
+import TabsAlt 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/TabsAlt",
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    boxBorder: "default",
+    shadow: "default",
+    pb: "200px",
+    children: storyFn()
+  })],
+  component: TabsAlt
+};
+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(TabsAlt, {
+    tabsList: tabsList
+  }), /*#__PURE__*/_jsx(Switch, {
+    children: tabsList.map(tab => /*#__PURE__*/_jsx(Route, {
+      path: tab.path,
+      children: /*#__PURE__*/_jsxs(Box, {
+        p: "l",
+        mt: "l",
+        children: ["ROUTE RENDERED: ", tab.label]
+      })
+    }, tab.path))
+  })]
+});
+defaultTabs.storyName = "Default";
+defaultTabs.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "defaultTabs"
+};

package/es/components/TabsAlt/index.js

@@ -0,0 +1,211 @@
+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 PropTypes from "prop-types";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TabsContainer = styled.div.withConfig({
+  displayName: "TabsAlt__TabsContainer",
+  componentId: "sc-hkpvfu-0"
+})(["position:relative;width:100%;&:after{content:\"\";position:absolute;bottom:0;width:100%;height:37px;background-color:", ";border-bottom:2px solid ", ";z-index:0;}"], themeGet("colors.white"), themeGet("colors.greyLighter"));
+const TabWrapper = styled.div.withConfig({
+  displayName: "TabsAlt__TabWrapper",
+  componentId: "sc-hkpvfu-1"
+})(["position:relative;width:100%;z-index:1;"]);
+const VisibleTabs = styled.div.withConfig({
+  displayName: "TabsAlt__VisibleTabs",
+  componentId: "sc-hkpvfu-2"
+})(["flex-shrink:1;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;"]);
+const activeTabStyle = css(["background-color:", ";color:", ";border-bottom:2px solid ", ";cursor:default;&:hover,&:focus{background-color:", ";color:", ";box-shadow:none;}"], themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.white"), themeGet("colors.primary"));
+const Tab = styled(NavLink).withConfig({
+  displayName: "TabsAlt__Tab",
+  componentId: "sc-hkpvfu-3"
+})(["width:", ";display:block;transition:background 200ms ease-in-out,color 200ms ease-in-out;border-bottom:2px solid ", ";padding:", " ", ";font-size:", ";font-weight:", ";position:relative;white-space:nowrap;text-decoration:none;text-align:center;background-color:", ";color:", ";cursor:pointer;", " &:hover{background-color:", ";color:", ";box-shadow:inset 0 2px 5px 0 ", ";}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.active{", "}"], _ref => {
+  let {
+    fullWidth
+  } = _ref;
+  return fullWidth ? "100%" : "fit-content";
+}, themeGet("colors.greyLighter"), themeGet("space.3"), themeGet("space.4"), themeGet("fontSizes.1"), themeGet("fontWeights.2"), themeGet("colors.white"), themeGet("colors.greyDark"), _ref2 => {
+  let {
+    tabInShowMore
+  } = _ref2;
+  return tabInShowMore ? css(["position:absolute;visibility:hidden;"]) : "";
+}, themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primaryLightest"), themeGet("colors.primaryLightest"), activeTabStyle);
+const ShowMoreButton = styled.button.withConfig({
+  displayName: "TabsAlt__ShowMoreButton",
+  componentId: "sc-hkpvfu-4"
+})(["appearance:none;border:none;font-family:", ";font-size:", ";font-weight:", ";background-color:", ";border-bottom:2px solid ", ";transition:", ";padding:", " ", ";color:", ";display:", ";align-items:center;cursor:pointer;&:hover{background-color:", ";color:", ";box-shadow:inset 0 2px 5px 0 ", ";}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.hasActive{", "}"], themeGet("fonts.main"), themeGet("fontSizes.1"), themeGet("fontWeights.2"), themeGet("colors.white"), themeGet("colors.greyLighter"), themeGet("transition.transitionDefault"), themeGet("space.3"), themeGet("space.4"), themeGet("colors.greyDark"), _ref3 => {
+  let {
+    showMoreVisible
+  } = _ref3;
+  return showMoreVisible ? "flex" : "none";
+}, themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primaryLightest"), themeGet("colors.primaryLightest"), activeTabStyle);
+const ShowMoreTabs = styled.div.withConfig({
+  displayName: "TabsAlt__ShowMoreTabs",
+  componentId: "sc-hkpvfu-5"
+})(["border-radius:", ";background-color:", ";width:fit-content;overflow:hidden;display:flex;gap:1px;flex-direction:column;justify-content:flex-start;box-shadow:", ";& [class^=\"TabsAlt__Tab\"]{border:0;padding:", ";text-align:left;}"], themeGet("radii.2"), themeGet("colors.greyLighter"), themeGet("shadows.boxDefault"), themeGet("space.3"));
+const tabsGap = 0;
+const TabsAlt = _ref4 => {
+  let {
+    tabsList
+  } = _ref4;
+  const [isMounted, setIsMounted] = useState(false);
+  const containerRef = useRef(null);
+  const containerVisibleWidth = useRef(0);
+  const [showMoreTabs, setShowMoreTabs] = useState([]);
+  const calculateVisibility = useCallback(actionElements => {
+    const showMoreButton = document.getElementById("show-more-button");
+    const showMoreButtonWidth = showMoreButton?.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,
+        role: "tablist",
+        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,
+          role: "tab",
+          children: tab.label
+        }, tab.path)), /*#__PURE__*/_jsx(ActionsMenu, {
+          direction: "bottom-end",
+          role: "presentation",
+          renderTrigger: props => /*#__PURE__*/_jsxs(ShowMoreButton, {
+            ...props,
+            showMoreVisible: showMoreTabsList.length,
+            id: "show-more-button",
+            className: showMoreItemActive && "hasActive",
+            role: "tab",
+            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: "xs",
+                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))
+          })
+        })]
+      })
+    })
+  });
+};
+TabsAlt.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
+};
+TabsAlt.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "TabsAlt",
+  "props": {
+    "tabsList": {
+      "description": "isVisible defaults to true if not passed",
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "label": {
+              "name": "string",
+              "required": true
+            },
+            "path": {
+              "name": "string",
+              "required": true
+            },
+            "isVisible": {
+              "name": "bool",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": true
+    }
+  }
+};
+export default TabsAlt;

package/es/components.test.js

@@ -59,6 +59,7 @@ test("all components exported", () => {
       "SystemThemeProvider",
       "Table",
       "Tabs",
+      "TabsAlt",
       "Tag",
       "Text",
       "TextArea",

package/es/index.js

@@ -40,6 +40,7 @@ export { default as StatusDot } from "./components/StatusDot";
 export { default as StyledLink, styleLink } from "./components/StyledLink";
 export { default as Table } from "./components/Table";
 export { default as Tabs } from "./components/Tabs";
+export { default as TabsAlt } from "./components/TabsAlt";
 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.3.1",
+  "version": "3.3.2",
   "engines": {
     "node": "20.12.2"
   },