@gravity-ui/page-constructor 4.15.3 → 4.17.0

package/build/cjs/blocks/CardLayout/CardLayout.js

@@ -11,7 +11,7 @@ const DEFAULT_SIZES = {
     md: 4,
 };
 const b = (0, utils_1.block)('card-layout-block');
-const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, }) => (react_1.default.createElement(components_1.AnimateBlock, { className: b(null, className), animate: animated },
-    (title || description) && react_1.default.createElement(components_1.Title, { title: title, subtitle: description }),
+const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, titleClassName, }) => (react_1.default.createElement(components_1.AnimateBlock, { className: b(null, className), animate: animated },
+    (title || description) && (react_1.default.createElement(components_1.Title, { title: title, subtitle: description, className: titleClassName })),
     react_1.default.createElement(grid_1.Row, null, react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(grid_1.Col, { key: index, sizes: colSizes, className: b('item') }, child))))));
 exports.default = CardLayout;

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

@@ -7,6 +7,7 @@ export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
     contentClassName?: string;
     children: ReactElement | ReactElement[];
     url?: string;
+    urlTitle?: string;
     target?: HTMLAttributeAnchorTarget;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;

package/build/cjs/components/CardBase/CardBase.js

@@ -14,7 +14,7 @@ const Header = () => null;
 const Content = () => null;
 const Footer = () => null;
 const Layout = (props) => {
-    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', qa, } = props;
+    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', urlTitle, qa, } = props;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)(common_1.DefaultEventNames.CardBase, url);
     let header, content, footer, image, headerClass, footerClass;
@@ -53,7 +53,7 @@ const Layout = (props) => {
         handleAnalytics(analyticsEvents);
     };
     return url ? (react_1.default.createElement(RouterLink_1.default, { href: url },
-        react_1.default.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick, "data-qa": qa }, cardContent))) : (react_1.default.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
+        react_1.default.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick, title: urlTitle, "data-qa": qa }, cardContent))) : (react_1.default.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
 };
 exports.Layout = Layout;
 exports.Layout.Header = Header;

package/build/cjs/components/FileLink/FileLink.js

