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

package/dist/lib/components/Property/Property.js

@@ -1,13 +1,5 @@
 "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.symbol");
-
-require("core-js/modules/es.symbol.description");
-
-require("core-js/modules/es.array.map");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,24 +11,25 @@ require("core-js/modules/es.symbol.description");
 
 require("core-js/modules/es.array.map");
 
-var React = _interopRequireWildcard(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
 
 var _uiCore = require("@megafon/ui-core");
 
-var _PropertyDescription = _interopRequireDefault(require("./PropertyDescription"));
+var _uiHelpers = require("@megafon/ui-helpers");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+var _PropertyDescription = _interopRequireDefault(require("./PropertyDescription"));
 
-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 cn = (0, _uiCore.cnCreate)('mfui-beta-property');
+var cn = (0, _uiHelpers.cnCreate)('mfui-property');
 
 var Property = function Property(_ref) {
-  var items = _ref.items,
+  var rootRef = _ref.rootRef,
+      items = _ref.items,
       className = _ref.className,
       _ref$badge = _ref.badge,
       badge = _ref$badge === void 0 ? '' : _ref$badge,
@@ -45,58 +38,99 @@ var Property = function Property(_ref) {
       borderBottom = _ref$borderBottom === void 0 ? false : _ref$borderBottom,
       _ref$mergedValue = _ref.mergedValue,
       mergedValue = _ref$mergedValue === void 0 ? '' : _ref$mergedValue,
-      _ref$multirow = _ref.multirow,
-      multirow = _ref$multirow === void 0 ? false : _ref$multirow;
-  var renderTitle = React.useCallback(function (title) {
+      _ref$fullWidth = _ref.fullWidth,
+      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
+
+  var renderTitle = _react["default"].useCallback(function (title) {
     return title && title.map(function (titleItem, i) {
-      return /*#__PURE__*/React.createElement(_uiCore.Header, {
-        as: 'h5',
-        key: i
-      }, icon && i === 0 && /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+        as: "h5",
+        key: i,
+        className: classes.title
+      }, icon && i === 0 && /*#__PURE__*/_react["default"].createElement("div", {
         className: cn('icon')
-      }, icon), (0, _uiCore.convert)(titleItem));
+      }, icon), titleItem);
     });
-  }, []);
-  var renderDescription = React.useCallback(function (description) {
-    return description && description.map(function (descriptionItem, j) {
-      return /*#__PURE__*/React.createElement("div", {
+  }, [classes.title, icon]);
+
+  var renderDescription = _react["default"].useCallback(function (description) {
+    return description && description.map(function (_ref2, j) {
+      var value = _ref2.value,
+          isCollapsible = _ref2.isCollapsible;
+      return /*#__PURE__*/_react["default"].createElement("div", {
         className: cn('desc'),
         key: j
-      }, /*#__PURE__*/React.createElement(_PropertyDescription["default"], descriptionItem));
+      }, /*#__PURE__*/_react["default"].createElement(_PropertyDescription["default"], {
+        value: value,
+        isCollapsible: isCollapsible,
+        classes: {
+          open: classes.openedDescription,
+          toggle: classes.toggleDescription
+        }
+      }));
     });
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  }, [classes.openedDescription, classes.toggleDescription]);
+
+  var getColumnConfig = _react["default"].useCallback(function () {
+    return fullWidth ? {
+      all: '12'
+    } : {
+      wide: '8',
+      desktop: '10',
+      tablet: '12',
+      mobile: '12'
+    };
+  }, [fullWidth]);
+
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     className: cn({
       'border-bottom': borderBottom
-    }, [className])
-  }, badge && /*#__PURE__*/React.createElement("span", {
+    }, [className]),
+    ref: rootRef
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, null, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, getColumnConfig(), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('wrapper')
+  }, badge && /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('badge-wrapper')
+  }, /*#__PURE__*/_react["default"].createElement("span", {
     className: cn('badge')
-  }, badge), items.map(function (_ref2, i) {
-    var title = _ref2.title,
-        value = _ref2.value,
-        description = _ref2.description;
-    return /*#__PURE__*/React.createElement("div", {
-      className: cn('item', {
-        multirow: multirow
-      }),
+  }, badge)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('items-wrapper')
+  }, items.map(function (_ref3, i) {
+    var title = _ref3.title,
+        value = _ref3.value,
+        description = _ref3.description;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('item'),
       key: i
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('inner')
-    }, renderTitle(title), renderDescription(description)), value && !mergedValue && /*#__PURE__*/React.createElement(_uiCore.Header, {
-      as: "h3"
-    }, value), mergedValue && i === 0 && /*#__PURE__*/React.createElement("div", {
-      className: cn('merged-value')
-    }, /*#__PURE__*/React.createElement(_uiCore.Header, {
-      as: "h3"
-    }, mergedValue)));
-  }));
+    }, renderTitle(title), renderDescription(description)), !mergedValue && /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('value-wrapper')
+    }, value && /*#__PURE__*/_react["default"].createElement("span", {
+      className: cn('value')
+    }, value)));
+  })), mergedValue && /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('value-wrapper', {
+      merged: true
+    })
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+    as: "h3"
+  }, mergedValue)))))));
 };
 
 Property.propTypes = {
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])]),
   items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    title: _propTypes["default"].arrayOf(_propTypes["default"].string.isRequired),
