@megafon/ui-shared 8.5.0 → 8.7.0

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

@@ -8,6 +8,7 @@ export interface IStepperProps {
     /** Дополнительные классы элементов */
     classes?: {
         root?: string;
+        itemsWrap?: string;
         item?: string;
         itemIconButton?: string;
         itemTitle?: string;
@@ -30,11 +31,14 @@ export interface IStepperProps {
     isDisabled?: boolean;
     /** Все шаги пройдены */
     isAllChecked?: boolean;
+    /** Отображение контента только активного шага */
+    showActiveStepContent?: boolean;
     /** Выравнивание */
     align?: 'center' | 'left';
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
+        itemsWrap?: Record<string, string>;
         item?: Record<string, string>;
         itemIconButton?: Record<string, string>;
         itemTitle?: Record<string, string>;

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

@@ -29,6 +29,7 @@ var Stepper = function Stepper(_ref) {
     _ref$classes = _ref.classes,
     _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
     rootClassName = _ref$classes2.root,
+    itemsWrapClassName = _ref$classes2.itemsWrap,
     itemClassName = _ref$classes2.item,
     itemIconButtonClassName = _ref$classes2.itemIconButton,
     itemTitleClassName = _ref$classes2.itemTitle,
@@ -46,11 +47,14 @@ var Stepper = function Stepper(_ref) {
     isNumeric = _ref.isNumeric,
     isDisabled = _ref.isDisabled,
     isAllChecked = _ref.isAllChecked,
+    _ref$showActiveStepCo = _ref.showActiveStepContent,
+    showActiveStepContent = _ref$showActiveStepCo === void 0 ? false : _ref$showActiveStepCo,
     _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,
+    itemsWrapAttrs = _ref$dataAttrs2.itemsWrap,
     itemAttrs = _ref$dataAttrs2.item,
     itemIconButtonAttrs = _ref$dataAttrs2.itemIconButton,
     itemTitleAttrs = _ref$dataAttrs2.itemTitle,
@@ -65,6 +69,7 @@ var Stepper = function Stepper(_ref) {
     currentIndex = _React$useState2[0],
     setCurrentIndex = _React$useState2[1];
   var hasCustomItems = !!items.length;
+  var isHorizontalContent = isHorizontal || showActiveStepContent;
   var currentItems = hasCustomItems ? items : Array.from({
     length: stepCount
   });
@@ -107,43 +112,53 @@ var Stepper = function Stepper(_ref) {
     }
     return /*#__PURE__*/React.createElement(CheckedIcon, null);
   }, [isNumeric]);
+  var renderItem = React.useCallback(function (props) {
+    return /*#__PURE__*/React.createElement(_StepperItem["default"], (0, _extends2["default"])({}, props, {
+      className: itemClassName,
+      classes: {
+        iconButton: itemIconButtonClassName,
+        title: itemTitleClassName,
+        text: itemTextClassname,
+        link: itemLinkClassName
+      },
+      dataAttrs: {
+        root: itemAttrs,
+        iconButton: itemIconButtonAttrs,
+        title: itemTitleAttrs,
+        text: itemTextAttrs,
+        link: itemLinkAttrs
+      }
+    }));
+  }, [itemAttrs, itemIconButtonAttrs, itemIconButtonClassName, itemClassName, itemLinkAttrs, itemLinkClassName, itemTextAttrs, itemTextClassname, itemTitleAttrs, itemTitleClassName]);
   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,
+      return renderItem((0, _extends2["default"])((0, _extends2["default"])({}, item), {
         icon: itemIcon,
-        hasSeparator: hasSeparator,
-        isHorizontal: isHorizontal,
+        hasSeparator: i < currentItems.length - 1,
+        isHorizontal: isHorizontalContent,
         isDisabled: isDisabled,
         align: align,
         theme: itemTheme,
+        view: showActiveStepContent ? _StepperItem.STEPPER_ITEM_VIEW_ENUM.ICON : _StepperItem.STEPPER_ITEM_VIEW_ENUM.DEFAULT,
         onClick: handleClickItem(i)
       }));
     });
-  }, [align, currentItems, isDisabled, isHorizontal, itemAttrs, itemIconButtonAttrs, itemIconButtonClassName, itemClassName, itemLinkAttrs, itemLinkClassName, itemTextAttrs, itemTextClassname, itemTitleAttrs, itemTitleClassName, defineItemTheme, handleClickItem, renderIcon]);
+  }, [align, currentItems, isDisabled, showActiveStepContent, isHorizontalContent, defineItemTheme, handleClickItem, renderIcon, renderItem]);
+  var renderSingleItem = renderItem((0, _extends2["default"])((0, _extends2["default"])({}, currentItems[currentIndex]), {
+    isDisabled: isDisabled,
+    align: align,
+    view: _StepperItem.STEPPER_ITEM_VIEW_ENUM.CONTENT
+  }));
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(rootAttrs), {
     className: cn([className, rootClassName], {
-      'is-horizontal': isHorizontal
+      'is-horizontal': isHorizontalContent
     }),
     ref: rootRef
-  }), renderItems);
+  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(itemsWrapAttrs), {
+    className: cn('items-wrap', [itemsWrapClassName])
+  }), renderItems), showActiveStepContent && renderSingleItem);
 };
 var _default = exports["default"] = Stepper;

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