@@ -41,13 +41,13 @@ const LabelSizeMap = {
 };
 const FileLink = (props) => {
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, tabIndex, } = props;
+    const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, tabIndex, urlTitle, } = props;
     const fileExt = getFileExt(href);
     const labelTheme = (FileExtensionThemes[fileExt] || 'unknown');
     const labelSize = LabelSizeMap[textSize];
     return (react_1.default.createElement("div", { className: b({ ext: fileExt, type, size: textSize, theme }, className) },
         react_1.default.createElement(uikit_1.Label, { className: b('file-label'), size: labelSize, theme: labelTheme }, fileExt),
         react_1.default.createElement("div", { className: b('link') },
-            react_1.default.createElement("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex }, (0, utils_1.getLinkProps)(href, hostname)), text))));
+            react_1.default.createElement("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, (0, utils_1.getLinkProps)(href, hostname)), text))));
 };
 exports.default = FileLink;

package/build/cjs/components/Link/Link.js

@@ -28,7 +28,7 @@ function getArrowSize(size) {
     }
 }
 const LinkBlock = (props) => {
-    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, } = props;
+    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, urlTitle, } = props;
     const qaAttributes = (0, index_1.getQaAttrubutes)(qa, ['normal']);
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.Link, url);
@@ -50,7 +50,7 @@ const LinkBlock = (props) => {
             case 'normal': {
                 const linkProps = (0, utils_1.getLinkProps)(url, hostname, target);
                 const content = children || text;
-                return (react_1.default.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick, tabIndex: tabIndex }, linkProps, { "data-qa": qaAttributes.normal }), arrow ? (react_1.default.createElement(react_1.Fragment, null,
+                return (react_1.default.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, linkProps, { "data-qa": qaAttributes.normal }), arrow ? (react_1.default.createElement(react_1.Fragment, null,
                     react_1.default.createElement("span", { className: b('content') }, content),
                     WORD_JOINER_SYM,
                     react_1.default.createElement(uikit_1.Icon, { className: b('arrow'), data: icons_1.Chevron, size: getArrowSize(textSize) }))) : (content)));

package/build/cjs/components/Title/TitleItem.js

@@ -26,7 +26,7 @@ function getArrowSize(size, isMobile) {
 exports.getArrowSize = getArrowSize;
 const TitleItem = (props) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
-    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, } = props;
+    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, urlTitle, } = props;
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const textMarkup = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(__1.HTML, { className: b('text') }, text),
@@ -42,10 +42,10 @@ const TitleItem = (props) => {
         content = textMarkup;
     }
     else if (url) {
-        content = (react_1.default.createElement("a", Object.assign({ className: b('link'), href: url }, (0, utils_1.getLinkProps)(url, hostname), { onClick: onClick }), insideClickableContent));
+        content = (react_1.default.createElement("a", Object.assign({ className: b('link'), href: url }, (0, utils_1.getLinkProps)(url, hostname), { onClick: onClick, title: urlTitle }), insideClickableContent));
     }
     else if (onClick) {
-        content = (react_1.default.createElement("span", { className: b('link'), onClick: onClick }, insideClickableContent));
+        content = (react_1.default.createElement("span", { className: b('link'), onClick: onClick, title: urlTitle }, insideClickableContent));
     }
     return (react_1.default.createElement(react_1.Fragment, null,
         anchor && react_1.default.createElement(Anchor_1.default, { id: anchor, className: b('anchor') }),

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

@@ -34,5 +34,5 @@ export declare const navItemMap: {
     social: import("react").FC<import("./navigation/components/SocialIcon/SocialIcon").NavigationSocialItemOwnProps>;
     dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("./navigation/models").NavigationItemProps & import("./models").NavigationDropdownItem) => JSX.Element;
     link: import("react").FC<import("./navigation/models").NavigationItemProps & import("./models").NavigationLinkItem>;
-    "github-button": ({ text, url, className, label, size, icon, }: import("./navigation/models").NavigationItemProps & import("./models").NavigationGithubButton) => JSX.Element;
+    "github-button": ({ text, url, className, label, size, icon, urlTitle, }: import("./navigation/models").NavigationItemProps & import("./models").NavigationGithubButton) => JSX.Element;
 };

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

@@ -221,6 +221,7 @@ export interface TabsBlockProps extends Animatable {
 }
 export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {
     title?: TitleItemProps | string;
+    titleClassName?: string;
     description?: string;
     colSizes?: GridColumnSizesType;
 }

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

@@ -120,6 +120,7 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
 }
 export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     url: string;
+    urlTitle?: string;
     text?: string;
     textSize?: TextSize;
     theme?: LinkTheme;
@@ -135,6 +136,7 @@ export interface FileLinkProps extends ClassNameProps, Tabbable {
     type?: FileLinkType;
     textSize?: TextSize;
     theme?: ContentTheme;
+    urlTitle?: string;
     onClick?: () => void;
 }
 export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
@@ -260,6 +262,7 @@ export interface TitleItemBaseProps {
     text: string;
     textSize?: TextSize;
     url?: string;
+    urlTitle?: string;
     custom?: string | ReactNode;
     onClick?: () => void;
 }

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

@@ -73,6 +73,7 @@ export interface QuoteProps extends Themable, CardBaseProps {
 }
 export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;
+    urlTitle?: string;
     background?: ThemeSupporting<ImageObjectProps>;
     paddingBottom?: 's' | 'm' | 'l' | 'xl';
     backgroundColor?: string;

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

@@ -29,6 +29,7 @@ export declare enum NavigationGithubButtonIcon {
 export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
     type: NavigationItemType.GithubButton;
     url: string;
+    urlTitle?: string;
     label?: string;
     icon?: keyof typeof NavigationGithubButtonIcon;
     size?: string;
@@ -36,6 +37,7 @@ export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'>
 export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
     type: NavigationItemType.Link;
     url: string;
+    urlTitle?: string;
     arrow?: boolean;
     target?: string;
 }
@@ -52,6 +54,7 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     type: NavigationItemType.Social;
     icon: ImageProps;
     url: string;
+    urlTitle?: string;
 }
 export type NavigationItemModel = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
 export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | NavigationDropdownItem;

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

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

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

