@gravity-ui/page-constructor 1.6.0 → 1.7.0-alpha.0

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 index_1 = require("../../../index");
+const utils_1 = require("../../../../utils");
+const locationContext_1 = require("../../../../context/locationContext");
+const navigation_1 = require("../../../../models/navigation");
+const icons_1 = require("../../../../icons");
+const SocialIcon_1 = (0, tslib_1.__importDefault)(require("../SocialIcon/SocialIcon"));
+const b = (0, bem_cn_lite_1.default)('navigation-item');
+const Content = ({ text, icon }) => (react_1.default.createElement(react_1.Fragment, null,
+    icon && react_1.default.createElement("img", { className: b('icon'), src: icon }),
+    react_1.default.createElement("span", { className: b('text') }, text)));
+const NavigationDropdown = (_a) => {
+    var { text, icon, isOpened } = _a, props = (0, tslib_1.__rest)(_a, ["text", "icon", "isOpened"]);
+    return (react_1.default.createElement("span", Object.assign({}, props),
+        react_1.default.createElement(Content, { text: text, icon: icon }),
+        react_1.default.createElement(index_1.ToggleArrow, { className: b('dropdown'), size: 12, type: 'vertical', iconType: "navigation", open: isOpened })));
+};
+const NavigationLink = (props) => {
+    const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    const { url, text, icon, arrow, target } = props, rest = (0, tslib_1.__rest)(props, ["url", "text", "icon", "arrow", "target"]);
+    const linkExtraProps = (0, utils_1.getLinkProps)(url, hostname, target);
+    const content = (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(Content, { text: text, icon: icon }),
+        arrow && react_1.default.createElement(icons_1.NavigationArrow, { className: b('arrow') })));
+    return (linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) ? (react_1.default.createElement("a", Object.assign({ href: url, title: text }, rest, linkExtraProps), content)) : (react_1.default.createElement(index_1.RouterLink, { href: url, passHref: true },
+        react_1.default.createElement("a", Object.assign({}, rest), content)));
+};
+//todo: add types support form component in map
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const NavigationItemsMap = {
+    [navigation_1.NavigationItemType.Button]: index_1.RouterLink,
+    [navigation_1.NavigationItemType.Social]: SocialIcon_1.default,
+    [navigation_1.NavigationItemType.Dropdown]: NavigationDropdown,
+    [navigation_1.NavigationItemType.Link]: NavigationLink,
+};
+const NavigationItem = (_a) => {
+    var { data, className } = _a, props = (0, tslib_1.__rest)(_a, ["data", "className"]);
+    const { type = navigation_1.NavigationItemType.Link } = data;
+    const Component = NavigationItemsMap[type];
+    const componentProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign({ className: b({ type }, className) }, data), props)), [className, data, props, type]);
+    return react_1.default.createElement(Component, Object.assign({}, componentProps));
+};
+exports.default = NavigationItem;

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

@@ -0,0 +1,33 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.navigation-popup {
+  position: fixed;
+  top: calc(var(--header-height) - 16px);
+  padding-right: 4px;
+  padding-left: 4px;
+  transform: translateX(calc(calc(8px * 2) * -1));
+  z-index: 101;
+  display: flex;
+  flex-direction: column;
+  min-width: 220px;
+  padding: 16px;
+  border: 1px solid var(--yc-color-line-generic);
+  border-top-width: 0;
+  border-radius: calc(var(--pc-border-radius) / 2);
+  background: var(--yc-color-base-float);
+  box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
+}
+@media (max-width: 768px) {
+  .navigation-popup {
+    display: none;
+  }
+}
+.navigation-popup__link {
+  height: 36px;
+  padding: 8px 12px;
+  border-radius: 8px;
+}
+.navigation-popup__link:hover {
+  color: var(--yc-color-text-primary);
+  background-color: var(--yc-color-base-simple-hover);
+}

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