@@ -1 +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(img/separator.png) 2 repeat;border-image:url(img/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(img/separator-vertical.png) 2 repeat;border-image:url(img/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}
+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(img/separator-mobile.png) 2 round;border-image:url(img/separator-mobile.png) 2 round;border-left:none;border-radius:100px;border-top:2px solid transparent;height:2px;left:calc(50% + 22px);min-height:2px;position:absolute;top:19px;width:calc(100% - 32px)}@media screen and (min-width:768px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(img/separator.png) 2 repeat;border-image:url(img/separator.png) 2 repeat}}@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:42px;right:0}@media screen and (min-width:1024px){.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:auto}}.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(img/separator-vertical.png) 2 repeat;border-image:url(img/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

@@ -5,6 +5,11 @@ export declare enum STEPPER_ITEM_THEME_ENUM {
     ACTIVE = "active",
     DEFAULT = "default"
 }
+export declare enum STEPPER_ITEM_VIEW_ENUM {
+    ICON = "icon",
+    CONTENT = "content",
+    DEFAULT = "default"
+}
 export interface IStepperItemProps {
     /** Дополнительный класс корневого элемента */
     className?: string;
@@ -35,6 +40,8 @@ export interface IStepperItemProps {
     isDisabled?: boolean;
     /** Выравнивание */
     align?: 'center' | 'left';
+    /** Варианты отображения */
+    view?: STEPPER_ITEM_VIEW_ENUM;
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;

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

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.STEPPER_ITEM_THEME_ENUM = void 0;
+exports["default"] = exports.STEPPER_ITEM_VIEW_ENUM = 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"));
@@ -19,6 +19,12 @@ var STEPPER_ITEM_THEME_ENUM;
   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 STEPPER_ITEM_VIEW_ENUM;
+(function (STEPPER_ITEM_VIEW_ENUM) {
+  STEPPER_ITEM_VIEW_ENUM["ICON"] = "icon";
+  STEPPER_ITEM_VIEW_ENUM["CONTENT"] = "content";
+  STEPPER_ITEM_VIEW_ENUM["DEFAULT"] = "default";
+})(STEPPER_ITEM_VIEW_ENUM || (exports.STEPPER_ITEM_VIEW_ENUM = STEPPER_ITEM_VIEW_ENUM = {}));
 var cn = (0, _uiHelpers.cnCreate)('mfui-stepper-item');
 var StepperItem = function StepperItem(_ref) {
   var className = _ref.className,
@@ -29,7 +35,7 @@ var StepperItem = function StepperItem(_ref) {
     textClassName = _ref$classes2.text,
     linkClassName = _ref$classes2.link,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+    theme = _ref$theme === void 0 ? STEPPER_ITEM_THEME_ENUM.DEFAULT : _ref$theme,
     title = _ref.title,
     text = _ref.text,
     linkText = _ref.linkText,
@@ -41,6 +47,8 @@ var StepperItem = function StepperItem(_ref) {
     isDisabled = _ref.isDisabled,
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'center' : _ref$align,
+    _ref$view = _ref.view,
+    view = _ref$view === void 0 ? STEPPER_ITEM_VIEW_ENUM.DEFAULT : _ref$view,
     _ref$dataAttrs = _ref.dataAttrs,
     _ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
     rootAttrs = _ref$dataAttrs2.root,
@@ -51,6 +59,8 @@ var StepperItem = function StepperItem(_ref) {
     onClick = _ref.onClick;
   var hasLink = !!linkText && !!linkUrl;
   var hasContent = !!title || !!text || hasLink;
+  var showContent = view !== STEPPER_ITEM_VIEW_ENUM.ICON && hasContent;
+  var showIcon = view !== STEPPER_ITEM_VIEW_ENUM.CONTENT;
   var renderContent = /*#__PURE__*/React.createElement("div", {
     className: cn('content')
   }, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
@@ -78,11 +88,11 @@ var StepperItem = function StepperItem(_ref) {
   }, linkText));
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(rootAttrs), {
     className: cn([className], {
-      'is-horizontal': isHorizontal,
       theme: theme,
-      align: align
+      align: align,
+      'is-horizontal': isHorizontal
     })
-  }), /*#__PURE__*/React.createElement("div", {
+  }), showIcon && /*#__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]),
@@ -93,6 +103,6 @@ var StepperItem = function StepperItem(_ref) {
     className: cn('icon')
   }, icon)), hasSeparator && /*#__PURE__*/React.createElement("span", {
     className: cn('separator')
-  })), hasContent && renderContent);
+  })), showContent && renderContent);
 };
 var _default = exports["default"] = StepperItem;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-shared",
-    "version": "8.5.0",
+    "version": "8.7.0",
     "files": [
         "dist"
     ],
@@ -77,13 +77,13 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.8.4",
-        "@megafon/ui-core": "^8.5.0",
+        "@megafon/ui-core": "^8.5.1",
         "@megafon/ui-helpers": "^4.0.1",
-        "@megafon/ui-icons": "^3.9.3",
+        "@megafon/ui-icons": "^3.10.0",
         "core-js": "^3.6.4",
         "htmr": "^1.0.2",
         "lodash.throttle": "^4.1.1",
         "swiper": "^11.1.1"
     },
-    "gitHead": "84114b7863b09c9cfb5e39388a7e6584f83cb3d2"
+    "gitHead": "443402b98607c898eda4e767dd06b15d10ca705b"
 }