@@ -8,7 +8,7 @@ const utils_1 = require("../../../../../utils");
 const b = (0, utils_1.block)('github-button');
 const DEFAULT_LABEL = 'Stars on GitHub';
 /* More information about github-buttons in https://buttons.github.io/ */
-const GithubButton = ({ text, url, className, label, size, icon, }) => {
+const GithubButton = ({ text, url, className, label, size, icon, urlTitle, }) => {
     const containerRef = (0, react_1.useRef)(null);
     const linkRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -42,6 +42,6 @@ const GithubButton = ({ text, url, className, label, size, icon, }) => {
     }, []);
     return (react_1.default.createElement("div", { className: b(null, className) },
         react_1.default.createElement("span", { ref: containerRef },
-            react_1.default.createElement("a", Object.assign({ href: url, ref: linkRef, "data-show-count": "true", "aria-label": label || DEFAULT_LABEL }, (icon && { 'data-icon': models_1.NavigationGithubButtonIcon[icon] }), (size && { 'data-size': size })), text))));
+            react_1.default.createElement("a", Object.assign({ href: url, ref: linkRef, title: urlTitle, "data-show-count": "true", "aria-label": label || DEFAULT_LABEL }, (icon && { 'data-icon': models_1.NavigationGithubButtonIcon[icon] }), (size && { 'data-size': size })), text))));
 };
 exports.GithubButton = GithubButton;

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

@@ -12,7 +12,7 @@ const ContentWrapper_1 = require("../ContentWrapper/ContentWrapper");
 const b = (0, utils_2.block)('navigation-link');
 const NavigationLink = (props) => {
     const { hostname, Link } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const { url, text, icon, arrow, target, className, iconSize } = props, rest = tslib_1.__rest(props, ["url", "text", "icon", "arrow", "target", "className", "iconSize"]);
+    const { url, text, icon, arrow, target, className, iconSize, urlTitle } = props, rest = tslib_1.__rest(props, ["url", "text", "icon", "arrow", "target", "className", "iconSize", "urlTitle"]);
     const linkExtraProps = (0, utils_2.getLinkProps)(url, hostname, target);
     const iconData = icon && (0, utils_1.getMediaImage)(icon);
     const classes = b(null, className);
@@ -20,11 +20,11 @@ const NavigationLink = (props) => {
         react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
         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));
+        return (react_1.default.createElement("a", Object.assign({ href: url, title: urlTitle || 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({ title: text }, rest, { className: classes }), content)));
+            react_1.default.createElement("a", Object.assign({ title: urlTitle || text }, rest, { className: classes }), content)));
     }
 };
 exports.NavigationLink = NavigationLink;

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

@@ -6,10 +6,10 @@ const components_1 = require("../../../components");
 const utils_1 = require("../../../components/Media/Image/utils");
 const utils_2 = require("../../../utils");
 const b = (0, utils_2.block)('social-icon');
