@megafon/ui-shared 5.2.4 → 5.4.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.4.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.3.0...@megafon/ui-shared@5.4.0) (2024-01-09)
+
+
+### Features
+
+* **benefitspictures:** add imgAlign and textAlign props, add ReactNode type to item text ([ebb2f3f](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/ebb2f3f0509f436e456a60c01fa362ecf92371e8))
+
+
+
+
+
+# [5.3.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.2.4...@megafon/ui-shared@5.3.0) (2023-12-14)
+
+
+### Bug Fixes
+
+* **steps:** added classes props ([e9f1732](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/e9f17329e675ec31efdd74904dcfb2861af90c79))
+
+
+### Features
+
+* **benefitspictures:** add minor fixes ([b6203da](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/b6203dafbb3a8761ae5bfa0ad6ef54c789a01df9))
+
+
+
+
+
 ## [5.2.4](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.2.3...@megafon/ui-shared@5.2.4) (2023-11-27)
 
 **Note:** Version bump only for package @megafon/ui-shared

package/dist/es/components/BenefitsPictures/BenefitsPictures.d.ts

@@ -7,8 +7,12 @@ export interface IBenefitsPicturesProps {
     rootRef?: React.Ref<HTMLDivElement>;
     /** Данные для бенефитов */
     items: IBenefit[];
-    /** Горизонтальное выравнивание */
+    /** Горизонтальное выравнивание бенефитов */
     align?: 'left' | 'center';
+    /** Горизонтальное выравнивание текста */
+    textAlign?: 'left' | 'center' | 'auto';
+    /** Горизонтальное выравнивание изображения */
+    imgAlign?: 'left' | 'center' | 'auto';
     /** Расстояние между бенефитами */
     gridGap?: GridGutterSize;
     /** Дополнительный css класс для корневого элемента */

package/dist/es/components/BenefitsPictures/BenefitsPictures.js

@@ -19,6 +19,10 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
   var items = _ref.items,
       _ref$align = _ref.align,
       align = _ref$align === void 0 ? 'left' : _ref$align,
+      _ref$textAlign = _ref.textAlign,
+      textAlign = _ref$textAlign === void 0 ? 'auto' : _ref$textAlign,
+      _ref$imgAlign = _ref.imgAlign,
+      imgAlign = _ref$imgAlign === void 0 ? 'auto' : _ref$imgAlign,
       _ref$gridGap = _ref.gridGap,
       gridGap = _ref$gridGap === void 0 ? 'large' : _ref$gridGap,
       rootRef = _ref.rootRef,
@@ -44,6 +48,21 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
       setCurrentGutter('large');
     }
   }, [isLargeGutter]);
+
+  var renderText = function renderText(text) {
+    if (typeof text === 'string') {
+      return /*#__PURE__*/React.createElement(Paragraph, {
+        dataAttrs: {
+          root: {
+            'data-testid': "".concat(testIdPrefix, "-paragraph")
+          }
+        }
+      }, convert(text));
+    }
+
+    return text;
+  };
+
   React.useEffect(function () {
     var throttledResizeHandler = throttle(resizeHandler, throttleTime.resize);
     resizeHandler();
@@ -55,6 +74,8 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: cn([className, classes.root]),
     ref: rootRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
   }, /*#__PURE__*/React.createElement(Grid, {
     guttersLeft: currentGutter,
     hAlign: isGridCenterAlign ? 'center' : 'left',
@@ -75,18 +96,26 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
       "data-testid": "".concat(testIdPrefix, "-item")
     }, /*#__PURE__*/React.createElement("img", {
       className: cn('img', {
-        'h-align': align
+        'h-align': imgAlign === 'auto' ? align : imgAlign
       }),
       src: img,
-      alt: alt
-    }), /*#__PURE__*/React.createElement(Header, {
+      alt: alt,
+      "data-testid": "".concat(testIdPrefix, "-img")
+    }), /*#__PURE__*/React.createElement("div", {
+      className: cn('content', {
+        'h-align': textAlign === 'auto' ? align : textAlign
+      }),
+      "data-testid": "".concat(testIdPrefix, "-content")
+    }, !!title && /*#__PURE__*/React.createElement(Header, {
       className: cn('title'),
-      align: align,
-      as: "h3"
-    }, convert(title)), /*#__PURE__*/React.createElement(Paragraph, {
-      align: align
-    }, convert(text))));
-  })));
+      as: "h3",
+      dataAttrs: {
+        root: {
+          'data-testid': "".concat(testIdPrefix, "-title")
+        }
+      }
+    }, convert(title)), !!text && renderText(text))));
+  }))));
 };
 
 BenefitsPictures.propTypes = {
@@ -94,12 +123,14 @@ BenefitsPictures.propTypes = {
     current: PropTypes.elementType
   }), PropTypes.any])]),
   items: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
