@megafon/ui-shared 6.0.0 → 6.1.1

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@6.1.0...@megafon/ui-shared@6.1.1) (2024-08-20)
+
+
+### Bug Fixes
+
+* **instructions:** fix tag render for items with mobile numeration ([b5ff10d](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/b5ff10d77907e77e2fbba6a93802bc85e5208082))
+
+
+
+
+
+# [6.1.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@6.0.0...@megafon/ui-shared@6.1.0) (2024-08-19)
+
+
+### Features
+
+* **blogbox:** create component BlogBox ([11d9f2c](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/11d9f2cfaa885b6788a8ad3486bd997faa788698))
+* **instructions:** add optional mobile numeration ([c7d3525](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/c7d3525aae2b4bb4851ddafd3ce9c9afbecaaee6))
+
+
+
+
+
 # [6.0.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.17.1...@megafon/ui-shared@6.0.0) (2024-08-05)
 
 

package/dist/es/components/BlogBox/BlogBox.css

@@ -0,0 +1,92 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-blog-box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-blog-box__list {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    -webkit-column-gap: 20px;
+       -moz-column-gap: 20px;
+            column-gap: 20px;
+    row-gap: 24px;
+  }
+}
+.mfui-blog-box__list_row {
+  grid-template-columns: repeat(6, 1fr);
+}
+.mfui-blog-box__list_row .mfui-blog-box__item {
+  grid-column-end: span 2;
+}
+.mfui-blog-box__list_row-size_1 .mfui-blog-box__item {
+  grid-column-start: 3;
+}
+.mfui-blog-box__list_row-size_2 .mfui-blog-box__item:first-child {
+  grid-column-start: 2;
+}
+.mfui-blog-box__item_view_thumbnail {
+  margin-top: 16px;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-blog-box__item_view_thumbnail {
+    grid-column-start: 1;
+    grid-column-end: 2;
+    margin-top: 0;
+  }
+}
+.mfui-blog-box__item_view_full {
+  margin-bottom: 24px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-blog-box__item_view_full {
+    margin-bottom: 32px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-blog-box__item_view_full {
+    grid-row-start: 1;
+    grid-row-end: 4;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    margin-bottom: 0;
+  }
+}
+.mfui-blog-box__button-wrapper {
+  margin-top: 32px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-blog-box__button-wrapper {
+    margin-top: 40px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-blog-box__button-wrapper {
+    margin-top: 56px;
+  }
+}
+.mfui-blog-box__button {
+  min-width: 208px;
+}
+.mfui-blog-box_align-left {
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+.mfui-blog-box_align-left .mfui-blog-box__item:first-child {
+  grid-column-start: 1;
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ButtonType, TileDataType } from './types';
+import './BlogBox.less';
+export interface IBlogBox {
+    /** Статьи (не более 4, остальные будут проигнорированы) */
+    items: TileDataType[];
+    /** Кнопка */
+    button?: ButtonType;
+    /** Выравнивание по левому краю (при количестве статей менее трех) */
+    hasAlignLeft?: boolean;
+    /** Дополнительный класс для компонента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        item?: string;
+        button?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        list?: Record<string, string>;
+        item?: Record<string, string>;
+        button?: Record<string, string>;
+    };
+}
+declare const BlogBox: React.FC<IBlogBox>;
+export default BlogBox;

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

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.concat.js";
+import React from 'react';
+import { Button } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
+import useResolutions from "../../hooks/useResolutions";
+import BlogBoxTile from "./components/BlogBoxTile";
+import "./BlogBox.css";
+var maxItemsCount = 4;
+var cn = cnCreate('mfui-blog-box');
+
+var BlogBox = function BlogBox(_ref) {
+  var items = _ref.items,
+      button = _ref.button,
+      _ref$hasAlignLeft = _ref.hasAlignLeft,
+      hasAlignLeft = _ref$hasAlignLeft === void 0 ? false : _ref$hasAlignLeft,
+      className = _ref.className,
+      classes = _ref.classes,
+      dataAttrs = _ref.dataAttrs;
+
+  var _useResolutions = useResolutions(),
+      isDesktop = _useResolutions.isDesktop;
+
+  var visibleItems = items.slice(0, maxItemsCount);
+  var itemsCount = visibleItems.length;
+  var isRow = isDesktop && itemsCount < maxItemsCount;
+  var isAlignLeft = isRow && hasAlignLeft;
+
+  var getView = function getView(isCompact, i) {
+    if (isCompact) {
+      return 'compact';
+    }
+
+    if (i === 0) {
+      return 'full';
+    }
+
+    return 'thumbnail';
+  };
+
+  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])
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list), {
+    className: cn('list', {
+      row: isRow,
+      'row-size': isRow && "".concat(itemsCount)
+    })
+  }), visibleItems.map(function (item, i) {
+    var view = getView(isRow, i);
+    return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+      className: cn('item', {
+        view: view
+      }, [classes === null || classes === void 0 ? void 0 : classes.item]),
+      key: "".concat(item.title, "_").concat(i)
+    }), /*#__PURE__*/React.createElement(BlogBoxTile, _extends({}, item, {
+      view: view
+    })));
+  })), (button === null || button === void 0 ? void 0 : button.title) && /*#__PURE__*/React.createElement("div", {
+    className: cn('button-wrapper')
+  }, /*#__PURE__*/React.createElement(Button, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
+    className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.button]),
+    href: button.href,
+    target: button.target,
+    rel: button.rel
+  }, button.title)));
+};
+
+BlogBox.propTypes = {
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  items: PropTypes.arrayOf(PropTypes.shape({
+    date: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    image: PropTypes.shape({
+      srcMobile: PropTypes.string.isRequired,
+      srcDesktop: PropTypes.string.isRequired,
+      srcThumbnail: PropTypes.string.isRequired,
+      alt: PropTypes.string
+    }).isRequired,
+    href: PropTypes.string.isRequired,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    rel: PropTypes.string
+  }).isRequired).isRequired,
+  button: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    rel: PropTypes.string
+  }),
+  hasAlignLeft: PropTypes.bool
+};
+export default BlogBox;

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