@@ -0,0 +1,24 @@
+import React, { RefObject } from 'react';
+import { NavigationLinkItem } from '../../../../models/navigation';
+export interface NavigationPopupProps {
+    items: NavigationLinkItem[];
+    onClose: () => void;
+    left?: number;
+    className?: string;
+}
+interface NavigationPopupState {
+    calculatedLeft?: number;
+}
+export default class NavigationPopup extends React.Component<NavigationPopupProps, NavigationPopupState> {
+    ref: RefObject<HTMLDivElement>;
+    state: {
+        calculatedLeft: number | undefined;
+    };
+    private calculateLeft;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: NavigationPopupProps): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element | null;
+    private renderDefaultPopup;
+}
+export {};

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
+const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const index_1 = require("../../../index");
+const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
+const b = (0, bem_cn_lite_1.default)('navigation-popup');
+class NavigationPopup extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.ref = (0, react_1.createRef)();
+        this.state = {
+            calculatedLeft: this.props.left,
+        };
+        this.calculateLeft = lodash_1.default.debounce(() => {
+            const { left } = this.props;
+            if (this.ref && this.ref.current && left) {
+                const right = left + this.ref.current.offsetWidth;
+                const docWidth = document.body.clientWidth;
+                const calculatedLeft = right > docWidth ? left - (right - docWidth) : left;
+                this.setState({ calculatedLeft });
+            }
+            else {
+                this.setState({ calculatedLeft: left });
+            }
+        }, 100);
+    }
+    componentDidMount() {
+        this.calculateLeft();
+        window.addEventListener('resize', this.calculateLeft);
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.left !== this.props.left) {
+            this.calculateLeft();
+        }
+    }
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.calculateLeft);
+    }
+    render() {
+        if (!document || !document.body) {
+            return null;
+        }
+        const { onClose } = this.props;
+        const { calculatedLeft } = this.state;
+        return (react_1.default.createElement(uikit_1.Portal, null,
+            react_1.default.createElement("div", { ref: this.ref, className: b(), style: { left: calculatedLeft } },
+                react_1.default.createElement(index_1.OutsideClick, { onOutsideClick: onClose }, this.renderDefaultPopup()))));
+    }
+    renderDefaultPopup() {
+        return (react_1.default.createElement(react_1.Fragment, null, this.props.items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item })))));
+    }
+}
+exports.default = NavigationPopup;

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

@@ -0,0 +1,20 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.social-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  margin-right: 8px;
+  color: var(--yc-color-base-background);
+  border-radius: 50%;
+  background-color: var(--yc-color-base-generic);
+}
+.social-icon:hover {
+  background-color: var(--yc-color-base-generic-hover);
+}
+.social-icon__icon {
+  width: 16px;
+  height: 16px;
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NavigationSocialItem } from '../../../../models/navigation';
+export interface NavigationSocialItemProps extends NavigationSocialItem {
+    className?: string;
+}
+declare const SocialIcon: React.FC<NavigationSocialItemProps>;
+export default SocialIcon;

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

@@ -0,0 +1,10 @@
+"use strict";
+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 b = (0, bem_cn_lite_1.default)('social-icon');
+const SocialIcon = ({ icon, url, className }) => (react_1.default.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
+    react_1.default.createElement(index_1.Image, { className: b('icon'), src: icon })));
+exports.default = SocialIcon;

package/build/cjs/containers/PageConstructor/PageConstructor.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ShouldRenderBlock, CustomConfig, PageContent, CustomItems } from '../../models';
 import { blockMap, subBlockMap } from '../../constructor-items';
+import { NavigationData } from '../../models/navigation';
 import '@doc-tools/transform/dist/js/yfm';
 export declare type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;
 export interface PageConstructorProps {
@@ -8,6 +9,7 @@ export interface PageConstructorProps {
     shouldRenderBlock?: ShouldRenderBlock;
     custom?: CustomConfig;
     renderMenu?: () => React.ReactNode;
+    navigationData?: NavigationData;
 }
 export declare const Constructor: (props: PageConstructorProps) => JSX.Element;
 export declare const PageConstructor: (props: PageConstructorProps) => JSX.Element;

package/build/cjs/containers/PageConstructor/PageConstructor.js

@@ -15,6 +15,7 @@ const ConstructorRow_1 = require("./components/ConstructorRow");
 const ConstructorFootnotes_1 = require("./components/ConstructorFootnotes");
 const ConstructorItem_1 = require("./components/ConstructorItem");
 const ConstructorBlocks_1 = require("./components/ConstructorBlocks");
+const Header_1 = (0, tslib_1.__importDefault)(require("../../components/navigation/components/Header/Header"));
 require("@doc-tools/transform/dist/js/yfm");
 const b = (0, utils_1.block)('page-constructor');
 const Constructor = (props) => {
@@ -30,7 +31,7 @@ const Constructor = (props) => {
         });
     }, [props.custom]);
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
-    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, } = props;
+    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, navigationData, } = props;
     const hasFootnotes = footnotes.length > 0;
     const isHeaderBlock = (block) => headerBlockTypes.includes(block.type);
     const header = blocks === null || blocks === void 0 ? void 0 : blocks.find(isHeaderBlock);