-const SocialIcon = ({ icon, url, className }) => {
+const SocialIcon = ({ icon, url, className, urlTitle }) => {
     const iconData = (0, utils_1.getMediaImage)(icon);
     const { alt } = iconData;
-    return (react_1.default.createElement("a", { href: url, "aria-label": alt, title: alt, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
+    return (react_1.default.createElement("a", { href: url, "aria-label": alt, title: urlTitle || alt, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
         react_1.default.createElement(components_1.Image, Object.assign({ className: b('icon') }, iconData))));
 };
 exports.default = SocialIcon;

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

@@ -11,6 +11,7 @@ export declare const getItemClickHandler: ({ column, index, onActiveItemChange,
 export declare function getNavigationItemWithIconSize(iconSize?: number): (item: NavigationItemModel) => NavigationButtonItem | NavigationDropdownItem | {
     type: NavigationItemType.Link;
     url: string;
+    urlTitle?: string | undefined;
     arrow?: boolean | undefined;
     target?: string | undefined;
     text: string;

package/build/cjs/sub-blocks/BackgroundCard/BackgroundCard.js

@@ -8,11 +8,11 @@ const utils_1 = require("../../utils");
 const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
 const b = (0, utils_1.block)('background-card');
 const BackgroundCard = (props) => {
-    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, } = props;
+    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, urlTitle, } = props;
     const theme = (0, theme_1.useTheme)();
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
     const borderType = hasBackgroundColor ? 'none' : border;
-    return (react_1.default.createElement(components_1.CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType, analyticsEvents: analyticsEvents },
+    return (react_1.default.createElement(components_1.CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType, analyticsEvents: analyticsEvents, urlTitle: urlTitle },
         react_1.default.createElement(components_1.CardBase.Content, null,
             react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('image') }, (0, utils_1.getThemedValue)(background, theme), { style: { backgroundColor } })),
             react_1.default.createElement(Content_1.default, { title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))));

package/build/cjs/sub-blocks/LayoutItem/utils.d.ts

@@ -1,6 +1,7 @@
 import { LayoutItemProps, LinkTheme, MediaProps } from '../../models';
 export declare const getLayoutItemLinks: (links: LayoutItemProps['content']['links']) => {
     url: string;
+    urlTitle?: string | undefined;
     text?: string | undefined;
     textSize?: import("../../models").TextSize | undefined;
     theme: LinkTheme;

package/build/cjs/text-transform/config.d.ts

@@ -10,6 +10,7 @@ export declare const blockHeaderTransformer: ({
         justify?: import("../models").Justify | undefined;
         textSize?: import("../models").TextSize | undefined;
         url?: string | undefined;
+        urlTitle?: string | undefined;
         custom?: import("react").ReactNode;
         onClick?: (() => void) | undefined;
     };

package/build/esm/blocks/CardLayout/CardLayout.js

@@ -9,7 +9,7 @@ const DEFAULT_SIZES = {
     md: 4,
 };
 const b = block('card-layout-block');
-const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, }) => (React.createElement(AnimateBlock, { className: b(null, className), animate: animated },
-    (title || description) && React.createElement(Title, { title: title, subtitle: description }),
+const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, titleClassName, }) => (React.createElement(AnimateBlock, { className: b(null, className), animate: animated },
+    (title || description) && (React.createElement(Title, { title: title, subtitle: description, className: titleClassName })),
     React.createElement(Row, null, React.Children.map(children, (child, index) => (React.createElement(Col, { key: index, sizes: colSizes, className: b('item') }, child))))));
 export default CardLayout;

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

@@ -8,6 +8,7 @@ export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
     contentClassName?: string;
     children: ReactElement | ReactElement[];
     url?: string;
+    urlTitle?: string;
     target?: HTMLAttributeAnchorTarget;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;

package/build/esm/components/CardBase/CardBase.js

@@ -11,7 +11,7 @@ const Header = () => null;
 const Content = () => null;
 const Footer = () => null;
 export const Layout = (props) => {
-    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', qa, } = props;
+    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', urlTitle, qa, } = props;
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);
     let header, content, footer, image, headerClass, footerClass;
@@ -50,7 +50,7 @@ export const Layout = (props) => {
         handleAnalytics(analyticsEvents);
     };
     return url ? (React.createElement(RouterLink, { href: url },
-        React.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick, "data-qa": qa }, cardContent))) : (React.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
+        React.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick, title: urlTitle, "data-qa": qa }, cardContent))) : (React.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
 };
 Layout.Header = Header;
 Layout.Content = Content;

package/build/esm/components/FileLink/FileLink.js

