orcs-design-system 3.3.75 → 3.3.76

package/es/components/SideNavV2/NavItem.js

@@ -11,10 +11,16 @@ import sharedNavItemHoverStyles, { sharedNavItemActiveStylesProps } from "./styl
 // Icon column width for consistent grid layout
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_COLUMN_WIDTH = "12px";
+
+// Constrain icon width to prevent alignment issues with variable-width icons
+const IconWrapper = /*#__PURE__*/styled.span.withConfig({
+  displayName: "IconWrapper",
+  componentId: "sc-1qz1q0h-0"
+})(["display:inline-flex;align-items:center;justify-content:center;width:", ";flex-shrink:0;> *{width:", " !important;max-width:", ";}"], ICON_COLUMN_WIDTH, ICON_COLUMN_WIDTH, ICON_COLUMN_WIDTH);
 const sharedNavItemStyles = /*#__PURE__*/styledCss(["cursor:pointer;text-decoration:none;border-radius:", ";width:100%;position:relative;border:none;path{transition:", ";fill:", ";}font-family:", ";display:grid;grid-template-columns:", ";place-items:center;transition:", ";background-color:transparent;font-size:1.4rem;font-weight:", ";", " @media screen and (max-width:", "px){width:auto;max-height:30px;height:30px;}&:focus{outline:0;}"], themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.greyDarker"), themeGet("fonts.main"), ICON_COLUMN_WIDTH, themeGet("transition.transitionDefault"), themeGet("fontWeights.1"), sharedNavItemHoverStyles, BREAKPOINTS.SMALL_SCREEN);
-const expandedNavItemStyles = props => styledCss(["grid-template-columns:", " 1fr;gap:8px;justify-items:start;align-items:center;padding-left:0;.nav-item-text{font-size:", ";line-height:1;font-weight:", ";color:", ";text-align:left;justify-self:start;}&:hover .nav-item-text,&:focus .nav-item-text{color:", ";}"], ICON_COLUMN_WIDTH, themeGet("fontSizes.1"), themeGet("fontWeights.1"), props.active ? themeGet("colors.greyDarkest") : themeGet("colors.greyDarker"), props.active ? themeGet("colors.greyDarkest") : themeGet("colors.primary"));
+const expandedNavItemStyles = props => styledCss(["grid-template-columns:", " 1fr;gap:", ";justify-items:start;align-items:center;padding-left:0;.nav-item-text{font-size:", ";line-height:1;font-weight:", ";color:", ";text-align:left;justify-self:start;padding-left:", ";}&:hover .nav-item-text,&:focus .nav-item-text{color:", ";}"], ICON_COLUMN_WIDTH, themeGet("space.s"), themeGet("fontSizes.1"), themeGet("fontWeights.1"), props.active ? themeGet("colors.greyDarkest") : themeGet("colors.greyDarker"), themeGet("space.s"), 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;}&:hover .nav-item-text,&:focus .nav-item-text{color:", ";}@media screen and (max-width:", "px){:after{border-top:3px solid ", ";border-right:none;transform:translateY(-10px);right:auto;width:100%;}}"], themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"), props.isExpanded ? "translateX(9px)" : "translateX(8px)", themeGet("colors.primary"), themeGet("colors.primary"), BREAKPOINTS.SMALL_SCREEN, themeGet("colors.primary")),
+  expandableItem: () => styledCss(["color:", ";path{fill:", ";}:after{height:calc(100% + ", " + ", ");position:absolute;right:-", ";top:-", ";content:\"\";border-right:3px solid ", ";z-index:5;}&:hover .nav-item-text,&:focus .nav-item-text{color:", ";}@media screen and (max-width:", "px){:after{border-top:3px solid ", ";border-right:none;transform:translateY(-10px);right:auto;width:100%;}}"], themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"), themeGet("space.xs"), themeGet("space.xs"), themeGet("space.xs"), themeGet("space.xs"), themeGet("colors.primary"), themeGet("colors.primary"), BREAKPOINTS.SMALL_SCREEN, themeGet("colors.primary")),
   default: styledCss(["", ""], props => sharedNavItemActiveStylesProps(props))
 };
 const getActiveStyles = props => {
@@ -26,15 +32,15 @@ const getActiveStyles = props => {
 };
 const SideNavItemLink = /*#__PURE__*/styled.div.withConfig({
   displayName: "SideNavItemLink",
-  componentId: "sc-1qz1q0h-0"
+  componentId: "sc-1qz1q0h-1"
 })(["& > a{", " ", " ", "}"], sharedNavItemStyles, props => props.isExpanded ? expandedNavItemStyles(props) : "", getActiveStyles);
 const SideNavItem = /*#__PURE__*/styled("button").withConfig({
   displayName: "SideNavItem",
-  componentId: "sc-1qz1q0h-1"
+  componentId: "sc-1qz1q0h-2"
 })(["", " ", " ", ""], sharedNavItemStyles, props => props.isExpanded ? expandedNavItemStyles(props) : "", getActiveStyles);
 const BadgeNumber = /*#__PURE__*/styled("div").withConfig({
   displayName: "BadgeNumber",
-  componentId: "sc-1qz1q0h-2"
+  componentId: "sc-1qz1q0h-3"
 })(props => css({
   position: "absolute",
   height: "16px",
@@ -53,7 +59,7 @@ const BadgeNumber = /*#__PURE__*/styled("div").withConfig({
 }));
 const BadgeDot = /*#__PURE__*/styled("div").withConfig({
   displayName: "BadgeDot",
-  componentId: "sc-1qz1q0h-3"
+  componentId: "sc-1qz1q0h-4"
 })(props => css({
   position: "absolute",
   height: "8px",
@@ -66,9 +72,9 @@ const BadgeDot = /*#__PURE__*/styled("div").withConfig({
 }));
 const SideNavItemWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "SideNavItemWrapper",
-  componentId: "sc-1qz1q0h-4"
+  componentId: "sc-1qz1q0h-5"
 })(props => css({
-  padding: themeGet("space.m")(props),
+  padding: themeGet("space.xs")(props),
   borderRadius: themeGet("radii.2")(props),
   width: "100%",
   "&:nth-child(1 of .bottom-aligned) ": {
@@ -77,11 +83,11 @@ const SideNavItemWrapper = /*#__PURE__*/styled.div.withConfig({
   "&:has(button:hover), &:has(a:hover)": {
     backgroundColor: themeGet("colors.greyLightest")(props)
   },
-  "&:has(button.active), &:has(a.active)": {
+  ...(props.isActive && props.isLink && {
     backgroundColor: themeGet("colors.primaryLightest")(props)
-  },
+  }),
   [`@media screen and (max-width: ${BREAKPOINTS.SMALL_SCREEN}px)`]: {
-    padding: themeGet("space.m")(props)
+    padding: themeGet("space.xs")(props)
   }
 }));
 
@@ -131,8 +137,11 @@ const NavItem = _ref => {
         ref: el => navItemRefs.current[item.index] = el,
         children: /*#__PURE__*/_jsxs(Component, {
           item: item,
-          children: [/*#__PURE__*/_jsx(Icon, {
-            icon: ["far", item.iconName]
+          children: [/*#__PURE__*/_jsx(IconWrapper, {
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: ["far", item.iconName],
+              fixedWidth: true
+            })
           }), isExpanded && !isSmallScreen && /*#__PURE__*/_jsx("span", {
             className: "nav-item-text",
             children: item.name
@@ -152,8 +161,11 @@ const NavItem = _ref => {
           children: item.badgeNumber
         }), item.badgeDot && /*#__PURE__*/_jsx(BadgeDot, {
           isExpanded: isExpanded
-        }), /*#__PURE__*/_jsx(Icon, {
-          icon: ["far", item.iconName]
+        }), /*#__PURE__*/_jsx(IconWrapper, {
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: ["far", item.iconName],
+            fixedWidth: true
+          })
         }), isExpanded && !isSmallScreen && /*#__PURE__*/_jsx("span", {
           className: "nav-item-text",
           children: item.name
@@ -171,6 +183,8 @@ const NavItem = _ref => {
   }) : /*#__PURE__*/_jsx(SideNavItemWrapper, {
     className: item.bottomAligned && "bottom-aligned",
     bottomAligned: item.bottomAligned,
+    isActive: isActive,
+    isLink: item.actionType === "link",
     children: renderedNavItem
   });
 };

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

@@ -0,0 +1,90 @@
+import React from "react";
+import { BrowserRouter as Router } from "react-router-dom";
+import PanelLink from "./components/PanelLink";
+import Box from "../Box";
+import { H5 } from "../Typography";
+import Divider from "../Divider";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: "Components/SideNavV2/PanelLink",
+  component: PanelLink,
+  decorators: [Story => /*#__PURE__*/_jsx(Router, {
+    children: /*#__PURE__*/_jsx(Story, {})
+  })]
+};
+const Template = args => /*#__PURE__*/_jsx(PanelLink, {
+  ...args
+});
+export const Default = Template.bind({});
+Default.args = {
+  to: "/settings",
+  children: "Settings Link"
+};
+export const Active = Template.bind({});
+Active.args = {
+  to: "#",
+  children: "Active Link",
+  className: "active"
+};
+export const MenuExample = () => /*#__PURE__*/_jsxs(Box, {
+  width: "300px",
+  p: "r",
+  bg: "white",
+  boxBorder: "default",
+  borderRadius: 2,
+  children: [/*#__PURE__*/_jsx(H5, {
+    fontWeight: "bold",
+    mb: "r",
+    children: "Settings"
+  }), /*#__PURE__*/_jsx(Divider, {
+    light: true,
+    mb: "s"
+  }), /*#__PURE__*/_jsx(PanelLink, {
+    to: "/settings/workspace",
+    children: "Workspace settings"
+  }), /*#__PURE__*/_jsx(PanelLink, {
+    to: "/settings/org-structure",
+    children: "Org structure"
+  }), /*#__PURE__*/_jsx(PanelLink, {
+    to: "/settings/tags",
+    className: "active",
+    children: "Manage tags"
+  }), /*#__PURE__*/_jsx(PanelLink, {
+    to: "/settings/allocation",
+    children: "Allocation config"
+  }), /*#__PURE__*/_jsx(PanelLink, {
+    to: "/settings/planner",
+    children: "Planner config"
+  }), /*#__PURE__*/_jsx(Divider, {
+    light: true,
+    my: "s"
+  }), /*#__PURE__*/_jsx(H5, {
+    fontSize: "1.4rem",
+    fontWeight: "bold",
+    color: "greyDark",
+    uppercase: true,
+    mb: "s",
+    children: "Configure workspace"
+  }), /*#__PURE__*/_jsx(PanelLink, {
+    to: "/settings/forecast",
+    children: "Forecast config"
+  }), /*#__PURE__*/_jsx(PanelLink, {
+    to: "/settings/strategy",
+    children: "Strategy config"
+  }), /*#__PURE__*/_jsx(PanelLink, {
+    to: "/settings/group-access",
+    children: "Group access"
+  })]
+});
+MenuExample.parameters = {
+  docs: {
+    description: {
+      story: "Example of PanelLink used in a menu structure. Shows grey hover state and blue active state."
+    }
+  }
+};
+MenuExample.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "MenuExample"
+};

package/es/components/SideNavV2/components/PanelLink.js

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import { NavLink } from "react-router-dom";
+import themeGet from "@styled-system/theme-get";
+import sharedNavItemHoverStyles, { sharedNavItemActiveStyles, sharedNavItemBaseStyles } from "../styles/sharedHoverStyles";
+
+/**
+ * PanelLink - A reusable link component for expandable panel menus
+ *
+ * Provides consistent styling for links within SideNav expandable panels:
+ * - Grey background on hover
+ * - Blue background when active
+ * - Consistent padding and spacing
+ * - Proper border radius
+ *
+ * Use this for all navigation links within expandable panels (Settings, Tags, Teams, etc.)
+ * to ensure visual consistency across the application.
+ *
+ * @example
+ * ```jsx
+ * <PanelLink to="/settings/workspace">
+ *   Workspace Settings
+ * </PanelLink>
+ * ```
+ */
+const PanelLink = /*#__PURE__*/styled(NavLink).withConfig({
+  displayName: "PanelLink",
+  componentId: "sc-1awj6t8-0"
+})(["font-size:", ";cursor:pointer;padding:", ";text-decoration:none;display:block;width:100%;", " ", " ", ""], themeGet("fontSizes.1"), themeGet("space.xs"), sharedNavItemBaseStyles, sharedNavItemHoverStyles, sharedNavItemActiveStyles);
+export default PanelLink;

package/es/components/SideNavV2/index.js

@@ -1,4 +1,5 @@
 export { SideNavStateProvider, useSideNavStateContext } from "./context/SideNavStateProvider";
 export { default as RenderCurrentViewSection } from "./components/RenderCurrentViewSection";
+export { default as PanelLink } from "./components/PanelLink";
 export { default as SideNavV2 } from "./SideNav";
 export { default } from "./SideNav";

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

@@ -13,11 +13,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SubNavList = /*#__PURE__*/styled.ul.withConfig({
   displayName: "SubNavList",
   componentId: "sc-12clz4a-0"
-})(["list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;width:100%;"]);
+})(["list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:", ";width:100%;"], themeGet("space.xs"));
 const StyledNavLink = /*#__PURE__*/styled(NavLink).withConfig({
   displayName: "StyledNavLink",
   componentId: "sc-12clz4a-1"
-})(["font-size:", ";cursor:pointer;padding:5px 7px;text-decoration:none;", " ", " ", ""], themeGet("fontSizes.1"), sharedNavItemBaseStyles, sharedNavItemHoverStyles, sharedNavItemActiveStyles);
+})(["font-size:", ";cursor:pointer;padding:", ";text-decoration:none;display:block;width:100%;", " ", " ", ""], themeGet("fontSizes.1"), themeGet("space.xs"), sharedNavItemBaseStyles, sharedNavItemHoverStyles, sharedNavItemActiveStyles);
 const UnstyledNavLink = /*#__PURE__*/styled(NavLink).withConfig({
   displayName: "UnstyledNavLink",
   componentId: "sc-12clz4a-2"

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

@@ -51,7 +51,7 @@ export const SideNavItems = /*#__PURE__*/styled("div").withConfig({
   flexShrink: "0",
   flexGrow: "1",
   padding: "10px 10px 10px 10px",
-  gap: "xs",
+  gap: "s",
   alignItems: "center",
   justifyContent: "flex-start",
   textAlign: "center",

package/es/components.test.js

@@ -41,6 +41,7 @@ test("all components exported", () => {
       "Modal",
       "Notification",
       "P",
+      "PanelLink",
       "Popover",
       "ProgressBar",
       "Quote",

package/es/index.js

@@ -35,7 +35,7 @@ export { default as ProgressBar } from "./components/ProgressBar";
 export { default as RadioButton } from "./components/RadioButton";
 export { default as Range } from "./components/Range";
 export { default as Select } from "./components/Select";
-export { default as SideNavV2, SideNavStateProvider, useSideNavStateContext, RenderCurrentViewSection } from "./components/SideNavV2";
+export { default as SideNavV2, SideNavStateProvider, useSideNavStateContext, RenderCurrentViewSection, PanelLink } from "./components/SideNavV2";
 export { default as Spacer } from "./components/Spacer";
 export { default as StatusDot } from "./components/StatusDot";
 export { default as StyledLink, styleLink } from "./components/StyledLink";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.75",
+  "version": "3.3.76",
   "engines": {
     "node": ">=20.0.0"
   },