@@ -39,7 +40,8 @@ const Constructor = (props) => {
     return (react_1.default.createElement(innerContext_1.InnerContext.Provider, { value: context },
         react_1.default.createElement("div", { className: b() },
             react_1.default.createElement("div", { className: b('wrapper') },
-                react_1.default.createElement(BackgroundMedia_1.default, Object.assign({}, themedBackground, { className: b('background') })),
+                themedBackground && (react_1.default.createElement(BackgroundMedia_1.default, Object.assign({}, themedBackground, { className: b('background') }))),
+                (navigationData === null || navigationData === void 0 ? void 0 : navigationData.header) && (react_1.default.createElement(Header_1.default, { logo: navigationData === null || navigationData === void 0 ? void 0 : navigationData.logo, data: navigationData === null || navigationData === void 0 ? void 0 : navigationData.header })),
                 renderMenu && renderMenu(),
                 header && react_1.default.createElement(ConstructorItem_1.ConstructorHeader, { data: header }),
                 react_1.default.createElement(grid_1.Grid, null,

package/build/cjs/context/locationContext/locationContext.d.ts

@@ -16,5 +16,6 @@ export declare type LocationContextProps = {
     pathname?: string;
     hostname?: string;
     Link?: RouterLink;
+    asPath?: string;
 };
 export declare const LocationContext: React.Context<LocationContextProps>;

package/build/cjs/icons/NavigationArrow.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NavigationArrow: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/cjs/icons/NavigationArrow.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationArrow = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const svg_1 = require("../utils/svg");
+const NavigationArrow = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "9", height: "9", fill: "none", viewBox: "0 0 9 9" }, svg_1.a11yHiddenSvgProps, props),
+    react_1.default.createElement("path", { d: "M3 1H8M8 1V6M8 1L1 8", stroke: "currentColor", strokeOpacity: "0.7", strokeWidth: "1.2", strokeLinecap: "square" })));
+exports.NavigationArrow = NavigationArrow;

package/build/cjs/icons/NavigationClose.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NavigationClose: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/cjs/icons/NavigationClose.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationClose = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const svg_1 = require("../utils/svg");
+const NavigationClose = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "36", height: "36", fill: "none" }, svg_1.a11yHiddenSvgProps, props),
+    react_1.default.createElement("path", { d: "M26 10 10 26m16 0L10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })));
+exports.NavigationClose = NavigationClose;

package/build/cjs/icons/NavigationOpen.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NavigationOpen: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/cjs/icons/NavigationOpen.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationOpen = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const svg_1 = require("../utils/svg");
+const NavigationOpen = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "36", height: "36", fill: "none" }, svg_1.a11yHiddenSvgProps, props),
+    react_1.default.createElement("rect", { x: "8", y: "10", width: "20", height: "2", rx: "1", fill: "currentColor" }),
+    react_1.default.createElement("rect", { x: "8", y: "17", width: "20", height: "2", rx: "1", fill: "currentColor" }),
+    react_1.default.createElement("rect", { x: "8", y: "24", width: "20", height: "2", rx: "1", fill: "currentColor" })));
+exports.NavigationOpen = NavigationOpen;

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

@@ -6,3 +6,6 @@ export * from './Github';
 export * from './NavigationChevron';
 export * from './PlayVideo';
 export * from './PreviewClose';
+export * from './NavigationClose';
+export * from './NavigationOpen';
+export * from './NavigationArrow';

package/build/cjs/icons/index.js

@@ -9,3 +9,6 @@ const tslib_1 = require("tslib");
 (0, tslib_1.__exportStar)(require("./NavigationChevron"), exports);
 (0, tslib_1.__exportStar)(require("./PlayVideo"), exports);
 (0, tslib_1.__exportStar)(require("./PreviewClose"), exports);
+(0, tslib_1.__exportStar)(require("./NavigationClose"), exports);
+(0, tslib_1.__exportStar)(require("./NavigationOpen"), exports);
+(0, tslib_1.__exportStar)(require("./NavigationArrow"), exports);

package/build/cjs/models/constructor-items/blocks.d.ts

