@megafon/ui-shared 2.1.3 → 2.2.1

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.2.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.2.0...@megafon/ui-shared@2.2.1) (2022-01-31)
+
+
+### Bug Fixes
+
+* **storebanner:** update qr code image for storebanner examples and fix qr code container styles ([1845222](https://github.com/MegafonWebLab/megafon-ui/commit/1845222e5211e70a8f5aa36ab4a710ecd46e8a14))
+
+
+
+
+
+# [2.2.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.1.5...@megafon/ui-shared@2.2.0) (2022-01-24)
+
+
+### Features
+
+* **accordionbox:** props hasVerticalPaddings marked as deprecated ([7dbb43b](https://github.com/MegafonWebLab/megafon-ui/commit/7dbb43b1178f4055ecd0f4eed5614024da638091))
+* **container:** add rules for TextWithIcon component ([4c692ab](https://github.com/MegafonWebLab/megafon-ui/commit/4c692ab43db115dc7c5aeba39713d6f2ae2daaff))
+* **textwithicon:** add component TextWithIcon ([b772728](https://github.com/MegafonWebLab/megafon-ui/commit/b772728b8739dbbfa550eef1c8eedb56cda620c9))
+* **videoblock:** made button optional ([eef7c17](https://github.com/MegafonWebLab/megafon-ui/commit/eef7c174415b28fe3512d8c28fcd9bb73774dd2e))
+
+
+
+
+
+## [2.1.5](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.1.4...@megafon/ui-shared@2.1.5) (2022-01-18)
+
+
+### Bug Fixes
+
+* **benefitsicons:** fix indents of items for inOneColumn mode ([e207c1c](https://github.com/MegafonWebLab/megafon-ui/commit/e207c1c99b42a48454e716094132d9573b3ec3c6))
+
+
+
+
+
+## [2.1.4](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.1.3...@megafon/ui-shared@2.1.4) (2021-12-29)
+
+**Note:** Version bump only for package @megafon/ui-shared
+
+
+
+
+
 ## [2.1.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.1.2...@megafon/ui-shared@2.1.3) (2021-12-20)
 
 

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

@@ -16,6 +16,7 @@ export interface IAccordionBox {
     /** Центрирование по горизонтали для расширения 1280+ */
     hCenterAlignWide?: boolean;
     /** Вертикальные отступы */
+    /** @deprecated */
     hasVerticalPaddings?: boolean;
     /** Дополнительный класс для корнеовго элемента */
     className?: string;

package/dist/es/components/AccordionBox/AccordionBox.js

@@ -49,7 +49,9 @@ AccordionBox.propTypes = {
   isFullWidth: PropTypes.bool,
   isOpened: PropTypes.bool,
   hCenterAlignWide: PropTypes.bool,
-  hasVerticalPaddings: PropTypes.bool,
+  hasVerticalPaddings: function hasVerticalPaddings(props, propName) {
+    return props[propName] && new Error('Failed prop type: Prop "hasVerticalPaddings" is deprecated');
+  },
   className: PropTypes.string,
   classes: PropTypes.shape({
     openedClass: PropTypes.string,

package/dist/es/components/BenefitsIcons/BenefitsIcons.js

@@ -168,7 +168,9 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
     };
   }, [iconPosition, inOneColumn, resizeHandler]);
   return /*#__PURE__*/React.createElement("div", {
-    className: cn([className, classes.root]),
+    className: cn({
+      'one-column': inOneColumn
+    }, [className, classes.root]),
     ref: rootRef
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('inner')
@@ -185,7 +187,7 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
       className: classes.gridColumn,
       key: i
     }, columnConfig), /*#__PURE__*/React.createElement(BenefitsIconsTile, {
-      className: classes.item,
+      className: cn('tile', [classes.item]),
       title: title,
       text: text,
       icon: icon,

package/dist/es/components/BenefitsIcons/style/BenefitsIcons.css

@@ -12,3 +12,22 @@ h5 {
 .mfui-benefits-icons__inner {
   margin-bottom: -48px;
 }
+.mfui-benefits-icons__tile {
+  margin-bottom: 48px;
+}
+.mfui-benefits-icons_one-column .mfui-benefits-icons__inner {
+  margin-bottom: -24px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-benefits-icons_one-column .mfui-benefits-icons__inner {
+    margin-bottom: -32px;
+  }
+}
+.mfui-benefits-icons_one-column .mfui-benefits-icons__tile {
+  margin-bottom: 24px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-benefits-icons_one-column .mfui-benefits-icons__tile {
+    margin-bottom: 32px;
+  }
+}

package/dist/es/components/BenefitsIcons/style/BenefitsIconsTile.css

@@ -5,9 +5,6 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-benefits-icons-tile {
-  margin-bottom: 48px;
-}
 .mfui-benefits-icons-tile .mfui-benefits-icons-tile__svg-icon {
   margin-bottom: 10px;
 }

package/dist/es/components/Container/Container.css

@@ -2230,6 +2230,9 @@ h5 {
 .mfui-container .mfui-text-box + .mfui-download-links {
   margin-top: 32px;
 }
+.mfui-container .mfui-text-box + extract(.mfui-video-banner, .mfui-title-description-box, .mfui-benefits-icons, .mfui-benefits-pictures, .mfui-cards-box, .mfui-carousel-box, .mfui-video-block, .mfui-tabs-box, .mfui-partners, .mfui-instructions, .mfui-property, .mfui-table, .mfui-accordion-box, .mfui-button-link-box, .mfui-download-links, .mfui-text-box, .mfui-picture-with-description, .mfui-store-banner, .mfui-button-banner, .mfui-steps, .mfui-page-title, .mfui-text-with-icon, 23) {
+  margin-top: 24px;
+}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-container .mfui-text-box + .mfui-benefits-icons {
     margin-top: 48px;
@@ -2869,6 +2872,163 @@ h5 {
 .mfui-container .mfui-page-title + .mfui-button-link-box {
   margin-top: 0 !important;
 }
+.mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-cards-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-carousel-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-video-block {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-tabs-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-partners {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-instructions {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-property {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-table {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-accordion-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-button-link-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-download-links {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-text-box {
+  margin-top: 24px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-store-banner {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-button-banner {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-steps {
+  margin-top: 40px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-cards-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-carousel-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-video-block {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-tabs-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-partners {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-instructions {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-property {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-table {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-accordion-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-button-link-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-download-links {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-text-box {
+    margin-top: 24px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-store-banner {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-button-banner {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-steps {
+    margin-top: 48px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-cards-box {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-carousel-box {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-video-block {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-tabs-box {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-partners {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-instructions {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-property {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-table {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-accordion-box {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-button-link-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-download-links {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-text-box {
+    margin-top: 24px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-store-banner {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-button-banner {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-steps {
+    margin-top: 56px;
+  }
+}
 .mfui-container_disable-padding-top {
   padding-top: 0 !important;
 }

package/dist/es/components/StoreBanner/StoreBanner.css

@@ -161,7 +161,16 @@ h5 {
   display: flex;
 }
 .mfui-store-banner__qr-code {
+  -ms-flex-item-align: center;
+      align-self: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 90px;
+  height: 90px;
   margin-right: 16px;
+  border: 1px solid #EDEDED;
+  border-radius: 8px;
+  background-color: #FFFFFF;
 }
 @media screen and (max-width: 767px) {
   .mfui-store-banner__qr-code {
@@ -182,6 +191,9 @@ h5 {
 .mfui-store-banner__store-link {
   width: 136px;
   height: 40px;
+  margin-right: 8px;
+  margin-bottom: 10px;
+  margin-left: 8px;
 }
 @media screen and (max-width: 767px) {
   .mfui-store-banner__store-link {
@@ -189,9 +201,8 @@ h5 {
     height: 35px;
   }
 }
-.mfui-store-banner__store-link:not(:last-child) {
-  margin-right: 16px;
-  margin-bottom: 10px;
+.mfui-store-banner__store-link:last-child {
+  margin-bottom: 0;
 }
 .mfui-store-banner__stores {
   display: -webkit-box;
@@ -210,6 +221,11 @@ h5 {
             justify-content: center;
   }
 }
+@media screen and (min-width: 768px) {
+  .mfui-store-banner__stores {
+    margin-left: -8px;
+  }
+}
 .mfui-store-banner__text {
   margin-bottom: 32px;
 }
@@ -231,16 +247,10 @@ h5 {
   -o-object-fit: contain;
      object-fit: contain;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-store-banner__links_three .mfui-store-banner__qr-code {
-    width: 120px;
-    height: 120px;
-  }
-}
 @media screen and (min-width: 1280px) {
   .mfui-store-banner__links_three .mfui-store-banner__qr-code {
-    max-width: 88px;
-    max-height: 88px;
+    max-width: 90px;
+    max-height: 90px;
   }
 }
 .mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores {
@@ -262,12 +272,6 @@ h5 {
     margin: 0 auto;
   }
 }
-.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link {
-  margin-right: 16px;
-}
-.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link:not(:first-child) {
-  margin-right: 0;
-}
 .mfui-store-banner__links_three .mfui-store-banner__store-link {
   width: 136px;
   height: 40px;
@@ -286,8 +290,3 @@ h5 {
     margin-bottom: 16px;
   }
 }
-@media screen and (max-width: 1023px) {
-  .mfui-store-banner__links_three .mfui-store-banner__store-link:not(:first-child) {
-    margin-right: 0;
-  }
-}

package/dist/es/components/TextWithIcon/TextWithIcon.css

@@ -0,0 +1,57 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-text-with-icon__item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon__item {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+}
+.mfui-text-with-icon__item:not(:first-of-type) {
+  margin-top: 16px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon__item:not(:first-of-type) {
+    margin-top: 24px;
+  }
+}
+.mfui-text-with-icon__header {
+  margin-bottom: 24px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon__header {
+    text-align: center;
+  }
+}
+.mfui-text-with-icon__svg-icon {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  min-height: 40px;
+  overflow: hidden;
+}
+@media screen and (min-width: 768px) {
+  .mfui-text-with-icon__svg-icon {
+    margin-right: 16px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon__text {
+    margin-top: 12px;
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IFilterDataAttrs } from '@megafon/ui-helpers';
+import './TextWithIcon.less';
+export interface IItem {
+    /** Текст */
+    text: string;
+    /** Иконка */
+    icon: React.ReactNode;
+}
+export interface ITextWithIconProps extends IFilterDataAttrs {
+    /** Список строк с иконками */
+    items: IItem[];
+    /** Заголовок */
+    title?: string;
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+}
+declare const TextWithIcon: React.FC<ITextWithIconProps>;
+export default TextWithIcon;

package/dist/es/components/TextWithIcon/TextWithIcon.js

@@ -0,0 +1,53 @@
+import "core-js/modules/es.array.map";
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { Header, Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import "./TextWithIcon.css";
+var cn = cnCreate('mfui-text-with-icon');
+
+var TextWithIcon = function TextWithIcon(_ref) {
+  var items = _ref.items,
+      title = _ref.title,
+      rootRef = _ref.rootRef,
+      dataAttrs = _ref.dataAttrs,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn([className]),
+    ref: rootRef
+  }, filterDataAttrs(dataAttrs)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridColumn, {
+    mobile: '12',
+    tablet: '7',
+    desktop: '6',
+    wide: '6'
+  }, title && /*#__PURE__*/React.createElement(Header, {
+    className: cn('header'),
+    as: "h5"
+  }, title), items.map(function (_ref2, i) {
+    var text = _ref2.text,
+        icon = _ref2.icon;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('item'),
+      key: i
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('svg-icon')
+    }, icon), /*#__PURE__*/React.createElement("div", {
+      className: cn('text')
+    }, text));
+  }))));
+};
+
+TextWithIcon.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    icon: PropTypes.node.isRequired
+  }).isRequired).isRequired,
+  title: PropTypes.string,
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  className: PropTypes.string
+};
+export default TextWithIcon;

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

@@ -6,7 +6,7 @@ export interface IContent {
     /** Текст-описание */
     description: string | React.ReactNode[] | React.ReactNode;
     /** Текст кнопки */
-    buttonTitle: string;
+    buttonTitle?: string;
     /** Добавляет атрибут download для тега <a> компонента Button */
     buttonDownload?: boolean;
     /** Ссылка на кнопке */

package/dist/es/components/VideoBlock/VideoBlock.js

@@ -81,7 +81,7 @@ var VideoBlock = function VideoBlock(_ref) {
       className: cn('header')
     }, title), /*#__PURE__*/React.createElement("div", {
       className: cn('description', [classes.description])
-    }, description), /*#__PURE__*/React.createElement(Button, {
+    }, description), buttonTitle && /*#__PURE__*/React.createElement(Button, {
       className: cn('button', [classes.button]),
       href: href,
       onClick: onButtonClick,
@@ -100,7 +100,7 @@ var VideoBlock = function VideoBlock(_ref) {
         orderTablet: "2",
         orderMobile: "2",
         key: "column-content"
-      }, renderContent && renderContent(content)));
+      }, renderContent(content)));
     }
 
     columns.push( /*#__PURE__*/React.createElement(GridColumn, {
@@ -139,7 +139,7 @@ VideoBlock.propTypes = {
     title: PropTypes.string.isRequired,
     description: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     href: PropTypes.string,
-    buttonTitle: PropTypes.string.isRequired,
+    buttonTitle: PropTypes.string,
     buttonDownload: PropTypes.bool,
     onButtonClick: PropTypes.func
   }),

package/dist/es/index.d.ts

@@ -29,6 +29,7 @@ export { default as TableRow } from './components/Table/TableRow';
 export { default as TabsBox } from './components/TabsBox/TabsBox';
 export { default as TextBox } from './components/TextBox/TextBox';
 export { default as TextBoxPicture } from './components/TextBox/TextBoxPicture';
+export { default as TextWithIcon } from './components/TextWithIcon/TextWithIcon';
 export { default as TitleDescriptionBox } from './components/TitleDescriptionBox/TitleDescriptionBox';
 export { default as VideoBanner } from './components/VideoBanner/VideoBanner';
 export { default as VideoBlock } from './components/VideoBlock/VideoBlock';

package/dist/es/index.js

@@ -29,6 +29,7 @@ export { default as TableRow } from "./components/Table/TableRow";
 export { default as TabsBox } from "./components/TabsBox/TabsBox";
 export { default as TextBox } from "./components/TextBox/TextBox";
 export { default as TextBoxPicture } from "./components/TextBox/TextBoxPicture";
+export { default as TextWithIcon } from "./components/TextWithIcon/TextWithIcon";
 export { default as TitleDescriptionBox } from "./components/TitleDescriptionBox/TitleDescriptionBox";
 export { default as VideoBanner } from "./components/VideoBanner/VideoBanner";
 export { default as VideoBlock } from "./components/VideoBlock/VideoBlock";

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

@@ -16,6 +16,7 @@ export interface IAccordionBox {
     /** Центрирование по горизонтали для расширения 1280+ */
     hCenterAlignWide?: boolean;
     /** Вертикальные отступы */
+    /** @deprecated */
     hasVerticalPaddings?: boolean;
     /** Дополнительный класс для корнеовго элемента */
     className?: string;

package/dist/lib/components/AccordionBox/AccordionBox.js

@@ -66,7 +66,9 @@ AccordionBox.propTypes = {
   isFullWidth: PropTypes.bool,
   isOpened: PropTypes.bool,
   hCenterAlignWide: PropTypes.bool,
-  hasVerticalPaddings: PropTypes.bool,
+  hasVerticalPaddings: function hasVerticalPaddings(props, propName) {
+    return props[propName] && new Error('Failed prop type: Prop "hasVerticalPaddings" is deprecated');
+  },
   className: PropTypes.string,
   classes: PropTypes.shape({
     openedClass: PropTypes.string,

package/dist/lib/components/BenefitsIcons/BenefitsIcons.js

@@ -193,7 +193,9 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
     };
   }, [iconPosition, inOneColumn, resizeHandler]);
   return /*#__PURE__*/React.createElement("div", {
-    className: cn([className, classes.root]),
+    className: cn({
+      'one-column': inOneColumn
+    }, [className, classes.root]),
     ref: rootRef
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('inner')
@@ -210,7 +212,7 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
       className: classes.gridColumn,
       key: i
     }, columnConfig), /*#__PURE__*/React.createElement(_BenefitsIconsTile["default"], {
-      className: classes.item,
+      className: cn('tile', [classes.item]),
       title: title,
       text: text,
       icon: icon,

package/dist/lib/components/BenefitsIcons/style/BenefitsIcons.css

@@ -12,3 +12,22 @@ h5 {
 .mfui-benefits-icons__inner {
   margin-bottom: -48px;
 }
+.mfui-benefits-icons__tile {
+  margin-bottom: 48px;
+}
+.mfui-benefits-icons_one-column .mfui-benefits-icons__inner {
+  margin-bottom: -24px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-benefits-icons_one-column .mfui-benefits-icons__inner {
+    margin-bottom: -32px;
+  }
+}
+.mfui-benefits-icons_one-column .mfui-benefits-icons__tile {
+  margin-bottom: 24px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-benefits-icons_one-column .mfui-benefits-icons__tile {
+    margin-bottom: 32px;
+  }
+}

package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css

@@ -5,9 +5,6 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-benefits-icons-tile {
-  margin-bottom: 48px;
-}
 .mfui-benefits-icons-tile .mfui-benefits-icons-tile__svg-icon {
   margin-bottom: 10px;
 }

package/dist/lib/components/Container/Container.css

@@ -2230,6 +2230,9 @@ h5 {
 .mfui-container .mfui-text-box + .mfui-download-links {
   margin-top: 32px;
 }
+.mfui-container .mfui-text-box + extract(.mfui-video-banner, .mfui-title-description-box, .mfui-benefits-icons, .mfui-benefits-pictures, .mfui-cards-box, .mfui-carousel-box, .mfui-video-block, .mfui-tabs-box, .mfui-partners, .mfui-instructions, .mfui-property, .mfui-table, .mfui-accordion-box, .mfui-button-link-box, .mfui-download-links, .mfui-text-box, .mfui-picture-with-description, .mfui-store-banner, .mfui-button-banner, .mfui-steps, .mfui-page-title, .mfui-text-with-icon, 23) {
+  margin-top: 24px;
+}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-container .mfui-text-box + .mfui-benefits-icons {
     margin-top: 48px;
@@ -2869,6 +2872,163 @@ h5 {
 .mfui-container .mfui-page-title + .mfui-button-link-box {
   margin-top: 0 !important;
 }
+.mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-cards-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-carousel-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-video-block {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-tabs-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-partners {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-instructions {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-property {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-table {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-accordion-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-button-link-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-download-links {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-text-box {
+  margin-top: 24px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-store-banner {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-button-banner {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-steps {
+  margin-top: 40px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-cards-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-carousel-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-video-block {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-tabs-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-partners {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-instructions {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-property {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-table {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-accordion-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-button-link-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-download-links {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-text-box {
+    margin-top: 24px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-store-banner {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-button-banner {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-steps {
+    margin-top: 48px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-cards-box {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-carousel-box {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-video-block {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-tabs-box {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-partners {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-instructions {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-property {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-table {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-accordion-box {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-button-link-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-download-links {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-text-box {
+    margin-top: 24px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-store-banner {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-button-banner {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-steps {
+    margin-top: 56px;
+  }
+}
 .mfui-container_disable-padding-top {
   padding-top: 0 !important;
 }

package/dist/lib/components/StoreBanner/StoreBanner.css

@@ -161,7 +161,16 @@ h5 {
   display: flex;
 }
 .mfui-store-banner__qr-code {
+  -ms-flex-item-align: center;
+      align-self: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 90px;
+  height: 90px;
   margin-right: 16px;
+  border: 1px solid #EDEDED;
+  border-radius: 8px;
+  background-color: #FFFFFF;
 }
 @media screen and (max-width: 767px) {
   .mfui-store-banner__qr-code {
@@ -182,6 +191,9 @@ h5 {
 .mfui-store-banner__store-link {
   width: 136px;
   height: 40px;
+  margin-right: 8px;
+  margin-bottom: 10px;
+  margin-left: 8px;
 }
 @media screen and (max-width: 767px) {
   .mfui-store-banner__store-link {
@@ -189,9 +201,8 @@ h5 {
     height: 35px;
   }
 }
-.mfui-store-banner__store-link:not(:last-child) {
-  margin-right: 16px;
-  margin-bottom: 10px;
+.mfui-store-banner__store-link:last-child {
+  margin-bottom: 0;
 }
 .mfui-store-banner__stores {
   display: -webkit-box;
@@ -210,6 +221,11 @@ h5 {
             justify-content: center;
   }
 }
+@media screen and (min-width: 768px) {
+  .mfui-store-banner__stores {
+    margin-left: -8px;
+  }
+}
 .mfui-store-banner__text {
   margin-bottom: 32px;
 }
@@ -231,16 +247,10 @@ h5 {
   -o-object-fit: contain;
      object-fit: contain;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-store-banner__links_three .mfui-store-banner__qr-code {
-    width: 120px;
-    height: 120px;
-  }
-}
 @media screen and (min-width: 1280px) {
   .mfui-store-banner__links_three .mfui-store-banner__qr-code {
-    max-width: 88px;
-    max-height: 88px;
+    max-width: 90px;
+    max-height: 90px;
   }
 }
 .mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores {
@@ -262,12 +272,6 @@ h5 {
     margin: 0 auto;
   }
 }
-.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link {
-  margin-right: 16px;
-}
-.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link:not(:first-child) {
-  margin-right: 0;
-}
 .mfui-store-banner__links_three .mfui-store-banner__store-link {
   width: 136px;
   height: 40px;
@@ -286,8 +290,3 @@ h5 {
     margin-bottom: 16px;
   }
 }
-@media screen and (max-width: 1023px) {
-  .mfui-store-banner__links_three .mfui-store-banner__store-link:not(:first-child) {
-    margin-right: 0;
-  }
-}

package/dist/lib/components/TextWithIcon/TextWithIcon.css

@@ -0,0 +1,57 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-text-with-icon__item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon__item {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+}
+.mfui-text-with-icon__item:not(:first-of-type) {
+  margin-top: 16px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon__item:not(:first-of-type) {
+    margin-top: 24px;
+  }
+}
+.mfui-text-with-icon__header {
+  margin-bottom: 24px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon__header {
+    text-align: center;
+  }
+}
+.mfui-text-with-icon__svg-icon {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  min-height: 40px;
+  overflow: hidden;
+}
+@media screen and (min-width: 768px) {
+  .mfui-text-with-icon__svg-icon {
+    margin-right: 16px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon__text {
+    margin-top: 12px;
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IFilterDataAttrs } from '@megafon/ui-helpers';
+import './TextWithIcon.less';
+export interface IItem {
+    /** Текст */
+    text: string;
+    /** Иконка */
+    icon: React.ReactNode;
+}
+export interface ITextWithIconProps extends IFilterDataAttrs {
+    /** Список строк с иконками */
+    items: IItem[];
+    /** Заголовок */
+    title?: string;
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+}
+declare const TextWithIcon: React.FC<ITextWithIconProps>;
+export default TextWithIcon;

package/dist/lib/components/TextWithIcon/TextWithIcon.js

@@ -0,0 +1,74 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+require("core-js/modules/es.array.map");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-text-with-icon');
+
+var TextWithIcon = function TextWithIcon(_ref) {
+  var items = _ref.items,
+      title = _ref.title,
+      rootRef = _ref.rootRef,
+      dataAttrs = _ref.dataAttrs,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn([className]),
+    ref: rootRef
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), /*#__PURE__*/React.createElement(_uiCore.Grid, null, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+    mobile: '12',
+    tablet: '7',
+    desktop: '6',
+    wide: '6'
+  }, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
+    className: cn('header'),
+    as: "h5"
+  }, title), items.map(function (_ref2, i) {
+    var text = _ref2.text,
+        icon = _ref2.icon;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('item'),
+      key: i
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('svg-icon')
+    }, icon), /*#__PURE__*/React.createElement("div", {
+      className: cn('text')
+    }, text));
+  }))));
+};
+
+TextWithIcon.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    icon: PropTypes.node.isRequired
+  }).isRequired).isRequired,
+  title: PropTypes.string,
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  className: PropTypes.string
+};
+var _default = TextWithIcon;
+exports["default"] = _default;

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

@@ -6,7 +6,7 @@ export interface IContent {
     /** Текст-описание */
     description: string | React.ReactNode[] | React.ReactNode;
     /** Текст кнопки */
-    buttonTitle: string;
+    buttonTitle?: string;
     /** Добавляет атрибут download для тега <a> компонента Button */
     buttonDownload?: boolean;
     /** Ссылка на кнопке */

package/dist/lib/components/VideoBlock/VideoBlock.js

@@ -101,7 +101,7 @@ var VideoBlock = function VideoBlock(_ref) {
       className: cn('header')
     }, title), /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('description', [classes.description])
-    }, description), /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+    }, description), buttonTitle && /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
       className: cn('button', [classes.button]),
       href: href,
       onClick: onButtonClick,
@@ -121,7 +121,7 @@ var VideoBlock = function VideoBlock(_ref) {
         orderTablet: "2",
         orderMobile: "2",
         key: "column-content"
-      }, renderContent && renderContent(content)));
+      }, renderContent(content)));
     }
 
     columns.push( /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
@@ -161,7 +161,7 @@ VideoBlock.propTypes = {
     title: _propTypes["default"].string.isRequired,
     description: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
     href: _propTypes["default"].string,
-    buttonTitle: _propTypes["default"].string.isRequired,
+    buttonTitle: _propTypes["default"].string,
     buttonDownload: _propTypes["default"].bool,
     onButtonClick: _propTypes["default"].func
   }),

package/dist/lib/index.d.ts

@@ -29,6 +29,7 @@ export { default as TableRow } from './components/Table/TableRow';
 export { default as TabsBox } from './components/TabsBox/TabsBox';
 export { default as TextBox } from './components/TextBox/TextBox';
 export { default as TextBoxPicture } from './components/TextBox/TextBoxPicture';
+export { default as TextWithIcon } from './components/TextWithIcon/TextWithIcon';
 export { default as TitleDescriptionBox } from './components/TitleDescriptionBox/TitleDescriptionBox';
 export { default as VideoBanner } from './components/VideoBanner/VideoBanner';
 export { default as VideoBlock } from './components/VideoBlock/VideoBlock';

package/dist/lib/index.js

@@ -189,6 +189,12 @@ Object.defineProperty(exports, "TextBoxPicture", {
     return _TextBoxPicture["default"];
   }
 });
+Object.defineProperty(exports, "TextWithIcon", {
+  enumerable: true,
+  get: function get() {
+    return _TextWithIcon["default"];
+  }
+});
 Object.defineProperty(exports, "TitleDescriptionBox", {
   enumerable: true,
   get: function get() {
@@ -270,6 +276,8 @@ var _TextBox = _interopRequireDefault(require("./components/TextBox/TextBox"));
 
 var _TextBoxPicture = _interopRequireDefault(require("./components/TextBox/TextBoxPicture"));
 
+var _TextWithIcon = _interopRequireDefault(require("./components/TextWithIcon/TextWithIcon"));
+
 var _TitleDescriptionBox = _interopRequireDefault(require("./components/TitleDescriptionBox/TitleDescriptionBox"));
 
 var _VideoBanner = _interopRequireDefault(require("./components/VideoBanner/VideoBanner"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-shared",
-  "version": "2.1.3",
+  "version": "2.2.1",
   "files": [
     "dist"
   ],
@@ -81,7 +81,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@megafon/ui-core": "^2.1.4",
+    "@megafon/ui-core": "^2.4.0",
     "@megafon/ui-helpers": "^1.0.0",
     "core-js": "^3.6.4",
     "htmr": "^0.9.2",
@@ -89,5 +89,5 @@
     "prop-types": "^15.7.2",
     "swiper": "^6.5.6"
   },
-  "gitHead": "88cfe6bca4b341ea19d7cb0b70798250bbbe127a"
+  "gitHead": "1c92184284a8224e5832b4c2218231edfcbb4d5f"
 }