orcs-design-system 3.3.39 → 3.3.41

package/es/components/SideNavV2/sections/SideNavCurrentViewSection.js

@@ -0,0 +1,124 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { H5, H6 } from "../../Typography";
+import Avatar from "../../Avatar";
+import { NavLink } from "react-router-dom";
+import themeGet from "@styled-system/theme-get";
+import Flex from "../../Flex";
+import Popover from "../../Popover";
+import { CurrentViewSectionShape } from "../types/sideNav";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SubNavList = styled.ul.withConfig({
+  displayName: "SideNavCurrentViewSection__SubNavList",
+  componentId: "sc-12clz4a-0"
+})(["list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:", ";width:100%;"], props => themeGet("space.s")(props));
+const StyledNavLink = styled(NavLink).withConfig({
+  displayName: "SideNavCurrentViewSection__StyledNavLink",
+  componentId: "sc-12clz4a-1"
+})(["font-size:", ";border-left:2px solid transparent;padding-left:", ";transition:border-left 0.2s ease;color:", ";text-decoration:none;span{display:block;padding:2px 0;}&:hover,&:focus{outline:none;color:", ";}&.active{border-left:2px solid ", ";color:", ";}"], themeGet("fontSizes.1"), themeGet("space.s"), themeGet("colors.greyDarkest"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.primary"));
+const CurrentViewContent = _ref => {
+  let {
+    name,
+    badge,
+    subNav,
+    isExpanded
+  } = _ref;
+  return /*#__PURE__*/_jsxs(Flex, {
+    flexDirection: "column",
+    gap: "s",
+    p: isExpanded ? "0" : "s",
+    children: [/*#__PURE__*/_jsx(H6, {
+      sizing: "small",
+      color: "greyDark",
+      children: "Currently Viewing"
+    }), /*#__PURE__*/_jsxs(Flex, {
+      flexWrap: "wrap",
+      gap: "s",
+      mt: isExpanded ? "0" : "s",
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsx(H5, {
+        fontWeight: "bold",
+        children: name
+      }), badge]
+    }), /*#__PURE__*/_jsx(SubNavList, {
+      children: subNav?.map(_ref2 => {
+        let {
+          name,
+          link
+        } = _ref2;
+        return /*#__PURE__*/_jsx(StyledNavLink, {
+          to: link,
+          children: /*#__PURE__*/_jsx("span", {
+            children: name
+          })
+        }, name);
+      })
+    })]
+  });
+};
+CurrentViewContent.propTypes = {
+  ...CurrentViewSectionShape,
+  isExpanded: PropTypes.bool
+};
+const SideNavCurrentViewSection = _ref3 => {
+  let {
+    name,
+    badge,
+    subNav,
+    isExpanded,
+    avatar,
+    shape,
+    isSmallScreen
+  } = _ref3;
+  const currentViewMarkup = /*#__PURE__*/_jsx(CurrentViewContent, {
+    name: name,
+    badge: badge,
+    subNav: subNav,
+    isExpanded: isExpanded
+  });
+  return /*#__PURE__*/_jsxs(Flex, {
+    isExpanded: isExpanded,
+    flexDirection: "column",
+    gap: "s",
+    mt: isExpanded ? "s" : "0",
+    children: [(!isExpanded || isSmallScreen) && /*#__PURE__*/_jsx(Popover, {
+      direction: isSmallScreen ? "top" : "right",
+      width: "fit-content",
+      text: currentViewMarkup,
+      children: /*#__PURE__*/_jsx(Avatar, {
+        image: avatar,
+        customSize: "30px",
+        shape: shape
+      })
+    }), isExpanded && !isSmallScreen && currentViewMarkup]
+  });
+};
+SideNavCurrentViewSection.propTypes = {
+  ...CurrentViewSectionShape,
+  isExpanded: PropTypes.bool,
+  isSmallScreen: PropTypes.bool
+};
+SideNavCurrentViewSection.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SideNavCurrentViewSection",
+  "props": {
+    "isExpanded": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "isSmallScreen": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    }
+  },
+  "composes": ["../types/sideNav"]
+};
+export default SideNavCurrentViewSection;

