@gravity-ui/page-constructor 1.7.0-alpha.1 → 1.7.0-alpha.10

package/README.md

@@ -32,59 +32,81 @@ const Page: WithChildren<PageProps> = ({content}) => (
 
 ```typescript
 interface PageConstructorProps {
-    content: PageContent; //Blocks data in JSON format.
-    shouldRenderBlock?: ShouldRenderBlock; // A function that is invoked when rendering each block and  lets you set conditions for its display.
-    custom?: Custom; //Custom blocks (see `Customization`).
-    renderMenu?: () => React.ReactNode; //A function that renders the page menu with navigation (we plan to add rendering for the default menu version).
+  content: PageContent; //Blocks data in JSON format.
+  shouldRenderBlock?: ShouldRenderBlock; // A function that is invoked when rendering each block and  lets you set conditions for its display.
+  custom?: Custom; //Custom blocks (see `Customization`).
+  renderMenu?: () => React.ReactNode; //A function that renders the page menu with navigation (we plan to add rendering for the default menu version).
+  navigation?: NavigationData; // Navigation data for using navigation component in JSON format
 }
 
 interface PageConstructorProviderProps {
-    isMobile?: boolean; //A flag indicating that the code is executed in mobile mode.
-    locale?: LocaleContextProps; //Info about the language and domain (used when generating and formatting links).
-    location?: Location; //API of the browser or router history, the page URL.
-    metrika?: Metrika; //Functions for sending analytics
-    ssrConfig?: SSR; //A flag indicating that the code is run on the server size.
-    theme?: 'light' | 'dark'; //Theme to render the page with.
+  isMobile?: boolean; //A flag indicating that the code is executed in mobile mode.
+  locale?: LocaleContextProps; //Info about the language and domain (used when generating and formatting links).
+  location?: Location; //API of the browser or router history, the page URL.
+  metrika?: Metrika; //Functions for sending analytics
+  ssrConfig?: SSR; //A flag indicating that the code is run on the server size.
+  theme?: 'light' | 'dark'; //Theme to render the page with.
 }
 
 export interface PageContent extends Animatable {
-    blocks: Block[];
-    menu?: Menu;
-    background?: MediaProps;
-    footnotes?: string[];
+  blocks: Block[];
+  menu?: Menu;
+  background?: MediaProps;
+  footnotes?: string[];
 }
 
 interface Custom {
-    blocks?: CustomItems;
-    subBlocks?:CustomItems;
-    headers?: CustomItems;
-    loadable?: LoadableConfig;
+  blocks?: CustomItems;
+  subBlocks?: CustomItems;
+  headers?: CustomItems;
+  loadable?: LoadableConfig;
 }
 
 type ShouldRenderBlock = (block: Block, blockKey: string) => Boolean;
 
-interface Location = {
-    history?: History;
-    search?: string;
-    hash?: string;
-    pathname?: string;
-    hostname?: string;
-};
-
-interface Locale = {
-    lang?: Lang;
-    tld?: string;
-};
-
-interface SSR = {
-    isServer?: boolean;
+interface Location {
+  history?: History;
+  search?: string;
+  hash?: string;
+  pathname?: string;
+  hostname?: string;
 }
 
-interface Metrika = {
-    metrika?: any;
-    pixel?: any;
+interface Locale {
+  lang?: Lang;
+  tld?: string;
 }
 
+interface SSR {
+  isServer?: boolean;
+}
+
+interface Metrika {
+  metrika?: any;
+  pixel?: any;
+}
+
+interface NavigationData {
+  logo: NavigationLogo;
+  header: HeaderData;
+}
+
+interface NavigationLogo {
+  icon: ImageProps;
+  text?: string;
+  url?: string;
+}
+
+interface HeaderData {
+  leftItems: NavigationItem[];
+  rightItems?: NavigationItem[];
+}
+
+interface NavigationLogo {
+  icon: ImageProps;
+  text?: string;
+  url?: string;
+}
 ```
 
 ### Custom blocks

package/build/cjs/components/OverflowScroller/OverflowScroller.css

@@ -9,10 +9,12 @@
 .pc-overflow-scroller__scroller {
   position: absolute;
   z-index: 10;
+  top: 0;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   width: 32px;
+  height: calc(100% - 1px);
   cursor: pointer;
   color: var(--yc-color-text-secondary);
   background: linear-gradient(to left, var(--yc-color-base-background) 70%, var(--pc-transparent) 100%) no-repeat;

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

@@ -1,7 +1,7 @@
 import { WithChildren } from '../../models';
 export interface RouterLinkProps {
     href: string;
-    [key: string]: any;
+    [key: string]: unknown;
 }
 declare const RouterLink: ({ href, children }: WithChildren<RouterLinkProps>) => JSX.Element;
 export default RouterLink;

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

@@ -34,4 +34,5 @@ export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
 export { default as Header } from './navigation/components/Header/Header';
+export * as Navigation from './navigation/components/index';
 export type { RouterLinkProps } from './RouterLink/RouterLink';

package/build/cjs/components/index.js

@@ -1,78 +1,77 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.Image = exports.HeightCalculator = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockHeader = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
+exports.Navigation = exports.Header = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.Image = exports.HeightCalculator = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockHeader = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
+const tslib_1 = require("tslib");
 var Anchor_1 = require("./Anchor/Anchor");
-Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return __importDefault(Anchor_1).default; } });
+Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Anchor_1).default; } });
 var AnimateBlock_1 = require("./AnimateBlock/AnimateBlock");
