orcs-design-system 3.3.69 → 3.3.71

package/es/components/SideNavV2/SideNav.js

@@ -47,7 +47,9 @@ const SideNavV2 = _ref => {
     yourTeams,
     pinnedItems,
     startExpanded,
-    onKeepExpandedChange
+    onKeepExpandedChange,
+    renderTeamsSection,
+    renderPinnedSection
   } = _ref;
   const {
     expandedItem,
@@ -111,13 +113,19 @@ const SideNavV2 = _ref => {
         handleItemClick: handleItemClick,
         navItemRefs: navItemRefs,
         showDivider: true
-      }), /*#__PURE__*/_jsx(CurrentViewSectionPortalTarget, {}), yourTeams && yourTeams.length > 0 && /*#__PURE__*/_jsx(SideNavTeamsSection, {
+      }), /*#__PURE__*/_jsx(CurrentViewSectionPortalTarget, {}), yourTeams && yourTeams.length > 0 && (renderTeamsSection ? renderTeamsSection({
+        teams: yourTeams,
+        isExpanded
+      }) : /*#__PURE__*/_jsx(SideNavTeamsSection, {
         teams: yourTeams,
         isExpanded: isExpanded
-      }), pinnedItems && pinnedItems.length > 0 && /*#__PURE__*/_jsx(SideNavPinnedSection, {
+      })), pinnedItems && pinnedItems.length > 0 && (renderPinnedSection ? renderPinnedSection({
+        items: pinnedItems,
+        isExpanded
+      }) : /*#__PURE__*/_jsx(SideNavPinnedSection, {
         items: pinnedItems,
         isExpanded: isExpanded
-      }), /*#__PURE__*/_jsx(ItemSection, {
+      })), /*#__PURE__*/_jsx(ItemSection, {
         items: bottomAlignedItems,
         isExpanded: isExpanded,
         isSmallScreen: isSmallScreen,
@@ -188,7 +196,9 @@ SideNavV2.propTypes = {
     onUnpin: PropTypes.func
   })),
   startExpanded: PropTypes.bool,
-  onKeepExpandedChange: PropTypes.func
+  onKeepExpandedChange: PropTypes.func,
+  renderTeamsSection: PropTypes.func,
+  renderPinnedSection: PropTypes.func
 };
 SideNavV2.__docgenInfo = {
   "description": "SideNavV2 - A responsive side navigation component with expandable panels\n\nFeatures:\n- Responsive design that adapts to mobile and desktop\n- Expandable panels with resizable functionality\n- Hover-based auto-expansion (when enabled)\n- Team and pinned item sections\n- Current view section portal integration\n\n@param {Object} props - Component props\n@param {Array} props.items - Navigation items to display\n@param {string} props.sideNavHeight - Height of the side navigation\n@param {Array} [props.yourTeams] - Teams to display in the teams section\n@param {Array} [props.pinnedItems] - Pinned items to display\n@param {boolean} [props.startExpanded] - Whether the sidebar should start expanded\n@param {(keepExpanded: boolean) => void} [props.onKeepExpandedChange] - Callback when the sidebar is locked open or unlocked\n@returns {JSX.Element} Rendered side navigation",
@@ -358,6 +368,20 @@ SideNavV2.__docgenInfo = {
         "name": "func"
       },
       "required": false
+    },
+    "renderTeamsSection": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "renderPinnedSection": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
     }
   }
 };

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

@@ -12,7 +12,80 @@ import Flex from "../Flex";
 import Spacer from "../Spacer/index";
 import Card from "../Card/index";
 import RenderCurrentViewSection from "./components/RenderCurrentViewSection";
