@megafon/ui-shared 2.0.0-beta.99 → 2.0.0

package/dist/lib/components/Card/Card.js

@@ -1,74 +1,83 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-require("core-js/modules/es.object.values");
-
-require("core-js/modules/es.string.link");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ObjectFit = void 0;
+exports["default"] = exports.ObjectFit = exports.Target = void 0;
 
 require("core-js/modules/es.object.values");
 
 require("core-js/modules/es.string.link");
 
-var React = _interopRequireWildcard(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
 
 var _uiCore = require("@megafon/ui-core");
 
+var _uiHelpers = require("@megafon/ui-helpers");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+var Target = {
+  SELF: '_self',
+  BLANK: '_blank'
+};
+exports.Target = Target;
 var ObjectFit = {
   FILL: 'fill',
   CONTAIN: 'contain'
 };
 exports.ObjectFit = ObjectFit;
-var cn = (0, _uiCore.cnCreate)('mfui-beta-card');
+var cn = (0, _uiHelpers.cnCreate)('mfui-card');
 
 var Card = function Card(_ref) {
-  var imageSrc = _ref.imageSrc,
+  var dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      rootRef = _ref.rootRef,
+      imageSrc = _ref.imageSrc,
       svgSrc = _ref.svgSrc,
       title = _ref.title,
       text = _ref.text,
       button = _ref.button,
       link = _ref.link,
+      _ref$isCenteredText = _ref.isCenteredText,
+      isCenteredText = _ref$isCenteredText === void 0 ? false : _ref$isCenteredText,
       _ref$isLeftHAlign = _ref.isLeftHAlign,
       isLeftHAlign = _ref$isLeftHAlign === void 0 ? false : _ref$isLeftHAlign,
+      _ref$isFullHeight = _ref.isFullHeight,
+      isFullHeight = _ref$isFullHeight === void 0 ? false : _ref$isFullHeight,
       href = _ref.href,
+      target = _ref.target,
       _ref$objectFit = _ref.objectFit,
       objectFit = _ref$objectFit === void 0 ? 'fill' : _ref$objectFit;
   var isAlignAvailable = !button || !link;
   var isCardLink = !!href;
-  var isRenderBtn = !!button && !isCardLink;
   var Element = href ? _uiCore.Link : 'div';
-  var renderImage = React.useCallback(function () {
+
+  var renderImage = _react["default"].useCallback(function () {
     switch (true) {
       case !!imageSrc:
         {
-          return /*#__PURE__*/React.createElement("div", {
+          return /*#__PURE__*/_react["default"].createElement("div", {
             className: cn('pic-wrapper', {
-              'object-fit': objectFit,
-              'img': true
+              'object-fit': objectFit
             })
-          }, /*#__PURE__*/React.createElement("img", {
+          }, /*#__PURE__*/_react["default"].createElement("img", {
             className: cn('img'),
-            src: imageSrc
+            src: imageSrc,
+            alt: ""
           }));
         }
 
       case !!svgSrc:
         {
-          return /*#__PURE__*/React.createElement("div", {
-            className: cn('pic-wrapper')
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: cn('svg-wrapper')
           }, svgSrc);
         }
 
@@ -76,65 +85,115 @@ var Card = function Card(_ref) {
         return null;
     }
   }, [imageSrc, svgSrc, objectFit]);
-  var renderLink = React.useCallback(function (_ref2) {
-    var linkHref = _ref2.href,
-        linkTitle = _ref2.title;
-    var isFakeLink = !linkHref;
 
-    if (isFakeLink || isCardLink) {
-      return /*#__PURE__*/React.createElement("span", {
+  var renderLink = _react["default"].useCallback(function () {
+    if (!link) {
+      return null;
+    }
+
+    var linkHref = link.href,
+        linkTitle = link.title,
+        linkTarget = link.target,
+        download = link.download;
+
+    if (!linkHref || isCardLink) {
+      return /*#__PURE__*/_react["default"].createElement("span", {
         className: cn('fake-link')
       }, linkTitle);
     }
 
-    return /*#__PURE__*/React.createElement(_uiCore.TextLink, {
-      className: cn('link'),
-      href: linkHref
+    return /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
+      className: cn('link', [classes.link]),
+      href: linkHref,
+      target: linkTarget,
+      download: download
     }, linkTitle);
-  }, [isCardLink]);
-  var renderBtn = React.useCallback(function (_ref3) {
-    var btnHref = _ref3.href,
-        btnTitle = _ref3.title;
-    return /*#__PURE__*/React.createElement(_uiCore.Button, {
-      className: cn('button'),
-      href: btnHref
+  }, [link, isCardLink, classes]);
+
+  var renderBtn = _react["default"].useCallback(function () {
+    if (!button || isCardLink) {
+      return null;
+    }
+
+    var btnHref = button.href,
+        btnTitle = button.title,
+        btnTarget = button.target,
+        buttonDownload = button.download;
+    return /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+      className: cn('button', [classes.button]),
+      href: btnHref,
+      target: btnTarget,
+      download: buttonDownload
     }, btnTitle);
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  }, [button, isCardLink, classes]);
+
+  var renderBtnsWrapper = _react["default"].useCallback(function () {
+    var btnElem = renderBtn();
+    var linkElem = renderLink();
+
+    if (!btnElem && !linkElem) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('btns-wrapper', {
+        'left-align': isAlignAvailable && isLeftHAlign
+      })
+    }, btnElem, linkElem);
+  }, [renderBtn, renderLink, isAlignAvailable, isLeftHAlign]);
+
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
     className: cn('', {
-      'href': !!href
-    })
-  }, /*#__PURE__*/React.createElement(Element, {
-    href: href
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn('inner')
-  }, renderImage(), /*#__PURE__*/React.createElement(_uiCore.Header, {
+      href: !!href,
+      'full-height': isFullHeight,
+      'centered-text': isCenteredText
+    }, [className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/_react["default"].createElement(Element, {
+    href: href,
+    target: target,
+    className: cn('inner', [classes.inner])
+  }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderImage(), /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
     as: "h3",
     className: cn('title')
-  }, title), /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
-    hasMargin: false
-  }, text), /*#__PURE__*/React.createElement("div", {
-    className: cn('btns-wrapper', {
-      'left-align': isAlignAvailable && isLeftHAlign
-    })
-  }, isRenderBtn && renderBtn(button), link && renderLink(link)))));
+  }, title), !!text && /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('text')
+  }, text), renderBtnsWrapper())));
 };
 
 Card.propTypes = {
+  dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    root: _propTypes["default"].string,
+    button: _propTypes["default"].string,
+    link: _propTypes["default"].string,
+    inner: _propTypes["default"].string
+  }),
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])]),
   imageSrc: _propTypes["default"].string,
   svgSrc: _propTypes["default"].node,
