@megafon/ui-shared 8.14.0 → 8.14.2

package/dist/es/components/PageTitle/PageTitle.js

@@ -0,0 +1,74 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import * as React from 'react';
+import { Header, Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
+import "./PageTitle.css";
+var testIdPrefix = 'PageTitle';
+var cn = cnCreate('mfui-page-title');
+var PageTitle = function PageTitle(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    title = _ref.title,
+    description = _ref.description,
+    breadcrumbs = _ref.breadcrumbs,
+    badge = _ref.badge,
+    _ref$isFullWidth = _ref.isFullWidth,
+    isFullWidth = _ref$isFullWidth === void 0 ? true : _ref$isFullWidth,
+    _ref$hasBreadcrumbsMi = _ref.hasBreadcrumbsMicrodata,
+    hasBreadcrumbsMicrodata = _ref$hasBreadcrumbsMi === void 0 ? false : _ref$hasBreadcrumbsMi,
+    _ref$marginTop = _ref.marginTop,
+    marginTop = _ref$marginTop === void 0 ? 'default' : _ref$marginTop,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    rootRef = _ref.rootRef;
+  var isBreadcrumbs = !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length);
+  var titleContent = /*#__PURE__*/React.createElement(React.Fragment, null, badge && /*#__PURE__*/React.createElement("div", {
+    className: cn('badge', {
+      'under-breadcrumbs': isBreadcrumbs
+    })
+  }, badge), /*#__PURE__*/React.createElement(Header, {
+    className: cn('title', {
+      single: !isBreadcrumbs && !badge,
+      'margin-top': marginTop,
+      'under-breadcrumbs': isBreadcrumbs && !badge
+    }, [classes.title]),
+    as: "h1"
+  }, title), description && /*#__PURE__*/React.createElement("div", {
+    className: cn('description')
+  }, description));
+  var renderContent = function renderContent() {
+    if (isFullWidth) {
+      return titleContent;
+    }
+    return /*#__PURE__*/React.createElement(Grid, {
+      dataAttrs: {
+        root: {
+          'data-testid': "".concat(testIdPrefix, "-grid")
+        }
+      }
+    }, /*#__PURE__*/React.createElement(GridColumn, {
+      wide: "8",
+      desktop: "10",
+      tablet: "12",
+      mobile: "12"
+    }, titleContent));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className]),
+    ref: rootRef
+  }), (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
+    disabledOnMobile: true,
+    hasMarginTop: true,
+    hasMicrodata: hasBreadcrumbsMicrodata,
+    items: breadcrumbs,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,
+      link: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbsLink
+    },
+    className: cn('breadcrumbs', [classes.breadcrumbs])
+  }), renderContent());
+};
+export default PageTitle;

