@megafon/ui-shared 4.21.2 → 5.0.1

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ObjectFit = exports.Target = void 0;
+exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 require("core-js/modules/es.string.link.js");
 
-require("core-js/modules/es.object.values.js");
+require("core-js/modules/es.array.map.js");
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -21,201 +21,274 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var Target = {
-  SELF: '_self',
-  BLANK: '_blank'
-};
-exports.Target = Target;
-var ObjectFit = {
-  FILL: 'fill',
-  CONTAIN: 'contain'
+var textsConvertConfig = {
+  b: {
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/_react["default"].createElement("b", null, children);
+    }
+  },
+  ul: {
+    component: function component(_ref2) {
+      var children = _ref2.children;
+      return /*#__PURE__*/_react["default"].createElement("ul", null, children);
+    }
+  },
+  ol: {
+    component: function component(_ref3) {
+      var children = _ref3.children;
+      return /*#__PURE__*/_react["default"].createElement("ol", null, children);
+    }
+  },
+  li: {
+    component: function component(_ref4) {
+      var children = _ref4.children;
+      return /*#__PURE__*/_react["default"].createElement("li", null, children);
+    }
+  }
 };
-exports.ObjectFit = ObjectFit;
-var cn = (0, _uiHelpers.cnCreate)('mfui-card-old');
-
-var Card = function Card(_ref) {
-  var dataAttrs = _ref.dataAttrs,
-      className = _ref.className,
-      _ref$classes = _ref.classes,
-      classes = _ref$classes === void 0 ? {} : _ref$classes,
-      rootRef = _ref.rootRef,
-      imageSrc = _ref.imageSrc,
-      imageAlt = _ref.imageAlt,
-      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 Element = href ? _uiCore.Link : 'div';
-
-  var renderImage = _react["default"].useCallback(function () {
-    switch (true) {
-      case !!imageSrc:
-        {
-          return /*#__PURE__*/_react["default"].createElement("div", {
-            className: cn('pic-wrapper', {
-              'object-fit': objectFit
-            })
-          }, /*#__PURE__*/_react["default"].createElement("img", {
-            className: cn('img'),
-            src: imageSrc,
-            alt: imageAlt
-          }));
-        }
-
-      case !!svgSrc:
-        {
-          return /*#__PURE__*/_react["default"].createElement("div", {
-            className: cn('svg-wrapper')
-          }, svgSrc);
-        }
-
-      default:
-        return null;
+var cn = (0, _uiHelpers.cnCreate)('mfui-card');
+
+var Card = function Card(_ref5) {
+  var dataAttrs = _ref5.dataAttrs,
+      className = _ref5.className,
+      _ref5$isFullHeight = _ref5.isFullHeight,
+      isFullHeight = _ref5$isFullHeight === void 0 ? false : _ref5$isFullHeight,
+      link = _ref5.link,
+      _ref5$view = _ref5.view,
+      view = _ref5$view === void 0 ? 'shadow' : _ref5$view,
+      image = _ref5.image,
+      icon = _ref5.icon,
+      title = _ref5.title,
+      textsList = _ref5.textsList,
+      featuresList = _ref5.featuresList,
+      iconsList = _ref5.iconsList,
+      price = _ref5.price,
+      button = _ref5.button,
+      extraButton = _ref5.extraButton,
+      onClick = _ref5.onClick;
+  var isOnlyTitle = !image && !icon && !textsList && !featuresList && !iconsList && !price && !button && !extraButton;
+  var isLink = (link === null || link === void 0 ? void 0 : link.href) && !button && !extraButton;
+  var isBottomImage = (image === null || image === void 0 ? void 0 : image.position) === 'bottom';
+  var ElementType = isLink ? 'a' : 'div';
+
+  var renderImage = function renderImage() {
+    if (!image) {
+      return null;
     }
-  }, [imageSrc, svgSrc, objectFit, imageAlt]);
 
-  var renderLink = _react["default"].useCallback(function () {
-    if (!link) {
+    return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.imgBox), {
+      className: cn('img-box', {
+        position: image.position
+      })
+    }), /*#__PURE__*/_react["default"].createElement("img", {
+      className: cn('img'),
+      src: image.src,
+      alt: image.alt
+    }));
+  };
+
+  var renderIcon = function renderIcon() {
+    if (!icon) {
       return null;
     }
 
-    var linkHref = link.href,
-        linkTitle = link.title,
-        linkTarget = link.target,
-        download = link.download,
-        linkRel = link.rel;
+    return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon), {
+      className: cn('icon')
+    }), icon);
+  };
 
