orcs-design-system 3.3.39 → 3.3.41

package/es/components/SideNavV2/__tests__/sections.test.js

@@ -0,0 +1,333 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import SideNavTeamsSection from "../sections/SideNavTeamsSection";
+import SideNavPinnedSection from "../sections/SideNavPinnedSection";
+import RenderCurrentViewSection from "../components/RenderCurrentViewSection";
+import { SideNavStateProvider } from "../index";
+
+// Mock the RenderCurrentViewSection component to avoid portal issues in tests
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+jest.mock("../components/RenderCurrentViewSection", () => {
+  return function MockRenderCurrentViewSection(_ref) {
+    let {
+      viewingState
+    } = _ref;
+    return /*#__PURE__*/_jsxs("div", {
+      "data-testid": "render-current-view-section",
+      children: [/*#__PURE__*/_jsx("div", {
+        "data-testid": "viewing-name",
+        children: viewingState.name
+      }), /*#__PURE__*/_jsx("div", {
+        "data-testid": "viewing-team-link",
+        children: viewingState.teamLink
+      }), viewingState.avatar && /*#__PURE__*/_jsx("div", {
+        "data-testid": "viewing-avatar",
+        children: viewingState.avatar
+      }), viewingState.shape && /*#__PURE__*/_jsx("div", {
+        "data-testid": "viewing-shape",
+        children: viewingState.shape
+      }), viewingState.subNav && /*#__PURE__*/_jsx("div", {
+        "data-testid": "viewing-subnav",
+        children: viewingState.subNav.map((item, index) => /*#__PURE__*/_jsxs("div", {
+          "data-testid": `subnav-item-${index}`,
+          children: [item.name, ": ", item.link]
+        }, index))
+      }), viewingState.badge && /*#__PURE__*/_jsx("div", {
+        "data-testid": "viewing-badge",
+        children: viewingState.badge
+      })]
+    });
+  };
+});
+
+// Mock components that might not be available in test environment
+jest.mock("../../Avatar", () => {
+  return function MockAvatar(_ref2) {
+    let {
+      image,
+      customSize,
+      shape
+    } = _ref2;
+    return /*#__PURE__*/_jsx("div", {
+      "data-testid": "avatar",
+      "data-image": image,
+      "data-size": customSize,
+      "data-shape": shape
+    });
+  };
+});
+jest.mock("../../Icon", () => {
+  return function MockIcon(_ref3) {
+    let {
+      icon,
+      color,
+      size
+    } = _ref3;
+    return /*#__PURE__*/_jsx("div", {
+      "data-testid": "icon",
+      "data-icon": icon.join(" "),
+      "data-color": color,
+      "data-size": size
+    });
+  };
+});
+jest.mock("../../Button", () => {
+  return function MockButton(_ref4) {
+    let {
+      children,
+      onClick,
+      ...props
+    } = _ref4;
+    return /*#__PURE__*/_jsx("button", {
+      "data-testid": "button",
+      onClick: onClick,
+      ...props,
+      children: children
+    });
+  };
+});
+jest.mock("../../Popover", () => {
+  return function MockPopover(_ref5) {
+    let {
+      children,
+      text,
+      direction,
+      width
+    } = _ref5;
+    return /*#__PURE__*/_jsx("div", {
+      "data-testid": "popover",
+      "data-text": text,
+      "data-direction": direction,
+      "data-width": width,
+      children: children
+    });
+  };
+});
+jest.mock("../../Divider", () => {
+  return function MockDivider(_ref6) {
+    let {
+      light,
+      display
+    } = _ref6;
+    return /*#__PURE__*/_jsx("div", {
+      "data-testid": "divider",
+      "data-light": light,
+      "data-display": JSON.stringify(display)
+    });
+  };
+});
+jest.mock("../../Flex", () => {
+  return function MockFlex(_ref7) {
+    let {
+      children,
+      flexDirection,
+      gap,
+      p,
+      mt,
+      ...props
+    } = _ref7;
+    return /*#__PURE__*/_jsx("div", {
+      "data-testid": "flex",
+      "data-direction": flexDirection,
+      "data-gap": gap,
+      "data-p": p,
+      "data-mt": mt,
+      ...props,
+      children: children
+    });
+  };
+});
+jest.mock("../../Typography", () => ({
+  H5: _ref8 => {
+    let {
+      children,
+      fontWeight,
+      ...props
+    } = _ref8;
+    return /*#__PURE__*/_jsx("h5", {
+      "data-testid": "h5",
+      "data-font-weight": fontWeight,
+      ...props,
+      children: children
+    });
+  },
+  H6: _ref9 => {
+    let {
+      children,
+      sizing,
+      color,
+      ...props
+    } = _ref9;
+    return /*#__PURE__*/_jsx("h6", {
+      "data-testid": "h6",
+      "data-sizing": sizing,
+      "data-color": color,
+      ...props,
+      children: children
+    });
+  }
+}));
+const renderWithRouter = component => {
+  return render(/*#__PURE__*/_jsx(BrowserRouter, {
+    children: component
+  }));
+};
+describe("SideNavTeamsSection", () => {
+  const mockTeams = [{
+    avatar: "team1.jpg",
+    name: "Team Alpha",
+    link: "/teams/alpha"
+  }, {
+    avatar: "team2.jpg",
+    name: "Team Beta",
+    link: "/teams/beta"
+  }];
+  it("should render teams section when expanded", () => {
+    renderWithRouter(/*#__PURE__*/_jsx(SideNavTeamsSection, {
+      teams: mockTeams,
+      isExpanded: true
+    }));
+    expect(screen.getByText("Your Teams")).toBeInTheDocument();
+    expect(screen.getByText("Team Alpha")).toBeInTheDocument();
+    expect(screen.getByText("Team Beta")).toBeInTheDocument();
+  });
+  it("should not show title when collapsed", () => {
+    renderWithRouter(/*#__PURE__*/_jsx(SideNavTeamsSection, {
+      teams: mockTeams,
+      isExpanded: false
+    }));
+    expect(screen.queryByText("Your Teams")).not.toBeInTheDocument();
+  });
+  it("should render avatars for each team", () => {
+    renderWithRouter(/*#__PURE__*/_jsx(SideNavTeamsSection, {
+      teams: mockTeams,
+      isExpanded: true
+    }));
+    const avatars = screen.getAllByTestId("avatar");
+    expect(avatars).toHaveLength(2);
+    expect(avatars[0]).toHaveAttribute("data-image", "team1.jpg");
+    expect(avatars[1]).toHaveAttribute("data-image", "team2.jpg");
+  });
+});
+describe("SideNavPinnedSection", () => {
+  const mockPinnedItems = [{
+    avatar: "user1.jpg",
+    name: "John Doe",
+    link: "/users/john",
+    shape: "circle",
+    onUnpin: jest.fn()
+  }, {
+    avatar: "user2.jpg",
+    name: "Jane Smith",
+    link: "/users/jane",
+    shape: "square",
+    onUnpin: jest.fn()
+  }];
+  it("should render pinned section when expanded", () => {
+    renderWithRouter(/*#__PURE__*/_jsx(SideNavPinnedSection, {
+      items: mockPinnedItems,
+      isExpanded: true
+    }));
+    expect(screen.getByText("Pinned")).toBeInTheDocument();
+    expect(screen.getByText("John Doe")).toBeInTheDocument();
+    expect(screen.getByText("Jane Smith")).toBeInTheDocument();
+  });
+  it("should not show title when collapsed", () => {
+    renderWithRouter(/*#__PURE__*/_jsx(SideNavPinnedSection, {
+      items: mockPinnedItems,
+      isExpanded: false
+    }));
+    expect(screen.queryByText("Pinned")).not.toBeInTheDocument();
+  });
+  it("should render unpin buttons when expanded", () => {
+    renderWithRouter(/*#__PURE__*/_jsx(SideNavPinnedSection, {
+      items: mockPinnedItems,
+      isExpanded: true
+    }));
+    const buttons = screen.getAllByTestId("button");
+    expect(buttons).toHaveLength(2);
+  });
+  it("should render avatars with correct shapes", () => {
+    renderWithRouter(/*#__PURE__*/_jsx(SideNavPinnedSection, {
+      items: mockPinnedItems,
+      isExpanded: true
+    }));
+    const avatars = screen.getAllByTestId("avatar");
+    expect(avatars[0]).toHaveAttribute("data-shape", "circle");
+    expect(avatars[1]).toHaveAttribute("data-shape", "square");
+  });
+});
+describe("RenderCurrentViewSection", () => {
+  const mockViewingState = {
+    name: "Test Team",
+    teamLink: "/teams/test",
+    avatar: "/avatars/test.jpg",
+    shape: "square"
+  };
+  it("should render current view section with basic data", () => {
+    renderWithRouter(/*#__PURE__*/_jsx(SideNavStateProvider, {
+      children: /*#__PURE__*/_jsx(RenderCurrentViewSection, {
+        viewingState: mockViewingState
+      })
+    }));
+    expect(screen.getByTestId("render-current-view-section")).toBeInTheDocument();
+    expect(screen.getByTestId("viewing-name")).toHaveTextContent("Test Team");
+    expect(screen.getByTestId("viewing-team-link")).toHaveTextContent("/teams/test");
+    expect(screen.getByTestId("viewing-avatar")).toHaveTextContent("/avatars/test.jpg");
+    expect(screen.getByTestId("viewing-shape")).toHaveTextContent("square");
+  });
+  it("should render current view section with subNav", () => {
+    const viewingStateWithSubNav = {
+      ...mockViewingState,
+      subNav: [{
+        name: "Overview",
+        link: "/teams/test/overview"
+      }, {
+        name: "Members",
+        link: "/teams/test/members"
+      }]
+    };
+    renderWithRouter(/*#__PURE__*/_jsx(SideNavStateProvider, {
+      children: /*#__PURE__*/_jsx(RenderCurrentViewSection, {
+        viewingState: viewingStateWithSubNav
+      })
+    }));
+    expect(screen.getByTestId("render-current-view-section")).toBeInTheDocument();
+    expect(screen.getByTestId("viewing-subnav")).toBeInTheDocument();
+    expect(screen.getByTestId("subnav-item-0")).toHaveTextContent("Overview: /teams/test/overview");
+    expect(screen.getByTestId("subnav-item-1")).toHaveTextContent("Members: /teams/test/members");
+  });
+  it("should render current view section with badge", () => {
+    const viewingStateWithBadge = {
+      ...mockViewingState,
+      badge: /*#__PURE__*/_jsx("div", {
+        "data-testid": "badge",
+        children: "Badge"
+      })
+    };
+    renderWithRouter(/*#__PURE__*/_jsx(SideNavStateProvider, {
+      children: /*#__PURE__*/_jsx(RenderCurrentViewSection, {
+        viewingState: viewingStateWithBadge
+      })
+    }));
+    expect(screen.getByTestId("render-current-view-section")).toBeInTheDocument();
+    expect(screen.getByTestId("viewing-badge")).toBeInTheDocument();
+  });
+  it("should handle viewing state without avatar", () => {
+    const viewingStateWithoutAvatar = {
+      name: "Team No Avatar",
+      teamLink: "/teams/no-avatar"
+    };
+    renderWithRouter(/*#__PURE__*/_jsx(SideNavStateProvider, {
+      children: /*#__PURE__*/_jsx(RenderCurrentViewSection, {
+        viewingState: viewingStateWithoutAvatar
+      })
+    }));
+    expect(screen.getByTestId("render-current-view-section")).toBeInTheDocument();
+    expect(screen.getByTestId("viewing-name")).toHaveTextContent("Team No Avatar");
+    expect(screen.getByTestId("viewing-team-link")).toHaveTextContent("/teams/no-avatar");
+    expect(screen.queryByTestId("viewing-avatar")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("viewing-shape")).not.toBeInTheDocument();
+  });
+});

