@megafon/ui-shared 6.5.1 → 6.7.0

package/dist/es/components/BlogBox/components/BlogBoxTile.css

@@ -5,19 +5,19 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-blog-box-tile {
+.mfui-v6-blog-box-tile {
   position: relative;
   display: block;
   color: var(--content);
   text-decoration: none;
 }
-.mfui-blog-box-tile:hover {
+.mfui-v6-blog-box-tile:hover {
   text-decoration: none;
 }
-.mfui-blog-box-tile:hover .mfui-blog-box-tile__title {
+.mfui-v6-blog-box-tile:hover .mfui-v6-blog-box-tile__title {
   color: var(--brandGreen);
 }
-.mfui-blog-box-tile__image {
+.mfui-v6-blog-box-tile__image {
   width: 100%;
   height: 100%;
   border-radius: 24px;
@@ -25,14 +25,14 @@ h5 {
      object-fit: cover;
   vertical-align: top;
 }
-.mfui-blog-box-tile__picture {
+.mfui-v6-blog-box-tile__picture {
   display: block;
 }
-.mfui-blog-box-tile__date {
+.mfui-v6-blog-box-tile__date {
   margin-bottom: 4px;
   color: var(--spbSky3);
 }
-.mfui-blog-box-tile__title {
+.mfui-v6-blog-box-tile__title {
   /* stylelint-disable-next-line value-no-vendor-prefix */
   display: -webkit-box;
   overflow: hidden;
@@ -43,70 +43,70 @@ h5 {
   -webkit-transition: color 0.3s;
   transition: color 0.3s;
 }
-.mfui-blog-box-tile_view_thumbnail {
+.mfui-v6-blog-box-tile_view_thumbnail {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   gap: 20px;
 }
-.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture {
+.mfui-v6-blog-box-tile_view_thumbnail .mfui-v6-blog-box-tile__picture {
   -ms-flex-negative: 0;
       flex-shrink: 0;
   width: 133px;
   height: 102px;
 }
 @media screen and (min-width: 1280px) {
-  .mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture {
+  .mfui-v6-blog-box-tile_view_thumbnail .mfui-v6-blog-box-tile__picture {
     width: 170px;
     height: 130px;
   }
 }
 @media screen and (min-width: 1440px) {
-  .mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture {
+  .mfui-v6-blog-box-tile_view_thumbnail .mfui-v6-blog-box-tile__picture {
     width: 233px;
     height: 170px;
   }
 }
-.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__content {
+.mfui-v6-blog-box-tile_view_thumbnail .mfui-v6-blog-box-tile__content {
   -ms-flex-item-align: center;
       align-self: center;
 }
-.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__date {
+.mfui-v6-blog-box-tile_view_thumbnail .mfui-v6-blog-box-tile__date {
   font-size: 12px;
   line-height: 18px;
 }
 @media screen and (min-width: 1280px) {
-  .mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__date {
+  .mfui-v6-blog-box-tile_view_thumbnail .mfui-v6-blog-box-tile__date {
     font-size: 15px;
     line-height: 24px;
   }
 }
-.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__title {
+.mfui-v6-blog-box-tile_view_thumbnail .mfui-v6-blog-box-tile__title {
   font-weight: 500;
   font-size: 18px;
   line-height: 24px;
   letter-spacing: 0.5px;
 }
 @media screen and (min-width: 1280px) {
-  .mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__title {
+  .mfui-v6-blog-box-tile_view_thumbnail .mfui-v6-blog-box-tile__title {
     font-size: 20px;
     line-height: 28px;
   }
 }
-.mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture {
+.mfui-v6-blog-box-tile_view_full .mfui-v6-blog-box-tile__picture {
   height: 358px;
 }
 @media screen and (min-width: 1280px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture {
+  .mfui-v6-blog-box-tile_view_full .mfui-v6-blog-box-tile__picture {
     height: 438px;
   }
 }
 @media screen and (min-width: 1440px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture {
+  .mfui-v6-blog-box-tile_view_full .mfui-v6-blog-box-tile__picture {
     height: 558px;
   }
 }
-.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
+.mfui-v6-blog-box-tile_view_full .mfui-v6-blog-box-tile__content {
   position: absolute;
   right: 8px;
   bottom: 8px;
@@ -116,65 +116,65 @@ h5 {
   background-color: var(--base);
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
+  .mfui-v6-blog-box-tile_view_full .mfui-v6-blog-box-tile__content {
     padding: 24px;
   }
 }
 @media screen and (min-width: 768px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
+  .mfui-v6-blog-box-tile_view_full .mfui-v6-blog-box-tile__content {
     right: 12px;
     bottom: 12px;
     left: 12px;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
+  .mfui-v6-blog-box-tile_view_full .mfui-v6-blog-box-tile__content {
     padding: 16px;
   }
 }
 @media screen and (min-width: 1280px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
+  .mfui-v6-blog-box-tile_view_full .mfui-v6-blog-box-tile__content {
     padding: 24px;
   }
 }
-.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title {
+.mfui-v6-blog-box-tile_view_full .mfui-v6-blog-box-tile__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-blog-box-tile_view_full .mfui-blog-box-tile__title {
+  .mfui-v6-blog-box-tile_view_full .mfui-v6-blog-box-tile__title {
     font-size: 26px;
     line-height: 32px;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__title {
+  .mfui-v6-blog-box-tile_view_full .mfui-v6-blog-box-tile__title {
     font-size: 28px;
     line-height: 36px;
   }
 }
 @media screen and (min-width: 1280px) {
-  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__title {
+  .mfui-v6-blog-box-tile_view_full .mfui-v6-blog-box-tile__title {
     font-size: 32px;
     line-height: 40px;
   }
 }
-.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture {
+.mfui-v6-blog-box-tile_view_compact .mfui-v6-blog-box-tile__picture {
   height: 233px;
 }
 @media screen and (min-width: 1280px) {
-  .mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture {
+  .mfui-v6-blog-box-tile_view_compact .mfui-v6-blog-box-tile__picture {
     height: 288px;
   }
 }
 @media screen and (min-width: 1440px) {
-  .mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture {
+  .mfui-v6-blog-box-tile_view_compact .mfui-v6-blog-box-tile__picture {
     height: 367px;
   }
 }
-.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__content {
+.mfui-v6-blog-box-tile_view_compact .mfui-v6-blog-box-tile__content {
   position: absolute;
   right: 12px;
   bottom: 12px;
@@ -183,14 +183,14 @@ h5 {
   border-radius: 24px;
   background-color: var(--base);
 }
-.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__title {
+.mfui-v6-blog-box-tile_view_compact .mfui-v6-blog-box-tile__title {
   font-weight: 500;
   font-size: 18px;
   line-height: 24px;
   letter-spacing: 0.5px;
 }
 @media screen and (min-width: 1280px) {
-  .mfui-blog-box-tile_view_compact .mfui-blog-box-tile__title {
+  .mfui-v6-blog-box-tile_view_compact .mfui-v6-blog-box-tile__title {
     font-size: 20px;
     line-height: 28px;
   }

package/dist/es/components/BlogBox/components/BlogBoxTile.js

@@ -3,7 +3,7 @@ import { breakpoints, cnCreate } from '@megafon/ui-helpers';
 import { setRelAttribute } from "../../../helpers/setRelAttribute";
 import useResolutions from "../../../hooks/useResolutions";
 import "./BlogBoxTile.css";
-var cn = cnCreate('mfui-blog-box-tile');
+var cn = cnCreate('mfui-v6-blog-box-tile');
 
 var BlogBoxTile = function BlogBoxTile(_ref) {
   var date = _ref.date,

package/dist/es/components/Breadcrumbs/Breadcrumbs.css

@@ -5,39 +5,42 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-breadcrumbs {
+.mfui-v6-breadcrumbs {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.mfui-breadcrumbs_color_default .mfui-breadcrumbs__item:before {
+.mfui-v6-breadcrumbs_color_default .mfui-v6-breadcrumbs__item:before {
   color: var(--content);
 }
-.mfui-breadcrumbs_color_black .mfui-breadcrumbs__item:before {
+.mfui-v6-breadcrumbs_color_black .mfui-v6-breadcrumbs__item:before {
   color: var(--stcBlack);
 }
-.mfui-breadcrumbs_color_white .mfui-breadcrumbs__item:before {
+.mfui-v6-breadcrumbs_color_white .mfui-v6-breadcrumbs__item:before {
   color: var(--stcWhite);
 }
-.mfui-breadcrumbs__item {
+.mfui-v6-breadcrumbs_margin-top {
+  margin-top: 24px;
+}
+.mfui-v6-breadcrumbs__item {
   position: relative;
   margin-right: 10px;
   padding-left: 26px;
 }
-.mfui-breadcrumbs__item:before {
+.mfui-v6-breadcrumbs__item:before {
   content: '→';
   position: absolute;
   top: -1px;
   left: 0;
 }
-.mfui-breadcrumbs__item:first-child {
+.mfui-v6-breadcrumbs__item:first-child {
   padding-left: 0;
 }
-.mfui-breadcrumbs__item:first-child:before {
+.mfui-v6-breadcrumbs__item:first-child:before {
   display: none;
 }
-.mfui-breadcrumbs__item:last-child {
+.mfui-v6-breadcrumbs__item:last-child {
   pointer-events: none;
 }

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

@@ -16,6 +16,10 @@ export declare type Props = {
     color?: TextColorType;
     /** Включить микроразметку */
     hasMicrodata?: boolean;
+    /** Отключить на разрешении < 768 px */
+    disabledOnMobile?: boolean;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
         item?: string;

package/dist/es/components/Breadcrumbs/Breadcrumbs.js

@@ -5,6 +5,7 @@ import "core-js/modules/es.object.values.js";
 import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
+import useResolutions from "../../hooks/useResolutions";
 import BreadcrumbsItem, { TextColor } from "./components/BreadcrumbsItem";
 import "./Breadcrumbs.css";
 
@@ -12,7 +13,7 @@ var isObjectElement = function isObjectElement(item) {
   return ! /*#__PURE__*/React.isValidElement(item);
 };
 
-var cn = cnCreate('mfui-breadcrumbs');
+var cn = cnCreate('mfui-v6-breadcrumbs');
 
 var Breadcrumbs = function Breadcrumbs(_ref) {
   var items = _ref.items,
@@ -23,10 +24,23 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       dataAttrs = _ref.dataAttrs,
       _ref$hasMicrodata = _ref.hasMicrodata,
-      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata;
+      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
+      _ref$disabledOnMobile = _ref.disabledOnMobile,
+      disabledOnMobile = _ref$disabledOnMobile === void 0 ? false : _ref$disabledOnMobile,
+      _ref$hasMarginTop = _ref.hasMarginTop,
+      hasMarginTop = _ref$hasMarginTop === void 0 ? false : _ref$hasMarginTop;
+
+  var _useResolutions = useResolutions(),
+      isMobile = _useResolutions.isMobile;
+
+  if (isMobile && disabledOnMobile) {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
-      color: color
+      color: color,
+      'margin-top': hasMarginTop
     }, className)
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), hasMicrodata && {
     itemScope: true,
@@ -79,6 +93,7 @@ Breadcrumbs.propTypes = {
     href: PropTypes.string
   }).isRequired)]).isRequired,
   color: PropTypes.oneOf(Object.values(TextColor)),
-  hasMicrodata: PropTypes.bool
+  hasMicrodata: PropTypes.bool,
+  disabledOnMobile: PropTypes.bool
 };
 export default Breadcrumbs;

package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.css

@@ -5,12 +5,12 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-breadcrumbs-item_color_default {
+.mfui-v6-breadcrumbs-item_color_default {
   color: var(--content);
 }
-.mfui-breadcrumbs-item_color_black {
+.mfui-v6-breadcrumbs-item_color_black {
   color: var(--stcBlack);
 }
-.mfui-breadcrumbs-item_color_white {
+.mfui-v6-breadcrumbs-item_color_white {
   color: var(--stcWhite);
 }

package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.js

@@ -11,7 +11,7 @@ export var TextColor = {
   BLACK: 'black',
   WHITE: 'white'
 };
-var cn = cnCreate('mfui-breadcrumbs-item');
+var cn = cnCreate('mfui-v6-breadcrumbs-item');
 
 var BreadcrumbsItem = function BreadcrumbsItem(_ref) {
   var title = _ref.title,

package/dist/es/components/ButtonBanner/ButtonBanner.css

@@ -5,18 +5,18 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-button-banner {
+.mfui-v6-button-banner {
   position: relative;
   border: 1px solid var(--spbSky2);
   background-color: var(--base);
   border-radius: 0 12px 12px 0;
 }
 @media screen and (max-width: 767px) {
-  .mfui-button-banner {
+  .mfui-v6-button-banner {
     border-radius: 0 0 12px 12px;
   }
 }
-.mfui-button-banner:before {
+.mfui-v6-button-banner:before {
   content: '';
   position: absolute;
   top: 0;
@@ -27,44 +27,44 @@ h5 {
   border-radius: 0 12px 12px 0;
 }
 @media screen and (max-width: 767px) {
-  .mfui-button-banner:before {
+  .mfui-v6-button-banner:before {
     border-radius: 0 0 12px 12px;
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-button-banner:before {
+  .mfui-v6-button-banner:before {
     right: 0;
     bottom: auto;
     width: auto;
     height: 12px;
   }
 }
-.mfui-button-banner__content {
+.mfui-v6-button-banner__content {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
 @media screen and (max-width: 767px) {
-  .mfui-button-banner__content {
+  .mfui-v6-button-banner__content {
     padding: 36px 16px 32px;
     text-align: center;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-button-banner__content {
+  .mfui-v6-button-banner__content {
     padding: 32px 0;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-button-banner__content {
+  .mfui-v6-button-banner__content {
     padding: 40px 0;
   }
 }
 @media screen and (min-width: 1280px) {
-  .mfui-button-banner__content {
+  .mfui-v6-button-banner__content {
     padding: 48px 0;
   }
 }
-.mfui-button-banner__media {
+.mfui-v6-button-banner__media {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -82,41 +82,41 @@ h5 {
   border-radius: 0 12px 12px 0;
 }
 @media screen and (max-width: 767px) {
-  .mfui-button-banner__media {
+  .mfui-v6-button-banner__media {
     border-radius: 0 0 12px 12px;
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-button-banner__media {
+  .mfui-v6-button-banner__media {
     height: auto;
     padding: 0 16px 24px;
   }
 }
-.mfui-button-banner_scaling_cover .mfui-button-banner__media {
+.mfui-v6-button-banner_scaling_cover .mfui-v6-button-banner__media {
   background-size: cover;
 }
-.mfui-button-banner_scaling_contain .mfui-button-banner__media {
+.mfui-v6-button-banner_scaling_contain .mfui-v6-button-banner__media {
   background-size: contain;
 }
-.mfui-button-banner__header {
+.mfui-v6-button-banner__header {
   margin-bottom: 16px;
 }
-.mfui-button-banner__button {
+.mfui-v6-button-banner__button {
   max-width: 100%;
 }
-.mfui-button-banner__text {
+.mfui-v6-button-banner__text {
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 }
-.mfui-button-banner_image .mfui-button-banner__media {
+.mfui-v6-button-banner_image .mfui-v6-button-banner__media {
   padding: 0;
 }
 @media screen and (max-width: 767px) {
-  .mfui-button-banner_image .mfui-button-banner__media {
+  .mfui-v6-button-banner_image .mfui-v6-button-banner__media {
     height: 222px;
   }
 }
-.mfui-button-banner_image .mfui-button-banner__text {
+.mfui-v6-button-banner_image .mfui-v6-button-banner__text {
   margin-bottom: 32px;
 }

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

@@ -28,7 +28,7 @@ var getMediaStyle = function getMediaStyle(imageUrl) {
   } : undefined;
 };
 
-var cn = cnCreate('mfui-button-banner');
+var cn = cnCreate('mfui-v6-button-banner');
 var testIdPrefix = 'ButtonBanner';
 
 var ButtonBanner = function ButtonBanner(_ref) {

package/dist/es/components/ButtonLinkBox/ButtonLinkBox.css

@@ -5,15 +5,15 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-button-link-box {
+.mfui-v6-button-link-box {
   font-family: inherit;
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
 }
-.mfui-button-link-box__row:not(:last-child) {
+.mfui-v6-button-link-box__row:not(:last-child) {
   margin-bottom: 32px;
 }
-.mfui-button-link-box_h-align_center {
+.mfui-v6-button-link-box_h-align_center {
   text-align: center;
 }

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

@@ -5,7 +5,7 @@ import { Button, TextLink } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./ButtonLinkBox.css";
-var cn = cnCreate('mfui-button-link-box');
+var cn = cnCreate('mfui-v6-button-link-box');
 
 var ButtonLinkBox = function ButtonLinkBox(_ref) {
   var dataAttrs = _ref.dataAttrs,