package/dist/es/components/Partners/Partners.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-partners__tile:not(:last-child){margin-bottom:20px}@media screen and (max-width:767px){.mfui-partners__tile:not(:last-child){margin-bottom:16px}}.mfui-partners__tile-inner{-webkit-box-sizing:border-box;box-sizing:border-box;height:132px;padding:28px 48px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-partners__tile-inner{height:104px;padding:22px 37px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-partners__tile-inner{height:77px;padding:10px}}@media screen and (max-width:767px){.mfui-partners__tile-inner{height:60px;padding:8px}}.mfui-partners__img-wrapper{height:100%;position:relative;width:100%}.mfui-partners__tile-img{left:50%;max-height:100%;max-width:100%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import './Partners.scss';
+export type ItemType = {
+    src: string;
+    href?: string;
+    alt: string;
+    rel?: string;
+};
+export interface IPartnersProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        item?: Record<string, string>;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        itemClass?: string;
+        slide?: string;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Список логотипов */
+    items: ItemType[];
+    /** Радиус границы логотипов */
+    radius?: 'default' | 'rounded';
+    /** Обработчик клика по стрелке вперед (должен быть обернут в useCallback) */
+    onNextClick?: (index: number) => void;
+    /** Обработчик клика по стрелке назад (должен быть обернут в useCallback) */
+    onPrevClick?: (index: number) => void;
+    /** Обработчик смены слайда (должен быть обернут в useCallback) */
+    onChange?: (currentIndex: number, previousIndex: number, slidesPerView?: number | 'auto') => void;
+}
+declare const Partners: React.FC<IPartnersProps>;
+export default Partners;

package/dist/es/components/Partners/Partners.js

@@ -0,0 +1,111 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.slice.js";
+import * as React from 'react';
+import { Grid, GridColumn, Tile, Carousel } from '@megafon/ui-core';
+import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./Partners.css";
+var MAX_GRID_ITEMS_LENGTH = 8;
+var slidesSettings = _defineProperty(_defineProperty(_defineProperty({}, breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 2,
+  spaceBetween: 16
+}), breakpoints.MOBILE_MIDDLE_START, {
+  slidesPerView: 3,
+  spaceBetween: 20
+}), breakpoints.DESKTOP_SMALL_START, {
+  slidesPerView: 4,
+  spaceBetween: 20
+});
+var testIdPrefix = 'Partners';
+var cn = cnCreate('mfui-partners');
+var Partners = function Partners(_ref) {
+  var rootRef = _ref.rootRef,
+    _ref$classes = _ref.classes,
+    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
+    root = _ref$classes2.root,
+    itemClass = _ref$classes2.itemClass,
+    slide = _ref$classes2.slide,
+    dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    items = _ref.items,
+    _ref$radius = _ref.radius,
+    radius = _ref$radius === void 0 ? 'default' : _ref$radius,
+    onChange = _ref.onChange,
+    onNextClick = _ref.onNextClick,
+    onPrevClick = _ref.onPrevClick;
+  var renderItem = React.useCallback(function (item) {
+    var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    if (!item) {
+      return null;
+    }
+    var src = item.src,
+      href = item.href,
+      alt = item.alt,
+      rel = item.rel;
+    return /*#__PURE__*/React.createElement(Tile, {
+      href: href,
+      rel: rel,
+      shadowLevel: "default",
+      radius: radius,
+      isInteractive: !!href,
+      className: cn('tile'),
+      dataAttrs: {
+        root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, index + 1))
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('tile-inner', [itemClass]),
+      "data-testid": "".concat(testIdPrefix, "-tile-inner")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('img-wrapper')
+    }, /*#__PURE__*/React.createElement("img", {
+      src: src,
+      alt: alt,
+      className: cn('tile-img')
+    }))));
+  }, [radius, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, itemClass]);
+  var renderGrid = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(Grid, {
+      guttersLeft: "medium",
+      guttersBottom: "medium"
+    }, items.map(function (item, i) {
+      return /*#__PURE__*/React.createElement(GridColumn, {
+        key: i + item.src,
+        all: "3",
+        mobile: "6"
+      }, renderItem(item, i));
+    }));
+  }, [items, renderItem]);
+  var renderCarousel = React.useCallback(function () {
+    var halfItemsLength = Math.ceil(items.length / 2);
+    var topRow = items.slice(0, halfItemsLength);
+    var bottomRow = items.slice(halfItemsLength);
+    return /*#__PURE__*/React.createElement(Carousel, {
+      classes: {
+        slide: cn('slide', [slide])
+      },
+      slidesSettings: slidesSettings,
+      onChange: onChange,
+      onNextClick: onNextClick,
+      onPrevClick: onPrevClick,
+      dataAttrs: {
+        prev: {
+          'data-testid': "".concat(testIdPrefix, "-prev")
+        },
+        next: {
+          'data-testid': "".concat(testIdPrefix, "-next")
+        }
+      }
+    }, topRow.map(function (item, i) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: i + item.src,
+        className: cn('slide')
+      }, renderItem(item, i), renderItem(bottomRow[i], i));
+    }));
+  }, [items, slide, onChange, onNextClick, onPrevClick, renderItem]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: rootRef,
+    className: cn([root, className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), items.length > MAX_GRID_ITEMS_LENGTH ? renderCarousel() : renderGrid());
+};
+export default Partners;

