orcs-design-system 3.3.39 → 3.3.42

package/es/components/Divider/index.js

@@ -10,7 +10,7 @@ const Item = styled.div.withConfig({
 }).withConfig({
   displayName: "Divider__Item",
   componentId: "sc-106mlj-0"
-})(["", " ", " ", " display:block;width:100%;height:", ";grid-column:", ";border-bottom:", ";background-color:", ";"], space, layout, color, props => props.thick ? "3px" : "1px", props => props.spanGrid ? "1 / -1" : "auto", props => props.dash && props.thick && props.light ? `dashed 3px ${themeGet("colors.black10")(props)}` : props.dash && props.thick && props.inverted ? `dashed 3px ${themeGet("colors.white20")(props)}` : props.dash && props.inverted ? `dashed 1px ${themeGet("colors.white20")(props)}` : props.dash && props.light ? `dashed 1px ${themeGet("colors.black10")(props)}` : props.dash && props.thick ? `dashed 3px ${themeGet("colors.black20")(props)}` : props.dash ? `dashed 1px ${themeGet("colors.black20")(props)}` : "none", props => props.dash ? "transparent" : props.inverted ? themeGet("colors.white20")(props) : props.light ? themeGet("colors.black10")(props) : themeGet("colors.black20")(props));
+})(["", " ", " ", " width:100%;height:", ";min-height:", ";grid-column:", ";border-bottom:", ";background-color:", ";"], space, layout, color, props => props.thick ? "3px" : "1px", props => props.thick ? "3px" : "1px", props => props.spanGrid ? "1 / -1" : "auto", props => props.dash && props.thick && props.light ? `dashed 3px ${themeGet("colors.black10")(props)}` : props.dash && props.thick && props.inverted ? `dashed 3px ${themeGet("colors.white20")(props)}` : props.dash && props.inverted ? `dashed 1px ${themeGet("colors.white20")(props)}` : props.dash && props.light ? `dashed 1px ${themeGet("colors.black10")(props)}` : props.dash && props.thick ? `dashed 3px ${themeGet("colors.black20")(props)}` : props.dash ? `dashed 1px ${themeGet("colors.black20")(props)}` : "none", props => props.dash ? "transparent" : props.inverted ? themeGet("colors.white20")(props) : props.light ? themeGet("colors.black10")(props) : themeGet("colors.black20")(props));
 export default function Divider(_ref) {
   let {
     light,

package/es/components/Popover/index.js

@@ -20,7 +20,15 @@ const DIRECTIONS_MAP = {
 const Container = styled.div.withConfig({
   displayName: "Popover__Container",
   componentId: "sc-1bwoak-0"
-})(["", " ", " display:", ";position:relative;"], space, layout, props => props.inlineBlock ? "inline-block !important" : "block !important");
+})(["", " ", " display:", ";position:relative;"], space, layout, props => {
+  if (props.display) {
+    return props.display;
+  }
+  if (props.inlineBlock) {
+    return "inline-block";
+  }
+  return "block";
+});
 const TooltipControl = styled.div.withConfig({
   displayName: "Popover__TooltipControl",
   componentId: "sc-1bwoak-1"

package/es/components/SideNavV2/NavItem.js

@@ -0,0 +1,231 @@
+import React from "react";
+import styled, { css as styledCss } 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";
+import { BREAKPOINTS } from "./constants/sideNav";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sharedNavItemStyles = styledCss(["cursor:pointer;padding:", ";text-decoration:none;border-radius:", ";width:100%;position:relative;border:none;path{transition:", ";fill:", ";}font-family:", ";display:flex;align-items:center;justify-content:center;transition:", ";background-color:transparent;font-size:1.4rem;font-weight:", ";&:hover,&:focus{color:", ";path{fill:", ";}}@media screen and (max-width:", "px){width:auto;max-height:30px;height:30px;}&:focus{outline:0;color:", ";path{fill:", ";}}"], themeGet("space.s"), themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.greyDarker"), themeGet("fonts.main"), themeGet("transition.transitionDefault"), themeGet("fontWeights.1"), themeGet("colors.primary"), themeGet("colors.primary"), BREAKPOINTS.SMALL_SCREEN, themeGet("colors.primary"), themeGet("colors.primary"));
+const expandedNavItemStyles = props => styledCss(["justify-content:flex-start;gap:", ";.nav-item-text{font-size:", ";line-height:1;font-weight:", ";color:", ";white-space:nowrap;text-overflow:ellipsis;}&:hover .nav-item-text,&:focus .nav-item-text{color:", ";}"], themeGet("space.s"), themeGet("fontSizes.1"), themeGet("fontWeights.1"), props.active ? themeGet("colors.greyDarkest") : themeGet("colors.greyDarker"), props.active ? themeGet("colors.greyDarkest") : themeGet("colors.primary"));
+const variantActiveStyles = {
+  expandableItem: props => styledCss(["color:", ";path{fill:", ";}:after{height:100%;position:absolute;right:0;transform:", ";content:\"\";border-right:3px solid ", ";z-index:5;}@media screen and (max-width:", "px){:after{border-top:3px solid ", ";border-right:none;top:-16px;right:0;width:100%;}}"], themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"), props.isExpanded ? "translateX(8px)" : "translateX(10px)", themeGet("colors.primary"), BREAKPOINTS.SMALL_SCREEN, themeGet("colors.primary")),
+  default: styledCss(["background-color:", ";path{fill:", ";}&:hover,&:focus{path{fill:", ";}}&:focus{path{fill:", ";}}"], themeGet("colors.primaryLightest"), themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"))
+};
+const getActiveStyles = props => {
+  if (!props.active) return "";
+  if (props["aria-expanded"]) {
+    return variantActiveStyles.expandableItem(props);
+  }
+  return variantActiveStyles.default;
+};
+const SideNavItemLink = styled.div.withConfig({
+  displayName: "NavItem__SideNavItemLink",
+  componentId: "sc-1qz1q0h-0"
+})(["& > a{", " ", " ", "}"], sharedNavItemStyles, props => props.isExpanded ? expandedNavItemStyles(props) : "", getActiveStyles);
+const SideNavItem = styled("button").withConfig({
+  displayName: "NavItem__SideNavItem",
+  componentId: "sc-1qz1q0h-1"
+})(["", " ", " ", ""], sharedNavItemStyles, props => props.isExpanded ? expandedNavItemStyles(props) : "", getActiveStyles);
+const BadgeNumber = styled("div").withConfig({
+  displayName: "NavItem__BadgeNumber",
+  componentId: "sc-1qz1q0h-2"
+})(props => 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: props.isExpanded ? "8px" : "0",
+  right: "0",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+}));
+const BadgeDot = styled("div").withConfig({
+  displayName: "NavItem__BadgeDot",
+  componentId: "sc-1qz1q0h-3"
+})(props => css({
+  position: "absolute",
+  height: "8px",
+  width: "8px",
+  bg: themeGet("colors.primary")(props),
+  borderRadius: "50%",
+  top: props.isExpanded ? "12px" : "2px",
+  right: "0"
+}));
+const SideNavItemPopover = styled(Popover).withConfig({
+  displayName: "NavItem__SideNavItemPopover",
+  componentId: "sc-1qz1q0h-4"
+})(props => css({
+  [`@media screen and (min-width: ${BREAKPOINTS.SMALL_SCREEN}px)`]: {
+    ":nth-child(1 of .bottom-aligned) ": {
+      marginTop: props.bottomAligned && "auto"
+    }
+  },
+  "&: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: ${BREAKPOINTS.SMALL_SCREEN}px)`]: {
+    width: "auto",
+    marginBottom: "0",
+    marginTop: "0",
+    "&:hover,&:focus-within": {
+      "& .popoverText": {
+        opacity: "0",
+        zIndex: "-100",
+        visibility: "hidden",
+        pointerEvents: "none",
+        justifyContent: "space-around",
+        display: "none"
+      }
+    }
+  }
+}));
+const NavItem = _ref => {
+  let {
+    item,
+    Component,
+    isActive,
+    handleItemClick,
+    navItemRefs,
+    isSmallScreen,
+    isExpanded
+  } = _ref;
+  // Use the ternary operator to render the appropriate component based on actionType
+  const accessibilityProps = {
+    ...(item.actionType === "component" && {
+      "aria-expanded": isActive ? "true" : "false"
+    }),
+    "aria-label": item.name
+  };
+  return /*#__PURE__*/_jsx(SideNavItemPopover, {
+    className: item.bottomAligned && "bottom-aligned",
+    text: !isExpanded ? item.name : "",
+    direction: isSmallScreen ? "top" : "right",
+    textAlign: "center",
+    width: "fit-content",
+    tabIndex: "-1",
+    active: isActive,
+    bottomAligned: item.bottomAligned,
+    children: item.actionType === "link" ? /*#__PURE__*/_jsx(SideNavItemLink, {
+      active: isActive,
+      bottomAligned: item.bottomAligned,
+      isExpanded: isExpanded,
+      onClick: () => handleItemClick(item),
+      ref: el => navItemRefs.current[item.index] = el,
+      children: /*#__PURE__*/_jsxs(Component, {
+        item: item,
+        children: [/*#__PURE__*/_jsx(Icon, {
+          icon: ["far", item.iconName]
+        }), isExpanded && !isSmallScreen && /*#__PURE__*/_jsx("span", {
+          className: "nav-item-text",
+          children: item.name
+        })]
+      })
+    }, item.index) : /*#__PURE__*/_jsxs(SideNavItem, {
+      active: isActive,
+      onClick: () => handleItemClick(item),
+      bottomAligned: item.bottomAligned,
+      isExpanded: isExpanded,
+      ...accessibilityProps,
+      ref: el => navItemRefs.current[item.index] = el,
+      children: [item.badgeNumber && /*#__PURE__*/_jsx(BadgeNumber, {
+        isExpanded: isExpanded,
+        children: item.badgeNumber
+      }), item.badgeDot && /*#__PURE__*/_jsx(BadgeDot, {
+        isExpanded: isExpanded
+      }), /*#__PURE__*/_jsx(Icon, {
+        icon: ["far", item.iconName]
+      }), isExpanded && !isSmallScreen && /*#__PURE__*/_jsx("span", {
+        className: "nav-item-text",
+        children: item.name
+      })]
+    }, item.index)
+  });
+};
+NavItem.propTypes = {
+  item: PropTypes.object,
+  Component: PropTypes.elementType,
+  isActive: PropTypes.bool,
+  handleItemClick: PropTypes.func,
+  navItemRefs: PropTypes.object,
+  isSmallScreen: PropTypes.bool,
+  isExpanded: PropTypes.bool
+};
+NavItem.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "NavItem",
+  "props": {
+    "item": {
+      "description": "",
+      "type": {
+        "name": "object"
+      },
+      "required": false
+    },
+    "Component": {
+      "description": "",
+      "type": {
+        "name": "elementType"
+      },
+      "required": false
+    },
+    "isActive": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "handleItemClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "navItemRefs": {
+      "description": "",
+      "type": {
+        "name": "object"
+      },
+      "required": false
+    },
+    "isSmallScreen": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "isExpanded": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    }
+  }
+};
+export default NavItem;

