@megafon/ui-shared 8.0.5 → 8.1.0

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

@@ -4,147 +4,16 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.testIdPrefix = exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.symbol.description.js");
-require("core-js/modules/es.array.map.js");
+exports["default"] = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _uiCore = require("@megafon/ui-core");
 var _uiHelpers = require("@megafon/ui-helpers");
-var _getColumnConfig = require("../../helpers/getColumnConfig");
-var _PropertyDescription = _interopRequireDefault(require("./PropertyDescription"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var InfoIcon = function InfoIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M10 2c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm0 5c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1zm1 8V9H9v6h2z"
-  }));
-};
-var testIdPrefix = exports.testIdPrefix = 'Property';
 var cn = (0, _uiHelpers.cnCreate)('mfui-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,
-    _ref$badgeType = _ref.badgeType,
-    badgeType = _ref$badgeType === void 0 ? 'popular' : _ref$badgeType,
-    tooltip = _ref.tooltip,
-    icon = _ref.icon,
-    _ref$disableBorderTop = _ref.disableBorderTop,
-    disableBorderTop = _ref$disableBorderTop === void 0 ? false : _ref$disableBorderTop,
-    _ref$borderBottom = _ref.borderBottom,
-    borderBottom = _ref$borderBottom === void 0 ? false : _ref$borderBottom,
-    _ref$borderColor = _ref.borderColor,
-    borderColor = _ref$borderColor === void 0 ? 'default' : _ref$borderColor,
-    _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 tooltipRef = React.useRef(null);
-  var renderTitle = function renderTitle(titles, titleSize, isFirstItem) {
-    return titles === null || titles === void 0 ? void 0 : titles.map(function (titleItem, i) {
-      var isFirstTitle = i === 0;
-      return /*#__PURE__*/React.createElement("div", {
-        key: i,
-        className: cn('title-item', {
-          size: titleSize
-        }, [classes.title]),
-        "data-testid": "".concat(testIdPrefix, "-title-item")
-      }, icon && isFirstTitle && /*#__PURE__*/React.createElement("div", {
-        className: cn('icon')
-      }, icon), titleItem, tooltip && isFirstItem && isFirstTitle && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: cn('tooltip'),
-        ref: tooltipRef
-      }, /*#__PURE__*/React.createElement(InfoIcon, null)), /*#__PURE__*/React.createElement(_uiCore.Tooltip, {
-        className: cn('tooltip-inner'),
-        triggerElement: tooltipRef
-      }, tooltip)));
-    });
-  };
-  var renderDescription = function renderDescription(description) {
-    return description === null || description === void 0 ? void 0 : description.map(function (_ref2, j) {
-      var value = _ref2.value,
-        isCollapsible = _ref2.isCollapsible;
-      return /*#__PURE__*/React.createElement("div", {
-        className: cn('desc', {
-          collapsible: isCollapsible
-        }),
-        key: j
-      }, /*#__PURE__*/React.createElement(_PropertyDescription["default"], {
-        value: value,
-        isCollapsible: isCollapsible,
-        dataAttrs: {
-          moreLink: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink
-        },
-        classes: {
-          open: classes.openedDescription,
-          toggle: classes.toggleDescription
-        }
-      }));
-    });
-  };
-  var renderValue = function renderValue(valueFrameColor, value, valueUnit) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: cn('value-wrapper', {
-        frame: valueFrameColor
-      }),
-      "data-testid": "".concat(testIdPrefix, "-value")
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cn('value')
-    }, typeof value === 'string' ? (0, _uiHelpers.convert)(value, {}) : value), valueUnit && /*#__PURE__*/React.createElement(_uiCore.Caption, {
-      className: cn('value-unit'),
-      hasMargin: false
-    }, (0, _uiHelpers.convert)(valueUnit, {})));
-  };
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
-    className: cn({
-      'border-top': !disableBorderTop,
-      'border-bottom': borderBottom,
-      'border-color': borderColor
-    }, [className]),
-    ref: rootRef
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(_uiCore.Grid, null, /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({}, (0, _getColumnConfig.getColumnConfig)(fullWidth), {
-    dataAttrs: {
-      root: {
-        'data-testid': "".concat(testIdPrefix, "-gridColumn")
-      }
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cn('wrapper')
-  }, items.map(function (_ref3, i) {
-    var title = _ref3.title,
-      value = _ref3.value,
-      description = _ref3.description,
-      _ref3$valueUnit = _ref3.valueUnit,
-      valueUnit = _ref3$valueUnit === void 0 ? '' : _ref3$valueUnit,
-      _ref3$titleSize = _ref3.titleSize,
-      titleSize = _ref3$titleSize === void 0 ? 'default' : _ref3$titleSize,
-      _ref3$valueFrameColor = _ref3.valueFrameColor,
-      valueFrameColor = _ref3$valueFrameColor === void 0 ? 'none' : _ref3$valueFrameColor;
-    var isFirstItem = i === 0;
-    var isRenderBadge = isFirstItem && !!badge;
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: i
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cn('main', {
-        'with-badge': isRenderBadge,
-        'with-out-title': !title
-      })
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cn('title')
-    }, isRenderBadge && /*#__PURE__*/React.createElement(_uiCore.PromoBadge, {
-      className: cn('badge'),
-      type: badgeType
-    }, badge), title ? renderTitle(title, titleSize, isFirstItem) : renderDescription(description)), mergedValue && isFirstItem && renderValue(valueFrameColor, mergedValue, valueUnit), !mergedValue && value && renderValue(valueFrameColor, value, valueUnit)), title && renderDescription(description));
-  })))));
+var Property = function Property(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement(_uiCore.Parameter, props));
 };
 var _default = exports["default"] = Property;

