@doyourjob/gravity-ui-page-constructor-addons 2.1.8

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 YANDEX LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# @gravity-ui/page-constructor-addons · [![npm package](https://img.shields.io/npm/v/@gravity-ui/page-constructor-addons)](https://www.npmjs.com/package/@gravity-ui/page-constructor-addons) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/page-constructor-addons/ci.yml?branch=main&label=CI)](https://github.com/gravity-ui/page-constructor-addons/actions/workflows/ci.yml?query=branch:main) [![Release](https://img.shields.io/github/actions/workflow/status/gravity-ui/page-constructor-addons/release.yml?branch=main&label=Release)](https://github.com/gravity-ui/page-constructor-addons/actions/workflows/release.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.yandexcloud.dev/page-constructor-addons/)
+
+# Page constructor addons
+
+`page-constructor-addons` it is a set of components and plugins working with [@gravity-ui/page-constrcutor](https://github.com/gravity-ui/page-constructor) and extending it's functionality.
+
+## Install
+
+```shell
+npm install @gravity-ui/page-constructor-addons
+```
+
+## Development
+
+```bash
+npm ci
+
+npm run dev
+```
+
+## Run Tests
+
+```bash
+npm run test
+```
+
+## Build
+
+```bash
+npm run build
+```

package/build/cjs/components/EnrichedLink/EnrichedLink.css

@@ -0,0 +1,94 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-enriched-link {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  display: flex;
+  text-decoration: none;
+}
+
+.pc-addons-enriched-link_type_default {
+  outline: none;
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+  border-radius: var(--g-focus-border-radius);
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+}
+
+.utilityfocus .pc-addons-enriched-link_type_default:focus {
+  outline: 2px solid #ffdb4d;
+}
+
+.pc-addons-enriched-link_type_default:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+
+.pc-addons-enriched-link_type_default:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+.pc-addons-enriched-link_type_default:hover, .pc-addons-enriched-link_type_default:active {
+  --pc-text-header-color: var(--g-color-text-link);
+  color: var(--g-color-text-link);
+}
+
+.mobile .pc-addons-enriched-link_type_default:hover, .mobile .pc-addons-enriched-link_type_default:active {
+  --pc-text-header-color: inherit;
+  color: inherit;
+}
+
+.pc-addons-enriched-link_type_icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  transition: all 0.3s ease;
+  border-radius: 50%;
+  background-color: var(--g-color-base-generic);
+}
+
+.pc-addons-enriched-link_type_icon:not(:last-child) {
+  margin-right: 8px;
+}
+
+.pc-addons-enriched-link_type_icon svg {
+  color: var(--g-color-text-dark-primary);
+}
+
+.pc-addons-enriched-link_type_icon:hover {
+  background-color: var(--g-color-base-generic-hover);
+}
+
+.pc-addons-enriched-link_left-icon {
+  padding-left: 26px;
+}
+
+.pc-addons-enriched-link__icon {
+  position: absolute;
+  top: 2px;
+  left: 0;
+  color: var(--g-color-base-brand);
+}
+
+.pc-addons-enriched-link__title {
+  color: var(--g-color-text-primary);
+  line-height: 18px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.pc-addons-enriched-link__title:hover {
+  color: var(--g-color-text-primary);
+}
+
+.pc-addons-enriched-link:hover .pc-addons-enriched-link__title {
+  color: var(--g-color-text-link);
+}

package/build/cjs/components/EnrichedLink/EnrichedLink.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ClassNameProps } from '@doyourjob/gravity-ui-page-constructor';
+import type { IconData } from '@gravity-ui/uikit';
+export interface EnrichedLinkProps extends ClassNameProps {
+    title: string;
+    url: string;
+    onClick?: () => void;
+    type?: EnrichedLinkType;
+    icon?: IconData;
+    blank?: boolean;
+    noreferrer?: boolean;
+}
+export declare enum EnrichedLinkType {
+    Default = "default",
+    OnlyIcon = "icon"
+}
+export declare const EnrichedLink: React.FC<EnrichedLinkProps>;