+    title: PropTypes.string,
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
     img: PropTypes.string.isRequired,
     alt: PropTypes.string
   }).isRequired).isRequired,
   align: PropTypes.oneOf(['left', 'center']),
+  textAlign: PropTypes.oneOf(['left', 'center', 'auto']),
+  imgAlign: PropTypes.oneOf(['left', 'center', 'auto']),
   gridGap: PropTypes.oneOf(['medium', 'large']),
   className: PropTypes.string,
   classes: PropTypes.shape({

package/dist/es/components/BenefitsPictures/BenfitsPictures.css

@@ -5,9 +5,33 @@ h4,
 h5 {
   margin: 0;
 }
+.mfui-benefits-pictures {
+  overflow: hidden;
+}
+.mfui-benefits-pictures__inner {
+  margin-bottom: -40px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-benefits-pictures__inner {
+    margin-bottom: -48px;
+  }
+}
+.mfui-benefits-pictures__item {
+  margin-bottom: 40px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-benefits-pictures__item {
+    margin-bottom: 48px;
+  }
+}
+.mfui-benefits-pictures__content_h-align_center {
+  text-align: center;
+}
 .mfui-benefits-pictures__img {
   max-width: 100%;
   margin-bottom: 32px;
+  border-radius: 12px;
+  vertical-align: top;
 }
 .mfui-benefits-pictures__img_h-align_center {
   display: block;

package/dist/es/components/BenefitsPictures/types.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 export interface IBenefit {
     /** Заголовок бенефита */
-    title: string;
+    title?: string;
     /** Основной текст в бенефите */
-    text: string;
+    text?: string | React.ReactNode | React.ReactNode[];
     /** Изображение */
     img: string;
     /** Значение тега alt для изображения */

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

@@ -3,10 +3,16 @@ import './Steps.less';
 export interface ISteps {
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        title?: string;
+        list?: string;
+        item?: string;
+    };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
-    title: string;
+    title?: string;
 }
 declare const Steps: React.FC<ISteps>;
 export default Steps;

package/dist/es/components/Steps/Steps.js

@@ -8,30 +8,36 @@ var cn = cnCreate('mfui-steps');
 
 var Steps = function Steps(_ref) {
   var className = _ref.className,
+      classes = _ref.classes,
       title = _ref.title,
       rootRef = _ref.rootRef,
       children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
     className: cn([className]),
     ref: rootRef
-  }, /*#__PURE__*/React.createElement(Header, {
+  }, !!title && /*#__PURE__*/React.createElement(Header, {
     as: "h2",
     align: "center",
-    className: cn('title')
+    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title])
   }, convert(title, titleConvertConfig)), /*#__PURE__*/React.createElement("ul", {
-    className: cn('list')
+    className: cn('list', [classes === null || classes === void 0 ? void 0 : classes.list])
   }, React.Children.map(children, function (child) {
     return /*#__PURE__*/React.createElement("li", {
-      className: cn('item')
+      className: cn('item', [classes === null || classes === void 0 ? void 0 : classes.item])
     }, child);
   })));
 };
 
 Steps.propTypes = {
   className: PropTypes.string,
+  classes: PropTypes.shape({
+    title: PropTypes.string,
+    list: PropTypes.string,
+    item: PropTypes.string
+  }),
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),
-  title: PropTypes.string.isRequired
+  title: PropTypes.string
 };
 export default Steps;