-Object.defineProperty(exports, "AnimateBlock", { enumerable: true, get: function () { return __importDefault(AnimateBlock_1).default; } });
+Object.defineProperty(exports, "AnimateBlock", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(AnimateBlock_1).default; } });
 var BackgroundImage_1 = require("./BackgroundImage/BackgroundImage");
-Object.defineProperty(exports, "BackgroundImage", { enumerable: true, get: function () { return __importDefault(BackgroundImage_1).default; } });
+Object.defineProperty(exports, "BackgroundImage", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BackgroundImage_1).default; } });
 var BackgroundMedia_1 = require("./BackgroundMedia/BackgroundMedia");
-Object.defineProperty(exports, "BackgroundMedia", { enumerable: true, get: function () { return __importDefault(BackgroundMedia_1).default; } });
+Object.defineProperty(exports, "BackgroundMedia", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BackgroundMedia_1).default; } });
 var BackLink_1 = require("./BackLink/BackLink");
-Object.defineProperty(exports, "BackLink", { enumerable: true, get: function () { return __importDefault(BackLink_1).default; } });
+Object.defineProperty(exports, "BackLink", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BackLink_1).default; } });
 var BalancedMasonry_1 = require("./BalancedMasonry/BalancedMasonry");
-Object.defineProperty(exports, "BalancedMasonry", { enumerable: true, get: function () { return __importDefault(BalancedMasonry_1).default; } });
+Object.defineProperty(exports, "BalancedMasonry", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BalancedMasonry_1).default; } });
 var BlockBase_1 = require("./BlockBase/BlockBase");
-Object.defineProperty(exports, "BlockBase", { enumerable: true, get: function () { return __importDefault(BlockBase_1).default; } });
+Object.defineProperty(exports, "BlockBase", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BlockBase_1).default; } });
 var BlockHeader_1 = require("./BlockHeader/BlockHeader");
-Object.defineProperty(exports, "BlockHeader", { enumerable: true, get: function () { return __importDefault(BlockHeader_1).default; } });
+Object.defineProperty(exports, "BlockHeader", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BlockHeader_1).default; } });
 var Button_1 = require("./Button/Button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Button_1).default; } });
 var CardBase_1 = require("./CardBase/CardBase");
-Object.defineProperty(exports, "CardBase", { enumerable: true, get: function () { return __importDefault(CardBase_1).default; } });
+Object.defineProperty(exports, "CardBase", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(CardBase_1).default; } });
 var ErrorWrapper_1 = require("./ErrorWrapper/ErrorWrapper");