package/build/cjs/components/EnrichedLink/EnrichedLink.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnrichedLink = exports.EnrichedLinkType = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../utils/cn");
+const b = (0, cn_1.block)('enriched-link');
+const ICON_SIZE = 16;
+const SOCIAL_ICON_SIZE = 24;
+var EnrichedLinkType;
+(function (EnrichedLinkType) {
+    EnrichedLinkType["Default"] = "default";
+    EnrichedLinkType["OnlyIcon"] = "icon";
+})(EnrichedLinkType = exports.EnrichedLinkType || (exports.EnrichedLinkType = {}));
+const getLinkProps = (props) => {
+    const { url, blank, noreferrer, onClick } = props;
+    const res = {
+        href: url,
+        target: blank ? '_blank' : undefined,
+        onClick,
+    };
+    if (noreferrer || blank) {
+        res.rel = 'noopener noreferrer';
+    }
+    return res;
+};
+const EnrichedLink = (props) => {
+    const { type, title, icon, className } = props;
+    if (type === EnrichedLinkType.OnlyIcon) {
+        return (react_1.default.createElement(uikit_1.Link, Object.assign({}, getLinkProps(props), { className: b({ type }, className), title: title, "data-router": "off" }), icon && react_1.default.createElement(uikit_1.Icon, { data: icon, size: SOCIAL_ICON_SIZE })));
+    }
+    return (react_1.default.createElement(uikit_1.Link, Object.assign({}, getLinkProps(props), { className: b({ type, ['left-icon']: Boolean(icon) }, className) }),
+        icon && react_1.default.createElement(uikit_1.Icon, { data: icon, size: ICON_SIZE, className: b('icon') }),
+        react_1.default.createElement("div", { className: b('content') },
+            react_1.default.createElement("div", { className: b('title') }, title))));
+};
+exports.EnrichedLink = EnrichedLink;

package/build/cjs/components/Navigation/components/ButtonsContainer/ButtonsContainer.css

@@ -0,0 +1,12 @@
+.pc-addons-buttons-container {
+  display: flex;
+}
+
+.pc-addons-buttons-container_direction_row {
+  gap: 12px;
+}
+
+.pc-addons-buttons-container_direction_column {
+  gap: 8px;
+  flex-direction: column;
+}

package/build/cjs/components/Navigation/components/ButtonsContainer/ButtonsContainer.d.ts

@@ -0,0 +1,15 @@
+import React, { PropsWithChildren } from 'react';
+import type { ButtonProps } from '@doyourjob/gravity-ui-page-constructor';
+import type { ButtonWidth } from '@gravity-ui/uikit';
+export declare enum ButtonsContainerDirection {
+    Row = "row",
+    Column = "column"
+}
+interface ButtonsContainerProps extends PropsWithChildren {
+    buttons: ButtonProps[];
+    className?: string;
+    width?: ButtonWidth;
+    direction?: ButtonsContainerDirection;
+}
+export declare const ButtonsContainer: ({ buttons, className, width, direction, children, }: ButtonsContainerProps) => React.JSX.Element;
+export {};

package/build/cjs/components/Navigation/components/ButtonsContainer/ButtonsContainer.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonsContainer = exports.ButtonsContainerDirection = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const cn_1 = require("../../../../utils/cn");
+var ButtonsContainerDirection;
+(function (ButtonsContainerDirection) {
+    ButtonsContainerDirection["Row"] = "row";
+    ButtonsContainerDirection["Column"] = "column";
+})(ButtonsContainerDirection = exports.ButtonsContainerDirection || (exports.ButtonsContainerDirection = {}));
+const b = (0, cn_1.block)('buttons-container');
+const ButtonsContainer = ({ buttons, className, width, direction = ButtonsContainerDirection.Row, children, }) => (react_1.default.createElement("div", { className: b({ direction }, className) }, buttons === null || buttons === void 0 ? void 0 :
+    buttons.map((button) => (react_1.default.createElement(gravity_ui_page_constructor_1.Button, Object.assign({}, button, { size: "l", className: b('item'), key: button.text, width: width })))),
+    children));
+exports.ButtonsContainer = ButtonsContainer;

package/build/cjs/components/Navigation/components/LangSwitch/LangSwitch.css

