@megafon/ui-shared 8.10.2 → 8.11.0

package/dist/es/components/BlogBox/BlogBox.d.ts

@@ -14,6 +14,7 @@ export interface IBlogBox {
     classes?: {
         root?: string;
         item?: string;
+        itemTitle?: string;
         button?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
@@ -23,6 +24,8 @@ export interface IBlogBox {
         item?: Record<string, string>;
         button?: Record<string, string>;
     };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
 }
 declare const BlogBox: React.FC<IBlogBox>;
 export default BlogBox;

package/dist/es/components/BlogBox/BlogBox.js

@@ -17,7 +17,8 @@ var BlogBox = function BlogBox(_ref) {
     hasAlignLeft = _ref$hasAlignLeft === void 0 ? false : _ref$hasAlignLeft,
     className = _ref.className,
     classes = _ref.classes,
-    dataAttrs = _ref.dataAttrs;
+    dataAttrs = _ref.dataAttrs,
+    rootRef = _ref.rootRef;
   var _useResolutions = useResolutions(),
     isDesktop = _useResolutions.isDesktop;
   var visibleItems = items.slice(0, maxItemsCount);
@@ -36,7 +37,8 @@ var BlogBox = function BlogBox(_ref) {
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'align-left': isAlignLeft
-    }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
+    ref: rootRef
   }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list), {
     className: cn('list', {
       row: isRow,
@@ -50,7 +52,10 @@ var BlogBox = function BlogBox(_ref) {
       }, [classes === null || classes === void 0 ? void 0 : classes.item]),
       key: "".concat(item.title, "_").concat(i)
     }), /*#__PURE__*/React.createElement(BlogBoxTile, _extends({}, item, {
-      view: view
+      view: view,
+      classes: {
+        title: classes === null || classes === void 0 ? void 0 : classes.itemTitle
+      }
     })));
   })), (button === null || button === void 0 ? void 0 : button.title) && /*#__PURE__*/React.createElement("div", {
     className: cn('button-wrapper')

package/dist/es/components/BlogBox/components/BlogBoxTile.d.ts

@@ -4,6 +4,10 @@ import './BlogBoxTile.scss';
 type TileSettingsType = {
     view: TileViewType;
 };
-export type BlogBoxTileType = TileDataType & TileSettingsType;
+export type BlogBoxTileType = TileDataType & TileSettingsType & {
+    classes?: {
+        title?: string;
+    };
+};
 declare const BlogBoxTile: React.FC<BlogBoxTileType>;
 export default BlogBoxTile;

package/dist/es/components/BlogBox/components/BlogBoxTile.js

@@ -16,7 +16,8 @@ var BlogBoxTile = function BlogBoxTile(_ref) {
     srcThumbnail = _ref$image.srcThumbnail,
     _ref$image$alt = _ref$image.alt,
     alt = _ref$image$alt === void 0 ? 'image' : _ref$image$alt,
-    view = _ref.view;
+    view = _ref.view,
+    classes = _ref.classes;
   var _useResolutions = useResolutions(),
     isMobile = _useResolutions.isMobile;
   var isViewThumbnail = view === 'thumbnail';
@@ -54,7 +55,7 @@ var BlogBoxTile = function BlogBoxTile(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('date')
   }, date), /*#__PURE__*/React.createElement("div", {
-    className: cn('title')
+    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title])
   }, title)));
 };
 export default BlogBoxTile;

package/dist/es/components/DarkGradientCards/DarkGradientCards.d.ts

