@megafon/ui-core 8.17.1 → 8.17.3

package/dist/es/components/Accordion/Accordion.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-accordion{background:var(--spbSky0);border-radius:12px}.mfui-accordion+.mfui-accordion{margin-top:8px}@media screen and (min-width:768px){.mfui-accordion+.mfui-accordion{margin-top:12px}}.mfui-accordion__title-wrap{border-radius:12px;cursor:pointer;outline:none;padding:16px 44px 16px 16px;position:relative;-webkit-transition:background-color .3s;transition:background-color .3s}@media screen and (min-width:768px){.mfui-accordion__title-wrap{padding:24px 56px 24px 24px}}.mfui-accordion__title-wrap:hover{background-color:var(--spbSky1)}@media screen and (max-width:1023px){.mfui-accordion__title-wrap:focus{background-color:inherit}}.mfui-accordion__icon-box{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:20px;top:50%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--stcWhite);border-radius:50%;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.08);box-shadow:0 4px 12px rgba(0,0,0,.08);height:24px;justify-content:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:24px}@media screen and (min-width:768px){.mfui-accordion__icon-box{height:32px;right:24px;width:32px}}.mfui-accordion__icon{height:20px;-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s;width:20px}@media screen and (min-width:768px){.mfui-accordion__icon{height:32px;width:32px}}.mfui-accordion__content-inner{padding:4px 20px 20px 16px}@media screen and (min-width:768px){.mfui-accordion__content-inner{padding:4px 24px 20px}}.mfui-accordion_opened .mfui-accordion__icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { IHeaderProps } from '../Header/Header';
+import './Accordion.scss';
+export interface IAccordionProps {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Заголовок */
+    title: string | React.ReactNode | React.ReactNode[];
+    /** Тег заголовка (определяет базовый тег и стили) */
+    titleTag?: IHeaderProps['as'];
+    /** Тег заголовка для семантической разметки (переопределение тега без изменения стилей) */
+    titleTagName?: IHeaderProps['tag'];
+    /** Состояние открытости */
+    isOpened?: boolean;
+    /** Включить микроразметку */
+    hasMicrodata?: boolean;
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        openedClass?: string;
+        collapse?: string;
+        titleWrap?: string;
+        title?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        header?: {
+            root: Record<string, string>;
+        };
+        collapse?: {
+            root?: Record<string, string>;
+            inner?: Record<string, string>;
+        };
+        titleWrap?: Record<string, string>;
+        arrowUp?: Record<string, string>;
+        arrowDown?: Record<string, string>;
+    };
+    children?: React.ReactNode;
+    /** Обработчик клика */
+    onClickAccordion?: (isOpened: boolean) => void;
+}
+declare const Accordion: React.FC<IAccordionProps>;
+export default Accordion;

package/dist/es/components/Accordion/Accordion.js

