@gravity-ui/page-constructor 1.16.4 → 1.18.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [1.18.0](https://github.com/gravity-ui/page-constructor/compare/v1.17.0...v1.18.0) (2023-02-28)
+
+
+### Features
+
+* monochrome mixin moved from 'Button.css' to 'mixins.css' ([#173](https://github.com/gravity-ui/page-constructor/issues/173)) ([6bb35cf](https://github.com/gravity-ui/page-constructor/commit/6bb35cfea50f7c62682404da02f594dd4f90a011))
+
+## [1.17.0](https://github.com/gravity-ui/page-constructor/compare/v1.16.4...v1.17.0) (2023-02-28)
+
+
+### Features
+
+* **Navigation:** add github star button in navigation ([#159](https://github.com/gravity-ui/page-constructor/issues/159)) ([829d358](https://github.com/gravity-ui/page-constructor/commit/829d3582772378940993c4f676fe08676693266a))
+
+
+### Bug Fixes
+
+* remove background from Overlowscroller ([#153](https://github.com/gravity-ui/page-constructor/issues/153)) ([652adfa](https://github.com/gravity-ui/page-constructor/commit/652adfaf92156e1f96a9292d034c5139aac7894c))
+
 ## [1.16.4](https://github.com/gravity-ui/page-constructor/compare/v1.16.3...v1.16.4) (2023-02-22)
 
 

package/build/cjs/components/BackLink/__tests__/BackLink.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/cjs/components/BackLink/__tests__/BackLink.test.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const user_event_1 = tslib_1.__importDefault(require("@testing-library/user-event"));
+const BackLink_1 = tslib_1.__importDefault(require("../BackLink"));
+const locationContext_1 = require("../../../context/locationContext");
+const backLinkProps = {
+    url: '#',
+    title: 'Button Title',
+    theme: 'default',
+    size: 's',
+    className: 'customClassName',
+    shouldHandleBackAction: true,
+    onClick: () => { },
+};
+describe('BackLink', () => {
+    test('Default render', async () => {
+        (0, react_2.render)(react_1.default.createElement(BackLink_1.default, Object.assign({}, backLinkProps)));
+        const backLink = react_2.screen.getByRole('button');
+        expect(backLink).toBeInTheDocument();
+    });
+    test('Has custom class', async () => {
+        (0, react_2.render)(react_1.default.createElement(BackLink_1.default, Object.assign({}, backLinkProps)));
+        const backLink = react_2.screen.getByRole('button');
+        expect(backLink).toHaveClass(backLinkProps.className);
+    });
+    test('Should render <a /> tag', async () => {
+        (0, react_2.render)(react_1.default.createElement(BackLink_1.default, Object.assign({}, backLinkProps, { shouldHandleBackAction: false })));
+        const backLink = react_2.screen.getByRole('link');
+        expect(backLink).toBeVisible();
+        expect(backLink).toHaveAttribute('href', backLinkProps.url);
+    });
+    test('Should render title', async () => {
+        (0, react_2.render)(react_1.default.createElement(BackLink_1.default, Object.assign({}, backLinkProps)));
+        const backLink = react_2.screen.getByText(backLinkProps.title);
+        expect(backLink).toBeInTheDocument();
+    });
+    test('Call onClick', async () => {
+        const user = user_event_1.default.setup();
+        const handleClick = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(locationContext_1.LocationContext.Provider, { value: { history: { push: jest.fn() } } },
+            react_1.default.createElement(BackLink_1.default, Object.assign({}, backLinkProps, { onClick: handleClick }))));
+        const backLink = react_2.screen.getByRole('button');
+        await user.click(backLink);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    test.each(new Array('s', 'm', 'l', 'xl'))('Render with given "%s" size', (size) => {
+        (0, react_2.render)(react_1.default.createElement(BackLink_1.default, Object.assign({}, backLinkProps, { size: size })));
+        const backLink = react_2.screen.getByRole('button');
+        expect(backLink).toHaveClass(`yc-button_size_${size}`);
+    });
+    test.each(new Array('default', 'special'))('Render with given "%s" theme', (theme) => {
+        const matchView = {
+            default: 'flat-secondary',
+            special: 'flat-contrast',
+        };
+        (0, react_2.render)(react_1.default.createElement(BackLink_1.default, Object.assign({}, backLinkProps, { theme: theme })));
+        const backLink = react_2.screen.getByRole('button');
+        expect(backLink).toHaveClass(`yc-button_view_${matchView[theme]}`);
+    });
+});

package/build/cjs/components/Button/Button.css

@@ -1,3 +1,5 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
 .pc-button-block__content {
   display: flex;
   align-items: center;

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

@@ -1,12 +1,24 @@
 .pc-overflow-scroller {
+  display: flex;
+  align-items: center;
   position: relative;
   overflow-x: hidden;
 }
+.pc-overflow-scroller__container {
+  width: 100%;
+  position: relative;
+}
+.pc-overflow-scroller__container_padding-left {
+  padding-left: 24px;
+}
+.pc-overflow-scroller__container_padding-right {
+  padding-right: 24px;
+}
 .pc-overflow-scroller__wrapper {
   position: relative;
-  transition: left 0.3s;
+  transition: left 0.6s;
 }
-.pc-overflow-scroller__scroller {
+.pc-overflow-scroller__arrow {
   position: absolute;
   z-index: 10;
   top: 0;
@@ -17,12 +29,11 @@
   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;
 }
-.pc-overflow-scroller__scroller_type_left {
+.pc-overflow-scroller__arrow_type_left {
   left: 0;
   transform: rotate(180deg);
 }
-.pc-overflow-scroller__scroller_type_right {
+.pc-overflow-scroller__arrow_type_right {
   right: 0;
 }

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

@@ -11,7 +11,7 @@ export interface OverflowScrollerState {
 }
 export default class OverflowScroller extends React.Component<PropsWithChildren<OverflowScrollerProps>, OverflowScrollerState> {
     state: {
-        arrows: never[];
+        arrows: Arrow[];
         scrollValue: number;
     };
     containerRef: React.RefObject<HTMLDivElement>;

package/build/cjs/components/OverflowScroller/OverflowScroller.js

@@ -7,6 +7,7 @@ const utils_1 = require("../../utils");
 const __1 = require("..");
 const b = (0, utils_1.block)('overflow-scroller');
 const TRANSITION_TIME = 300;
+const PADDING_SIZE = 24;
 class OverflowScroller extends react_1.default.Component {
     constructor() {
         super(...arguments);
@@ -30,7 +31,7 @@ class OverflowScroller extends react_1.default.Component {
             }
         }, 100);
         this.handleScrollClick = (e, arrow) => {
-            const { scrollValue } = this.state;
+            const { scrollValue, arrows } = this.state;
             const { onScrollStart } = this.props;
             if (this.containerRef &&
                 this.containerRef.current &&
@@ -39,8 +40,9 @@ class OverflowScroller extends react_1.default.Component {
                 const containerWidth = this.containerRef.current.offsetWidth;
                 const wrapperWidth = this.wrapperRef.current.offsetWidth;
                 const hiddenWidth = arrow === 'right' ? wrapperWidth - (containerWidth + scrollValue) : scrollValue;
+                const padding = arrows.length > 1 && hiddenWidth + PADDING_SIZE > containerWidth ? PADDING_SIZE : 0;
                 const delta = containerWidth > hiddenWidth ? hiddenWidth : containerWidth;
-                const newScrollValue = arrow === 'right' ? scrollValue + delta : scrollValue - delta;
+                const newScrollValue = arrow === 'right' ? scrollValue + delta + padding : scrollValue - delta - padding;
                 let newArrows = ['left', 'right'];
                 if (newScrollValue + containerWidth >= wrapperWidth) {
                     newArrows = ['left'];
@@ -73,9 +75,15 @@ class OverflowScroller extends react_1.default.Component {
         const { className, children } = this.props;
         const { arrows, scrollValue } = this.state;
         const wrapperStyle = arrows.length ? { left: -scrollValue } : { left: 0 };
-        return (react_1.default.createElement("div", { className: b(null, className), ref: this.containerRef },
-            react_1.default.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children),
-            arrows.map((direction) => (react_1.default.createElement("div", { key: direction, className: b('scroller', { type: direction }), onClick: (e) => this.handleScrollClick(e, direction) },
+        const paddingLeft = arrows.includes('left');
+        const paddingRight = arrows.includes('right');
+        return (react_1.default.createElement("div", { className: b('container', {
+                'padding-left': paddingLeft,
+                'padding-right': paddingRight,
+            }) },
+            react_1.default.createElement("div", { className: b(null, className), ref: this.containerRef },
+                react_1.default.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children)),
+            arrows.map((direction) => (react_1.default.createElement("div", { key: direction, className: b('arrow', { type: direction }), onClick: (e) => this.handleScrollClick(e, direction) },
                 react_1.default.createElement(__1.ToggleArrow, { size: 18, type: 'horizontal', iconType: "navigation" }))))));
     }
 }

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

@@ -4,13 +4,19 @@ export declare enum NavigationItemType {
     Link = "link",
     Dropdown = "dropdown",
     Button = "button",
-    Social = "social"
+    Social = "social",
+    GithubStars = "github-stars"
 }
 export interface NavigationItemBase {
     text: string;
     icon?: ImageProps;
     url?: string;
 }
+export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
+    type: NavigationItemType.GithubStars;
+    url: string;
+    label?: string;
+}
 export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
     type: NavigationItemType.Link;
     url: string;
@@ -29,8 +35,8 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     icon: ImageProps;
     url: string;
 }
-export type NavigationItemModel = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
-export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
+export type NavigationItemModel = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem | NavigationGithubButton;
+export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData | NavigationGithubButton;
 export type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
 export interface NavigationLogoData {
     icon: ImageProps;

package/build/cjs/models/navigation.js

@@ -7,4 +7,5 @@ var NavigationItemType;
     NavigationItemType["Dropdown"] = "dropdown";
     NavigationItemType["Button"] = "button";
     NavigationItemType["Social"] = "social";
+    NavigationItemType["GithubStars"] = "github-stars";
 })(NavigationItemType = exports.NavigationItemType || (exports.NavigationItemType = {}));

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

@@ -29,7 +29,6 @@ unpredictable css rules order in build */
 }
 .pc-header__navigation.pc-header__navigation {
   position: relative;
-  margin-right: 20px;
   flex: 1 0 0;
   justify-content: flex-start;
 }
@@ -49,10 +48,11 @@ unpredictable css rules order in build */
   flex: 1 0 0;
   justify-content: space-between;
   align-items: center;
-  margin-right: 20px;
+  margin-right: 32px;
 }
 .pc-header__buttons {
   display: flex;
+  align-items: center;
 }
 @media (max-width: 768px) {
   .pc-header__buttons {

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

@@ -47,7 +47,7 @@ const Header = ({ data, logo }) => {
                         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') })))))),
+                        rightItems && (react_1.default.createElement("div", { className: b('buttons') }, rightItems.map((button) => (react_1.default.createElement(NavigationItem_1.default, { key: button.text, data: 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 })))))));
 };

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

@@ -1,41 +1,6 @@
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
 .pc-navigation-item {
   position: relative;
   display: flex;
   align-items: center;
   white-space: nowrap;
-}
-.pc-navigation-item_type_link {
-  color: var(--yc-color-text-primary);
-  color: inherit;
-  text-decoration: none;
-  outline: none;
-}
-.utilityfocus .pc-navigation-item_type_link:focus {
-  outline: 2px solid #ffdb4d;
-}
-.pc-navigation-item_type_link:hover, .pc-navigation-item_type_link_active {
-  color: var(--yc-color-text-link);
-}
-.pc-navigation-item_type_button {
-  display: inline-block;
-}
-.pc-navigation-item__arrow {
-  position: relative;
-  top: -2px;
-  width: 9px;
-  height: 9px;
-  margin-left: 5px;
-}
-.pc-navigation-item__icon {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  margin-right: 8px;
-  object-fit: cover;
-}
-.pc-navigation-item__dropdown {
-  margin-left: 7px;
-  color: var(--yc-color-text-secondary);
 }

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

@@ -3,57 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../../utils");
-const components_1 = require("../../../components");
-const locationContext_1 = require("../../../context/locationContext");
 const models_1 = require("../../../models");
-const icons_1 = require("../../../icons");
 const SocialIcon_1 = tslib_1.__importDefault(require("../SocialIcon/SocialIcon"));
-const utils_2 = require("../../../components/Media/Image/utils");
+const NavigationButton_1 = require("./components/NavigationButton/NavigationButton");
+const NavigationDropdown_1 = require("./components/NavigationDropdown/NavigationDropdown");
+const NavigationLink_1 = require("./components/NavigationLink/NavigationLink");
+const GithubStars_1 = require("./components/GithubStars/GithubStars");
 const b = (0, utils_1.block)('navigation-item');
-const Content = ({ text, icon }) => (react_1.default.createElement(react_1.Fragment, null,
-    icon && typeof icon !== 'string' && react_1.default.createElement(components_1.Image, Object.assign({ className: b('icon') }, icon)),
-    react_1.default.createElement("span", { className: b('text') }, text)));
-const NavigationDropdown = (_a) => {
-    var { text, icon, isOpened } = _a, props = tslib_1.__rest(_a, ["text", "icon", "isOpened"]);
-    const iconData = icon && (0, utils_2.getMediaImage)(icon);
-    return (react_1.default.createElement("span", Object.assign({}, props),
-        react_1.default.createElement(Content, { text: text, icon: iconData }),
-        react_1.default.createElement(components_1.ToggleArrow, { className: b('dropdown'), size: 12, type: 'vertical', iconType: "navigation", open: isOpened })));
-};
-const NavigationLink = (props) => {
-    const { hostname, Link } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const { url, text, icon, arrow, target } = props, rest = tslib_1.__rest(props, ["url", "text", "icon", "arrow", "target"]);
-    const linkExtraProps = (0, utils_1.getLinkProps)(url, hostname, target);
-    const iconData = icon && (0, utils_2.getMediaImage)(icon);
-    const content = (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement(Content, { text: text, icon: iconData }),
-        arrow && react_1.default.createElement(icons_1.NavigationArrow, { className: b('arrow') })));
-    if ((linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) || !Link) {
-        return (react_1.default.createElement("a", Object.assign({ href: url, title: text }, rest, linkExtraProps), content));
-    }
-    else {
-        return (react_1.default.createElement(components_1.RouterLink, { href: url, passHref: true },
-            react_1.default.createElement("a", Object.assign({}, rest), content)));
-    }
-};
-const NavigationButton = (props) => {
-    const { url, target } = props;
-    return target ? (react_1.default.createElement(components_1.Button, Object.assign({}, props, { url: url }))) : (react_1.default.createElement(components_1.RouterLink, { href: url },
-        react_1.default.createElement(components_1.Button, Object.assign({}, props, { url: url }))));
-};
 //todo: add types support form component in map
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const NavigationItemsMap = {
-    [models_1.NavigationItemType.Button]: NavigationButton,
+    [models_1.NavigationItemType.Button]: NavigationButton_1.NavigationButton,
     [models_1.NavigationItemType.Social]: SocialIcon_1.default,
-    [models_1.NavigationItemType.Dropdown]: NavigationDropdown,
-    [models_1.NavigationItemType.Link]: NavigationLink,
+    [models_1.NavigationItemType.Dropdown]: NavigationDropdown_1.NavigationDropdown,
+    [models_1.NavigationItemType.Link]: NavigationLink_1.NavigationLink,
+    [models_1.NavigationItemType.GithubStars]: GithubStars_1.GithubStars,
 };
 const NavigationItem = (_a) => {
     var { data, className } = _a, props = tslib_1.__rest(_a, ["data", "className"]);
     const { type = models_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]);
+    const componentProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign({ className: b(null, className) }, data), props)), [className, data, props]);
     return react_1.default.createElement(Component, Object.assign({}, componentProps));
 };
 exports.default = NavigationItem;

package/build/cjs/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.css

@@ -0,0 +1,7 @@
+.pc-content-wrapper__icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  object-fit: cover;
+}

package/build/cjs/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ImageProps } from '../../../../../models';
+export declare const ContentWrapper: React.FC<{
+    text: string;
+    icon?: ImageProps;
+}>;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentWrapper = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../../../utils");
+const components_1 = require("../../../../../components");
+const b = (0, utils_1.block)('content-wrapper');
+const ContentWrapper = ({ text, icon }) => (react_1.default.createElement(react_1.Fragment, null,
+    icon && typeof icon !== 'string' && react_1.default.createElement(components_1.Image, Object.assign({ className: b('icon') }, icon)),
+    react_1.default.createElement("span", { className: b('text') }, text)));
+exports.ContentWrapper = ContentWrapper;

package/build/cjs/navigation/components/NavigationItem/components/GithubStars/GithubStars.css

@@ -0,0 +1,10 @@
+.pc-github-stars {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.pc-github-stars span {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

package/build/cjs/navigation/components/NavigationItem/components/GithubStars/GithubStars.d.ts

@@ -0,0 +1,5 @@
+import { NavigationItemProps } from '../../NavigationItem';
+import { NavigationGithubButton } from '../../../../../models';
+type NavigationGithubButtonProps = NavigationItemProps & NavigationGithubButton;
+export declare const GithubStars: ({ text, url, className, label }: NavigationGithubButtonProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GithubStars = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_github_btn_1 = tslib_1.__importDefault(require("react-github-btn"));
+const utils_1 = require("../../../../../utils");
+const b = (0, utils_1.block)('github-stars');
+const GithubStars = ({ text, url, className, label }) => (react_1.default.createElement("div", { className: b(null, className) },
+    react_1.default.createElement(react_github_btn_1.default, { href: url, "data-show-count": "true", "aria-label": label || 'Stars on GitHub' }, text)));
+exports.GithubStars = GithubStars;

package/build/cjs/navigation/components/NavigationItem/components/NavigationButton/NavigationButton.css

@@ -0,0 +1,3 @@
+.pc-navigation-button {
+  display: inline-block;
+}

package/build/cjs/navigation/components/NavigationItem/components/NavigationButton/NavigationButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ButtonProps } from '../../../../../models';
+import { NavigationItemProps } from '../../NavigationItem';
+type NavigationButtonProps = Pick<NavigationItemProps, 'className'> & ButtonProps;
+export declare const NavigationButton: React.FC<NavigationButtonProps>;
+export {};

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationButton = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../../../../utils");
+const components_1 = require("../../../../../components");
+const b = (0, utils_1.block)('navigation-button');
+const NavigationButton = (props) => {
+    const { url, target, className } = props;
+    const classes = b(null, className);
+    return target ? (react_1.default.createElement(components_1.Button, Object.assign({ className: classes }, props, { url: url }))) : (react_1.default.createElement(components_1.RouterLink, { href: url },
+        react_1.default.createElement(components_1.Button, Object.assign({}, props, { className: classes, url: url }))));
+};
+exports.NavigationButton = NavigationButton;

package/build/cjs/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.css

@@ -0,0 +1,4 @@
+.pc-navigation-dropdown {
+  margin-left: 7px;
+  color: var(--yc-color-text-secondary);
+}

package/build/cjs/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { NavigationItemProps } from '../../NavigationItem';
+import { DropdownItemData } from '../../../../../models';
+type NavigationDropdownProps = NavigationItemProps & DropdownItemData;
+export declare const NavigationDropdown: React.FC<NavigationDropdownProps>;
+export {};

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationDropdown = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const ContentWrapper_1 = require("../ContentWrapper/ContentWrapper");
+const components_1 = require("../../../../../components");
+const utils_1 = require("../../../../../utils");
+const utils_2 = require("../../../../../components/Media/Image/utils");
+const b = (0, utils_1.block)('navigation-dropdown');
+const TOGGLE_ARROW_SIZE = 12;
+const NavigationDropdown = (_a) => {
+    var { text, icon, isOpened } = _a, props = tslib_1.__rest(_a, ["text", "icon", "isOpened"]);
+    const iconData = icon && (0, utils_2.getMediaImage)(icon);
+    return (react_1.default.createElement("span", Object.assign({}, props),
+        react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData }),
+        react_1.default.createElement(components_1.ToggleArrow, { className: b(), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isOpened })));
+};
+exports.NavigationDropdown = NavigationDropdown;

package/build/cjs/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.css

@@ -0,0 +1,21 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-navigation-link {
+  color: var(--yc-color-text-primary);
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+}
+.utilityfocus .pc-navigation-link:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-navigation-link:hover, .pc-navigation-link_active {
+  color: var(--yc-color-text-link);
+}
+.pc-navigation-link__arrow {
+  position: relative;
+  top: -2px;
+  width: 9px;
+  height: 9px;
+  margin-left: 5px;
+}

package/build/cjs/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { NavigationItemProps } from '../../NavigationItem';
+import { NavigationLinkItem } from '../../../../../models';
+type NavigationLinkProps = NavigationItemProps & NavigationLinkItem;
+export declare const NavigationLink: React.FC<NavigationLinkProps>;
+export {};

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationLink = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const ContentWrapper_1 = require("../ContentWrapper/ContentWrapper");
+const icons_1 = require("../../../../../icons");
+const components_1 = require("../../../../../components");
+const utils_1 = require("../../../../../utils");
+const utils_2 = require("../../../../../components/Media/Image/utils");
+const locationContext_1 = require("../../../../../context/locationContext");
+const b = (0, utils_1.block)('navigation-link');
+const NavigationLink = (props) => {
+    const { hostname, Link } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    const { url, text, icon, arrow, target, className } = props, rest = tslib_1.__rest(props, ["url", "text", "icon", "arrow", "target", "className"]);
+    const linkExtraProps = (0, utils_1.getLinkProps)(url, hostname, target);
+    const iconData = icon && (0, utils_2.getMediaImage)(icon);
+    const classes = b(null, className);
+    const content = (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData }),
+        arrow && react_1.default.createElement(icons_1.NavigationArrow, { className: b('arrow') })));
+    if ((linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) || !Link) {
+        return (react_1.default.createElement("a", Object.assign({ href: url, title: text, className: classes }, rest, linkExtraProps), content));
+    }
+    else {
+        return (react_1.default.createElement(components_1.RouterLink, { href: url, passHref: true },
+            react_1.default.createElement("a", Object.assign({}, rest, { className: classes }), content)));
+    }
+};
+exports.NavigationLink = NavigationLink;

package/build/esm/components/BackLink/__tests__/BackLink.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/esm/components/BackLink/__tests__/BackLink.test.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import BackLink from '../BackLink';
+import { LocationContext } from '../../../context/locationContext';
+const backLinkProps = {
+    url: '#',
+    title: 'Button Title',
+    theme: 'default',
+    size: 's',
+    className: 'customClassName',
+    shouldHandleBackAction: true,
+    onClick: () => { },
+};
+describe('BackLink', () => {
+    test('Default render', async () => {
+        render(React.createElement(BackLink, Object.assign({}, backLinkProps)));
+        const backLink = screen.getByRole('button');
+        expect(backLink).toBeInTheDocument();
+    });
+    test('Has custom class', async () => {
+        render(React.createElement(BackLink, Object.assign({}, backLinkProps)));
+        const backLink = screen.getByRole('button');
+        expect(backLink).toHaveClass(backLinkProps.className);
+    });
+    test('Should render <a /> tag', async () => {
+        render(React.createElement(BackLink, Object.assign({}, backLinkProps, { shouldHandleBackAction: false })));
+        const backLink = screen.getByRole('link');
+        expect(backLink).toBeVisible();
+        expect(backLink).toHaveAttribute('href', backLinkProps.url);
+    });
+    test('Should render title', async () => {
+        render(React.createElement(BackLink, Object.assign({}, backLinkProps)));
+        const backLink = screen.getByText(backLinkProps.title);
+        expect(backLink).toBeInTheDocument();
+    });
+    test('Call onClick', async () => {
+        const user = userEvent.setup();
+        const handleClick = jest.fn();
+        render(React.createElement(LocationContext.Provider, { value: { history: { push: jest.fn() } } },
+            React.createElement(BackLink, Object.assign({}, backLinkProps, { onClick: handleClick }))));
+        const backLink = screen.getByRole('button');
+        await user.click(backLink);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    test.each(new Array('s', 'm', 'l', 'xl'))('Render with given "%s" size', (size) => {
+        render(React.createElement(BackLink, Object.assign({}, backLinkProps, { size: size })));
+        const backLink = screen.getByRole('button');
+        expect(backLink).toHaveClass(`yc-button_size_${size}`);
+    });
+    test.each(new Array('default', 'special'))('Render with given "%s" theme', (theme) => {
+        const matchView = {
+            default: 'flat-secondary',
+            special: 'flat-contrast',
+        };
+        render(React.createElement(BackLink, Object.assign({}, backLinkProps, { theme: theme })));
+        const backLink = screen.getByRole('button');
+        expect(backLink).toHaveClass(`yc-button_view_${matchView[theme]}`);
+    });
+});

package/build/esm/components/Button/Button.css

@@ -1,3 +1,5 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
 .pc-button-block__content {
   display: flex;
   align-items: center;

package/build/esm/components/OverflowScroller/OverflowScroller.css

@@ -1,12 +1,24 @@
 .pc-overflow-scroller {
+  display: flex;
+  align-items: center;
   position: relative;
   overflow-x: hidden;
 }
+.pc-overflow-scroller__container {
+  width: 100%;
+  position: relative;
+}
+.pc-overflow-scroller__container_padding-left {
+  padding-left: 24px;
+}
+.pc-overflow-scroller__container_padding-right {
+  padding-right: 24px;
+}
 .pc-overflow-scroller__wrapper {
   position: relative;
-  transition: left 0.3s;
+  transition: left 0.6s;
 }
-.pc-overflow-scroller__scroller {
+.pc-overflow-scroller__arrow {
   position: absolute;
   z-index: 10;
   top: 0;
@@ -17,12 +29,11 @@
   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;
 }
-.pc-overflow-scroller__scroller_type_left {
+.pc-overflow-scroller__arrow_type_left {
   left: 0;
   transform: rotate(180deg);
 }
-.pc-overflow-scroller__scroller_type_right {
+.pc-overflow-scroller__arrow_type_right {
   right: 0;
 }

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

@@ -12,7 +12,7 @@ export interface OverflowScrollerState {
 }
 export default class OverflowScroller extends React.Component<PropsWithChildren<OverflowScrollerProps>, OverflowScrollerState> {
     state: {
-        arrows: never[];
+        arrows: Arrow[];
         scrollValue: number;
     };
     containerRef: React.RefObject<HTMLDivElement>;

package/build/esm/components/OverflowScroller/OverflowScroller.js

@@ -5,6 +5,7 @@ import { ToggleArrow } from '..';
 import './OverflowScroller.css';
 const b = block('overflow-scroller');
 const TRANSITION_TIME = 300;
+const PADDING_SIZE = 24;
 export default class OverflowScroller extends React.Component {
     constructor() {
         super(...arguments);
@@ -28,7 +29,7 @@ export default class OverflowScroller extends React.Component {
             }
         }, 100);
         this.handleScrollClick = (e, arrow) => {
-            const { scrollValue } = this.state;
+            const { scrollValue, arrows } = this.state;
             const { onScrollStart } = this.props;
             if (this.containerRef &&
                 this.containerRef.current &&
@@ -37,8 +38,9 @@ export default class OverflowScroller extends React.Component {
                 const containerWidth = this.containerRef.current.offsetWidth;
                 const wrapperWidth = this.wrapperRef.current.offsetWidth;
                 const hiddenWidth = arrow === 'right' ? wrapperWidth - (containerWidth + scrollValue) : scrollValue;
+                const padding = arrows.length > 1 && hiddenWidth + PADDING_SIZE > containerWidth ? PADDING_SIZE : 0;
                 const delta = containerWidth > hiddenWidth ? hiddenWidth : containerWidth;
-                const newScrollValue = arrow === 'right' ? scrollValue + delta : scrollValue - delta;
+                const newScrollValue = arrow === 'right' ? scrollValue + delta + padding : scrollValue - delta - padding;
                 let newArrows = ['left', 'right'];
                 if (newScrollValue + containerWidth >= wrapperWidth) {
                     newArrows = ['left'];
@@ -71,9 +73,15 @@ export default class OverflowScroller extends React.Component {
         const { className, children } = this.props;
         const { arrows, scrollValue } = this.state;
         const wrapperStyle = arrows.length ? { left: -scrollValue } : { left: 0 };
-        return (React.createElement("div", { className: b(null, className), ref: this.containerRef },
-            React.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children),
-            arrows.map((direction) => (React.createElement("div", { key: direction, className: b('scroller', { type: direction }), onClick: (e) => this.handleScrollClick(e, direction) },
+        const paddingLeft = arrows.includes('left');
+        const paddingRight = arrows.includes('right');
+        return (React.createElement("div", { className: b('container', {
+                'padding-left': paddingLeft,
+                'padding-right': paddingRight,
+            }) },
+            React.createElement("div", { className: b(null, className), ref: this.containerRef },
+                React.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children)),
+            arrows.map((direction) => (React.createElement("div", { key: direction, className: b('arrow', { type: direction }), onClick: (e) => this.handleScrollClick(e, direction) },
                 React.createElement(ToggleArrow, { size: 18, type: 'horizontal', iconType: "navigation" }))))));
     }
 }

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

@@ -4,13 +4,19 @@ export declare enum NavigationItemType {
     Link = "link",
     Dropdown = "dropdown",
     Button = "button",
-    Social = "social"
+    Social = "social",
+    GithubStars = "github-stars"
 }
 export interface NavigationItemBase {
     text: string;
     icon?: ImageProps;
     url?: string;
 }
+export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
+    type: NavigationItemType.GithubStars;
+    url: string;
+    label?: string;
+}
 export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
     type: NavigationItemType.Link;
     url: string;
@@ -29,8 +35,8 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     icon: ImageProps;
     url: string;
 }
-export type NavigationItemModel = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
-export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
+export type NavigationItemModel = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem | NavigationGithubButton;
+export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData | NavigationGithubButton;
 export type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
 export interface NavigationLogoData {
     icon: ImageProps;

package/build/esm/models/navigation.js

@@ -4,4 +4,5 @@ export var NavigationItemType;
     NavigationItemType["Dropdown"] = "dropdown";
     NavigationItemType["Button"] = "button";
     NavigationItemType["Social"] = "social";
+    NavigationItemType["GithubStars"] = "github-stars";
 })(NavigationItemType || (NavigationItemType = {}));

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

@@ -29,7 +29,6 @@ unpredictable css rules order in build */
 }
 .pc-header__navigation.pc-header__navigation {
   position: relative;
-  margin-right: 20px;
   flex: 1 0 0;
   justify-content: flex-start;
 }
@@ -49,10 +48,11 @@ unpredictable css rules order in build */
   flex: 1 0 0;
   justify-content: space-between;
   align-items: center;
-  margin-right: 20px;
+  margin-right: 32px;
 }
 .pc-header__buttons {
   display: flex;
+  align-items: center;
 }
 @media (max-width: 768px) {
   .pc-header__buttons {

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

@@ -44,7 +44,7 @@ export const Header = ({ data, logo }) => {
                         React.createElement(Navigation, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange })),
                     React.createElement("div", { className: b('right') },
                         React.createElement(MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
-                        rightItems && (React.createElement("div", { className: b('buttons') }, rightItems.map((button) => (React.createElement(NavigationItem, { key: button.text, data: button, className: b('button') })))))),
+                        rightItems && (React.createElement("div", { className: b('buttons') }, rightItems.map((button) => (React.createElement(NavigationItem, { key: button.text, data: button })))))),
                     React.createElement(OutsideClick, { onOutsideClick: () => onSidebarOpenedChange(false) },
                         React.createElement(MobileNavigation, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })))))));
 };

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

@@ -1,41 +1,6 @@
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
 .pc-navigation-item {
   position: relative;
   display: flex;
   align-items: center;
   white-space: nowrap;
-}
-.pc-navigation-item_type_link {
-  color: var(--yc-color-text-primary);
-  color: inherit;
-  text-decoration: none;
-  outline: none;
-}
-.utilityfocus .pc-navigation-item_type_link:focus {
-  outline: 2px solid #ffdb4d;
-}
-.pc-navigation-item_type_link:hover, .pc-navigation-item_type_link_active {
-  color: var(--yc-color-text-link);
-}
-.pc-navigation-item_type_button {
-  display: inline-block;
-}
-.pc-navigation-item__arrow {
-  position: relative;
-  top: -2px;
-  width: 9px;
-  height: 9px;
-  margin-left: 5px;
-}
-.pc-navigation-item__icon {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  margin-right: 8px;
-  object-fit: cover;
-}
-.pc-navigation-item__dropdown {
-  margin-left: 7px;
-  color: var(--yc-color-text-secondary);
 }

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

@@ -1,45 +1,14 @@
 import { __rest } from "tslib";
-import React, { Fragment, useContext, useMemo } from 'react';
-import { block, getLinkProps } from '../../../utils';
-import { RouterLink, ToggleArrow, Button, Image } from '../../../components';
-import { LocationContext } from '../../../context/locationContext';
-import { NavigationItemType, } from '../../../models';
-import { NavigationArrow } from '../../../icons';
+import React, { useMemo } from 'react';
+import { block } from '../../../utils';
+import { NavigationItemType } from '../../../models';
 import SocialIcon from '../SocialIcon/SocialIcon';
-import { getMediaImage } from '../../../components/Media/Image/utils';
+import { NavigationButton } from './components/NavigationButton/NavigationButton';
+import { NavigationDropdown } from './components/NavigationDropdown/NavigationDropdown';
+import { NavigationLink } from './components/NavigationLink/NavigationLink';
+import { GithubStars } from './components/GithubStars/GithubStars';
 import './NavigationItem.css';
 const b = block('navigation-item');
-const Content = ({ text, icon }) => (React.createElement(Fragment, null,
-    icon && typeof icon !== 'string' && React.createElement(Image, Object.assign({ className: b('icon') }, icon)),
-    React.createElement("span", { className: b('text') }, text)));
-const NavigationDropdown = (_a) => {
-    var { text, icon, isOpened } = _a, props = __rest(_a, ["text", "icon", "isOpened"]);
-    const iconData = icon && getMediaImage(icon);
-    return (React.createElement("span", Object.assign({}, props),
-        React.createElement(Content, { text: text, icon: iconData }),
-        React.createElement(ToggleArrow, { className: b('dropdown'), size: 12, type: 'vertical', iconType: "navigation", open: isOpened })));
-};
-const NavigationLink = (props) => {
-    const { hostname, Link } = useContext(LocationContext);
-    const { url, text, icon, arrow, target } = props, rest = __rest(props, ["url", "text", "icon", "arrow", "target"]);
-    const linkExtraProps = getLinkProps(url, hostname, target);
-    const iconData = icon && getMediaImage(icon);
-    const content = (React.createElement(Fragment, null,
-        React.createElement(Content, { text: text, icon: iconData }),
-        arrow && React.createElement(NavigationArrow, { className: b('arrow') })));
-    if ((linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) || !Link) {
-        return (React.createElement("a", Object.assign({ href: url, title: text }, rest, linkExtraProps), content));
-    }
-    else {
-        return (React.createElement(RouterLink, { href: url, passHref: true },
-            React.createElement("a", Object.assign({}, rest), content)));
-    }
-};
-const NavigationButton = (props) => {
-    const { url, target } = props;
-    return target ? (React.createElement(Button, Object.assign({}, props, { url: url }))) : (React.createElement(RouterLink, { href: url },
-        React.createElement(Button, Object.assign({}, props, { url: url }))));
-};
 //todo: add types support form component in map
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const NavigationItemsMap = {
@@ -47,12 +16,13 @@ const NavigationItemsMap = {
     [NavigationItemType.Social]: SocialIcon,
     [NavigationItemType.Dropdown]: NavigationDropdown,
     [NavigationItemType.Link]: NavigationLink,
+    [NavigationItemType.GithubStars]: GithubStars,
 };
 const NavigationItem = (_a) => {
     var { data, className } = _a, props = __rest(_a, ["data", "className"]);
     const { type = NavigationItemType.Link } = data;
     const Component = NavigationItemsMap[type];
-    const componentProps = useMemo(() => (Object.assign(Object.assign({ className: b({ type }, className) }, data), props)), [className, data, props, type]);
+    const componentProps = useMemo(() => (Object.assign(Object.assign({ className: b(null, className) }, data), props)), [className, data, props]);
     return React.createElement(Component, Object.assign({}, componentProps));
 };
 export default NavigationItem;

package/build/esm/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.css

@@ -0,0 +1,7 @@
+.pc-content-wrapper__icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  object-fit: cover;
+}

package/build/esm/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ImageProps } from '../../../../../models';
+import './ContentWrapper.css';
+export declare const ContentWrapper: React.FC<{
+    text: string;
+    icon?: ImageProps;
+}>;

package/build/esm/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.js

@@ -0,0 +1,8 @@
+import React, { Fragment } from 'react';
+import { block } from '../../../../../utils';
+import { Image } from '../../../../../components';
+import './ContentWrapper.css';
+const b = block('content-wrapper');
+export const ContentWrapper = ({ text, icon }) => (React.createElement(Fragment, null,
+    icon && typeof icon !== 'string' && React.createElement(Image, Object.assign({ className: b('icon') }, icon)),
+    React.createElement("span", { className: b('text') }, text)));

package/build/esm/navigation/components/NavigationItem/components/GithubStars/GithubStars.css

@@ -0,0 +1,10 @@
+.pc-github-stars {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.pc-github-stars span {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

package/build/esm/navigation/components/NavigationItem/components/GithubStars/GithubStars.d.ts

@@ -0,0 +1,6 @@
+import { NavigationItemProps } from '../../NavigationItem';
+import { NavigationGithubButton } from '../../../../../models';
+import './GithubStars.css';
+type NavigationGithubButtonProps = NavigationItemProps & NavigationGithubButton;
+export declare const GithubStars: ({ text, url, className, label }: NavigationGithubButtonProps) => JSX.Element;
+export {};

package/build/esm/navigation/components/NavigationItem/components/GithubStars/GithubStars.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import GitHubButton from 'react-github-btn';
+import { block } from '../../../../../utils';
+import './GithubStars.css';
+const b = block('github-stars');
+export const GithubStars = ({ text, url, className, label }) => (React.createElement("div", { className: b(null, className) },
+    React.createElement(GitHubButton, { href: url, "data-show-count": "true", "aria-label": label || 'Stars on GitHub' }, text)));

package/build/esm/navigation/components/NavigationItem/components/NavigationButton/NavigationButton.css

@@ -0,0 +1,3 @@
+.pc-navigation-button {
+  display: inline-block;
+}

package/build/esm/navigation/components/NavigationItem/components/NavigationButton/NavigationButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ButtonProps } from '../../../../../models';
+import { NavigationItemProps } from '../../NavigationItem';
+import './NavigationButton.css';
+type NavigationButtonProps = Pick<NavigationItemProps, 'className'> & ButtonProps;
+export declare const NavigationButton: React.FC<NavigationButtonProps>;
+export {};

package/build/esm/navigation/components/NavigationItem/components/NavigationButton/NavigationButton.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { block } from '../../../../../utils';
+import { RouterLink, Button } from '../../../../../components';
+import './NavigationButton.css';
+const b = block('navigation-button');
+export const NavigationButton = (props) => {
+    const { url, target, className } = props;
+    const classes = b(null, className);
+    return target ? (React.createElement(Button, Object.assign({ className: classes }, props, { url: url }))) : (React.createElement(RouterLink, { href: url },
+        React.createElement(Button, Object.assign({}, props, { className: classes, url: url }))));
+};

package/build/esm/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.css

@@ -0,0 +1,4 @@
+.pc-navigation-dropdown {
+  margin-left: 7px;
+  color: var(--yc-color-text-secondary);
+}

package/build/esm/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NavigationItemProps } from '../../NavigationItem';
+import { DropdownItemData } from '../../../../../models';
+import './NavigationDropdown.css';
+type NavigationDropdownProps = NavigationItemProps & DropdownItemData;
+export declare const NavigationDropdown: React.FC<NavigationDropdownProps>;
+export {};

package/build/esm/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.js

@@ -0,0 +1,16 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { ContentWrapper } from '../ContentWrapper/ContentWrapper';
+import { ToggleArrow } from '../../../../../components';
+import { block } from '../../../../../utils';
+import { getMediaImage } from '../../../../../components/Media/Image/utils';
+import './NavigationDropdown.css';
+const b = block('navigation-dropdown');
+const TOGGLE_ARROW_SIZE = 12;
+export const NavigationDropdown = (_a) => {
+    var { text, icon, isOpened } = _a, props = __rest(_a, ["text", "icon", "isOpened"]);
+    const iconData = icon && getMediaImage(icon);
+    return (React.createElement("span", Object.assign({}, props),
+        React.createElement(ContentWrapper, { text: text, icon: iconData }),
+        React.createElement(ToggleArrow, { className: b(), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isOpened })));
+};

package/build/esm/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.css

@@ -0,0 +1,21 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-navigation-link {
+  color: var(--yc-color-text-primary);
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+}
+.utilityfocus .pc-navigation-link:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-navigation-link:hover, .pc-navigation-link_active {
+  color: var(--yc-color-text-link);
+}
+.pc-navigation-link__arrow {
+  position: relative;
+  top: -2px;
+  width: 9px;
+  height: 9px;
+  margin-left: 5px;
+}

package/build/esm/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NavigationItemProps } from '../../NavigationItem';
+import { NavigationLinkItem } from '../../../../../models';
+import './NavigationLink.css';
+type NavigationLinkProps = NavigationItemProps & NavigationLinkItem;
+export declare const NavigationLink: React.FC<NavigationLinkProps>;
+export {};

package/build/esm/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.js

@@ -0,0 +1,27 @@
+import { __rest } from "tslib";
+import React, { Fragment, useContext } from 'react';
+import { ContentWrapper } from '../ContentWrapper/ContentWrapper';
+import { NavigationArrow } from '../../../../../icons';
+import { RouterLink } from '../../../../../components';
+import { block, getLinkProps } from '../../../../../utils';
+import { getMediaImage } from '../../../../../components/Media/Image/utils';
+import { LocationContext } from '../../../../../context/locationContext';
+import './NavigationLink.css';
+const b = block('navigation-link');
+export const NavigationLink = (props) => {
+    const { hostname, Link } = useContext(LocationContext);
+    const { url, text, icon, arrow, target, className } = props, rest = __rest(props, ["url", "text", "icon", "arrow", "target", "className"]);
+    const linkExtraProps = getLinkProps(url, hostname, target);
+    const iconData = icon && getMediaImage(icon);
+    const classes = b(null, className);
+    const content = (React.createElement(Fragment, null,
+        React.createElement(ContentWrapper, { text: text, icon: iconData }),
+        arrow && React.createElement(NavigationArrow, { className: b('arrow') })));
+    if ((linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) || !Link) {
+        return (React.createElement("a", Object.assign({ href: url, title: text, className: classes }, rest, linkExtraProps), content));
+    }
+    else {
+        return (React.createElement(RouterLink, { href: url, passHref: true },
+            React.createElement("a", Object.assign({}, rest, { className: classes }), content)));
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.16.4",
+  "version": "1.18.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -49,6 +49,7 @@
     "@gravity-ui/i18n": "^1.0.0",
     "bem-cn-lite": "^4.0.0",
     "lodash": "^4.17.21",
+    "react-github-btn": "^1.4.0",
     "react-player": "^2.9.0",
     "react-slick": "^0.28.1",
     "react-spring": "^9.3.0",

package/server/models/navigation.d.ts

@@ -4,13 +4,19 @@ export declare enum NavigationItemType {
     Link = "link",
     Dropdown = "dropdown",
     Button = "button",
-    Social = "social"
+    Social = "social",
+    GithubStars = "github-stars"
 }
 export interface NavigationItemBase {
     text: string;
     icon?: ImageProps;
     url?: string;
 }
+export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
+    type: NavigationItemType.GithubStars;
+    url: string;
+    label?: string;
+}
 export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
     type: NavigationItemType.Link;
     url: string;
@@ -29,8 +35,8 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     icon: ImageProps;
     url: string;
 }
-export type NavigationItemModel = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
-export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
+export type NavigationItemModel = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem | NavigationGithubButton;
+export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData | NavigationGithubButton;
 export type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
 export interface NavigationLogoData {
     icon: ImageProps;

package/server/models/navigation.js

@@ -7,4 +7,5 @@ var NavigationItemType;
     NavigationItemType["Dropdown"] = "dropdown";
     NavigationItemType["Button"] = "button";
     NavigationItemType["Social"] = "social";
+    NavigationItemType["GithubStars"] = "github-stars";
 })(NavigationItemType = exports.NavigationItemType || (exports.NavigationItemType = {}));

package/styles/mixins.scss

@@ -480,3 +480,13 @@ unpredictable css rules order in build */
         color: var(--yc-color-text-link);
     }
 }
+
+@mixin monochromeButton() {
+    --yc-button-background-color: var(--pc-monochrome-button-background-color);
+    --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
+    color: var(--pc-monochrome-button-color);
+
+    &:hover {
+        color: var(--pc-monochrome-button-color);
+    }
+}