@@ -16,6 +16,7 @@ export interface IDarkGradientCards {
     classes?: {
         root?: string;
         item?: string;
+        itemTitle?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -23,6 +24,10 @@ export interface IDarkGradientCards {
         carousel?: Record<string, string>;
         item?: Record<string, string>;
     };
+    /** Обработчик смены слайда карусели */
+    onCarouselChange?: CarouselProps['onChange'];
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
 }
 declare const DarkGradientCards: React.FC<IDarkGradientCards>;
 export default DarkGradientCards;

package/dist/es/components/DarkGradientCards/DarkGradientCards.js

@@ -23,7 +23,9 @@ var DarkGradientCards = function DarkGradientCards(_ref) {
     className = _ref.className,
     _ref$classes = _ref.classes,
     classes = _ref$classes === void 0 ? {} : _ref$classes,
-    dataAttrs = _ref.dataAttrs;
+    dataAttrs = _ref.dataAttrs,
+    onCarouselChange = _ref.onCarouselChange,
+    rootRef = _ref.rootRef;
   var _useResolutions = useResolutions(),
     isDesktopWide = _useResolutions.isDesktopWide;
   var isCarouselActive = items.length > MIN_ITEMS_COUNT || items.length === MIN_ITEMS_COUNT && !isDesktopWide;
@@ -33,7 +35,8 @@ var DarkGradientCards = function DarkGradientCards(_ref) {
       size: i === 0 ? 'big' : 'small',
       className: cn('card'),
       classes: {
-        root: classes.item
+        root: classes.item,
+        title: classes.itemTitle
       },
       dataAttrs: {
         root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1))
@@ -44,7 +47,8 @@ var DarkGradientCards = function DarkGradientCards(_ref) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    className: cn([className, classes.root])
+    className: cn([className, classes.root]),
+    ref: rootRef
   }), isCarouselActive ? /*#__PURE__*/React.createElement(Carousel, {
     dataAttrs: {
       root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.carousel))
@@ -53,7 +57,8 @@ var DarkGradientCards = function DarkGradientCards(_ref) {
     navTheme: carouselNavTheme,
     threshold: CAROUSEL_THRESHOLD,
     gradient: true,
-    gradientColor: carouselGradientColor
+    gradientColor: carouselGradientColor,
+    onChange: onCarouselChange
   }, cards) : /*#__PURE__*/React.createElement("div", {
     className: cn('cards')
   }, cards));

package/dist/es/components/DarkGradientCards/components/DarkGradientCard.d.ts

