@megafon/ui-shared 8.7.3 → 8.8.1

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

@@ -5,6 +5,8 @@ export interface ISidePictureCards {
     items: CardDataType[];
     /** Цвет фона карточек */
     background?: BackgroundType;
+    /** Выстраивать карточки в карусель */
+    hasCarousel?: boolean;
     /** Дополнительный класс для компонента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */
@@ -17,6 +19,8 @@ export interface ISidePictureCards {
         root?: Record<string, string>;
         item?: Record<string, string>;
     };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
 }
 declare const SidePictureCards: React.FC<ISidePictureCards>;
 export default SidePictureCards;

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

@@ -1,44 +1,66 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.map.js";
 import * as React from 'react';
-import { Grid, GridColumn } from '@megafon/ui-core';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { Carousel, Grid, GridColumn } from '@megafon/ui-core';
+import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import SidePictureCard from "./components/SidePictureCard";
+var slidesSettings = _defineProperty(_defineProperty({}, breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 1,
+  spaceBetween: 16
+}), breakpoints.MOBILE_BIG_START, {
+  slidesPerView: 2,
+  spaceBetween: 20
+});
 var MIN_ITEMS_COUNT = 2;
 var cn = cnCreate('mfui-side-picture-cards');
 var SidePictureCards = function SidePictureCards(_ref) {
   var items = _ref.items,
     _ref$background = _ref.background,
     background = _ref$background === void 0 ? 'gray' : _ref$background,
+    _ref$hasCarousel = _ref.hasCarousel,
+    hasCarousel = _ref$hasCarousel === void 0 ? false : _ref$hasCarousel,
     className = _ref.className,
     _ref$classes = _ref.classes,
     classes = _ref$classes === void 0 ? {} : _ref$classes,
-    dataAttrs = _ref.dataAttrs;
+    dataAttrs = _ref.dataAttrs,
+    rootRef = _ref.rootRef;
   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])
-  }), /*#__PURE__*/React.createElement(Grid, {
-    className: cn(),
-    guttersLeft: "medium",
-    guttersBottom: "medium"
-  }, items.map(function (item, i) {
-    return /*#__PURE__*/React.createElement(GridColumn, {
-      all: "6",
-      mobile: "12",
-      key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(i)
-    }, /*#__PURE__*/React.createElement(SidePictureCard, _extends({}, item, {
+  var renderItem = function renderItem(item, index) {
+    return /*#__PURE__*/React.createElement(SidePictureCard, _extends({}, item, {
       background: background,
-      key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(i),
+      key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(index),
       classes: {
         root: classes.item
       },
       dataAttrs: {
-        root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1))
+        root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, index + 1))
       }
-    })));
-  })));
+    }));
+  };
+  var renderContent = function renderContent() {
+    if (hasCarousel) {
+      return /*#__PURE__*/React.createElement(Carousel, {
+        slidesSettings: slidesSettings
+      }, items.map(renderItem));
+    }
+    return /*#__PURE__*/React.createElement(Grid, {
+      guttersLeft: "medium",
+      guttersBottom: "medium"
+    }, items.map(function (item, i) {
+      return /*#__PURE__*/React.createElement(GridColumn, {
+        all: "6",
+        mobile: "12",
+        key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(i)
+      }, renderItem(item, i));
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className, classes.root]),
+    ref: rootRef
+  }), renderContent());
 };
 export default SidePictureCards;

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