package/dist/es/helpers/getColumnConfig.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("@megafon/ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;
+export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("../../../ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;

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

@@ -7,8 +7,12 @@ export interface IBenefitsPicturesProps {
     rootRef?: React.Ref<HTMLDivElement>;
     /** Данные для бенефитов */
     items: IBenefit[];
-    /** Горизонтальное выравнивание */
+    /** Горизонтальное выравнивание бенефитов */
     align?: 'left' | 'center';
+    /** Горизонтальное выравнивание текста */
+    textAlign?: 'left' | 'center' | 'auto';
+    /** Горизонтальное выравнивание изображения */
+    imgAlign?: 'left' | 'center' | 'auto';
     /** Расстояние между бенефитами */
     gridGap?: GridGutterSize;
     /** Дополнительный css класс для корневого элемента */

package/dist/lib/components/BenefitsPictures/BenefitsPictures.js

@@ -44,6 +44,10 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
   var items = _ref.items,
       _ref$align = _ref.align,
       align = _ref$align === void 0 ? 'left' : _ref$align,
+      _ref$textAlign = _ref.textAlign,
+      textAlign = _ref$textAlign === void 0 ? 'auto' : _ref$textAlign,
+      _ref$imgAlign = _ref.imgAlign,
+      imgAlign = _ref$imgAlign === void 0 ? 'auto' : _ref$imgAlign,
       _ref$gridGap = _ref.gridGap,
       gridGap = _ref$gridGap === void 0 ? 'large' : _ref$gridGap,
       rootRef = _ref.rootRef,
@@ -69,6 +73,21 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
       setCurrentGutter('large');
     }
   }, [isLargeGutter]);
+
+  var renderText = function renderText(text) {
+    if (typeof text === 'string') {
+      return /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
+        dataAttrs: {
+          root: {
+            'data-testid': "".concat(testIdPrefix, "-paragraph")
+          }
+        }
+      }, (0, _htmr["default"])(text));
+    }
+
+    return text;
+  };
+
   React.useEffect(function () {
     var throttledResizeHandler = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
     resizeHandler();
@@ -80,6 +99,8 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: cn([className, classes.root]),
     ref: rootRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
   }, /*#__PURE__*/React.createElement(_uiCore.Grid, {
     guttersLeft: currentGutter,
     hAlign: isGridCenterAlign ? 'center' : 'left',
@@ -100,18 +121,26 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
       "data-testid": "".concat(testIdPrefix, "-item")
     }, /*#__PURE__*/React.createElement("img", {
       className: cn('img', {
-        'h-align': align
+        'h-align': imgAlign === 'auto' ? align : imgAlign
       }),
       src: img,
-      alt: alt
-    }), /*#__PURE__*/React.createElement(_uiCore.Header, {
+      alt: alt,
+      "data-testid": "".concat(testIdPrefix, "-img")
+    }), /*#__PURE__*/React.createElement("div", {
+      className: cn('content', {
+        'h-align': textAlign === 'auto' ? align : textAlign
+      }),
+      "data-testid": "".concat(testIdPrefix, "-content")
+    }, !!title && /*#__PURE__*/React.createElement(_uiCore.Header, {
       className: cn('title'),
-      align: align,
-      as: "h3"
-    }, (0, _htmr["default"])(title)), /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
-      align: align
-    }, (0, _htmr["default"])(text))));
-  })));
+      as: "h3",
+      dataAttrs: {
+        root: {
+          'data-testid': "".concat(testIdPrefix, "-title")
+        }
+      }
+    }, (0, _htmr["default"])(title)), !!text && renderText(text))));
+  }))));
 };
 
 BenefitsPictures.propTypes = {
@@ -119,12 +148,14 @@ BenefitsPictures.propTypes = {
     current: _propTypes["default"].elementType
   }), _propTypes["default"].any])]),
   items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    title: _propTypes["default"].string.isRequired,
-    text: _propTypes["default"].string.isRequired,
+    title: _propTypes["default"].string,
+    text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
     img: _propTypes["default"].string.isRequired,
     alt: _propTypes["default"].string
   }).isRequired).isRequired,
   align: _propTypes["default"].oneOf(['left', 'center']),