-  title: _propTypes["default"].string.isRequired,
-  text: _propTypes["default"].string.isRequired,
+  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]).isRequired,
+  text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
   button: _propTypes["default"].shape({
     title: _propTypes["default"].string.isRequired,
-    href: _propTypes["default"].string.isRequired
+    href: _propTypes["default"].string.isRequired,
+    target: _propTypes["default"].oneOf(Object.values(Target)),
+    download: _propTypes["default"].bool
   }),
   link: _propTypes["default"].shape({
     title: _propTypes["default"].string.isRequired,
-    href: _propTypes["default"].string
+    href: _propTypes["default"].string,
+    target: _propTypes["default"].oneOf(Object.values(Target)),
+    download: _propTypes["default"].bool
   }),
+  isCenteredText: _propTypes["default"].bool,
   isLeftHAlign: _propTypes["default"].bool,
+  isFullHeight: _propTypes["default"].bool,
   href: _propTypes["default"].string,
+  target: _propTypes["default"].oneOf(Object.values(Target)),
   objectFit: _propTypes["default"].oneOf(Object.values(ObjectFit))
 };
 var _default = Card;

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

@@ -1,7 +1,15 @@
 import * as React from 'react';
 import { ICard } from '../Card/Card';
-interface ICardsBox {
+interface ICardsBoxProps {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Обработчик смены слайда (должен быть обернут в useCallback) */
+    onChange?: (currentIndex: number, previousIndex: number, slidesPerView?: number | 'auto') => void;
     children: Array<React.ReactElement<ICard>> | React.ReactElement<ICard>;
 }
-declare const CardsBox: React.FC<ICardsBox>;
+declare const CardsBox: React.FC<ICardsBoxProps>;
 export default CardsBox;

package/dist/lib/components/CardsBox/CardsBox.js

@@ -2,8 +2,6 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-require("core-js/modules/es.array.map");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,17 +9,23 @@ exports["default"] = void 0;
 
 require("core-js/modules/es.array.map");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var React = _interopRequireWildcard(require("react"));
 
-var PropTypes = _interopRequireWildcard(require("prop-types"));
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
 
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
 
-var _uiCore = require("@megafon/ui-core");
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
@@ -32,17 +36,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var _SlidesSettings;
 
 var MAX_CARDS_COUNT_IN_GRID_ON_MOBILE = 2;
-var SlidesSettings = (_SlidesSettings = {}, (0, _defineProperty2["default"])(_SlidesSettings, _uiCore.breakpoints.mobileSmallStart, {
+var SlidesSettings = (_SlidesSettings = {}, (0, _defineProperty2["default"])(_SlidesSettings, _uiHelpers.breakpoints.MOBILE_SMALL_START, {
   slidesPerView: 1,
   spaceBetween: 16
-}), (0, _defineProperty2["default"])(_SlidesSettings, _uiCore.breakpoints.mobileBigStart, {
+}), (0, _defineProperty2["default"])(_SlidesSettings, _uiHelpers.breakpoints.MOBILE_BIG_START, {
   slidesPerView: 2,
   spaceBetween: 20
 }), _SlidesSettings);
-var cn = (0, _uiCore.cnCreate)('mfui-beta-cards-box');
+var cn = (0, _uiHelpers.cnCreate)('mfui-cards-box');
 
 var CardsBox = function CardsBox(_ref) {
-  var children = _ref.children;
+  var rootRef = _ref.rootRef,
+      dataAttrs = _ref.dataAttrs,
+      onChange = _ref.onChange,
+      children = _ref.children;
 
   var _React$useState = React.useState(false),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -64,28 +71,35 @@ var CardsBox = function CardsBox(_ref) {
   }, [children]);
   var renderCarousel = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(_uiCore.Carousel, {
-      slidesSettings: SlidesSettings
+      slidesSettings: SlidesSettings,
+      onChange: onChange
     }, children);
-  }, [children]);
+  }, [children, onChange]);
   React.useEffect(function () {
     var resizeHandler = function resizeHandler() {
-      return window.innerWidth <= _uiCore.breakpoints.mobileBigEnd ? setIsMobile(true) : setIsMobile(false);
+      return window.innerWidth <= _uiHelpers.breakpoints.MOBILE_BIG_END ? setIsMobile(true) : setIsMobile(false);
     };
 
-    var resizeHandlerThrottled = (0, _lodash["default"])(resizeHandler, _uiCore.throttleTime.resize);
+    var resizeHandlerThrottled = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
     resizeHandler();
     window.addEventListener('resize', resizeHandlerThrottled);
     return function () {
       window.removeEventListener('resize', resizeHandlerThrottled);
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn()
-  }, isRenderCarousel ? renderCarousel() : renderGrid());
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn(),
+    ref: rootRef
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), isRenderCarousel ? renderCarousel() : renderGrid());
 };
 
 CardsBox.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]).isRequired
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]).isRequired,
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  onChange: PropTypes.func
 };
 var _default = CardsBox;
 exports["default"] = _default;

package/dist/lib/components/CarouselBox/CarouselBox.js

@@ -2,10 +2,6 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-require("core-js/modules/es.symbol");
-
-require("core-js/modules/es.array.index-of");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,6 +15,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _uiCore = require("@megafon/ui-core");
 
+var _uiHelpers = require("@megafon/ui-helpers");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -36,7 +34,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 
-var cn = (0, _uiCore.cnCreate)('mfui-beta-carousel-box');
+var cn = (0, _uiHelpers.cnCreate)('mfui-carousel-box');
 
 var CarouselBox = function CarouselBox(_a) {
   var children = _a.children,