@mailstep/design-system 0.6.72 → 0.6.73-beta.2

package/README.md

@@ -1,78 +1,78 @@
-# Mailstep Design-system
-
-Live demo here: https://mailstep.gitlab.io/mailwise/mw2/design-system/storybook 
-
-Powered by chromatic: https://www.chromatic.com/library?appId=664c5032c1e55e80a74fcfd2&branch=master 
-
-## Peer dependencies
-- @xstyled/styled-components
-- styled-component
-- react-router
-- react-router-dom
-
-### How to develoop
-```
-yarn install
-yarn dev
-```
-
-### How to use
-```
-yarn add @mailstep/design-system
-```
-and add `import 'swiper/css'` somewhere to the root app.
-
-
-#### How to publish
-In root folder run 
-
-```
-npm run build
-npm run deploy
-```
-
-## Components
-There are Elements, Blocks and Forms components. Also you can use ThemeProvider and Utils package
-
-### Elements
-| Component   |      Description      | Info  |
-|----------|:-------------:|------:|
-| Alert |  TBD | [More info](ui/Elements/Alert/README.md) |
-| Avatar |  TBD | [More info](ui/Elements/Avatar/README.md) |
-| Badge |  TBD | [More info](ui/Elements/Badge/README.md) |
-| BorderedBox |  TBD | [More info](ui/Elements/BorderedBox/README.md) |
-| Button |  TBD | [More info](ui/Elements/Button/README.md) |
-| Card |  TBD | [More info](ui/Elements/Card/README.md) |
-| DialogOverlay |  TBD | [More info](ui/Elements/DialogOverlay/README.md) |
-| Dropdown |  TBD | [More info](ui/Elements/Dropdown/README.md) |
-| ErrorMessage |  TBD | [More info](ui/Elements/ErrorMessage/README.md) |
-| Icon |  TBD | [More info](ui/Elements/Icon/README.md) |
-| Image |  TBD | [More info](ui/Elements/Image/README.md) |
-| Label |  TBD | [More info](ui/Elements/Label/README.md) |
-| Link |  TBD | [More info](ui/Elements/Link/README.md) |
-| Logo |  TBD | [More info](ui/Elements/Logo/README.md) |
-| Overlay |  TBD | [More info](ui/Elements/Overlay/README.md) |
-| Pagination |  TBD | [More info](ui/Elements/Pagination/README.md) |
-| Paragraph |  TBD | [More info](ui/Elements/Paragraph/README.md) |
-| Spinner |  TBD | [More info](ui/Elements/Spinner/README.md) |
-
-### Blocks
-| Component   |      Description      | Info  |
-|----------|:-------------:|------:|
-| TBD |  TBD | TBD |
-
-### Forms
-| Component   |      Description      | Info  |
-|----------|:-------------:|------:|
-| TBD |  TBD | TBD |
-
-### System
-| Component   |      Description      | Info  |
-|----------|:-------------:|------:|
-| Fonts |  Import adjusted fonts of inter | TBD |
-
-### Theme Provider
-| Component   |      Description      | Info  |
-|----------|:-------------:|------:|
-| Theme Provider |  TBD | [More info](ui/ThemeProvider/README.md) |
-
+# Mailstep Design-system
+
+Live demo here: https://mailstep.gitlab.io/mailwise/mw2/design-system/storybook 
+
+Powered by chromatic: https://www.chromatic.com/library?appId=664c5032c1e55e80a74fcfd2&branch=master 
+
+## Peer dependencies
+- @xstyled/styled-components
+- styled-component
+- react-router
+- react-router-dom
+
+### How to develoop
+```
+yarn install
+yarn dev
+```
+
+### How to use
+```
+yarn add @mailstep/design-system
+```
+and add `import 'swiper/css'` somewhere to the root app.
+
+
+#### How to publish
+In root folder run 
+
+```
+npm run build
+npm run deploy
+```
+
+## Components
+There are Elements, Blocks and Forms components. Also you can use ThemeProvider and Utils package
+
+### Elements
+| Component   |      Description      | Info  |
+|----------|:-------------:|------:|
+| Alert |  TBD | [More info](ui/Elements/Alert/README.md) |
+| Avatar |  TBD | [More info](ui/Elements/Avatar/README.md) |
+| Badge |  TBD | [More info](ui/Elements/Badge/README.md) |
+| BorderedBox |  TBD | [More info](ui/Elements/BorderedBox/README.md) |
+| Button |  TBD | [More info](ui/Elements/Button/README.md) |
+| Card |  TBD | [More info](ui/Elements/Card/README.md) |
+| DialogOverlay |  TBD | [More info](ui/Elements/DialogOverlay/README.md) |
+| Dropdown |  TBD | [More info](ui/Elements/Dropdown/README.md) |
+| ErrorMessage |  TBD | [More info](ui/Elements/ErrorMessage/README.md) |
+| Icon |  TBD | [More info](ui/Elements/Icon/README.md) |
+| Image |  TBD | [More info](ui/Elements/Image/README.md) |
+| Label |  TBD | [More info](ui/Elements/Label/README.md) |
+| Link |  TBD | [More info](ui/Elements/Link/README.md) |
+| Logo |  TBD | [More info](ui/Elements/Logo/README.md) |
+| Overlay |  TBD | [More info](ui/Elements/Overlay/README.md) |
+| Pagination |  TBD | [More info](ui/Elements/Pagination/README.md) |
+| Paragraph |  TBD | [More info](ui/Elements/Paragraph/README.md) |
+| Spinner |  TBD | [More info](ui/Elements/Spinner/README.md) |
+
+### Blocks
+| Component   |      Description      | Info  |
+|----------|:-------------:|------:|
+| TBD |  TBD | TBD |
+
+### Forms
+| Component   |      Description      | Info  |
+|----------|:-------------:|------:|
+| TBD |  TBD | TBD |
+
+### System
+| Component   |      Description      | Info  |
+|----------|:-------------:|------:|
+| Fonts |  Import adjusted fonts of inter | TBD |
+
+### Theme Provider
+| Component   |      Description      | Info  |
+|----------|:-------------:|------:|
+| Theme Provider |  TBD | [More info](ui/ThemeProvider/README.md) |
+

