@megafon/ui-shared 8.14.0 → 8.14.2

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

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.slice.js";
+import * as React from 'react';
+import { Button } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import useResolutions from "../../hooks/useResolutions";
+import BlogBoxTile from "./components/BlogBoxTile";
+import "./BlogBox.css";
+var maxItemsCount = 4;
+var cn = cnCreate('mfui-blog-box');
+var BlogBox = function BlogBox(_ref) {
+  var items = _ref.items,
+    button = _ref.button,
+    _ref$hasAlignLeft = _ref.hasAlignLeft,
+    hasAlignLeft = _ref$hasAlignLeft === void 0 ? false : _ref$hasAlignLeft,
+    className = _ref.className,
+    classes = _ref.classes,
+    dataAttrs = _ref.dataAttrs,
+    rootRef = _ref.rootRef;
+  var _useResolutions = useResolutions(),
+    isDesktop = _useResolutions.isDesktop;
+  var visibleItems = items.slice(0, maxItemsCount);
+  var itemsCount = visibleItems.length;
+  var isRow = isDesktop && itemsCount < maxItemsCount;
+  var isAlignLeft = isRow && hasAlignLeft;
+  var getView = function getView(isCompact, i) {
+    if (isCompact) {
+      return 'compact';
+    }
+    if (i === 0) {
+      return 'full';
+    }
+    return 'thumbnail';
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'align-left': isAlignLeft
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list), {
+    className: cn('list', {
+      row: isRow,
+      'row-size': isRow && "".concat(itemsCount)
+    })
+  }), visibleItems.map(function (item, i) {
+    var view = getView(isRow, i);
+    return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+      className: cn('item', {
+        view: view
+      }, [classes === null || classes === void 0 ? void 0 : classes.item]),
+      key: "".concat(item.title, "_").concat(i)
+    }), /*#__PURE__*/React.createElement(BlogBoxTile, _extends({}, item, {
+      view: view,
+      classes: {
+        title: classes === null || classes === void 0 ? void 0 : classes.itemTitle
+      }
+    })));
+  })), (button === null || button === void 0 ? void 0 : button.title) && /*#__PURE__*/React.createElement("div", {
+    className: cn('button-wrapper')
+  }, /*#__PURE__*/React.createElement(Button, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
+    className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.button]),
+    href: button.href,
+    target: button.target,
+    rel: button.rel
+  }, button.title)));
+};
+export default BlogBox;

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

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-blog-box-tile{color:var(--content);display:block;position:relative}.mfui-blog-box-tile,.mfui-blog-box-tile:hover{text-decoration:none}.mfui-blog-box-tile:hover .mfui-blog-box-tile__title{color:var(--brandGreen)}.mfui-blog-box-tile__image{border-radius:24px;height:100%;-o-object-fit:cover;object-fit:cover;vertical-align:top;width:100%}.mfui-blog-box-tile__picture{display:block}.mfui-blog-box-tile__date{color:var(--spbSky3);margin-bottom:4px}.mfui-blog-box-tile__title{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:4;-webkit-transition:color .3s;transition:color .3s}.mfui-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{-ms-flex-negative:0;flex-shrink:0;height:102px;width:133px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture{height:130px;width:170px}}@media screen and (min-width:1440px){.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture{height:170px;width:233px}}.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__content{-ms-flex-item-align:center;align-self:center}.mfui-blog-box-tile_view_thumbnail .mfui-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{font-size:15px;line-height:24px}}.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__title{font-size:20px;line-height:28px}}.mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture{height:358px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture{height:438px}}@media screen and (min-width:1440px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture{height:558px}}.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{background-color:var(--base);border-radius:24px;bottom:8px;left:8px;padding:16px;position:absolute;right:8px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{padding:24px}}@media screen and (min-width:768px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{bottom:12px;left:12px;right:12px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{padding:16px}}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{padding:24px}}.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title{font-size:22px;font-weight:600;letter-spacing:.5px;line-height:28px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-blog-box-tile_view_full .mfui-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{font-size:28px;line-height:36px}}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title{font-size:32px;line-height:40px}}.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture{height:233px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture{height:288px}}@media screen and (min-width:1440px){.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture{height:367px}}.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__content{background-color:var(--base);border-radius:24px;bottom:12px;left:12px;padding:16px;position:absolute;right:12px}.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__title{font-size:20px;line-height:28px}}