@@ -0,0 +1,99 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs, checkEventIsClickOrEnterPress } from '@megafon/ui-helpers';
+import Collapse from "../_Collapse/Collapse";
+import Header from "../Header/Header";
+import "./Accordion.css";
+var ArrowDown = function ArrowDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M11 14h10l-5 6z",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+};
+var cn = cnCreate('mfui-accordion');
+var Accordion = function Accordion(_ref) {
+  var rootRef = _ref.rootRef,
+    title = _ref.title,
+    _ref$titleTag = _ref.titleTag,
+    titleTag = _ref$titleTag === void 0 ? 'h5' : _ref$titleTag,
+    titleTagName = _ref.titleTagName,
+    _ref$isOpened = _ref.isOpened,
+    isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
+    _ref$hasMicrodata = _ref.hasMicrodata,
+    hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
+    openedClass = _ref$classes2.openedClass,
+    rootPropsClasses = _ref$classes2.root,
+    collapsePropsClasses = _ref$classes2.collapse,
+    titleWrapPropsClasses = _ref$classes2.titleWrap,
+    titlePropsClasses = _ref$classes2.title,
+    dataAttrs = _ref.dataAttrs,
+    onClickAccordion = _ref.onClickAccordion,
+    children = _ref.children;
+  var _React$useState = React.useState(isOpened),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isOpenedState = _React$useState2[0],
+    setIsOpenedState = _React$useState2[1];
+  React.useEffect(function () {
+    setIsOpenedState(isOpened);
+  }, [isOpened]);
+  var handleClickTitle = function handleClickTitle(e) {
+    if (checkEventIsClickOrEnterPress(e)) {
+      onClickAccordion === null || onClickAccordion === void 0 ? void 0 : onClickAccordion(!isOpenedState);
+      setIsOpenedState(!isOpenedState);
+    }
+  };
+  var openedClassName = isOpenedState ? openedClass : undefined;
+  var arrowDataAttrs = isOpenedState ? dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowUp : dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowDown;
+  var renderContent = function renderContent() {
+    if (hasMicrodata) {
+      return /*#__PURE__*/React.createElement("div", {
+        itemScope: true,
+        itemProp: "acceptedAnswer",
+        itemType: "https://schema.org/Answer"
+      }, /*#__PURE__*/React.createElement("div", {
+        itemProp: "text"
+      }, children));
+    }
+    return children;
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    ref: rootRef,
+    className: cn({
+      opened: isOpenedState
+    }, [className, rootPropsClasses, openedClassName])
+  }, hasMicrodata && {
+    itemScope: true,
+    itemProp: 'mainEntity',
+    itemType: 'https://schema.org/Question'
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.titleWrap), {
+    className: cn('title-wrap', [titleWrapPropsClasses]),
+    onClick: handleClickTitle,
+    onKeyDown: handleClickTitle,
+    tabIndex: 0,
+    role: "button"
+  }, hasMicrodata && {
+    itemProp: 'name'
+  }), /*#__PURE__*/React.createElement(Header, {
+    as: titleTag,
+    tag: titleTagName,
+    dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header,
+    className: titlePropsClasses
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: cn('icon-box')
+  }, /*#__PURE__*/React.createElement(ArrowDown, _extends({
+    className: cn('icon')
+  }, filterDataAttrs(arrowDataAttrs))))), /*#__PURE__*/React.createElement(Collapse, {
+    dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse,
+    className: cn('content', collapsePropsClasses),
+    classNameContainer: cn('content-inner'),
+    isOpened: isOpenedState
+  }, renderContent()));
+};
+export default Accordion;