@@ -0,0 +1,62 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-lang-switch {
+  margin-left: 1px;
+}
+
+.pc-addons-lang-switch:hover:before {
+  background: none;
+}
+
+.pc-addons-lang-switch:hover .pc-addons-lang-switch__icon {
+  color: var(--g-color-text-complementary);
+}
+
+.pc-addons-lang-switch_size_m {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+}
+
+.pc-addons-lang-switch__icon {
+  position: relative;
+  top: -1px;
+}
+
+.pc-addons-lang-switch__popup {
+  --yc-popup-border-width: 0;
+  --yc-popup-border-color: none;
+  border-radius: var(--g-border-radius-l);
+  box-shadow: 0 3px 10px var(--g-color-base-generic-hover);
+  padding: 0;
+}
+
+.pc-addons-lang-switch__text {
+  position: relative;
+  top: -1px;
+  margin-right: 3px;
+  margin-left: -7px;
+}
+
+@media (max-width: 1080px) {
+  .pc-addons-lang-switch:not(.pc-addons-lang-switch_show-text) {
+    width: 24px;
+    margin-left: 8px;
+  }
+  .pc-addons-lang-switch:not(.pc-addons-lang-switch_show-text) .pc-addons-lang-switch__text {
+    top: 0;
+    margin-left: 25px;
+  }
+}
+@media (max-width: 768px) {
+  .pc-addons-lang-switch:not(.pc-addons-lang-switch_show-text) {
+    width: 36px;
+  }
+  .pc-addons-lang-switch_search {
+    display: none;
+  }
+}
+@media (max-width: 576px) {
+  .pc-addons-lang-switch {
+    margin-right: 2px;
+  }
+}

package/build/cjs/components/Navigation/components/LangSwitch/LangSwitchPopup/LangSwitchPopup.css

@@ -0,0 +1,62 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-lang-switch-popup {
+  overflow: hidden;
+  margin: calc(-1 * var(--yc-popover-padding));
+}
+
+.pc-addons-lang-switch-popup__item {
+  color: inherit;
+  text-decoration: none;
+  border-radius: var(--g-focus-border-radius);
+  display: block;
+  padding: 6px 12px;
+}
+
+.pc-addons-lang-switch-popup__item:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: -2px;
+}
+
+.pc-addons-lang-switch-popup__item:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+.pc-addons-lang-switch-popup__item:first-child {
+  padding-top: 12px;
+}
+
+.pc-addons-lang-switch-popup__item:last-child {
+  padding-bottom: 12px;
+}
+
+.pc-addons-lang-switch-popup__item:hover {
+  background: var(--g-color-base-generic);
+}
+
+.pc-addons-lang-switch-popup__icon {
+  margin-top: 2px;
+  width: 20px;
+  height: 14px;
+  margin-right: 6px;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: 3px;
+}
+
+.pc-addons-lang-switch-popup__lang {
+  color: var(--g-color-text-secondary);
+}
+
+.pc-addons-lang-switch-popup__row {
+  display: flex;
+}
+
+.pc-addons-lang-switch-popup__name, .pc-addons-lang-switch-popup__icon-check {
+  color: var(--g-color-text-primary);
+}
+
+.pc-addons-lang-switch-popup__text {
+  display: flex;
+  flex-direction: column;
+  margin-right: 8px;
+}

package/build/cjs/components/Navigation/components/LangSwitch/LangSwitchPopup/LangSwitchPopup.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { LangSwitchItem } from '../../../models';
+interface LangSwitchPopupProps {
+    items: LangSwitchItem[];
+}
+export declare const LangSwitchPopup: ({ items }: LangSwitchPopupProps) => React.JSX.Element;
+export {};

package/build/cjs/components/Navigation/components/LangSwitch/LangSwitchPopup/LangSwitchPopup.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LangSwitchPopup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Check_1 = tslib_1.__importDefault(require("@gravity-ui/icons/Check"));
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../../utils/cn");
+const b = (0, cn_1.block)('lang-switch-popup');
+const LangSwitchPopup = ({ items }) => {
+    return (react_1.default.createElement("div", { className: b() }, items.map(({ title, description, active, url, icon }) => {
+        return (
+        // eslint-disable-next-line jsx-a11y/anchor-is-valid
+        react_1.default.createElement("a", { className: b('item'), key: description, href: active ? undefined : url },
+            react_1.default.createElement("div", { className: b('row') },
+                icon && (react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icon, width: 18, height: 12 })),
+                react_1.default.createElement("div", { className: b('text') },
+                    react_1.default.createElement("span", { className: b('name') }, title),
+                    react_1.default.createElement("span", { className: b('lang') }, description)),
+                active && (react_1.default.createElement(uikit_1.Icon, { className: b('icon-check'), data: Check_1.default, width: 16, height: 16 })))));
+    })));
+};
+exports.LangSwitchPopup = LangSwitchPopup;

package/build/cjs/components/Navigation/components/LangSwitch/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ButtonProps, PopupPlacement } from '@gravity-ui/uikit';
+import { LangSwitchItem } from '../../models';
+export interface LangSwitchProps {
+    text?: string;
+    iconClassName?: string;
+    className?: string;
+    isSearchMode?: boolean;
+    direction?: PopupPlacement;
+    tooltipClassName?: string;
+    showText?: boolean;
+    size?: ButtonProps['size'];
+    iconSize?: number;
+    isMobile?: boolean;
+    items: LangSwitchItem[];
+}
+export declare const LangSwitch: ({ text, iconClassName, isSearchMode, direction, className, size, iconSize, items, showText, isMobile, }: LangSwitchProps) => React.JSX.Element;