package/es/components/SideNavV2/sections/SideNavPinnedSection.js

@@ -0,0 +1,125 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Popover from "../../Popover";
+import Icon from "../../Icon";
+import Button from "../../Button";
+import BaseSection, { AvatarLink, Item } from "../components/BaseSection";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const SideNavPinnedSection = _ref => {
+  let {
+    items,
+    isExpanded
+  } = _ref;
+  const renderPinnedItem = (item, isExpanded) => {
+    const {
+      avatar,
+      name,
+      link,
+      shape,
+      onUnpin
+    } = item;
+    return /*#__PURE__*/_jsx(Item, {
+      children: isExpanded ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(AvatarLink, {
+          avatar: avatar,
+          name: name,
+          link: link,
+          shape: shape,
+          showName: true
+        }), /*#__PURE__*/_jsx(Popover, {
+          text: "Unpin item",
+          direction: "right",
+          width: "fit-content",
+          children: /*#__PURE__*/_jsx(Button, {
+            height: "20px",
+            width: "20px",
+            borderRadius: "20px",
+            variant: "borderGrey",
+            borderColor: "white",
+            onClick: () => onUnpin?.(item),
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: ["fas", "thumbtack"],
+              secondaryIcon: ["fas", "slash"],
+              color: "greyDarkest",
+              size: "sm"
+            })
+          })
+        })]
+      }) : /*#__PURE__*/_jsx(Popover, {
+        text: name,
+        direction: "right",
+        width: "fit-content",
+        children: /*#__PURE__*/_jsx(AvatarLink, {
+          avatar: avatar,
+          name: name,
+          link: link,
+          shape: shape,
+          showName: false
+        })
+      })
+    }, name);
+  };
+  return /*#__PURE__*/_jsx(BaseSection, {
+    title: "Pinned",
+    items: items,
+    isExpanded: isExpanded,
+    renderItem: renderPinnedItem
+  });
+};
+SideNavPinnedSection.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    avatar: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired,
+    shape: PropTypes.string,
+    onUnpin: PropTypes.func
+  })),
+  isExpanded: PropTypes.bool
+};
+SideNavPinnedSection.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SideNavPinnedSection",
+  "props": {
+    "items": {
+      "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
+    },
+    "isExpanded": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    }
+  }
+};
+export default SideNavPinnedSection;

package/es/components/SideNavV2/sections/SideNavTeamsSection.js

@@ -0,0 +1,91 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Popover from "../../Popover";
+import BaseSection, { AvatarLink, Item } from "../components/BaseSection";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SideNavTeamsSection = _ref => {
+  let {
+    teams,
+    isExpanded
+  } = _ref;
+  const renderTeamItem = (team, isExpanded) => {
+    const {
+      avatar,
+      name,
+      link
+    } = team;
+    return /*#__PURE__*/_jsx(Item, {
+      children: isExpanded ? /*#__PURE__*/_jsx(AvatarLink, {
+        avatar: avatar,
+        name: name,
+        link: link,
+        shape: "square",
+        showName: true
+      }) : /*#__PURE__*/_jsx(Popover, {
+        text: name,
+        direction: "right",
+        width: "fit-content",
+        children: /*#__PURE__*/_jsx(AvatarLink, {
+          avatar: avatar,
+          name: name,
+          link: link,
+          shape: "square",
+          showName: false
+        })
+      })
+    }, name);
+  };
+  return /*#__PURE__*/_jsx(BaseSection, {
+    title: "Your Teams",
+    items: teams,
+    isExpanded: isExpanded,
+    renderItem: renderTeamItem
+  });
+};
+SideNavTeamsSection.propTypes = {
+  teams: PropTypes.arrayOf(PropTypes.shape({
+    avatar: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired
+  })),
+  isExpanded: PropTypes.bool
+};
+SideNavTeamsSection.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SideNavTeamsSection",
+  "props": {
+    "teams": {
+      "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
+    },
+    "isExpanded": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    }
+  }
+};
+export default SideNavTeamsSection;