package/dist/es/components/BlogBox/components/BlogBoxTile.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { TileDataType, TileViewType } from '../types';
+import './BlogBoxTile.scss';
+type TileSettingsType = {
+    view: TileViewType;
+};
+export type BlogBoxTileType = TileDataType & TileSettingsType & {
+    classes?: {
+        title?: string;
+    };
+};
+declare const BlogBoxTile: React.FC<BlogBoxTileType>;
+export default BlogBoxTile;

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

@@ -0,0 +1,61 @@
+import * as React from 'react';
+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 BlogBoxTile = function BlogBoxTile(_ref) {
+  var date = _ref.date,
+    title = _ref.title,
+    href = _ref.href,
+    target = _ref.target,
+    rel = _ref.rel,
+    _ref$image = _ref.image,
+    srcMobile = _ref$image.srcMobile,
+    srcDesktop = _ref$image.srcDesktop,
+    srcThumbnail = _ref$image.srcThumbnail,
+    _ref$image$alt = _ref$image.alt,
+    alt = _ref$image$alt === void 0 ? 'image' : _ref$image$alt,
+    view = _ref.view,
+    classes = _ref.classes;
+  var _useResolutions = useResolutions(),
+    isMobile = _useResolutions.isMobile;
+  var isViewThumbnail = view === 'thumbnail';
+  var currentRel = setRelAttribute(rel, target);
+  var renderImage = function renderImage() {
+    if (isViewThumbnail) {
+      return isMobile ? null : /*#__PURE__*/React.createElement("picture", {
+        className: cn('picture')
+      }, /*#__PURE__*/React.createElement("img", {
+        className: cn('image'),
+        src: srcThumbnail,
+        alt: alt
+      }));
+    }
+    return /*#__PURE__*/React.createElement("picture", {
+      className: cn('picture')
+    }, /*#__PURE__*/React.createElement("source", {
+      media: "(min-width: ".concat(breakpoints.DESKTOP_SMALL_START, "px)"),
+      srcSet: srcDesktop
+    }), /*#__PURE__*/React.createElement("img", {
+      className: cn('image'),
+      src: srcMobile,
+      alt: alt
+    }));
+  };
+  return /*#__PURE__*/React.createElement("a", {
+    className: cn({
+      view: view
+    }),
+    href: href,
+    target: target,
+    rel: currentRel
+  }, renderImage(), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('date')
+  }, date), /*#__PURE__*/React.createElement("div", {
+    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title])
+  }, title)));
+};
+export default BlogBoxTile;

package/dist/es/components/BlogBox/types.d.ts

