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

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

@@ -1,5 +1,6 @@
-import React, { Ref } from 'react';
-import './ImageBanner.less';
+import * as React from 'react';
+import { PriceBadge } from '@megafon/ui-core';
+import './ImageBanner.scss';
 export declare const BackgroundColor: {
     readonly TRANSPARENT: "transparent";
     readonly GREEN: "green";
@@ -8,23 +9,28 @@ export declare const BackgroundColor: {
     readonly GRADIENT: "gradient";
     readonly LIGHT: "light";
 };
-export declare type BackgroundColorType = typeof BackgroundColor[keyof typeof BackgroundColor];
+export type BackgroundColorType = (typeof BackgroundColor)[keyof typeof BackgroundColor];
 export declare const Radius: {
     readonly CORNERS: "corners";
     readonly ROUNDED: "rounded";
 };
-export declare type RadiusType = typeof Radius[keyof typeof Radius];
+export type RadiusType = (typeof Radius)[keyof typeof Radius];
 export declare const NavTheme: {
     readonly LIGHT: "light";
     readonly DARK: "dark";
 };
-export declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
+export type NavThemeType = (typeof NavTheme)[keyof typeof NavTheme];
 export declare const ImageVerticalAlign: {
     readonly TOP: "top";
     readonly CENTER: "center";
     readonly BOTTOM: "bottom";
 };
-export declare type ImageVerticalAlignType = typeof ImageVerticalAlign[keyof typeof ImageVerticalAlign];
+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?: {
@@ -37,26 +43,22 @@ export interface IImageBannerProps {
     classes?: {
         root?: string;
         image?: string;
-        imageSource?: string;
         title?: string;
         description?: string;
         cost?: string;
         badgesContainer?: string;
         badges?: string;
+        badge?: string;
         adBlock?: string;
     };
     /** Ссылка на корневой элемент */
-    rootRef?: Ref<HTMLDivElement>;
+    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;
     /** Радиус границы */
@@ -77,10 +79,12 @@ export interface IImageBannerProps {
     autoHeight?: boolean;
     /** Изображение растягивается на всю ширину или вписывается в фиксированный фрейм (по умолчанию фрейм) */
     isImageFullWidth?: boolean;
-    /** Бейджи */
-    badges?: JSX.Element[] | JSX.Element;
+    /** Данные для блока с бейджами */
+    badges?: PriceBadgePropsType[];
+    /** Дополнительный отступ снизу при использовании в баннере */
+    hasBottomOffset?: boolean;
     /** Элемент блока с рекламой */
-    adBlock?: JSX.Element | null;
+    adBlock?: JSX.Element;
 }
-declare const ImageBanner: React.FC<IImageBannerProps>;
+declare const ImageBanner: React.FC<React.PropsWithChildren<IImageBannerProps>>;
 export default ImageBanner;

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

@@ -1,13 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.object.values.js";
-import React from 'react';
-import { Header } from '@megafon/ui-core';
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { Header, PriceBadge } from '@megafon/ui-core';
 import { breakpoints, cnCreate, filterDataAttrs, convert, titleConvertConfig } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import "./ImageBanner.css";
 export var BackgroundColor = {
   TRANSPARENT: 'transparent',
@@ -30,18 +28,15 @@ export var ImageVerticalAlign = {
   CENTER: 'center',
   BOTTOM: 'bottom'
 };
-
 var getTheme = function getTheme(backgrounColor) {
   switch (backgrounColor) {
     case BackgroundColor.GREEN:
     case BackgroundColor.PURPLE:
       return NavTheme.LIGHT;
-
     default:
       return NavTheme.DARK;
   }
 };
-
 var cn = cnCreate('mfui-image-banner');
 var typographyConfig = {
   b: {
@@ -55,67 +50,53 @@ var typographyConfig = {
     }
   }
 };
-
 var ImageBanner = function ImageBanner(_ref2) {
   var dataAttrs = _ref2.dataAttrs,
-      className = _ref2.className,
-      _ref2$classes = _ref2.classes,
-      classes = _ref2$classes === void 0 ? {} : _ref2$classes,
-      rootRef = _ref2.rootRef,
-      _ref2$imageMobile = _ref2.imageMobile,
-      imageMobile = _ref2$imageMobile === void 0 ? '' : _ref2$imageMobile,
-      _ref2$imageMobile2x = _ref2.imageMobile2x,
-      imageMobile2x = _ref2$imageMobile2x === void 0 ? '' : _ref2$imageMobile2x,
-      _ref2$imageDesktop = _ref2.imageDesktop,
-      imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
-      _ref2$imageDesktop2x = _ref2.imageDesktop2x,
-      imageDesktop2x = _ref2$imageDesktop2x === void 0 ? '' : _ref2$imageDesktop2x,
-      _ref2$imageAlt = _ref2.imageAlt,
-      imageAlt = _ref2$imageAlt === void 0 ? '' : _ref2$imageAlt,
-      _ref2$imageVerticalAl = _ref2.imageVerticalAlign,
-      imageVerticalAlign = _ref2$imageVerticalAl === void 0 ? ImageVerticalAlign.CENTER : _ref2$imageVerticalAl,
-      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,
-      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 = _slicedToArray(_React$useState, 2),
-      isMobile = _React$useState2[0],
-      setIsMobile = _React$useState2[1];
-
-  React.useEffect(function () {
-    var mediaQuery = window.matchMedia("(max-width: ".concat(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);
-    };
-  }, []);
+    className = _ref2.className,
+    _ref2$classes = _ref2.classes,
+    classes = _ref2$classes === void 0 ? {} : _ref2$classes,
+    rootRef = _ref2.rootRef,
+    _ref2$imageMobile = _ref2.imageMobile,
+    imageMobile = _ref2$imageMobile === void 0 ? '' : _ref2$imageMobile,
+    _ref2$imageMobile2x = _ref2.imageMobile2x,
+    imageMobile2x = _ref2$imageMobile2x === void 0 ? '' : _ref2$imageMobile2x,
+    _ref2$imageDesktop = _ref2.imageDesktop,
+    imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
+    _ref2$imageDesktop2x = _ref2.imageDesktop2x,
+    imageDesktop2x = _ref2$imageDesktop2x === void 0 ? '' : _ref2$imageDesktop2x,
+    _ref2$imageAlt = _ref2.imageAlt,
+    imageAlt = _ref2$imageAlt === void 0 ? '' : _ref2$imageAlt,
+    _ref2$imageVerticalAl = _ref2.imageVerticalAlign,
+    imageVerticalAlign = _ref2$imageVerticalAl === void 0 ? ImageVerticalAlign.CENTER : _ref2$imageVerticalAl,
+    title = _ref2.title,
+    description = _ref2.description,
+    cost = _ref2.cost,
+    _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,
+    adBlock = _ref2.adBlock,
+    _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? [] : _ref2$children;
   var navTheme = getTheme(backgroundColor);
   var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
-  var renderBadges = !!badges && /*#__PURE__*/React.createElement("div", {
+  var renderBadges = !!badges.length && /*#__PURE__*/React.createElement("div", {
     className: cn('badges', [classes.badges])
-  }, badges);
+  }, badges.map(function (_ref3) {
+    var text = _ref3.text,
+      iconType = _ref3.iconType;
+    return /*#__PURE__*/React.createElement(PriceBadge, {
+      className: classes.badge,
+      theme: navTheme,
+      iconType: iconType,
+      key: text
+    }, text);
+  }));
   var renderAdBlock = !!adBlock && /*#__PURE__*/React.createElement("div", {
     className: cn('ad-block', [classes.adBlock])
   }, adBlock);
@@ -125,8 +106,7 @@ var ImageBanner = function ImageBanner(_ref2) {
     className: cn('badges-container', [classes.badgesContainer])
   }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/React.createElement(Header, {
     className: cn('title', [classes.title]),
-    color: "inherit",
-    as: isMobile ? headerLevelMobile : headerLevel
+    color: "inherit"
   }, typeof title === 'string' ? convert(title, titleConvertConfig) : title), !!description && /*#__PURE__*/React.createElement(Header, {
     className: cn('description', [classes.description]),
     as: "h5",
@@ -141,11 +121,10 @@ var ImageBanner = function ImageBanner(_ref2) {
       'v-align': imageVerticalAlign
     })
   }, /*#__PURE__*/React.createElement("source", {
-    className: classes.imageSource,
     media: "(min-width: ".concat(breakpoints.DESKTOP_SMALL_START, "px)"),
     srcSet: "".concat(imageDesktop, ", ").concat(imageDesktop2x, " 2x")
   }), /*#__PURE__*/React.createElement("img", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
-    className: cn('image', [classes.image]),
+    className: cn('background-image', [classes.image]),
     src: imageMobile || imageMobile2x,
     srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
     alt: imageAlt
@@ -157,49 +136,12 @@ 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
-  }), renderContent, hasImage && renderImage);
-};
-
-ImageBanner.propTypes = {
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    image: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  className: PropTypes.string,
-  classes: PropTypes.shape({
-    root: PropTypes.string,
-    image: PropTypes.string,
-    imageSource: PropTypes.string,
-    title: PropTypes.string,
-    description: PropTypes.string,
-    cost: PropTypes.string,
-    badgesContainer: PropTypes.string,
-    badges: PropTypes.string,
-    badge: PropTypes.string,
-    adBlock: PropTypes.string
-  }),
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
-    current: PropTypes.elementType
-  }), PropTypes.any])]),
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  cost: PropTypes.string,
-  headerLevelMobile: PropTypes.oneOf(['h1', 'h2']),
-  headerLevel: PropTypes.oneOf(['h1', 'h2']),
-  backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
-  radius: PropTypes.oneOf(Object.values(Radius)),
-  imageMobile: PropTypes.string,
-  imageMobile2x: PropTypes.string,
-  imageDesktop: PropTypes.string,
-  imageDesktop2x: PropTypes.string,
-  imageAlt: PropTypes.string,
-  imageVerticalAlign: PropTypes.oneOf(Object.values(ImageVerticalAlign)),
-  autoHeight: PropTypes.bool,
-  isImageFullWidth: PropTypes.bool,
-  badges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]),
-  adBlock: PropTypes.element
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, renderContent, hasImage && renderImage));
 };
 export default ImageBanner;