package/dist/es/components/Avatar/Avatar.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-avatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:15px;font-weight:500;height:40px;justify-content:center;overflow:hidden;width:40px}.mfui-avatar__text{display:block}.mfui-avatar__image{background-color:var(--base);height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.mfui-avatar__placeholder{opacity:.3}.mfui-avatar_color_green{background-color:var(--brandGreen20);color:var(--brandGreen)}.mfui-avatar_color_green .mfui-avatar__placeholder{fill:var(--brandGreen)}.mfui-avatar_color_gray{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-avatar_color_gray .mfui-avatar__placeholder{fill:var(--spbSky3)}.mfui-avatar_size_auto{font-size:inherit;height:100%;width:100%}.mfui-avatar_default{display:block}.mfui-avatar_default svg{margin:auto}

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import './Avatar.scss';
+export interface IAvatarProps {
+    /** Ссылка на изображение. Имеет приоритет над текстом */
+    src?: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+    /** Текстовое отображение */
+    letters?: string;
+    /** Цвет заливки */
+    color?: 'green' | 'gray';
+    /** Размер (по умолчанию 40х40 пикселей). */
+    size?: 'default' | 'auto';
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const Avatar: React.FC<IAvatarProps>;
+export default Avatar;

package/dist/es/components/Avatar/Avatar.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.slice.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./Avatar.css";
+var PlaceholderIcon = function PlaceholderIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 40 40"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M29.188 40.75l2.625-9.752-.42-.407A16.63 16.63 0 0020 26.312a16.642 16.642 0 00-11.393 4.292l-.42.394 2.626 9.752h18.374zM12.125 15.813a7.875 7.875 0 1015.75 0 7.875 7.875 0 00-15.75 0z"
+  }));
+};
+var cn = cnCreate('mfui-avatar');
+var Avatar = function Avatar(_ref) {
+  var src = _ref.src,
+    _ref$alt = _ref.alt,
+    alt = _ref$alt === void 0 ? 'avatar' : _ref$alt,
+    letters = _ref.letters,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'green' : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size,
+    className = _ref.className,
+    dataAttrs = _ref.dataAttrs;
+  var renderContent = function renderContent() {
+    if (src) {
+      return /*#__PURE__*/React.createElement("img", {
+        className: cn('image'),
+        src: src,
+        alt: alt
+      });
+    }
+    if (letters) {
+      var text = letters.slice(0, 2).toUpperCase();
+      return /*#__PURE__*/React.createElement("span", {
+        className: cn('text')
+      }, text);
+    }
+    return /*#__PURE__*/React.createElement(PlaceholderIcon, {
+      className: cn('placeholder')
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      color: color,
+      size: size,
+      "default": !src && !letters
+    }, [className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), renderContent());
+};
+export default Avatar;

package/dist/es/components/Badges/CounterBadge/CounterBadge.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-counter-badge{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;border-radius:12px;font-size:12px;font-weight:500;justify-content:center;line-height:14px;min-width:24px;padding:5px 6px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-counter-badge_limited{padding:5px 12px}@media screen and (min-width:1024px){.mfui-counter-badge_adaptive{font-size:15px;line-height:18px;min-width:28px}}.mfui-counter-badge_icon{padding:2px 4px 2px 12px}.mfui-counter-badge_adaptive.mfui-counter-badge_icon{padding:4px 4px 4px 12px}.mfui-counter-badge__icon{height:20px;margin-left:4px;min-width:20px;width:20px}.mfui-counter-badge_theme_light-blue{background-color:var(--sky20)}.mfui-counter-badge_theme_light-blue .mfui-counter-badge__icon{fill:var(--sky)}.mfui-counter-badge_theme_purple{background-color:var(--brandPurple20)}.mfui-counter-badge_theme_purple .mfui-counter-badge__icon{fill:var(--brandPurple)}

package/dist/es/components/Badges/CounterBadge/CounterBadge.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import './CounterBadge.scss';
+export declare const CounterBadgeColorTheme: {
+    readonly LIGHT_BLUE: "light-blue";
+    readonly PURPLE: "purple";
+};
+type CounterBadgeColorThemeType = (typeof CounterBadgeColorTheme)[keyof typeof CounterBadgeColorTheme];
+export interface ICounterBadgeProps {
+    /** Текущее значение */
+    currentValue: number;
+    /** Максимальное значение */
+    totalCount?: number;
+    /** Наличие иконки */
+    hasIcon?: boolean;
+    /** Кастомная иконка */
+    customIcon?: JSX.Element;
+    /** Цветовая тема */
+    colorTheme?: CounterBadgeColorThemeType;
+    /** Адаптивный режим */
+    isAdaptive?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const CounterBadge: React.FC<ICounterBadgeProps>;
+export default CounterBadge;

package/dist/es/components/Badges/CounterBadge/CounterBadge.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./CounterBadge.css";
+var DefaultIcon = function DefaultIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M11.39 9H16v1l-7.5 8H7l1.61-7H4v-1l7.5-8H13z",
+    fillRule: "evenodd"
+  }));
+};
+export var CounterBadgeColorTheme = {
+  LIGHT_BLUE: 'light-blue',
+  PURPLE: 'purple'
+};
+var cn = cnCreate('mfui-counter-badge');
+var CounterBadge = function CounterBadge(_ref) {
+  var totalCount = _ref.totalCount,
+    currentValue = _ref.currentValue,
+    _ref$hasIcon = _ref.hasIcon,
+    hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
+    customIcon = _ref.customIcon,
+    _ref$colorTheme = _ref.colorTheme,
+    colorTheme = _ref$colorTheme === void 0 ? 'light-blue' : _ref$colorTheme,
+    _ref$isAdaptive = _ref.isAdaptive,
+    isAdaptive = _ref$isAdaptive === void 0 ? false : _ref$isAdaptive,
+    className = _ref.className,
+    dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      limited: !!totalCount,
+      adaptive: isAdaptive,
+      theme: colorTheme,
+      icon: hasIcon
+    }, className)
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("span", {
+    className: cn('value')
+  }, currentValue, !!totalCount && "/".concat(totalCount)), hasIcon && /*#__PURE__*/React.createElement("div", {
+    className: cn('icon')
+  }, customIcon || /*#__PURE__*/React.createElement(DefaultIcon, null)));
+};
+export default CounterBadge;

package/dist/es/components/Badges/NotificationBadge/NotificationBadge.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{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;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--fury);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium .mfui-notification-badge__text{font-size:10px;line-height:12px}.mfui-notification-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:14px}

package/dist/es/components/Badges/NotificationBadge/NotificationBadge.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import './NotificationBadge.scss';
+export declare const NotificationBadgeTheme: {
+    readonly GREEN: "green";
+    readonly RED: "red";
+};
+type NotificationBadgeThemeType = (typeof NotificationBadgeTheme)[keyof typeof NotificationBadgeTheme];
+export declare const NotificationBadgeSize: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly BIG: "big";
+};
+type NotificationBadgeSizeType = (typeof NotificationBadgeSize)[keyof typeof NotificationBadgeSize];
+export interface INotificationBadgeProps {
+    /** Цветовая тема */
+    theme?: NotificationBadgeThemeType;
+    /** Размер бейджа */
+    size?: NotificationBadgeSizeType;
+    /** Ширина по размеру содержимого */
+    autoWidth?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    children?: React.ReactNode;
+}
+declare const NotificationBadge: React.FC<INotificationBadgeProps>;
+export default NotificationBadge;