package/es/components/SideNavV2/styles/SideNavV2.styles.js

@@ -0,0 +1,156 @@
+import styled from "styled-components";
+import { css } from "@styled-system/css";
+import { themeGet } from "@styled-system/theme-get";
+import Popover from "../../Popover";
+import { BREAKPOINTS, DEFAULT_WIDTHS } from "../constants/sideNav";
+export const SideNavWrapper = styled("div").withConfig({
+  displayName: "SideNavV2styles__SideNavWrapper",
+  componentId: "sc-y5tsj2-0"
+})(props => css({
+  bg: themeGet("colors.white")(props),
+  color: themeGet("colors.greyDarkest")(props),
+  minHeight: props.sideNavHeight || "100%",
+  height: props.sideNavHeight || "100%",
+  maxWidth: "max-content",
+  fontFamily: themeGet("fonts.main")(props),
+  borderRight: `solid 1px ${themeGet("colors.greyLighter")(props)}`,
+  display: "flex",
+  alignItems: "stretch",
+  alignContent: "stretch",
+  [`@media screen and (max-width: ${BREAKPOINTS.SMALL_SCREEN}px)`]: {
+    borderRight: "none",
+    borderTop: `solid 1px ${themeGet("colors.greyLighter")(props)}`,
+    width: "100%",
+    height: "auto",
+    minWidth: "auto",
+    maxWidth: "initial",
+    minHeight: "initial",
+    maxHeight: themeGet("appScale.sidebarMobileHeight", "100vh")(props),
+    position: "fixed",
+    bottom: "0",
+    left: "0",
+    zIndex: "6",
+    flexDirection: "column-reverse"
+  }
+}));
+export const SideNavItems = styled("div").withConfig({
+  displayName: "SideNavV2styles__SideNavItems",
+  componentId: "sc-y5tsj2-1"
+})(props => css({
+  width: props.isExpanded ? "200px" : themeGet("appScale.sideNavSize")(props),
+  minHeight: "inherit",
+  height: "100%",
+  overflowX: "hidden",
+  overflowY: "auto",
+  display: "flex",
+  flexDirection: "column",
+  flexShrink: "0",
+  padding: "10px",
+  gap: "s",
+  alignItems: props.isExpanded ? "stretch" : "center",
+  justifyContent: "flex-start",
+  textAlign: props.isExpanded ? "left" : "center",
+  position: "relative",
+  [`@media screen and (max-width: ${BREAKPOINTS.SMALL_SCREEN}px)`]: {
+    height: "auto",
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+    width: "auto"
+  }
+}));
+export const PanelControlTooltip = styled(Popover).withConfig({
+  displayName: "SideNavV2styles__PanelControlTooltip",
+  componentId: "sc-y5tsj2-2"
+})(["width:fit-content;margin:2px 0 4px 0;", ""], props => props.position === "absolute" && css({
+  position: "absolute",
+  right: themeGet("space.r")(props),
+  top: themeGet("space.r")(props)
+}));
+export const PanelControl = styled("button").withConfig({
+  displayName: "SideNavV2styles__PanelControl",
+  componentId: "sc-y5tsj2-3"
+})(props => css({
+  borderRadius: "50%",
+  width: "20px",
+  height: "20px",
+  background: themeGet("colors.greyLighter")(props),
+  color: themeGet("colors.greyDarker")(props),
+  fontSize: "1.2rem",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  border: "none"
+}));
+export const ResizeHandle = styled("div").withConfig({
+  displayName: "SideNavV2styles__ResizeHandle",
+  componentId: "sc-y5tsj2-4"
+})(props => css({
+  position: "absolute",
+  right: "0",
+  top: "0",
+  bottom: "0",
+  width: "6px",
+  height: "100%",
+  cursor: "col-resize",
+  backgroundColor: "rgba(0, 0, 0, 0.05)",
+  zIndex: "1000",
+  "&:hover": {
+    backgroundColor: "rgba(0, 0, 0, 0.1)"
+  },
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    right: "1px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "3px",
+    height: "40px",
+    backgroundColor: themeGet("colors.grey")(props),
+    borderRadius: "3px"
+  },
+  [`@media screen and (max-width: ${BREAKPOINTS.SMALL_SCREEN}px)`]: {
+    right: "auto",
+    top: "0",
+    left: "0",
+    bottom: "0",
+    width: "100%",
+    height: "6px",
+    cursor: "row-resize",
+    "&::before": {
+      right: "auto",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      width: "40px",
+      height: "3px"
+    }
+  }
+}));
+export const SideNavExpanded = styled("div").withConfig({
+  displayName: "SideNavV2styles__SideNavExpanded",
+  componentId: "sc-y5tsj2-5"
+})(props => css({
+  position: "relative",
+  display: props.active ? "block" : "none",
+  width: props.width ? `${props.width}px` : "auto",
+  minWidth: `${DEFAULT_WIDTHS.min}px`,
+  maxWidth: `${DEFAULT_WIDTHS.max}px`,
+  height: "inherit",
+  overflowY: "auto",
+  overflowX: "hidden",
+  padding: "16px",
+  borderLeft: `solid 1px ${themeGet("colors.greyLighter")(props)}`,
+  "&:focus": {
+    outline: "0"
+  },
+  [`@media screen and (max-width: ${BREAKPOINTS.SMALL_SCREEN}px)`]: {
+    width: "100%",
+    minWidth: "initial",
+    maxWidth: "initial",
+    borderLeft: "none",
+    borderBottom: `solid 1px ${themeGet("colors.greyLighter")(props)}`,
+    height: "calc(" + themeGet("appScale.sidebarMobileHeight", "100vh")(props) + " - " + themeGet("appScale.newNavBarSize")(props) + ")"
+  }
+}));

