@megafon/ui-shared 7.0.0-beta.1 → 7.1.0

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
+import { ItemType } from './types';
+import './DarkGradientCards.scss';
+type CarouselProps = React.ComponentProps<typeof Carousel>;
+export interface IDarkGradientCards {
+    /** Карточки. Минимальное количество 3 карточки */
+    items: ItemType[];
+    /** Тема навигации для карусели */
+    carouselNavTheme?: CarouselProps['navTheme'];
+    /** Цвет градиента для карусели */
+    carouselGradientColor?: CarouselProps['gradientColor'];
+    /** Дополнительный класс для компонента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        item?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        carousel?: Record<string, string>;
+        item?: Record<string, string>;
+    };
+}
+declare const DarkGradientCards: React.FC<IDarkGradientCards>;
+export default DarkGradientCards;

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

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
+import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import useResolutions from "../../hooks/useResolutions";
+import DarkGradientCard from "./components/DarkGradientCard";
+import "./DarkGradientCards.css";
+var carouselParams = _defineProperty({}, breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 'auto',
+  spaceBetween: 20
+});
+var CAROUSEL_THRESHOLD = 5;
+var MIN_ITEMS_COUNT = 3;
+var cn = cnCreate('mfui-dark-gradient-cards');
+var DarkGradientCards = function DarkGradientCards(_ref) {
+  var items = _ref.items,
+    _ref$carouselGradient = _ref.carouselGradientColor,
+    carouselGradientColor = _ref$carouselGradient === void 0 ? 'default' : _ref$carouselGradient,
+    _ref$carouselNavTheme = _ref.carouselNavTheme,
+    carouselNavTheme = _ref$carouselNavTheme === void 0 ? 'light' : _ref$carouselNavTheme,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs;
+  var _useResolutions = useResolutions(),
+    isDesktopWide = _useResolutions.isDesktopWide;
+  var isCarouselActive = items.length > MIN_ITEMS_COUNT || items.length === MIN_ITEMS_COUNT && !isDesktopWide;
+  var cards = items.map(function (item, i) {
+    return /*#__PURE__*/React.createElement(DarkGradientCard, _extends({}, item, {
+      key: item.title + i,
+      size: i === 0 ? 'big' : 'small',
+      className: cn('card'),
+      classes: {
+        root: classes.item
+      },
+      dataAttrs: {
+        root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1))
+      }
+    }));
+  });
+  if (items.length < MIN_ITEMS_COUNT) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className, classes.root])
+  }), isCarouselActive ? /*#__PURE__*/React.createElement(Carousel, {
+    dataAttrs: {
+      root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.carousel))
+    },
+    slidesSettings: carouselParams,
+    navTheme: carouselNavTheme,
+    threshold: CAROUSEL_THRESHOLD,
+    gradient: true,
+    gradientColor: carouselGradientColor
+  }, cards) : /*#__PURE__*/React.createElement("div", {
+    className: cn('cards')
+  }, cards));
+};
+export default DarkGradientCards;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ItemType } from '../types';
+import './DarkGradientCard.scss';
+export type DarkGradientCardType = ItemType & {
+    size?: 'small' | 'big';
+    className?: string;
+    classes?: {
+        root?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+};
+declare const DarkGradientCard: React.FC<DarkGradientCardType>;
+export default DarkGradientCard;

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

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, convert } from '@megafon/ui-helpers';
+import { setRelAttribute } from "../../../helpers/setRelAttribute";
+import "./DarkGradientCard.css";
+var cn = cnCreate('mfui-dark-gradient-card');
+var DarkGradientCard = function DarkGradientCard(_ref) {
+  var imageSrc = _ref.imageSrc,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    moreIcon = _ref.moreIcon,
+    moreText = _ref.moreText,
+    href = _ref.href,
+    _ref$target = _ref.target,
+    target = _ref$target === void 0 ? '_self' : _ref$target,
+    rel = _ref.rel,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs;
+  var isLink = !!href;
+  var ElementType = isLink ? 'a' : 'div';
+  var currentRel = setRelAttribute(rel, target);
+  return /*#__PURE__*/React.createElement(ElementType, _extends({
+    className: cn({
+      size: size,
+      active: isLink
+    }, [className, classes.root])
+  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, {
+    href: href,
+    target: isLink ? target : undefined,
+    rel: isLink ? currentRel : undefined,
+    style: {
+      backgroundImage: "url(".concat(imageSrc, ")")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('title')
+  }, convert(title, {})), subtitle && /*#__PURE__*/React.createElement("div", {
+    className: cn('subtitle')
+  }, convert(subtitle, {})), !!moreText && /*#__PURE__*/React.createElement("div", {
+    className: cn('more')
+  }, !!moreIcon && /*#__PURE__*/React.createElement("div", {
+    className: cn('more-icon')
+  }, moreIcon), convert(moreText, {}))));
+};
+export default DarkGradientCard;

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

@@ -0,0 +1,20 @@
+type TargetType = '_self' | '_blank' | '_parent' | '_top';
+export type ItemType = {
+    /** Изображение */
+    imageSrc: string;
+    /** Заголовок */
+    title: string;
+    /** Подзаголовок */
+    subtitle?: string;
+    /** Иконка */
+    moreIcon?: JSX.Element;
+    /** Текст */
+    moreText?: string;
+    /** Ссылка */
+    href?: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+export {};

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

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

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

@@ -74,6 +74,8 @@ export interface IImageBannerProps {
     imageAlt?: string;
     /** Выравнивание изображения по вертикали (по умолчанию center) */
     imageVerticalAlign?: ImageVerticalAlignType;
+    /** Приоритет загрузки изображения */
+    fetchPriority?: 'auto' | 'high' | 'low';
     /** Высота баннера зависит от высоты контента (по умолчанию фиксированная) */
     autoHeight?: boolean;
     /** Изображение растягивается на всю ширину или вписывается в фиксированный фрейм (по умолчанию фрейм) */

package/dist/es/components/ImageBanner/ImageBanner.js

@@ -68,6 +68,8 @@ var ImageBanner = function ImageBanner(_ref2) {
     imageAlt = _ref2$imageAlt === void 0 ? '' : _ref2$imageAlt,
     _ref2$imageVerticalAl = _ref2.imageVerticalAlign,
     imageVerticalAlign = _ref2$imageVerticalAl === void 0 ? ImageVerticalAlign.CENTER : _ref2$imageVerticalAl,
+    _ref2$fetchPriority = _ref2.fetchPriority,
+    fetchPriority = _ref2$fetchPriority === void 0 ? 'auto' : _ref2$fetchPriority,
     title = _ref2.title,
     description = _ref2.description,
     cost = _ref2.cost,
@@ -138,7 +140,8 @@ var ImageBanner = function ImageBanner(_ref2) {
     className: cn('image', [classes.image]),
     src: imageMobile || imageMobile2x,
     srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
-    alt: imageAlt
+    alt: imageAlt,
+    fetchPriority: fetchPriority
   })));
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({

package/dist/es/hooks/useResolutions.d.ts

@@ -1,4 +1,5 @@
 export type useResolutionsReturnType = {
+    isDesktopWide: boolean;
     isDesktop: boolean;
     isMobile: boolean;
     isTablet: boolean;

package/dist/es/hooks/useResolutions.js

@@ -5,7 +5,8 @@ import { breakpoints } from '@megafon/ui-helpers';
 var MOBILE_MIDDLE_END = breakpoints.MOBILE_MIDDLE_END,
   MOBILE_BIG_START = breakpoints.MOBILE_BIG_START,
   MOBILE_BIG_END = breakpoints.MOBILE_BIG_END,
-  DESKTOP_SMALL_START = breakpoints.DESKTOP_SMALL_START;
+  DESKTOP_SMALL_START = breakpoints.DESKTOP_SMALL_START,
+  DESKTOP_MIDDLE_START = breakpoints.DESKTOP_MIDDLE_START;
 var useResolutions = function useResolutions() {
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -19,6 +20,10 @@ var useResolutions = function useResolutions() {
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     isDesktop = _React$useState6[0],
     setIsDesktop = _React$useState6[1];
+  var _React$useState7 = React.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    isDesktopWide = _React$useState8[0],
+    setIsDesktopWide = _React$useState8[1];
   React.useEffect(function () {
     if (typeof window === 'undefined') {
       return undefined;
@@ -28,22 +33,27 @@ var useResolutions = function useResolutions() {
     var mobileQuery = matchMedia("(max-width: ".concat(MOBILE_MIDDLE_END, "px)"));
     var tabletQuery = matchMedia("(min-width: ".concat(MOBILE_BIG_START, "px) and (max-width: ").concat(MOBILE_BIG_END, "px)"));
     var desktopQuery = matchMedia("(min-width: ".concat(DESKTOP_SMALL_START, "px)"));
+    var desktopWideQuery = matchMedia("(min-width: ".concat(DESKTOP_MIDDLE_START, "px)"));
     var handleResize = function handleResize() {
       setIsMobile(mobileQuery.matches);
       setIsTablet(tabletQuery.matches);
       setIsDesktop(desktopQuery.matches);
+      setIsDesktopWide(desktopWideQuery.matches);
     };
     handleResize();
     mobileQuery.addEventListener('change', handleResize);
     tabletQuery.addEventListener('change', handleResize);
     desktopQuery.addEventListener('change', handleResize);
+    desktopWideQuery.addEventListener('change', handleResize);
     return function () {
       mobileQuery.removeEventListener('change', handleResize);
       tabletQuery.removeEventListener('change', handleResize);
       desktopQuery.removeEventListener('change', handleResize);
+      desktopWideQuery.addEventListener('change', handleResize);
     };
   }, []);
   return {
+    isDesktopWide: isDesktopWide,
     isDesktop: isDesktop,
     isMobile: isMobile,
     isTablet: isTablet

package/dist/es/index.d.ts

@@ -17,6 +17,8 @@ export { default as Card } from './components/Card/Card';
 export { default as CardsBox } from './components/CardsBox/CardsBox';
 export { default as CarouselBox } from './components/CarouselBox/CarouselBox';
 export { default as Container } from './components/Container/Container';
+export { default as DarkGradientCard } from './components/DarkGradientCards/components/DarkGradientCard';
+export { default as DarkGradientCards } from './components/DarkGradientCards/DarkGradientCards';
 export { default as DownloadLink } from './components/DownloadLinks/DownloadLink';
 export { default as DownloadLinks } from './components/DownloadLinks/DownloadLinks';
 export { default as FaqWrapper } from './components/FaqWrapper/FaqWrapper';

package/dist/es/index.js

@@ -17,6 +17,8 @@ export { default as Card } from "./components/Card/Card";
 export { default as CardsBox } from "./components/CardsBox/CardsBox";
 export { default as CarouselBox } from "./components/CarouselBox/CarouselBox";
 export { default as Container } from "./components/Container/Container";
+export { default as DarkGradientCard } from "./components/DarkGradientCards/components/DarkGradientCard";
+export { default as DarkGradientCards } from "./components/DarkGradientCards/DarkGradientCards";
 export { default as DownloadLink } from "./components/DownloadLinks/DownloadLink";
 export { default as DownloadLinks } from "./components/DownloadLinks/DownloadLinks";
 export { default as FaqWrapper } from "./components/FaqWrapper/FaqWrapper";

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
+import { ItemType } from './types';
+import './DarkGradientCards.scss';
+type CarouselProps = React.ComponentProps<typeof Carousel>;
+export interface IDarkGradientCards {
+    /** Карточки. Минимальное количество 3 карточки */
+    items: ItemType[];
+    /** Тема навигации для карусели */
+    carouselNavTheme?: CarouselProps['navTheme'];
+    /** Цвет градиента для карусели */
+    carouselGradientColor?: CarouselProps['gradientColor'];
+    /** Дополнительный класс для компонента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        item?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        carousel?: Record<string, string>;
+        item?: Record<string, string>;
+    };
+}
+declare const DarkGradientCards: React.FC<IDarkGradientCards>;
+export default DarkGradientCards;

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

@@ -0,0 +1,70 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.map.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiCore = require("@megafon/ui-core");
+var _uiHelpers = require("@megafon/ui-helpers");
+var _useResolutions2 = _interopRequireDefault(require("../../hooks/useResolutions"));
+var _DarkGradientCard = _interopRequireDefault(require("./components/DarkGradientCard"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var carouselParams = (0, _defineProperty2["default"])({}, _uiHelpers.breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 'auto',
+  spaceBetween: 20
+});
+var CAROUSEL_THRESHOLD = 5;
+var MIN_ITEMS_COUNT = 3;
+var cn = (0, _uiHelpers.cnCreate)('mfui-dark-gradient-cards');
+var DarkGradientCards = function DarkGradientCards(_ref) {
+  var items = _ref.items,
+    _ref$carouselGradient = _ref.carouselGradientColor,
+    carouselGradientColor = _ref$carouselGradient === void 0 ? 'default' : _ref$carouselGradient,
+    _ref$carouselNavTheme = _ref.carouselNavTheme,
+    carouselNavTheme = _ref$carouselNavTheme === void 0 ? 'light' : _ref$carouselNavTheme,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs;
+  var _useResolutions = (0, _useResolutions2["default"])(),
+    isDesktopWide = _useResolutions.isDesktopWide;
+  var isCarouselActive = items.length > MIN_ITEMS_COUNT || items.length === MIN_ITEMS_COUNT && !isDesktopWide;
+  var cards = items.map(function (item, i) {
+    return /*#__PURE__*/React.createElement(_DarkGradientCard["default"], (0, _extends2["default"])({}, item, {
+      key: item.title + i,
+      size: i === 0 ? 'big' : 'small',
+      className: cn('card'),
+      classes: {
+        root: classes.item
+      },
+      dataAttrs: {
+        root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1))
+      }
+    }));
+  });
+  if (items.length < MIN_ITEMS_COUNT) {
+    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])
+  }), isCarouselActive ? /*#__PURE__*/React.createElement(_uiCore.Carousel, {
+    dataAttrs: {
+      root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.carousel))
+    },
+    slidesSettings: carouselParams,
+    navTheme: carouselNavTheme,
+    threshold: CAROUSEL_THRESHOLD,
+    gradient: true,
+    gradientColor: carouselGradientColor
+  }, cards) : /*#__PURE__*/React.createElement("div", {
+    className: cn('cards')
+  }, cards));
+};
+var _default = exports["default"] = DarkGradientCards;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ItemType } from '../types';
+import './DarkGradientCard.scss';
+export type DarkGradientCardType = ItemType & {
+    size?: 'small' | 'big';
+    className?: string;
+    classes?: {
+        root?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+};
+declare const DarkGradientCard: React.FC<DarkGradientCardType>;
+export default DarkGradientCard;

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

@@ -0,0 +1,59 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _setRelAttribute = require("../../../helpers/setRelAttribute");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var cn = (0, _uiHelpers.cnCreate)('mfui-dark-gradient-card');
+var DarkGradientCard = function DarkGradientCard(_ref) {
+  var imageSrc = _ref.imageSrc,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    moreIcon = _ref.moreIcon,
+    moreText = _ref.moreText,
+    href = _ref.href,
+    _ref$target = _ref.target,
+    target = _ref$target === void 0 ? '_self' : _ref$target,
+    rel = _ref.rel,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs;
+  var isLink = !!href;
+  var ElementType = isLink ? 'a' : 'div';
+  var currentRel = (0, _setRelAttribute.setRelAttribute)(rel, target);
+  return /*#__PURE__*/React.createElement(ElementType, (0, _extends2["default"])({
+    className: cn({
+      size: size,
+      active: isLink
+    }, [className, classes.root])
+  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, {
+    href: href,
+    target: isLink ? target : undefined,
+    rel: isLink ? currentRel : undefined,
+    style: {
+      backgroundImage: "url(".concat(imageSrc, ")")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('title')
+  }, (0, _uiHelpers.convert)(title, {})), subtitle && /*#__PURE__*/React.createElement("div", {
+    className: cn('subtitle')
+  }, (0, _uiHelpers.convert)(subtitle, {})), !!moreText && /*#__PURE__*/React.createElement("div", {
+    className: cn('more')
+  }, !!moreIcon && /*#__PURE__*/React.createElement("div", {
+    className: cn('more-icon')
+  }, moreIcon), (0, _uiHelpers.convert)(moreText, {}))));
+};
+var _default = exports["default"] = DarkGradientCard;

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

@@ -0,0 +1,20 @@
+type TargetType = '_self' | '_blank' | '_parent' | '_top';
+export type ItemType = {
+    /** Изображение */
+    imageSrc: string;
+    /** Заголовок */
+    title: string;
+    /** Подзаголовок */
+    subtitle?: string;
+    /** Иконка */
+    moreIcon?: JSX.Element;
+    /** Текст */
+    moreText?: string;
+    /** Ссылка */
+    href?: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+export {};

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -74,6 +74,8 @@ export interface IImageBannerProps {
     imageAlt?: string;
     /** Выравнивание изображения по вертикали (по умолчанию center) */
     imageVerticalAlign?: ImageVerticalAlignType;
+    /** Приоритет загрузки изображения */
+    fetchPriority?: 'auto' | 'high' | 'low';
     /** Высота баннера зависит от высоты контента (по умолчанию фиксированная) */
     autoHeight?: boolean;
     /** Изображение растягивается на всю ширину или вписывается в фиксированный фрейм (по умолчанию фрейм) */

package/dist/lib/components/ImageBanner/ImageBanner.js

@@ -77,6 +77,8 @@ var ImageBanner = function ImageBanner(_ref2) {
     imageAlt = _ref2$imageAlt === void 0 ? '' : _ref2$imageAlt,
     _ref2$imageVerticalAl = _ref2.imageVerticalAlign,
     imageVerticalAlign = _ref2$imageVerticalAl === void 0 ? ImageVerticalAlign.CENTER : _ref2$imageVerticalAl,
+    _ref2$fetchPriority = _ref2.fetchPriority,
+    fetchPriority = _ref2$fetchPriority === void 0 ? 'auto' : _ref2$fetchPriority,
     title = _ref2.title,
     description = _ref2.description,
     cost = _ref2.cost,
@@ -147,7 +149,8 @@ var ImageBanner = function ImageBanner(_ref2) {
     className: cn('image', [classes.image]),
     src: imageMobile || imageMobile2x,
     srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
-    alt: imageAlt
+    alt: imageAlt,
+    fetchPriority: fetchPriority
   })));
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({

package/dist/lib/hooks/useResolutions.d.ts

@@ -1,4 +1,5 @@
 export type useResolutionsReturnType = {
+    isDesktopWide: boolean;
     isDesktop: boolean;
     isMobile: boolean;
     isTablet: boolean;

package/dist/lib/hooks/useResolutions.js

@@ -12,7 +12,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
 var MOBILE_MIDDLE_END = _uiHelpers.breakpoints.MOBILE_MIDDLE_END,
   MOBILE_BIG_START = _uiHelpers.breakpoints.MOBILE_BIG_START,
   MOBILE_BIG_END = _uiHelpers.breakpoints.MOBILE_BIG_END,
-  DESKTOP_SMALL_START = _uiHelpers.breakpoints.DESKTOP_SMALL_START;
+  DESKTOP_SMALL_START = _uiHelpers.breakpoints.DESKTOP_SMALL_START,
+  DESKTOP_MIDDLE_START = _uiHelpers.breakpoints.DESKTOP_MIDDLE_START;
 var useResolutions = function useResolutions() {
   var _React$useState = _react["default"].useState(false),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -26,6 +27,10 @@ var useResolutions = function useResolutions() {
     _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
     isDesktop = _React$useState6[0],
     setIsDesktop = _React$useState6[1];
+  var _React$useState7 = _react["default"].useState(false),
+    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
+    isDesktopWide = _React$useState8[0],
+    setIsDesktopWide = _React$useState8[1];
   _react["default"].useEffect(function () {
     if (typeof window === 'undefined') {
       return undefined;
@@ -35,22 +40,27 @@ var useResolutions = function useResolutions() {
     var mobileQuery = matchMedia("(max-width: ".concat(MOBILE_MIDDLE_END, "px)"));
     var tabletQuery = matchMedia("(min-width: ".concat(MOBILE_BIG_START, "px) and (max-width: ").concat(MOBILE_BIG_END, "px)"));
     var desktopQuery = matchMedia("(min-width: ".concat(DESKTOP_SMALL_START, "px)"));
+    var desktopWideQuery = matchMedia("(min-width: ".concat(DESKTOP_MIDDLE_START, "px)"));
     var handleResize = function handleResize() {
       setIsMobile(mobileQuery.matches);
       setIsTablet(tabletQuery.matches);
       setIsDesktop(desktopQuery.matches);
+      setIsDesktopWide(desktopWideQuery.matches);
     };
     handleResize();
     mobileQuery.addEventListener('change', handleResize);
     tabletQuery.addEventListener('change', handleResize);
     desktopQuery.addEventListener('change', handleResize);
+    desktopWideQuery.addEventListener('change', handleResize);
     return function () {
       mobileQuery.removeEventListener('change', handleResize);
       tabletQuery.removeEventListener('change', handleResize);
       desktopQuery.removeEventListener('change', handleResize);
+      desktopWideQuery.addEventListener('change', handleResize);
     };
   }, []);
   return {
+    isDesktopWide: isDesktopWide,
     isDesktop: isDesktop,
     isMobile: isMobile,
     isTablet: isTablet

package/dist/lib/index.d.ts

@@ -17,6 +17,8 @@ export { default as Card } from './components/Card/Card';
 export { default as CardsBox } from './components/CardsBox/CardsBox';
 export { default as CarouselBox } from './components/CarouselBox/CarouselBox';
 export { default as Container } from './components/Container/Container';
+export { default as DarkGradientCard } from './components/DarkGradientCards/components/DarkGradientCard';
+export { default as DarkGradientCards } from './components/DarkGradientCards/DarkGradientCards';
 export { default as DownloadLink } from './components/DownloadLinks/DownloadLink';
 export { default as DownloadLinks } from './components/DownloadLinks/DownloadLinks';
 export { default as FaqWrapper } from './components/FaqWrapper/FaqWrapper';

package/dist/lib/index.js

@@ -117,6 +117,18 @@ Object.defineProperty(exports, "Container", {
     return _Container["default"];
   }
 });
+Object.defineProperty(exports, "DarkGradientCard", {
+  enumerable: true,
+  get: function get() {
+    return _DarkGradientCard["default"];
+  }
+});
+Object.defineProperty(exports, "DarkGradientCards", {
+  enumerable: true,
+  get: function get() {
+    return _DarkGradientCards["default"];
+  }
+});
 Object.defineProperty(exports, "DownloadLink", {
   enumerable: true,
   get: function get() {
@@ -334,6 +346,8 @@ var _Card = _interopRequireDefault(require("./components/Card/Card"));
 var _CardsBox = _interopRequireDefault(require("./components/CardsBox/CardsBox"));
 var _CarouselBox = _interopRequireDefault(require("./components/CarouselBox/CarouselBox"));
 var _Container = _interopRequireDefault(require("./components/Container/Container"));
+var _DarkGradientCard = _interopRequireDefault(require("./components/DarkGradientCards/components/DarkGradientCard"));
+var _DarkGradientCards = _interopRequireDefault(require("./components/DarkGradientCards/DarkGradientCards"));
 var _DownloadLink = _interopRequireDefault(require("./components/DownloadLinks/DownloadLink"));
 var _DownloadLinks = _interopRequireDefault(require("./components/DownloadLinks/DownloadLinks"));
 var _FaqWrapper = _interopRequireDefault(require("./components/FaqWrapper/FaqWrapper"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-shared",
-    "version": "7.0.0-beta.1",
+    "version": "7.1.0",
     "files": [
         "dist"
     ],
@@ -77,13 +77,13 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.8.4",
-        "@megafon/ui-core": "^7.0.0-beta.1",
-        "@megafon/ui-helpers": "^3.0.0-beta.1",
-        "@megafon/ui-icons": "^3.0.0-beta.5",
+        "@megafon/ui-core": "^7.0.0",
+        "@megafon/ui-helpers": "^3.0.0",
+        "@megafon/ui-icons": "^3.0.0",
         "core-js": "^3.6.4",
         "htmr": "^1.0.2",
         "lodash.throttle": "^4.1.1",
         "swiper": "^11.1.1"
     },
-    "gitHead": "7fc5e0c7ab58ffbadf193e1d7c5ed104ac067346"
+    "gitHead": "1796cdfdac7d40e68292730f6784cc4f27b8e2be"
 }