-    if (!linkHref || isCardLink) {
-      return /*#__PURE__*/_react["default"].createElement("span", {
-        className: cn('fake-link')
-      }, linkTitle);
+  var renderContent = function renderContent() {
+    if (textsList) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('texts')
+      }, textsList.map(function (item, i) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: cn('texts-item'),
+          key: i
+        }, !!item.title && /*#__PURE__*/_react["default"].createElement("div", {
+          className: cn('texts-title')
+        }, (0, _uiHelpers.convert)(item.title, textsConvertConfig)), /*#__PURE__*/_react["default"].createElement("div", {
+          className: cn('texts-desc')
+        }, (0, _uiHelpers.convert)(item.desc, textsConvertConfig)));
+      }));
     }
 
-    return /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
-      href: linkHref,
-      download: download,
-      target: linkTarget,
-      rel: linkRel,
-      dataAttrs: {
-        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
-      },
-      className: cn('link', [classes.link])
-    }, linkTitle);
-  }, [link, isCardLink, classes, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link]);
+    if (featuresList) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('features')
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('features-list')
+      }, featuresList.items.map(function (item, i) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: cn('features-item'),
+          key: i
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: cn('features-item-title')
+        }, item.title), /*#__PURE__*/_react["default"].createElement("div", {
+          className: cn('features-item-separator')
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: cn('features-item-value')
+        }, item.value));
+      })), featuresList.desc);
+    }
+
+    if (iconsList) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('icons')
+      }, !!iconsList.desc && /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('icons-desc')
+      }, iconsList.desc), /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('icons-list')
+      }, iconsList.items.map(function (item, i) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: cn('icons-item'),
+          key: i
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: cn('icons-item-icon')
+        }, item.icon), /*#__PURE__*/_react["default"].createElement("div", {
+          className: cn('icons-item-text')
+        }, item.text));
+      })));
+    }
+
+    return null;
+  };
+
+  var renderPrice = function renderPrice() {
+    if (!price) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('price')
+    }, !!price.oldValue && /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('price-old-value')
+    }, price.oldValue), /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('price-value')
+    }, price.value), !!price.period && /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('price-period')
+    }, price.period));
+  };
 
-  var renderBtn = _react["default"].useCallback(function () {
-    if (!button || isCardLink) {
+  var renderButtons = function renderButtons() {
+    if (!button && !extraButton) {
       return null;
     }
 
-    var btnHref = button.href,
-        btnTitle = button.title,
-        btnTarget = button.target,
-        btnDownload = button.download,
-        btnRel = button.rel,
-        btnOnClick = button.onClick;
-    return /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('buttons', {
+        centered: (button === null || button === void 0 ? void 0 : button.isCentered) || (extraButton === null || extraButton === void 0 ? void 0 : extraButton.isCentered)
+      })
+    }, !!button && /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
       },
-      className: cn('button', [classes.button]),
-      href: btnHref,
-      target: btnTarget,
-      download: btnDownload,
-      rel: btnRel,
-      onClick: btnOnClick
-    }, btnTitle);
-  }, [button, isCardLink, classes, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button]);
-
-  var renderBtnsWrapper = _react["default"].useCallback(function () {
-    var btnElem = renderBtn();
-    var linkElem = renderLink();
-
-    if (!btnElem && !linkElem) {
+      className: cn('button'),
+      href: button.href,
+      target: button.target,
+      onClick: button === null || button === void 0 ? void 0 : button.onClick
+    }, button.title), !!extraButton && /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
+      },
+      className: cn('button'),
+      href: extraButton.href,
+      target: extraButton.target,
+      type: "outline",
+      onClick: extraButton === null || extraButton === void 0 ? void 0 : extraButton.onClick
+    }, extraButton.title));
+  };
+
+  var renderFooter = function renderFooter() {
+    if (!price && !button && !extraButton && !image) {
       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 === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    className: cn('', {
-      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, {
+      className: cn('footer')
+    }, isBottomImage && renderImage(), renderPrice(), renderButtons());
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(ElementType, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'only-title': isOnlyTitle,
+      view: view,
+      link: isLink,
+      'full-height': isFullHeight
+    }, [className]),
+    href: isLink ? link === null || link === void 0 ? void 0 : link.href : undefined,
+    target: isLink ? link === null || link === void 0 ? void 0 : link.target : undefined,
+    onClick: isLink ? onClick : undefined
+  }), renderIcon(), !isBottomImage && renderImage(), /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+    className: cn('title'),
     as: "h3",