package/es/components/SideNavV2/types/sideNav.js

@@ -0,0 +1,53 @@
+import PropTypes from "prop-types";
+import { BADGE_VARIANTS, ITEM_TYPES } from "../constants/sideNav";
+export const NavigationItemShape = {
+  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(Object.values(ITEM_TYPES)).isRequired,
+  component: PropTypes.elementType,
+  link: PropTypes.string,
+  onClick: PropTypes.func,
+  isActive: PropTypes.bool,
+  pageSpecific: PropTypes.bool,
+  isExpandedByDefault: PropTypes.bool
+};
+export const ViewingSectionShape = {
+  teamName: PropTypes.string.isRequired,
+  avatar: PropTypes.string,
+  shape: PropTypes.string,
+  teamLink: PropTypes.string.isRequired,
+  teamType: PropTypes.string,
+  badgeVariant: PropTypes.oneOf(BADGE_VARIANTS),
+  subNav: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired
+  }))
+};
+export const TeamShape = {
+  avatar: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  link: PropTypes.string.isRequired
+};
+export const PinnedItemShape = {
+  avatar: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  link: PropTypes.string.isRequired,
+  shape: PropTypes.string,
+  onUnpin: PropTypes.func
+};
+export const SubNavItemShape = {
+  name: PropTypes.string.isRequired,
+  link: PropTypes.string.isRequired
+};
+export const CurrentViewSectionShape = {
+  name: PropTypes.string.isRequired,
+  avatar: PropTypes.string,
+  shape: PropTypes.string,
+  badge: PropTypes.node,
+  subNav: PropTypes.arrayOf(SubNavItemShape)
+};

package/es/components/SideNavV2/utils/index.js

@@ -0,0 +1,2 @@
+export * from "./itemUtils";
+export * from "./resizeUtils";

package/es/components/SideNavV2/utils/itemUtils.js

