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

package/dist/lib/components/Partners/Partners.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.array.map");
-
-require("core-js/modules/es.array.slice");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,14 +11,18 @@ require("core-js/modules/es.array.map");
 
 require("core-js/modules/es.array.slice");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 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 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; }
@@ -32,20 +32,26 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var _slidesSettings;
 
 var MAX_GRID_ITEMS_LENGTH = 8;
-var slidesSettings = (_slidesSettings = {}, (0, _defineProperty2["default"])(_slidesSettings, _uiCore.breakpoints.mobileSmallStart, {
-  slidesPerView: 'auto',
+var slidesSettings = (_slidesSettings = {}, (0, _defineProperty2["default"])(_slidesSettings, _uiHelpers.breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 2,
   spaceBetween: 16
-}), (0, _defineProperty2["default"])(_slidesSettings, _uiCore.breakpoints.mobileBigStart, {
-  slidesPerView: 'auto',
+}), (0, _defineProperty2["default"])(_slidesSettings, _uiHelpers.breakpoints.MOBILE_MIDDLE_START, {
+  slidesPerView: 3,
   spaceBetween: 20
-}), (0, _defineProperty2["default"])(_slidesSettings, _uiCore.breakpoints.desktopSmallStart, {
+}), (0, _defineProperty2["default"])(_slidesSettings, _uiHelpers.breakpoints.DESKTOP_SMALL_START, {
   slidesPerView: 4,
   spaceBetween: 20
 }), _slidesSettings);
-var cn = (0, _uiCore.cnCreate)('mfui-beta-partners');
+var cn = (0, _uiHelpers.cnCreate)('mfui-partners');
 
 var Partners = function Partners(_ref) {
-  var className = _ref.className,
+  var rootRef = _ref.rootRef,
+      _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var root = _ref$classes.root,
+      itemClass = _ref$classes.itemClass,
+      dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
       items = _ref.items,
       onChange = _ref.onChange,
       onNextClick = _ref.onNextClick,
@@ -56,19 +62,23 @@ var Partners = function Partners(_ref) {
     }
 
     var src = item.src,
-        href = item.href;
+        href = item.href,
+        alt = item.alt;
     return /*#__PURE__*/React.createElement(_uiCore.Tile, {
       className: cn('tile'),
       href: href,
       shadowLevel: "low",
       isInteractive: !!href
     }, /*#__PURE__*/React.createElement("div", {
-      className: cn('tile-inner')
+      className: cn('tile-inner', [itemClass])
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('img-wrapper')
     }, /*#__PURE__*/React.createElement("img", {
       src: src,
+      alt: alt,
       className: cn('tile-img')
-    })));
-  }, []);
+    }))));
+  }, [itemClass]);
   var renderGrid = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(_uiCore.Grid, {
       guttersLeft: "medium",
@@ -80,7 +90,7 @@ var Partners = function Partners(_ref) {
         mobile: "6"
       }, renderItem(item));
     }));
-  }, [items]);
+  }, [items, renderItem]);
   var renderCarousel = React.useCallback(function () {
     var halfItemsLength = Math.ceil(items.length / 2);
     var topRow = items.slice(0, halfItemsLength);
@@ -96,17 +106,27 @@ var Partners = function Partners(_ref) {
         className: cn('slide')
       }, renderItem(item), renderItem(bottomRow[i]));
     }));
-  }, [items]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn([className])
-  }, items.length > MAX_GRID_ITEMS_LENGTH ? renderCarousel() : renderGrid());
+  }, [items, onChange, onNextClick, onPrevClick, renderItem]);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    ref: rootRef,
+    className: cn([root, className])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), items.length > MAX_GRID_ITEMS_LENGTH ? renderCarousel() : renderGrid());
 };
 
 Partners.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    itemClass: PropTypes.string
+  }),
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
   className: PropTypes.string,
   items: PropTypes.arrayOf(PropTypes.shape({
     href: PropTypes.string,
-    src: PropTypes.string.isRequired
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string.isRequired
   }).isRequired).isRequired,
   onChange: PropTypes.func,
   onNextClick: PropTypes.func,

package/dist/lib/components/PictureWithDescription/PictureWithDescription.css

