orcs-design-system 3.3.55 → 3.3.57

package/es/GlobalStyles.js

@@ -3,5 +3,5 @@ import { themeGet } from "@styled-system/theme-get";
 // GLOBAL STYLES
 // For browser reset, setting global box sizing and font sizing etc.
 
-const GlobalStyles = createGlobalStyle(["html{box-sizing:border-box;line-height:1.15;line-height:calc(2px + 2ex + 2px);}html *{line-height:calc(2px + 2ex + 2px);}*,*:before,*:after{box-sizing:inherit;}html,body{height:100%;width:100%;margin:", ";}body{font-family:", ";color:", ";}html{font-size:62.5%;}body{font-size:", ";}main{display:flex;align-items:stretch;align-content:stretch;width:100%;}section{height:", ";width:100%;overflow-y:scroll;}img{border-style:none;}small{font-size:80%;}p{margin:", ";}h1,h2,h3,h4,h5,h6{font-weight:", ";font-family:", ";margin:", ";}h1{font-size:", "}h2{font-size:", "}h3{font-size:", "}h4{font-size:", "}h5{font-size:", "}h6{font-size:", "}a,p,small,li,h1,h2,h3,h4,h5,h6{word-break:break-word;}"], props => themeGet("space.0")(props), props => themeGet("fonts.main")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("fontSizes.2")(props), props => themeGet("appScale.navBarSize")(props), props => themeGet("space.0")(props), props => themeGet("fontWeights.1")(props), props => themeGet("fonts.main")(props), props => themeGet("space.0")(props), props => themeGet("fontSizes.6")(props), props => themeGet("fontSizes.5")(props), props => themeGet("fontSizes.4")(props), props => themeGet("fontSizes.3")(props), props => themeGet("fontSizes.2")(props), props => themeGet("fontSizes.1")(props));
+const GlobalStyles = createGlobalStyle(["html{box-sizing:border-box;line-height:1.15;line-height:calc(2px + 2ex + 2px);}html *{line-height:calc(2px + 2ex + 2px);}*,*:before,*:after{box-sizing:inherit;}html,body{height:100%;width:100%;margin:", ";}body{font-family:", ";color:", ";}html{font-size:62.5%;}body{font-size:", ";}main{display:flex;align-items:stretch;align-content:stretch;width:100%;}section{height:auto;width:100%;overflow-y:auto;}img{border-style:none;}small{font-size:80%;}p{margin:", ";}h1,h2,h3,h4,h5,h6{font-weight:", ";font-family:", ";margin:", ";}h1{font-size:", "}h2{font-size:", "}h3{font-size:", "}h4{font-size:", "}h5{font-size:", "}h6{font-size:", "}a,p,small,li,h1,h2,h3,h4,h5,h6{word-break:break-word;}"], props => themeGet("space.0")(props), props => themeGet("fonts.main")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("fontSizes.2")(props), props => themeGet("space.0")(props), props => themeGet("fontWeights.1")(props), props => themeGet("fonts.main")(props), props => themeGet("space.0")(props), props => themeGet("fontSizes.6")(props), props => themeGet("fontSizes.5")(props), props => themeGet("fontSizes.4")(props), props => themeGet("fontSizes.3")(props), props => themeGet("fontSizes.2")(props), props => themeGet("fontSizes.1")(props));
 export default GlobalStyles;

package/es/components/SideNavV2/NavItem.js

@@ -6,9 +6,12 @@ import PropTypes from "prop-types";
 import Icon from "../Icon";
 import Popover from "../Popover";
 import { BREAKPOINTS } from "./constants/sideNav";