@@ -6,6 +6,7 @@ export type DarkGradientCardType = ItemType & {
     className?: string;
     classes?: {
         root?: string;
+        title?: string;
     };
     dataAttrs?: {
         root?: Record<string, string>;

package/dist/es/components/DarkGradientCards/components/DarkGradientCard.js

@@ -38,7 +38,7 @@ var DarkGradientCard = function DarkGradientCard(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('inner')
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn('title')
+    className: cn('title', [classes.title])
   }, convert(title, {})), subtitle && /*#__PURE__*/React.createElement("div", {
     className: cn('subtitle')
   }, convert(subtitle, {})), !!moreText && /*#__PURE__*/React.createElement("div", {

package/dist/es/components/PromoCards/PromoCards.d.ts

@@ -15,12 +15,15 @@ export interface IPromoCards extends IPromoCardSettings {
     classes?: {
         root?: string;
         card?: string;
+        cardTitle?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
         card?: Record<string, string>;
     };
+    /** Обработчик смены слайда карусели */
+    onCarouselChange?: CarouselProps['onChange'];
     /** Ссылка на элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Дочерние элементы. Минимальное количество 2 элемента */

package/dist/es/components/PromoCards/PromoCards.js

@@ -26,6 +26,7 @@ var PromoCards = function PromoCards(_ref) {
     dataAttrs = _ref.dataAttrs,
     className = _ref.className,
     classes = _ref.classes,
+    onCarouselChange = _ref.onCarouselChange,
     rootRef = _ref.rootRef,
     children = _ref.children;
   var itemsLength = (items === null || items === void 0 ? void 0 : items.length) || 0;
@@ -36,6 +37,9 @@ var PromoCards = function PromoCards(_ref) {
   var renderItems = (items || []).map(function (item, i) {
     return /*#__PURE__*/React.createElement(PromoCard, _extends({}, item, {
       className: classes === null || classes === void 0 ? void 0 : classes.card,
+      classes: {
+        title: classes === null || classes === void 0 ? void 0 : classes.cardTitle
+      },
       dataAttrs: {
         root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
       },
@@ -50,7 +54,8 @@ var PromoCards = function PromoCards(_ref) {
     slidesSettings: slidesSettings,
     navTheme: carouselNavTheme,
     gradient: true,
-    gradientColor: carouselGradientColor
+    gradientColor: carouselGradientColor,
+    onChange: onCarouselChange
   }, childrenLength ? children : renderItems));
 };
 export default PromoCards;

package/dist/es/components/PromoCards/components/PromoCard/PromoCard.d.ts

@@ -7,6 +7,7 @@ export interface IPromoCard extends IPromoCardData, IPromoCardSettings {
     /** Дополнительные css классы для корневого элемента */
     classes?: {
         root?: string;
+        title?: string;
     };
     /** Дополнительные data атрибуты к корневому и внутренним элементам */
     dataAttrs?: {
@@ -14,6 +15,7 @@ export interface IPromoCard extends IPromoCardData, IPromoCardSettings {
         image?: Record<string, string>;
         badge?: Record<string, string>;
         logo?: Record<string, string>;
+        title?: Record<string, string>;
         subtitle?: Record<string, string>;
         list?: Record<string, string>;
         adTitle?: Record<string, string>;

package/dist/es/components/PromoCards/components/PromoCard/PromoCard.js

@@ -145,7 +145,11 @@ var PromoCard = function PromoCard(_ref2) {
     src: logo.src,
     alt: logo.alt || ''
   })), /*#__PURE__*/React.createElement(Header, {
-    as: "h3"
+    as: "h3",
+    className: classes === null || classes === void 0 ? void 0 : classes.title,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
+    }
   }, convert(title, {})), !!subtitle && /*#__PURE__*/React.createElement("div", {
     className: cn('subtitle')
   }, /*#__PURE__*/React.createElement(Paragraph, {

package/dist/es/components/SidePictureCards/SidePictureCards.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
 import { BackgroundType, CardDataType } from './types';
+type CarouselProps = React.ComponentProps<typeof Carousel>;
 export interface ISidePictureCards {
     /** Карточки. Минимальное количество 2 карточки */
     items: CardDataType[];
@@ -13,12 +15,15 @@ export interface ISidePictureCards {
     classes?: {
         root?: string;
         item?: string;
+        itemTitle?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
         item?: Record<string, string>;
     };
+    /** Обработчик смены слайда карусели */
+    onCarouselChange?: CarouselProps['onChange'];
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
 }

package/dist/es/components/SidePictureCards/SidePictureCards.js

@@ -25,6 +25,7 @@ var SidePictureCards = function SidePictureCards(_ref) {
     _ref$classes = _ref.classes,
     classes = _ref$classes === void 0 ? {} : _ref$classes,
     dataAttrs = _ref.dataAttrs,
+    onCarouselChange = _ref.onCarouselChange,
     rootRef = _ref.rootRef;
   if (items.length < MIN_ITEMS_COUNT) {
     return null;
@@ -34,7 +35,8 @@ var SidePictureCards = function SidePictureCards(_ref) {
       background: background,
       key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(index),
       classes: {
-        root: classes.item
+        root: classes.item,
+        title: classes.itemTitle
       },
       dataAttrs: {
         root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, index + 1))
@@ -44,7 +46,8 @@ var SidePictureCards = function SidePictureCards(_ref) {
   var renderContent = function renderContent() {
     if (hasCarousel) {
       return /*#__PURE__*/React.createElement(Carousel, {
-        slidesSettings: slidesSettings
+        slidesSettings: slidesSettings,
+        onChange: onCarouselChange
       }, items.map(renderItem));
     }
     return /*#__PURE__*/React.createElement(Grid, {

package/dist/es/components/SidePictureCards/components/SidePictureCard.d.ts

@@ -5,10 +5,12 @@ export type SidePictureCardType = CardDataType & {
     background: BackgroundType;
     classes?: {
         root?: string;
+        title?: string;
         button?: string;
     };
     dataAttrs?: {
         root?: Record<string, string>;
+        title?: Record<string, string>;
         button?: Record<string, string>;
     };
 };

package/dist/es/components/SidePictureCards/components/SidePictureCard.js

@@ -26,7 +26,8 @@ var SidePictureCard = function SidePictureCard(_ref) {
     buttonTitle = _ref2.title,
     buttonHref = _ref2.href,
     buttonTarget = _ref2.target,
-    buttonRel = _ref2.rel;
+    buttonRel = _ref2.rel,
+    onButtonClick = _ref2.onClick;
   var isLink = !!href && !buttonHref;
   var ElementType = isLink ? 'a' : 'div';
   var currentRel = setRelAttribute(rel, target);
@@ -63,7 +64,10 @@ var SidePictureCard = function SidePictureCard(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('content')
   }, !!title && /*#__PURE__*/React.createElement(Header, {
-    className: cn('title'),
+    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title]),
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
+    },
     as: "h3"
   }, convert(title, {})), /*#__PURE__*/React.createElement("div", {
     className: cn('items')
@@ -74,7 +78,8 @@ var SidePictureCard = function SidePictureCard(_ref) {
     },
     href: buttonHref,
     target: buttonTarget,
-    rel: currentButtonRel
+    rel: currentButtonRel,
+    onClick: onButtonClick
   }, buttonTitle)), /*#__PURE__*/React.createElement("picture", {
     className: cn('picture')
   }, /*#__PURE__*/React.createElement("source", {

package/dist/es/components/SidePictureCards/types.d.ts

@@ -4,11 +4,13 @@ type ButtonType = {
     /** Название */
     title: string;
     /** Ссылка */
-    href: string;
+    href?: string;
     /** Атрибут ссылки target */
     target?: TargetType;
     /** Атрибут ссылки rel */
     rel?: string;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 };
 type ImageType = {
     /** Изображение на разрешении экрана 0-1279 */

package/dist/lib/components/BlogBox/BlogBox.d.ts

@@ -14,6 +14,7 @@ export interface IBlogBox {
     classes?: {
         root?: string;
         item?: string;
+        itemTitle?: string;
         button?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
@@ -23,6 +24,8 @@ export interface IBlogBox {
         item?: Record<string, string>;
         button?: Record<string, string>;
     };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
 }
 declare const BlogBox: React.FC<IBlogBox>;
 export default BlogBox;

package/dist/lib/components/BlogBox/BlogBox.js

@@ -26,7 +26,8 @@ var BlogBox = function BlogBox(_ref) {
     hasAlignLeft = _ref$hasAlignLeft === void 0 ? false : _ref$hasAlignLeft,
     className = _ref.className,
     classes = _ref.classes,
-    dataAttrs = _ref.dataAttrs;
+    dataAttrs = _ref.dataAttrs,
+    rootRef = _ref.rootRef;
   var _useResolutions = (0, _useResolutions2["default"])(),
     isDesktop = _useResolutions.isDesktop;
   var visibleItems = items.slice(0, maxItemsCount);
@@ -45,7 +46,8 @@ var BlogBox = function BlogBox(_ref) {
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'align-left': isAlignLeft
-    }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
+    ref: rootRef
   }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list), {
     className: cn('list', {
       row: isRow,
@@ -59,7 +61,10 @@ var BlogBox = function BlogBox(_ref) {
       }, [classes === null || classes === void 0 ? void 0 : classes.item]),
       key: "".concat(item.title, "_").concat(i)
     }), /*#__PURE__*/React.createElement(_BlogBoxTile["default"], (0, _extends2["default"])({}, item, {
-      view: view
+      view: view,
+      classes: {
+        title: classes === null || classes === void 0 ? void 0 : classes.itemTitle
+      }
     })));
   })), (button === null || button === void 0 ? void 0 : button.title) && /*#__PURE__*/React.createElement("div", {
     className: cn('button-wrapper')

package/dist/lib/components/BlogBox/components/BlogBoxTile.d.ts

@@ -4,6 +4,10 @@ import './BlogBoxTile.scss';
 type TileSettingsType = {
     view: TileViewType;
 };
-export type BlogBoxTileType = TileDataType & TileSettingsType;
+export type BlogBoxTileType = TileDataType & TileSettingsType & {
+    classes?: {
+        title?: string;
+    };
+};
 declare const BlogBoxTile: React.FC<BlogBoxTileType>;
 export default BlogBoxTile;

package/dist/lib/components/BlogBox/components/BlogBoxTile.js

@@ -25,7 +25,8 @@ var BlogBoxTile = function BlogBoxTile(_ref) {
     srcThumbnail = _ref$image.srcThumbnail,
     _ref$image$alt = _ref$image.alt,
     alt = _ref$image$alt === void 0 ? 'image' : _ref$image$alt,
-    view = _ref.view;
+    view = _ref.view,
+    classes = _ref.classes;
   var _useResolutions = (0, _useResolutions2["default"])(),
     isMobile = _useResolutions.isMobile;
   var isViewThumbnail = view === 'thumbnail';
@@ -63,7 +64,7 @@ var BlogBoxTile = function BlogBoxTile(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('date')
   }, date), /*#__PURE__*/React.createElement("div", {
-    className: cn('title')
+    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title])
   }, title)));
 };
 var _default = exports["default"] = BlogBoxTile;

package/dist/lib/components/DarkGradientCards/DarkGradientCards.d.ts

@@ -16,6 +16,7 @@ export interface IDarkGradientCards {
     classes?: {
         root?: string;
         item?: string;
+        itemTitle?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -23,6 +24,10 @@ export interface IDarkGradientCards {
         carousel?: Record<string, string>;
         item?: Record<string, string>;
     };
+    /** Обработчик смены слайда карусели */
+    onCarouselChange?: CarouselProps['onChange'];
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
 }
 declare const DarkGradientCards: React.FC<IDarkGradientCards>;
 export default DarkGradientCards;

package/dist/lib/components/DarkGradientCards/DarkGradientCards.js

@@ -32,7 +32,9 @@ var DarkGradientCards = function DarkGradientCards(_ref) {
     className = _ref.className,
     _ref$classes = _ref.classes,
     classes = _ref$classes === void 0 ? {} : _ref$classes,
-    dataAttrs = _ref.dataAttrs;
+    dataAttrs = _ref.dataAttrs,
+    onCarouselChange = _ref.onCarouselChange,
+    rootRef = _ref.rootRef;
   var _useResolutions = (0, _useResolutions2["default"])(),
     isDesktopWide = _useResolutions.isDesktopWide;
   var isCarouselActive = items.length > MIN_ITEMS_COUNT || items.length === MIN_ITEMS_COUNT && !isDesktopWide;
@@ -42,7 +44,8 @@ var DarkGradientCards = function DarkGradientCards(_ref) {
       size: i === 0 ? 'big' : 'small',
       className: cn('card'),
       classes: {
-        root: classes.item
+        root: classes.item,
+        title: classes.itemTitle
       },
       dataAttrs: {
         root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1))
@@ -53,7 +56,8 @@ var DarkGradientCards = function DarkGradientCards(_ref) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    className: cn([className, classes.root])
+    className: cn([className, classes.root]),
+    ref: rootRef
   }), isCarouselActive ? /*#__PURE__*/React.createElement(_uiCore.Carousel, {
     dataAttrs: {
       root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.carousel))
@@ -62,7 +66,8 @@ var DarkGradientCards = function DarkGradientCards(_ref) {
     navTheme: carouselNavTheme,
     threshold: CAROUSEL_THRESHOLD,
     gradient: true,
-    gradientColor: carouselGradientColor
+    gradientColor: carouselGradientColor,
+    onChange: onCarouselChange
   }, cards) : /*#__PURE__*/React.createElement("div", {
     className: cn('cards')
   }, cards));

package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.d.ts

@@ -6,6 +6,7 @@ export type DarkGradientCardType = ItemType & {
     className?: string;
     classes?: {
         root?: string;
+        title?: string;
     };
     dataAttrs?: {
         root?: Record<string, string>;

package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.js

@@ -47,7 +47,7 @@ var DarkGradientCard = function DarkGradientCard(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('inner')
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn('title')
+    className: cn('title', [classes.title])
   }, (0, _uiHelpers.convert)(title, {})), subtitle && /*#__PURE__*/React.createElement("div", {
     className: cn('subtitle')
   }, (0, _uiHelpers.convert)(subtitle, {})), !!moreText && /*#__PURE__*/React.createElement("div", {

package/dist/lib/components/PromoCards/PromoCards.d.ts

@@ -15,12 +15,15 @@ export interface IPromoCards extends IPromoCardSettings {
     classes?: {
         root?: string;
         card?: string;
+        cardTitle?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
         card?: Record<string, string>;
     };
+    /** Обработчик смены слайда карусели */
+    onCarouselChange?: CarouselProps['onChange'];
     /** Ссылка на элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Дочерние элементы. Минимальное количество 2 элемента */

package/dist/lib/components/PromoCards/PromoCards.js

@@ -36,6 +36,7 @@ var PromoCards = function PromoCards(_ref) {
     dataAttrs = _ref.dataAttrs,
     className = _ref.className,
     classes = _ref.classes,
+    onCarouselChange = _ref.onCarouselChange,
     rootRef = _ref.rootRef,
     children = _ref.children;
   var itemsLength = (items === null || items === void 0 ? void 0 : items.length) || 0;
@@ -46,6 +47,9 @@ var PromoCards = function PromoCards(_ref) {
   var renderItems = (items || []).map(function (item, i) {
     return /*#__PURE__*/React.createElement(_PromoCard["default"], (0, _extends2["default"])({}, item, {
       className: classes === null || classes === void 0 ? void 0 : classes.card,
+      classes: {
+        title: classes === null || classes === void 0 ? void 0 : classes.cardTitle
+      },
       dataAttrs: {
         root: (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
       },
@@ -60,7 +64,8 @@ var PromoCards = function PromoCards(_ref) {
     slidesSettings: slidesSettings,
     navTheme: carouselNavTheme,
     gradient: true,
-    gradientColor: carouselGradientColor
+    gradientColor: carouselGradientColor,
+    onChange: onCarouselChange
   }, childrenLength ? children : renderItems));
 };
 var _default = exports["default"] = PromoCards;

package/dist/lib/components/PromoCards/components/PromoCard/PromoCard.d.ts

@@ -7,6 +7,7 @@ export interface IPromoCard extends IPromoCardData, IPromoCardSettings {
     /** Дополнительные css классы для корневого элемента */
     classes?: {
         root?: string;
+        title?: string;
     };
     /** Дополнительные data атрибуты к корневому и внутренним элементам */
     dataAttrs?: {
@@ -14,6 +15,7 @@ export interface IPromoCard extends IPromoCardData, IPromoCardSettings {
         image?: Record<string, string>;
         badge?: Record<string, string>;
         logo?: Record<string, string>;
+        title?: Record<string, string>;
         subtitle?: Record<string, string>;
         list?: Record<string, string>;
         adTitle?: Record<string, string>;

package/dist/lib/components/PromoCards/components/PromoCard/PromoCard.js

@@ -154,7 +154,11 @@ var PromoCard = function PromoCard(_ref2) {
     src: logo.src,
     alt: logo.alt || ''
   })), /*#__PURE__*/React.createElement(_uiCore.Header, {
-    as: "h3"
+    as: "h3",
+    className: classes === null || classes === void 0 ? void 0 : classes.title,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
+    }
   }, (0, _uiHelpers.convert)(title, {})), !!subtitle && /*#__PURE__*/React.createElement("div", {
     className: cn('subtitle')
   }, /*#__PURE__*/React.createElement(_uiCore.Paragraph, {

package/dist/lib/components/SidePictureCards/SidePictureCards.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
 import { BackgroundType, CardDataType } from './types';
+type CarouselProps = React.ComponentProps<typeof Carousel>;
 export interface ISidePictureCards {
     /** Карточки. Минимальное количество 2 карточки */
     items: CardDataType[];
@@ -13,12 +15,15 @@ export interface ISidePictureCards {
     classes?: {
         root?: string;
         item?: string;
+        itemTitle?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
         item?: Record<string, string>;
     };
+    /** Обработчик смены слайда карусели */
+    onCarouselChange?: CarouselProps['onChange'];
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
 }

package/dist/lib/components/SidePictureCards/SidePictureCards.js

@@ -35,6 +35,7 @@ var SidePictureCards = function SidePictureCards(_ref) {
     _ref$classes = _ref.classes,
     classes = _ref$classes === void 0 ? {} : _ref$classes,
     dataAttrs = _ref.dataAttrs,
+    onCarouselChange = _ref.onCarouselChange,
     rootRef = _ref.rootRef;
   if (items.length < MIN_ITEMS_COUNT) {
     return null;
@@ -44,7 +45,8 @@ var SidePictureCards = function SidePictureCards(_ref) {
       background: background,
       key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(index),
       classes: {
-        root: classes.item
+        root: classes.item,
+        title: classes.itemTitle
       },
       dataAttrs: {
         root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, index + 1))
@@ -54,7 +56,8 @@ var SidePictureCards = function SidePictureCards(_ref) {
   var renderContent = function renderContent() {
     if (hasCarousel) {
       return /*#__PURE__*/React.createElement(_uiCore.Carousel, {
-        slidesSettings: slidesSettings
+        slidesSettings: slidesSettings,
+        onChange: onCarouselChange
       }, items.map(renderItem));
     }
     return /*#__PURE__*/React.createElement(_uiCore.Grid, {

package/dist/lib/components/SidePictureCards/components/SidePictureCard.d.ts

@@ -5,10 +5,12 @@ export type SidePictureCardType = CardDataType & {
     background: BackgroundType;
     classes?: {
         root?: string;
+        title?: string;
         button?: string;
     };
     dataAttrs?: {
         root?: Record<string, string>;
+        title?: Record<string, string>;
         button?: Record<string, string>;
     };
 };

package/dist/lib/components/SidePictureCards/components/SidePictureCard.js

@@ -32,7 +32,8 @@ var SidePictureCard = function SidePictureCard(_ref) {
     buttonTitle = _ref2.title,
     buttonHref = _ref2.href,
     buttonTarget = _ref2.target,
-    buttonRel = _ref2.rel;
+    buttonRel = _ref2.rel,
+    onButtonClick = _ref2.onClick;
   var isLink = !!href && !buttonHref;
   var ElementType = isLink ? 'a' : 'div';
   var currentRel = (0, _setRelAttribute.setRelAttribute)(rel, target);
@@ -69,7 +70,10 @@ var SidePictureCard = function SidePictureCard(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('content')
   }, !!title && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
-    className: cn('title'),
+    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title]),
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
+    },
     as: "h3"
   }, (0, _uiHelpers.convert)(title, {})), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('items')
@@ -80,7 +84,8 @@ var SidePictureCard = function SidePictureCard(_ref) {
     },
     href: buttonHref,
     target: buttonTarget,
-    rel: currentButtonRel
+    rel: currentButtonRel,
+    onClick: onButtonClick
   }, buttonTitle)), /*#__PURE__*/_react["default"].createElement("picture", {
     className: cn('picture')
   }, /*#__PURE__*/_react["default"].createElement("source", {

package/dist/lib/components/SidePictureCards/types.d.ts

@@ -4,11 +4,13 @@ type ButtonType = {
     /** Название */
     title: string;
     /** Ссылка */
-    href: string;
+    href?: string;
     /** Атрибут ссылки target */
     target?: TargetType;
     /** Атрибут ссылки rel */
     rel?: string;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 };
 type ImageType = {
     /** Изображение на разрешении экрана 0-1279 */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-shared",
-    "version": "8.10.2",
+    "version": "8.11.0",
     "files": [
         "dist"
     ],
@@ -77,7 +77,7 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.8.4",
-        "@megafon/ui-core": "^8.13.2",
+        "@megafon/ui-core": "^8.14.0",
         "@megafon/ui-helpers": "^4.0.2",
         "@megafon/ui-icons": "^3.12.1",
         "core-js": "^3.6.4",
@@ -85,5 +85,5 @@
         "lodash.throttle": "^4.1.1",
         "swiper": "^11.1.1"
     },
-    "gitHead": "4f9585b11b9adfe177e8e56d6030490f6b35b243"
+    "gitHead": "eff55b645b52da10c43471a9960e5136e7584856"
 }