package/dist/lib/components/Stepper/Stepper.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-stepper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;overflow-x:auto}.mfui-stepper::-webkit-scrollbar{height:8px}.mfui-stepper::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:8px}.mfui-stepper_is-horizontal{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import type { IStepperItemProps } from './StepperItem';
+import './Stepper.scss';
+export type StepperItemType = Pick<IStepperItemProps, 'title' | 'text' | 'icon' | 'linkText' | 'linkUrl'>;
+export interface IStepperProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы элементов */
+    classes?: {
+        root?: string;
+        item?: string;
+        itemIconButton?: string;
+        itemTitle?: string;
+        itemText?: string;
+        itemLink?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Индекс активного шага */
+    activeStep?: number;
+    /** Количество шагов */
+    stepCount?: number;
+    /** Шаги */
+    items?: StepperItemType[];
+    /** Направление */
+    isHorizontal?: boolean;
+    /** Цифры вместо галочек */
+    isNumeric?: boolean;
+    /** Отключение кнопок */
+    isDisabled?: boolean;
+    /** Все шаги пройдены */
+    isAllChecked?: boolean;
+    /** Выравнивание */
+    align?: 'center' | 'left';
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        item?: Record<string, string>;
+        itemIconButton?: Record<string, string>;
+        itemTitle?: Record<string, string>;
+        itemText?: Record<string, string>;
+        itemLink?: Record<string, string>;
+    };
+    /** Обработчик события смены шага */
+    onChange?: (index: number) => void;
+}
+declare const Stepper: React.FC<IStepperProps>;
+export default Stepper;

package/dist/lib/components/Stepper/Stepper.js