+
+// Icon column width for consistent grid layout
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const sharedNavItemStyles = styledCss(["cursor:pointer;padding:", ";text-decoration:none;border-radius:", ";width:100%;position:relative;border:none;path{transition:", ";fill:", ";}font-family:", ";display:flex;align-items:center;justify-content:center;transition:", ";background-color:transparent;font-size:1.4rem;font-weight:", ";&:hover,&:focus{color:", ";path{fill:", ";}}@media screen and (max-width:", "px){width:auto;max-height:30px;height:30px;}&:focus{outline:0;color:", ";path{fill:", ";}}"], themeGet("space.s"), themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.greyDarker"), themeGet("fonts.main"), themeGet("transition.transitionDefault"), themeGet("fontWeights.1"), themeGet("colors.primary"), themeGet("colors.primary"), BREAKPOINTS.SMALL_SCREEN, themeGet("colors.primary"), themeGet("colors.primary"));
-const expandedNavItemStyles = props => styledCss(["justify-content:flex-start;gap:", ";.nav-item-text{font-size:", ";line-height:1;font-weight:", ";color:", ";white-space:nowrap;text-overflow:ellipsis;}&:hover .nav-item-text,&:focus .nav-item-text{color:", ";}"], themeGet("space.s"), themeGet("fontSizes.1"), themeGet("fontWeights.1"), props.active ? themeGet("colors.greyDarkest") : themeGet("colors.greyDarker"), props.active ? themeGet("colors.greyDarkest") : themeGet("colors.primary"));
+const ICON_COLUMN_WIDTH = "12px";
+const sharedNavItemStyles = styledCss(["cursor:pointer;padding:", ";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:", ";&:hover,&:focus{color:", ";path{fill:", ";}}@media screen and (max-width:", "px){width:auto;max-height:30px;height:30px;}&:focus{outline:0;color:", ";path{fill:", ";}}"], themeGet("space.s"), themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.greyDarker"), themeGet("fonts.main"), ICON_COLUMN_WIDTH, themeGet("transition.transitionDefault"), themeGet("fontWeights.1"), themeGet("colors.primary"), themeGet("colors.primary"), BREAKPOINTS.SMALL_SCREEN, themeGet("colors.primary"), themeGet("colors.primary"));
+const expandedNavItemStyles = props => styledCss(["grid-template-columns:", " 1fr;gap:8px;place-items:center;.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 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")),
   default: styledCss(["background-color:", ";path{fill:", ";}&:hover,&:focus{path{fill:", ";}}&:focus{path{fill:", ";}}"], themeGet("colors.primaryLightest"), themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"))
@@ -40,7 +43,7 @@ const BadgeNumber = styled("div").withConfig({
   fontWeight: themeGet("fontWeights.2")(props),
   color: themeGet("colors.white")(props),
   borderRadius: "50%",
-  top: props.isExpanded ? "8px" : "0",
+  top: props.isExpanded ? "5px" : "0",
   right: "0",
   display: "flex",
   alignItems: "center",
@@ -55,7 +58,7 @@ const BadgeDot = styled("div").withConfig({
   width: "8px",
   bg: themeGet("colors.primary")(props),
   borderRadius: "50%",
-  top: props.isExpanded ? "12px" : "2px",
+  top: props.isExpanded ? "9px" : "2px",
   right: "0"
 }));
 const SideNavItemWrapper = styled.div.withConfig({

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

@@ -15,11 +15,11 @@ const ItemList = styled.ul.withConfig({
 const ItemName = styled.span.withConfig({
   displayName: "BaseSection__ItemName",
   componentId: "sc-1y67u5l-1"
-})(["margin-left:8px;font-size:", ";"], props => themeGet("fontSizes.1")(props));
+})(["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));
+})(["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:", ";&: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,

package/es/components/TabsAlt/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
+import React, { useState, useRef, useEffect, useCallback, createElement as _createElement } from "react";
 import styled, { css } from "styled-components";
 import { NavLink, useLocation } from "react-router-dom";
 import { isEqual } from "lodash";
@@ -21,10 +21,7 @@ const VisibleTabs = styled.div.withConfig({
   componentId: "sc-hkpvfu-2"
 })(["flex-shrink:1;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;height:inherit;"]);
 const activeTabStyle = css(["background-color:", ";color:", ";border-bottom:2px solid ", ";cursor:default;&:hover,&:focus{background-color:", ";color:", ";box-shadow:none;}"], themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.white"), themeGet("colors.primary"));
-const Tab = styled(NavLink).withConfig({
-  displayName: "TabsAlt__Tab",
-  componentId: "sc-hkpvfu-3"
-})(["width:", ";display:block;transition:background 200ms ease-in-out,color 200ms ease-in-out;border-bottom:2px solid ", ";padding:0 ", ";height:", ";display:flex;align-items:center;font-size:", ";font-weight:", ";position:relative;white-space:nowrap;text-decoration:none;text-align:center;background-color:", ";color:", ";cursor:pointer;", " &:hover{background-color:", ";color:", ";box-shadow:inset 0 2px 5px 0 ", ";}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.active{", "}"], _ref => {
+const TabStyles = css(["width:", ";display:block;transition:background 200ms ease-in-out,color 200ms ease-in-out;border-bottom:2px solid ", ";padding:0 ", ";height:", ";display:flex;align-items:center;font-size:", ";font-weight:", ";position:relative;white-space:nowrap;text-decoration:none;text-align:center;background-color:", ";color:", ";cursor:pointer;", " &:hover{background-color:", ";color:", ";box-shadow:inset 0 2px 5px 0 ", ";}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.active{", "}"], _ref => {
   let {
     fullWidth
   } = _ref;
@@ -35,9 +32,17 @@ const Tab = styled(NavLink).withConfig({
   } = _ref2;
   return tabInShowMore ? css(["position:absolute;visibility:hidden;"]) : "";
 }, themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primaryLightest"), themeGet("colors.primaryLightest"), activeTabStyle);
+const NavTab = styled(NavLink).withConfig({
+  displayName: "TabsAlt__NavTab",
+  componentId: "sc-hkpvfu-3"
+})(["", ""], TabStyles);
+const Tab = styled.div.withConfig({
+  displayName: "TabsAlt__Tab",
+  componentId: "sc-hkpvfu-4"
+})(["", ""], TabStyles);
 const ShowMoreButton = styled.button.withConfig({
   displayName: "TabsAlt__ShowMoreButton",
-  componentId: "sc-hkpvfu-4"
+  componentId: "sc-hkpvfu-5"
 })(["appearance:none;border:none;font-family:", ";font-size:", ";font-weight:", ";background-color:", ";border-bottom:2px solid ", ";transition:", ";padding:0 ", ";height:", ";color:", ";display:", ";align-items:center;cursor:pointer;&:hover{background-color:", ";color:", ";box-shadow:inset 0 2px 5px 0 ", ";}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.hasActive{", "}"], themeGet("fonts.main"), themeGet("fontSizes.1"), themeGet("fontWeights.2"), themeGet("colors.white"), themeGet("colors.greyLighter"), themeGet("transition.transitionDefault"), themeGet("space.4"), themeGet("appScale.tabsHeight"), themeGet("colors.greyDark"), _ref3 => {
   let {
     showMoreVisible
@@ -46,7 +51,7 @@ const ShowMoreButton = styled.button.withConfig({
 }, themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primaryLightest"), themeGet("colors.primaryLightest"), activeTabStyle);
 const ShowMoreTabs = styled.div.withConfig({
   displayName: "TabsAlt__ShowMoreTabs",
-  componentId: "sc-hkpvfu-5"
+  componentId: "sc-hkpvfu-6"
 })(["border-radius:", ";background-color:", ";width:fit-content;overflow:hidden;display:flex;gap:1px;flex-direction:column;justify-content:flex-start;box-shadow:", ";& [class^=\"TabsAlt__Tab\"]{border:0;padding:", ";text-align:left;}"], themeGet("radii.2"), themeGet("colors.greyLighter"), themeGet("shadows.boxDefault"), themeGet("space.3"));
 const tabsGap = 0;
 const TabsAlt = _ref4 => {
@@ -114,6 +119,9 @@ const TabsAlt = _ref4 => {
   const showMoreTabsList = visibleTabsList.filter((_tab, i) => showMoreTabs.includes(i));
   const location = useLocation();
   const showMoreItemActive = showMoreTabsList.find(action => location.pathname.endsWith(action.path));
+  console.log({
+    visibleTabsList
+  });
   return /*#__PURE__*/_jsx(TabsContainer, {
     children: /*#__PURE__*/_jsx(TabWrapper, {
       children: /*#__PURE__*/_jsxs(VisibleTabs, {
@@ -122,15 +130,28 @@ const TabsAlt = _ref4 => {
         },
         ref: containerRef,
         role: "tablist",
-        children: [visibleTabsList.map((tab, i) => /*#__PURE__*/_jsx(Tab, {
-          className: tab.className,
-          id: tab.id,
-          "data-testid": tab["data-testid"],
-          tabInShowMore: showMoreTabs.includes(i),
-          to: tab.path,
-          role: "tab",
-          children: tab.label
-        }, tab.path)), /*#__PURE__*/_jsx(ActionsMenu, {
+        children: [visibleTabsList.map((tab, i) => {
+          const sharedProps = {
+            className: tab.className,
+            id: tab.id,
+            "data-testid": tab["data-testid"],
+            key: tab.path,
+            tabInShowMore: showMoreTabs.includes(i),
+            role: "tab"
+          };
+          if (tab?.onClick) {
+            return /*#__PURE__*/_createElement(Tab, {
+              ...sharedProps,
+              onClick: tab?.onClick,
+              key: tab.id
+            }, tab.label);
+          }
+          return /*#__PURE__*/_createElement(NavTab, {
+            ...sharedProps,
+            to: tab.path,
+            key: tab.id || tab.path
+          }, tab.label);
+        }), /*#__PURE__*/_jsx(ActionsMenu, {
           direction: "bottom-end",
           role: "presentation",
           renderTrigger: props => /*#__PURE__*/_jsxs(ShowMoreButton, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.55",
+  "version": "3.3.57",
   "engines": {
     "node": "20.12.2"
   },