package/dist/es/components/PictureBox/PictureBox.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-picture-box_mask_none .mfui-picture-box__image{border-radius:24px;vertical-align:top;width:100%}@media screen and (min-width:768px){.mfui-picture-box_mask_none .mfui-picture-box__image{height:414px;-o-object-fit:cover;object-fit:cover}}@media screen and (min-width:1280px){.mfui-picture-box_mask_none .mfui-picture-box__image{height:520px}}.mfui-picture-box_mask_mac-book .mfui-picture-box__image{border-top-left-radius:1.4% 2.2988505747%;border-top-right-radius:1.4% 2.2988505747%;height:87%;left:0;margin:0 auto;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:2%;width:82%}.mfui-picture-box__content{-ms-flex-item-align:center;align-self:center;margin-top:32px}@media screen and (min-width:1024px){.mfui-picture-box__content{margin-top:0}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-picture-box_align_left .mfui-picture-box__content{margin-left:12px}}@media screen and (min-width:1280px){.mfui-picture-box_align_left .mfui-picture-box__content{margin-left:44px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-picture-box_align_right .mfui-picture-box__content{margin-right:12px}}@media screen and (min-width:1280px){.mfui-picture-box_align_right .mfui-picture-box__content{margin-right:44px}}.mfui-picture-box__button-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:20px;margin-top:32px}.mfui-picture-box_mask_mac-book .mfui-picture-box__mask{background-image:url(img/mac-book-1x.png);background-repeat:no-repeat;background-size:100% auto;padding-bottom:60.9%;position:relative}@media screen and (-webkit-min-device-pixel-ratio:2),screen and (min-device-pixel-ratio:2),screen and (min-resolution:192dpi),screen and (min-resolution:2dppx){.mfui-picture-box_mask_mac-book .mfui-picture-box__mask{background-image:url(img/mac-book-2x.png)}}

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import './PictureBox.scss';
+type ImageType = {
+    src: string;
+    src2x?: string;
+    align?: 'right' | 'left';
+    alt?: string;
+};
+type ButtonType = {
+    title?: string;
+    href?: string;
+    target?: '_self' | '_blank';
+    rel?: string;
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+export interface IPictureBoxProps {
+    /** Изображение */
+    image: ImageType;
+    /** Кнопка */
+    button?: ButtonType;
+    /** Дополнительная кнопка */
+    extraButton?: ButtonType;
+    /** Маска */
+    pictureMask?: 'mac-book' | 'none';
+    /** Дочерние элементы */
+    children: React.ReactNode;
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+    /** Дополнительный класс корневого элемента */
+    classes?: {
+        root?: string;
+        button?: string;
+        extraButton?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+        extraButton?: Record<string, string>;
+        image?: Record<string, string>;
+        mask?: Record<string, string>;
+        buttonsWrapper?: Record<string, string>;
+    };
+}
+declare const PictureBox: React.FC<IPictureBoxProps>;
+export default PictureBox;

package/dist/es/components/PictureBox/PictureBox.js

@@ -0,0 +1,96 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.concat.js";
+import * as React from 'react';
+import { Button, Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./PictureBox.css";
+var cn = cnCreate('mfui-picture-box');
+var PictureBox = function PictureBox(_ref) {
+  var image = _ref.image,
+    button = _ref.button,
+    extraButton = _ref.extraButton,
+    _ref$pictureMask = _ref.pictureMask,
+    pictureMask = _ref$pictureMask === void 0 ? 'none' : _ref$pictureMask,
+    dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    classes = _ref.classes,
+    rootRef = _ref.rootRef,
+    children = _ref.children;
+  var imageSrc = image.src,
+    imageSrc2x = image.src2x,
+    _image$align = image.align,
+    imageAlign = _image$align === void 0 ? 'left' : _image$align,
+    _image$alt = image.alt,
+    imageAlt = _image$alt === void 0 ? '' : _image$alt;
+  var imageOrder = imageAlign === 'left' ? '0' : '1';
+  var renderImg = function renderImg() {
+    var srcSet = imageSrc2x ? "".concat(imageSrc, ", ").concat(imageSrc2x, " 2x") : undefined;
+    var img = /*#__PURE__*/React.createElement("img", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
+      className: cn('image'),
+      srcSet: srcSet,
+      src: imageSrc,
+      alt: imageAlt
+    }));
+    if (pictureMask !== 'none') {
+      return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mask), {
+        className: cn('mask')
+      }), img);
+    }
+    return img;
+  };
+  var renderButtons = function renderButtons() {
+    if (!button && !extraButton) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.buttonsWrapper), {
+      className: cn('button-wrapper')
+    }), !!button && /*#__PURE__*/React.createElement(Button, {
+      href: button.href,
+      target: button.target,
+      rel: button.rel,
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
+      classes: {
+        root: classes === null || classes === void 0 ? void 0 : classes.button
+      },
+      onClick: button.onClick
+    }, button.title), !!extraButton && /*#__PURE__*/React.createElement(Button, {
+      href: extraButton.href,
+      target: extraButton.target,
+      rel: extraButton.rel,
+      type: "outline",
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
+      },
+      classes: {
+        root: classes === null || classes === void 0 ? void 0 : classes.extraButton
+      },
+      onClick: extraButton.onClick
+    }, extraButton.title));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      align: imageAlign,
+      mask: pictureMask
+    }, [classes === null || classes === void 0 ? void 0 : classes.root, className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(Grid, {
+    guttersLeft: "medium"
+  }, /*#__PURE__*/React.createElement(GridColumn, {
+    all: "7",
+    tablet: "12",
+    mobile: "12",
+    orderWide: imageOrder,
+    orderDesktop: imageOrder
+  }, renderImg()), /*#__PURE__*/React.createElement(GridColumn, {
+    all: "5",
+    tablet: "12",
+    mobile: "12",
+    flex: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, children, renderButtons()))));
+};
+export default PictureBox;

