@megafon/ui-shared 2.0.0-beta.98 → 2.1.0

package/dist/lib/components/ButtonBanner/ButtonBanner.js

@@ -0,0 +1,133 @@
+"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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ImageScaling = exports.ButtonTarget = exports.ButtonColor = void 0;
+
+require("core-js/modules/es.object.values");
+
+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 = _interopRequireWildcard(require("prop-types"));
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var ButtonColor = {
+  GREEN: 'green',
+  PURPLE: 'purple'
+};
+exports.ButtonColor = ButtonColor;
+var ButtonTarget = {
+  SELF: '_self',
+  BLANK: '_blank'
+};
+exports.ButtonTarget = ButtonTarget;
+var ImageScaling = {
+  COVER: 'cover',
+  CONTAIN: 'contain'
+};
+exports.ImageScaling = ImageScaling;
+
+var getMediaStyle = function getMediaStyle(imageUrl) {
+  return imageUrl ? {
+    backgroundImage: "url(".concat(imageUrl, ")")
+  } : undefined;
+};
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-button-banner');
+
+var ButtonBanner = function ButtonBanner(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      rootRef = _ref.rootRef,
+      title = _ref.title,
+      text = _ref.text,
+      _ref$imageUrl = _ref.imageUrl,
+      imageUrl = _ref$imageUrl === void 0 ? '' : _ref$imageUrl,
+      buttonText = _ref.buttonText,
+      buttonUrl = _ref.buttonUrl,
+      buttonDownload = _ref.buttonDownload,
+      _ref$buttonTarget = _ref.buttonTarget,
+      buttonTarget = _ref$buttonTarget === void 0 ? '_self' : _ref$buttonTarget,
+      _ref$buttonColor = _ref.buttonColor,
+      buttonColor = _ref$buttonColor === void 0 ? 'green' : _ref$buttonColor,
+      _ref$imageScaling = _ref.imageScaling,
+      imageScaling = _ref$imageScaling === void 0 ? 'cover' : _ref$imageScaling,
+      onButtonClick = _ref.onButtonClick;
+
+  var buttonElem = /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+    className: cn('button', [classes.button]),
+    href: buttonUrl,
+    target: buttonTarget,
+    theme: buttonColor,
+    onClick: onButtonClick,
+    download: buttonDownload
+  }, buttonText);
+
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
+    className: cn({
+      image: !!imageUrl,
+      scaling: imageScaling
+    }, [className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, {
+    guttersLeft: "medium"
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
+    all: "6",
+    mobile: "12",
+    leftOffsetTablet: "1",
+    leftOffsetDesktop: "1",
+    leftOffsetWide: "1"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+    className: cn('header'),
+    as: "h2"
+  }, title), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('text')
+  }, text), !!imageUrl && buttonElem)), /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
+    all: "5",
+    mobile: "12"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('media'),
+    style: getMediaStyle(imageUrl)
+  }, !imageUrl && buttonElem))));
+};
+
+ButtonBanner.propTypes = {
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    button: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  title: PropTypes.string.isRequired,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  imageUrl: PropTypes.string,
+  buttonText: PropTypes.string.isRequired,
+  buttonUrl: PropTypes.string,
+  buttonDownload: PropTypes.bool,
+  buttonTarget: PropTypes.oneOf(Object.values(ButtonTarget)),
+  buttonColor: PropTypes.oneOf(Object.values(ButtonColor)),
+  onButtonClick: PropTypes.func
+};
+var _default = ButtonBanner;
+exports["default"] = _default;

package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.css

