@megafon/ui-shared 3.0.0-beta.6 → 3.0.0

package/CHANGELOG.md

@@ -3,18 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [3.0.0-beta.6](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.5...@megafon/ui-shared@3.0.0-beta.6) (2022-02-02)
+# [3.0.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.3.0...@megafon/ui-shared@3.0.0) (2022-02-09)
 
 
 ### Bug Fixes
 
-* color props values changes ([b279f2b](https://github.com/MegafonWebLab/megafon-ui/commit/b279f2b5af0edae92fe9825bbfa90a207cb8009a))
-* remove deprecated props values ([add76f3](https://github.com/MegafonWebLab/megafon-ui/commit/add76f38a9ebad8b5b6504dfe6aae862746f0dfc))
-* **core:** fix build ui-core ([458c824](https://github.com/MegafonWebLab/megafon-ui/commit/458c824aab639e4802db261d0416b3cee58ac274))
+* **components:** change tests for dataAttrs prop ([eae8ecb](https://github.com/MegafonWebLab/megafon-ui/commit/eae8ecb5104c050ec0e67357ed5edecdfb042838))
+* color props values changes ([9e3dd31](https://github.com/MegafonWebLab/megafon-ui/commit/9e3dd31a8fd57012482c68c1173aae74028aa3a9))
+* remove deprecated props values ([d09c460](https://github.com/MegafonWebLab/megafon-ui/commit/d09c4606ce6e41f7144e18c2216d039d859288e2))
+* **accordion-box:** change type of onClickAccordion prop ([f464221](https://github.com/MegafonWebLab/megafon-ui/commit/f4642216a3869d7f11005f0162f009225f9661c4))
+* **colors:** renabe green and purple to brandGreen and brandPurple to avoid postcss-colormin bug ([089dd42](https://github.com/MegafonWebLab/megafon-ui/commit/089dd42cd18db7fc83e690da45d09b88c636a6f7))
+* **core:** fix build ui-core ([fa9522a](https://github.com/MegafonWebLab/megafon-ui/commit/fa9522ac0931edb7ec772ad040557997db080687))
+
+
+### Features
+
+* **accordionbox:** remove prop hasVerticalPaddings ([7dfe546](https://github.com/MegafonWebLab/megafon-ui/commit/7dfe546336aa0a94643299309e90fe7e56936e85))
+* **colors:** css custom properties and color themes support ([16df5b7](https://github.com/MegafonWebLab/megafon-ui/commit/16df5b7b2644e15bb6c6e49e7347c0f8e4839e58))
+* **header:** made header as a functional component ([b983934](https://github.com/MegafonWebLab/megafon-ui/commit/b983934ced137ede35f64ce2dfe0c953c1690db0))
+* **textwithicon:** prop items removed, list items are now added by child components ([44ee66c](https://github.com/MegafonWebLab/megafon-ui/commit/44ee66c3964da1111957553c75046407f789e673))
 
 
 ### BREAKING CHANGES
 
+* **textwithicon:** prop items removed, list items are now added by child components
+* **accordionbox:** remove prop hasVerticalPaddings
 * ContentArea: prop color change values from 'base' to 'white' and from 'content' to 'default';
 remove depreacted value 'freshAsphalt'
 Paragraph: prop color change values from 'base' to 'white' and from 'contend' to 'default';
@@ -22,82 +35,47 @@ remove deprecared values 'freshAsphalt' and 'clearWhite'
 StoreBanner: prop theme change value from 'black' to 'default'; remove deprecated value 'clearWhite'
 * ContentArea, Paragraph, StoreBanner and Breadcrumbs components from no don't have
 freshAsphalt and clearWhite as values for colorize props
+* **accordion-box:** remove parameter 'title' in onClickAccordion prop
+* **colors:** green, green20, green80, purple, purple20 and purple80 colors now have 'brand'
+prefix (e.g. brandGreen)
+* **colors:** read commit description
 
 
 
 
 
-# [3.0.0-beta.5](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.4...@megafon/ui-shared@3.0.0-beta.5) (2022-01-28)
+# [2.3.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.2.1...@megafon/ui-shared@2.3.0) (2022-02-07)
 
 
 ### Features
 
-* **header:** made header as a functional component ([81701ad](https://github.com/MegafonWebLab/megafon-ui/commit/81701ad87b6e9df2fe630bf4e183383264c0bb01))
-
-
-
-
-
-# [3.0.0-beta.4](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.3...@megafon/ui-shared@3.0.0-beta.4) (2022-01-27)
-
-**Note:** Version bump only for package @megafon/ui-shared
+* **container:** fix margin rules for component TextWithIcon ([3c2de9d](https://github.com/MegafonWebLab/megafon-ui/commit/3c2de9db5a01bdd246daee22dd5545e21dce55ba))
+* **textbox:** add styles for use TextWithIcon inside component ([c993657](https://github.com/MegafonWebLab/megafon-ui/commit/c993657a2f143f87607a7d1474d44c4596d73558))
 
 
 
 
 
-# [3.0.0-beta.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.2...@megafon/ui-shared@3.0.0-beta.3) (2022-01-24)
+## [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
 
-* **accordion-box:** change type of onClickAccordion prop ([5d5cef5](https://github.com/MegafonWebLab/megafon-ui/commit/5d5cef5e2dd70efa808a6146e29daf1c882af304))
-
-
-### BREAKING CHANGES
-
-* **accordion-box:** remove parameter 'title' in onClickAccordion prop
-
+* **storebanner:** update qr code image for storebanner examples and fix qr code container styles ([1845222](https://github.com/MegafonWebLab/megafon-ui/commit/1845222e5211e70a8f5aa36ab4a710ecd46e8a14))
 
 
 
 
-# [3.0.0-beta.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.1...@megafon/ui-shared@3.0.0-beta.2) (2022-01-21)
-
-**Note:** Version bump only for package @megafon/ui-shared
-
 
-
-
-
-# [3.0.0-beta.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.0...@megafon/ui-shared@3.0.0-beta.1) (2022-01-20)
-
-
-### Bug Fixes
-
-* **colors:** renabe green and purple to brandGreen and brandPurple to avoid postcss-colormin bug ([563d97c](https://github.com/MegafonWebLab/megafon-ui/commit/563d97c42900099415a6872f57b500b87aeed647))
-
-
-### BREAKING CHANGES
-
-* **colors:** green, green20, green80, purple, purple20 and purple80 colors now have 'brand'
-prefix (e.g. brandGreen)
-
-
-
-
-
-# [3.0.0-beta.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.1.5...@megafon/ui-shared@3.0.0-beta.0) (2022-01-19)
+# [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
 
-* **colors:** css custom properties and color themes support ([b19a9a5](https://github.com/MegafonWebLab/megafon-ui/commit/b19a9a5112ebc7427d60f6514d606dd9d71ca444))
-
-
-### BREAKING CHANGES
-
-* **colors:** read commit description
+* **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))
 
 
 

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import './AccordionBox.less';
 export interface IAccordionBox {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
@@ -15,8 +15,6 @@ export interface IAccordionBox {
     isFullWidth?: boolean;
     /** Центрирование по горизонтали для расширения 1280+ */
     hCenterAlignWide?: boolean;
-    /** Вертикальные отступы */
-    hasVerticalPaddings?: boolean;
     /** Дополнительный класс для корнеовго элемента */
     className?: string;
     /** Дополнительные классы для корневого и внутренних элементов */

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

@@ -41,7 +41,9 @@ var AccordionBox = function AccordionBox(_a) {
 };
 
 AccordionBox.propTypes = {
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),
@@ -49,7 +51,6 @@ AccordionBox.propTypes = {
   isFullWidth: PropTypes.bool,
   isOpened: PropTypes.bool,
   hCenterAlignWide: PropTypes.bool,
-  hasVerticalPaddings: PropTypes.bool,
   className: PropTypes.string,
   classes: PropTypes.shape({
     openedClass: PropTypes.string,

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

@@ -16,9 +16,9 @@ export declare const ImageScaling: {
 };
 declare type ImageScalingType = typeof ImageScaling[keyof typeof ImageScaling];
 export interface IButtonBannerProps {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
     /** Дополнительный css класс для корневого элемента */
     className?: string;

package/dist/es/components/ButtonBanner/ButtonBanner.js

@@ -54,7 +54,7 @@ var ButtonBanner = function ButtonBanner(_ref) {
     onClick: onButtonClick,
     download: buttonDownload
   }, buttonText);
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       image: !!imageUrl,
       scaling: imageScaling
@@ -85,7 +85,9 @@ var ButtonBanner = function ButtonBanner(_ref) {
 };
 
 ButtonBanner.propTypes = {
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,

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

@@ -1,9 +1,9 @@
 import React, { Ref } from 'react';
 import './ButtonLinkBox.less';
 export interface IButtonLinkBoxProps {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;

package/dist/es/components/ButtonLinkBox/ButtonLinkBox.js

@@ -26,7 +26,7 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       onButtonClick = _ref.onButtonClick,
       onLinkClick = _ref.onLinkClick;
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'h-align': hAlign
     }, [className, classes.root]),
@@ -53,7 +53,9 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
 };
 
 ButtonLinkBox.propTypes = {
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,

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

@@ -344,6 +344,9 @@ h5 {
 .mfui-container .mfui-title-description-box + .mfui-download-links {
   margin-top: 32px;
 }
+.mfui-container .mfui-title-description-box + .mfui-text-with-icon {
+  margin-top: 24px;
+}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-container .mfui-title-description-box + .mfui-benefits-icons {
     margin-top: 48px;
@@ -2230,6 +2233,9 @@ h5 {
 .mfui-container .mfui-text-box + .mfui-download-links {
   margin-top: 32px;
 }
+.mfui-container .mfui-text-box + .mfui-text-with-icon {
+  margin-top: 32px;
+}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-container .mfui-text-box + .mfui-benefits-icons {
     margin-top: 48px;
@@ -2869,6 +2875,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: 32px;
+}
+.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: 32px;
+  }
+  .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: 32px;
+  }
+  .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

@@ -159,7 +159,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 var(--spbSky1);
+  border-radius: 8px;
+  background-color: var(--base);
 }
 @media screen and (max-width: 767px) {
   .mfui-store-banner__qr-code {
@@ -180,6 +189,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 {
@@ -187,9 +199,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;
@@ -208,6 +219,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;
 }
@@ -229,16 +245,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 {
@@ -260,12 +270,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;
@@ -284,8 +288,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/StoreBanner/StoreBanner.d.ts

@@ -56,9 +56,9 @@ export interface IStoreBannerProps {
     };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
 }
 declare const StoreBanner: React.FC<IStoreBannerProps>;

package/dist/es/components/StoreBanner/StoreBanner.js

@@ -52,7 +52,7 @@ var StoreBanner = function StoreBanner(_ref) {
       mask: deviceMask
     }, [className, rootClassName]),
     ref: rootRef
-  }, filterDataAttrs(dataAttrs)), /*#__PURE__*/React.createElement("div", {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
     className: cn('container')
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('grid')
@@ -139,7 +139,9 @@ StoreBanner.propTypes = {
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
-  theme: PropTypes.oneOf(Object.values(Theme))
+  theme: PropTypes.oneOf(Object.values(Theme)),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
 };
 export default StoreBanner;

package/dist/es/components/TextBox/TextBox.css

@@ -14,3 +14,12 @@ h5 {
 .mfui-text-box_text-center {
   text-align: center;
 }
+.mfui-text-box .mfui-text-with-icon {
+  margin: 24px 0;
+}
+.mfui-text-box .mfui-text-with-icon + .mfui-header {
+  margin-top: 32px;
+}
+.mfui-text-box .mfui-text-box-picture + .mfui-text-with-icon {
+  margin: 32px 0 24px;
+}

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

@@ -0,0 +1,15 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-text-with-icon__header {
+  margin-bottom: 24px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon__header {
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ITextWithIconItem } from './TextWithIconItem';
+import './TextWithIcon.less';
+export interface ITextWithIconProps {
+    /** Заголовок */
+    title?: string;
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+    /** Допустимый дочерний компонент */
+    children: React.ReactElement<ITextWithIconItem>[] | React.ReactElement<ITextWithIconItem>;
+}
+declare const TextWithIcon: React.FC<ITextWithIconProps>;
+export default TextWithIcon;

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

@@ -0,0 +1,40 @@
+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 title = _ref.title,
+      rootRef = _ref.rootRef,
+      dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn([className]),
+    ref: rootRef
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__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), children)));
+};
+
+TextWithIcon.propTypes = {
+  title: PropTypes.string,
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element.isRequired]).isRequired,
+  className: PropTypes.string
+};
+export default TextWithIcon;