@mailstep/design-system 0.8.46 → 0.8.47

package/package.json

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

package/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.d.ts

@@ -4,6 +4,7 @@ import type { HeaderVariant } from '../../../../types';
 type MenuItemProps = {
     item: MenuItemType;
     variant?: HeaderVariant;
+    iconsBreakpoint?: string;
 };
 export declare const MenuItem: FC<MenuItemProps>;
 export {};

package/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.js

@@ -1,10 +1,10 @@
 import Icon from "../../../../../../Elements/Icon/Icon.js";
-import { MenuItemDropdownArrow, MenuItemLabel, MenuItemsListItem, SubMenuItemRow, SubMenuList } from "../../styles.js";
+import { MenuItemDropdownArrow, MenuItemIcon, MenuItemLabel, MenuItemsListItem, SubMenuItemRow, SubMenuList } from "../../styles.js";
 import { isItemActive, isLinkExactActive } from "./utils/isItemActive.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Link, useLocation } from "react-router-dom";
 //#region packages/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.tsx
-const MenuItem = ({ item, variant = "light" }) => {
+const MenuItem = ({ item, variant = "light", iconsBreakpoint }) => {
 	const hasSubmenu = Array.isArray(item.items) && item.items.length > 0;
 	const { pathname, search } = useLocation();
 	const isActive = isItemActive(pathname, item);
@@ -14,10 +14,20 @@ const MenuItem = ({ item, variant = "light" }) => {
 		$isActive: isActive,
 		children: [/* @__PURE__ */ jsxs(MenuItemLabel, {
 			onClick: item.onClick,
-			children: [item.link && !hasSubmenu ? /* @__PURE__ */ jsx(Link, {
-				to: item.link,
-				children: item.title
-			}) : /* @__PURE__ */ jsx("span", { children: item.title }), hasSubmenu && /* @__PURE__ */ jsx(MenuItemDropdownArrow, { children: /* @__PURE__ */ jsx(Icon, { icon: "goDown" }) })]
+			children: [
+				item.icon && /* @__PURE__ */ jsx(MenuItemIcon, {
+					$iconsBreakpoint: iconsBreakpoint,
+					children: typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, {
+						icon: item.icon,
+						size: 18
+					}) : item.icon
+				}),
+				item.link && !hasSubmenu ? /* @__PURE__ */ jsx(Link, {
+					to: item.link,
+					children: item.title
+				}) : /* @__PURE__ */ jsx("span", { children: item.title }),
+				hasSubmenu && /* @__PURE__ */ jsx(MenuItemDropdownArrow, { children: /* @__PURE__ */ jsx(Icon, { icon: "goDown" }) })
+			]
 		}), hasSubmenu && /* @__PURE__ */ jsx(SubMenuList, { children: item.items?.map((subItem, key) => /* @__PURE__ */ jsx(SubMenuItemRow, {
 			pointer: !!subItem.onClick,
 			onClick: subItem.onClick,

package/ui/Blocks/Header/components/MenuItems/index.d.ts

@@ -4,6 +4,7 @@ import type { HeaderVariant } from '../../types';
 type MenuItemsProps = {
     items?: MenuItemType[];
     variant?: HeaderVariant;
+    iconsBreakpoint?: string;
 };
 export declare const MenuItems: FC<MenuItemsProps>;
 export {};

package/ui/Blocks/Header/components/MenuItems/index.js

@@ -2,10 +2,11 @@ import { MenuItemsList } from "./styles.js";
 import { MenuItem } from "./components/MenuItem/index.js";
 import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Blocks/Header/components/MenuItems/index.tsx
-const MenuItems = ({ items, variant = "light" }) => {
+const MenuItems = ({ items, variant = "light", iconsBreakpoint }) => {
 	return /* @__PURE__ */ jsx(MenuItemsList, { children: items?.map((item, key) => /* @__PURE__ */ jsx(MenuItem, {
 		item,
-		variant
+		variant,
+		iconsBreakpoint
 	}, key)) });
 };
 //#endregion

package/ui/Blocks/Header/components/MenuItems/styles.d.ts

@@ -7,6 +7,9 @@ export declare const MenuItemsListItem: import("styled-components").StyledCompon
     $isActive?: boolean;
 }, never>;
 export declare const MenuItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const MenuItemIcon: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {
+    $iconsBreakpoint?: string;
+}, never>;
 export declare const MenuItemDropdownArrow: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
 export declare const SubMenuItemRow: import("styled-components").StyledComponent<"li", import("@xstyled/styled-components").Theme, {
     pointer?: boolean;

package/ui/Blocks/Header/components/MenuItems/styles.js

@@ -1,4 +1,4 @@
-import styled$1, { th } from "@xstyled/styled-components";
+import styled$1, { css, th } from "@xstyled/styled-components";
 //#region packages/ui/Blocks/Header/components/MenuItems/styles.ts
 const MenuItemsList = styled$1.ul`
   display: flex;
@@ -76,6 +76,19 @@ const MenuItemLabel = styled$1.div`
   user-select: none;
   height: 100%;
 `;
+const MenuItemIcon = styled$1.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  ${({ $iconsBreakpoint }) => $iconsBreakpoint && css`
+      display: none;
+
+      @media (min-width: ${$iconsBreakpoint}) {
+        display: inline-flex;
+      }
+    `}
+`;
 const MenuItemDropdownArrow = styled$1.span`
   display: inline-flex;
   align-items: center;
@@ -121,4 +134,4 @@ const SubMenuItemRow = styled$1.li`
   }
 `;
 //#endregion
-export { MenuItemDropdownArrow, MenuItemLabel, MenuItemsList, MenuItemsListItem, SubMenuItemRow, SubMenuList };
+export { MenuItemDropdownArrow, MenuItemIcon, MenuItemLabel, MenuItemsList, MenuItemsListItem, SubMenuItemRow, SubMenuList };

package/ui/Blocks/Header/index.d.ts

@@ -27,6 +27,7 @@ type Props = {
     height?: string;
     smallLogoBreakpoint?: string;
     mobileMenuBreakpoint?: string;
+    menuIconsBreakpoint?: string;
     languageItems?: LanguageItem[];
     showLanguageWithTitle?: boolean;
     languageFlagWrapBackgroundColor?: string;

package/ui/Blocks/Header/index.js

@@ -11,7 +11,7 @@ import { useCallback, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Link } from "react-router-dom";
 //#region packages/ui/Blocks/Header/index.tsx
-const Header = ({ isMobileMenuOpen, homeLink, logo, logoVariant, logoVariantSmall, logoWidth = "145px", logoSmallWidth = "45px", logoSrc, logoSrcWidth, user, currentLanguage, hasUserMenu = false, leftMenuItems, rightMenuItems, rightSideStart, userMenuOverride, withInitials = false, withChevron = false, withName = false, variant = "light", height = "60px", smallLogoBreakpoint = "1801px", mobileMenuBreakpoint = "1024px", showLanguageWithTitle, languageFlagWrapBackgroundColor, languageItems: languageItems$1 = languageItems, withLanguageSwitch = true, ignoreClickOutsideClosest, onOpenMobileSideMenu, onChangeLanguage, onLogout }) => {
+const Header = ({ isMobileMenuOpen, homeLink, logo, logoVariant, logoVariantSmall, logoWidth = "145px", logoSmallWidth = "45px", logoSrc, logoSrcWidth, user, currentLanguage, hasUserMenu = false, leftMenuItems, rightMenuItems, rightSideStart, userMenuOverride, withInitials = false, withChevron = false, withName = false, variant = "light", height = "60px", smallLogoBreakpoint = "1801px", mobileMenuBreakpoint = "1024px", menuIconsBreakpoint, showLanguageWithTitle, languageFlagWrapBackgroundColor, languageItems: languageItems$1 = languageItems, withLanguageSwitch = true, ignoreClickOutsideClosest, onOpenMobileSideMenu, onChangeLanguage, onLogout }) => {
 	const { handleChangeLanguage } = useChangeLanguage({ onChangeLanguage });
 	const hasLeftMenu = Array.isArray(leftMenuItems) && leftMenuItems.length > 0;
 	const hasInternalMobileMenu = hasLeftMenu && !onOpenMobileSideMenu;
@@ -62,14 +62,16 @@ const Header = ({ isMobileMenuOpen, homeLink, logo, logoVariant, logoVariantSmal
 				$mobileMenuBreakpoint: mobileMenuBreakpoint,
 				children: /* @__PURE__ */ jsx(MenuItems, {
 					items: leftMenuItems,
-					variant
+					variant,
+					iconsBreakpoint: menuIconsBreakpoint
 				})
 			})
 		] }), /* @__PURE__ */ jsxs(RightSide, { children: [
 			rightSideStart,
 			!!rightMenuItems?.length && /* @__PURE__ */ jsx(MenuItems, {
 				items: rightMenuItems,
-				variant
+				variant,
+				iconsBreakpoint: menuIconsBreakpoint
 			}),
 			withLanguageSwitch && /* @__PURE__ */ jsx(LanguageWrapper, { children: /* @__PURE__ */ jsx(LanguageSwitch_default, {
 				languageItems: languageItems$1,

package/ui/Blocks/Header/stories/Header.stories.d.ts

@@ -25,6 +25,7 @@ declare const meta: {
         height?: string;
         smallLogoBreakpoint?: string;
         mobileMenuBreakpoint?: string;
+        menuIconsBreakpoint?: string;
         languageItems?: import("../../LanguageSwitch").LanguageItem[];
         showLanguageWithTitle?: boolean;
         languageFlagWrapBackgroundColor?: string;

package/ui/Elements/Avatar/Avatar.js

@@ -9,7 +9,7 @@ const getInitials = (user) => {
 	if (initials) return initials;
 	return (user?.username ?? "?").slice(0, 2).toUpperCase();
 };
-const Avatar = ({ user, src, size = 34, colorFront, colorBack, className, hoverColorBack, onClick, withInitials, withChevron, withName }) => {
+const Avatar = ({ user, src, size = 34, colorFront, colorBack, className, hoverColorBack, onClick, withInitials, withChevron, withName, children }) => {
 	return /* @__PURE__ */ jsxs(AvatarWrap, {
 		onClick,
 		children: [
@@ -29,7 +29,7 @@ const Avatar = ({ user, src, size = 34, colorFront, colorBack, className, hoverC
 					!src && !withInitials && /* @__PURE__ */ jsx(Profile, { stroke: colorFront })
 				]
 			}),
-			withName && user?.username,
+			/* @__PURE__ */ jsxs("div", { children: [withName && user?.username, children] }),
 			withChevron && /* @__PURE__ */ jsx(Chevron, { children: /* @__PURE__ */ jsx(Icon, {
 				icon: "goDown",
 				fill: "white",

package/ui/Elements/Avatar/types.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 export type Props = {
     user?: {
         firstName?: string;
@@ -15,4 +16,5 @@ export type Props = {
     withInitials?: boolean;
     withChevron?: boolean;
     withName?: boolean;
+    children?: ReactNode;
 };

package/ui/Elements/Icon/Icon.js

@@ -14,6 +14,7 @@ import { faPaperclip } from "@fortawesome/pro-light-svg-icons/faPaperclip";
 import { faStopwatch } from "@fortawesome/pro-light-svg-icons/faStopwatch";
 import { faArrowRightToBracket } from "@fortawesome/pro-regular-svg-icons/faArrowRightToBracket";
 import { faBell } from "@fortawesome/pro-regular-svg-icons/faBell";
+import { faBolt } from "@fortawesome/pro-regular-svg-icons/faBolt";
 import { faBox } from "@fortawesome/pro-regular-svg-icons/faBox";
 import { faCalendar } from "@fortawesome/pro-regular-svg-icons/faCalendar";
 import { faCalendarPlus } from "@fortawesome/pro-regular-svg-icons/faCalendarPlus";
@@ -143,6 +144,7 @@ const iconDictionary = {
 	paperPlane: faPaperPlane,
 	flaskRoundPotion: faFlaskRoundPotion,
 	batteryBolt: faBatteryBolt,
+	bolt: faBolt,
 	ellipsisVertical: faEllipsisVertical,
 	greaterThanEqual: faGreaterThanEqual,
 	home: faHome,
@@ -265,8 +267,8 @@ const Icon = ({ icon, fill, stroke, style = "normal", size, width, height, class
 		$colorSecondary: colorSecondary,
 		$fixedWidth: fixedWidth,
 		children: IconComponent ? /* @__PURE__ */ jsx(IconComponent, {
-			fill: colorFill,
-			stroke: colorStroke,
+			...colorFill ? { fill: colorFill } : {},
+			...colorStroke ? { stroke: colorStroke } : {},
 			onClick,
 			cursor: cursor ?? (onClick ? "pointer" : void 0),
 			...width ?? size ? { width: width ?? size } : {},

package/ui/Elements/Icon/icons/Inventory.d.ts

@@ -1,3 +1,3 @@
 import { type FC } from 'react';
-import { SvgProps } from '../types';
+import { type SvgProps } from '../types';
 export declare const Inventory: FC<SvgProps>;

package/ui/Elements/Icon/icons/Inventory.js

@@ -5,7 +5,7 @@ const Inventory = (props) => /* @__PURE__ */ jsxs("svg", {
 	height: "22",
 	viewBox: "0 0 22 22",
 	fill: "none",
-	stroke: "#A3B3C1",
+	stroke: "currentColor",
 	...props,
 	children: [/* @__PURE__ */ jsxs("g", {
 		clipPath: "url(#clip0_7_1616)",

package/ui/Elements/Icon/icons/Return.d.ts

@@ -1,3 +1,3 @@
 import { type FC } from 'react';
-import { SvgProps } from '../types';
+import { type SvgProps } from '../types';
 export declare const Return: FC<SvgProps>;

package/ui/Elements/Icon/icons/Return.js

@@ -5,7 +5,7 @@ const Return = (props) => /* @__PURE__ */ jsxs("svg", {
 	height: "22",
 	viewBox: "0 0 22 22",
 	fill: "none",
-	stroke: "#A3B3C1",
+	stroke: "currentColor",
 	...props,
 	children: [/* @__PURE__ */ jsx("path", {
 		d: "M6 8.78947V13.7105L11.1 15.5M6 8.78947L11.1 10.5789M6 8.78947L11.1 7L16.2 8.34211M11.1 15.5V10.5789M11.1 15.5L16.2 13.7105V8.34211M11.1 10.5789L16.2 8.34211",