package/es/components/SideNavV2/components/BaseSection.js

@@ -0,0 +1,178 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { H6 } from "../../Typography";
+import Avatar from "../../Avatar";
+import { Link } from "react-router-dom";
+import Flex from "../../Flex";
+import themeGet from "@styled-system/theme-get";
+import Divider from "../../Divider";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ItemList = styled.ul.withConfig({
+  displayName: "BaseSection__ItemList",
+  componentId: "sc-1y67u5l-0"
+})(["list-style:none;padding:0;margin:0;align-items:", ";text-align:", ";display:flex;flex-direction:column;gap:", ";"], props => props.isExpanded ? "flex-start" : "center", props => props.isExpanded ? "left" : "center", props => themeGet("space.s")(props));
+const ItemName = styled.span.withConfig({
+  displayName: "BaseSection__ItemName",
+  componentId: "sc-1y67u5l-1"
+})(["margin-left:0.5rem;font-size:", ";"], props => themeGet("fontSizes.1")(props));
+export const Item = styled.li.withConfig({
+  displayName: "BaseSection__Item",
+  componentId: "sc-1y67u5l-2"
+})(["display:flex;width:100%;gap:", ";justify-content:space-between;align-items:center;a{display:flex;align-items:center;font-size:", ";text-decoration:none;color:", ";&:hover,&:focus{outline:none;color:", ";}}"], props => themeGet("space.xs")(props), props => themeGet("fontSizes.1")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("colors.primary")(props));
+export const AvatarLink = _ref => {
+  let {
+    avatar,
+    name,
+    link,
+    shape = "square",
+    showName
+  } = _ref;
+  return /*#__PURE__*/_jsxs(Link, {
+    to: link,
+    "aria-label": name,
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      image: avatar,
+      customSize: "30px",
+      shape: shape
+    }), showName && /*#__PURE__*/_jsx(ItemName, {
+      children: name
+    })]
+  });
+};
+AvatarLink.propTypes = {
+  avatar: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  link: PropTypes.string.isRequired,
+  shape: PropTypes.string,
+  showName: PropTypes.bool
+};
+const BaseSection = _ref2 => {
+  let {
+    title,
+    items,
+    isExpanded,
+    renderItem,
+    display = ["none", "none", "none", "flex"]
+  } = _ref2;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Divider, {
+      light: true,
+      display: ["none", "none", "none", "block"]
+    }), /*#__PURE__*/_jsxs(Flex, {
+      isExpanded: isExpanded,
+      flexDirection: "column",
+      gap: "r",
+      my: isExpanded ? "s" : "0",
+      display: display,
+      children: [isExpanded && /*#__PURE__*/_jsx(H6, {
+        sizing: "small",
+        color: "greyDark",
+        children: title
+      }), /*#__PURE__*/_jsx(ItemList, {
+        isExpanded: isExpanded,
+        children: items.map(item => renderItem(item, isExpanded))
+      })]
+    })]
+  });
+};
+BaseSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  items: PropTypes.array.isRequired,
+  isExpanded: PropTypes.bool,
+  renderItem: PropTypes.func.isRequired,
+  display: PropTypes.array
+};
+BaseSection.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "BaseSection",
+  "props": {
+    "display": {
+      "defaultValue": {
+        "value": "[\"none\", \"none\", \"none\", \"flex\"]",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "array"
+      },
+      "required": false
+    },
+    "title": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": true
+    },
+    "items": {
+      "description": "",
+      "type": {
+        "name": "array"
+      },
+      "required": true
+    },
+    "isExpanded": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "renderItem": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": true
+    }
+  }
+};
+export default BaseSection;
+AvatarLink.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "AvatarLink",
+  "props": {
+    "shape": {
+      "defaultValue": {
+        "value": "\"square\"",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "avatar": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "name": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": true
+    },
+    "link": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": true
+    },
+    "showName": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    }
+  }
+};

