@mailstep/design-system 0.6.73-beta.1 → 0.6.73-beta.3

package/package.json

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

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

@@ -1,5 +1,6 @@
 import { type FC } from 'react';
 import type { Brand, Variant } from '../../Elements/Logo';
+import { LanguageItem } from '../LanguageSwitch';
 import type { MenuItemType } from '../SideMenu/types';
 import type { User } from './types';
 type Props = {
@@ -13,6 +14,9 @@ type Props = {
     currentLanguage?: string;
     hasUserMenu?: boolean;
     rightMenuItems?: MenuItemType[];
+    languageItems?: LanguageItem[];
+    showLanguageWithTitle?: boolean;
+    languageFlagWrapBackgroundColor?: string;
     onOpenMobileSideMenu?: () => void;
     onChangeLanguage?: (language: string) => void;
     onLogout?: () => void;

package/ui/Blocks/Header/index.js

@@ -6,10 +6,10 @@ import { HamburgerMenuButton } from '../SideMenu';
 import { MenuItems } from './components/MenuItems';
 import { UserMenu } from './components/UserMenu';
 import { useChangeLanguage } from './hooks/useChangeLanguage';
-import { languageItems } from './utils/languageItems';
+import { languageItems as defaultLanguageItems } from './utils/languageItems';
 import { Container, LeftSide, RightSide, LanguageWrapper } from './styles';
 export var Header = function (_a) {
-    var isMobileMenuOpen = _a.isMobileMenuOpen, homeLink = _a.homeLink, logo = _a.logo, logoVariant = _a.logoVariant, logoSrc = _a.logoSrc, logoSrcWidth = _a.logoSrcWidth, user = _a.user, currentLanguage = _a.currentLanguage, _b = _a.hasUserMenu, hasUserMenu = _b === void 0 ? false : _b, rightMenuItems = _a.rightMenuItems, onOpenMobileSideMenu = _a.onOpenMobileSideMenu, onChangeLanguage = _a.onChangeLanguage, onLogout = _a.onLogout;
+    var isMobileMenuOpen = _a.isMobileMenuOpen, homeLink = _a.homeLink, logo = _a.logo, logoVariant = _a.logoVariant, logoSrc = _a.logoSrc, logoSrcWidth = _a.logoSrcWidth, user = _a.user, currentLanguage = _a.currentLanguage, _b = _a.hasUserMenu, hasUserMenu = _b === void 0 ? false : _b, rightMenuItems = _a.rightMenuItems, showLanguageWithTitle = _a.showLanguageWithTitle, languageFlagWrapBackgroundColor = _a.languageFlagWrapBackgroundColor, _c = _a.languageItems, languageItems = _c === void 0 ? defaultLanguageItems : _c, onOpenMobileSideMenu = _a.onOpenMobileSideMenu, onChangeLanguage = _a.onChangeLanguage, onLogout = _a.onLogout;
     var handleChangeLanguage = useChangeLanguage({ onChangeLanguage: onChangeLanguage }).handleChangeLanguage;
-    return (_jsxs(Container, { children: [_jsxs(LeftSide, { children: [_jsx(HamburgerMenuButton, { isLeftMenuOpen: isMobileMenuOpen, onClick: onOpenMobileSideMenu }), _jsx(Link, { to: homeLink, children: logoSrc ? _jsx("img", { src: logoSrc, alt: "logo", width: logoSrcWidth }) : _jsx(Logo, { brand: logo, variant: logoVariant, width: "145px" }) })] }), _jsxs(RightSide, { children: [Array.isArray(rightMenuItems) && (rightMenuItems === null || rightMenuItems === void 0 ? void 0 : rightMenuItems.length) > 0 && _jsx(MenuItems, { items: rightMenuItems }), _jsx(LanguageWrapper, { children: _jsx(LanguageSwitch, { languageItems: languageItems, onLanguageChange: handleChangeLanguage, activeLanguage: currentLanguage }) }), hasUserMenu && _jsx(UserMenu, { user: user, onLogout: onLogout })] })] }));
+    return (_jsxs(Container, { children: [_jsxs(LeftSide, { children: [onOpenMobileSideMenu && _jsx(HamburgerMenuButton, { isLeftMenuOpen: isMobileMenuOpen, onClick: onOpenMobileSideMenu }), _jsx(Link, { to: homeLink, children: logoSrc ? (_jsx("img", { src: logoSrc, alt: "logo", width: logoSrcWidth })) : (_jsx(Logo, { brand: logo, variant: logoVariant, width: "145px" })) })] }), _jsxs(RightSide, { children: [Array.isArray(rightMenuItems) && (rightMenuItems === null || rightMenuItems === void 0 ? void 0 : rightMenuItems.length) > 0 && _jsx(MenuItems, { items: rightMenuItems }), _jsx(LanguageWrapper, { children: _jsx(LanguageSwitch, { languageItems: languageItems, withTitle: showLanguageWithTitle, onLanguageChange: handleChangeLanguage, activeLanguage: currentLanguage, languageFlagWrapBackgroundColor: languageFlagWrapBackgroundColor }) }), hasUserMenu && _jsx(UserMenu, { user: user, onLogout: onLogout })] })] }));
 };

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

@@ -12,6 +12,9 @@ declare const meta: {
         currentLanguage?: string | undefined;
         hasUserMenu?: boolean | undefined;
         rightMenuItems?: import("../../SideMenu").MenuItemType[] | undefined;
+        languageItems?: import("../../LanguageSwitch").LanguageItem[] | undefined;
+        showLanguageWithTitle?: boolean | undefined;
+        languageFlagWrapBackgroundColor?: string | undefined;
         onOpenMobileSideMenu?: (() => void) | undefined;
         onChangeLanguage?: ((language: string) => void) | undefined;
         onLogout?: (() => void) | undefined;

package/ui/Blocks/Header/stories/Header.stories.js

@@ -38,5 +38,5 @@ export var HeaderWithLanguageSwitch = function () { return (_jsx(LinguiContainer
 export var HeaderWithCustomLogo = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "//google.com", logoSrc: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", logoSrcWidth: "100px" }) })); };
 export var HeaderWithAllItems = function () {
     var _a = useState(false), isMobileMenuOpen = _a[0], setIsMobileMenuOpen = _a[1];
-    return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", currentLanguage: "cs", rightMenuItems: menuItems, hasUserMenu: true, user: user, isMobileMenuOpen: isMobileMenuOpen, onOpenMobileSideMenu: function () { return setIsMobileMenuOpen(function (state) { return !state; }); } }) }));
+    return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", currentLanguage: "cs", rightMenuItems: menuItems, hasUserMenu: true, user: user, showLanguageWithTitle: true, isMobileMenuOpen: isMobileMenuOpen, languageFlagWrapBackgroundColor: "pink", onOpenMobileSideMenu: function () { return setIsMobileMenuOpen(function (state) { return !state; }); } }) }));
 };

package/ui/Blocks/Header/utils/languageItems.js

@@ -4,12 +4,12 @@ import { FlagUSA } from '../../../Elements/Icon/icons/FlagUSA';
 export var languageItems = [
     {
         languageCode: 'cs',
-        icon: _jsx(FlagCZ, {}),
+        icon: _jsx(FlagCZ, { height: "16px" }),
         title: 'Česky'
     },
     {
         languageCode: 'en',
-        icon: _jsx(FlagUSA, {}),
+        icon: _jsx(FlagUSA, { height: "16px" }),
         title: 'English'
     }
 ];

package/ui/Blocks/LanguageSwitch/LanguageSwitch.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
+import Icon from '../../Elements/Icon/Icon';
 import { useClickOutside } from '../Modal/hooks/useClickOutside';
-import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap, DownImg, StyledDropdownMenu } from './styles';
+import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap, StyledDropdownMenu } from './styles';
 var LanguageSwitch = function (_a) {
-    var activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, languageItems = _a.languageItems, _b = _a.placement, placement = _b === void 0 ? 'right' : _b;
+    var activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, languageItems = _a.languageItems, _b = _a.placement, placement = _b === void 0 ? 'right' : _b, withTitle = _a.withTitle, languageFlagWrapBackgroundColor = _a.languageFlagWrapBackgroundColor;
     var _c = useState(false), flagDropdownVisible = _c[0], setFlagDropdownVisible = _c[1];
     var onClose = useCallback(function () {
         setFlagDropdownVisible(false);
@@ -29,6 +30,6 @@ var LanguageSwitch = function (_a) {
     }, [filteredLanguages, languageToggle]);
     if (!activeLanguageObj || !languageItems)
         return null;
-    return (_jsxs(LanguageSwitchWrap, { ref: flagMenuRef, children: [_jsxs(LanguageFlagWrap, { onClick: handleFlagClick, children: [_jsx(StyledFlag, { children: activeLanguageObj.icon }), _jsx(DownImg, { width: "10", height: "10", src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2YwZjsKICAgICAgICBvcGFjaXR5OiAwOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6ICM3MDcwNzA7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnIGlkPSJDaGV2cm9uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4KSByb3RhdGUoOTApIj4KICAgIDxyZWN0IGlkPSJGcmFtZSIgY2xhc3M9ImNscy0xIiB3aWR0aD0iMTAiIGhlaWdodD0iNiIvPgogICAgPHBhdGggaWQ9IlNoYXBlIiBjbGFzcz0iY2xzLTIiIGQ9Ik0xMCwxQTEsMSwwLDAsMCw4LjI5My4yOTNMNSwzLjU4NiwxLjcwNy4yOTNBMSwxLDAsMSwwLC4yOTMsMS43MDdsNCw0YTEsMSwwLDAsMCwxLjQxNSwwbDQtNEExLDEsMCwwLDAsMTAsMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIgOCkgcm90YXRlKC05MCkiLz4KICA8L2c+Cjwvc3ZnPgo=" })] }), _jsx(StyledDropdownMenu, { showMenu: flagDropdownVisible, items: formattedLanguages, placement: placement })] }));
+    return (_jsxs(LanguageSwitchWrap, { ref: flagMenuRef, children: [_jsxs(LanguageFlagWrap, { onClick: handleFlagClick, backgroundColor: languageFlagWrapBackgroundColor, withTitle: withTitle, children: [_jsxs(StyledFlag, { children: [activeLanguageObj.icon, withTitle && activeLanguageObj.title] }), _jsx(Icon, { icon: "chevronDown", size: "10px" })] }), _jsx(StyledDropdownMenu, { showMenu: flagDropdownVisible, items: formattedLanguages, placement: placement })] }));
 };
 export default LanguageSwitch;

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

@@ -5,5 +5,7 @@ export declare const StyledDropdownMenu: import("styled-components").StyledCompo
     placement: Placement;
 }, never>;
 export declare const LanguageSwitchWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const DownImg: import("styled-components").StyledComponent<"img", import("@xstyled/system").Theme, {}, never>;
-export declare const LanguageFlagWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const LanguageFlagWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    backgroundColor?: string | undefined;
+    withTitle?: boolean | undefined;
+}, never>;

package/ui/Blocks/LanguageSwitch/styles.js

@@ -2,9 +2,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from '@xstyled/styled-components';
 import DropdownMenu from '../../Elements/DropdownMenu';
-export var StyledFlag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: auto;\n  cursor: pointer;\n"], ["\n  width: auto;\n  cursor: pointer;\n"])));
+import styled from '@xstyled/styled-components';
+export var StyledFlag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  font-size: 16px;\n  display: flex;\n  gap: 6px;\n  align-items: center;\n"], ["\n  cursor: pointer;\n  font-size: 16px;\n  display: flex;\n  gap: 6px;\n  align-items: center;\n"])));
 export var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 30px;\n  right: -5px;\n\n  width: max-content;\n  @media (min-width: 1024px) {\n    ", "\n  }\n  & > ul > a > * {\n    display: flex;\n    align-items: center;\n  }\n\n  :before {\n    content: '';\n    top: -1px;\n    right: 15px;\n    position: absolute;\n    height: 10px;\n    width: 10px;\n    -webkit-transform: rotate(45deg) translate(-7px);\n    -ms-transform: rotate(45deg) translate(-7px);\n    transform: rotate(45deg) translate(-7px);\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    background: white;\n    border-top: 1px solid rgba(0, 0, 0, 0.1);\n    @media (min-width: 1024px) {\n      ", "\n    }\n  }\n"], ["\n  position: absolute;\n  top: 30px;\n  right: -5px;\n\n  width: max-content;\n  @media (min-width: 1024px) {\n    ", "\n  }\n  & > ul > a > * {\n    display: flex;\n    align-items: center;\n  }\n\n  :before {\n    content: '';\n    top: -1px;\n    right: 15px;\n    position: absolute;\n    height: 10px;\n    width: 10px;\n    -webkit-transform: rotate(45deg) translate(-7px);\n    -ms-transform: rotate(45deg) translate(-7px);\n    transform: rotate(45deg) translate(-7px);\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    background: white;\n    border-top: 1px solid rgba(0, 0, 0, 0.1);\n    @media (min-width: 1024px) {\n      ", "\n    }\n  }\n"])), function (_a) {
     var placement = _a.placement;
     return "".concat(placement, ": -5px");
@@ -13,6 +13,11 @@ export var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templa
     return "".concat(placement, ": 15px");
 });
 export var LanguageSwitchWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"])));
-export var DownImg = styled.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 15px;\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n"], ["\n  margin-left: 15px;\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n"])));
-export var LanguageFlagWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  display: grid;\n  grid-template-columns: 20px auto;\n  align-items: center;\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: grid;\n  grid-template-columns: 20px auto;\n  align-items: center;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+export var LanguageFlagWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 7px 12px;\n  border-radius: 10px;\n  background: ", ";\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 7px 12px;\n  border-radius: 10px;\n  background: ", ";\n"])), function (_a) {
+    var withTitle = _a.withTitle;
+    return (withTitle ? '16px' : '8px');
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor || 'white';
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -10,4 +10,6 @@ export type LanguageSwitchProps = {
     onLanguageChange: (languageCode: string) => void;
     languageItems?: LanguageItem[];
     placement?: Placement;
+    withTitle?: boolean;
+    languageFlagWrapBackgroundColor?: string;
 };