-    className: cn('title')
-  }, typeof title === 'string' ? (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig) : title), !!text && /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('text')
-  }, typeof text === 'string' ? (0, _uiHelpers.convert)(text, _uiHelpers.textConvertConfig) : text), renderBtnsWrapper())));
+    align: title.align
+  }, title.text), renderContent(), renderFooter());
 };
 
 Card.propTypes = {
   dataAttrs: _propTypes["default"].shape({
     root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
-    link: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
-    button: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+    icon: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    imgBox: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    button: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    extraButton: _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
+  view: _propTypes["default"].oneOf(['shadow', 'background']),
+  link: _propTypes["default"].shape({
+    href: _propTypes["default"].string,
+    target: _propTypes["default"].oneOf(['_self', '_blank', '_parent', '_top'])
+  }),
+  image: _propTypes["default"].shape({
+    src: _propTypes["default"].string.isRequired,
+    alt: _propTypes["default"].string,
+    position: _propTypes["default"].oneOf(['top', 'bottom'])
+  }),
+  icon: _propTypes["default"].node,
+  title: _propTypes["default"].shape({
+    text: _propTypes["default"].string.isRequired,
+    align: _propTypes["default"].oneOf(['left', 'center'])
+  }).isRequired,
+  textsList: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    title: _propTypes["default"].string,
+    desc: _propTypes["default"].string.isRequired
+  }).isRequired),
+  featuresList: _propTypes["default"].shape({
+    desc: _propTypes["default"].string,
+    items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+      title: _propTypes["default"].string.isRequired,
+      value: _propTypes["default"].string.isRequired
+    }).isRequired).isRequired
+  }),
+  iconsList: _propTypes["default"].shape({
+    desc: _propTypes["default"].string,
+    items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+      icon: _propTypes["default"].node.isRequired,
+      text: _propTypes["default"].string.isRequired
+    }).isRequired).isRequired
+  }),
+  price: _propTypes["default"].shape({
+    oldValue: _propTypes["default"].string,
+    value: _propTypes["default"].string.isRequired,
+    period: _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,
-  imageAlt: _propTypes["default"].string,
-  svgSrc: _propTypes["default"].node,
-  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,
-    target: _propTypes["default"].oneOf(Object.values(Target)),
-    download: _propTypes["default"].bool,
-    rel: _propTypes["default"].string,
+    target: _propTypes["default"].oneOf(['_self', '_blank', '_parent', '_top']),
+    isCentered: _propTypes["default"].bool,
     onClick: _propTypes["default"].func
   }),
-  link: _propTypes["default"].shape({
+  extraButton: _propTypes["default"].shape({
     title: _propTypes["default"].string.isRequired,
     href: _propTypes["default"].string,
-    target: _propTypes["default"].oneOf(Object.values(Target)),
-    download: _propTypes["default"].bool,
-    rel: _propTypes["default"].string
+    target: _propTypes["default"].oneOf(['_self', '_blank', '_parent', '_top']),
+    isCentered: _propTypes["default"].bool,
+    onClick: _propTypes["default"].func
   }),
-  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))
+  onClick: _propTypes["default"].func
 };
 var _default = Card;
 exports["default"] = _default;

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

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+declare type Target = '_self' | '_blank' | '_parent' | '_top';
+export declare type Link = {
+    /** Ссылка */
+    href?: string;
+    /** Target свойство ссылки */
+    target?: Target;
+};
+export declare type Image = {
+    /** Ссылка на изображение */
+    src: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+    /** Позиция изображения */
+    position?: 'top' | 'bottom';
+};
+export declare type Title = {
+    /** Текст */
+    text: string;
+    /** Выравнивание */
+    align?: 'left' | 'center';
+};
+export declare type TextsList = {
+    /** Заголовок */
+    title?: string;
+    /** Описание */
+    desc: string;
+}[];
+export declare type FeaturesList = {
+    /** Список */
+    items: {
+        /** Заголовок */
+        title: string;
+        /** Значение */
+        value: string;
+    }[];
+    /** Описание */
+    desc?: string;
+};
+export declare type IconsList = {
+    /** Список */
+    items: {
+        /** Иконка */
+        icon: React.ReactNode;
+        /** Текст */
+        text: string;
+    }[];
+    /** Описание */
+    desc?: string;
+};
+export declare type Price = {
+    /** Старая цена */
+    oldValue?: string;
+    /** Текущая цена */
+    value: string;
+    /** Период */
+    period?: string;
+};
+export declare type ButtonType = {
+    /** Название */
+    title: string;
+    /** Ссылка */
+    href?: string;
+    /** Target свойство кнопки */
+    target?: Target;
+    /** Центрировать кнопку */
+    isCentered?: boolean;
+    /** Обработчик клика по кнопке */
+    onClick?: () => void;
+};
+export {};

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -1,16 +1,13 @@
 import * as React from 'react';
 import { ICard } from '../Card/Card';
 interface ICardsBoxProps {
-    /** Выравнивание всех колонок компонента Grid по горизонтали */
-    gridHAlign?: 'left' | 'right' | 'center' | 'between' | 'around';
-    /** Ссылка на корневой элемент */
-    rootRef?: React.Ref<HTMLDivElement>;
+    /** Выводить по две колонки в ряду для 2 или 4 карточек */
+    renderTwoColumnsInRow?: boolean;
     /** Дата атрибуты для корневого элемента */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
+        column?: Record<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<ICardsBoxProps>;