@megafon/ui-shared 6.3.0 → 6.5.0

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

@@ -0,0 +1,91 @@
+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, Header } from '@megafon/ui-core';
+import { breakpoints, cnCreate, convert } from '@megafon/ui-helpers';
+import { setRelAttribute } from "../../../helpers/setRelAttribute";
+import "./SidePictureCard.css";
+var MAX_ICON_ITEMS_COUNT = 4;
+var cn = cnCreate('mfui-side-picture-card');
+
+var SidePictureCard = function SidePictureCard(_ref) {
+  var background = _ref.background,
+      title = _ref.title,
+      image = _ref.image,
+      _ref$iconItems = _ref.iconItems,
+      iconItems = _ref$iconItems === void 0 ? [] : _ref$iconItems,
+      _ref$button = _ref.button,
+      button = _ref$button === void 0 ? {} : _ref$button,
+      href = _ref.href,
+      target = _ref.target,
+      rel = _ref.rel,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
+  var buttonTitle = button.title,
+      buttonHref = button.href,
+      buttonTarget = button.target,
+      buttonRel = button.rel;
+  var isLink = !!href && !buttonHref;
+  var ElementType = isLink ? 'a' : 'div';
+  var currentRel = setRelAttribute(rel, target);
+  var currentButtonRel = setRelAttribute(buttonRel, buttonTarget);
+  var visibleIconItems = iconItems.slice(0, MAX_ICON_ITEMS_COUNT);
+  var items = visibleIconItems.map(function (item, i) {
+    var icon = item.icon,
+        _item$text = item.text,
+        text = _item$text === void 0 ? '' : _item$text,
+        _item$info = item.info,
+        info = _item$info === void 0 ? '' : _item$info;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('item'),
+      key: "".concat(text || info, "_").concat(i)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('item-icon')
+    }, icon), /*#__PURE__*/React.createElement("div", {
+      className: cn('item-description')
+    }, !!text && /*#__PURE__*/React.createElement("div", {
+      className: cn('item-text')
+    }, convert(text, {})), !!info && /*#__PURE__*/React.createElement("div", {
+      className: cn('item-info')
+    }, convert(info, {}))));
+  });
+  return /*#__PURE__*/React.createElement(ElementType, _extends({
+    className: cn({
+      background: background,
+      active: isLink
+    }, [classes.root])
+  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, {
+    href: href,
+    target: isLink ? target : undefined,
+    rel: isLink ? currentRel : undefined
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, !!title && /*#__PURE__*/React.createElement(Header, {
+    className: cn('title'),
+    as: "h3"
+  }, convert(title, {})), /*#__PURE__*/React.createElement("div", {
+    className: cn('items')
+  }, items), !!buttonTitle && /*#__PURE__*/React.createElement(Button, {
+    className: cn('button', [classes.button]),
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
+    href: buttonHref,
+    target: buttonTarget,
+    rel: currentButtonRel
+  }, buttonTitle)), /*#__PURE__*/React.createElement("picture", {
+    className: cn('picture')
+  }, /*#__PURE__*/React.createElement("source", {
+    media: "(min-width: ".concat(breakpoints.DESKTOP_MIDDLE_START, "px)"),
+    srcSet: image.srcWide
+  }), /*#__PURE__*/React.createElement("img", {
+    className: cn('image'),
+    src: image.src,
+    alt: image.alt || 'image'
+  })));
+};
+
+export default SidePictureCard;

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

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+declare type TargetType = '_self' | '_blank' | '_parent' | '_top';
+declare type ButtonType = {
+    /** Название */
+    title: string;
+    /** Ссылка */
+    href: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+declare type ImageType = {
+    /** Изображение на разрешении экрана 0-1279 */
+    src: string;
+    /** Изображение на разрешении экрана 1280+ */
+    srcWide: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+};
+declare type IconContentType = {
+    /** Иконка */
+    icon: JSX.Element;
+    /** Текст-описание */
+    text?: string;
+    /** Дополнительная информация, значение */
+    info?: string;
+};
+export declare type CardDataType = {
+    /** Заголовок */
+    title?: string;
+    /** Изображение */
+    image: ImageType;
+    /** Список пунктов с иконками */
+    iconItems: IconContentType[];
+    /** Кнопка */
+    button?: ButtonType;
+    /** Ссылка */
+    href?: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+export declare type BackgroundType = 'white' | 'gray';
+export {};

package/dist/es/components/TextWithIcon/TextWithIconItem.css

@@ -17,13 +17,22 @@ h5 {
   margin-top: 12px;
 }
 .mfui-text-with-icon-item__svg-icon {
-  width: 44px;
-  min-width: 44px;
-  height: 44px;
-  min-height: 44px;
-  margin-right: 16px;
-  padding: 6px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  min-height: 40px;
+  margin-right: 12px;
+  overflow: hidden;
+}
+.mfui-text-with-icon-item_icon-background_stroke .mfui-text-with-icon-item__svg-icon {
+  padding: 3px;
   border: 1px solid var(--spbSky2);
   border-radius: 50%;
-  overflow: hidden;
+}
+.mfui-text-with-icon-item_icon-background_gray .mfui-text-with-icon-item__svg-icon {
+  padding: 4px;
+  border-radius: 50%;
+  background-color: var(--spbSky0);
 }

package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts

@@ -10,6 +10,8 @@ export interface ITextWithIconItem {
     text: string | string[];
     /** Иконка */
     icon: React.ReactNode;
+    /** Фон для иконки */
+    iconBackground?: 'no' | 'stroke' | 'gray';
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Дополнительные data атрибуты к внутренним элементам */

package/dist/es/components/TextWithIcon/TextWithIconItem.js

@@ -14,6 +14,8 @@ var TextWithIconItem = function TextWithIconItem(_ref) {
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       text = _ref.text,
       icon = _ref.icon,
+      _ref$iconBackground = _ref.iconBackground,
+      iconBackground = _ref$iconBackground === void 0 ? 'no' : _ref$iconBackground,
       rootRef = _ref.rootRef,
       dataAttrs = _ref.dataAttrs;
   var renderText = React.useMemo(function () {
@@ -26,7 +28,9 @@ var TextWithIconItem = function TextWithIconItem(_ref) {
     return convert(text, textConvertConfig);
   }, [text]);
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: cn([className]),
+    className: cn({
+      'icon-background': iconBackground
+    }, [className]),
     ref: rootRef
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
     className: cn('svg-icon', [classes.icon]),
@@ -40,6 +44,7 @@ var TextWithIconItem = function TextWithIconItem(_ref) {
 TextWithIconItem.propTypes = {
   text: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.arrayOf(PropTypes.string.isRequired)]).isRequired,
   icon: PropTypes.node.isRequired,
+  iconBackground: PropTypes.oneOf(['no', 'stroke', 'gray']),
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),

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

@@ -1,4 +1,5 @@
 export declare 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),
@@ -23,6 +24,11 @@ var useResolutions = function useResolutions() {
       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;
@@ -33,24 +39,29 @@ 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,10 +17,14 @@ 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';
 export { default as ImageBanner } from './components/ImageBanner/ImageBanner';
+export { default as InfoCard } from './components/InfoCards/components/InfoCard/InfoCard';
+export { default as InfoCards } from './components/InfoCards/InfoCards';
 export { default as Instructions } from './components/Instructions/Instructions';
 export { default as NotificationBox } from './components/NotificationBox/NotificationBox';
 export { default as PageTitle } from './components/PageTitle/PageTitle';
@@ -28,6 +32,8 @@ export { default as Partners } from './components/Partners/Partners';
 export { default as PictureWithDescription } from './components/PictureWithDescription/PictureWithDescription';
 export { default as Property } from './components/Property/Property';
 export { default as PropertyDescription } from './components/Property/PropertyDescription';
+export { default as SidePictureCard } from './components/SidePictureCards/components/SidePictureCard';
+export { default as SidePictureCards } from './components/SidePictureCards/SidePictureCards';
 export { default as Steps } from './components/Steps/Steps';
 export { default as StepsItem } from './components/Steps/StepsItem';
 export { default as StoreBanner } from './components/StoreBanner/StoreBanner';

package/dist/es/index.js

@@ -17,10 +17,14 @@ 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";
 export { default as ImageBanner } from "./components/ImageBanner/ImageBanner";
+export { default as InfoCard } from "./components/InfoCards/components/InfoCard/InfoCard";
+export { default as InfoCards } from "./components/InfoCards/InfoCards";
 export { default as Instructions } from "./components/Instructions/Instructions";
 export { default as NotificationBox } from "./components/NotificationBox/NotificationBox";
 export { default as PageTitle } from "./components/PageTitle/PageTitle";
@@ -28,6 +32,8 @@ export { default as Partners } from "./components/Partners/Partners";
 export { default as PictureWithDescription } from "./components/PictureWithDescription/PictureWithDescription";
 export { default as Property } from "./components/Property/Property";
 export { default as PropertyDescription } from "./components/Property/PropertyDescription";
+export { default as SidePictureCard } from "./components/SidePictureCards/components/SidePictureCard";
+export { default as SidePictureCards } from "./components/SidePictureCards/SidePictureCards";
 export { default as Steps } from "./components/Steps/Steps";
 export { default as StepsItem } from "./components/Steps/StepsItem";
 export { default as StoreBanner } from "./components/StoreBanner/StoreBanner";

package/dist/lib/components/Card/Card.css

@@ -68,7 +68,7 @@ h5 {
   gap: 12px;
   -webkit-box-align: start;
       -ms-flex-align: start;
-          align-items: start;
+          align-items: flex-start;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;