@@ -0,0 +1,197 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-blog-box-tile {
+  position: relative;
+  display: block;
+  color: var(--content);
+  text-decoration: none;
+}
+.mfui-blog-box-tile:hover {
+  text-decoration: none;
+}
+.mfui-blog-box-tile:hover .mfui-blog-box-tile__title {
+  color: var(--brandGreen);
+}
+.mfui-blog-box-tile__image {
+  width: 100%;
+  height: 100%;
+  border-radius: 24px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  vertical-align: top;
+}
+.mfui-blog-box-tile__picture {
+  display: block;
+}
+.mfui-blog-box-tile__date {
+  margin-bottom: 4px;
+  color: var(--spbSky3);
+}
+.mfui-blog-box-tile__title {
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  overflow: hidden;
+  white-space: normal;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  -webkit-transition: color 0.3s;
+  transition: color 0.3s;
+}
+.mfui-blog-box-tile_view_thumbnail {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 20px;
+}
+.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  width: 133px;
+  height: 102px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture {
+    width: 170px;
+    height: 130px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture {
+    width: 233px;
+    height: 170px;
+  }
+}
+.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__content {
+  -ms-flex-item-align: center;
+      align-self: center;
+}
+.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__date {
+  font-size: 12px;
+  line-height: 18px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__date {
+    font-size: 15px;
+    line-height: 24px;
+  }
+}
+.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__title {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__title {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+.mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture {
+  height: 358px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture {
+    height: 438px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture {
+    height: 558px;
+  }
+}
+.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  left: 8px;
+  padding: 16px;
+  border-radius: 24px;
+  background-color: var(--base);
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
+    padding: 24px;
+  }
+}
+@media screen and (min-width: 768px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
+    right: 12px;
+    bottom: 12px;
+    left: 12px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
+    padding: 16px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
+    padding: 24px;
+  }
+}
+.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title {
+  font-weight: 600;
+  font-size: 22px;
+  line-height: 28px;
+  letter-spacing: 0.5px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__title {
+    font-size: 26px;
+    line-height: 32px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__title {
+    font-size: 28px;
+    line-height: 36px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__title {
+    font-size: 32px;
+    line-height: 40px;
+  }
+}
+.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture {
+  height: 233px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture {
+    height: 288px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture {
+    height: 367px;
+  }
+}
+.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__content {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  left: 12px;
+  padding: 16px;
+  border-radius: 24px;
+  background-color: var(--base);
+}
+.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__title {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-blog-box-tile_view_compact .mfui-blog-box-tile__title {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TileDataType, TileViewType } from '../types';
+import './BlogBoxTile.less';
+declare type TileSettingsType = {
+    view: TileViewType;
+};
+export declare type BlogBoxTileType = TileDataType & TileSettingsType;
+declare const BlogBoxTile: React.FC<BlogBoxTileType>;
+export default BlogBoxTile;

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { breakpoints, cnCreate } from '@megafon/ui-helpers';
+import { setRelAttribute } from "../../../helpers/setRelAttribute";
+import useResolutions from "../../../hooks/useResolutions";
+import "./BlogBoxTile.css";
+var cn = cnCreate('mfui-blog-box-tile');
+
+var BlogBoxTile = function BlogBoxTile(_ref) {
+  var date = _ref.date,
+      title = _ref.title,
+      href = _ref.href,
+      target = _ref.target,
+      rel = _ref.rel,
+      _ref$image = _ref.image,
+      srcMobile = _ref$image.srcMobile,
+      srcDesktop = _ref$image.srcDesktop,
+      srcThumbnail = _ref$image.srcThumbnail,
+      _ref$image$alt = _ref$image.alt,
+      alt = _ref$image$alt === void 0 ? 'image' : _ref$image$alt,
+      view = _ref.view;
+
+  var _useResolutions = useResolutions(),
+      isMobile = _useResolutions.isMobile;
+
+  var isViewThumbnail = view === 'thumbnail';
+  var currentRel = setRelAttribute(rel, target);
+
+  var renderImage = function renderImage() {
+    if (isViewThumbnail) {
+      return isMobile ? null : /*#__PURE__*/React.createElement("picture", {
+        className: cn('picture')
+      }, /*#__PURE__*/React.createElement("img", {
+        className: cn('image'),
+        src: srcThumbnail,
+        alt: alt
+      }));
+    }
+
+    return /*#__PURE__*/React.createElement("picture", {
+      className: cn('picture')
+    }, /*#__PURE__*/React.createElement("source", {
+      media: "(min-width: ".concat(breakpoints.DESKTOP_SMALL_START, "px)"),
+      srcSet: srcDesktop
+    }), /*#__PURE__*/React.createElement("img", {
+      className: cn('image'),
+      src: srcMobile,
+      alt: alt
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement("a", {
+    className: cn({
+      view: view
+    }),
+    href: href,
+    target: target,
+    rel: currentRel
+  }, renderImage(), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('date')
+  }, date), /*#__PURE__*/React.createElement("div", {
+    className: cn('title')
+  }, title)));
+};
+
+export default BlogBoxTile;

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

@@ -0,0 +1,37 @@
+declare type TargetType = '_self' | '_blank' | '_parent' | '_top';
+export declare type ButtonType = {
+    /** Название */
+    title: string;
+    /** Ссылка */
+    href: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+export declare type ImageType = {
+    /** Изображение на разрешении экрана 0-1023 */
+    srcMobile: string;
+    /** Изображение на разрешении экрана 1024+ */
+    srcDesktop: string;
+    /** Миниатюра */
+    srcThumbnail: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+};
+export declare type TileDataType = {
+    /** Дата */
+    date: string;
+    /** Заголовок */
+    title: string;
+    /** Изображение */
+    image: ImageType;
+    /** Ссылка */
+    href: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+export declare type TileViewType = 'full' | 'thumbnail' | 'compact';
+export {};

package/dist/es/components/Instructions/Instructions.css

@@ -698,13 +698,50 @@ h5 {
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-instructions__articles-title-block {
-    width: 55%;
+    width: 100%;
+    max-width: 530px;
   }
 }
+.mfui-instructions__articles-title-block_with-numeration {
+  text-align: left;
+}
 .mfui-instructions__articles-title {
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+.mfui-instructions__articles-num {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-right: 16px;
+  border-radius: 50%;
+  color: var(--stcWhite);
+  background-color: var(--brandGreen);
+}
+@media screen and (min-width: 1024px) {
+  .mfui-instructions__articles-num {
+    display: none;
+  }
 }
 .mfui-instructions__picture_background_spbSky0 {
   border-radius: 12px;

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

@@ -96,6 +96,8 @@ export interface IInstructionsProps {
     arrowsTheme?: ArrowThemeType;
     /** Вертикальный порядок элементов на мобильных устройствах и планшетах */
     elementOrder?: ElementOrderType;
+    /** Показать нумерацию пунктов инструкции на мобильных устройствах */
+    showMobileNumeration?: boolean;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
 }

package/dist/es/components/Instructions/Instructions.js

@@ -80,6 +80,7 @@ var Instructions = function Instructions(_ref) {
       arrowsTheme = _ref$arrowsTheme === void 0 ? arrowTheme.DARK : _ref$arrowsTheme,
       _ref$elementOrder = _ref.elementOrder,
       elementOrder = _ref$elementOrder === void 0 ? 'default' : _ref$elementOrder,
+      showMobileNumeration = _ref.showMobileNumeration,
       children = _ref.children;
 
   var _React$useState = React.useState(),
@@ -249,7 +250,7 @@ var Instructions = function Instructions(_ref) {
           className: cn('articles-item-dot-number')
         }, i + 1)), /*#__PURE__*/React.createElement("div", {
           className: cn('articles-item-title', [desktopItemTitle])
-        }, itemTitle))
+        }, convert(itemTitle, textConvertConfig)))
       );
     }));
   }, [desktopInstructionItem, desktopItemTitle, getActiveCustomClass, handleArticleClick, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, instructionItem, instructionItems, slideIndex, text]);