package/dist/es/components/PictureWithDescription/PictureWithDescription.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}@media screen and (min-width:1024px){.mfui-picture-with-description{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}.mfui-picture-with-description__title{margin-bottom:24px}.mfui-picture-with-description__picture{-ms-flex-item-align:start;align-self:flex-start;overflow:hidden;text-align:center}@media screen and (max-width:1023px){.mfui-picture-with-description__picture{margin:0 auto 32px}}@media screen and (min-width:1024px){.mfui-picture-with-description__picture{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:50%}.mfui-picture-with-description__picture_align_left{-webkit-box-ordinal-group:1;-ms-flex-order:0;margin-right:20px;order:0}}.mfui-picture-with-description__img{height:100%;max-width:550px;width:100%}.mfui-picture-with-description__content>:first-child{margin-top:0!important}.mfui-picture-with-description__content>:last-child{margin-bottom:0!important}@media screen and (min-width:1024px){.mfui-picture-with-description__articles{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:50%}.mfui-picture-with-description__articles_text-top-align{-ms-flex-item-align:start;align-self:flex-start}.mfui-picture-with-description__articles_align_right{margin-right:20px}}

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import './PictureWithDescription.scss';
+export declare const pictureAlignTypes: {
+    readonly LEFT: "left";
+    readonly RIGHT: "right";
+};
+type PictureAlignTypesType = (typeof pictureAlignTypes)[keyof typeof pictureAlignTypes];
+export interface IPictureWithDescriptionProps {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        title?: string;
+    };
+    /** Заголовок */
+    title?: string | React.ReactNode | React.ReactNode[];
+    /** Url изображения */
+    pictureUrl: string;
+    /** Расположение изображения */
+    pictureAlign?: PictureAlignTypesType;
+    /** Значение тега alt для изображения */
+    pictureAlt?: string;
+    /** Выравнивание текста по верхнему краю */
+    isTextTopAlign?: boolean;
+    /** Дочерний элемент компонента */
+    children?: React.ReactNode;
+}
+declare const PictureWithDescription: React.FC<IPictureWithDescriptionProps>;
+export default PictureWithDescription;