package/build/cjs/components/Navigation/components/LangSwitch/index.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LangSwitch = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const Globe_1 = tslib_1.__importDefault(require("@gravity-ui/icons/Globe"));
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../utils/cn");
+const utils_1 = require("../../utils");
+const LangSwitchPopup_1 = require("./LangSwitchPopup/LangSwitchPopup");
+const b = (0, cn_1.block)('lang-switch');
+const langSwitchTooltipId = 'lang-switch-tooltip-id';
+const LangSwitch = ({ text, iconClassName, isSearchMode, direction = 'bottom', className, size, iconSize, items, showText, isMobile, }) => {
+    const tooltipRef = (0, react_1.useRef)(null);
+    const buttonRef = (0, react_1.useRef)(null);
+    const tooltipOffset = isMobile ? [0, 12] : [0, 14];
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(uikit_1.Popover, { className: className, ref: tooltipRef, openOnHover: false, hasArrow: false, placement: direction, content: react_1.default.createElement(LangSwitchPopup_1.LangSwitchPopup, { items: items }), tooltipOffset: tooltipOffset, tooltipClassName: b('popup'), tooltipId: langSwitchTooltipId, focusTrap: true, 
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus: true, onOpenChange: setIsOpened, disablePortal: true, restoreFocusRef: buttonRef }, ({ onClick }) => (react_1.default.createElement(uikit_1.Button, { view: "flat", size: size || (isMobile ? 'l' : 's'), className: b({ search: isSearchMode, 'show-text': showText, size }), onClick: onClick, extraProps: {
+            'aria-expanded': isOpened,
+            'aria-controls': langSwitchTooltipId,
+        }, ref: buttonRef },
+        showText && react_1.default.createElement("span", { className: b('text') }, text),
+        react_1.default.createElement(uikit_1.Icon, { className: b('icon', iconClassName), data: Globe_1.default, size: iconSize || (0, utils_1.getIconSize)(isMobile) })))));
+};
+exports.LangSwitch = LangSwitch;

package/build/cjs/components/Navigation/components/Logo/Logo.css

@@ -0,0 +1,53 @@
+.pc-addons-logo__text {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-logo {
+  width: 214px;
+  outline: none;
+  color: inherit;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  border-radius: var(--g-focus-border-radius);
+}
+
+.utilityfocus .pc-addons-logo:focus {
+  outline: 2px solid #ffdb4d;
+}
+
+.pc-addons-logo:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+
+.pc-addons-logo:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+.pc-addons-logo_mobile {
+  width: 141px;
+}
+
+.pc-addons-logo__img {
+  display: block;
+  margin: 0;
+  height: 32px;
+}
+
+.pc-addons-logo__text {
+  font-size: var(--g-text-header-1-font-size, var(--pc-text-header-1-font-size));
+  line-height: var(--g-text-header-1-line-height, var(--pc-text-header-1-line-height));
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+  margin-left: 12px;
+  white-space: nowrap;
+}
+
+@media (max-width: 369px) {
+  .pc-addons-logo__img {
+    height: 30px;
+  }
+}

package/build/cjs/components/Navigation/components/Logo/Logo.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClassNameProps, Theme } from '@doyourjob/gravity-ui-page-constructor';
+import { LogoData } from '../../models';
+export interface LogoProps extends LogoData, ClassNameProps {
+    theme?: Theme;
+    imageClassName?: string;
+}
+declare const Logo: React.FC<LogoProps>;
+export default Logo;

package/build/cjs/components/Navigation/components/Logo/Logo.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const cn_1 = require("../../../../utils/cn");
+const mobile_1 = require("../../contexts/mobile");
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
+const b = (0, cn_1.block)('logo');
+const Logo = ({ href = '/', src, className, imageClassName, title, text, alt, width, }) => {
+    const isMobile = (0, react_1.useContext)(mobile_1.MobileContext);
+    return (react_1.default.createElement("a", { href: href, className: b({ mobile: isMobile }, className), title: title || (0, i18n_1.default)('link-title'), style: width ? { width } : {} },
+        src && (react_1.default.createElement("img", { className: b('img', imageClassName), alt: alt || (0, i18n_1.default)('image-alt'), src: src })),
+        text && react_1.default.createElement("span", { className: b('text') }, text)));
+};
+exports.default = Logo;