package/package.json

@@ -1,150 +1,150 @@
-{
-  "name": "@mailstep/design-system",
-  "version": "0.6.72",
-  "license": "ISC",
-  "type": "module",
-  "main": "./ui/index.js",
-  "module": "./ui/index.es.js",
-  "types": "./ui/index.d.ts",
-  "files": [
-    "ui",
-    "assets"
-  ],
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build": "tsc && vite build && copy package.json build && copy README.md build",
-    "build-storybook": "storybook build",
-    "deploy": "npm run build && npm publish ./build",
-    "dev": "yarn storybook",
-    "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
-    "chromatic": "npx chromatic --project-token=chpt_cbebab21ab70358 --exit-zero-on-changes",
-    "lint": "eslint src/**/*.{js,jsx,ts,tsx,json}"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.22.4",
-    "@babel/preset-react": "^7.22.3",
-    "@babel/preset-typescript": "^7.23.3",
-    "@chromatic-com/storybook": "^1",
-    "@fortawesome/fontawesome-svg-core": "^6.3.0",
-    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
-    "@fortawesome/pro-light-svg-icons": "^6.0.0",
-    "@fortawesome/pro-regular-svg-icons": "^6.0.0",
-    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/core": "3.17.2",
-    "@lingui/react": "3.17.2",
-    "@popperjs/core": "^2.11.8",
-    "@storybook/addon-controls": "^8.1.1",
-    "@storybook/addon-designs": "^8.0.2",
-    "@storybook/addon-essentials": "^8.1.1",
-    "@storybook/addon-interactions": "^8.1.1",
-    "@storybook/addon-links": "^8.1.1",
-    "@storybook/blocks": "^8.1.1",
-    "@storybook/react": "^8.1.1",
-    "@storybook/react-webpack5": "^8.1.1",
-    "@storybook/test": "^8.1.1",
-    "@svgr/rollup": "^8.0.1",
-    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/faker": "^4.1.11",
-    "@types/luxon": "^3.4.2",
-    "@types/node": "^20.1.7",
-    "@types/react": "^18.2.6",
-    "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-dom": "^18.2.4",
-    "@types/react-helmet": "^6.1.11",
-    "@types/react-router": "^5.1.20",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.6",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@xstyled/styled-components": "^3.8.0",
-    "babel-loader": "^9.1.3",
-    "babel-plugin-macros": "^3.1.0",
-    "babel-plugin-named-exports-order": "^0.0.2",
-    "chromatic": "^11.3.5",
-    "eslint": "^8.41.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-config-standard-with-typescript": "^34.0.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^17.9.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-promise": "^6.6.0",
-    "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-perf": "^3.3.2",
-    "eslint-plugin-storybook": "^0.8.0",
-    "faker": "^5.1.0",
-    "immer": "9.0.7",
-    "lodash": "^4.17.21",
-    "luxon": "^3.4.4",
-    "moment": "^2.30.1",
-    "prettier": "2.8.8",
-    "react": "^18.2.0",
-    "react-beautiful-dnd": "^13.0.0",
-    "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0",
-    "react-image": "^4.1.0",
-    "react-onclickoutside": "^6.13.0",
-    "react-popper": "^2.3.0",
-    "react-redux": "*",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
-    "react-script": "^2.0.5",
-    "react-select": "^5.8.0",
-    "react-use-draggable-scroll": "^0.4.7",
-    "redux": ">=4.0.5",
-    "reselect": "5.0.0-alpha.2",
-    "storybook": "^8.1.1",
-    "string-width": "6.1.0",
-    "styled-components": "^5.3.10",
-    "swiper": "^11.0.3",
-    "tslib": "^2.6.2",
-    "typescript": "^5.0.4",
-    "vite": "^5.0.10",
-    "vite-plugin-dts": "^3.6.4",
-    "vite-plugin-static-copy": "^1.0.0",
-    "webpack": "^5.82.1"
-  },
-  "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.3.0",
-    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
-    "@fortawesome/pro-light-svg-icons": "^6.0.0",
-    "@fortawesome/pro-regular-svg-icons": "^6.0.0",
-    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/core": "3.17.2",
-    "@lingui/react": "3.17.2",
-    "@popperjs/core": "^2.11.8",
-    "@xstyled/styled-components": "^3.8.0",
-    "babel-plugin-macros": "^3.1.0",
-    "immer": "9.0.7",
-    "lodash": "^4.17.21",
-    "luxon": "^3.4.4",
-    "moment": "^2.30.1",
-    "react": "^18.2.0",
-    "react-beautiful-dnd": "^13.0.0",
-    "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0",
-    "react-image": "^4.1.0",
-    "react-onclickoutside": "^6.13.0",
-    "react-popper": "^2.3.0",
-    "react-redux": ">=4.0.5",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
-    "react-select": "^5.8.0",
-    "react-use-draggable-scroll": "^0.4.7",
-    "redux": ">=4.0.5",
-    "reselect": "5.0.0-alpha.2",
-    "styled-components": "^5.3.10",
-    "swiper": "^11.0.3",
-    "tslib": "^2.6.2",
-    "typescript": "^5.0.4"
-  },
-  "resolutions": {
-    "jackspeak": "2.1.1"
-  }
-}
+{
+  "name": "@mailstep/design-system",
+  "version": "0.6.73-beta.2",
+  "license": "ISC",
+  "type": "module",
+  "main": "./ui/index.js",
+  "module": "./ui/index.es.js",
+  "types": "./ui/index.d.ts",
+  "files": [
+    "ui",
+    "assets"
+  ],
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build": "rm -rf ./build && tsc && vite build && cp package.json build && cp README.md build",
+    "build-storybook": "storybook build",
+    "deploy": "npm run build && npm publish ./build",
+    "dev": "yarn storybook",
+    "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
+    "chromatic": "npx chromatic --project-token=chpt_cbebab21ab70358 --exit-zero-on-changes",
+    "lint": "eslint src/**/*.{js,jsx,ts,tsx,json}"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@chromatic-com/storybook": "^1",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
+    "@fortawesome/pro-light-svg-icons": "^6.0.0",
+    "@fortawesome/pro-regular-svg-icons": "^6.0.0",
+    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@lingui/core": "3.17.2",
+    "@lingui/react": "3.17.2",
+    "@popperjs/core": "^2.11.8",
+    "@storybook/addon-controls": "^8.1.1",
+    "@storybook/addon-designs": "^8.0.2",
+    "@storybook/addon-essentials": "^8.1.1",
+    "@storybook/addon-interactions": "^8.1.1",
+    "@storybook/addon-links": "^8.1.1",
+    "@storybook/blocks": "^8.1.1",
+    "@storybook/react": "^8.1.1",
+    "@storybook/react-webpack5": "^8.1.1",
+    "@storybook/test": "^8.1.1",
+    "@svgr/rollup": "^8.0.1",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/faker": "^4.1.11",
+    "@types/luxon": "^3.4.2",
+    "@types/node": "^20.1.7",
+    "@types/react": "^18.2.6",
+    "@types/react-beautiful-dnd": "^13.1.2",
+    "@types/react-dom": "^18.2.4",
+    "@types/react-helmet": "^6.1.11",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@xstyled/styled-components": "^3.8.0",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-macros": "^3.1.0",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "chromatic": "^11.3.5",
+    "eslint": "^8.41.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-standard-with-typescript": "^34.0.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^17.9.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.6.0",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-perf": "^3.3.2",
+    "eslint-plugin-storybook": "^0.8.0",
+    "faker": "^5.1.0",
+    "immer": "9.0.7",
+    "lodash": "^4.17.21",
+    "luxon": "^3.4.4",
+    "moment": "^2.30.1",
+    "prettier": "2.8.8",
+    "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.0.0",
+    "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
+    "react-image": "^4.1.0",
+    "react-onclickoutside": "^6.13.0",
+    "react-popper": "^2.3.0",
+    "react-redux": "*",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-script": "^2.0.5",
+    "react-select": "^5.8.0",
+    "react-use-draggable-scroll": "^0.4.7",
+    "redux": ">=4.0.5",
+    "reselect": "5.0.0-alpha.2",
+    "storybook": "^8.1.1",
+    "string-width": "6.1.0",
+    "styled-components": "^5.3.10",
+    "swiper": "^11.0.3",
+    "tslib": "^2.6.2",
+    "typescript": "^5.0.4",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.6.4",
+    "vite-plugin-static-copy": "^1.0.0",
+    "webpack": "^5.82.1"
+  },
+  "peerDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
+    "@fortawesome/pro-light-svg-icons": "^6.0.0",
+    "@fortawesome/pro-regular-svg-icons": "^6.0.0",
+    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@lingui/core": "3.17.2",
+    "@lingui/react": "3.17.2",
+    "@popperjs/core": "^2.11.8",
+    "@xstyled/styled-components": "^3.8.0",
+    "babel-plugin-macros": "^3.1.0",
+    "immer": "9.0.7",
+    "lodash": "^4.17.21",
+    "luxon": "^3.4.4",
+    "moment": "^2.30.1",
+    "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.0.0",
+    "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
+    "react-image": "^4.1.0",
+    "react-onclickoutside": "^6.13.0",
+    "react-popper": "^2.3.0",
+    "react-redux": ">=4.0.5",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-select": "^5.8.0",
+    "react-use-draggable-scroll": "^0.4.7",
+    "redux": ">=4.0.5",
+    "reselect": "5.0.0-alpha.2",
+    "styled-components": "^5.3.10",
+    "swiper": "^11.0.3",
+    "tslib": "^2.6.2",
+    "typescript": "^5.0.4"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  }
+}

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