@@ -15,18 +15,18 @@ var SidePictureCard = function SidePictureCard(_ref) {
     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,
+    button = _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 _ref2 = button || {},
+    buttonTitle = _ref2.title,
+    buttonHref = _ref2.href,
+    buttonTarget = _ref2.target,
+    buttonRel = _ref2.rel;
   var isLink = !!href && !buttonHref;
   var ElementType = isLink ? 'a' : 'div';
   var currentRel = setRelAttribute(rel, target);

package/dist/es/components/Steps/Steps.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-steps{margin-left:auto;margin-right:auto;width:66%}@media screen and (min-width:1280px){.mfui-steps{width:49%}}@media screen and (max-width:767px){.mfui-steps{width:100%}}.mfui-steps__title{margin-bottom:40px}.mfui-steps__list{list-style:none;margin:0;padding:0}.mfui-steps__item{margin-bottom:48px}@media screen and (max-width:767px){.mfui-steps__item{margin-bottom:24px}}.mfui-steps__item:last-child{margin-bottom:0}
+h1,h2,h3,h4,h5{margin:0}.mfui-steps{margin-left:auto;margin-right:auto;width:100%}@media screen and (min-width:768px){.mfui-steps{width:66%}}@media screen and (min-width:1280px){.mfui-steps{width:49%}}.mfui-steps__title{margin-bottom:24px}@media screen and (min-width:1024px){.mfui-steps__title{margin-bottom:40px}}.mfui-steps__list{list-style:none;margin:0;padding:0}.mfui-steps__item{border-radius:24px;margin-bottom:12px;padding:16px}.mfui-steps__item:last-child{margin-bottom:0}.mfui-steps_theme_gray .mfui-steps__item{background-color:var(--spbSky0)}.mfui-steps_theme_white .mfui-steps__item{background-color:var(--base)}.mfui-steps_theme_none .mfui-steps__title{margin-bottom:40px}.mfui-steps_theme_none .mfui-steps__item{border-radius:0;margin-bottom:48px;padding:0}@media screen and (max-width:767px){.mfui-steps_theme_none .mfui-steps__item{margin-bottom:24px}}

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

@@ -13,6 +13,8 @@ export interface ISteps {
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
     title?: string;
+    /** Цветовая тема. DEPRECATED: 'none' */
+    theme?: 'none' | 'white' | 'gray';
     children: React.ReactNode;
 }
 declare const Steps: React.FC<ISteps>;

package/dist/es/components/Steps/Steps.js

@@ -9,9 +9,13 @@ var Steps = function Steps(_ref) {
     classes = _ref.classes,
     title = _ref.title,
     rootRef = _ref.rootRef,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'none' : _ref$theme,
     children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: cn([className]),
+    className: cn({
+      theme: theme
+    }, [className]),
     ref: rootRef
   }, !!title && /*#__PURE__*/React.createElement(Header, {
     as: "h2",

package/dist/es/components/Steps/StepsItem.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-steps-item,.mfui-steps-item__step-number{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-steps-item__step-number{font-size:15px;font-weight:500;line-height:24px;-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;background-color:var(--brandGreen);border-radius:50%;color:var(--stcWhite);height:40px;justify-content:center;width:40px}.mfui-steps-item__text-wrapper{padding-left:16px;padding-top:8px}.mfui-steps-item__nodes{font-size:15px;font-weight:400;line-height:24px}
+h1,h2,h3,h4,h5{margin:0}.mfui-steps-item,.mfui-steps-item__step-number{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-steps-item__step-number{font-size:15px;font-weight:500;line-height:24px;-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;background-color:var(--brandGreen);border-radius:12px;color:var(--stcWhite);height:40px;justify-content:center;width:40px}.mfui-steps-item__text-wrapper{padding-left:16px;padding-top:8px}.mfui-steps-item__nodes{font-size:15px;font-weight:400;line-height:24px}

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

@@ -5,6 +5,8 @@ export interface ISidePictureCards {
     items: CardDataType[];
     /** Цвет фона карточек */
     background?: BackgroundType;
+    /** Выстраивать карточки в карусель */
+    hasCarousel?: boolean;
     /** Дополнительный класс для компонента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */
@@ -17,6 +19,8 @@ export interface ISidePictureCards {
         root?: Record<string, string>;
         item?: Record<string, string>;
     };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
 }
 declare const SidePictureCards: React.FC<ISidePictureCards>;
 export default SidePictureCards;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 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.concat.js");
 require("core-js/modules/es.array.map.js");
 var React = _interopRequireWildcard(require("react"));
@@ -15,40 +16,61 @@ var _SidePictureCard = _interopRequireDefault(require("./components/SidePictureC
 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 slidesSettings = (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _uiHelpers.breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 1,
+  spaceBetween: 16
+}), _uiHelpers.breakpoints.MOBILE_BIG_START, {
+  slidesPerView: 2,
+  spaceBetween: 20
+});
 var MIN_ITEMS_COUNT = 2;
 var cn = (0, _uiHelpers.cnCreate)('mfui-side-picture-cards');
 var SidePictureCards = function SidePictureCards(_ref) {
   var items = _ref.items,
     _ref$background = _ref.background,
     background = _ref$background === void 0 ? 'gray' : _ref$background,
+    _ref$hasCarousel = _ref.hasCarousel,
+    hasCarousel = _ref$hasCarousel === void 0 ? false : _ref$hasCarousel,
     className = _ref.className,
     _ref$classes = _ref.classes,
     classes = _ref$classes === void 0 ? {} : _ref$classes,
-    dataAttrs = _ref.dataAttrs;
+    dataAttrs = _ref.dataAttrs,
+    rootRef = _ref.rootRef;
   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])
-  }), /*#__PURE__*/React.createElement(_uiCore.Grid, {
-    className: cn(),
-    guttersLeft: "medium",
-    guttersBottom: "medium"
-  }, items.map(function (item, i) {
-    return /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
-      all: "6",
-      mobile: "12",
-      key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(i)
-    }, /*#__PURE__*/React.createElement(_SidePictureCard["default"], (0, _extends2["default"])({}, item, {
+  var renderItem = function renderItem(item, index) {
+    return /*#__PURE__*/React.createElement(_SidePictureCard["default"], (0, _extends2["default"])({}, item, {
       background: background,
-      key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(i),
+      key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(index),
       classes: {
         root: classes.item
       },
       dataAttrs: {
-        root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1))
+        root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, index + 1))
       }
-    })));
-  })));
+    }));
+  };
+  var renderContent = function renderContent() {
+    if (hasCarousel) {
+      return /*#__PURE__*/React.createElement(_uiCore.Carousel, {
+        slidesSettings: slidesSettings
+      }, items.map(renderItem));
+    }
+    return /*#__PURE__*/React.createElement(_uiCore.Grid, {
+      guttersLeft: "medium",
+      guttersBottom: "medium"
+    }, items.map(function (item, i) {
+      return /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+        all: "6",
+        mobile: "12",
+        key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(i)
+      }, renderItem(item, i));
+    }));
+  };
+  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]),
+    ref: rootRef
+  }), renderContent());
 };
 var _default = exports["default"] = SidePictureCards;

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