@@ -118,8 +118,10 @@ export interface ExtendedFeaturesItem {
     title?: string;
     text?: string;
     label?: string;
-    icon?: string;
+    icon?: ThemedImage;
+    /** @deprecated **/
     link?: LinkProps;
+    links?: LinkProps[];
 }
 export interface ExtendedFeaturesProps extends Animatable {
     items: ExtendedFeaturesItem[];

package/build/cjs/models/navigation.d.ts

@@ -0,0 +1,59 @@
+import { ButtonProps } from '../components/Button/Button';
+export declare enum NavigationItemType {
+    Link = "link",
+    Dropdown = "dropdown",
+    Button = "button",
+    Social = "social"
+}
+export interface NavigationItemBase {
+    text: string;
+    icon?: string;
+    url?: string;
+}
+export interface NavigationLinkItem extends NavigationItemBase {
+    type: NavigationItemType.Link;
+    url: string;
+    arrow?: boolean;
+    target?: string;
+}
+export interface NavigationButtonItem extends ButtonProps {
+    type: NavigationItemType.Button;
+    url: string;
+    target?: string;
+}
+export interface NavigationDropdownItem extends NavigationItemBase {
+    type: NavigationItemType.Dropdown;
+    items: NavigationLinkItem[];
+}
+export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
+    type: NavigationItemType.Social;
+    icon: string;
+    url: string;
+}
+export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
+export interface NavigationLogo extends Omit<NavigationItemBase, 'text'> {
+    icon: string;
+    text?: string;
+}
+export interface HeaderData {
+    leftItems: NavigationItem[];
+    rightItems?: NavigationItem[];
+}
+export interface FooterColumn {
+    title: string;
+    links: NavigationItem[];
+}
+export interface FooterUnderline {
+    links?: NavigationItem[];
+    copyright?: string;
+}
+export interface FooterData {
+    columns: FooterColumn[];
+    social?: NavigationSocialItem[];
+    underline?: FooterUnderline;
+}
+export interface NavigationData {
+    logo: NavigationLogo;
+    header: HeaderData;
+    footer?: FooterData;
+}

package/build/cjs/models/navigation.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationItemType = void 0;
+var NavigationItemType;
+(function (NavigationItemType) {
+    NavigationItemType["Link"] = "link";
+    NavigationItemType["Dropdown"] = "dropdown";
+    NavigationItemType["Button"] = "button";
+    NavigationItemType["Social"] = "social";
+})(NavigationItemType = exports.NavigationItemType || (exports.NavigationItemType = {}));

package/build/cjs/text-transform/blocks.js