@@ -0,0 +1,37 @@
+type TargetType = '_self' | '_blank' | '_parent' | '_top';
+export type ButtonType = {
+    /** Название */
+    title: string;
+    /** Ссылка */
+    href: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+export type ImageType = {
+    /** Изображение на разрешении экрана 0-1023 */
+    srcMobile: string;
+    /** Изображение на разрешении экрана 1024+ */
+    srcDesktop: string;
+    /** Миниатюра */
+    srcThumbnail: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+};
+export type TileDataType = {
+    /** Дата */
+    date: string;
+    /** Заголовок */
+    title: string;
+    /** Изображение */
+    image: ImageType;
+    /** Ссылка */
+    href: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+export type TileViewType = 'full' | 'thumbnail' | 'compact';
+export {};

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

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { TextColor } from './components/BreadcrumbsItem';
+import './Breadcrumbs.scss';
+type ItemObjectType = {
+    title?: string;
+    href?: string;
+};
+type ItemType = JSX.Element | ItemObjectType;
+export type TextColorType = (typeof TextColor)[keyof typeof TextColor];
+export type Props = {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Список элементов */
+    items: ItemType[];
+    /** Цвет */
+    color?: TextColorType;
+    /** Включить микроразметку */
+    hasMicrodata?: boolean;
+    /** Включить микроразметку для последнего элемента */
+    hasMicrodataForLastItem?: boolean;
+    /** Отключить на разрешении < 768 px */
+    disabledOnMobile?: boolean;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        item?: string;
+        itemTitle?: string;
+        lastItemTitle?: string;
+        link?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        item?: Record<string, string>;
+        itemInner?: Record<string, string>;
+        itemTitle?: Record<string, string>;
+        itemMeta?: Record<string, string>;
+        link?: Record<string, string>;
+    };
+};
+declare const Breadcrumbs: React.FC<Props>;
+export default Breadcrumbs;

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

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.string.link.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import useResolutions from "../../hooks/useResolutions";
+import BreadcrumbsItem from "./components/BreadcrumbsItem";
+import "./Breadcrumbs.css";
+var isObjectElement = function isObjectElement(item) {
+  return ! /*#__PURE__*/React.isValidElement(item);
+};
+var cn = cnCreate('mfui-breadcrumbs');
+var Breadcrumbs = function Breadcrumbs(_ref) {
+  var items = _ref.items,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs,
+    _ref$hasMicrodata = _ref.hasMicrodata,
+    hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
+    _ref$hasMicrodataForL = _ref.hasMicrodataForLastItem,
+    hasMicrodataForLastItem = _ref$hasMicrodataForL === void 0 ? false : _ref$hasMicrodataForL,
+    _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,
+      'margin-top': hasMarginTop
+    }, className)
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), hasMicrodata && {
+    itemScope: true,
+    itemType: 'https://schema.org/BreadcrumbList'
+  }), items.map(function (item, i) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: cn('item', classes.item)
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+      key: i
+    }), isObjectElement(item) ? /*#__PURE__*/React.createElement(BreadcrumbsItem, {
+      title: item.title,
+      href: item.href,
+      color: color,
+      index: i,
+      isLastItem: i === items.length - 1,
+      hasMicrodata: hasMicrodata,
+      hasMicrodataForLastItem: hasMicrodataForLastItem,
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemInner,
+        link: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link,
+        itemTitle: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemTitle,
+        meta: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemMeta
+      },
+      classes: {
+        link: classes === null || classes === void 0 ? void 0 : classes.link,
+        itemTitle: classes === null || classes === void 0 ? void 0 : classes.itemTitle,
+        lastItemTitle: classes === null || classes === void 0 ? void 0 : classes.lastItemTitle
+      }
+    }) : item);
+  }));
+};
+export default Breadcrumbs;

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

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-breadcrumbs-item_color_default{color:var(--content)}.mfui-breadcrumbs-item_color_black{color:var(--stcBlack)}.mfui-breadcrumbs-item_color_white{color:var(--stcWhite)}

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import './BreadcrumbsItem.scss';
+export declare const TextColor: {
+    readonly DEFAULT: "default";
+    readonly BLACK: "black";
+    readonly WHITE: "white";
+};
+type TextColorType = (typeof TextColor)[keyof typeof TextColor];
+export type Props = {
+    title?: string;
+    href?: string;
+    color?: TextColorType;
+    index?: number;
+    isLastItem?: boolean;
+    hasMicrodata?: boolean;
+    hasMicrodataForLastItem?: boolean;
+    classes?: {
+        link?: string;
+        itemTitle?: string;
+        lastItemTitle?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+        link?: Record<string, string>;
+        itemTitle?: Record<string, string>;
+        meta?: Record<string, string>;
+    };
+};
+declare const BreadcrumbsItem: React.FC<Props>;
+export default BreadcrumbsItem;

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

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.string.link.js";
+import * as React from 'react';
+import { TextLink } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./BreadcrumbsItem.css";
+export var TextColor = {
+  DEFAULT: 'default',
+  BLACK: 'black',
+  WHITE: 'white'
+};
+var MICRODATA = {
+  itemScope: true,
+  itemProp: 'itemListElement',
+  itemType: 'https://schema.org/ListItem'
+};
+var MICRODATA_ITEM_PROP = {
+  itemProp: 'name'
+};
+var cn = cnCreate('mfui-breadcrumbs-item');
+var BreadcrumbsItem = function BreadcrumbsItem(_ref) {
+  var title = _ref.title,
+    href = _ref.href,
+    color = _ref.color,
+    _ref$index = _ref.index,
+    index = _ref$index === void 0 ? 0 : _ref$index,
+    _ref$isLastItem = _ref.isLastItem,
+    isLastItem = _ref$isLastItem === void 0 ? false : _ref$isLastItem,
+    _ref$hasMicrodata = _ref.hasMicrodata,
+    hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
+    _ref$hasMicrodataForL = _ref.hasMicrodataForLastItem,
+    hasMicrodataForLastItem = _ref$hasMicrodataForL === void 0 ? false : _ref$hasMicrodataForL,
+    classes = _ref.classes,
+    dataAttrs = _ref.dataAttrs;
+  var renderMeta = /*#__PURE__*/React.createElement("meta", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.meta, index + 1), {
+    itemProp: "position",
+    content: String(index + 1)
+  }));
+  if (isLastItem) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: cn({
+        color: color
+      })
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, index + 1), hasMicrodataForLastItem && MICRODATA), /*#__PURE__*/React.createElement("span", _extends({
+      className: classes === null || classes === void 0 ? void 0 : classes.lastItemTitle
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemTitle, index + 1), hasMicrodataForLastItem && MICRODATA_ITEM_PROP), title), hasMicrodataForLastItem && renderMeta);
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn()
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, index + 1), hasMicrodata && MICRODATA), /*#__PURE__*/React.createElement(TextLink, {
+    className: classes === null || classes === void 0 ? void 0 : classes.link,
+    href: href,
+    color: color,
+    dataAttrs: {
+      root: (dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link) ? _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link, index + 1)) : undefined
+    },
+    itemProp: hasMicrodata ? 'item' : undefined
+  }, /*#__PURE__*/React.createElement("span", _extends({
+    className: classes === null || classes === void 0 ? void 0 : classes.itemTitle
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemTitle, index + 1), hasMicrodata && MICRODATA_ITEM_PROP), title)), hasMicrodata && renderMeta);
+};
+export default BreadcrumbsItem;

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

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-button-banner{background-color:var(--base);border:1px solid var(--spbSky2);border-radius:0 12px 12px 0;position:relative}@media screen and (max-width:767px){.mfui-button-banner{border-radius:0 0 12px 12px}}.mfui-button-banner:before{background-color:var(--brandGreen);border-radius:0 12px 12px 0;bottom:0;content:"";left:0;position:absolute;top:0;width:12px}@media screen and (max-width:767px){.mfui-button-banner:before{border-radius:0 0 12px 12px;bottom:auto;height:12px;right:0;width:auto}}.mfui-button-banner__content{-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (max-width:767px){.mfui-button-banner__content{padding:36px 16px 32px;text-align:center}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-button-banner__content{padding:32px 0}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-button-banner__content{padding:40px 0}}@media screen and (min-width:1280px){.mfui-button-banner__content{padding:48px 0}}.mfui-button-banner__media{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;background-position:50%;background-repeat:no-repeat;border-radius:0 12px 12px 0;height:100%;justify-content:center;overflow:hidden;padding:0 20px}@media screen and (max-width:767px){.mfui-button-banner__media{border-radius:0 0 12px 12px;height:auto;padding:0 16px 24px}}.mfui-button-banner_scaling_cover .mfui-button-banner__media{background-size:cover}.mfui-button-banner_scaling_contain .mfui-button-banner__media{background-size:contain}.mfui-button-banner__header{margin-bottom:16px}.mfui-button-banner__button{max-width:100%}.mfui-button-banner__text{font-size:15px;font-weight:400;line-height:24px}.mfui-button-banner_image .mfui-button-banner__media{padding:0}@media screen and (max-width:767px){.mfui-button-banner_image .mfui-button-banner__media{height:222px}}.mfui-button-banner_image .mfui-button-banner__text{margin-bottom:32px}

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

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import './ButtonBanner.scss';
+export declare const ButtonColor: {
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+};
+type ButtonColorType = (typeof ButtonColor)[keyof typeof ButtonColor];
+export declare const ButtonTypes: {
+    readonly PRIMARY: "primary";
+    readonly OUTLINE: "outline";
+};
+type ButtonTypesType = (typeof ButtonTypes)[keyof typeof ButtonTypes];
+export declare const ButtonTarget: {
+    readonly SELF: "_self";
+    readonly BLANK: "_blank";
+};
+type ButtonTargetType = (typeof ButtonTarget)[keyof typeof ButtonTarget];
+export declare const ImageScaling: {
+    readonly COVER: "cover";
+    readonly CONTAIN: "contain";
+};
+type ImageScalingType = (typeof ImageScaling)[keyof typeof ImageScaling];
+export interface IButtonBannerProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+    };
+    /** Дополнительный css класс для корневого элемента */
+    className?: string;
+    /** Дополнительный css классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Заголовок */
+    title: string;
+    /** Текст */
+    text: string | React.ReactNode | React.ReactNode[];
+    /** URL изображения */
+    imageUrl?: string;
+    /** Текст кнопки */
+    buttonText: string;
+    /** URL кнопки */
+    buttonUrl?: string;
+    /** Download - свойство тега <a> */
+    buttonDownload?: boolean;
+    /** Target - свойство тега <a> */
+    buttonTarget?: ButtonTargetType;
+    /** Цвет кнопки */
+    buttonColor?: ButtonColorType;
+    /** Тип кнопки */
+    buttonType?: ButtonTypesType;
+    /** Rel - атрибут тега <a> */
+    buttonRel?: string;
+    /** Масштабирование изображения */
+    imageScaling?: ImageScalingType;
+    /** Обработчик клика по кнопке */
+    onButtonClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+}
+declare const ButtonBanner: React.FC<IButtonBannerProps>;
+export default ButtonBanner;

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