package/dist/es/components/Badges/NotificationBadge/NotificationBadge.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./NotificationBadge.css";
+export var NotificationBadgeTheme = {
+  GREEN: 'green',
+  RED: 'red'
+};
+export var NotificationBadgeSize = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  BIG: 'big'
+};
+var cn = cnCreate('mfui-notification-badge');
+var NotificationBadge = function NotificationBadge(_ref) {
+  var _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'green' : _ref$theme,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'big' : _ref$size,
+    _ref$autoWidth = _ref.autoWidth,
+    autoWidth = _ref$autoWidth === void 0 ? false : _ref$autoWidth,
+    className = _ref.className,
+    dataAttrs = _ref.dataAttrs,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      theme: theme,
+      size: size,
+      'auto-width': autoWidth
+    }, className)
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('text')
+  }, children));
+};
+export default NotificationBadge;

package/dist/es/components/Badges/PriceBadge/PriceBadge.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-price-badge{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;line-height:18px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:8px;font-weight:500;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:2px 8px 2px 2px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (min-width:1024px){.mfui-price-badge_adaptive{border-radius:12px;font-size:15px;line-height:24px;min-height:32px;padding:4px 8px 4px 4px}}.mfui-price-badge_theme_grey{background-color:var(--spbSky0)}.mfui-price-badge_theme_grey .mfui-price-badge__text{color:var(--spbSky3)}.mfui-price-badge_theme_grey .mfui-price-badge__icon{fill:var(--spbSky3)}.mfui-price-badge_theme_orange{background-color:var(--137C20)}.mfui-price-badge_theme_orange .mfui-price-badge__text{color:var(--137C)}.mfui-price-badge_theme_orange .mfui-price-badge__icon{fill:var(--137C)}.mfui-price-badge_theme_green{background-color:var(--brandGreen20)}.mfui-price-badge_theme_green .mfui-price-badge__text{color:var(--brandGreen)}.mfui-price-badge_theme_green .mfui-price-badge__icon{fill:var(--brandGreen)}.mfui-price-badge_theme_purple{background-color:var(--brandPurple80)}.mfui-price-badge_theme_purple .mfui-price-badge__text{color:var(--stcWhite)}.mfui-price-badge_theme_purple .mfui-price-badge__icon{fill:var(--stcWhite)}.mfui-price-badge_theme_red{background-color:var(--fury20)}.mfui-price-badge_theme_red .mfui-price-badge__text{color:var(--fury)}.mfui-price-badge_theme_red .mfui-price-badge__icon{fill:var(--fury)}.mfui-price-badge_theme_light{background-color:var(--stcWhite20)}.mfui-price-badge_theme_dark{background-color:var(--stcBlack20)}.mfui-price-badge_theme_dark .mfui-price-badge__text,.mfui-price-badge_theme_light .mfui-price-badge__text{color:var(--stcWhite);font-weight:400}.mfui-price-badge_theme_dark .mfui-price-badge__icon,.mfui-price-badge_theme_light .mfui-price-badge__icon{fill:var(--stcWhite)}.mfui-price-badge_size_big{font-size:15px;line-height:18px;padding:12px 12px 12px 4px}.mfui-price-badge__text{font-family:inherit;margin-left:2px}.mfui-price-badge__icon-container{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-price-badge__icon{height:20px;min-width:20px;width:20px}.mfui-price-badge_size_big .mfui-price-badge__icon{height:32px;min-width:32px;width:32px}.mfui-price-badge_size_big .mfui-price-badge__sub-title{font-size:12px;line-height:18px;margin-top:2px}

package/dist/es/components/Badges/PriceBadge/PriceBadge.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import './PriceBadge.scss';
+export declare const PriceBadgeTheme: {
+    readonly RED: "red";
+    readonly GREY: "grey";
+    readonly GREEN: "green";
+    readonly ORANGE: "orange";
+    readonly LIGHT: "light";
+    readonly DARK: "dark";
+    readonly PURPLE: "purple";
+};
+export declare const PriceBadgeIcon: {
+    readonly TIMER: "timer";
+    readonly PRICE: "price";
+    readonly CHECK: "check";
+    readonly ATTENTION: "attention";
+    readonly INFO: "info";
+    readonly PROFILE: "profile";
+    readonly BAN: "ban";
+};
+export declare const PriseBadgeSize: {
+    readonly SMALL: "small";
+    readonly BIG: "big";
+};
+type PriceBadgeThemeType = (typeof PriceBadgeTheme)[keyof typeof PriceBadgeTheme];
+type PriceBadgeIconType = (typeof PriceBadgeIcon)[keyof typeof PriceBadgeIcon];
+type PriseBadgeSizeType = (typeof PriseBadgeSize)[keyof typeof PriseBadgeSize];
+export interface IPriceBadgeProps {
+    /** Адаптивный режим */
+    isAdaptive?: boolean;
+    /** Тип иконки */
+    iconType?: PriceBadgeIconType;
+    /** Цветовая тема */
+    theme?: PriceBadgeThemeType;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Размер бейджа */
+    size?: PriseBadgeSizeType;
+    /** Дополнительный текст (только для size="big") */
+    subTitle?: string;
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    children: JSX.Element[] | Element[] | JSX.Element | Element | string;
+}
+declare const PriceBadge: React.FC<IPriceBadgeProps>;
+export default PriceBadge;

package/dist/es/components/Badges/PriceBadge/PriceBadge.js

@@ -0,0 +1,210 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./PriceBadge.css";
+var ProfileIcon = function ProfileIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M5.22 18h9.55L16 13.47A8.28 8.28 0 0010 11a8.302 8.302 0 00-6 2.5L5.22 18zM14 6a4 4 0 10-8 0 4 4 0 008 0z"
+  }));
+};
+var ProfileIconBig = function ProfileIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M23 28l2-7.43-.32-.31A12.67 12.67 0 0016 17a12.68 12.68 0 00-8.68 3.27l-.32.3L9 28h14zM10 9a6 6 0 1012 0 6 6 0 00-12 0z"
+  }));
+};
+var AttentionIcon = function AttentionIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M10 2c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm0 13c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7s-.1-.5-.3-.7c-.2-.2-.5-.3-.7-.3s-.5.1-.7.3c-.2.2-.3.4-.3.7s.1.5.3.7.5.3.7.3zM9 5v6h2V5H9z"
+  }));
+};
+var BanIcon = function BanIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12.172 13.056a3.75 3.75 0 01-5.229-5.228l5.229 5.228zM10 6.25a3.75 3.75 0 013.056 5.922L7.827 6.943A3.733 3.733 0 0110 6.25z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 2a8 8 0 110 16 8 8 0 010-16zm0 3a5 5 0 100 10 5 5 0 000-10z"
+  }));
+};
+var CheckIcon = function CheckIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zM7.295 9.467l1.77 1.77 3.66-5.22 1.31.918-4.745 6.79-3.126-3.127 1.131-1.13z"
+  }));
+};
+var InfoIcon = function InfoIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M10 2c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm0 5c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1zm1 8V9H9v6h2z"
+  }));
+};
+var PriceIcon = function PriceIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zM7.75 5.75H11a2.75 2.75 0 010 5.5H9.25V12h3v1.5h-3v1.75h-1.5V13.5h-1V12h1v-.75h-1v-1.5h1v-4zM11 7.25H9.25v2.5H11a1.25 1.25 0 000-2.5z"
+  }));
+};
+var TimerIcon = function TimerIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-8.414V5H9v5.414l3 3L13.414 12 11 9.586z"
+  }));
+};
+var AttentionIconBig = function AttentionIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M16 4C9.4 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm1 18h-2v-2h2v2zm0-4h-2v-8h2v8z"
+  }));
+};
+var BanIconBig = function BanIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M19.475 20.89a6 6 0 01-8.365-8.365l8.365 8.365zM16 10a6 6 0 014.89 9.475l-8.366-8.366A5.972 5.972 0 0116 10z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4zm0 4a8 8 0 100 16 8 8 0 000-16z"
+  }));
+};
+var CheckIconBig = function CheckIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm-1.306-10.016l6.32-7.672 1.486 1.37s-7.538 9.186-7.7 9.193c-.136 0-4.488-4.484-4.488-4.484l1.438-1.425 2.944 3.018z"
+  }));
+};
+var InfoIconBig = function InfoIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M16 4C9.4 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm1 18h-2v-8h2v8zm0-10h-2v-2h2v2z"
+  }));
+};
+var PriceIconBig = function PriceIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm-5-7v-2h2v-2h-2v-2h2V9h4a4 4 0 110 8h-2v2h4v2h-4v2h-2v-2h-2zm7.414-9.414A2 2 0 0017 11h-2v4h2a2 2 0 001.414-3.414z"
+  }));
+};
+var TimerIconBig = function TimerIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm1-12.414V9h-2v7.414l4 4L20.414 19 17 15.586z"
+  }));
+};
+export var PriceBadgeTheme = {
+  RED: 'red',
+  GREY: 'grey',
+  GREEN: 'green',
+  ORANGE: 'orange',
+  LIGHT: 'light',
+  DARK: 'dark',
+  PURPLE: 'purple'
+};
+export var PriceBadgeIcon = {
+  TIMER: 'timer',
+  PRICE: 'price',
+  CHECK: 'check',
+  ATTENTION: 'attention',
+  INFO: 'info',
+  PROFILE: 'profile',
+  BAN: 'ban'
+};
+export var PriseBadgeSize = {
+  SMALL: 'small',
+  BIG: 'big'
+};
+var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
+  var isBigIcon = size === PriseBadgeSize.BIG;
+  switch (true) {
+    case iconType === PriceBadgeIcon.TIMER && isBigIcon:
+      return TimerIconBig;
+    case iconType === PriceBadgeIcon.PRICE && isBigIcon:
+      return PriceIconBig;
+    case iconType === PriceBadgeIcon.CHECK && isBigIcon:
+      return CheckIconBig;
+    case iconType === PriceBadgeIcon.ATTENTION && isBigIcon:
+      return AttentionIconBig;
+    case iconType === PriceBadgeIcon.INFO && isBigIcon:
+      return InfoIconBig;
+    case iconType === PriceBadgeIcon.PROFILE && isBigIcon:
+      return ProfileIconBig;
+    case iconType === PriceBadgeIcon.BAN && isBigIcon:
+      return BanIconBig;
+    case iconType === PriceBadgeIcon.PRICE:
+      return PriceIcon;
+    case iconType === PriceBadgeIcon.CHECK:
+      return CheckIcon;
+    case iconType === PriceBadgeIcon.ATTENTION:
+      return AttentionIcon;
+    case iconType === PriceBadgeIcon.INFO:
+      return InfoIcon;
+    case iconType === PriceBadgeIcon.PROFILE:
+      return ProfileIcon;
+    case iconType === PriceBadgeIcon.BAN:
+      return BanIcon;
+    default:
+      return TimerIcon;
+  }
+};
+var cn = cnCreate('mfui-price-badge');
+var PriceBadge = function PriceBadge(_ref) {
+  var _ref$iconType = _ref.iconType,
+    iconType = _ref$iconType === void 0 ? 'timer' : _ref$iconType,
+    _ref$isAdaptive = _ref.isAdaptive,
+    isAdaptive = _ref$isAdaptive === void 0 ? false : _ref$isAdaptive,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'grey' : _ref$theme,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    subTitle = _ref.subTitle,
+    className = _ref.className,
+    dataAttrs = _ref.dataAttrs,
+    children = _ref.children;
+  var Icon = getPriceBadgeIcon(iconType, size);
+  var showSubTitle = size === 'big' && !!subTitle;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      theme: theme,
+      adaptive: isAdaptive,
+      size: size
+    }, className)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('icon-container')
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: cn('icon')
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('text')
+  }, /*#__PURE__*/React.createElement("div", null, children), showSubTitle && /*#__PURE__*/React.createElement("div", {
+    className: cn('sub-title')
+  }, subTitle)));
+};
+export default PriceBadge;

package/dist/es/components/Badges/PromoBadge/PromoBadge.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-promo-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:8px;color:var(--stcWhite);padding:4px 12px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-promo-badge_color_berry{background-color:var(--berry)}.mfui-promo-badge_color_brand-purple-20{background-color:var(--brandPurple20);color:var(--brandPurple)}.mfui-promo-badge_color_brand-purple{background-color:var(--brandPurple)}.mfui-promo-badge_color_night{background-color:var(--night)}.mfui-promo-badge_color_sky{background-color:var(--sky)}.mfui-promo-badge_color_flamingo{background-color:var(--flamingo)}.mfui-promo-badge_color_gradient-purple{background:var(--gradientPurple1);color:var(--stcWhite)}.mfui-promo-badge_size_small{border-radius:8px;height:18px;padding:0 8px}.mfui-promo-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:18px}