@@ -155,7 +155,12 @@ const config = {
         {
             fields: ['items'],
             transformer: typografTransformer,
-            parser: parseFeatures,
+            parser: (0, exports.createItemsParser)(['title']),
+        },
+        {
+            fields: ['items'],
+            transformer: yfmTransformer,
+            parser: (0, exports.createItemsParser)(['text', 'additionalInfo']),
         },
     ],
     [models_1.BlockType.PromoFeaturesBlock]: {

package/build/esm/blocks/ExtendedFeatures/ExtendedFeatures.css

@@ -12,6 +12,8 @@ unpredictable css rules order in build */
 }
 .pc-ExtendedFeaturesBlock__item {
   margin-top: 32px;
+}
+.pc-ExtendedFeaturesBlock__item.col {
   padding-right: 32px;
 }
 .pc-ExtendedFeaturesBlock__item-title {
@@ -74,12 +76,15 @@ unpredictable css rules order in build */
   height: 32px;
   background-size: cover;
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
 }
 @media (max-width: 577px) {
   .pc-ExtendedFeaturesBlock__item {
     margin-top: 32px;
   }
+  .pc-ExtendedFeaturesBlock__item.col {
+    padding-right: 8px;
+  }
 }
 @media (min-width: 769px) {
   .pc-ExtendedFeaturesBlock.pc-AnimateBlock .pc-ExtendedFeaturesBlock__item, .pc-AnimateBlock .pc-ExtendedFeaturesBlock .pc-ExtendedFeaturesBlock__item {

package/build/esm/blocks/ExtendedFeatures/ExtendedFeatures.js

@@ -1,7 +1,11 @@
-import React from 'react';
-import { block } from '../../utils';
+import React, { useContext } from 'react';
+import { block, getThemedValue } from '../../utils';
 import { Row, Col } from '../../grid';
-import { Link, HTML, AnimateBlock, BlockHeader } from '../../components/';
+import { AnimateBlock, BlockHeader, HTML } from '../../components/';
+import { Content } from '../../sub-blocks';
+import Image from '../../components/Image/Image';
+import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { getMediaImage } from '../../components/Media/Image/utils';
 import './ExtendedFeatures.css';
 const b = block('ExtendedFeaturesBlock');
 const DEFAULT_SIZES = {
@@ -9,15 +13,25 @@ const DEFAULT_SIZES = {
     sm: 6,
     md: 4,
 };
-export const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_SIZES, animated, }) => (React.createElement(AnimateBlock, { className: b(), animate: animated },
-    React.createElement(BlockHeader, { title: title, description: description, className: b('header') }),
-    React.createElement("div", { className: b('items') },
-        React.createElement(Row, null, items.map(({ title: itemTitle, text, link, label, icon }) => (React.createElement(Col, { className: b('item'), key: text || itemTitle, sizes: colSizes },
-            icon && React.createElement("img", { src: icon, className: b('icon') }),
-            itemTitle && (React.createElement("h5", { className: b('item-title', { 'has-label': Boolean(label) }) },
-                React.createElement(HTML, null, itemTitle),
-                label && React.createElement("div", { className: b('item-label') }, label))),
-            text && (React.createElement("div", { className: b('item-text') },
-                React.createElement(HTML, null, text))),
-            link && React.createElement(Link, Object.assign({ className: b('item-link') }, link)))))))));
+export const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_SIZES, animated, }) => {
+    const { themeValue: theme } = useContext(ThemeValueContext);
+    return (React.createElement(AnimateBlock, { className: b(), animate: animated },
+        React.createElement(BlockHeader, { title: title, description: description, className: b('header') }),
+        React.createElement("div", { className: b('items') },
+            React.createElement(Row, null, items.map(({ title: itemTitle, text, link, links, label, icon }) => {
+                const itemLinks = links || [];
+                const iconThemed = icon && getThemedValue(icon, theme);
+                const iconData = iconThemed && getMediaImage(iconThemed);
+                if (link) {
+                    itemLinks.push(link);
+                }
+                return (React.createElement(Col, { className: b('item'), key: text || itemTitle, sizes: colSizes },
+                    iconData && React.createElement(Image, Object.assign({}, iconData, { className: b('icon') })),
+                    React.createElement("div", { className: b('container') },
+                        itemTitle && (React.createElement("h5", { className: b('item-title') },
+                            React.createElement(HTML, null, itemTitle),
+                            label && (React.createElement("div", { className: b('item-label') }, label)))),
+                        React.createElement(Content, { text: text, links: itemLinks, size: "s", colSizes: { all: 12, md: 12 } }))));
+            })))));
+};
 export default ExtendedFeaturesBlock;

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

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

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

@@ -0,0 +1,85 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.header {
+  position: sticky;
+  z-index: 98;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  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);
+}
+.header__wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: var(--header-height);
+}
+@media (min-width: 769px) {
+  .header__mobile-menu-button {
+    display: none;
+  }
+}
+.header__navigation, .header__left, .header__right {
+  display: flex;
+  align-items: center;
+}
+.header__navigation {
+  position: relative;
+  flex: 1 0 0;
+  justify-content: flex-start;
+  margin-right: 20px;
+}
+@media (max-width: 768px) {
+  .header__navigation {
+    display: none;
+  }
+}
+.header__right {
+  flex: 0;
+  justify-content: flex-end;
+}
+.header__navigation-container {
+  display: flex;
+  overflow-x: hidden;
+  flex: 1 0 0;
+  justify-content: space-between;
+  align-items: center;
+  margin-right: 20px;
+}
+.header__buttons {
+  display: flex;
+}
+@media (max-width: 768px) {
+  .header__buttons {
+    display: none;
+  }
+}
+.header__buttons > *:not(:last-child) {
+  margin-right: 16px;
+}
+.header__button {
+  margin-top: 0;
+}
+.header__logo {
+  margin: 0 32px 0 0;
+  cursor: pointer;
+}
+@media (max-width: 768px) {
+  .header__navigation-container {
+    justify-content: flex-end;
+  }
+  .header__left {
+    flex: 1 0 0;
+  }
+}
+@media (max-width: 576px) {
+  .header__navigation-container {
+    margin-right: 12px;
+  }
+  .header__logo {
+    margin-right: 0;
+  }
+}

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { HeaderData, NavigationLogo } from '../../../../models/navigation';
+import './Header.css';
+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 default Header;