@@ -0,0 +1,51 @@
+/**
+ * Categorizes navigation items into different sections based on their properties
+ * @param {Array} items - Array of navigation items
+ * @returns {Object} Object containing categorized items
+ */
+export const categorizeItems = items => {
+  const allItems = items.map((item, index) => ({
+    ...item,
+    index
+  }));
+  const topAlignedItems = allItems.filter(item => !item.bottomAligned && !item.pageSpecific);
+  const pageSpecificItems = allItems.filter(item => !item.bottomAligned && item.pageSpecific);
+  const bottomAlignedItems = allItems.filter(item => item.bottomAligned);
+  return {
+    topAlignedItems,
+    pageSpecificItems,
+    bottomAlignedItems,
+    allItems
+  };
+};
+
+/**
+ * Filters out hidden items from a list
+ * @param {Array} items - Array of navigation items
+ * @returns {Array} Filtered items without hidden ones
+ */
+export const filterVisibleItems = items => {
+  return items.filter(item => !item.hide);
+};
+
+/**
+ * Finds the first item that should be expanded by default
+ * @param {Array} items - Array of navigation items
+ * @returns {number} Index of the first item to expand by default, or -1 if none
+ */
+export const findFirstExpandedByDefault = items => {
+  return items.findIndex(item => item.isExpandedByDefault && !item.hide);
+};
+
+/**
+ * Determines if an item should be active based on its type and state
+ * @param {Object} item - Navigation item
+ * @param {number} expandedItem - Currently expanded item index
+ * @returns {boolean} Whether the item should be active
+ */
+export const isItemActive = (item, expandedItem) => {
+  if (item.actionType === "link") {
+    return item.isActive;
+  }
+  return expandedItem === item.index;
+};

package/es/components/SideNavV2/utils/resizeUtils.js

@@ -0,0 +1,57 @@
+import { DEFAULT_WIDTHS, RESIZE_CONFIG } from "../constants/sideNav";
+
+/**
+ * Calculates the clamped width for desktop resize
+ * @param {number} clientX - Mouse X position
+ * @param {Element} sideNavItems - SideNavItems element
+ * @returns {number} Clamped width value
+ */
+export const calculateDesktopWidth = (clientX, sideNavItems) => {
+  if (!sideNavItems) return DEFAULT_WIDTHS.normal;
+  const sideNavRect = sideNavItems.getBoundingClientRect();
+  const newWidth = clientX - sideNavRect.right;
+  return Math.max(DEFAULT_WIDTHS.min, Math.min(DEFAULT_WIDTHS.max, newWidth));
+};
+
+/**
+ * Calculates the clamped height for mobile resize
+ * @param {number} clientY - Mouse Y position
+ * @param {number} resizeStartY - Starting Y position
+ * @param {number} resizeStartHeight - Starting height
+ * @returns {number} Clamped height value
+ */
+export const calculateMobileHeight = (clientY, resizeStartY, resizeStartHeight) => {
+  const deltaY = clientY - resizeStartY;
+  const newHeight = resizeStartHeight - deltaY; // Reversed direction
+
+  const minHeight = RESIZE_CONFIG.MOBILE_MIN_HEIGHT;
+  const maxHeight = window.innerHeight * RESIZE_CONFIG.MOBILE_MAX_HEIGHT_RATIO;
+  return Math.max(minHeight, Math.min(maxHeight, newHeight));
+};
+
+/**
+ * Gets the initial width for an expanded item
+ * @param {Object} item - Navigation item
+ * @returns {number} Initial width
+ */
+export const getInitialWidth = item => {
+  const isLarge = item?.large;
+  return isLarge ? DEFAULT_WIDTHS.large : DEFAULT_WIDTHS.normal;
+};
+
+/**
+ * Applies resize cursor styles to document body
+ * @param {boolean} isSmallScreen - Whether we're on a small screen
+ */
+export const applyResizeCursor = isSmallScreen => {
+  document.body.style.cursor = isSmallScreen ? "row-resize" : "col-resize";
+  document.body.style.userSelect = "none";
+};
+
+/**
+ * Removes resize cursor styles from document body
+ */
+export const removeResizeCursor = () => {
+  document.body.style.cursor = "";
+  document.body.style.userSelect = "";
+};