@@ -303,7 +303,6 @@ export type GridProps = Omit<CommonGridProps, 'filters'> & {
     queryRowsParam?: number | string;
     customPaginationHandler?: (page: number, rows: number) => void;
 };
-export type PageGridProps = Omit<GridProps, 'rowsData' | 'totalRowsCount' | 'columnsDefinitions' | 'actionColumnDefinition' | 'minColumnWidth' | 'columnLayout'>;
 export type Item = {
     title: string | JSX.Element;
     onClick: () => void;

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

@@ -1,16 +1,22 @@
 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 = {
     homeLink: string;
     isMobileMenuOpen?: boolean;
-    logo: Brand;
-    logoVariant: Variant;
+    logo?: Brand;
+    logoVariant?: Variant;
+    logoSrc?: string;
+    logoSrcWidth?: string;
     user?: User | null;
     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, 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: _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: [_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

@@ -4,12 +4,17 @@ declare const meta: {
     component: import("react").FC<{
         homeLink: string;
         isMobileMenuOpen?: boolean | undefined;
-        logo: import("../../..").Brand;
-        logoVariant: import("../../..").Variant;
+        logo?: import("../../..").Brand | undefined;
+        logoVariant?: import("../../..").Variant | undefined;
+        logoSrc?: string | undefined;
+        logoSrcWidth?: string | undefined;
         user?: import("../types").User | null | undefined;
         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;
@@ -22,4 +27,5 @@ export declare const HeaderBasic: () => JSX.Element;
 export declare const HeaderWithUser: () => JSX.Element;
 export declare const HeaderWithRightLinks: () => JSX.Element;
 export declare const HeaderWithLanguageSwitch: () => JSX.Element;
+export declare const HeaderWithCustomLogo: () => JSX.Element;
 export declare const HeaderWithAllItems: () => JSX.Element;

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

@@ -35,7 +35,8 @@ export var HeaderBasic = function () { return (_jsx(LinguiContainer, { children:
 export var HeaderWithUser = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", hasUserMenu: true, user: user }) })); };
 export var HeaderWithRightLinks = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", rightMenuItems: menuItems }) })); };
 export var HeaderWithLanguageSwitch = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", currentLanguage: "cs" }) })); };
+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>;