@mailstep/design-system 0.13.9-beta.1 → 0.13.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.13.9-beta.1",
+  "version": "0.13.10",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/SideMenu/MenuItem.js

@@ -1,6 +1,6 @@
 import Icon from "../../Elements/Icon/Icon.js";
 import { Paragraph3, Paragraph5 } from "../../Elements/Typography/Typography.js";
-import { ItemDropdownArrow, ItemIcon, ItemLabel, ItemLinkWrap, ItemsSeparator, MenuItemContainer, OverflowWithEllipsis, SubItemsWrap } from "./styles.js";
+import { ItemCount, ItemDropdownArrow, ItemIcon, ItemLabel, ItemLinkWrap, ItemsSeparator, MenuItemContainer, OverflowWithEllipsis, SubItemsWrap } from "./styles.js";
 import SubitemTooltip from "./components/SubitemTooltip.js";
 import { useLeftMenuContext } from "./context/useLeftMenuContext.js";
 import useOutSideHover from "./hooks/useOutsideHover.js";
@@ -9,7 +9,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { matchPath } from "react-router";
 //#region packages/ui/Blocks/SideMenu/MenuItem.tsx
 const removeOptionalEnd = /\?$/;
-const MenuItem = ({ icon, title, link = "", items, id, isSubitem, isCompact, lightMode = false, separator = false, isLeftMenuOpen, onCloseLeftMenu, onClick }) => {
+const MenuItem = ({ icon, title, link = "", items, id, count, isSubitem, isCompact, lightMode = false, separator = false, isLeftMenuOpen, onCloseLeftMenu, onClick }) => {
 	const hasChildren = items && items?.length > 0;
 	const { expandedItem, expandItem } = useLeftMenuContext();
 	const isExpanded = expandedItem === id;
@@ -61,6 +61,8 @@ const MenuItem = ({ icon, title, link = "", items, id, isSubitem, isCompact, lig
 				$isCompact: isCompact,
 				className: itemLinkWrapClassName,
 				$lightMode: lightMode,
+				$isHovering: isHovering,
+				"data-testid": id ? `menu-item-${id}` : void 0,
 				as: link ? void 0 : "a",
 				...link ? {
 					exact: true,
@@ -70,20 +72,27 @@ const MenuItem = ({ icon, title, link = "", items, id, isSubitem, isCompact, lig
 				children: [/* @__PURE__ */ jsxs(ItemLabel, {
 					$isCompact: isCompact,
 					isSubitem,
-					children: [!isSubitem && icon && /* @__PURE__ */ jsx(ItemIcon, {
-						className: "mainIcon",
-						$isCompact: isCompact,
-						children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
-							icon,
-							fill: "none"
-						}) : icon
-					}), /* @__PURE__ */ jsx(Title, {
-						variant: "semiBold",
-						mt: 0,
-						mb: 0,
-						textAlign: isCompact ? "center" : "left",
-						children: /* @__PURE__ */ jsx(OverflowWithEllipsis, { children: title })
-					})]
+					children: [
+						!isSubitem && icon && /* @__PURE__ */ jsx(ItemIcon, {
+							className: "mainIcon",
+							$isCompact: isCompact,
+							children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
+								icon,
+								fill: "none"
+							}) : icon
+						}),
+						/* @__PURE__ */ jsx(Title, {
+							variant: "semiBold",
+							mt: 0,
+							mb: 0,
+							textAlign: isCompact ? "center" : "left",
+							children: /* @__PURE__ */ jsx(OverflowWithEllipsis, { children: title })
+						}),
+						!!count && /* @__PURE__ */ jsx(ItemCount, {
+							$isCompact: isCompact,
+							children: count
+						})
+					]
 				}), !isCompact && hasChildren && /* @__PURE__ */ jsx(ItemDropdownArrow, {
 					icon: "goDown",
 					$lightMode: lightMode

package/ui/Blocks/SideMenu/SideMenu.js

@@ -1,4 +1,5 @@
 import { useClickOutside } from "../Modal/hooks/useClickOutside.js";
+import { HamburgerMenuButton } from "./components/HamburgerMenu.js";
 import MenuFooter from "./components/Footer.js";
 import { LeftMenuProvider } from "./context/LeftMenuContext.js";
 import { BodyWrap, Container, Overlay, ScrollWrap, TopLevelWrap } from "./styles.js";
@@ -6,7 +7,7 @@ import MenuItem_default from "./MenuItem.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Blocks/SideMenu/SideMenu.tsx
-const SideMenu = ({ menuItems, isCompact, setIsCompact, isLeftMenuOpen, isAlwaysVisible, onCloseLeftMenu, variant = "dark", children }) => {
+const SideMenu = ({ menuItems, isCompact, setIsCompact, isLeftMenuOpen, isAlwaysVisible, onCloseLeftMenu, showHamburgerMenu = false, variant = "dark", children }) => {
 	const lightMode = variant === "light";
 	return /* @__PURE__ */ jsx(LeftMenuProvider, { children: /* @__PURE__ */ jsxs(Container, {
 		isLeftMenuOpen,
@@ -16,21 +17,28 @@ const SideMenu = ({ menuItems, isCompact, setIsCompact, isLeftMenuOpen, isAlways
 			isLeftMenuOpen,
 			ref: useClickOutside({ onClose: onCloseLeftMenu }),
 			lightMode,
-			children: [/* @__PURE__ */ jsx(ScrollWrap, { children: /* @__PURE__ */ jsxs(BodyWrap, {
-				isCompact,
-				children: [menuItems.map((item, index) => /* @__PURE__ */ jsx(MenuItem_default, {
-					isCompact,
+			children: [
+				showHamburgerMenu && /* @__PURE__ */ jsx(HamburgerMenuButton, {
 					isLeftMenuOpen,
-					onCloseLeftMenu,
-					lightMode,
-					separator: !!item.separator,
-					...item
-				}, `${item.id ?? item.title}-${index}`)), children]
-			}) }), /* @__PURE__ */ jsx(MenuFooter, {
-				isCompact,
-				setIsCompact,
-				lightMode
-			})]
+					onClick: onCloseLeftMenu
+				}),
+				/* @__PURE__ */ jsx(ScrollWrap, { children: /* @__PURE__ */ jsxs(BodyWrap, {
+					isCompact,
+					children: [menuItems.map((item, index) => /* @__PURE__ */ jsx(MenuItem_default, {
+						isCompact,
+						isLeftMenuOpen,
+						onCloseLeftMenu,
+						lightMode,
+						separator: !!item.separator,
+						...item
+					}, `${item.id ?? item.title}-${index}`)), children]
+				}) }),
+				/* @__PURE__ */ jsx(MenuFooter, {
+					isCompact,
+					setIsCompact,
+					lightMode
+				})
+			]
 		}), /* @__PURE__ */ jsx(Overlay, {})]
 	}) });
 };

package/ui/Blocks/SideMenu/components/HamburgerMenu.d.ts

@@ -1,6 +1,8 @@
+import React from 'react';
 type Props = {
     isLeftMenuOpen?: boolean;
     onClick?: () => void;
+    mr?: string;
 };
-export declare const HamburgerMenuButton: ({ isLeftMenuOpen, onClick }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const HamburgerMenuButton: ({ isLeftMenuOpen, onClick, mr }: Props) => React.ReactElement;
 export {};

package/ui/Blocks/SideMenu/components/HamburgerMenu.js

@@ -35,11 +35,11 @@ const HamburgerMenuWrapper = styled$2(x.div)`
     display: none;
   }
 `;
-const HamburgerMenuButton = ({ isLeftMenuOpen, onClick }) => {
+const HamburgerMenuButton = ({ isLeftMenuOpen, onClick, mr = "8px" }) => {
 	const theme = useTheme();
-	const neutralColor = th$1.color("neutral20")({ theme });
+	const neutralColor = th$1.color("bgLightGray2")({ theme });
 	return /* @__PURE__ */ jsx(HamburgerMenuWrapper, {
-		mr: "8px",
+		mr,
 		onClick,
 		isLeftMenuOpen: !!isLeftMenuOpen,
 		children: isLeftMenuOpen ? /* @__PURE__ */ jsx(MobileCancel, { fill: neutralColor }) : /* @__PURE__ */ jsx(HamburgerMenu, {

package/ui/Blocks/SideMenu/components/SubitemTooltip.js

@@ -1,12 +1,12 @@
 import { H6 } from "../../../Elements/Typography/Typography.js";
 import { Portal } from "../../../Elements/Portal/index.js";
-import { ItemLinkWrap, TooltipItemLabel, TooltipWrap } from "../styles.js";
+import { ItemCount, ItemLinkWrap, TooltipItemLabel, TooltipWrap } from "../styles.js";
 import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { Popper } from "react-popper";
 //#region packages/ui/Blocks/SideMenu/components/SubitemTooltip.tsx
-const TooltipItem = ({ title, link = "", lightMode }) => {
+const TooltipItem = ({ title, link = "", lightMode, count }) => {
 	return /* @__PURE__ */ jsx(ItemLinkWrap, {
 		...useMemo(() => {
 			return link.startsWith("https://") ? {
@@ -16,14 +16,14 @@ const TooltipItem = ({ title, link = "", lightMode }) => {
 		}, [link]),
 		exact: true,
 		$lightMode: lightMode,
-		children: /* @__PURE__ */ jsx(TooltipItemLabel, { children: /* @__PURE__ */ jsx(H6, {
+		children: /* @__PURE__ */ jsxs(TooltipItemLabel, { children: [/* @__PURE__ */ jsx(H6, {
 			variant: "medium",
 			children: title
-		}) })
+		}), !!count && /* @__PURE__ */ jsx(ItemCount, { children: count })] })
 	});
 };
 const PopoverWrapper = styled.div`
-  z-index: 5;
+  z-index: 31;
   display: ${({ isLeftMenuOpen }) => isLeftMenuOpen ? "block" : "none"};
   @media (min-width: 1024px) {
     display: block;

package/ui/Blocks/SideMenu/stories/menuItems.d.ts

@@ -4,6 +4,7 @@ export declare const menuItems: ({
     link: string;
     id: string;
     items?: undefined;
+    count?: undefined;
 } | {
     title: string;
     icon: import("react/jsx-runtime").JSX.Element;
@@ -14,4 +15,22 @@ export declare const menuItems: ({
         link: string;
         id: string;
     }[];
+    count?: undefined;
+} | {
+    title: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+    link: string;
+    id: string;
+    count: number;
+    items: ({
+        title: string;
+        link: string;
+        id: string;
+        count?: undefined;
+    } | {
+        title: string;
+        link: string;
+        id: string;
+        count: number;
+    })[];
 })[];

package/ui/Blocks/SideMenu/stories/menuItems.js

@@ -53,6 +53,7 @@ const menuItems = [
 		icon: /* @__PURE__ */ jsx(Expeditions, {}),
 		link: "/expeditions",
 		id: "expeditions",
+		count: 3,
 		items: [
 			{
 				title: "Expeditions",
@@ -62,7 +63,8 @@ const menuItems = [
 			{
 				title: "Outbound receipts",
 				link: "/expeditions/outbound-receipts",
-				id: "outboundReceipts"
+				id: "outboundReceipts",
+				count: 3
 			},
 			{
 				title: "Missing goods",

package/ui/Blocks/SideMenu/styles.d.ts

@@ -16,6 +16,7 @@ export declare const TooltipItemLabel: import("styled-components").StyledCompone
 export declare const ItemLinkWrap: import("styled-components").StyledComponent<typeof NavLink, import("@xstyled/styled-components").Theme, {
     $isCompact?: boolean;
     $lightMode?: boolean;
+    $isHovering?: boolean;
     appearance?: "gray" | "default";
 }, never>;
 export declare const MenuItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
@@ -41,3 +42,6 @@ export declare const BodyWrap: import("styled-components").StyledComponent<"div"
     isCompact: boolean;
 }, never>;
 export declare const Overlay: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ItemCount: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {
+    $isCompact?: boolean;
+}, never>;

package/ui/Blocks/SideMenu/styles.js

@@ -67,6 +67,8 @@ const ItemDropdownArrow = styled$1(Icon)`
 const TooltipItemLabel = styled$1.div`
   line-height: 1.5;
   letter-spacing: 0.4px;
+  display: flex;
+  align-items: center;
 `;
 const ItemLinkWrap = styled$1(NavLink)`
   display: flex;
@@ -78,14 +80,17 @@ const ItemLinkWrap = styled$1(NavLink)`
   font-weight: 600;
   letter-spacing: 0.4px;
   position: relative;
-  color: ${({ $lightMode }) => $lightMode ? th$1.color("typoPrimary") : th$1.color("lightGray5")};
+  color: ${({ $lightMode, $isHovering }) => {
+	if ($lightMode) return th$1.color("typoPrimary");
+	if ($isHovering) return "white";
+	return th$1.color("lightGray5");
+}};
   transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
   transition-property: transform;
 
   &.toplevel {
     margin: ${({ $isCompact }) => $isCompact ? "0 0 12px 0" : "16px 0"};
     padding: ${({ $isCompact }) => $isCompact ? "10px 14px 6px 13px" : "9px 10px"};
-    gap: ${({ $isCompact }) => $isCompact ? "none" : "30px"};
     justify-content: ${({ $isCompact }) => $isCompact ? "center" : "space-between"};
     &.active {
       color: ${({ $lightMode }) => $lightMode ? th$1("colors.red1") : "white"};
@@ -130,7 +135,7 @@ const MenuItemContainer = styled$1.div`
    z-index: 1;
    stroke: ${({ $lightMode }) => $lightMode ? th$1.color("blue2") : void 0};
    .selected > ${ItemLabel}, .active > ${ItemLabel} {
-     color: ${({ $lightMode }) => $lightMode ? th$1.color("red1") : th$1.color("white")};
+     color: ${({ $lightMode }) => $lightMode ? th$1.color("red1") : th$1.color("sideMenuSelectedText")};
      stroke: ${({ $lightMode }) => $lightMode ? th$1.color("red1") : th$1.color("blue2")};
    }
 
@@ -230,7 +235,7 @@ const TooltipWrap = styled$1.div`
     top: -50px;
   }
 
-  & :not(:last-child) {
+  & > :not(:last-child) {
     border-radius: 0;
     border-bottom: 0.5px solid ${({ $lightMode }) => $lightMode ? th$1.color("neutral20") : th$1("colors.textTertiary")};
   }
@@ -259,9 +264,10 @@ const OverflowWithEllipsis = styled$1.span`
   max-width: 140px;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 const TopLevelWrap = styled$1.div`
-  background-color: ${({ lightMode }) => lightMode ? "white" : th$1("colors.blue3")};
+  background-color: ${({ lightMode }) => lightMode ? "white" : th$1("colors.sideMenuBackground")};
   border-right: 1px solid ${th$1("colors.lightGray6")};
   height: -webkit-fill-available;
   transition: width 0.5s ease;
@@ -306,5 +312,28 @@ const Overlay = styled$1.div`
     display: none;
   }
 `;
+const ItemCount = styled$1.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: 20px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background-color: #ffffff;
+  color: ${th$1.color("red1")};
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 600;
+  margin-left: 8px;
+
+  ${({ $isCompact }) => $isCompact && css`
+      position: absolute;
+      top: 0;
+      right: 2px;
+      margin-left: 0;
+    `}
+`;
 //#endregion
-export { BodyWrap, Container, ItemDropdownArrow, ItemIcon, ItemLabel, ItemLinkWrap, ItemsSeparator, MenuItemContainer, OverflowWithEllipsis, Overlay, ScrollWrap, SubItemsWrap, TooltipItemLabel, TooltipWrap, TopLevelWrap };
+export { BodyWrap, Container, ItemCount, ItemDropdownArrow, ItemIcon, ItemLabel, ItemLinkWrap, ItemsSeparator, MenuItemContainer, OverflowWithEllipsis, Overlay, ScrollWrap, SubItemsWrap, TooltipItemLabel, TooltipWrap, TopLevelWrap };

package/ui/Blocks/SideMenu/types.d.ts

@@ -10,6 +10,7 @@ export type MenuItemType = {
     lightMode?: boolean;
     separator?: boolean;
     appearance?: 'gray' | 'default';
+    count?: number;
 };
 export type SideMenuProps = {
     menuItems: MenuItemType[];
@@ -18,6 +19,7 @@ export type SideMenuProps = {
     isLeftMenuOpen?: boolean;
     isAlwaysVisible?: boolean;
     onCloseLeftMenu?: () => void;
+    showHamburgerMenu?: boolean;
     variant?: 'dark' | 'light';
     children?: ReactNode;
 };