orcs-design-system 3.3.39 → 3.3.41

package/es/components/SideNavV2/SideNavV2.stories.js

@@ -0,0 +1,382 @@
+/* eslint-disable react/prop-types */
+import React, { useMemo } from "react";
+import { action } from "@storybook/addon-actions";
+import SideNavV2, { SideNavStateProvider } from "./index";
+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";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import Flex from "../Flex";
+import Spacer from "../Spacer/index";
+import Card from "../Card/index";
+import Badge from "../Badge/index";
+import RenderCurrentViewSection from "./components/RenderCurrentViewSection";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+library.add(far);
+export default {
+  title: "Components/SideNavV2",
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    minHeight: "100vh",
+    bg: "greyLightest",
+    boxBorder: "default",
+    children: storyFn()
+  })],
+  component: SideNavV2
+};
+const makeLinkComponent = path => _ref => {
+  let {
+    children,
+    item
+  } = _ref;
+  return /*#__PURE__*/_jsx(Link, {
+    to: path,
+    "aria-label": item.name,
+    children: children
+  });
+};
+const makePanelComponent = (name, children) => () => {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(H5, {
+      fontWeight: "bold",
+      mb: "r",
+      children: name
+    }), /*#__PURE__*/_jsxs(P, {
+      children: [name, " content"]
+    }), children]
+  });
+};
+const teams = {
+  "nebula-ui": {
+    name: "Nebula UI",
+    avatar: "https://images.unsplash.com/photo-1688413399498-e35ed74b554f?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8c3BhY2VzaGlwJTIwZGlnaXRhbCUyMHNjcmVlbnxlbnwwfHwwfHx8MA%3D%3D",
+    shape: "square",
+    type: "Team"
+  },
+  design: {
+    name: "Design",
+    avatar: "https://images.unsplash.com/photo-1602576666092-bf6447a729fc?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dWklMjBkZXNpZ258ZW58MHx8MHx8fDA%3D",
+    shape: "square",
+    type: "Team"
+  },
+  blackhole: {
+    name: "Blackhole",
+    avatar: "https://plus.unsplash.com/premium_photo-1690571200236-0f9098fc6ca9?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YmxhY2tob2xlfGVufDB8fDB8fHww",
+    shape: "square",
+    type: "Team"
+  },
+  engineering: {
+    name: "Engineering",
+    avatar: "https://images.unsplash.com/photo-1515879218367-8466d910aaa4?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29kZXxlbnwwfHwwfHx8MA%3D%3D",
+    shape: "square",
+    type: "Team"
+  }
+};
+const getViewingState = teamId => {
+  return {
+    name: teams[teamId].name,
+    avatar: teams[teamId].avatar,
+    shape: teams[teamId].shape,
+    badge: teams[teamId].type && /*#__PURE__*/_jsx(Badge, {
+      variant: "success",
+      children: teams[teamId].type
+    }),
+    subNav: [{
+      name: "Overview",
+      link: `/teams/${teamId}/overview`
+    }, {
+      name: "Org chart",
+      link: `/teams/${teamId}/org-chart`
+    }, {
+      name: "Strategy",
+      link: `/teams/${teamId}/strategy`
+    }, {
+      name: "Allocations",
+      link: `/teams/${teamId}/allocations`
+    }, {
+      name: "Planning",
+      link: `/teams/${teamId}/planning`
+    }, {
+      name: "Forecast",
+      link: `/teams/${teamId}/forecast`
+    }, {
+      name: "Team interactions",
+      link: `/teams/${teamId}/interactions`
+    }, {
+      name: "History",
+      link: `/teams/${teamId}/history`
+    }]
+  };
+};
+const getPeopleState = personId => {
+  return {
+    name: "James Merrit",
+    badge: /*#__PURE__*/_jsx(Badge, {
+      variant: "success",
+      children: "Engineer"
+    }),
+    avatar: "https://randomuser.me/api/portraits/men/24.jpg",
+    shape: "circle",
+    subNav: [{
+      name: "Details",
+      link: `/people/${personId}/details`
+    }, {
+      name: "Allocations",
+      link: `/people/${personId}/allocations`
+    }, {
+      name: "History",
+      link: `/people/${personId}/history`
+    }]
+  };
+};
+const Teams = () => {
+  const params = useParams();
+  const viewing = useMemo(() => getViewingState(params.teamId), [params.teamId]);
+  return /*#__PURE__*/_jsxs("div", {
+    children: ["Team ", params.teamId, " route", /*#__PURE__*/_jsx(RenderCurrentViewSection, {
+      viewingState: viewing
+    }), /*#__PURE__*/_jsx(Switch, {
+      children: /*#__PURE__*/_jsx(Route, {
+        path: "/teams/:teamId/:subRoute",
+        render: routeProps => /*#__PURE__*/_jsxs("div", {
+          children: ["SUB ROUTE ", routeProps.match.params.subRoute, " route"]
+        })
+      })
+    })]
+  });
+};
+const People = () => {
+  const params = useParams();
+  const viewing = useMemo(() => getPeopleState(params.personId), [params.personId]);
+  return /*#__PURE__*/_jsxs("div", {
+    children: ["People ", params.personId, " route", /*#__PURE__*/_jsx(RenderCurrentViewSection, {
+      viewingState: viewing
+    }), /*#__PURE__*/_jsx(Switch, {
+      children: /*#__PURE__*/_jsx(Route, {
+        path: "/people/:personId/:subRoute",
+        render: routeProps => /*#__PURE__*/_jsxs("div", {
+          children: ["SUB ROUTE ", routeProps.match.params.subRoute, " route", /*#__PURE__*/_jsx(Switch, {
+            children: /*#__PURE__*/_jsx(Route, {
+              path: "/details",
+              render: () => /*#__PURE__*/_jsx("div", {
+                children: "Details route"
+              })
+            })
+          })]
+        })
+      })
+    })]
+  });
+};
+const PinnedItem = () => {
+  const params = useParams();
+  return /*#__PURE__*/_jsxs("div", {
+    children: ["Pinned Item: ", params.itemId, " route"]
+  });
+};
+const PageCard = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Spacer, {
+    px: "r",
+    children: /*#__PURE__*/_jsx(Card, {
+      children: children
+    })
+  });
+};
+const yourTeams = [{
+  avatar: "https://plus.unsplash.com/premium_photo-1690571200236-0f9098fc6ca9?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YmxhY2tob2xlfGVufDB8fDB8fHww",
+  name: "Blackhole",
+  link: "/teams/blackhole/overview"
+}, {
+  avatar: "https://images.unsplash.com/photo-1602576666092-bf6447a729fc?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dWklMjBkZXNpZ258ZW58MHx8MHx8fDA%3D",
+  name: "Design",
+  link: "/teams/design/overview"
+}];
+const pinnedItems = [{
+  avatar: "https://images.unsplash.com/photo-1515879218367-8466d910aaa4?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29kZXxlbnwwfHwwfHx8MA%3D%3D",
+  name: "Engineering",
+  link: "/teams/engineering/overview",
+  shape: "square",
+  onUnpin: action("unpin-engineering")
+}, {
+  avatar: "https://images.unsplash.com/photo-1556741533-e228ee50f8b8?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxzZWFyY2h8MXx8Y3VzdG9tZXJ8ZW58MHx8MHx8fDA%3D",
+  name: "Customer Journey",
+  link: "/pinned/new-account",
+  shape: "hexagon",
+  onUnpin: action("unpin-customer-journey")
+}, {
+  avatar: "https://randomuser.me/api/portraits/men/24.jpg",
+  name: "James Merrit",
+  link: "/people/james-merrit/details",
+  onUnpin: action("unpin-james-merrit"),
+  shape: "circle"
+}];
+const SideBarWithConfig = () => {
+  const location = useLocation();
+  const items = [{
+    iconName: "building",
+    name: "Home",
+    component: makeLinkComponent("/"),
+    actionType: "link",
+    isActive: matchPath(location.pathname, {
+      path: "/",
+      exact: true
+    })
+  }, {
+    iconName: "user",
+    name: "My profile",
+    component: makeLinkComponent("/profile"),
+    actionType: "link",
+    isActive: matchPath(location.pathname, {
+      path: "/profile"
+    })
+  }, {
+    iconName: "id-card",
+    name: "Search Page",
+    component: makeLinkComponent("/search"),
+    actionType: "link",
+    isActive: matchPath(location.pathname, {
+      path: "/search"
+    })
+  }, {
+    iconName: "snowflake",
+    name: "Filter",
+    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: matchPath(location.pathname, {
+      path: "/search"
+    }),
+    isExpandedByDefault: true
+  }, {
+    iconName: "sun",
+    name: "People",
+    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: matchPath(location.pathname, {
+      path: "/profile"
+    }),
+    isExpandedByDefault: true
+  }, {
+    iconName: "bell",
+    name: "Notifications",
+    badgeNumber: "3",
+    // Specify a badgeNumber if you want to have a count on this item
+    component: makePanelComponent("Notifications"),
+    actionType: "component" // Use 'component' for a component
+  }, {
+    iconName: "chart-bar",
+    name: "Browse teams",
+    large: true,
+    // Specify large if you want the expanded sidebar to be wider
+    component: makePanelComponent("BrowseTeams", /*#__PURE__*/_jsx(Flex, {
+      flexDirection: "column",
+      children: Object.keys(teams).map(team => /*#__PURE__*/_jsx(Link, {
+        to: `/teams/${team}/overview`,
+        children: team
+      }, team))
+    })),
+    actionType: "component" // Use 'component' for a component
+  }, {
+    iconName: "cog",
+    name: "Settings",
+    hide: true,
+    // Specify hide if you want to hide this item
+    bottomAligned: true,
+    component: makePanelComponent("Settings"),
+    actionType: "component" // Use 'component' for a component
+  }, {
+    iconName: "calendar-alt",
+    name: "Calendar",
+    pageSpecific: true,
+    // Specify pageSpecific if you want this item to appear below a divider line separating common nav items from page/route specific items
+    component: makePanelComponent("Calendar"),
+    actionType: "component" // Use 'component' for a component
+  }, {
+    iconName: "star",
+    name: "Announcements",
+    badgeDot: true,
+    // Specify if you want to have a blue notification dot on this item
+    bottomAligned: true,
+    // Specify bottomAligned if this item should appear at bottom of SideNav
+    component: makePanelComponent("Announcements"),
+    actionType: "component" // Use 'component' for a component
+  }, {
+    iconName: "times-circle",
+    name: "Logout",
+    bottomAligned: true,
+    // Specify bottomAligned if this item should appear at bottom of SideNav
+    onClick: () => alert("Logout function"),
+    // Specify the onClick function for the button
+    actionType: "button" // Use 'button' for a button with onClick event
+  }
+  // Add more items as needed...
+  ];
+  return /*#__PURE__*/_jsx(Flex, {
+    height: "100vh",
+    children: /*#__PURE__*/_jsxs(SideNavStateProvider, {
+      children: [/*#__PURE__*/_jsx(SideNavV2, {
+        items: items,
+        yourTeams: yourTeams,
+        pinnedItems: pinnedItems
+      }), /*#__PURE__*/_jsxs(Switch, {
+        children: [/*#__PURE__*/_jsx(Route, {
+          exact: true,
+          path: "/",
+          children: /*#__PURE__*/_jsx(PageCard, {
+            children: /*#__PURE__*/_jsx("div", {
+              children: "Home"
+            })
+          })
+        }), /*#__PURE__*/_jsx(Route, {
+          path: "/profile",
+          children: /*#__PURE__*/_jsx(PageCard, {
+            children: /*#__PURE__*/_jsx("div", {
+              children: "Profile route"
+            })
+          })
+        }), /*#__PURE__*/_jsx(Route, {
+          path: "/teams/:teamId",
+          children: /*#__PURE__*/_jsx(PageCard, {
+            children: /*#__PURE__*/_jsx(Teams, {})
+          })
+        }), /*#__PURE__*/_jsx(Route, {
+          path: "/pinned/:itemId",
+          children: /*#__PURE__*/_jsx(PageCard, {
+            children: /*#__PURE__*/_jsx(PinnedItem, {})
+          })
+        }), /*#__PURE__*/_jsx(Route, {
+          path: "/people/:personId",
+          children: /*#__PURE__*/_jsx(PageCard, {
+            children: /*#__PURE__*/_jsx(People, {})
+          })
+        }), /*#__PURE__*/_jsx(Redirect, {
+          from: "/iframe.html",
+          to: "/"
+        })]
+      })]
+    })
+  });
+};
+export const SidebarNavigationV2 = () => {
+  return /*#__PURE__*/_jsx(Router, {
+    children: /*#__PURE__*/_jsx(SideBarWithConfig, {})
+  });
+};
+SidebarNavigationV2.storyName = "Sidebar Navigation";
+SidebarNavigationV2.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SidebarNavigationV2"
+};

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