+    title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
     description: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-      value: _propTypes["default"].arrayOf(_propTypes["default"].string).isRequired,
+      value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].node)]).isRequired,
       isCollapsible: _propTypes["default"].bool
     })),
     value: _propTypes["default"].string
@@ -106,7 +140,13 @@ Property.propTypes = {
   borderBottom: _propTypes["default"].bool,
   mergedValue: _propTypes["default"].string,
   icon: _propTypes["default"].node,
-  multirow: _propTypes["default"].bool
+  fullWidth: _propTypes["default"].bool,
+  dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+  classes: _propTypes["default"].shape({
+    title: _propTypes["default"].string,
+    openedDescription: _propTypes["default"].string,
+    toggleDescription: _propTypes["default"].string
+  })
 };
 var _default = Property;
 exports["default"] = _default;

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

@@ -5,13 +5,13 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-property-description__collapse {
-  font-size: 12px;
+.mfui-property-description__collapse {
   color: #34AAF2;
+  font-size: 12px;
   -webkit-text-decoration: underline dashed #34AAF2;
           text-decoration: underline dashed #34AAF2;
   cursor: pointer;
 }
-.mfui-beta-property-description__content-inner {
+.mfui-property-description__content-inner {
   margin-top: 8px;
 }

package/dist/lib/components/Property/PropertyDescription.js

@@ -2,35 +2,35 @@
 
 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
 });
 exports["default"] = void 0;
 