@@ -21,18 +21,18 @@ var SidePictureCard = function SidePictureCard(_ref) {
     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,
+    button = _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 _ref2 = button || {},
+    buttonTitle = _ref2.title,
+    buttonHref = _ref2.href,
+    buttonTarget = _ref2.target,
+    buttonRel = _ref2.rel;
   var isLink = !!href && !buttonHref;
   var ElementType = isLink ? 'a' : 'div';
   var currentRel = (0, _setRelAttribute.setRelAttribute)(rel, target);

package/dist/lib/components/Steps/Steps.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-steps{margin-left:auto;margin-right:auto;width:66%}@media screen and (min-width:1280px){.mfui-steps{width:49%}}@media screen and (max-width:767px){.mfui-steps{width:100%}}.mfui-steps__title{margin-bottom:40px}.mfui-steps__list{list-style:none;margin:0;padding:0}.mfui-steps__item{margin-bottom:48px}@media screen and (max-width:767px){.mfui-steps__item{margin-bottom:24px}}.mfui-steps__item:last-child{margin-bottom:0}
+h1,h2,h3,h4,h5{margin:0}.mfui-steps{margin-left:auto;margin-right:auto;width:100%}@media screen and (min-width:768px){.mfui-steps{width:66%}}@media screen and (min-width:1280px){.mfui-steps{width:49%}}.mfui-steps__title{margin-bottom:24px}@media screen and (min-width:1024px){.mfui-steps__title{margin-bottom:40px}}.mfui-steps__list{list-style:none;margin:0;padding:0}.mfui-steps__item{border-radius:24px;margin-bottom:12px;padding:16px}.mfui-steps__item:last-child{margin-bottom:0}.mfui-steps_theme_gray .mfui-steps__item{background-color:var(--spbSky0)}.mfui-steps_theme_white .mfui-steps__item{background-color:var(--base)}.mfui-steps_theme_none .mfui-steps__title{margin-bottom:40px}.mfui-steps_theme_none .mfui-steps__item{border-radius:0;margin-bottom:48px;padding:0}@media screen and (max-width:767px){.mfui-steps_theme_none .mfui-steps__item{margin-bottom:24px}}

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

@@ -13,6 +13,8 @@ export interface ISteps {
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
     title?: string;
+    /** Цветовая тема. DEPRECATED: 'none' */
+    theme?: 'none' | 'white' | 'gray';
     children: React.ReactNode;
 }
 declare const Steps: React.FC<ISteps>;

package/dist/lib/components/Steps/Steps.js

@@ -17,9 +17,13 @@ var Steps = function Steps(_ref) {
     classes = _ref.classes,
     title = _ref.title,
     rootRef = _ref.rootRef,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'none' : _ref$theme,
     children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: cn([className]),
+    className: cn({
+      theme: theme
+    }, [className]),
     ref: rootRef
   }, !!title && /*#__PURE__*/React.createElement(_uiCore.Header, {
     as: "h2",

package/dist/lib/components/Steps/StepsItem.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-steps-item,.mfui-steps-item__step-number{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-steps-item__step-number{font-size:15px;font-weight:500;line-height:24px;-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;background-color:var(--brandGreen);border-radius:50%;color:var(--stcWhite);height:40px;justify-content:center;width:40px}.mfui-steps-item__text-wrapper{padding-left:16px;padding-top:8px}.mfui-steps-item__nodes{font-size:15px;font-weight:400;line-height:24px}
+h1,h2,h3,h4,h5{margin:0}.mfui-steps-item,.mfui-steps-item__step-number{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-steps-item__step-number{font-size:15px;font-weight:500;line-height:24px;-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;background-color:var(--brandGreen);border-radius:12px;color:var(--stcWhite);height:40px;justify-content:center;width:40px}.mfui-steps-item__text-wrapper{padding-left:16px;padding-top:8px}.mfui-steps-item__nodes{font-size:15px;font-weight:400;line-height:24px}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-shared",
-    "version": "8.7.3",
+    "version": "8.8.1",
     "files": [
         "dist"
     ],
@@ -77,13 +77,13 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.8.4",
-        "@megafon/ui-core": "^8.7.0",
-        "@megafon/ui-helpers": "^4.0.1",
-        "@megafon/ui-icons": "^3.10.1",
+        "@megafon/ui-core": "^8.9.0",
+        "@megafon/ui-helpers": "^4.0.2",
+        "@megafon/ui-icons": "^3.11.1",
         "core-js": "^3.6.4",
         "htmr": "^1.0.2",
         "lodash.throttle": "^4.1.1",
         "swiper": "^11.1.1"
     },
-    "gitHead": "3dc2e7509518571130a0f4e4ad3cfc7b581732fa"
+    "gitHead": "c638a22fcd9ee30fffdafb22d181f454b54f0860"
 }