+import Badge from "../Badge";
+import Popover from "../Popover";
+import BaseSection, { AvatarLink, Item } from "./components/BaseSection";
+import Icon from "../Icon";
+import Button from "../Button";
+import Avatar from "../Avatar";
+import styled from "styled-components";
+import themeGet from "@styled-system/theme-get";
+import { variant } from "styled-system";
+
+// Team type bar component for visual indicator
+// Uses styled-system variant to map badge variants to background colors
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const TeamTypeBar = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TeamTypeBar",
+  componentId: "sc-6cqkwa-0"
+})(["width:4px;height:20px;margin-left:2px;flex-shrink:0;border-radius:2px;", ""], variant({
+  prop: "badgeVariant",
+  variants: {
+    success: {
+      bg: "successLightest"
+    },
+    successPending: {
+      bg: "successEvenLighter"
+    },
+    warning: {
+      bg: "warningLightest"
+    },
+    danger: {
+      bg: "dangerLightest"
+    },
+    primaryLight: {
+      bg: "primaryLightest"
+    },
+    primary: {
+      bg: "primaryLighter"
+    },
+    primaryDark: {
+      bg: "primaryLight"
+    },
+    secondary: {
+      bg: "secondaryEvenLighter"
+    },
+    default: {
+      bg: "secondary"
+    }
+  }
+}));
+const BarSpacer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BarSpacer",
+  componentId: "sc-6cqkwa-1"
+})(["width:6px;flex-shrink:0;"]);
+
+// Expanded row wrapper with active/hover states
+const ExpandedRowWrapper = /*#__PURE__*/styled(Flex).withConfig({
+  displayName: "ExpandedRowWrapper",
+  componentId: "sc-6cqkwa-2"
+})(["width:100%;padding:", " ", ";border-radius:", ";transition:", ";&.active{background-color:", ";}&:hover:not(.active){background-color:", ";}"], props => themeGet("space.xxs")(props), props => props.theme.space.xs, props => props.theme.radii[2], props => props.theme.transition.transitionDefault, props => props.theme.colors.primaryLightest, props => props.theme.colors.greyLightest);
+const ItemName = /*#__PURE__*/styled.span.withConfig({
+  displayName: "ItemName",
+  componentId: "sc-6cqkwa-3"
+})(["font-size:", ";display:inline;"], props => themeGet("fontSizes.1")(props));
+const StyledBadge = /*#__PURE__*/styled(Badge).withConfig({
+  displayName: "StyledBadge",
+  componentId: "sc-6cqkwa-4"
+})(["flex-shrink:0;font-size:", ";padding:", " ", ";line-height:1.2;"], props => themeGet("fontSizes.0")(props), props => themeGet("space.xxs")(props), props => themeGet("space.xs")(props));
+const StyledLink = /*#__PURE__*/styled(Link).withConfig({
+  displayName: "StyledLink",
+  componentId: "sc-6cqkwa-5"
+})(["flex:1;min-width:0;max-width:100%;display:flex;align-items:center;gap:", ";overflow:hidden;text-decoration:none;color:inherit;"], props => themeGet("space.xs")(props));
+const StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
+  displayName: "StyledPopover",
+  componentId: "sc-6cqkwa-6"
+})(["margin-left:auto;padding-left:", ";"], props => themeGet("space.xs")(props));
 library.add(far, fas);
 export default {
   title: "Components/SideNavV2",
@@ -182,34 +255,297 @@ const PageCard = _ref2 => {
     })
   });
 };