package/es/components/SideNavV2/components/CurrentViewSectionPortalTarget.js

@@ -0,0 +1,35 @@
+import React, { useEffect, useRef } from "react";
+import { CURRENT_VIEW_SECTION_ID } from "../constants/sideNav";
+import { jsx as _jsx } from "react/jsx-runtime";
+const CurrentViewSectionPortalTarget = () => {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const container = document.getElementById(CURRENT_VIEW_SECTION_ID);
+      if (container?.children.length > 1) {
+        throw new Error("Only one current view section can be rendered at a time");
+      }
+    });
+    if (containerRef.current) {
+      observer.observe(containerRef.current, {
+        childList: true,
+        // Watch for children being added/removed
+        subtree: false // Set to true if you want to observe all descendants too
+      });
+    }
+    return () => {
+      observer.disconnect(); // Cleanup on unmount
+    };
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    ref: containerRef,
+    id: CURRENT_VIEW_SECTION_ID
+  });
+};
+CurrentViewSectionPortalTarget.propTypes = {};
+CurrentViewSectionPortalTarget.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "CurrentViewSectionPortalTarget"
+};
+export default CurrentViewSectionPortalTarget;

package/es/components/SideNavV2/components/ExpandedPanel.js

@@ -0,0 +1,161 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { SideNavExpanded, ResizeHandle } from "../styles/SideNavV2.styles";
+import PanelControlComponent from "./PanelControl";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ExpandedPanel = _ref => {
+  let {
+    item,
+    expandedItem,
+    isExpanded,
+    expandedWidth,
+    sideNavHeight,
+    isSmallScreen,
+    expandedRef,
+    onResizeStart,
+    onItemClick,
+    onBlur
+  } = _ref;
+  if (item.actionType !== "component" || item.hide) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(SideNavExpanded, {
+    ref: expandedRef,
+    tabIndex: "0",
+    sideNavHeight: sideNavHeight,
+    active: expandedItem,
+    large: item.large,
+    isExpanded: isExpanded,
+    width: expandedWidth,
+    children: [/*#__PURE__*/_jsx(ResizeHandle, {
+      onMouseDown: onResizeStart
+    }), /*#__PURE__*/_jsx(PanelControlComponent, {
+      isExpanded: true,
+      onClick: () => onItemClick(item),
+      ariaLabel: "toggle panel",
+      tooltipText: "Hide panel",
+      direction: "left",
+      position: "absolute",
+      onBlur: () => onBlur(item),
+      isSmallScreen: isSmallScreen
+    }), item.component()]
+  });
+};
+ExpandedPanel.propTypes = {
+  item: PropTypes.shape({
+    actionType: PropTypes.string.isRequired,
+    hide: PropTypes.bool,
+    large: PropTypes.bool,
+    component: PropTypes.func,
+    name: PropTypes.string.isRequired
+  }).isRequired,
+  expandedItem: PropTypes.number,
+  isExpanded: PropTypes.bool,
+  expandedWidth: PropTypes.number,
+  sideNavHeight: PropTypes.string.isRequired,
+  isSmallScreen: PropTypes.bool,
+  expandedRef: PropTypes.object,
+  onResizeStart: PropTypes.func.isRequired,
+  onItemClick: PropTypes.func.isRequired,
+  onBlur: PropTypes.func.isRequired
+};
+ExpandedPanel.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ExpandedPanel",
+  "props": {
+    "item": {
+      "description": "",
+      "type": {
+        "name": "shape",
+        "value": {
+          "actionType": {
+            "name": "string",
+            "required": true
+          },
+          "hide": {
+            "name": "bool",
+            "required": false
+          },
+          "large": {
+            "name": "bool",
+            "required": false
+          },
+          "component": {
+            "name": "func",
+            "required": false
+          },
+          "name": {
+            "name": "string",
+            "required": true
+          }
+        }
+      },
+      "required": true
+    },
+    "expandedItem": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "isExpanded": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "expandedWidth": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "sideNavHeight": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": true
+    },
+    "isSmallScreen": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "expandedRef": {
+      "description": "",
+      "type": {
+        "name": "object"
+      },
+      "required": false
+    },
+    "onResizeStart": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": true
+    },
+    "onItemClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": true
+    },
+    "onBlur": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": true
+    }
+  }
+};
+export default ExpandedPanel;