@@ -6,7 +6,7 @@ h5 {
   margin: 0;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-picture-with-description {
+  .mfui-picture-with-description {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -18,48 +18,63 @@ h5 {
             justify-content: center;
   }
 }
-.mfui-beta-picture-with-description__picture {
+.mfui-picture-with-description__title {
+  margin-bottom: 24px;
+}
+.mfui-picture-with-description__picture {
   -ms-flex-item-align: start;
       align-self: flex-start;
   overflow: hidden;
   text-align: center;
 }
 @media screen and (max-width: 1023px) {
-  .mfui-beta-picture-with-description__picture {
+  .mfui-picture-with-description__picture {
     margin: 0 auto 32px;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-picture-with-description__picture {
-    width: 50%;
+  .mfui-picture-with-description__picture {
     -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
             order: 2;
+    width: 50%;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-picture-with-description__picture_align_left {
+  .mfui-picture-with-description__picture_align_left {
     -webkit-box-ordinal-group: 1;
         -ms-flex-order: 0;
             order: 0;
     margin-right: 20px;
   }
 }
-.mfui-beta-picture-with-description__img {
+.mfui-picture-with-description__img {
   width: 100%;
   max-width: 550px;
   height: 100%;
 }
+.mfui-picture-with-description__content :first-child {
+  margin-top: 0 !important;
+}
+.mfui-picture-with-description__content :last-child {
+  margin-bottom: 0 !important;
+}
 @media screen and (min-width: 1024px) {
-  .mfui-beta-picture-with-description__articles {
-    width: 50%;
+  .mfui-picture-with-description__articles {
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
             order: 1;
+    width: 50%;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-picture-with-description__articles_text-top-align {
+    -ms-flex-item-align: start;
+        align-self: flex-start;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-picture-with-description__articles_align_right {
+  .mfui-picture-with-description__articles_align_right {
     margin-right: 20px;
   }
 }

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

@@ -6,10 +6,23 @@ export declare const pictureAlignTypes: {
 };
 declare type PictureAlignTypesType = typeof pictureAlignTypes[keyof typeof pictureAlignTypes];
 export interface IPictureWithDescriptionProps {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        title?: string;
+    };
+    /** Заголовок */
+    title?: string | React.ReactNode | React.ReactNode[];
     /** Url изображения */
     pictureUrl: string;
     /** Расположение изображения */
     pictureAlign?: PictureAlignTypesType;
+    /** Выравнивание текста по верхнему краю */
+    isTextTopAlign?: boolean;
 }
 declare const PictureWithDescription: React.FC<IPictureWithDescriptionProps>;
 export default PictureWithDescription;

package/dist/lib/components/PictureWithDescription/PictureWithDescription.js

@@ -9,10 +9,12 @@ exports["default"] = exports.pictureAlignTypes = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 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; }
@@ -24,15 +26,22 @@ var pictureAlignTypes = {
   RIGHT: 'right'
 };
 exports.pictureAlignTypes = pictureAlignTypes;
-var cn = (0, _uiCore.cnCreate)('mfui-beta-picture-with-description');
+var cn = (0, _uiHelpers.cnCreate)('mfui-picture-with-description');
 
 var PictureWithDescription = function PictureWithDescription(_ref) {
-  var pictureUrl = _ref.pictureUrl,
+  var rootRef = _ref.rootRef,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      title = _ref.title,
+      pictureUrl = _ref.pictureUrl,
       _ref$pictureAlign = _ref.pictureAlign,
       pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
+      isTextTopAlign = _ref.isTextTopAlign,
       children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: cn()
+    className: cn([className, classes.root]),
+    ref: rootRef
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('picture', {
       align: pictureAlign
@@ -43,14 +52,30 @@ var PictureWithDescription = function PictureWithDescription(_ref) {
     alt: ""
   })), /*#__PURE__*/React.createElement("div", {
     className: cn('articles', {
-      align: pictureAlign
+      align: pictureAlign,
+      'text-top-align': isTextTopAlign
     })
-  }, children));
+  }, !!title && /*#__PURE__*/React.createElement(_uiCore.Header, {
+    className: cn('title', [classes.title]),
+    as: "h2"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, children)));
 };
 
 PictureWithDescription.propTypes = {
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])]),
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    root: _propTypes["default"].string,
+    title: _propTypes["default"].string
+  }),
+  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
   pictureUrl: _propTypes["default"].string.isRequired,
-  pictureAlign: _propTypes["default"].oneOf([pictureAlignTypes.LEFT, pictureAlignTypes.RIGHT])
+  pictureAlign: _propTypes["default"].oneOf([pictureAlignTypes.LEFT, pictureAlignTypes.RIGHT]),
+  isTextTopAlign: _propTypes["default"].bool
 };
 var _default = PictureWithDescription;
 exports["default"] = _default;

package/dist/lib/components/Property/Property.css

@@ -5,113 +5,121 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-property {
-  width: 100%;
-  padding: 26px 24px;
+.mfui-property__wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  padding: 24px 0;
   border-top: 1px solid #D8D8D8;
-  position: relative;
-}
-.mfui-beta-property_border-bottom {
-  border-bottom: 1px solid #D8D8D8;
 }
-@media screen and (max-width: 767px) {
-  .mfui-beta-property {
-    padding: 24px 0;
+@media screen and (min-width: 1280px) {
+  .mfui-property__wrapper {
+    padding: 26px 0;
   }
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-property {
-    padding: 24px;
-  }
+.mfui-property_border-bottom .mfui-property__wrapper {
+  border-bottom: 1px solid #D8D8D8;
 }
-.mfui-beta-property__item {
+.mfui-property__content {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: baseline;
-      -ms-flex-align: baseline;
-          align-items: baseline;
 }
-.mfui-beta-property__item_multirow:first-child {
-  margin-bottom: 10px;
+.mfui-property__item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
 }
-.mfui-beta-property__icon {
+.mfui-property__icon {
+  display: inline-block;
   width: 24px;
   height: 24px;
-  overflow: hidden;
   margin-right: 9px;
   margin-left: 1px;
-  display: inline-block;
+  overflow: hidden;
   vertical-align: bottom;
 }
-.mfui-beta-property__badge {
-  border-radius: 2px;
-  font-size: 12px;
+.mfui-property__badge {
   padding: 2px 8px;
+  border-radius: 2px;
   color: #FFFFFF;
+  font-size: 12px;
   background: #FFA717;
 }
-.mfui-beta-property__inner {
-  width: 431px;
-  margin-right: 115px;
-}
-@media screen and (max-width: 767px) {
-  .mfui-beta-property__inner {
-    width: 165px;
-    margin-right: 16px;
-  }
+.mfui-property__inner {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  padding-right: 20px;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-property__inner {
-    width: 360px;
-    margin-right: 135px;
+  .mfui-property__inner {
+    padding-right: 77px;
   }
 }
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-property__inner {
-    width: 415px;
-    margin-right: 96px;
+@media screen and (max-width: 767px) {
+  .mfui-property__inner {
+    padding-right: 8px;
   }
 }
-.mfui-beta-property__merged-value {
-  height: calc(100% - 26px * 2);
+.mfui-property__items-wrapper {
+  width: 100%;
+}
+.mfui-property__value-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  width: 35%;
+}
+@media screen and (max-width: 479px) {
+  .mfui-property__value-wrapper {
+    width: auto;
+    padding-left: 10px;
+  }
+}
+.mfui-property__value-wrapper_merged {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  position: absolute;
-  left: calc(431px + 24px + 20px);
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
   border-left: 1px solid #D8D8D8;
-  padding-left: 94px;
 }
-@media screen and (max-width: 767px) {
-  .mfui-beta-property__merged-value {
-    height: calc(100% - 24px * 2);
-    left: calc(165px + 0 + 8px);
-    padding-left: 7px;
-  }
+.mfui-property__desc {
+  margin-top: 8px;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-property__merged-value {
-    height: calc(100% - 24px * 2);
-    left: calc(360px + 24px + 77px);
-    padding-left: 58px;
-  }
+.mfui-property__item + .mfui-property__item {
+  margin-top: 16px;
 }
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-property__merged-value {
-    left: calc(415px + 24px + 20px);
-    padding-left: 75px;
+.mfui-property__value {
+  max-width: 234px;
+  white-space: pre-line;
+  text-align: right;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-property__value {
+    font-size: 20px;
+    line-height: 28px;
   }
 }
-.mfui-beta-property__desc {
-  margin-top: 8px;
-}
-.mfui-beta-property__item ~ .mfui-beta-property__item {
-  margin-top: 16px;
+@media screen and (max-width: 767px) {
+  .mfui-property__value {
+    font-size: 15px;
+    line-height: 24px;
+    font-weight: 500;
+  }
 }

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

@@ -1,14 +1,33 @@
-import * as React from 'react';
+import React, { Ref } from 'react';
 import './Property.less';
 import { Item } from './types';
 export interface IProperty {
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Массив с данными для строки */
     items: Item[];
+    /** Дополнительный класс для основного контейнера */
     className?: string;
+    /** Текст для бейджа */
     badge?: string;
+    /** Наличие нижней границы */
     borderBottom?: boolean;
+    /** Единое значение для всей строки */
     mergedValue?: string;
+    /** Иконка для строки */
     icon?: React.ReactNode;
-    multirow?: boolean;
+    /** Растягивание компонента на всю доступную ширину */
+    fullWidth?: boolean;
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        title?: string;
+        openedDescription?: string;
+        toggleDescription?: string;
+    };
 }
 declare const Property: React.FC<IProperty>;
 export default Property;