package/dist/es/components/PictureWithDescription/PictureWithDescription.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Header } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+import "./PictureWithDescription.css";
+export var pictureAlignTypes = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};
+var testIdPrefix = 'PictureWithDescription';
+var cn = cnCreate('mfui-picture-with-description');
+var PictureWithDescription = function PictureWithDescription(_ref) {
+  var rootRef = _ref.rootRef,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    title = _ref.title,
+    pictureUrl = _ref.pictureUrl,
+    _ref$pictureAlign = _ref.pictureAlign,
+    pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
+    pictureAlt = _ref.pictureAlt,
+    isTextTopAlign = _ref.isTextTopAlign,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn([className, classes.root]),
+    ref: rootRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('picture', {
+      align: pictureAlign
+    }),
+    "data-testid": "".concat(testIdPrefix, "-picture")
+  }, /*#__PURE__*/React.createElement("img", {
+    className: cn('img'),
+    src: pictureUrl,
+    alt: pictureAlt
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('articles', {
+      align: pictureAlign,
+      'text-top-align': isTextTopAlign
+    }),
+    "data-testid": "".concat(testIdPrefix, "-articles")
+  }, !!title && /*#__PURE__*/React.createElement(Header, {
+    className: cn('title', [classes.title]),
+    as: "h2"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, children)));
+};
+export default PictureWithDescription;

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Banner } from '@megafon/ui-core';
+export type PromoBannerPropsType = Omit<React.ComponentProps<typeof Banner>, 'autoHeight' | 'arrowTheme'>;
+declare const PromoBanner: React.FC<PromoBannerPropsType>;
+export default PromoBanner;

package/dist/es/components/PromoBanner/PromoBanner.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.index-of.js";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import { Banner } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+var cn = cnCreate('mfui-promo-banner');
+var PromoBanner = function PromoBanner(_a) {
+  var children = _a.children,
+    props = __rest(_a, ["children"]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement(Banner, _extends({}, props, {
+    autoHeight: true,
+    arrowTheme: "white"
+  }), children));
+};
+export default PromoBanner;