package/build/cjs/components/Navigation/components/Logo/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "link-title": "Home page",
+  "image-alt": "Site logo"
+}

package/build/cjs/components/Navigation/components/Logo/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/cjs/components/Navigation/components/Logo/i18n/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const registerKeyset_1 = require("../../../../../utils/registerKeyset");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const COMPONENT = 'Logo';
+exports.default = (0, registerKeyset_1.registerKeyset)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

package/build/cjs/components/Navigation/components/Logo/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "link-title": "Домашняя страница",
+  "image-alt": "Логотип"
+}

package/build/cjs/components/Navigation/components/MobileNavigation/MobileNavigation.css

@@ -0,0 +1,47 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-mobile-navigation {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+}
+
+.pc-addons-mobile-navigation__icon {
+  display: none;
+}
+
+.pc-addons-mobile-navigation__icon:hover:before {
+  background: none;
+}
+
+.pc-addons-mobile-navigation__icon:hover .pc-addons-mobile-navigation__icon {
+  color: var(--g-color-text-complementary);
+}
+
+.pc-addons-mobile-navigation__icon-icon {
+  position: relative;
+  top: 3px;
+}
+
+.pc-addons-mobile-navigation__icon_hidden {
+  display: none;
+}
+
+.pc-addons-mobile-navigation__user {
+  margin-top: 24px;
+}
+
+.pc-addons-mobile-navigation__buttons {
+  margin-top: 8px;
+}
+
+@media (max-width: 769px) {
+  .pc-addons-mobile-navigation__icon {
+    display: block;
+  }
+  .pc-addons-mobile-navigation__icon_hidden {
+    display: none;
+  }
+}

package/build/cjs/components/Navigation/components/MobileNavigation/MobileNavigation.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ButtonProps } from '@doyourjob/gravity-ui-page-constructor';
+import { CustomElements } from '../../containers/Header/Header';
+import { NavigationSectionData } from '../../models';
+interface MobileNavigationProps {
+    isOpened: boolean;
+    toogleOpen: (isOpened: boolean) => void;
+    isSearchOpen: boolean;
+    data: NavigationSectionData[];
+    onMenuScroll: (scrollTop: number) => void;
+    popupClassName?: string;
+    buttons?: ButtonProps[];
+    customElements?: CustomElements;
+}
+export declare const MobileNavigation: ({ isOpened, toogleOpen, isSearchOpen, data, buttons, onMenuScroll, customElements: { actions, right }, }: MobileNavigationProps) => React.JSX.Element;
+export {};

package/build/cjs/components/Navigation/components/MobileNavigation/MobileNavigation.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileNavigation = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../utils/cn");
+const Header_1 = require("../../containers/Header/Header");
+const ButtonsContainer_1 = require("../ButtonsContainer/ButtonsContainer");
+const MobileNavigationItem_1 = require("./MobileNavigationItem/MobileNavigationItem");
+const MobileNavigationPopup_1 = require("./MobileNavigationPopup/MobileNavigationPopup");
+const b = (0, cn_1.block)('mobile-navigation');
+const MobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, buttons, onMenuScroll, customElements: { actions, right } = {}, }) => (react_1.default.createElement("div", { className: b() },
+    react_1.default.createElement(uikit_1.Button, { view: "flat", size: "l", className: b('icon', { hidden: isSearchOpen }), onClick: (e) => {
+            e.stopPropagation();
+            toogleOpen(!isOpened);
+        } },
+        react_1.default.createElement(uikit_1.Icon, { data: isOpened ? icons_1.Xmark : icons_1.Bars, size: Header_1.MOBILE_ICON_SIZE })),
+    react_1.default.createElement(MobileNavigationPopup_1.MobileNavigationPopup, { isOpened: isOpened, onClose: () => toogleOpen(false), onMenuScroll: onMenuScroll },
+        react_1.default.createElement("nav", null,
+            react_1.default.createElement("ul", { className: b() }, data.map((item) => (react_1.default.createElement("li", { className: b(), key: item.title },
+                react_1.default.createElement(MobileNavigationItem_1.MobileNavigationItem, { data: item }))))),
+            buttons && (react_1.default.createElement(ButtonsContainer_1.ButtonsContainer, { buttons: buttons, className: b('buttons'), width: "max", direction: ButtonsContainer_1.ButtonsContainerDirection.Column }, actions)),
+            right))));
+exports.MobileNavigation = MobileNavigation;