@@ -37,13 +37,13 @@ const LabelSizeMap = {
 };
 const FileLink = (props) => {
     const { hostname } = useContext(LocationContext);
-    const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, tabIndex, } = props;
+    const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, tabIndex, urlTitle, } = props;
     const fileExt = getFileExt(href);
     const labelTheme = (FileExtensionThemes[fileExt] || 'unknown');
     const labelSize = LabelSizeMap[textSize];
     return (React.createElement("div", { className: b({ ext: fileExt, type, size: textSize, theme }, className) },
         React.createElement(Label, { className: b('file-label'), size: labelSize, theme: labelTheme }, fileExt),
         React.createElement("div", { className: b('link') },
-            React.createElement("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex }, getLinkProps(href, hostname)), text))));
+            React.createElement("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, getLinkProps(href, hostname)), text))));
 };
 export default FileLink;

package/build/esm/components/Link/Link.js

@@ -26,7 +26,7 @@ function getArrowSize(size) {
     }
 }
 const LinkBlock = (props) => {
-    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, } = props;
+    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, urlTitle, } = props;
     const qaAttributes = getQaAttrubutes(qa, ['normal']);
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics(DefaultEventNames.Link, url);
@@ -48,7 +48,7 @@ const LinkBlock = (props) => {
             case 'normal': {
                 const linkProps = getLinkProps(url, hostname, target);
                 const content = children || text;
-                return (React.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick, tabIndex: tabIndex }, linkProps, { "data-qa": qaAttributes.normal }), arrow ? (React.createElement(Fragment, null,
+                return (React.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, linkProps, { "data-qa": qaAttributes.normal }), arrow ? (React.createElement(Fragment, null,
                     React.createElement("span", { className: b('content') }, content),
                     WORD_JOINER_SYM,
                     React.createElement(Icon, { className: b('arrow'), data: Chevron, size: getArrowSize(textSize) }))) : (content)));

package/build/esm/components/Title/TitleItem.js

@@ -22,7 +22,7 @@ export function getArrowSize(size, isMobile) {
 }
 const TitleItem = (props) => {
     const isMobile = useContext(MobileContext);
-    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, } = props;
+    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, urlTitle, } = props;
     const { hostname } = useContext(LocationContext);
     const textMarkup = (React.createElement(React.Fragment, null,
         React.createElement(HTML, { className: b('text') }, text),
@@ -38,10 +38,10 @@ const TitleItem = (props) => {
         content = textMarkup;
     }
     else if (url) {
-        content = (React.createElement("a", Object.assign({ className: b('link'), href: url }, getLinkProps(url, hostname), { onClick: onClick }), insideClickableContent));
+        content = (React.createElement("a", Object.assign({ className: b('link'), href: url }, getLinkProps(url, hostname), { onClick: onClick, title: urlTitle }), insideClickableContent));
     }
     else if (onClick) {
-        content = (React.createElement("span", { className: b('link'), onClick: onClick }, insideClickableContent));
+        content = (React.createElement("span", { className: b('link'), onClick: onClick, title: urlTitle }, insideClickableContent));
     }
     return (React.createElement(Fragment, null,
         anchor && React.createElement(Anchor, { id: anchor, className: b('anchor') }),

package/build/esm/constructor-items.d.ts

@@ -34,5 +34,5 @@ export declare const navItemMap: {
     social: import("react").FC<import("./navigation/components/SocialIcon/SocialIcon").NavigationSocialItemOwnProps>;
     dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("./navigation/models").NavigationItemProps & import("./models").NavigationDropdownItem) => JSX.Element;
     link: import("react").FC<import("./navigation/models").NavigationItemProps & import("./models").NavigationLinkItem>;
-    "github-button": ({ text, url, className, label, size, icon, }: import("./navigation/models").NavigationItemProps & import("./models").NavigationGithubButton) => JSX.Element;
+    "github-button": ({ text, url, className, label, size, icon, urlTitle, }: import("./navigation/models").NavigationItemProps & import("./models").NavigationGithubButton) => JSX.Element;
 };

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

@@ -221,6 +221,7 @@ export interface TabsBlockProps extends Animatable {
 }
 export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {
     title?: TitleItemProps | string;
+    titleClassName?: string;
     description?: string;
     colSizes?: GridColumnSizesType;
 }

package/build/esm/models/constructor-items/common.d.ts

@@ -120,6 +120,7 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
 }
 export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     url: string;
+    urlTitle?: string;
     text?: string;
     textSize?: TextSize;
     theme?: LinkTheme;
@@ -135,6 +136,7 @@ export interface FileLinkProps extends ClassNameProps, Tabbable {
     type?: FileLinkType;
     textSize?: TextSize;
     theme?: ContentTheme;
+    urlTitle?: string;
     onClick?: () => void;
 }
 export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
@@ -260,6 +262,7 @@ export interface TitleItemBaseProps {
     text: string;
     textSize?: TextSize;
     url?: string;
+    urlTitle?: string;
     custom?: string | ReactNode;
     onClick?: () => void;
 }

package/build/esm/models/constructor-items/sub-blocks.d.ts

@@ -73,6 +73,7 @@ export interface QuoteProps extends Themable, CardBaseProps {
 }
 export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;
+    urlTitle?: string;
     background?: ThemeSupporting<ImageObjectProps>;
     paddingBottom?: 's' | 'm' | 'l' | 'xl';
     backgroundColor?: string;

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

@@ -29,6 +29,7 @@ export declare enum NavigationGithubButtonIcon {
 export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
     type: NavigationItemType.GithubButton;
     url: string;
+    urlTitle?: string;
     label?: string;
     icon?: keyof typeof NavigationGithubButtonIcon;
     size?: string;
@@ -36,6 +37,7 @@ export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'>
 export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
     type: NavigationItemType.Link;
     url: string;
+    urlTitle?: string;
     arrow?: boolean;
     target?: string;
 }
@@ -52,6 +54,7 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     type: NavigationItemType.Social;
     icon: ImageProps;
     url: string;
+    urlTitle?: string;
 }
 export type NavigationItemModel = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
 export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | NavigationDropdownItem;

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

@@ -2,5 +2,5 @@ import { NavigationGithubButton } from '../../../../../models';
 import { NavigationItemProps } from '../../../../models';
 import './GithubButton.css';
 type NavigationGithubButtonProps = NavigationItemProps & NavigationGithubButton;
-export declare const GithubButton: ({ text, url, className, label, size, icon, }: NavigationGithubButtonProps) => JSX.Element;
+export declare const GithubButton: ({ text, url, className, label, size, icon, urlTitle, }: NavigationGithubButtonProps) => JSX.Element;
 export {};

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

@@ -5,7 +5,7 @@ import './GithubButton.css';
 const b = block('github-button');
 const DEFAULT_LABEL = 'Stars on GitHub';
 /* More information about github-buttons in https://buttons.github.io/ */
-export const GithubButton = ({ text, url, className, label, size, icon, }) => {
+export const GithubButton = ({ text, url, className, label, size, icon, urlTitle, }) => {
     const containerRef = useRef(null);
     const linkRef = useRef(null);
     useEffect(() => {
@@ -39,5 +39,5 @@ export const GithubButton = ({ text, url, className, label, size, icon, }) => {
     }, []);
     return (React.createElement("div", { className: b(null, className) },
         React.createElement("span", { ref: containerRef },
-            React.createElement("a", Object.assign({ href: url, ref: linkRef, "data-show-count": "true", "aria-label": label || DEFAULT_LABEL }, (icon && { 'data-icon': NavigationGithubButtonIcon[icon] }), (size && { 'data-size': size })), text))));
+            React.createElement("a", Object.assign({ href: url, ref: linkRef, title: urlTitle, "data-show-count": "true", "aria-label": label || DEFAULT_LABEL }, (icon && { 'data-icon': NavigationGithubButtonIcon[icon] }), (size && { 'data-size': size })), text))));
 };

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

@@ -10,7 +10,7 @@ import './NavigationLink.css';
 const b = block('navigation-link');
 export const NavigationLink = (props) => {
     const { hostname, Link } = useContext(LocationContext);
-    const { url, text, icon, arrow, target, className, iconSize } = props, rest = __rest(props, ["url", "text", "icon", "arrow", "target", "className", "iconSize"]);
+    const { url, text, icon, arrow, target, className, iconSize, urlTitle } = props, rest = __rest(props, ["url", "text", "icon", "arrow", "target", "className", "iconSize", "urlTitle"]);
     const linkExtraProps = getLinkProps(url, hostname, target);
     const iconData = icon && getMediaImage(icon);
     const classes = b(null, className);
@@ -18,10 +18,10 @@ export const NavigationLink = (props) => {
         React.createElement(ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
         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));
+        return (React.createElement("a", Object.assign({ href: url, title: urlTitle || text, className: classes }, rest, linkExtraProps), content));
     }
     else {
         return (React.createElement(RouterLink, { href: url, passHref: true },
-            React.createElement("a", Object.assign({ title: text }, rest, { className: classes }), content)));
+            React.createElement("a", Object.assign({ title: urlTitle || text }, rest, { className: classes }), content)));
     }
 };

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