-require("core-js/modules/es.array.map");
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 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 _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 cn = (0, _uiCore.cnCreate)('mfui-beta-property-description');
+var cn = (0, _uiHelpers.cnCreate)('mfui-property-description');
 
 var PropertyDescription = function PropertyDescription(_ref) {
   var value = _ref.value,
       _ref$isCollapsible = _ref.isCollapsible,
-      isCollapsible = _ref$isCollapsible === void 0 ? false : _ref$isCollapsible;
+      isCollapsible = _ref$isCollapsible === void 0 ? false : _ref$isCollapsible,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes;
 
   var _React$useState = React.useState(false),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -40,36 +40,32 @@ var PropertyDescription = function PropertyDescription(_ref) {
   var handleClickDesc = React.useCallback(function () {
     return setIsOpened(!isOpened);
   }, [isOpened]);
-  var renderDescriptionItems = React.useCallback(function () {
-    return value.map(function (valueItem, i) {
-      return /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
-        hasMargin: false,
-        key: i
-      }, (0, _uiCore.convert)(valueItem));
-    });
-  }, [value]);
 
   if (isCollapsible) {
     return /*#__PURE__*/React.createElement("div", {
-      className: cn()
+      className: cn([isOpened ? classes.open : undefined])
     }, /*#__PURE__*/React.createElement("span", {
-      className: cn('collapse'),
+      className: cn('collapse', classes.toggle),
       onClick: handleClickDesc
     }, isOpened ? 'Скрыть' : 'Подробнее'), /*#__PURE__*/React.createElement(_uiCore.Collapse, {
       className: cn('content'),
       classNameContainer: cn('content-inner'),
       isOpened: isOpened
-    }, renderDescriptionItems()));
-  } else {
-    return /*#__PURE__*/React.createElement("div", {
-      className: cn()
-    }, renderDescriptionItems());
+    }, value));
   }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, value);
 };
 
 PropertyDescription.propTypes = {
-  value: _propTypes["default"].arrayOf(_propTypes["default"].string.isRequired).isRequired,
-  isCollapsible: _propTypes["default"].bool
+  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].node)]).isRequired,
+  isCollapsible: _propTypes["default"].bool,
+  classes: _propTypes["default"].shape({
+    open: _propTypes["default"].string,
+    toggle: _propTypes["default"].string
+  })
 };
 var _default = PropertyDescription;
 exports["default"] = _default;

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

@@ -1,9 +1,14 @@
+import * as React from 'react';
 export declare type Desc = {
-    value: string[];
+    value: string | React.ReactNode[];
     isCollapsible?: boolean;
+    classes?: {
+        toggle?: string;
+        open?: string;
+    };
 };
 export declare type Item = {
-    title?: string[];
+    title?: string[] | React.ReactNode[];
     description?: Desc[];
     value?: string;
 };

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

@@ -0,0 +1,41 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-steps {
+  width: 66%;
+  margin-right: auto;
+  margin-left: auto;
+}
+@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 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.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;
+}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import './Steps.less';
+export interface ISteps {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Заголовок */
+    title: string;
+}
+declare const Steps: React.FC<ISteps>;
+export default Steps;

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

@@ -0,0 +1,55 @@
+"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"] = void 0;
+
+require("core-js/modules/es.array.map");
+
+var React = _interopRequireWildcard(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 cn = (0, _uiHelpers.cnCreate)('mfui-steps');
+
+var Steps = function Steps(_ref) {
+  var title = _ref.title,
+      rootRef = _ref.rootRef,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(),
+    ref: rootRef
+  }, /*#__PURE__*/React.createElement(_uiCore.Header, {
+    as: "h2",
+    hAlign: "center",
+    className: cn('title')
+  }, title), /*#__PURE__*/React.createElement("ul", {
+    className: cn('list')
+  }, React.Children.map(children, function (child) {
+    return /*#__PURE__*/React.createElement("li", {
+      className: cn('item')
+    }, child);
+  })));
+};
+
+Steps.propTypes = {
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])]),
+  title: _propTypes["default"].string.isRequired
+};
+var _default = Steps;
+exports["default"] = _default;

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import './StepsItem.less';
+interface IStepsItem {
+    /** Номер элемента */
+    index: number;
+    /** Текст */
+    text: string | React.ReactNode[];
+}
+declare const StepsItem: React.FC<IStepsItem>;
+export default StepsItem;

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+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 }; }
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-steps-item');
+
+var StepsItem = function StepsItem(_ref) {
+  var index = _ref.index,
+      text = _ref.text;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: cn('step-number')
+  }, index), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('text-wrapper')
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Paragraph, {
+    hasMargin: false
+  }, text)));
+};
+
+StepsItem.propTypes = {
+  index: _propTypes["default"].number.isRequired,
+  text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].node)]).isRequired
+};
+var _default = StepsItem;
+exports["default"] = _default;