@@ -0,0 +1,149 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.array.from.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.string.iterator.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _StepperItem = _interopRequireWildcard(require("./StepperItem"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CheckedIcon = function CheckedIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
+  }));
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-stepper');
+var Stepper = function Stepper(_ref) {
+  var className = _ref.className,
+    _ref$classes = _ref.classes,
+    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
+    rootClassName = _ref$classes2.root,
+    itemClassName = _ref$classes2.item,
+    itemIconButtonClassName = _ref$classes2.itemIconButton,
+    itemTitleClassName = _ref$classes2.itemTitle,
+    itemTextClassname = _ref$classes2.itemText,
+    itemLinkClassName = _ref$classes2.itemLink,
+    rootRef = _ref.rootRef,
+    _ref$activeStep = _ref.activeStep,
+    activeStep = _ref$activeStep === void 0 ? 0 : _ref$activeStep,
+    _ref$stepCount = _ref.stepCount,
+    stepCount = _ref$stepCount === void 0 ? 2 : _ref$stepCount,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$isHorizontal = _ref.isHorizontal,
+    isHorizontal = _ref$isHorizontal === void 0 ? true : _ref$isHorizontal,
+    isNumeric = _ref.isNumeric,
+    isDisabled = _ref.isDisabled,
+    isAllChecked = _ref.isAllChecked,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
+    _ref$dataAttrs = _ref.dataAttrs,
+    _ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
+    rootAttrs = _ref$dataAttrs2.root,
+    itemAttrs = _ref$dataAttrs2.item,
+    itemIconButtonAttrs = _ref$dataAttrs2.itemIconButton,
+    itemTitleAttrs = _ref$dataAttrs2.itemTitle,
+    itemTextAttrs = _ref$dataAttrs2.itemText,
+    itemLinkAttrs = _ref$dataAttrs2.itemLink,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {
+      return null;
+    } : _ref$onChange;
+  var _React$useState = React.useState(activeStep),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    currentIndex = _React$useState2[0],
+    setCurrentIndex = _React$useState2[1];
+  var hasCustomItems = !!items.length;
+  var currentItems = hasCustomItems ? items : Array.from({
+    length: stepCount
+  });
+  var defineItemTheme = React.useCallback(function (index) {
+    switch (true) {
+      case isAllChecked:
+      case index < currentIndex:
+        {
+          return _StepperItem.STEPPER_ITEM_THEME_ENUM.CHECKED;
+        }
+      case index === currentIndex:
+        {
+          return _StepperItem.STEPPER_ITEM_THEME_ENUM.ACTIVE;
+        }
+      default:
+        {
+          return _StepperItem.STEPPER_ITEM_THEME_ENUM.DEFAULT;
+        }
+    }
+  }, [currentIndex, isAllChecked]);
+  var handleClickItem = React.useCallback(function (index) {
+    return function () {
+      if (isAllChecked || isDisabled) {
+        return;
+      }
+      setCurrentIndex(index);
+      onChange(index);
+    };
+  }, [isAllChecked, isDisabled, onChange]);
+  React.useEffect(function () {
+    if (activeStep === undefined) {
+      return;
+    }
+    setCurrentIndex(activeStep);
+  }, [activeStep]);
+  var renderIcon = React.useCallback(function (index, theme) {
+    var isChecked = theme === _StepperItem.STEPPER_ITEM_THEME_ENUM.CHECKED;
+    if (isNumeric || !isChecked) {
+      return index + 1;
+    }
+    return /*#__PURE__*/React.createElement(CheckedIcon, null);
+  }, [isNumeric]);
+  var renderItems = React.useMemo(function () {
+    return currentItems.map(function (elem, i) {
+      var item = elem || {};
+      var itemTheme = defineItemTheme(i);
+      var itemIcon = item.icon || renderIcon(i, itemTheme);
+      var hasSeparator = i < currentItems.length - 1;
+      return /*#__PURE__*/React.createElement(_StepperItem["default"], (0, _extends2["default"])({}, item, {
+        className: itemClassName,
+        classes: {
+          iconButton: itemIconButtonClassName,
+          title: itemTitleClassName,
+          text: itemTextClassname,
+          link: itemLinkClassName
+        },
+        dataAttrs: {
+          root: itemAttrs,
+          iconButton: itemIconButtonAttrs,
+          title: itemTitleAttrs,
+          text: itemTextAttrs,
+          link: itemLinkAttrs
+        },
+        key: i,
+        icon: itemIcon,
+        hasSeparator: hasSeparator,
+        isHorizontal: isHorizontal,
+        isDisabled: isDisabled,
+        align: align,
+        theme: itemTheme,
+        onClick: handleClickItem(i)
+      }));
+    });
+  }, [align, currentItems, isDisabled, isHorizontal, itemAttrs, itemIconButtonAttrs, itemIconButtonClassName, itemClassName, itemLinkAttrs, itemLinkClassName, itemTextAttrs, itemTextClassname, itemTitleAttrs, itemTitleClassName, defineItemTheme, handleClickItem, renderIcon]);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(rootAttrs), {
+    className: cn([className, rootClassName], {
+      'is-horizontal': isHorizontal
+    }),
+    ref: rootRef
+  }), renderItems);
+};
+var _default = exports["default"] = Stepper;