-Object.defineProperty(exports, "ErrorWrapper", { enumerable: true, get: function () { return __importDefault(ErrorWrapper_1).default; } });
+Object.defineProperty(exports, "ErrorWrapper", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(ErrorWrapper_1).default; } });
 var FileLink_1 = require("./FileLink/FileLink");
-Object.defineProperty(exports, "FileLink", { enumerable: true, get: function () { return __importDefault(FileLink_1).default; } });
+Object.defineProperty(exports, "FileLink", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(FileLink_1).default; } });
 var Foldable_1 = require("./Foldable/Foldable");
-Object.defineProperty(exports, "Foldable", { enumerable: true, get: function () { return __importDefault(Foldable_1).default; } });
+Object.defineProperty(exports, "Foldable", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Foldable_1).default; } });
 var FullscreenImage_1 = require("./FullscreenImage/FullscreenImage");
-Object.defineProperty(exports, "FullscreenImage", { enumerable: true, get: function () { return __importDefault(FullscreenImage_1).default; } });
+Object.defineProperty(exports, "FullscreenImage", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(FullscreenImage_1).default; } });
 var FullWidthBackground_1 = require("./FullWidthBackground/FullWidthBackground");
-Object.defineProperty(exports, "FullWidthBackground", { enumerable: true, get: function () { return __importDefault(FullWidthBackground_1).default; } });
+Object.defineProperty(exports, "FullWidthBackground", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(FullWidthBackground_1).default; } });
 var HeaderBreadcrumbs_1 = require("./HeaderBreadcrumbs/HeaderBreadcrumbs");
-Object.defineProperty(exports, "HeaderBreadcrumbs", { enumerable: true, get: function () { return __importDefault(HeaderBreadcrumbs_1).default; } });
+Object.defineProperty(exports, "HeaderBreadcrumbs", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(HeaderBreadcrumbs_1).default; } });
 var HeightCalculator_1 = require("./HeightCalculator/HeightCalculator");
-Object.defineProperty(exports, "HeightCalculator", { enumerable: true, get: function () { return __importDefault(HeightCalculator_1).default; } });
+Object.defineProperty(exports, "HeightCalculator", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(HeightCalculator_1).default; } });
 var Image_1 = require("./Image/Image");
-Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(Image_1).default; } });
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Image_1).default; } });
 var Link_1 = require("./Link/Link");
-Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return __importDefault(Link_1).default; } });
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Link_1).default; } });
 var Links_1 = require("./Link/Links");
-Object.defineProperty(exports, "Links", { enumerable: true, get: function () { return __importDefault(Links_1).default; } });
+Object.defineProperty(exports, "Links", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Links_1).default; } });
 var Media_1 = require("./Media/Media");
-Object.defineProperty(exports, "Media", { enumerable: true, get: function () { return __importDefault(Media_1).default; } });
+Object.defineProperty(exports, "Media", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Media_1).default; } });
 var OutsideClick_1 = require("./OutsideClick/OutsideClick");
-Object.defineProperty(exports, "OutsideClick", { enumerable: true, get: function () { return __importDefault(OutsideClick_1).default; } });
+Object.defineProperty(exports, "OutsideClick", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(OutsideClick_1).default; } });
 var ReactPlayer_1 = require("./ReactPlayer/ReactPlayer");
-Object.defineProperty(exports, "ReactPlayer", { enumerable: true, get: function () { return __importDefault(ReactPlayer_1).default; } });
+Object.defineProperty(exports, "ReactPlayer", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(ReactPlayer_1).default; } });
 var Table_1 = require("./Table/Table");
-Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Table_1).default; } });
 var Title_1 = require("./Title/Title");
