@gravity-ui/page-constructor 1.16.3 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [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)
+
+
+### Bug Fixes
+
+* **BasicCard:** add target ([#162](https://github.com/gravity-ui/page-constructor/issues/162)) ([569038c](https://github.com/gravity-ui/page-constructor/commit/569038c8ef1c43b7c8b9d6462126997155605b4c))
+* do not set "rel: 'noopener noreferrer'" for local links ([#160](https://github.com/gravity-ui/page-constructor/issues/160)) ([81173a7](https://github.com/gravity-ui/page-constructor/commit/81173a7e237104463971a80e386f5bad37caa551))
+
 ## [1.16.3](https://github.com/gravity-ui/page-constructor/compare/v1.16.2...v1.16.3) (2023-02-17)
 
 

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/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/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/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/cjs/sub-blocks/BasicCard/BasicCard.js

@@ -9,9 +9,9 @@ const __1 = require("../");
 const utils_2 = require("../../components/Media/Image/utils");
 const b = (0, utils_1.block)('basic-card');
 const BasicCard = (props) => {
-    const { url, title, text, border, icon, additionalInfo, links, buttons } = props;
+    const { title, text, icon, additionalInfo, links, buttons } = props, cardParams = tslib_1.__rest(props, ["title", "text", "icon", "additionalInfo", "links", "buttons"]);
     const iconProps = icon && (0, utils_2.getMediaImage)(icon);
-    return (react_1.default.createElement(CardBase_1.default, { className: b(), url: url, border: border },
+    return (react_1.default.createElement(CardBase_1.default, Object.assign({ className: b() }, cardParams),
         react_1.default.createElement(CardBase_1.default.Content, null,
             iconProps && react_1.default.createElement(Image_1.default, Object.assign({}, iconProps, { className: b('icon') })),
             react_1.default.createElement(__1.Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, size: "s" }))));

package/build/cjs/sub-blocks/BasicCard/schema.d.ts

@@ -19,6 +19,10 @@ export declare const BasicCard: {
                     pattern: string;
                 })[];
             };
+            target: {
+                type: string;
+                enum: string[];
+            };
             title: {
                 oneOf: ({
                     type: string;

package/build/cjs/sub-blocks/BasicCard/schema.js

@@ -13,6 +13,9 @@ exports.BasicCard = {
         required: ['url'],
         properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.CardBase), BasicCardContentProps), { url: {
                 type: 'string',
-            }, icon: schema_2.ImageProps }),
+            }, icon: schema_2.ImageProps, target: {
+                type: 'string',
+                enum: ['_blank', '_parent', '_top', '_self'],
+            } }),
     },
 };

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

@@ -6,6 +6,7 @@ export declare const EXTERNAL_LINK_PROPS: {
 export declare function getLinkProps(url: string, hostname?: string, target?: string): {
     target: string | undefined;
 };
+export declare function isAbsoluteUrl(url: string | URL): boolean;
 export declare function isLinkExternal(url: string, routerHostname?: string): boolean;
 export declare function getNonLocaleHostName(hostname: string): string;
 export declare function setUrlTld(url: string, tld?: string): string;