@@ -0,0 +1,96 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { Button, Grid, GridColumn, Header } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs, convert, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
+import "./ButtonBanner.css";
+export var ButtonColor = {
+  GREEN: 'green',
+  PURPLE: 'purple'
+};
+export var ButtonTypes = {
+  PRIMARY: 'primary',
+  OUTLINE: 'outline'
+};
+export var ButtonTarget = {
+  SELF: '_self',
+  BLANK: '_blank'
+};
+export var ImageScaling = {
+  COVER: 'cover',
+  CONTAIN: 'contain'
+};
+var getMediaStyle = function getMediaStyle(imageUrl) {
+  return imageUrl ? {
+    backgroundImage: "url(".concat(imageUrl, ")")
+  } : undefined;
+};
+var cn = cnCreate('mfui-button-banner');
+var testIdPrefix = 'ButtonBanner';
+var ButtonBanner = function ButtonBanner(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    rootRef = _ref.rootRef,
+    title = _ref.title,
+    text = _ref.text,
+    _ref$imageUrl = _ref.imageUrl,
+    imageUrl = _ref$imageUrl === void 0 ? '' : _ref$imageUrl,
+    buttonText = _ref.buttonText,
+    buttonUrl = _ref.buttonUrl,
+    buttonDownload = _ref.buttonDownload,
+    _ref$buttonTarget = _ref.buttonTarget,
+    buttonTarget = _ref$buttonTarget === void 0 ? '_self' : _ref$buttonTarget,
+    _ref$buttonColor = _ref.buttonColor,
+    buttonColor = _ref$buttonColor === void 0 ? 'green' : _ref$buttonColor,
+    _ref$buttonType = _ref.buttonType,
+    buttonType = _ref$buttonType === void 0 ? 'primary' : _ref$buttonType,
+    buttonRel = _ref.buttonRel,
+    _ref$imageScaling = _ref.imageScaling,
+    imageScaling = _ref$imageScaling === void 0 ? 'cover' : _ref$imageScaling,
+    onButtonClick = _ref.onButtonClick;
+  var buttonElem = /*#__PURE__*/React.createElement(Button, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
+    className: cn('button', [classes.button]),
+    href: buttonUrl,
+    rel: buttonRel,
+    target: buttonTarget,
+    theme: buttonColor,
+    type: buttonType,
+    onClick: onButtonClick,
+    download: buttonDownload
+  }, buttonText);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      image: !!imageUrl,
+      scaling: imageScaling
+    }, [className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(Grid, {
+    guttersLeft: "medium"
+  }, /*#__PURE__*/React.createElement(GridColumn, {
+    all: "6",
+    mobile: "12",
+    leftOffsetTablet: "1",
+    leftOffsetDesktop: "1",
+    leftOffsetWide: "1"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('content'),
+    "data-testid": "".concat(testIdPrefix, "-content")
+  }, /*#__PURE__*/React.createElement(Header, {
+    className: cn('header'),
+    as: "h2"
+  }, convert(title, titleConvertConfig)), /*#__PURE__*/React.createElement("div", {
+    className: cn('text')
+  }, typeof text === 'string' ? convert(text, textConvertConfig) : text), !!imageUrl && buttonElem)), /*#__PURE__*/React.createElement(GridColumn, {
+    all: "5",
+    mobile: "12"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('media'),
+    style: getMediaStyle(imageUrl),
+    "data-testid": "".concat(testIdPrefix, "-media")
+  }, !imageUrl && buttonElem))));
+};
+export default ButtonBanner;

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

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

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

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import './ButtonLinkBox.scss';
+export interface IButtonLinkBoxProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        link?: Record<string, string>;
+        button?: Record<string, string>;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        link?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Заголовок кнопки */
+    buttonTitle?: string;
+    /** Ссылка кнопки */
+    buttonUrl?: string;
+    /** Добавляет атрибут download для тега <a> компонента Button */
+    buttonDownload?: boolean;
+    /** Цвет кнопки */
+    buttonColor?: 'green' | 'purple' | 'green-soft' | 'purple-soft' | 'black';
+    /** Тип кнопки */
+    buttonType?: 'primary' | 'outline';
+    /** Target свойство кнопки */
+    buttonTarget?: '_self' | '_blank' | '_parent' | '_top';
+    /** Rel - атрибут тега <a> для кнопки */
+    buttonRel?: string;
+    /** Заголовок ссылки */
+    linkTitle?: string;
+    /** Добавляет атрибут download для тега <a> компонента Button */
+    linkUrl?: string;
+    /** Target свойство ссылки */
+    linkTarget?: '_self' | '_blank' | '_parent' | '_top';
+    /** Rel - атрибут тега <a> для ссылки */
+    linkRel?: string;
+    /** Добавляет атрибут download к свойству тега <a> */
+    linkDownload?: boolean;
+    /** Горизонтальное выравнивание */
+    align?: 'center' | 'left';
+    /** Обработчик клика по кнопке */
+    onButtonClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Обработчик клика по ссылке */
+    onLinkClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+}
+declare const ButtonLinkBox: React.FC<IButtonLinkBoxProps>;
+export default ButtonLinkBox;