package/dist/lib/components/Stepper/StepperItem.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-stepper-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:16px}.mfui-stepper-item_is-horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(i/separator.png) 2 repeat;border-image:url(i/separator.png) 2 repeat;border-left:none;border-radius:100px;border-top:2px solid transparent;height:2px;left:calc(50% + 24px);min-height:2px;position:absolute;top:19px;width:calc(100% - 36px)}@media screen and (min-width:1024px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{left:calc(50% + 32px);width:calc(100% - 52px)}}.mfui-stepper-item_theme_active .mfui-stepper-item__icon-button{background-color:var(--night20)}.mfui-stepper-item_theme_active .mfui-stepper-item__icon{background-color:var(--night)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon-button{background-color:var(--brandGreen20)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon{background-color:var(--brandGreen)}.mfui-stepper-item_theme_checked .mfui-stepper-item__separator{border-color:var(--brandGreen);-o-border-image:none;border-image:none}.mfui-stepper-item_align_left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:auto;right:0}.mfui-stepper-item_align_left .mfui-stepper-item__content,.mfui-stepper-item_align_left .mfui-stepper-item__icon-button-area{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item__icon-button-area{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-stepper-item__icon-button,.mfui-stepper-item__icon-button-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-stepper-item__icon-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:100%;height:40px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:40px}.mfui-stepper-item__icon-button:disabled{cursor:default}.mfui-stepper-item__icon{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;background-color:var(--spbSky2);border-radius:100%;color:var(--stcWhite);font-weight:500;height:24px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:24px}.mfui-stepper-item__icon svg{width:20px;fill:var(--stcWhite)}.mfui-stepper-item__separator{-o-border-image:url(i/separator-vertical.png) 2 repeat;border-image:url(i/separator-vertical.png) 2 repeat;border-left:2px solid transparent;border-top:none;height:100%;min-height:20px;position:static;-webkit-transition:border-color .25s ease-out;transition:border-color .25s ease-out;width:2px}.mfui-stepper-item__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:160px;padding-bottom:20px}.mfui-stepper-item__link{margin-top:13px}

package/dist/lib/components/Stepper/StepperItem.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import './StepperItem.scss';
+export declare enum STEPPER_ITEM_THEME_ENUM {
+    CHECKED = "checked",
+    ACTIVE = "active",
+    DEFAULT = "default"
+}
+export interface IStepperItemProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы элементов */
+    classes?: {
+        iconButton?: string;
+        title?: string;
+        text?: string;
+        link?: string;
+    };
+    /** Тема */
+    theme?: STEPPER_ITEM_THEME_ENUM;
+    /** Заголовок */
+    title?: string;
+    /** Текст */
+    text?: string;
+    /** Текст ссылки */
+    linkText?: string;
+    /** Адрес ссылки */
+    linkUrl?: string;
+    /** Иконка */
+    icon?: string | number | JSX.Element;
+    /** Наличие разделителя */
+    hasSeparator?: boolean;
+    /** Направление */
+    isHorizontal?: boolean;
+    /** Отключение */
+    isDisabled?: boolean;
+    /** Выравнивание */
+    align?: 'center' | 'left';
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        iconButton?: Record<string, string>;
+        title?: Record<string, string>;
+        text?: Record<string, string>;
+        link?: Record<string, string>;
+    };
+    /** Обработчик события клика */
+    onClick?: () => void;
+}
+declare const StepperItem: React.FC<IStepperItemProps>;
+export default StepperItem;

package/dist/lib/components/Stepper/StepperItem.js

@@ -0,0 +1,98 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.STEPPER_ITEM_THEME_ENUM = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.string.link.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiCore = require("@megafon/ui-core");
+var _uiHelpers = require("@megafon/ui-helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var STEPPER_ITEM_THEME_ENUM;
+(function (STEPPER_ITEM_THEME_ENUM) {
+  STEPPER_ITEM_THEME_ENUM["CHECKED"] = "checked";
+  STEPPER_ITEM_THEME_ENUM["ACTIVE"] = "active";
+  STEPPER_ITEM_THEME_ENUM["DEFAULT"] = "default";
+})(STEPPER_ITEM_THEME_ENUM || (exports.STEPPER_ITEM_THEME_ENUM = STEPPER_ITEM_THEME_ENUM = {}));
+var cn = (0, _uiHelpers.cnCreate)('mfui-stepper-item');
+var StepperItem = function StepperItem(_ref) {
+  var className = _ref.className,
+    _ref$classes = _ref.classes,
+    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
+    iconButtonClassName = _ref$classes2.iconButton,
+    titleClassName = _ref$classes2.title,
+    textClassName = _ref$classes2.text,
+    linkClassName = _ref$classes2.link,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+    title = _ref.title,
+    text = _ref.text,
+    linkText = _ref.linkText,
+    linkUrl = _ref.linkUrl,
+    icon = _ref.icon,
+    hasSeparator = _ref.hasSeparator,
+    _ref$isHorizontal = _ref.isHorizontal,
+    isHorizontal = _ref$isHorizontal === void 0 ? true : _ref$isHorizontal,
+    isDisabled = _ref.isDisabled,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
+    _ref$dataAttrs = _ref.dataAttrs,
+    _ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
+    rootAttrs = _ref$dataAttrs2.root,
+    iconButtonAttrs = _ref$dataAttrs2.iconButton,
+    titleAttrs = _ref$dataAttrs2.title,
+    textAttrs = _ref$dataAttrs2.text,
+    linkAttrs = _ref$dataAttrs2.link,
+    onClick = _ref.onClick;
+  var hasLink = !!linkText && !!linkUrl;
+  var hasContent = !!title || !!text || hasLink;
+  var renderContent = /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
+    className: cn([titleClassName]),
+    dataAttrs: {
+      root: titleAttrs
+    },
+    as: "h5",
+    align: align
+  }, title), text && /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
+    className: cn([textClassName]),
+    dataAttrs: {
+      root: textAttrs
+    },
+    hasMargin: false,
+    align: align
+  }, text), hasLink && /*#__PURE__*/React.createElement(_uiCore.Button, {
+    className: cn('link', [linkClassName]),
+    dataAttrs: {
+      root: linkAttrs
+    },
+    href: linkUrl,
+    type: "text",
+    sizeAll: "extra-small"
+  }, linkText));
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(rootAttrs), {
+    className: cn([className], {
+      'is-horizontal': isHorizontal,
+      theme: theme,
+      align: align
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('icon-button-area')
+  }, /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(iconButtonAttrs), {
+    className: cn('icon-button', [iconButtonClassName]),
+    type: "button",
+    disabled: isDisabled,
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('icon')
+  }, icon)), hasSeparator && /*#__PURE__*/React.createElement("span", {
+    className: cn('separator')
+  })), hasContent && renderContent);
+};
+var _default = exports["default"] = StepperItem;