@@ -261,18 +262,22 @@ var Instructions = function Instructions(_ref) {
       "data-testid": "".concat(testIdPrefix, "-articles-list-mobile")
     }, /*#__PURE__*/React.createElement("div", {
       className: cn('articles-title-block', {
-        reversed: isMobileReversed
+        reversed: isMobileReversed,
+        'with-numeration': showMobileNumeration
       })
     }, instructionItems.map(function (_ref6, i) {
       var itemTitle = _ref6.title;
-      return slideIndex === i && /*#__PURE__*/React.createElement("div", _extends({
+      return slideIndex === i && /*#__PURE__*/React.createElement("div", {
         key: i,
-        "data-index": i
-      }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, i + 1), {
-        className: cn('articles-title', [mobileItemTitle])
-      }), itemTitle);
+        "data-index": i,
+        className: cn('articles-title')
+      }, showMobileNumeration && /*#__PURE__*/React.createElement("span", {
+        className: cn('articles-num')
+      }, i + 1), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, i + 1), {
+        className: cn('articles-title-text', [mobileItemTitle])
+      }), convert(itemTitle, textConvertConfig)));
     })));
-  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, instructionItems, mobileItemTitle, slideIndex, isMobileReversed]);
+  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, instructionItems, mobileItemTitle, slideIndex, isMobileReversed, showMobileNumeration]);
   var renderArrows = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavArrow, {
       dataAttrs: {

package/dist/es/helpers/getColumnConfig.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("../../../ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;
+export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("@megafon/ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;

package/dist/es/helpers/setRelAttribute.d.ts

@@ -0,0 +1 @@
+export declare const setRelAttribute: (rel?: string | undefined, target?: "_self" | "_blank" | "_parent" | "_top" | undefined) => string | undefined;