-Object.defineProperty(exports, "Title", { enumerable: true, get: function () { return __importDefault(Title_1).default; } });
+Object.defineProperty(exports, "Title", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Title_1).default; } });
 var ToggleArrow_1 = require("./ToggleArrow/ToggleArrow");
-Object.defineProperty(exports, "ToggleArrow", { enumerable: true, get: function () { return __importDefault(ToggleArrow_1).default; } });
+Object.defineProperty(exports, "ToggleArrow", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(ToggleArrow_1).default; } });
 var UnpublishedLabel_1 = require("./UnpublishedLabel/UnpublishedLabel");
-Object.defineProperty(exports, "UnpublishedLabel", { enumerable: true, get: function () { return __importDefault(UnpublishedLabel_1).default; } });
+Object.defineProperty(exports, "UnpublishedLabel", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(UnpublishedLabel_1).default; } });
 var VideoBlock_1 = require("./VideoBlock/VideoBlock");
-Object.defineProperty(exports, "VideoBlock", { enumerable: true, get: function () { return __importDefault(VideoBlock_1).default; } });
+Object.defineProperty(exports, "VideoBlock", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(VideoBlock_1).default; } });
 var YFMWrapper_1 = require("./YFMWrapper/YFMWrapper");
-Object.defineProperty(exports, "YFMWrapper", { enumerable: true, get: function () { return __importDefault(YFMWrapper_1).default; } });
+Object.defineProperty(exports, "YFMWrapper", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(YFMWrapper_1).default; } });
 var YandexForm_1 = require("./YandexForm/YandexForm");
-Object.defineProperty(exports, "YandexForm", { enumerable: true, get: function () { return __importDefault(YandexForm_1).default; } });
+Object.defineProperty(exports, "YandexForm", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(YandexForm_1).default; } });
 var Control_1 = require("./Control/Control");
-Object.defineProperty(exports, "Control", { enumerable: true, get: function () { return __importDefault(Control_1).default; } });
+Object.defineProperty(exports, "Control", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Control_1).default; } });
 var OverflowScroller_1 = require("./OverflowScroller/OverflowScroller");
-Object.defineProperty(exports, "OverflowScroller", { enumerable: true, get: function () { return __importDefault(OverflowScroller_1).default; } });
+Object.defineProperty(exports, "OverflowScroller", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(OverflowScroller_1).default; } });
 var Author_1 = require("./Author/Author");
-Object.defineProperty(exports, "Author", { enumerable: true, get: function () { return __importDefault(Author_1).default; } });
+Object.defineProperty(exports, "Author", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Author_1).default; } });
 var RouterLink_1 = require("./RouterLink/RouterLink");
-Object.defineProperty(exports, "RouterLink", { enumerable: true, get: function () { return __importDefault(RouterLink_1).default; } });
+Object.defineProperty(exports, "RouterLink", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(RouterLink_1).default; } });
 var HTML_1 = require("./HTML/HTML");
-Object.defineProperty(exports, "HTML", { enumerable: true, get: function () { return __importDefault(HTML_1).default; } });
+Object.defineProperty(exports, "HTML", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(HTML_1).default; } });
 var Header_1 = require("./navigation/components/Header/Header");
-Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return __importDefault(Header_1).default; } });
+Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Header_1).default; } });
+exports.Navigation = (0, tslib_1.__importStar)(require("./navigation/components/index"));