package/es/components/SideNavV2/SideNav.js

@@ -0,0 +1,297 @@
+import React from "react";
+import PropTypes from "prop-types";
+import SideNavTeamsSection from "./sections/SideNavTeamsSection";
+import SideNavPinnedSection from "./sections/SideNavPinnedSection";
+
+// Hooks
+import useSideNavState from "./hooks/useSideNavState";
+import useResponsive from "./hooks/useResponsive";
+import useResize from "./hooks/useResize";
+
+// Utilities
+import { categorizeItems } from "./utils/itemUtils";
+
+// Styled Components
+import { SideNavWrapper, SideNavItems } from "./styles/SideNavV2.styles";
+
+// Components
+import PanelControlComponent from "./components/PanelControl";
+import ExpandedPanel from "./components/ExpandedPanel";
+import ItemSection from "./components/ItemSection";
+import CurrentViewSectionPortalTarget from "./components/CurrentViewSectionPortalTarget";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SideNavV2 = _ref => {
+  let {
+    items,
+    sideNavHeight,
+    yourTeams,
+    pinnedItems
+  } = _ref;
+  const {
+    expandedItem,
+    isExpanded,
+    expandedWidth,
+    expandedRef,
+    navItemRefs,
+    handleItemClick,
+    handleBlur,
+    handleExpandToggle,
+    handleWidthChange
+  } = useSideNavState(items);
+  const {
+    isSmallScreen
+  } = useResponsive();
+  const {
+    handleResizeStart
+  } = useResize(expandedRef, isSmallScreen, expandedItem, handleWidthChange);
+
+  // Categorize items
+  const {
+    topAlignedItems,
+    pageSpecificItems,
+    bottomAlignedItems,
+    allItems
+  } = categorizeItems(items);
+  return /*#__PURE__*/_jsxs(SideNavWrapper, {
+    sideNavHeight: sideNavHeight,
+    children: [/*#__PURE__*/_jsxs(SideNavItems, {
+      isExpanded: isExpanded,
+      "data-testid": "side-nav-items",
+      children: [!isSmallScreen && /*#__PURE__*/_jsx(PanelControlComponent, {
+        isExpanded: isExpanded,
+        onClick: handleExpandToggle,
+        ariaLabel: "toggle side navigation",
+        mt: "10px",
+        mb: "4px",
+        tooltipText: isExpanded ? "Collapse navigation" : "Expand navigation"
+      }), /*#__PURE__*/_jsx(ItemSection, {
+        items: topAlignedItems,
+        isExpanded: isExpanded,
+        isSmallScreen: isSmallScreen,
+        expandedItem: expandedItem,
+        handleItemClick: handleItemClick,
+        navItemRefs: navItemRefs
+      }), /*#__PURE__*/_jsx(ItemSection, {
+        items: pageSpecificItems,
+        isExpanded: isExpanded,
+        isSmallScreen: isSmallScreen,
+        expandedItem: expandedItem,
+        handleItemClick: handleItemClick,
+        navItemRefs: navItemRefs,
+        showDivider: true
+      }), /*#__PURE__*/_jsx(CurrentViewSectionPortalTarget, {}), yourTeams && yourTeams.length > 0 && /*#__PURE__*/_jsx(SideNavTeamsSection, {
+        teams: yourTeams,
+        isExpanded: isExpanded
+      }), pinnedItems && pinnedItems.length > 0 && /*#__PURE__*/_jsx(SideNavPinnedSection, {
+        items: pinnedItems,
+        isExpanded: isExpanded
+      }), /*#__PURE__*/_jsx(ItemSection, {
+        items: bottomAlignedItems,
+        isExpanded: isExpanded,
+        isSmallScreen: isSmallScreen,
+        expandedItem: expandedItem,
+        handleItemClick: handleItemClick,
+        navItemRefs: navItemRefs,
+        showDivider: true
+      })]
+    }), allItems.map((item, index) => {
+      if (item.actionType !== "component") return null;
+      if (index !== expandedItem || item.hide) return null;
+      return /*#__PURE__*/_jsx(ExpandedPanel, {
+        item: item,
+        expandedItem: expandedItem,
+        isExpanded: isExpanded,
+        expandedWidth: expandedWidth,
+        sideNavHeight: sideNavHeight,
+        isSmallScreen: isSmallScreen,
+        expandedRef: expandedRef,
+        onResizeStart: handleResizeStart,
+        onItemClick: handleItemClick,
+        onBlur: handleBlur
+      }, item.name);
+    })]
+  });
+};
+SideNavV2.propTypes = {
+  sideNavHeight: PropTypes.string.isRequired,
+  initiallyExpandedItemIndex: PropTypes.number,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    iconName: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    badgeNumber: PropTypes.string,
+    badgeDot: PropTypes.bool,
+    hide: PropTypes.bool,
+    large: PropTypes.bool,
+    bottomAligned: PropTypes.bool,
+    actionType: PropTypes.oneOf(["component", "link", "button"]).isRequired,
+    component: PropTypes.elementType,
+    link: PropTypes.string,
+    onClick: PropTypes.func
+  })).isRequired,
+  LinkComponent: PropTypes.elementType,
+  // viewing prop is now optional since it can come from context
+
+  yourTeams: PropTypes.arrayOf(PropTypes.shape({
+    avatar: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired
+  })),
+  pinnedItems: PropTypes.arrayOf(PropTypes.shape({
+    avatar: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired,
+    shape: PropTypes.string,
+    onUnpin: PropTypes.func
+  }))
+};
+SideNavV2.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SideNavV2",
+  "props": {
+    "sideNavHeight": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": true
+    },
+    "initiallyExpandedItemIndex": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "items": {
+      "description": "",
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "iconName": {
+              "name": "string",
+              "required": true
+            },
+            "name": {
+              "name": "string",
+              "required": true
+            },
+            "badgeNumber": {
+              "name": "string",
+              "required": false
+            },
+            "badgeDot": {
+              "name": "bool",
+              "required": false
+            },
+            "hide": {
+              "name": "bool",
+              "required": false
+            },
+            "large": {
+              "name": "bool",
+              "required": false
+            },
+            "bottomAligned": {
+              "name": "bool",
+              "required": false
+            },
+            "actionType": {
+              "name": "enum",
+              "value": [{
+                "value": "\"component\"",
+                "computed": false
+              }, {
+                "value": "\"link\"",
+                "computed": false
+              }, {
+                "value": "\"button\"",
+                "computed": false
+              }],
+              "required": true
+            },
+            "component": {
+              "name": "elementType",
+              "required": false
+            },
+            "link": {
+              "name": "string",
+              "required": false
+            },
+            "onClick": {
+              "name": "func",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": true
+    },
+    "LinkComponent": {
+      "description": "",
+      "type": {
+        "name": "elementType"
+      },
+      "required": false
+    },
+    "yourTeams": {
+      "description": "",
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "avatar": {
+              "name": "string",
+              "required": false
+            },
+            "name": {
+              "name": "string",
+              "required": true
+            },
+            "link": {
+              "name": "string",
+              "required": true
+            }
+          }
+        }
+      },
+      "required": false
+    },
+    "pinnedItems": {
+      "description": "",
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "avatar": {
+              "name": "string",
+              "required": false
+            },
+            "name": {
+              "name": "string",
+              "required": true
+            },
+            "link": {
+              "name": "string",
+              "required": true
+            },
+            "shape": {
+              "name": "string",
+              "required": false
+            },
+            "onUnpin": {
+              "name": "func",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false
+    }
+  }
+};
+export default SideNavV2;