-const yourTeams = [{
+const yourTeamsWithTypes = [{
   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"
+  link: "/teams/blackhole/overview",
+  type: "Chapter",
+  badgeVariant: "primaryDark",
+  // Purple/pink color
+  id: "blackhole"
 }, {
   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"
+  link: "/teams/design/overview",
+  type: "Agile Group",
+  badgeVariant: "success",
+  // Green color
+  id: "design"
+}, {
+  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",
+  type: "Chapter Area",
+  badgeVariant: "primary",
+  // Blue/purple color
+  id: "engineering"
 }];
-const pinnedItems = [{
+const pinnedItemsWithTypes = [{
   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",
+  type: "Chapter",
+  badgeVariant: "primaryDark",
+  // Purple/pink color
+  entityType: "team",
+  id: "engineering",
   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",
+  type: "Agile Group",
+  badgeVariant: "success",
+  // Green color
+  entityType: "team",
+  id: "customer-journey",
   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"
+  shape: "circle",
+  entityType: "person"
 }];
+
+// Example custom section components with team type bars
+const TeamsSectionWithBadges = _ref3 => {
+  let {
+    teams,
+    isExpanded
+  } = _ref3;
+  const renderTeamItem = (team, expanded) => {
+    const {
+      avatar,
+      name,
+      link,
+      gradient,
+      type,
+      badgeVariant = "success"
+    } = team;
+    if (!name || !link) {
+      return null;
+    }
+    const hasTeamType = Boolean(type);
+    return /*#__PURE__*/_jsx(Item, {
+      isExpanded: expanded,
+      children: expanded ? /*#__PURE__*/_jsxs(ExpandedRowWrapper, {
+        alignItems: "center",
+        gap: "xs",
+        flex: "1",
+        style: {
+          minWidth: 0,
+          width: "100%"
+        },
+        children: [/*#__PURE__*/_jsx(Avatar, {
+          image: avatar,
+          customSize: "24px",
+          shape: "square",
+          gradient: gradient
+        }), hasTeamType && /*#__PURE__*/_jsx(TeamTypeBar, {
+          badgeVariant: badgeVariant
+        }), /*#__PURE__*/_jsx(Popover, {
+          text: /*#__PURE__*/_jsxs(Flex, {
+            flexDirection: "row",
+            flexWrap: "wrap",
+            gap: "xs",
+            alignItems: "center",
+            children: [/*#__PURE__*/_jsx("span", {
+              children: name
+            }), hasTeamType && /*#__PURE__*/_jsx(StyledBadge, {
+              variant: badgeVariant,
+              children: type
+            })]
+          }),
+          direction: "right",
+          width: "fit-content",
+          children: /*#__PURE__*/_jsx(StyledLink, {
+            to: link || "#",
+            "aria-label": name,
+            children: /*#__PURE__*/_jsx(ItemName, {
+              children: name
+            })
+          })
+        })]
+      }) : /*#__PURE__*/_jsx(Popover, {
+        text: /*#__PURE__*/_jsxs(Flex, {
+          flexDirection: "row",
+          flexWrap: "wrap",
+          gap: "xs",
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx("span", {
+            children: name
+          }), hasTeamType && /*#__PURE__*/_jsx(Badge, {
+            variant: badgeVariant,
+            style: {
+              flexShrink: 0,
+              fontSize: "11px",
+              padding: "2px 6px",
+              lineHeight: "1.2"
+            },
+            children: type
+          })]
+        }),
+        direction: "right",
+        width: "fit-content",
+        children: /*#__PURE__*/_jsxs(Flex, {
+          alignItems: "center",
+          gap: "xs",
+          children: [/*#__PURE__*/_jsx(AvatarLink, {
+            avatar: avatar,
+            name: name,
+            link: link,
+            shape: "square",
+            showName: false,
+            gradient: gradient
+          }), hasTeamType && /*#__PURE__*/_jsx(TeamTypeBar, {
+            badgeVariant: badgeVariant
+          })]
+        })
+      })
+    }, name);
+  };
+  return /*#__PURE__*/_jsx(BaseSection, {
+    title: "My Teams",
+    items: teams || [],
+    isExpanded: isExpanded,
+    renderItem: renderTeamItem
+  });
+};
+const PinnedSectionWithBadges = _ref4 => {
+  let {
+    items,
+    isExpanded
+  } = _ref4;
+  const renderPinnedItem = (item, expanded) => {
+    const {
+      avatar,
+      name,
+      link,
+      shape,
+      onUnpin,
+      gradient,
+      type,
+      entityType,
+      badgeVariant = "success"
+    } = item;
+    if (!name || !link) {
+      return null;
+    }
+    const showTeamType = entityType === "team" && type;
+    return /*#__PURE__*/_jsx(Item, {
+      isExpanded: expanded,
+      alignRight: !expanded && showTeamType,
+      children: expanded ? /*#__PURE__*/_jsxs(ExpandedRowWrapper, {
+        alignItems: "center",
+        gap: "xs",
+        flex: "1",
+        style: {
+          minWidth: 0,
+          width: "100%"
+        },
+        children: [/*#__PURE__*/_jsx(Avatar, {
+          image: avatar,
+          customSize: "24px",
+          shape: shape,
+          gradient: gradient
+        }), showTeamType ? /*#__PURE__*/_jsx(TeamTypeBar, {
+          badgeVariant: badgeVariant
+        }) : /*#__PURE__*/_jsx(BarSpacer, {}), /*#__PURE__*/_jsx(Popover, {
+          text: /*#__PURE__*/_jsxs(Flex, {
+            flexDirection: "row",
+            flexWrap: "wrap",
+            gap: "xs",
+            alignItems: "center",
+            children: [/*#__PURE__*/_jsx("span", {
+              children: name
+            }), showTeamType && /*#__PURE__*/_jsx(Badge, {
+              variant: badgeVariant,
+              style: {
+                flexShrink: 0,
+                fontSize: "11px",
+                padding: "2px 6px",
+                lineHeight: "1.2"
+              },
+              children: type
+            })]
+          }),
+          direction: "right",
+          width: "fit-content",
+          children: /*#__PURE__*/_jsx(StyledLink, {
+            to: link || "#",
+            "aria-label": name,
+            children: /*#__PURE__*/_jsx(ItemName, {
+              children: name
+            })
+          })
+        }), /*#__PURE__*/_jsx(StyledPopover, {
+          text: "Unpin item",
+          direction: "right",
+          width: "fit-content",
+          tabIndex: "-1",
+          children: /*#__PURE__*/_jsx(Button, {
+            height: "20px",
+            width: "20px",
+            borderRadius: "20px",
+            variant: "borderGrey",
+            borderColor: "white",
+            onClick: () => onUnpin?.(item),
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: ["fas", "thumbtack"],
+              color: "greyDarkest",
+              size: "sm"
+            })
+          })
+        })]
+      }) : /*#__PURE__*/_jsx(Popover, {
+        text: /*#__PURE__*/_jsxs(Flex, {
+          flexDirection: "row",
+          flexWrap: "wrap",
+          gap: "xs",
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx("span", {
+            children: name
+          }), showTeamType && /*#__PURE__*/_jsx(Badge, {
+            variant: badgeVariant,
+            style: {
+              flexShrink: 0,
+              fontSize: "11px",
+              padding: "2px 6px",
+              lineHeight: "1.2"
+            },
+            children: type
+          })]
+        }),
+        direction: "right",
+        width: "fit-content",
+        children: /*#__PURE__*/_jsxs(Flex, {
+          alignItems: "center",
+          gap: "xs",
+          children: [/*#__PURE__*/_jsx(AvatarLink, {
+            avatar: avatar,
+            name: name,
+            link: link,
+            shape: shape,
+            showName: false,
+            gradient: gradient
+          }), showTeamType && /*#__PURE__*/_jsx(TeamTypeBar, {
+            badgeVariant: badgeVariant
+          })]
+        })
+      })
+    }, name);
+  };
+  return /*#__PURE__*/_jsx(BaseSection, {
+    title: "Pinned",
+    items: items || [],
+    isExpanded: isExpanded,
+    renderItem: renderPinnedItem
+  });
+};
 const SideBarWithConfig = () => {
   const location = useLocation();
   const items = [{
@@ -321,10 +657,30 @@ const SideBarWithConfig = () => {
     children: /*#__PURE__*/_jsxs(SideNavStateProvider, {
       children: [/*#__PURE__*/_jsx(SideNavV2, {
         items: items,
-        yourTeams: yourTeams,
-        pinnedItems: pinnedItems,
+        yourTeams: yourTeamsWithTypes,
+        pinnedItems: pinnedItemsWithTypes,
         sideNavHeight: "100vh",
-        startExpanded: true
+        startExpanded: true,
+        renderTeamsSection: _ref5 => {
+          let {
+            teams,
+            isExpanded
+          } = _ref5;
+          return /*#__PURE__*/_jsx(TeamsSectionWithBadges, {
+            teams: teams,
+            isExpanded: isExpanded
+          });
+        },
+        renderPinnedSection: _ref6 => {
+          let {
+            items: pinned,
+            isExpanded
+          } = _ref6;
+          return /*#__PURE__*/_jsx(PinnedSectionWithBadges, {
+            items: pinned,
+            isExpanded: isExpanded
+          });
+        }
       }), /*#__PURE__*/_jsxs(Switch, {
         children: [/*#__PURE__*/_jsx(Route, {
           exact: true,

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

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 const ItemList = /*#__PURE__*/styled.ul.withConfig({
   displayName: "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));
+})(["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.xs")(props));
 const ItemName = /*#__PURE__*/styled.span.withConfig({
   displayName: "ItemName",
   componentId: "sc-1y67u5l-1"
@@ -19,7 +19,17 @@ const ItemName = /*#__PURE__*/styled.span.withConfig({
 export const Item = /*#__PURE__*/styled.li.withConfig({
   displayName: "Item",
   componentId: "sc-1y67u5l-2"
-})(["display:flex;width:100%;gap:", ";justify-content:space-between;align-items:center;a{display:flex;gap:8px;align-items:center;font-size:", ";text-decoration:none;color:", ";padding:", ";border-radius:", ";flex:1;transition:", ";&:hover,&:focus{outline:none;color:", ";}&.active{background-color:", ";color:", ";}}"], props => themeGet("space.xs")(props), props => themeGet("fontSizes.1")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("space.xs")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primaryLightest")(props), props => themeGet("colors.greyDarkest")(props));
+})(["display:flex;width:100%;gap:", ";justify-content:", ";align-items:center;a{display:flex;gap:8px;align-items:center;font-size:", ";text-decoration:none;color:", ";padding:", ";border-radius:", ";flex:1;transition:", ";&:hover,&:focus{outline:none;color:", ";}&.active{background-color:", ";color:", ";}}"], props => themeGet("space.xs")(props), props => {
+  if (props.isExpanded) {
+    return "space-between";
+  }
+  // When collapsed, pinned items should be right-aligned, teams should be centered
+  // Only apply flex-end if alignRight is explicitly true
+  if (props.alignRight) {
+    return "flex-end";
+  }
+  return "center";
+}, props => themeGet("fontSizes.1")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("space.xs")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primaryLightest")(props), props => themeGet("colors.greyDarkest")(props));
 export const AvatarLink = _ref => {
   let {
     avatar,

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.69",
+  "version": "3.3.71",
   "engines": {
-    "node": "22.21.0"
+    "node": ">=20.0.0"
   },
   "description": "TeamForm's Design System, aka: ORCS",
   "keywords": [
@@ -47,15 +47,15 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@floating-ui/react": "^0.26.19",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/material": "^5.16.7",
-    "@mui/x-date-pickers": "^7.14.0",
+    "@mui/icons-material": "^6.5.0",
+    "@mui/material": "^6.5.0",
+    "@mui/x-date-pickers": "^8.16.0",
     "@styled-system/css": "^5.1.5",
     "@styled-system/prop-types": "^5.1.5",
     "@styled-system/should-forward-prop": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",
     "focus-trap-react": "^10.2.3",
-    "material-react-table": "^2.13.2",
+    "material-react-table": "^3.2.1",
     "polished": "^3.7.1",
     "prop-types": "^15.6.2",
     "react-app-polyfill": "^2.0.0",
@@ -79,7 +79,7 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/runtime": "^7.12.5",
-    "@chromatic-com/storybook": "^1.5.0",
+    "@chromatic-com/storybook": "^1.9.0",
     "@fortawesome/fontawesome-svg-core": "file:libs/fortawesome-fontawesome-svg-core-1.3.0.tgz",
     "@fortawesome/free-regular-svg-icons": "^5.15.1",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
@@ -226,4 +226,4 @@
   "eslintConfig": {
     "extends": "react-app"
   }
-}
+}