package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-promo-banner-slide{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;border-radius:24px;-ms-flex-direction:column;flex-direction:column;min-height:100%;overflow:hidden}.mfui-promo-banner-slide_background_dark-violet{background-image:-webkit-gradient(linear,right top,left top,from(#ada6ba),color-stop(108%,#f6f2f9));background-image:linear-gradient(270deg,#ada6ba,#f6f2f9 108%)}.mfui-promo-banner-slide_background_light-violet{background:#f6f2f9}.mfui-promo-banner-slide_background_green-20{background:var(--brandGreen20)}.mfui-promo-banner-slide_background_purple-20{background:var(--brandPurple20)}.mfui-promo-banner-slide_background_night-20{background:var(--night20)}.mfui-promo-banner-slide_background_sky-20{background:var(--sky20)}.mfui-promo-banner-slide_background_flamingo-20{background:var(--flamingo20)}.mfui-promo-banner-slide_background_berry-20{background:var(--berry20)}.mfui-promo-banner-slide_background_gradient-purple-1{background:linear-gradient(92deg,#731982 12.66%,#aa5aff 78.46%)}.mfui-promo-banner-slide_background_gradient-purple-2{background:linear-gradient(93deg,#731982 33.39%,#e64de6 83.5%)}.mfui-promo-banner-slide_background_gradient-purple-3{background:linear-gradient(92deg,#731982 6.47%,#00d2ff 100.69%)}.mfui-promo-banner-slide_background_gradient-purple-4{background:linear-gradient(92deg,#731982 -.82%,#1b61ac 90.9%)}.mfui-promo-banner-slide__container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:32px 20px 0}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__container{padding:38px 40px}}@media screen and (min-width:768px){.mfui-promo-banner-slide__container{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:308px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__container{padding:34px 64px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__container{padding:42px 80px}}.mfui-promo-banner-slide__content{color:var(--stcBlack)}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__content{max-width:350px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__content{max-width:450px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__content{max-width:645px}}.mfui-promo-banner-slide__title{margin-bottom:12px}@media screen and (min-width:1280px){.mfui-promo-banner-slide__description{margin-right:82px}}.mfui-promo-banner-slide__buttons-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px;margin-top:24px}@media screen and (min-width:768px){.mfui-promo-banner-slide__buttons-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-top:32px}}.mfui-promo-banner-slide__picture{display:block;position:relative;z-index:0}@media screen and (max-width:767px){.mfui-promo-banner-slide__picture{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:12px}}@media screen and (min-width:768px){.mfui-promo-banner-slide__picture{height:100%;position:absolute;top:0}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__picture{left:404px;width:523px}}@media screen and (min-width:1024px){.mfui-promo-banner-slide__picture{width:696px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__picture{left:534px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__picture{left:744px}}.mfui-promo-banner-slide__image{height:100%;-o-object-fit:cover;object-fit:cover;vertical-align:top;width:100%}@media screen and (max-width:767px){.mfui-promo-banner-slide__image{max-height:180px;min-height:150px;width:auto}}@media screen and (min-width:768px){.mfui-promo-banner-slide__image{-o-object-fit:contain;object-fit:contain}}

package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import './PromoBannerSlide.scss';
+export declare const BackgroundColor: {
+    readonly DARK_VIOLET: "dark-violet";
+    readonly LIGHT_VIOLET: "light-violet";
+    readonly GREEN_20: "green-20";
+    readonly PURPLE_20: "purple-20";
+    readonly NIGHT_20: "night-20";
+    readonly FLAMINGO_20: "flamingo-20";
+    readonly BERRY_20: "berry-20";
+    readonly GRADIENT_PURPLE_1: "gradient-purple-1";
+    readonly GRADIENT_PURPLE_2: "gradient-purple-2";
+    readonly GRADIENT_PURPLE_3: "gradient-purple-3";
+    readonly GRADIENT_PURPLE_4: "gradient-purple-4";
+};
+export type BackgroundColorType = (typeof BackgroundColor)[keyof typeof BackgroundColor];
+type ButtonType = {
+    /** Заголовок */
+    title?: string;
+    /** Иконка */
+    icon?: JSX.Element;
+    /** Ссылка */
+    href?: string;
+    /** Target - свойство тега <a> */
+    target?: '_self' | '_blank';
+    /** Rel - атрибут тега <a> */
+    rel?: string;
+    /** Обработчик клика по кнопке */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+type ImageType = {
+    /** Изображение на разрешении экрана 1024+ */
+    desktopSrc: string;
+    /** Изображение 2x на разрешении экрана 1024+ */
+    desktopSrc2x?: string;
+    /** Изображение на разрешении экрана 768-1023 */
+    tabletSrc: string;
+    /** Изображение 2x на разрешении экрана 768-1023 */
+    tabletSrc2x?: string;
+    /** Изображение на разрешении экрана 0-767 */
+    mobileSrc: string;
+    /** Изображение 2x на разрешении экрана 0-767 */
+    mobileSrc2x?: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+};
+export interface IPromoBannerSlideProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Заголовок */
+    title: string | React.ReactNode | React.ReactNode[];
+    /** Текст-описание */
+    description: string | React.ReactNode | React.ReactNode[];
+    /** Кнопка */
+    button?: ButtonType;
+    /** Дополнительная кнопка */
+    extraButton?: ButtonType;
+    /** Изображение */
+    image: ImageType;
+    /** Фон */
+    background?: BackgroundColorType;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        extraButton?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        image?: Record<string, string>;
+        desktopImageSource?: Record<string, string>;
+        tabletImageSource?: Record<string, string>;
+        buttonsWrapper?: Record<string, string>;
+        button?: Record<string, string>;
+        extraButton?: Record<string, string>;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+}
+declare const PromoBannerSlide: React.FC<IPromoBannerSlideProps>;
+export default PromoBannerSlide;