+  textAlign: _propTypes["default"].oneOf(['left', 'center', 'auto']),
+  imgAlign: _propTypes["default"].oneOf(['left', 'center', 'auto']),
   gridGap: _propTypes["default"].oneOf(['medium', 'large']),
   className: _propTypes["default"].string,
   classes: _propTypes["default"].shape({

package/dist/lib/components/BenefitsPictures/BenfitsPictures.css

@@ -5,9 +5,33 @@ h4,
 h5 {
   margin: 0;
 }
+.mfui-benefits-pictures {
+  overflow: hidden;
+}
+.mfui-benefits-pictures__inner {
+  margin-bottom: -40px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-benefits-pictures__inner {
+    margin-bottom: -48px;
+  }
+}
+.mfui-benefits-pictures__item {
+  margin-bottom: 40px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-benefits-pictures__item {
+    margin-bottom: 48px;
+  }
+}
+.mfui-benefits-pictures__content_h-align_center {
+  text-align: center;
+}
 .mfui-benefits-pictures__img {
   max-width: 100%;
   margin-bottom: 32px;
+  border-radius: 12px;
+  vertical-align: top;
 }
 .mfui-benefits-pictures__img_h-align_center {
   display: block;

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

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 export interface IBenefit {
     /** Заголовок бенефита */
-    title: string;
+    title?: string;
     /** Основной текст в бенефите */
-    text: string;
+    text?: string | React.ReactNode | React.ReactNode[];
     /** Изображение */
     img: string;
     /** Значение тега alt для изображения */

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

@@ -3,10 +3,16 @@ import './Steps.less';
 export interface ISteps {
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        title?: string;
+        list?: string;
+        item?: string;
+    };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
-    title: string;
+    title?: string;
 }
 declare const Steps: React.FC<ISteps>;
 export default Steps;

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

@@ -27,31 +27,37 @@ var cn = (0, _uiHelpers.cnCreate)('mfui-steps');
 
 var Steps = function Steps(_ref) {
   var className = _ref.className,
+      classes = _ref.classes,
       title = _ref.title,
       rootRef = _ref.rootRef,
       children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
     className: cn([className]),
     ref: rootRef
-  }, /*#__PURE__*/React.createElement(_uiCore.Header, {
+  }, !!title && /*#__PURE__*/React.createElement(_uiCore.Header, {
     as: "h2",
     align: "center",
-    className: cn('title')
+    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title])
   }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), /*#__PURE__*/React.createElement("ul", {
-    className: cn('list')
+    className: cn('list', [classes === null || classes === void 0 ? void 0 : classes.list])
   }, React.Children.map(children, function (child) {
     return /*#__PURE__*/React.createElement("li", {
-      className: cn('item')
+      className: cn('item', [classes === null || classes === void 0 ? void 0 : classes.item])
     }, child);
   })));
 };
 
 Steps.propTypes = {
   className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    title: _propTypes["default"].string,
+    list: _propTypes["default"].string,
+    item: _propTypes["default"].string
+  }),
   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
+  title: _propTypes["default"].string
 };
 var _default = Steps;
 exports["default"] = _default;

package/dist/lib/helpers/getColumnConfig.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("@megafon/ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;
+export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("../../../ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-shared",
-  "version": "5.2.4",
+  "version": "5.4.0",
   "files": [
     "dist"
   ],
@@ -48,7 +48,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.15.0",
+    "@megafon/ui-icons": "^2.17.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -82,13 +82,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@megafon/ui-core": "^5.4.1",
-    "@megafon/ui-helpers": "^2.5.3",
+    "@megafon/ui-core": "^5.4.3",
+    "@megafon/ui-helpers": "^2.5.4",
     "core-js": "^3.6.4",
     "htmr": "^0.9.2",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
     "swiper": "^6.5.6"
   },
-  "gitHead": "d65bc4cd4de9180971e4285c2d0b5beec27d0542"
+  "gitHead": "1120ea0f847f81f7a9218cba42ee13a24f09912a"
 }