@megafon/ui-shared 6.5.1 → 6.7.0

package/dist/es/components/Container/Container.js

@@ -11,7 +11,7 @@ export var BackgroundColors = {
   GREEN: 'green',
   PURPLE: 'purple'
 };
-var cn = cnCreate('mfui-container');
+var cn = cnCreate('mfui-v6-container');
 
 var Container = function Container(_ref) {
   var _ref$backgroundColor = _ref.backgroundColor,

package/dist/es/components/DarkGradientCards/DarkGradientCards.css

@@ -5,13 +5,13 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-dark-gradient-cards__cards {
+.mfui-v6-dark-gradient-cards__cards {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   gap: 20px;
 }
-.mfui-dark-gradient-cards__cards .mfui-dark-gradient-cards__card {
+.mfui-v6-dark-gradient-cards__cards .mfui-v6-dark-gradient-cards__card {
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;

package/dist/es/components/DarkGradientCards/DarkGradientCards.js

@@ -16,7 +16,7 @@ var carouselParams = _defineProperty({}, breakpoints.MOBILE_SMALL_START, {
 
 var CAROUSEL_THRESHOLD = 5;
 var MIN_ITEMS_COUNT = 3;
-var cn = cnCreate('mfui-dark-gradient-cards');
+var cn = cnCreate('mfui-v6-dark-gradient-cards');
 
 var DarkGradientCards = function DarkGradientCards(_ref) {
   var items = _ref.items,

package/dist/es/components/DarkGradientCards/components/DarkGradientCard.css

@@ -5,7 +5,7 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-dark-gradient-card {
+.mfui-v6-dark-gradient-card {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -20,44 +20,44 @@ h5 {
   background-size: cover;
 }
 @media screen and (max-width: 359px) {
-  .mfui-dark-gradient-card {
+  .mfui-v6-dark-gradient-card {
     width: 265px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-dark-gradient-card {
+  .mfui-v6-dark-gradient-card {
     width: 211px;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-dark-gradient-card {
+  .mfui-v6-dark-gradient-card {
     min-height: 520px;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-dark-gradient-card {
+  .mfui-v6-dark-gradient-card {
     width: 285px;
   }
 }
 @media screen and (min-width: 1280px) and (max-width: 1439px) {
-  .mfui-dark-gradient-card {
+  .mfui-v6-dark-gradient-card {
     width: 265px;
   }
 }
 @media screen and (min-width: 1280px) {
-  .mfui-dark-gradient-card {
+  .mfui-v6-dark-gradient-card {
     padding: 32px;
   }
 }
 @media screen and (min-width: 1440px) {
-  .mfui-dark-gradient-card {
+  .mfui-v6-dark-gradient-card {
     width: 345px;
   }
 }
-.mfui-dark-gradient-card:hover {
+.mfui-v6-dark-gradient-card:hover {
   text-decoration: none;
 }
-.mfui-dark-gradient-card:before {
+.mfui-v6-dark-gradient-card:before {
   content: '';
   position: absolute;
   top: 0;
@@ -69,31 +69,31 @@ h5 {
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000000));
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);
 }
-.mfui-dark-gradient-card_active:hover.mfui-dark-gradient-card:before {
+.mfui-v6-dark-gradient-card_active:hover.mfui-v6-dark-gradient-card:before {
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.9)));
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-dark-gradient-card_size_big {
+  .mfui-v6-dark-gradient-card_size_big {
     width: 441px;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-dark-gradient-card_size_big {
+  .mfui-v6-dark-gradient-card_size_big {
     width: 591px;
   }
 }
 @media screen and (min-width: 1280px) and (max-width: 1439px) {
-  .mfui-dark-gradient-card_size_big {
+  .mfui-v6-dark-gradient-card_size_big {
     width: 550px;
   }
 }
 @media screen and (min-width: 1440px) {
-  .mfui-dark-gradient-card_size_big {
+  .mfui-v6-dark-gradient-card_size_big {
     width: 710px;
   }
 }
-.mfui-dark-gradient-card__inner {
+.mfui-v6-dark-gradient-card__inner {
   position: relative;
   z-index: 1;
   display: -webkit-box;
@@ -106,50 +106,50 @@ h5 {
   gap: 12px;
   width: 100%;
 }
-.mfui-dark-gradient-card__title {
+.mfui-v6-dark-gradient-card__title {
   margin-top: auto;
 }
-.mfui-dark-gradient-card_size_small .mfui-dark-gradient-card__title {
+.mfui-v6-dark-gradient-card_size_small .mfui-v6-dark-gradient-card__title {
   font-weight: 500;
   font-size: 18px;
   line-height: 24px;
   letter-spacing: 0.5px;
 }
 @media screen and (min-width: 1280px) {
-  .mfui-dark-gradient-card_size_small .mfui-dark-gradient-card__title {
+  .mfui-v6-dark-gradient-card_size_small .mfui-v6-dark-gradient-card__title {
     font-size: 20px;
     line-height: 28px;
   }
 }
-.mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
+.mfui-v6-dark-gradient-card_size_big .mfui-v6-dark-gradient-card__title {
   font-weight: 600;
   font-size: 22px;
   line-height: 28px;
   letter-spacing: 0.5px;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
+  .mfui-v6-dark-gradient-card_size_big .mfui-v6-dark-gradient-card__title {
     font-size: 26px;
     line-height: 32px;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
+  .mfui-v6-dark-gradient-card_size_big .mfui-v6-dark-gradient-card__title {
     font-size: 28px;
     line-height: 36px;
   }
 }
 @media screen and (min-width: 1280px) {
-  .mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
+  .mfui-v6-dark-gradient-card_size_big .mfui-v6-dark-gradient-card__title {
     font-size: 32px;
     line-height: 40px;
   }
 }
-.mfui-dark-gradient-card__subtitle {
+.mfui-v6-dark-gradient-card__subtitle {
   font-size: 15px;
   line-height: 24px;
 }
-.mfui-dark-gradient-card__more {
+.mfui-v6-dark-gradient-card__more {
   font-size: 15px;
   line-height: 24px;
   font-weight: 500;
@@ -161,13 +161,13 @@ h5 {
       -ms-flex-align: start;
           align-items: flex-start;
 }
-.mfui-dark-gradient-card__more-icon {
+.mfui-v6-dark-gradient-card__more-icon {
   display: block;
   width: 24px;
   min-width: 24px;
   max-height: 24px;
 }
-.mfui-dark-gradient-card__more-icon svg {
+.mfui-v6-dark-gradient-card__more-icon svg {
   display: block;
   width: 100%;
   height: 100%;

package/dist/es/components/DarkGradientCards/components/DarkGradientCard.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { cnCreate, convert } from '@megafon/ui-helpers';
 import { setRelAttribute } from "../../../helpers/setRelAttribute";
 import "./DarkGradientCard.css";
-var cn = cnCreate('mfui-dark-gradient-card');
+var cn = cnCreate('mfui-v6-dark-gradient-card');
 
 var DarkGradientCard = function DarkGradientCard(_ref) {
   var imageSrc = _ref.imageSrc,

package/dist/es/components/DownloadLinks/DownloadLink.css

@@ -5,12 +5,12 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-download-link {
+.mfui-v6-download-link {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.mfui-download-link__icon {
+.mfui-v6-download-link__icon {
   -ms-flex-negative: 0;
       flex-shrink: 0;
   width: 40px;
@@ -19,16 +19,16 @@ h5 {
   fill: var(--content);
 }
 @media screen and (max-width: 1023px) {
-  .mfui-download-link__icon {
+  .mfui-v6-download-link__icon {
     width: 32px;
     height: 32px;
   }
 }
-.mfui-download-link__icon-svg {
+.mfui-v6-download-link__icon-svg {
   width: inherit;
   height: inherit;
 }
-.mfui-download-link__info {
+.mfui-v6-download-link__info {
   margin: 0;
   font-size: 12px;
   line-height: 18px;

package/dist/es/components/DownloadLinks/DownloadLink.js

@@ -15,7 +15,7 @@ var DownloadIcon = function DownloadIcon(props) {
   }));
 };
 
-var cn = cnCreate('mfui-download-link');
+var cn = cnCreate('mfui-v6-download-link');
 
 var DownloadLink = function DownloadLink(_ref) {
   var href = _ref.href,

package/dist/es/components/DownloadLinks/DownloadLinks.css

@@ -6,31 +6,31 @@ h5 {
   margin: 0;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-download-links__column:nth-child(n + 4) {
+  .mfui-v6-download-links__column:nth-child(n + 4) {
     margin-top: 24px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-download-links__column:nth-child(n + 3) {
+  .mfui-v6-download-links__column:nth-child(n + 3) {
     margin-top: 24px;
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-download-links__column:not(:first-child) {
+  .mfui-v6-download-links__column:not(:first-child) {
     margin-top: 24px;
   }
 }
 @media screen and (min-width: 768px) {
-  .mfui-download-links_count_2 .mfui-download-links__column:nth-child(n + 2) {
+  .mfui-v6-download-links_count_2 .mfui-v6-download-links__column:nth-child(n + 2) {
     margin-top: 24px;
   }
 }
 @media screen and (min-width: 768px) {
-  .mfui-download-links_count_3 .mfui-download-links__column:nth-child(n + 3),
-  .mfui-download-links_count_4 .mfui-download-links__column:nth-child(n + 3) {
+  .mfui-v6-download-links_count_3 .mfui-v6-download-links__column:nth-child(n + 3),
+  .mfui-v6-download-links_count_4 .mfui-v6-download-links__column:nth-child(n + 3) {
     margin-top: 24px;
   }
 }
-.mfui-download-links__item:not(:first-child) {
+.mfui-v6-download-links__item:not(:first-child) {
   margin-top: 24px;
 }

package/dist/es/components/DownloadLinks/DownloadLinks.js

@@ -35,7 +35,7 @@ export var getColumnConfig = function getColumnConfig(itemsCount) {
   }
 };
 var testIdPrefix = 'DownloadLinks';
-var cn = cnCreate('mfui-download-links');
+var cn = cnCreate('mfui-v6-download-links');
 
 var DownloadLinks = function DownloadLinks(_ref) {
   var _ref$inOneColumn = _ref.inOneColumn,

package/dist/es/components/ImageBanner/ImageBanner.css

@@ -5,7 +5,7 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-image-banner {
+.mfui-v6-image-banner {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -20,7 +20,7 @@ h5 {
   overflow: hidden;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-image-banner {
+  .mfui-v6-image-banner {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
@@ -31,7 +31,7 @@ h5 {
     height: 420px;
   }
 }
-.mfui-image-banner__picture {
+.mfui-v6-image-banner__picture {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -42,90 +42,90 @@ h5 {
           justify-content: center;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-image-banner__picture {
+  .mfui-v6-image-banner__picture {
     width: 50%;
     max-width: 672px;
     height: 100%;
   }
 }
-.mfui-image-banner__picture_v-align_top {
+.mfui-v6-image-banner__picture_v-align_top {
   -webkit-box-align: start;
       -ms-flex-align: start;
           align-items: flex-start;
 }
-.mfui-image-banner__picture_v-align_center {
+.mfui-v6-image-banner__picture_v-align_center {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
-.mfui-image-banner__picture_v-align_bottom {
+.mfui-v6-image-banner__picture_v-align_bottom {
   -webkit-box-align: end;
       -ms-flex-align: end;
           align-items: flex-end;
 }
-.mfui-image-banner__image {
+.mfui-v6-image-banner__image {
   display: block;
   max-width: 100%;
   max-height: 150px;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-image-banner__image {
+  .mfui-v6-image-banner__image {
     max-height: 230px;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-image-banner__image {
+  .mfui-v6-image-banner__image {
     max-height: 100%;
     -o-object-fit: contain;
        object-fit: contain;
   }
 }
-.mfui-image-banner__content {
+.mfui-v6-image-banner__content {
   z-index: 1;
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
 }
 @media screen and (max-width: 1023px) {
-  .mfui-image-banner__content {
+  .mfui-v6-image-banner__content {
     padding: 24px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-image-banner__content {
+  .mfui-v6-image-banner__content {
     text-align: center;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-image-banner__content {
+  .mfui-v6-image-banner__content {
     width: 50%;
     padding: 0 80px;
   }
 }
-.mfui-image-banner__description {
+.mfui-v6-image-banner__description {
   margin-top: 16px;
   white-space: pre-wrap;
 }
-.mfui-image-banner__cost {
+.mfui-v6-image-banner__cost {
   font-size: 15px;
   line-height: 24px;
   font-weight: 500;
   margin-top: 16px;
 }
-.mfui-image-banner__value {
+.mfui-v6-image-banner__value {
   display: inline;
   margin: 0 4px;
 }
 @media screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-image-banner__value {
+  .mfui-v6-image-banner__value {
     line-height: 21px;
   }
 }
-.mfui-image-banner__title,
-.mfui-image-banner__text {
+.mfui-v6-image-banner__title,
+.mfui-v6-image-banner__text {
   white-space: pre-wrap;
 }
-.mfui-image-banner__children {
+.mfui-v6-image-banner__children {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -142,14 +142,14 @@ h5 {
   margin-top: 32px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-image-banner__children {
+  .mfui-v6-image-banner__children {
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
   }
 }
 @media screen and (min-width: 768px) {
-  .mfui-image-banner__children {
+  .mfui-v6-image-banner__children {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
@@ -157,21 +157,21 @@ h5 {
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-image-banner__children {
+  .mfui-v6-image-banner__children {
     -webkit-box-pack: start;
         -ms-flex-pack: start;
             justify-content: flex-start;
   }
 }
 @media screen and (max-width: 1023px) {
-  .mfui-image-banner__badges-container {
+  .mfui-v6-image-banner__badges-container {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     gap: 8px;
   }
 }
-.mfui-image-banner__badges {
+.mfui-v6-image-banner__badges {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -183,36 +183,39 @@ h5 {
   gap: 8px;
   margin-bottom: 16px;
 }
-.mfui-image-banner__ad-block {
+.mfui-v6-image-banner__ad-block {
   margin: 0 0 16px auto;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-image-banner__ad-block {
+  .mfui-v6-image-banner__ad-block {
     position: absolute;
     top: 24px;
     right: 24px;
   }
 }
-.mfui-image-banner_radius_rounded {
+.mfui-v6-image-banner_margin-top {
+  margin-top: 24px;
+}
+.mfui-v6-image-banner_radius_rounded {
   border-radius: 24px;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-image-banner_auto-height .mfui-image-banner__content {
+  .mfui-v6-image-banner_auto-height .mfui-v6-image-banner__content {
     padding: 48px 80px;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-image-banner_auto-height {
+  .mfui-v6-image-banner_auto-height {
     height: auto;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-image-banner_has-image .mfui-image-banner__content {
+  .mfui-v6-image-banner_has-image .mfui-v6-image-banner__content {
     padding-right: 0;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-image-banner_full-width .mfui-image-banner__image {
+  .mfui-v6-image-banner_full-width .mfui-v6-image-banner__image {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -221,32 +224,32 @@ h5 {
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__image {
+  .mfui-v6-image-banner_full-width.mfui-v6-image-banner_auto-height .mfui-v6-image-banner__image {
     width: 100%;
     height: 100%;
     -o-object-fit: cover;
        object-fit: cover;
   }
 }
-.mfui-image-banner_background-color_green {
+.mfui-v6-image-banner_background-color_green {
   background-color: var(--brandGreen);
 }
-.mfui-image-banner_background-color_purple {
+.mfui-v6-image-banner_background-color_purple {
   background-color: var(--brandPurple);
 }
-.mfui-image-banner_background-color_gradient {
+.mfui-v6-image-banner_background-color_gradient {
   background: -webkit-gradient(linear, right top, left top, from(#ADA6BA), to(#F6F2F9));
   background: linear-gradient(270deg, #ADA6BA 0%, #F6F2F9 100%);
 }
-.mfui-image-banner_background-color_light {
+.mfui-v6-image-banner_background-color_light {
   background-color: #F6F2F9;
 }
-.mfui-image-banner_background-color_spbSky0 {
+.mfui-v6-image-banner_background-color_spbSky0 {
   background-color: var(--spbSky0);
 }
-.mfui-image-banner_text-color_light .mfui-image-banner__content {
+.mfui-v6-image-banner_text-color_light .mfui-v6-image-banner__content {
   color: var(--stcWhite);
 }
-.mfui-image-banner_text-color_dark .mfui-image-banner__content {
+.mfui-v6-image-banner_text-color_dark .mfui-v6-image-banner__content {
   color: var(--stcBlack);
 }

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

@@ -84,6 +84,8 @@ export interface IImageBannerProps {
     badges?: JSX.Element[] | JSX.Element;
     /** Элемент блока с рекламой */
     adBlock?: JSX.Element | null;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
 }
 declare const ImageBanner: React.FC<IImageBannerProps>;
 export default ImageBanner;

package/dist/es/components/ImageBanner/ImageBanner.js

@@ -42,7 +42,7 @@ var getTheme = function getTheme(backgrounColor) {
   }
 };
 
-var cn = cnCreate('mfui-image-banner');
+var cn = cnCreate('mfui-v6-image-banner');
 var typographyConfig = {
   b: {
     component: function component(_ref) {
@@ -91,6 +91,8 @@ var ImageBanner = function ImageBanner(_ref2) {
       isImageFullWidth = _ref2.isImageFullWidth,
       badges = _ref2.badges,
       adBlock = _ref2.adBlock,
+      _ref2$hasMarginTop = _ref2.hasMarginTop,
+      hasMarginTop = _ref2$hasMarginTop === void 0 ? false : _ref2$hasMarginTop,
       _ref2$children = _ref2.children,
       children = _ref2$children === void 0 ? [] : _ref2$children;
 
@@ -160,7 +162,8 @@ var ImageBanner = function ImageBanner(_ref2) {
       'has-image': hasImage,
       'auto-height': autoHeight,
       'full-width': isImageFullWidth,
-      radius: radius
+      radius: radius,
+      'margin-top': hasMarginTop
     }, [className, classes.root]),
     ref: rootRef
   }), renderContent, hasImage && renderImage);
@@ -205,6 +208,7 @@ ImageBanner.propTypes = {
   autoHeight: PropTypes.bool,
   isImageFullWidth: PropTypes.bool,
   badges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]),
-  adBlock: PropTypes.element
+  adBlock: PropTypes.element,
+  hasMarginTop: PropTypes.bool
 };
 export default ImageBanner;