@megafon/ui-shared 6.0.0-beta.1 → 6.0.0-beta.3

package/dist/lib/components/ImageBanner/ImageBanner.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-image-banner{overflow:hidden;position:relative}@media screen and (min-width:1024px){.mfui-image-banner{height:420px;padding:0 80px}.mfui-image-banner__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;height:100%;justify-content:space-between}}.mfui-image-banner__picture{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width:1024px){.mfui-image-banner__picture{height:100%;width:356px}}@media screen and (min-width:1280px){.mfui-image-banner__picture{width:408px}}.mfui-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{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-image-banner__picture_v-align_bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.mfui-image-banner__background-image{display:block;max-height:250px;max-width:100%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-image-banner__background-image{max-height:280px}}@media screen and (min-width:1024px){.mfui-image-banner__background-image{max-height:100%;-o-object-fit:contain;object-fit:contain}}.mfui-image-banner__content{z-index:1}@media screen and (max-width:1023px){.mfui-image-banner__content{padding:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-image-banner__content{text-align:center}}@media screen and (max-width:1023px){.mfui-image-banner_bottom-offset .mfui-image-banner__content{padding-bottom:72px}}.mfui-image-banner__description{margin-top:16px;white-space:pre-wrap}.mfui-image-banner__cost{font-size:15px;font-weight:500;line-height:24px;margin-top:16px}.mfui-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{line-height:21px}}.mfui-image-banner__text,.mfui-image-banner__title{white-space:pre-wrap}.mfui-image-banner__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:32px}@media screen and (min-width:768px){.mfui-image-banner__children{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}@media screen and (min-width:1024px){.mfui-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{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px}}.mfui-image-banner__badges{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;margin-bottom:16px}.mfui-image-banner__ad-block{margin:0 0 16px auto}@media screen and (min-width:1024px){.mfui-image-banner__ad-block{position:absolute;right:24px;top:24px}}.mfui-image-banner_radius_rounded{border-radius:24px}@media screen and (min-width:1024px){.mfui-image-banner_auto-height .mfui-image-banner__content{padding:48px 0}.mfui-image-banner_auto-height{height:auto}.mfui-image-banner_full-width .mfui-image-banner__background-image{bottom:0;display:block;max-width:unset;position:absolute;right:0}.mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__background-image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}}.mfui-image-banner_background-color_green{background-color:var(--brandGreen)}.mfui-image-banner_background-color_purple{background-color:var(--brandPurple)}.mfui-image-banner_background-color_gradient{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-image-banner_background-color_light{background-color:#f6f2f9}.mfui-image-banner_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-image-banner_text-color_light .mfui-image-banner__content{color:var(--stcWhite)}.mfui-image-banner_text-color_dark .mfui-image-banner__content{color:var(--stcBlack)}
+h1,h2,h3,h4,h5{margin:0}.mfui-image-banner{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden}@media screen and (min-width:1024px){.mfui-image-banner{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:420px}}.mfui-image-banner__picture{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width:1024px){.mfui-image-banner__picture{height:100%;max-width:672px;width:50%}}.mfui-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{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-image-banner__picture_v-align_bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.mfui-image-banner__image{display:block;max-height:150px;max-width:100%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-image-banner__image{max-height:230px}}@media screen and (min-width:1024px){.mfui-image-banner__image{max-height:100%;-o-object-fit:contain;object-fit:contain}}.mfui-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{padding:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-image-banner__content{text-align:center}}@media screen and (min-width:1024px){.mfui-image-banner__content{padding:0 80px;width:50%}}.mfui-image-banner__description{margin-top:16px;white-space:pre-wrap}.mfui-image-banner__cost{font-size:15px;font-weight:500;line-height:24px;margin-top:16px}.mfui-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{line-height:21px}}.mfui-image-banner__text,.mfui-image-banner__title{white-space:pre-wrap}.mfui-image-banner__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:32px}@media screen and (max-width:767px){.mfui-image-banner__children{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}@media screen and (min-width:768px){.mfui-image-banner__children{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}@media screen and (min-width:1024px){.mfui-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{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px}}.mfui-image-banner__badges{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;margin-bottom:16px}.mfui-image-banner__ad-block{margin:0 0 16px auto}@media screen and (min-width:1024px){.mfui-image-banner__ad-block{position:absolute;right:24px;top:24px}}.mfui-image-banner_radius_rounded{border-radius:24px}@media screen and (min-width:1024px){.mfui-image-banner_auto-height .mfui-image-banner__content{padding:48px 80px}.mfui-image-banner_auto-height{height:auto}.mfui-image-banner_has-image .mfui-image-banner__content{padding-right:0}.mfui-image-banner_full-width .mfui-image-banner__image{bottom:0;display:block;max-width:unset;position:absolute;right:0}.mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}}.mfui-image-banner_background-color_green{background-color:var(--brandGreen)}.mfui-image-banner_background-color_purple{background-color:var(--brandPurple)}.mfui-image-banner_background-color_gradient{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-image-banner_background-color_light{background-color:#f6f2f9}.mfui-image-banner_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-image-banner_text-color_light .mfui-image-banner__content{color:var(--stcWhite)}.mfui-image-banner_text-color_dark .mfui-image-banner__content{color:var(--stcBlack)}

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { PriceBadge } from '@megafon/ui-core';
 import './ImageBanner.scss';
 export declare const BackgroundColor: {
     readonly TRANSPARENT: "transparent";
@@ -26,11 +25,6 @@ export declare const ImageVerticalAlign: {
     readonly BOTTOM: "bottom";
 };
 export type ImageVerticalAlignType = (typeof ImageVerticalAlign)[keyof typeof ImageVerticalAlign];
-type PriceBadgeTypes = React.ComponentProps<typeof PriceBadge>;
-export type PriceBadgePropsType = Pick<PriceBadgeTypes, 'iconType'> & {
-    /** Текст бейджа */
-    text: string;
-};
 export interface IImageBannerProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -43,22 +37,27 @@ export interface IImageBannerProps {
     classes?: {
         root?: string;
         image?: string;
+        imageSource?: string;
         title?: string;
         description?: string;
         cost?: string;
         badgesContainer?: string;
         badges?: string;
-        badge?: string;
         adBlock?: string;
+        children?: string;
     };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
-    title: string | React.ReactNode | React.ReactNode[];
+    title?: string | React.ReactNode | React.ReactNode[];
     /** Текст-описание */
     description?: string | React.ReactNode | React.ReactNode[];
     /** Строка со стоимостью услуги */
     cost?: string;
+    /** Тег заголовка на разрешении экрана 0-767 */
+    headerLevelMobile?: 'h1' | 'h2';
+    /** Тег заголовка на разрешении экрана 768+ */
+    headerLevel?: 'h1' | 'h2';
     /** Фоновый цвет */
     backgroundColor?: BackgroundColorType;
     /** Радиус границы */
@@ -79,12 +78,11 @@ export interface IImageBannerProps {
     autoHeight?: boolean;
     /** Изображение растягивается на всю ширину или вписывается в фиксированный фрейм (по умолчанию фрейм) */
     isImageFullWidth?: boolean;
-    /** Данные для блока с бейджами */
-    badges?: PriceBadgePropsType[];
-    /** Дополнительный отступ снизу при использовании в баннере */
-    hasBottomOffset?: boolean;
+    /** Бейджи */
+    badges?: JSX.Element[] | JSX.Element;
     /** Элемент блока с рекламой */
-    adBlock?: JSX.Element;
+    adBlock?: JSX.Element | null;
+    children?: React.ReactNode;
 }
-declare const ImageBanner: React.FC<React.PropsWithChildren<IImageBannerProps>>;
+declare const ImageBanner: React.FC<IImageBannerProps>;
 export default ImageBanner;

package/dist/lib/components/ImageBanner/ImageBanner.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Radius = exports.NavTheme = exports.ImageVerticalAlign = exports.BackgroundColor = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 require("core-js/modules/es.symbol.js");
 require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.array.concat.js");
-require("core-js/modules/es.array.map.js");
 var React = _interopRequireWildcard(require("react"));
 var _uiCore = require("@megafon/ui-core");
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -80,32 +80,41 @@ var ImageBanner = function ImageBanner(_ref2) {
     title = _ref2.title,
     description = _ref2.description,
     cost = _ref2.cost,
+    _ref2$headerLevelMobi = _ref2.headerLevelMobile,
+    headerLevelMobile = _ref2$headerLevelMobi === void 0 ? 'h1' : _ref2$headerLevelMobi,
+    _ref2$headerLevel = _ref2.headerLevel,
+    headerLevel = _ref2$headerLevel === void 0 ? 'h1' : _ref2$headerLevel,
     _ref2$backgroundColor = _ref2.backgroundColor,
     backgroundColor = _ref2$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref2$backgroundColor,
     _ref2$radius = _ref2.radius,
     radius = _ref2$radius === void 0 ? Radius.CORNERS : _ref2$radius,
     autoHeight = _ref2.autoHeight,
     isImageFullWidth = _ref2.isImageFullWidth,
-    _ref2$badges = _ref2.badges,
-    badges = _ref2$badges === void 0 ? [] : _ref2$badges,
-    hasBottomOffset = _ref2.hasBottomOffset,
+    badges = _ref2.badges,
     adBlock = _ref2.adBlock,
     _ref2$children = _ref2.children,
     children = _ref2$children === void 0 ? [] : _ref2$children;
+  var _React$useState = React.useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    isMobile = _React$useState2[0],
+    setIsMobile = _React$useState2[1];
+  React.useEffect(function () {
+    var mediaQuery = window.matchMedia("(max-width: ".concat(_uiHelpers.breakpoints.MOBILE_MIDDLE_END, "px)"));
+    var handleMediaChange = function handleMediaChange(_ref3) {
+      var matches = _ref3.matches;
+      setIsMobile(matches);
+    };
+    setIsMobile(mediaQuery.matches);
+    mediaQuery.addEventListener('change', handleMediaChange);
+    return function () {
+      mediaQuery.removeEventListener('change', handleMediaChange);
+    };
+  }, []);
   var navTheme = getTheme(backgroundColor);
   var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
-  var renderBadges = !!badges.length && /*#__PURE__*/React.createElement("div", {
+  var renderBadges = !!badges && /*#__PURE__*/React.createElement("div", {
     className: cn('badges', [classes.badges])
-  }, badges.map(function (_ref3) {
-    var text = _ref3.text,
-      iconType = _ref3.iconType;
-    return /*#__PURE__*/React.createElement(_uiCore.PriceBadge, {
-      className: classes.badge,
-      theme: navTheme,
-      iconType: iconType,
-      key: text
-    }, text);
-  }));
+  }, badges);
   var renderAdBlock = !!adBlock && /*#__PURE__*/React.createElement("div", {
     className: cn('ad-block', [classes.adBlock])
   }, adBlock);
@@ -115,7 +124,8 @@ var ImageBanner = function ImageBanner(_ref2) {
     className: cn('badges-container', [classes.badgesContainer])
   }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/React.createElement(_uiCore.Header, {
     className: cn('title', [classes.title]),
-    color: "inherit"
+    color: "inherit",
+    as: isMobile ? headerLevelMobile : headerLevel
   }, typeof title === 'string' ? (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig) : title), !!description && /*#__PURE__*/React.createElement(_uiCore.Header, {
     className: cn('description', [classes.description]),
     as: "h5",
@@ -123,17 +133,18 @@ var ImageBanner = function ImageBanner(_ref2) {
   }, typeof description === 'string' ? (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig) : description), !!cost && /*#__PURE__*/React.createElement("div", {
     className: cn('cost', [classes.cost])
   }, (0, _uiHelpers.convert)(cost, typographyConfig)), !!children && !!React.Children.count(children) && /*#__PURE__*/React.createElement("div", {
-    className: cn('children')
+    className: cn('children', [classes.children])
   }, children));
   var renderImage = /*#__PURE__*/React.createElement("picture", {
     className: cn('picture', {
       'v-align': imageVerticalAlign
     })
   }, /*#__PURE__*/React.createElement("source", {
+    className: classes.imageSource,
     media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
     srcSet: "".concat(imageDesktop, ", ").concat(imageDesktop2x, " 2x")
   }), /*#__PURE__*/React.createElement("img", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
-    className: cn('background-image', [classes.image]),
+    className: cn('image', [classes.image]),
     src: imageMobile || imageMobile2x,
     srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
     alt: imageAlt
@@ -145,12 +156,9 @@ var ImageBanner = function ImageBanner(_ref2) {
       'has-image': hasImage,
       'auto-height': autoHeight,
       'full-width': isImageFullWidth,
-      'bottom-offset': hasBottomOffset && !hasImage,
       radius: radius
     }, [className, classes.root]),
     ref: rootRef
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cn('wrapper')
-  }, renderContent, hasImage && renderImage));
+  }), renderContent, hasImage && renderImage);
 };
 var _default = exports["default"] = ImageBanner;

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

@@ -1 +1 @@
-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}.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-item__svg-icon{height:40px;margin-right:16px;min-height:40px;min-width:40px;overflow:hidden;width:40px}
+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}.mfui-text-with-icon-item:not(:first-of-type){margin-top:12px}.mfui-text-with-icon-item__svg-icon{border:1px solid var(--spbSky2);border-radius:50%;height:44px;margin-right:16px;min-height:44px;min-width:44px;overflow:hidden;padding:6px;width:44px}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-shared",
-    "version": "6.0.0-beta.1",
+    "version": "6.0.0-beta.3",
     "files": [
         "dist"
     ],