@@ -5,15 +5,15 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-button-link-box {
+.mfui-button-link-box {
   font-family: inherit;
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 }
-.mfui-beta-button-link-box__row:not(:last-child) {
+.mfui-button-link-box__row:not(:last-child) {
   margin-bottom: 32px;
 }
-.mfui-beta-button-link-box_h-align_center {
+.mfui-button-link-box_h-align_center {
   text-align: center;
 }

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

@@ -1,18 +1,38 @@
-import * as React from 'react';
+import React, { Ref } from 'react';
 import './ButtonLinkBox.less';
 export interface IButtonLinkBoxProps {
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        link?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement>;
     /** Заголовок кнопки */
     buttonTitle?: string;
     /** Ссылка кнопки */
     buttonUrl?: string;
+    /** Добавляет атрибут download для тега <a> компонента Button */
+    buttonDownload?: boolean;
     /** Цвет кнопки */
     buttonColor?: 'green' | 'purple';
+    /** Target свойство кнопки */
+    buttonTarget?: '_self' | '_blank' | '_parent' | '_top';
     /** Заголовок ссылки */
     linkTitle?: string;
-    /** Адрес ссылки */
+    /** Добавляет атрибут download для тега <a> компонента Button */
     linkUrl?: string;
+    /** Target свойство ссылки */
+    linkTarget?: '_self' | '_blank' | '_parent' | '_top';
+    /** Добавляет атрибут download к свойству тега <a> */
+    linkDownload?: boolean;
     /** Горизонтальное выравнивание */
     hAlign?: 'center' | 'left';
     /** Обработчик клика по кнопке */

package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.js

@@ -7,55 +7,89 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var React = _interopRequireWildcard(require("react"));
+require("core-js/modules/es.string.link");
 
-var PropTypes = _interopRequireWildcard(require("prop-types"));
+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 = _interopRequireWildcard(require("prop-types"));
+
 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 cn = (0, _uiCore.cnCreate)('mfui-beta-button-link-box');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-button-link-box');
 
 var ButtonLinkBox = function ButtonLinkBox(_ref) {
-  var buttonTitle = _ref.buttonTitle,
+  var dataAttrs = _ref.dataAttrs,
+      rootRef = _ref.rootRef,
+      buttonTitle = _ref.buttonTitle,
       buttonUrl = _ref.buttonUrl,
+      buttonDownload = _ref.buttonDownload,
       _ref$buttonColor = _ref.buttonColor,
       buttonColor = _ref$buttonColor === void 0 ? 'green' : _ref$buttonColor,
       linkTitle = _ref.linkTitle,
       linkUrl = _ref.linkUrl,
+      linkDownload = _ref.linkDownload,
       hAlign = _ref.hAlign,
       className = _ref.className,
+      buttonTarget = _ref.buttonTarget,
+      linkTarget = _ref.linkTarget,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
       onButtonClick = _ref.onButtonClick,
       onLinkClick = _ref.onLinkClick;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
     className: cn({
       'h-align': hAlign
-    }, className)
-  }, buttonTitle && /*#__PURE__*/React.createElement("div", {
+    }, [className, classes.root]),
+    ref: rootRef
+  }), buttonTitle && /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('row')
-  }, /*#__PURE__*/React.createElement(_uiCore.Button, {
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+    className: classes.button,
     href: buttonUrl,
     theme: buttonColor,
-    onClick: onButtonClick
-  }, buttonTitle)), linkTitle && /*#__PURE__*/React.createElement("div", {
+    onClick: onButtonClick,
+    target: buttonTarget,
+    download: buttonDownload
+  }, buttonTitle)), linkTitle && /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('row')
-  }, /*#__PURE__*/React.createElement(_uiCore.TextLink, {
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
+    className: classes.link,
     href: linkUrl,
+    download: linkDownload,
     underlineVisibility: "always",
+    target: linkTarget,
     onClick: onLinkClick
   }, linkTitle)));
 };
 
 ButtonLinkBox.propTypes = {
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
   className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    button: PropTypes.string,
+    link: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   buttonTitle: PropTypes.string,
   buttonUrl: PropTypes.string,
+  buttonDownload: PropTypes.bool,
   buttonColor: PropTypes.oneOf(['green', 'purple']),
   linkTitle: PropTypes.string,
   linkUrl: PropTypes.string,
+  linkDownload: PropTypes.bool,
   hAlign: PropTypes.oneOf(['center']),
   onButtonClick: PropTypes.func,
   onLinkClick: PropTypes.func

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

@@ -5,99 +5,126 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-card {
+.mfui-card {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   border-radius: 8px;
+  overflow: hidden;
+  background-color: #FFFFFF;
   -webkit-box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
           box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
-  background-color: #FFFFFF;
-  overflow: hidden;
 }
-.mfui-beta-card_href * {
-  text-decoration: none;
-}
-.mfui-beta-card_href:hover {
-  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
-          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
-}
-.mfui-beta-card__inner {
+.mfui-card__inner {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-flex: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
+  -ms-flex-negative: 1;
+      flex-shrink: 1;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
   padding: 32px 20px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-card__inner {
+  .mfui-card__inner {
     padding: 24px 16px;
   }
 }
-.mfui-beta-card__title {
-  margin-bottom: 12px;
+.mfui-card__text {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+  margin-top: 12px;
+  color: #333333;
 }
-.mfui-beta-card__btns-wrapper {
+.mfui-card__btns-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
-  -webkit-box-pack: space-evenly;
-      -ms-flex-pack: space-evenly;
-          justify-content: space-evenly;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  margin-top: 12px;
+  -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
+  margin-top: auto;
+  padding-top: 12px;
 }
-.mfui-beta-card__btns-wrapper_left-align {
+.mfui-card__btns-wrapper_left-align {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
 }
-.mfui-beta-card__fake-link {
+.mfui-card__fake-link {
   color: #34AAF2;
 }
-.mfui-beta-card__button,
-.mfui-beta-card__link,
-.mfui-beta-card__fake-link {
+.mfui-card__button,
+.mfui-card__link,
+.mfui-card__fake-link {
   margin: 12px 10px;
 }
-.mfui-beta-card__pic-wrapper {
-  margin-bottom: 32px;
+.mfui-card__svg-wrapper {
+  margin-bottom: 24px;
 }
-@media screen and (max-width: 767px) {
-  .mfui-beta-card__pic-wrapper {
-    margin-bottom: 24px;
-  }
-}
-.mfui-beta-card__pic-wrapper .mfui-beta-card__img {
-  max-width: 100%;
-}
-.mfui-beta-card__pic-wrapper svg {
+.mfui-card__svg-wrapper svg {
   width: 40px;
   height: 40px;
 }
-.mfui-beta-card__pic-wrapper_img {
+.mfui-card__pic-wrapper .mfui-card__img {
+  max-width: 100%;
+}
+.mfui-card__pic-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   margin-top: -32px;
-  margin-left: -20px;
   margin-right: -20px;
+  margin-bottom: 32px;
+  margin-left: -20px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-card__pic-wrapper_img {
+  .mfui-card__pic-wrapper {
     margin-top: -24px;
-    margin-left: -16px;
     margin-right: -16px;
+    margin-bottom: 24px;
+    margin-left: -16px;
   }
 }
-.mfui-beta-card__pic-wrapper_object-fit_fill img {
+.mfui-card__pic-wrapper_object-fit_fill img {
   width: 100%;
   height: auto;
 }
-.mfui-beta-card__pic-wrapper_object-fit_contain img {
+.mfui-card__pic-wrapper_object-fit_contain img {
   width: auto;
   height: 100%;
 }
+.mfui-card_href * {
+  text-decoration: none !important;
+}
+.mfui-card_href:hover {
+  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
+}
+.mfui-card_full-height {
+  height: 100%;
+}
+.mfui-card_centered-text .mfui-card__text,
+.mfui-card_centered-text .mfui-card__title {
+  text-align: center;
+}

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

@@ -1,12 +1,21 @@
-import * as React from 'react';
+import React, { Ref } from 'react';
 import './Card.less';
+export declare const Target: {
+    readonly SELF: "_self";
+    readonly BLANK: "_blank";
+};
+declare type TargetType = typeof Target[keyof typeof Target];
 interface IButton {
     title: string;
     href: string;
+    target?: TargetType;
+    download?: boolean;
 }
 interface ILink {
     title: string;
     href?: string;
+    target?: TargetType;
+    download?: boolean;
 }
 export declare const ObjectFit: {
     readonly FILL: "fill";
@@ -14,22 +23,43 @@ export declare const ObjectFit: {
 };
 declare type ObjectFitType = typeof ObjectFit[keyof typeof ObjectFit];
 export interface ICard {
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        link?: string;
+        inner?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement>;
     /** Изображение в карточке */
     imageSrc?: string;
     /** Иконка в карточке */
     svgSrc?: React.ReactNode;
     /** Заголовок карточки */
-    title: string;
+    title: string | React.ReactNode[] | React.ReactNode;
     /** Текст карточки */
-    text: string;
+    text?: string | React.ReactNode[] | React.ReactNode;
     /** Данные для кнопки */
     button?: IButton;
     /** Данные для ссылки */
     link?: ILink;
+    /** Выравнивание текста по центру */
+    isCenteredText?: boolean;
     /** Расположение кнопки/ссылки по левой стороне */
     isLeftHAlign?: boolean;
+    /** Высота корневого элемента 100% */
+    isFullHeight?: boolean;
     /** Ссылка для всей карточки */
     href?: string;
+    /** Target свойство, аналогично свойству 'target' тега 'a' */
+    target?: TargetType;
     /** Режим позиционирования изображения */
     objectFit?: ObjectFitType;
 }