package/build/cjs/components/navigation/components/Header/Header.css

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.header {
+.pc-header {
   position: sticky;
   z-index: 98;
   top: 0;
@@ -9,39 +9,39 @@ unpredictable css rules order in build */
   align-items: center;
   height: var(--header-height);
   background-color: var(--yc-color-base-background);
-  box-shadow: inset 0px -1px 0px var(--yc-color-line-generic);
+  box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
 }
-.header__wrapper {
+.pc-header__wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: var(--header-height);
 }
 @media (min-width: 769px) {
-  .header__mobile-menu-button {
+  .pc-header__mobile-menu-button {
     display: none;
   }
 }
-.header__navigation, .header__left, .header__right {
+.pc-header__navigation, .pc-header__left, .pc-header__right {
   display: flex;
   align-items: center;
 }
-.header__navigation {
+.pc-header__navigation {
   position: relative;
+  margin-right: 20px;
   flex: 1 0 0;
   justify-content: flex-start;
-  margin-right: 20px;
 }
 @media (max-width: 768px) {
-  .header__navigation {
+  .pc-header__navigation {
     display: none;
   }
 }
-.header__right {
+.pc-header__right {
   flex: 0;
   justify-content: flex-end;
 }
-.header__navigation-container {
+.pc-header__navigation-container {
   display: flex;
   overflow-x: hidden;
   flex: 1 0 0;
@@ -49,37 +49,37 @@ unpredictable css rules order in build */
   align-items: center;
   margin-right: 20px;
 }
-.header__buttons {
+.pc-header__buttons {
   display: flex;
 }
 @media (max-width: 768px) {
-  .header__buttons {
+  .pc-header__buttons {
     display: none;
   }
 }
-.header__buttons > *:not(:last-child) {
+.pc-header__buttons > *:not(:last-child) {
   margin-right: 16px;
 }
-.header__button {
+.pc-header__button {
   margin-top: 0;
 }
-.header__logo {
+.pc-header__logo {
   margin: 0 32px 0 0;
   cursor: pointer;
 }
 @media (max-width: 768px) {
-  .header__navigation-container {
+  .pc-header__navigation-container {
     justify-content: flex-end;
   }
-  .header__left {
+  .pc-header__left {
     flex: 1 0 0;
   }
 }
 @media (max-width: 576px) {
-  .header__navigation-container {
+  .pc-header__navigation-container {
     margin-right: 12px;
   }
-  .header__logo {
+  .pc-header__logo {
     margin-right: 0;
   }
 }

package/build/cjs/components/navigation/components/Header/Header.d.ts

@@ -1,28 +1,8 @@
 import React from 'react';
-import { HeaderData, NavigationLogo } from '../../../../models/navigation';
+import { HeaderData, NavigationLogo } from '../../../../models';
 export interface HeaderProps {
     logo: NavigationLogo;
     data: HeaderData;
 }
-interface HeaderState {
-    isSidebarOpened: boolean;
-    activeItemIndex: number;
-}
-declare class Header extends React.Component<HeaderProps, HeaderState> {
-    ref: React.RefObject<unknown>;
-    state: {
-        isSidebarOpened: boolean;
-        activeItemIndex: number;
-    };
-    render(): JSX.Element;
-    private renderLeft;
-    private renderLogo;
-    private renderRight;
-    private renderRightItems;
-    private renderMobileMenuButton;
-    private renderMobileNavigation;
-    private onActiveItemChange;
-    private onSidebarOpenedChange;
-    private hideSidebar;
-}
+export declare const Header: React.FC<HeaderProps>;
 export default Header;

package/build/cjs/components/navigation/components/Header/Header.js

@@ -1,81 +1,51 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
+const utils_1 = require("../../../../utils");
 const grid_1 = require("../../../../grid");
 const OutsideClick_1 = (0, tslib_1.__importDefault)(require("../../../OutsideClick/OutsideClick"));
 const Control_1 = (0, tslib_1.__importDefault)(require("../../../Control/Control"));
-const Logo_1 = (0, tslib_1.__importDefault)(require("../Logo/Logo"));
 const Navigation_1 = (0, tslib_1.__importDefault)(require("../Navigation/Navigation"));
 const MobileNavigation_1 = (0, tslib_1.__importDefault)(require("../MobileNavigation/MobileNavigation"));
 const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
+const Logo_1 = (0, tslib_1.__importDefault)(require("../Logo/Logo"));
 const icons_1 = require("../../../../icons");
-const b = (0, bem_cn_lite_1.default)('header');
-class Header extends react_1.default.Component {
-    constructor() {
-        super(...arguments);
-        this.ref = (0, react_1.createRef)();
-        this.state = {
-            isSidebarOpened: false,
-            activeItemIndex: -1,
-        };
-        this.onActiveItemChange = (index) => {
-            this.setState({ activeItemIndex: index });
-        };
-        this.onSidebarOpenedChange = (isSidebarOpened) => {
-            this.setState({ isSidebarOpened });
-        };
-        this.hideSidebar = () => {
-            this.setState({ isSidebarOpened: false });
-        };
-    }
-    render() {
-        return (react_1.default.createElement(grid_1.Grid, { className: b() },
-            react_1.default.createElement(grid_1.Row, null,
-                react_1.default.createElement(grid_1.Col, null,
-                    react_1.default.createElement("header", { className: b('wrapper') },
-                        this.renderLogo(),
-                        this.renderLeft(),
-                        this.renderRight(),
-                        this.renderMobileNavigation())))));
-    }
-    renderLeft() {
-        const { activeItemIndex } = this.state;
-        const { leftItems } = this.props.data;
-        return (leftItems && (react_1.default.createElement("div", { className: b('navigation-container') },
-            react_1.default.createElement(Navigation_1.default, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: this.onActiveItemChange }))));
-    }
-    renderLogo() {
-        const { logo } = this.props;
-        if (!logo) {
-            return null;
-        }
-        return (react_1.default.createElement("div", { className: b('left') },
-            react_1.default.createElement(Logo_1.default, Object.assign({}, logo, { className: b('logo') }))));
-    }
-    renderRight() {
-        return (react_1.default.createElement("div", { className: b('right') },
-            this.renderMobileMenuButton(),
-            this.renderRightItems()));
-    }
-    renderRightItems() {
-        const { rightItems } = this.props.data;
-        return (rightItems && (react_1.default.createElement("div", { className: b('buttons') }, rightItems.map((button) => (react_1.default.createElement(NavigationItem_1.default, { key: button.text, data: button, className: b('button') }))))));
-    }
-    renderMobileMenuButton() {
-        const { isSidebarOpened } = this.state;
-        const iconProps = { icon: isSidebarOpened ? icons_1.NavigationClose : icons_1.NavigationOpen, iconSize: 36 };
-        return (react_1.default.createElement(Control_1.default, Object.assign({ className: b('mobile-menu-button'), onClick: (e) => {
-                e.stopPropagation();
-                this.onSidebarOpenedChange(!isSidebarOpened);
-            }, size: "l" }, iconProps)));
-    }
-    renderMobileNavigation() {
-        const { leftItems, rightItems } = this.props.data;
-        const { isSidebarOpened, activeItemIndex } = this.state;
-        return (react_1.default.createElement(OutsideClick_1.default, { onOutsideClick: () => this.onSidebarOpenedChange(false) },
-            react_1.default.createElement(MobileNavigation_1.default, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: this.onActiveItemChange, onClose: this.hideSidebar })));
-    }
-}
-exports.default = Header;
+const b = (0, utils_1.block)('header');
+const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
+    const iconProps = { icon: isSidebarOpened ? icons_1.NavigationClose : icons_1.NavigationOpen, iconSize: 36 };
+    return (react_1.default.createElement(Control_1.default, Object.assign({ className: b('mobile-menu-button'), onClick: (e) => {
+            e.stopPropagation();
+            onSidebarOpenedChange(!isSidebarOpened);
+        }, size: "l" }, iconProps)));
+};
+const Header = ({ data, logo }) => {
+    const { leftItems, rightItems } = data;
+    const [isSidebarOpened, setIsSidebarOpened] = (0, react_1.useState)(false);
+    const [activeItemIndex, setActiveItemIndex] = (0, react_1.useState)(-1);
+    const onActiveItemChange = (0, react_1.useCallback)((index) => {
+        setActiveItemIndex(index);
+    }, []);
+    const onSidebarOpenedChange = (0, react_1.useCallback)((isOpen) => {
+        setIsSidebarOpened(isOpen);
+    }, []);
+    const hideSidebar = (0, react_1.useCallback)(() => {
+        setIsSidebarOpened(false);
+    }, []);
+    return (react_1.default.createElement(grid_1.Grid, { className: b() },
+        react_1.default.createElement(grid_1.Row, null,
+            react_1.default.createElement(grid_1.Col, null,
+                react_1.default.createElement("header", { className: b('wrapper') },
+                    logo && (react_1.default.createElement("div", { className: b('left') },
+                        react_1.default.createElement(Logo_1.default, Object.assign({}, logo, { className: b('logo') })))),
+                    react_1.default.createElement("div", { className: b('navigation-container') },
+                        react_1.default.createElement(Navigation_1.default, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange })),
+                    react_1.default.createElement("div", { className: b('right') },
+                        react_1.default.createElement(MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
+                        rightItems && (react_1.default.createElement("div", { className: b('buttons') }, rightItems.map((button) => (react_1.default.createElement(NavigationItem_1.default, { key: button.text, data: button, className: b('button') })))))),
+                    react_1.default.createElement(OutsideClick_1.default, { onOutsideClick: () => onSidebarOpenedChange(false) },
+                        react_1.default.createElement(MobileNavigation_1.default, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })))))));
+};
+exports.Header = Header;
+exports.default = exports.Header;

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

@@ -1,18 +1,23 @@
+.pc-logo {
+  margin: 0;
+}
+
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.logo {
+.pc-logo {
   display: flex;
   align-items: center;
-  font-weight: 500;
-  font-size: var(--yc-text-header-2-font-size);
-  line-height: var(--yc-text-header-2-line-height);
+  font-weight: var(--yc-text-accent-font-weight);
+  font-size: var(--yc-text-header-1-font-size);
+  line-height: var(--yc-text-header-1-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
 }
-.logo__icon {
-  width: 178px;
-  height: 36px;
+.pc-logo__icon {
+  display: flex;
   margin-right: 8px;
   object-fit: contain;
 }
-.logo__text {
+.pc-logo__text {
   white-space: nowrap;
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationLogo } from '../../../../models/navigation';
+import { NavigationLogo } from '../../../../models';
 export interface LogoProps extends NavigationLogo {
     className?: string;
 }

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

@@ -2,12 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importDefault)(require("react"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
-const index_1 = require("../../../index");
+const utils_1 = require("../../../../utils");
 const RouterLink_1 = (0, tslib_1.__importDefault)(require("../../../RouterLink/RouterLink"));
-const b = (0, bem_cn_lite_1.default)('logo');
-const Logo = ({ icon, text, className }) => (react_1.default.createElement(RouterLink_1.default, { href: "/", passHref: true },
-    react_1.default.createElement("div", { className: b(null, className) },
-        icon && react_1.default.createElement(index_1.Image, { className: b('icon'), src: icon }),
-        react_1.default.createElement("span", { className: b('text') }, text))));
+const utils_2 = require("../../../Media/Image/utils");
+const index_1 = require("../../../index");
+const b = (0, utils_1.block)('logo');
+const Logo = ({ icon, text, className }) => {
+    const imageData = (0, utils_2.getMediaImage)(icon);
+    return (react_1.default.createElement(RouterLink_1.default, { href: "/", passHref: true },
+        react_1.default.createElement("div", { className: b(null, className) },
+            imageData && react_1.default.createElement(index_1.Image, Object.assign({ className: b('icon') }, imageData)),
+            react_1.default.createElement("span", { className: b('text') }, text))));
+};
 exports.default = Logo;