@@ -9,7 +9,7 @@
     "typings": "dist/lib/index.d.ts",
     "sideEffects": [
         "*.css",
-        "*.less"
+        "*.scss"
     ],
     "author": "MegaFon",
     "license": "MIT",
@@ -21,10 +21,10 @@
         "typecheck": "tsc --noEmit -p .",
         "prettier:check": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx}\"",
         "prettier:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
-        "lint": "yarn lint:ts && yarn lint:less",
+        "lint": "yarn lint:ts && yarn lint:style",
         "lint:ts": "eslint --ext .js,.jsx,.ts,.tsx src --max-warnings=0",
-        "lint:less": "stylelint --syntax less src/**/*.less src/**/**/*.less",
-        "lint:less:fix": "yarn lint:less --fix",
+        "lint:style": "stylelint --syntax scss src/**/*.scss src/**/**/*.scss",
+        "lint:style:fix": "yarn lint:style --fix",
         "test": "yarn test:unit",
         "test:unit": "jest",
         "test:update": "jest --updateSnapshot"
@@ -48,7 +48,6 @@
         "@babel/preset-env": "^7.8.6",
         "@babel/preset-react": "^7.8.3",
         "@babel/preset-typescript": "^7.8.3",
-        "@megafon/ui-icons": "^3.0.0-beta.1",
         "@svgr/core": "^2.4.1",
         "@testing-library/jest-dom": "6.4.2",
         "@testing-library/react": "14.2.1",
@@ -64,12 +63,10 @@
         "gulp": "^4.0.2",
         "gulp-babel": "^8.0.0-beta.2",
         "gulp-imagemin": "^7.1.0",
-        "gulp-less": "^4.0.1",
         "gulp-postcss": "^10.0.0",
         "gulp-sass": "^5.1.0",
         "gulp-typescript": "^5.0.1",
         "jest": "^29.7.0",
-        "less-plugin-autoprefix": "^2.0.0",
         "merge2": "^1.3.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -80,12 +77,13 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.8.4",
-        "@megafon/ui-core": "^6.0.0-beta.1",
+        "@megafon/ui-core": "^6.0.0-beta.3",
         "@megafon/ui-helpers": "^3.0.0-beta.1",
+        "@megafon/ui-icons": "^3.0.0-beta.1",
         "core-js": "^3.6.4",
         "htmr": "^1.0.2",
         "lodash.throttle": "^4.1.1",
         "swiper": "^11.1.1"
     },
-    "gitHead": "2db17c7af18944d764c52bb54e00af56f03499b1"
+    "gitHead": "091a93c01faf8ceb783603f3770bfbd78e41ef00"
 }