@@ -0,0 +1,129 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import useResize from "../hooks/useResize";
+import { calculateDesktopWidth, calculateMobileHeight } from "../utils/resizeUtils";
+
+// Mock the resize utilities
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+jest.mock("../utils/resizeUtils", () => ({
+  calculateDesktopWidth: jest.fn(),
+  calculateMobileHeight: jest.fn(),
+  applyResizeCursor: jest.fn(),
+  removeResizeCursor: jest.fn()
+}));
+
+// Test component to use the hook
+const TestComponent = _ref => {
+  let {
+    expandedRef,
+    isSmallScreen,
+    expandedItem,
+    onWidthChange
+  } = _ref;
+  const resizeHandlers = useResize(expandedRef, isSmallScreen, expandedItem, onWidthChange);
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx("div", {
+      "data-testid": "resize-handle",
+      onMouseDown: resizeHandlers.handleResizeStart
+    }), /*#__PURE__*/_jsx("div", {
+      "data-testid": "resize-status",
+      children: resizeHandlers.isResizing ? "resizing" : "not-resizing"
+    })]
+  });
+};
+describe("useResize hook", () => {
+  let mockExpandedRef;
+  let mockOnWidthChange;
+  beforeEach(() => {
+    mockExpandedRef = {
+      current: {
+        style: {
+          height: "300px"
+        },
+        offsetHeight: 300,
+        parentElement: {
+          querySelector: jest.fn().mockReturnValue({
+            getBoundingClientRect: () => ({
+              right: 200
+            })
+          })
+        }
+      }
+    };
+    mockOnWidthChange = jest.fn();
+
+    // Reset mocks
+    jest.clearAllMocks();
+  });
+  it("should initialize with correct default state", () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestComponent, {
+      expandedRef: mockExpandedRef,
+      isSmallScreen: false,
+      expandedItem: 0,
+      onWidthChange: mockOnWidthChange
+    }));
+    expect(getByTestId("resize-status")).toHaveTextContent("not-resizing");
+  });
+  it("should handle resize start correctly", () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestComponent, {
+      expandedRef: mockExpandedRef,
+      isSmallScreen: false,
+      expandedItem: 0,
+      onWidthChange: mockOnWidthChange
+    }));
+    const resizeHandle = getByTestId("resize-handle");
+    fireEvent.mouseDown(resizeHandle);
+    expect(getByTestId("resize-status")).toHaveTextContent("resizing");
+  });
+  it("should call onWidthChange when resizing on desktop", () => {
+    calculateDesktopWidth.mockReturnValue(400);
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestComponent, {
+      expandedRef: mockExpandedRef,
+      isSmallScreen: false,
+      expandedItem: 0,
+      onWidthChange: mockOnWidthChange
+    }));
+
+    // Start resizing
+    const resizeHandle = getByTestId("resize-handle");
+    fireEvent.mouseDown(resizeHandle);
+
+    // Simulate mouse move
+    fireEvent.mouseMove(document, {
+      clientX: 600
+    });
+    expect(calculateDesktopWidth).toHaveBeenCalledWith(600, expect.any(Object));
+    expect(mockOnWidthChange).toHaveBeenCalledWith(400);
+  });
+  it("should handle mobile resize correctly", () => {
+    calculateMobileHeight.mockReturnValue(250);
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestComponent, {
+      expandedRef: mockExpandedRef,
+      isSmallScreen: true,
+      expandedItem: 0,
+      onWidthChange: mockOnWidthChange
+    }));
+
+    // Start resizing
+    const resizeHandle = getByTestId("resize-handle");
+    fireEvent.mouseDown(resizeHandle, {
+      clientY: 100
+    });
+
+    // Simulate mouse move
+    fireEvent.mouseMove(document, {
+      clientY: 150
+    });
+    expect(calculateMobileHeight).toHaveBeenCalledWith(150, 100, 300);
+    expect(mockExpandedRef.current.style.height).toBe("250px");
+  });
+});