@megafon/ui-shared 2.0.0-beta.24 → 2.0.0-beta.240

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

@@ -0,0 +1,80 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-beta-picture-with-description {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
+}
+.mfui-beta-picture-with-description__title {
+  margin-bottom: 24px;
+}
+.mfui-beta-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 {
+    margin: 0 auto 32px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-beta-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 {
+    -webkit-box-ordinal-group: 1;
+        -ms-flex-order: 0;
+            order: 0;
+    margin-right: 20px;
+  }
+}
+.mfui-beta-picture-with-description__img {
+  width: 100%;
+  max-width: 550px;
+  height: 100%;
+}
+.mfui-beta-picture-with-description__content :first-child {
+  margin-top: 0 !important;
+}
+.mfui-beta-picture-with-description__content :last-child {
+  margin-bottom: 0 !important;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-beta-picture-with-description__articles {
+    -webkit-box-ordinal-group: 2;
+        -ms-flex-order: 1;
+            order: 1;
+    width: 50%;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-beta-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 {
+    margin-right: 20px;
+  }
+}

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import './PictureWithDescription.less';
+export declare const pictureAlignTypes: {
+    readonly LEFT: "left";
+    readonly RIGHT: "right";
+};
+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

@@ -0,0 +1,81 @@
+"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.pictureAlignTypes = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _uiCore = require("@megafon/ui-core");
+
+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 pictureAlignTypes = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};
+exports.pictureAlignTypes = pictureAlignTypes;
+var cn = (0, _uiHelpers.cnCreate)('mfui-beta-picture-with-description');
+
+var PictureWithDescription = function PictureWithDescription(_ref) {
+  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, classes.root]),
+    ref: rootRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('picture', {
+      align: pictureAlign
+    })
+  }, /*#__PURE__*/React.createElement("img", {
+    className: cn('img'),
+    src: pictureUrl,
+    alt: ""
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('articles', {
+      align: pictureAlign,
+      'text-top-align': isTextTopAlign
+    })
+  }, !!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]),
+  isTextTopAlign: _propTypes["default"].bool
+};
+var _default = PictureWithDescription;
+exports["default"] = _default;

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

@@ -0,0 +1,125 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-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;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-beta-property__wrapper {
+    padding: 26px 0;
+  }
+}
+.mfui-beta-property_border-bottom .mfui-beta-property__wrapper {
+  border-bottom: 1px solid #D8D8D8;
+}
+.mfui-beta-property__content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-beta-property__item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-beta-property__icon {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin-right: 9px;
+  margin-left: 1px;
+  overflow: hidden;
+  vertical-align: bottom;
+}
+.mfui-beta-property__badge {
+  padding: 2px 8px;
+  border-radius: 2px;
+  color: #FFFFFF;
+  font-size: 12px;
+  background: #FFA717;
+}
+.mfui-beta-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 {
+    padding-right: 77px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-property__inner {
+    padding-right: 8px;
+  }
+}
+.mfui-beta-property__items-wrapper {
+  width: 100%;
+}
+.mfui-beta-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-beta-property__value-wrapper {
+    width: auto;
+    padding-left: 10px;
+  }
+}
+.mfui-beta-property__value-wrapper_merged {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-left: 1px solid #D8D8D8;
+}
+.mfui-beta-property__desc {
+  margin-top: 8px;
+}
+.mfui-beta-property__item + .mfui-beta-property__item {
+  margin-top: 16px;
+}
+.mfui-beta-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-beta-property__value {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-property__value {
+    font-size: 15px;
+    line-height: 24px;
+    font-weight: 500;
+  }
+}

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

@@ -0,0 +1,33 @@
+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;
+    /** Растягивание компонента на всю доступную ширину */
+    fullWidth?: boolean;
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        title?: string;
+        openedDescription?: string;
+        toggleDescription?: string;
+    };
+}
+declare const Property: React.FC<IProperty>;
+export default Property;

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

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+require("core-js/modules/es.symbol");
+
+require("core-js/modules/es.symbol.description");
+
+require("core-js/modules/es.array.map");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _PropertyDescription = _interopRequireDefault(require("./PropertyDescription"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-beta-property');
+
+var Property = function Property(_ref) {
+  var rootRef = _ref.rootRef,
+      items = _ref.items,
+      className = _ref.className,
+      _ref$badge = _ref.badge,
+      badge = _ref$badge === void 0 ? '' : _ref$badge,
+      icon = _ref.icon,
+      _ref$borderBottom = _ref.borderBottom,
+      borderBottom = _ref$borderBottom === void 0 ? false : _ref$borderBottom,
+      _ref$mergedValue = _ref.mergedValue,
+      mergedValue = _ref$mergedValue === void 0 ? '' : _ref$mergedValue,
+      _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["default"].createElement(_uiCore.Header, {
+        as: 'h5',
+        key: i,
+        className: classes.title
+      }, icon && i === 0 && /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('icon')
+      }, icon), titleItem);
+    });
+  }, []);
+
+  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["default"].createElement(_PropertyDescription["default"], {
+        value: value,
+        isCollapsible: isCollapsible,
+        classes: {
+          open: classes.openedDescription,
+          toggle: 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]),
+    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)), /*#__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["default"].createElement("div", {
+      className: cn('inner')
+    }, 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"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
+    description: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+      value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].node)]).isRequired,
+      isCollapsible: _propTypes["default"].bool
+    })),
+    value: _propTypes["default"].string
+  }).isRequired).isRequired,
+  className: _propTypes["default"].string,
+  badge: _propTypes["default"].string,
+  borderBottom: _propTypes["default"].bool,
+  mergedValue: _propTypes["default"].string,
+  icon: _propTypes["default"].node,
+  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

@@ -0,0 +1,17 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-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 {
+  margin-top: 8px;
+}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import './PropertyDescription.less';
+import { Desc } from './types';
+declare const PropertyDescription: React.FC<Desc>;
+export default PropertyDescription;

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

@@ -0,0 +1,71 @@
+"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;
+
+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");
+
+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, _uiHelpers.cnCreate)('mfui-beta-property-description');
+
+var PropertyDescription = function PropertyDescription(_ref) {
+  var value = _ref.value,
+      _ref$isCollapsible = _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),
+      isOpened = _React$useState2[0],
+      setIsOpened = _React$useState2[1];
+
+  var handleClickDesc = React.useCallback(function () {
+    return setIsOpened(!isOpened);
+  }, [isOpened]);
+
+  if (isCollapsible) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn([isOpened ? classes.open : undefined])
+    }, /*#__PURE__*/React.createElement("span", {
+      className: cn('collapse', classes.toggle),
+      onClick: handleClickDesc
+    }, isOpened ? 'Скрыть' : 'Подробнее'), /*#__PURE__*/React.createElement(_uiCore.Collapse, {
+      className: cn('content'),
+      classNameContainer: cn('content-inner'),
+      isOpened: isOpened
+    }, value));
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, value);
+};
+
+PropertyDescription.propTypes = {
+  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

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

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

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

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

@@ -0,0 +1,41 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-steps {
+  width: 66%;
+  margin-right: auto;
+  margin-left: auto;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-beta-steps {
+    width: 49%;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-steps {
+    width: 100%;
+  }
+}
+.mfui-beta-steps__title {
+  margin-bottom: 40px;
+}
+.mfui-beta-steps__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.mfui-beta-steps__item {
+  margin-bottom: 48px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-steps__item {
+    margin-bottom: 24px;
+  }
+}
+.mfui-beta-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;