package/dist/lib/index.d.ts

@@ -34,11 +34,12 @@ export { default as PictureWithDescription } from './components/PictureWithDescr
 export { default as PromoCard } from './components/PromoCards/components/PromoCard/PromoCard';
 export { default as PromoCards } from './components/PromoCards/PromoCards';
 export { default as Property } from './components/Property/Property';
-export { default as PropertyDescription } from './components/Property/PropertyDescription';
 export { default as ServiceCard } from './components/ServiceCards/components/ServiceCard/ServiceCard';
 export { default as ServiceCards } from './components/ServiceCards/ServiceCards';
 export { default as SidePictureCard } from './components/SidePictureCards/components/SidePictureCard';
 export { default as SidePictureCards } from './components/SidePictureCards/SidePictureCards';
+export { default as Stepper } from './components/Stepper/Stepper';
+export { default as StepperItem } from './components/Stepper/StepperItem';
 export { default as Steps } from './components/Steps/Steps';
 export { default as StepsItem } from './components/Steps/StepsItem';
 export { default as StoreBanner } from './components/StoreBanner/StoreBanner';

package/dist/lib/index.js

@@ -219,12 +219,6 @@ Object.defineProperty(exports, "Property", {
     return _Property["default"];
   }
 });
-Object.defineProperty(exports, "PropertyDescription", {
-  enumerable: true,
-  get: function get() {
-    return _PropertyDescription["default"];
-  }
-});
 Object.defineProperty(exports, "ServiceCard", {
   enumerable: true,
   get: function get() {
@@ -249,6 +243,18 @@ Object.defineProperty(exports, "SidePictureCards", {
     return _SidePictureCards["default"];
   }
 });
+Object.defineProperty(exports, "Stepper", {
+  enumerable: true,
+  get: function get() {
+    return _Stepper["default"];
+  }
+});
+Object.defineProperty(exports, "StepperItem", {
+  enumerable: true,
+  get: function get() {
+    return _StepperItem["default"];
+  }
+});
 Object.defineProperty(exports, "Steps", {
   enumerable: true,
   get: function get() {
@@ -393,11 +399,12 @@ var _PictureWithDescription = _interopRequireDefault(require("./components/Pictu
 var _PromoCard = _interopRequireDefault(require("./components/PromoCards/components/PromoCard/PromoCard"));
 var _PromoCards = _interopRequireDefault(require("./components/PromoCards/PromoCards"));
 var _Property = _interopRequireDefault(require("./components/Property/Property"));
-var _PropertyDescription = _interopRequireDefault(require("./components/Property/PropertyDescription"));
 var _ServiceCard = _interopRequireDefault(require("./components/ServiceCards/components/ServiceCard/ServiceCard"));
 var _ServiceCards = _interopRequireDefault(require("./components/ServiceCards/ServiceCards"));
 var _SidePictureCard = _interopRequireDefault(require("./components/SidePictureCards/components/SidePictureCard"));
 var _SidePictureCards = _interopRequireDefault(require("./components/SidePictureCards/SidePictureCards"));
+var _Stepper = _interopRequireDefault(require("./components/Stepper/Stepper"));
+var _StepperItem = _interopRequireDefault(require("./components/Stepper/StepperItem"));
 var _Steps = _interopRequireDefault(require("./components/Steps/Steps"));
 var _StepsItem = _interopRequireDefault(require("./components/Steps/StepsItem"));
 var _StoreBanner = _interopRequireDefault(require("./components/StoreBanner/StoreBanner"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-shared",
-    "version": "8.0.5",
+    "version": "8.1.0",
     "files": [
         "dist"
     ],
@@ -77,13 +77,13 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.8.4",
-        "@megafon/ui-core": "^8.0.5",
-        "@megafon/ui-helpers": "^4.0.0",
-        "@megafon/ui-icons": "^3.8.0",
+        "@megafon/ui-core": "^8.1.0",
+        "@megafon/ui-helpers": "^4.0.1",
+        "@megafon/ui-icons": "^3.8.1",
         "core-js": "^3.6.4",
         "htmr": "^1.0.2",
         "lodash.throttle": "^4.1.1",
         "swiper": "^11.1.1"
     },
-    "gitHead": "da89fd366d75df783e07e4fe1d65f4af83a4cf67"
+    "gitHead": "d9a710f4c5a27033a3b69898b7baa6e997b3b2f4"
 }

package/dist/es/components/Property/Property.css

@@ -1 +0,0 @@
-@charset "UTF-8";h1,h2,h3,h4,h5{margin:0}.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}.mfui-property_border-top.mfui-property_border-color_default .mfui-property__wrapper{border-top:1px solid var(--spbSky1)}.mfui-property_border-bottom.mfui-property_border-color_default .mfui-property__wrapper{border-bottom:1px solid var(--spbSky1)}.mfui-property_border-top.mfui-property_border-color_darker .mfui-property__wrapper{border-top:1px solid var(--spbSky2)}.mfui-property_border-bottom.mfui-property_border-color_darker .mfui-property__wrapper{border-bottom:1px solid var(--spbSky2)}.mfui-property__main{display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-property__main:not(:first-child){margin-top:24px}.mfui-property__main_with-out-title{margin-top:16px!important}.mfui-property__main_with-badge{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-property__title-item_size_default{font-size:15px;font-weight:500;line-height:24px}.mfui-property__title-item_size_big{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-property__title-item_size_big{font-size:20px;line-height:28px}}@media screen and (max-width:767px){.mfui-property__title-item{font-size:15px;font-weight:500;line-height:24px}}.mfui-property__icon{display:inline-block;height:24px;margin-left:1px;margin-right:8px;overflow:hidden;vertical-align:bottom;width:24px}.mfui-property__badge{margin-bottom:8px}@media screen and (min-width:768px){.mfui-property__title .mfui-property__desc{width:100%}}.mfui-property__tooltip{cursor:pointer;display:inline-block;height:20px;margin-left:8px;vertical-align:text-bottom;width:20px;fill:var(--spbSky2)}.mfui-property__tooltip-inner{max-width:350px}.mfui-property__desc{margin-top:12px}@media screen and (min-width:768px){.mfui-property__desc{width:70%}}.mfui-property__desc_collapsible{margin-top:12px}.mfui-property__value-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;border-radius:8px;padding:4px 8px;text-align:right;white-space:pre-line}.mfui-property__value-wrapper_frame_default{background:var(--base)}.mfui-property__value-wrapper_frame_gray{background:var(--spbSky0)}.mfui-property__value{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-property__value{font-size:20px;line-height:28px}}@media screen and (max-width:767px){.mfui-property__value{font-size:15px;font-weight:500;line-height:24px}}.mfui-property__value-unit:before{content:" "}

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

@@ -1 +0,0 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-property-description__collapse{color:var(--systemBlue);cursor:pointer;font-size:12px;-webkit-text-decoration:underline dashed var(--systemBlue);text-decoration:underline dashed var(--systemBlue)}.mfui-property-description__content-inner{margin-bottom:8px}

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

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import './PropertyDescription.scss';
-import { DescriptionType } from './types';
-export declare const testIdPrefix = "PropertyDescription";
-declare const PropertyDescription: React.FC<DescriptionType>;
-export default PropertyDescription;