@gravity-ui/page-constructor 1.16.3 → 1.17.0

package/build/cjs/utils/url.js

@@ -1,25 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAbsolutePath = exports.getPageSearchParams = exports.setUrlTld = exports.getNonLocaleHostName = exports.isLinkExternal = exports.getLinkProps = exports.EXTERNAL_LINK_PROPS = void 0;
+exports.getAbsolutePath = exports.getPageSearchParams = exports.setUrlTld = exports.getNonLocaleHostName = exports.isLinkExternal = exports.isAbsoluteUrl = exports.getLinkProps = exports.EXTERNAL_LINK_PROPS = void 0;
 const url_1 = require("url");
+const EXAMPLE_URL = 'https://example.org';
 exports.EXTERNAL_LINK_PROPS = { target: '_blank', rel: 'noopener noreferrer' };
 function getLinkProps(url, hostname, target) {
     let linkProps = { target };
-    if (target === '_blank' || isLinkExternal(url, hostname)) {
+    if (isLinkExternal(url, hostname)) {
         linkProps = Object.assign(Object.assign({}, linkProps), exports.EXTERNAL_LINK_PROPS);
     }
     return linkProps;
 }
 exports.getLinkProps = getLinkProps;
+function isAbsoluteUrl(url) {
+    // Using example URL as base for relative links
+    const urlObj = new URL(url, EXAMPLE_URL);
+    return (
+    // Compare url origin with example and check that original url was not example one
+    urlObj.origin !== EXAMPLE_URL || (typeof url === 'string' && url.startsWith(EXAMPLE_URL)));
+}
+exports.isAbsoluteUrl = isAbsoluteUrl;
 function isLinkExternal(url, routerHostname) {
-    if (!routerHostname) {
-        return true;
-    }
-    const { hostname } = (0, url_1.parse)(url);
-    if (!hostname) {
-        return false;
-    }
-    return getNonLocaleHostName(hostname) !== getNonLocaleHostName(routerHostname);
+    return (isAbsoluteUrl(url) &&
+        getNonLocaleHostName(new URL(url).hostname) !== getNonLocaleHostName(routerHostname !== null && routerHostname !== void 0 ? routerHostname : ''));
 }
 exports.isLinkExternal = isLinkExternal;
 function getNonLocaleHostName(hostname) {

package/build/cjs/utils/url.test.d.ts

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

package/build/cjs/utils/url.test.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const url_1 = require("./url");
+describe('URL utils check', () => {
+    test.each([
+        ['https://user:pass@sub.example.com:8080/p/a/t/h?query=string&query2=1#hash', true],
+        ['http://example.net/path', true],
+        ['/p/a/t/h?query=string&query2=1#hash', false],
+        ['/path', false],
+        ['path', false],
+    ])("isAbsoluteUrl('%s') should return '%s'", (url, result) => {
+        expect((0, url_1.isAbsoluteUrl)(url)).toEqual(result);
+    });
+    test.each([
+        [
+            'https://user:pass@sub.example.com:8080/p/a/t/h?query=string&query2=1#hash',
+            'example.net',
+            true,
+        ],
+        [
+            'https://user:pass@sub.example.com:8080/p/a/t/h?query=string&query2=1#hash',
+            'sub.example.com',
+            false,
+        ],
+        [
+            'https://user:pass@sub.example.com:8080/p/a/t/h?query=string&query2=1#hash',
+            undefined,
+            true,
+        ],
+        ['http://example.net/path', 'example.net', false],
+        ['http://example.net/path', 'sub.example.com', true],
+        ['http://example.net/path', undefined, true],
+        ['/p/a/t/h?query=string&query2=1#hash', 'example.net', false],
+        ['/p/a/t/h?query=string&query2=1#hash', undefined, false],
+        ['/path', 'example.net', false],
+        ['/path', undefined, false],
+        ['path', 'example.net', false],
+        ['path', undefined, false],
+    ])("isLinkExternal('%s', '%s') should return '%s'", (url, hostname, result) => {
+        expect((0, url_1.isLinkExternal)(url, hostname)).toEqual(result);
+    });
+    test.each([
+        ['http://example.net/path', 'example.net', '_blank', { target: '_blank' }],
+        ['http://example.net/path', 'example.net', undefined, {}],
+        [
+            'http://example.net/path',
+            'example.com',
+            '_blank',
+            { target: '_blank', rel: 'noopener noreferrer' },
+        ],
+        [
+            'http://example.net/path',
+            'example.com',
+            undefined,
+            { target: '_blank', rel: 'noopener noreferrer' },
+        ],
+        [
+            'http://example.net/path',
+            undefined,
+            '_blank',
+            { target: '_blank', rel: 'noopener noreferrer' },
+        ],
+        [
+            'http://example.net/path',
+            undefined,
+            undefined,
+            { target: '_blank', rel: 'noopener noreferrer' },
+        ],
+        ['/path', 'example.net', '_blank', { target: '_blank' }],
+        ['/path', 'example.net', undefined, {}],
+        ['/path', undefined, '_blank', { target: '_blank' }],
+        ['/path', undefined, undefined, {}],
+    ])("getLinkProps('%s', '%s', '%s') should return '%s'", (url, hostname, target, result) => {
+        expect((0, url_1.getLinkProps)(url, hostname, target)).toEqual(result);
+    });
+});

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/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/constructor-items/sub-blocks.d.ts

@@ -106,6 +106,7 @@ export interface BackgroundCardProps extends CardBaseProps, Omit<ContentBlockPro
 export interface BasicCardProps extends CardBaseProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
     url: string;
     icon?: ImageProps;
+    target?: string;
 }
 export interface BannerCardProps {
     title: string;

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 {};