@@ -4,10 +4,10 @@ import { getMediaImage } from '../../../components/Media/Image/utils';
 import { block } from '../../../utils';
 import './SocialIcon.css';
 const b = block('social-icon');
-const SocialIcon = ({ icon, url, className }) => {
+const SocialIcon = ({ icon, url, className, urlTitle }) => {
     const iconData = getMediaImage(icon);
     const { alt } = iconData;
-    return (React.createElement("a", { href: url, "aria-label": alt, title: alt, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
+    return (React.createElement("a", { href: url, "aria-label": alt, title: urlTitle || alt, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
         React.createElement(Image, Object.assign({ className: b('icon') }, iconData))));
 };
 export default SocialIcon;

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

@@ -11,6 +11,7 @@ export declare const getItemClickHandler: ({ column, index, onActiveItemChange,
 export declare function getNavigationItemWithIconSize(iconSize?: number): (item: NavigationItemModel) => NavigationButtonItem | NavigationDropdownItem | {
     type: NavigationItemType.Link;
     url: string;
+    urlTitle?: string | undefined;
     arrow?: boolean | undefined;
     target?: string | undefined;
     text: string;

package/build/esm/sub-blocks/BackgroundCard/BackgroundCard.js

@@ -6,11 +6,11 @@ import Content from '../Content/Content';
 import './BackgroundCard.css';
 const b = block('background-card');
 const BackgroundCard = (props) => {
-    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, } = props;
+    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, urlTitle, } = props;
     const theme = useTheme();
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
     const borderType = hasBackgroundColor ? 'none' : border;
-    return (React.createElement(CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType, analyticsEvents: analyticsEvents },
+    return (React.createElement(CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType, analyticsEvents: analyticsEvents, urlTitle: urlTitle },
         React.createElement(CardBase.Content, null,
             React.createElement(BackgroundImage, Object.assign({ className: b('image') }, getThemedValue(background, theme), { style: { backgroundColor } })),
             React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))));

package/build/esm/sub-blocks/LayoutItem/utils.d.ts

@@ -1,6 +1,7 @@
 import { LayoutItemProps, LinkTheme, MediaProps } from '../../models';
 export declare const getLayoutItemLinks: (links: LayoutItemProps['content']['links']) => {
     url: string;
+    urlTitle?: string | undefined;
     text?: string | undefined;
     textSize?: import("../../models").TextSize | undefined;
     theme: LinkTheme;

package/build/esm/text-transform/config.d.ts

@@ -10,6 +10,7 @@ export declare const blockHeaderTransformer: ({
         justify?: import("../models").Justify | undefined;
         textSize?: import("../models").TextSize | undefined;
         url?: string | undefined;
+        urlTitle?: string | undefined;
         custom?: import("react").ReactNode;
         onClick?: (() => void) | undefined;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.15.3",
+  "version": "4.17.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/constructor-items/blocks.d.ts

@@ -221,6 +221,7 @@ export interface TabsBlockProps extends Animatable {
 }
 export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {
     title?: TitleItemProps | string;
+    titleClassName?: string;
     description?: string;
     colSizes?: GridColumnSizesType;
 }

package/server/models/constructor-items/common.d.ts

@@ -120,6 +120,7 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
 }
 export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     url: string;
+    urlTitle?: string;
     text?: string;
     textSize?: TextSize;
     theme?: LinkTheme;
@@ -135,6 +136,7 @@ export interface FileLinkProps extends ClassNameProps, Tabbable {
     type?: FileLinkType;
     textSize?: TextSize;
     theme?: ContentTheme;
+    urlTitle?: string;
     onClick?: () => void;
 }
 export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
@@ -260,6 +262,7 @@ export interface TitleItemBaseProps {
     text: string;
     textSize?: TextSize;
     url?: string;
+    urlTitle?: string;
     custom?: string | ReactNode;
     onClick?: () => void;
 }