@megafon/ui-core 3.1.0 → 3.3.1

package/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.3.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.3.0...@megafon/ui-core@3.3.1) (2022-03-15)
+
+
+### Bug Fixes
+
+* **collapse:** made collapse height 0 or auto on animation end ([c898d1e](https://github.com/MegafonWebLab/megafon-ui/commit/c898d1e84d3c92defa204c24125508655466d5cd))
+
+
+
+
+
+# [3.3.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.2.0...@megafon/ui-core@3.3.0) (2022-03-14)
+
+
+### Bug Fixes
+
+* **accordion:** remove outline for safari ([787b572](https://github.com/MegafonWebLab/megafon-ui/commit/787b5725ef962637401a0a3a1a8ae7ba0cece031))
+
+
+### Features
+
+* **badges:** add new component PriceBadge ([9214baa](https://github.com/MegafonWebLab/megafon-ui/commit/9214baab003f958b916b728cf07e6f9db15173dd))
+* **badges:** add new component PromoBadge ([6e550a0](https://github.com/MegafonWebLab/megafon-ui/commit/6e550a06fd2d0fb7b3dba488702f4a34f4f6d101))
+
+
+
+
+
+# [3.2.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.1.0...@megafon/ui-core@3.2.0) (2022-02-28)
+
+
+### Bug Fixes
+
+* **checkbox:** delete outline focus effect ([ecd98e7](https://github.com/MegafonWebLab/megafon-ui/commit/ecd98e7129ddd305ce6e21c1c98cdacc3670ff92))
+* **tile:** delete unnecessary symbol ([1f0ed90](https://github.com/MegafonWebLab/megafon-ui/commit/1f0ed9009ef2cb9e5562f257640a623eceae225e))
+
+
+### Features
+
+* **carousel:** fix data-attribute passing for NavArrow ([af0d26e](https://github.com/MegafonWebLab/megafon-ui/commit/af0d26ef85a19cdb4fd863a45b2c2b2365d9c086))
+* **tile:** add target props for link ([e49d040](https://github.com/MegafonWebLab/megafon-ui/commit/e49d0402725e88b9fd7d80fd418acd81bea321ba))
+
+
+
+
+
 # [3.1.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.2...@megafon/ui-core@3.1.0) (2022-02-22)
 
 

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

@@ -32,6 +32,7 @@
   right: 20px;
   width: 32px;
   height: 32px;
+  outline: none;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   opacity: 1;

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

@@ -0,0 +1,70 @@
+.mfui-price-badge {
+  font-size: 12px;
+  line-height: 16px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 4px;
+  padding-right: 8px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: 24px;
+  border-radius: 8px;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-price-badge_adaptive {
+    font-size: 15px;
+    line-height: 24px;
+    padding: 4px 8px;
+    height: 32px;
+    border-radius: 12px;
+  }
+}
+.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_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__text {
+  font-family: inherit;
+  margin-left: 4px;
+}
+.mfui-price-badge__icon {
+  height: 20px;
+  width: 20px;
+}

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import './PriceBadge.less';
+export declare const PriceBadgeTheme: {
+    readonly RED: "red";
+    readonly GREY: "grey";
+    readonly GREEN: "green";
+    readonly ORANGE: "orange";
+};
+export declare const PriceBadgeIcon: {
+    readonly TIMER: "timer";
+    readonly PRICE: "price";
+    readonly CHECK: "check";
+    readonly ATTENTION: "attention";
+};
+declare type PriceBadgeThemeType = typeof PriceBadgeTheme[keyof typeof PriceBadgeTheme];
+declare type PriceBadgeIconType = typeof PriceBadgeIcon[keyof typeof PriceBadgeIcon];
+export interface IPriceBadgeProps {
+    /** Адаптивный режим */
+    isAdaptive?: boolean;
+    /** Тип иконки */
+    iconType?: PriceBadgeIconType;
+    /** Цветовая тема */
+    theme?: PriceBadgeThemeType;
+    /** Дополнительный класс корневого элемента */
+    className?: 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/components/PriceBadge/PriceBadge.js

@@ -0,0 +1,113 @@
+import "core-js/modules/es.object.values";
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import "./PriceBadge.css";
+
+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 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 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"
+  }));
+};
+
+export var PriceBadgeTheme = {
+  RED: 'red',
+  GREY: 'grey',
+  GREEN: 'green',
+  ORANGE: 'orange'
+};
+export var PriceBadgeIcon = {
+  TIMER: 'timer',
+  PRICE: 'price',
+  CHECK: 'check',
+  ATTENTION: 'attention'
+};
+
+var getPriceBadgeIcon = function getPriceBadgeIcon(iconType) {
+  switch (iconType) {
+    case PriceBadgeIcon.TIMER:
+      return TimerIcon;
+
+    case PriceBadgeIcon.PRICE:
+      return PriceIcon;
+
+    case PriceBadgeIcon.CHECK:
+      return CheckIcon;
+
+    case PriceBadgeIcon.ATTENTION:
+      return AttentionIcon;
+
+    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,
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children;
+  var Icon = getPriceBadgeIcon(iconType);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      theme: theme,
+      adaptive: isAdaptive
+    }, className)
+  }), /*#__PURE__*/React.createElement(Icon, {
+    className: cn('icon')
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('text')
+  }, children));
+};
+
+PriceBadge.propTypes = {
+  isAdaptive: PropTypes.bool,
+  iconType: PropTypes.oneOf(Object.values(PriceBadgeIcon)),
+  theme: PropTypes.oneOf(Object.values(PriceBadgeTheme)),
+  className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired).isRequired
+  }),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]).isRequired
+};
+export default PriceBadge;

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

@@ -0,0 +1,32 @@
+.mfui-promo-badge {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 4px 12px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-radius: 8px;
+  color: var(--base);
+}
+.mfui-promo-badge_type_hit {
+  background-color: var(--warmRedC);
+}
+.mfui-promo-badge_type_new {
+  background-color: var(--systemBlue);
+}
+.mfui-promo-badge_type_popular {
+  background-color: var(--137C);
+}
+.mfui-promo-badge_type_user-choice {
+  background-color: var(--reflexBlue);
+}
+.mfui-promo-badge__text {
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+}

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import './PromoBadge.less';
+export declare const PromoBadgeTypes: {
+    readonly HIT: "hit";
+    readonly NEW: "new";
+    readonly POPULAR: "popular";
+    readonly USER_CHOICE: "user-choice";
+};
+declare type PromoBadgeTypesType = typeof PromoBadgeTypes[keyof typeof PromoBadgeTypes];
+export interface IPromoBadgeProps {
+    /** Тип промо-бэйджа */
+    type?: PromoBadgeTypesType;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    children: JSX.Element[] | Element[] | JSX.Element | Element | string;
+}
+declare const PromoBadge: React.FC<IPromoBadgeProps>;
+export default PromoBadge;

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

@@ -0,0 +1,38 @@
+import "core-js/modules/es.object.values";
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import "./PromoBadge.css";
+export var PromoBadgeTypes = {
+  HIT: 'hit',
+  NEW: 'new',
+  POPULAR: 'popular',
+  USER_CHOICE: 'user-choice'
+};
+var cn = cnCreate('mfui-promo-badge');
+
+var PromoBadge = function PromoBadge(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'hit' : _ref$type,
+      className = _ref.className,
+      children = _ref.children,
+      dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      type: type
+    }, className)
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('text')
+  }, children));
+};
+
+PromoBadge.propTypes = {
+  type: PropTypes.oneOf(Object.values(PromoBadgeTypes)),
+  className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]).isRequired
+};
+export default PromoBadge;

package/dist/es/components/Carousel/Carousel.js

@@ -281,7 +281,10 @@ var Carousel = function Carousel(_ref) {
       onFocus: handleSlideFocus(i),
       onMouseDown: disableFocusOnSlideClick
     }), child);
-  })), /*#__PURE__*/React.createElement(NavArrow, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev), {
+  })), /*#__PURE__*/React.createElement(NavArrow, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev
+    },
     className: cn('arrow', {
       prev: true,
       locked: isLocked
@@ -289,7 +292,10 @@ var Carousel = function Carousel(_ref) {
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
     theme: ArrowTheme.PURPLE
-  })), /*#__PURE__*/React.createElement(NavArrow, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next), {
+  }), /*#__PURE__*/React.createElement(NavArrow, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next
+    },
     className: cn('arrow', {
       next: true,
       locked: isLocked
@@ -298,7 +304,7 @@ var Carousel = function Carousel(_ref) {
     onClick: handleNextClick,
     disabled: !loop && isEnd,
     theme: ArrowTheme.PURPLE
-  })));
+  }));
 };
 
 Carousel.propTypes = {

package/dist/es/components/Checkbox/Checkbox.css

@@ -37,6 +37,9 @@
   border: 2px solid;
   border-radius: 2px;
 }
+.mfui-checkbox__custom-input:focus {
+  outline: none;
+}
 .mfui-checkbox__icon {
   display: block;
   width: 32px;

package/dist/es/components/Collapse/Collapse.js

@@ -58,6 +58,7 @@ var Collapse = function Collapse(props) {
     } else {
       animationStart.current = null;
       animationId.current = null;
+      rootNode.current.style.height = isOpenAction ? 'auto' : '0px';
     }
   }, []);
   useEffect(function () {

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

@@ -20,6 +20,8 @@ declare type ShadowType = typeof Shadow[keyof typeof Shadow];
 export interface ITileProps {
     /** Ссылка */
     href?: string;
+    /** Атрибут для открытия ссылки */
+    target?: '_self' | '_blank';
     /** Тема */
     theme?: ThemeType;
     /** Радиус границы */

package/dist/es/components/Tile/Tile.js

@@ -33,7 +33,9 @@ var Tile = function Tile(_ref) {
       _ref$isInteractive = _ref.isInteractive,
       isInteractive = _ref$isInteractive === void 0 ? false : _ref$isInteractive,
       onClick = _ref.onClick,
-      dataAttrs = _ref.dataAttrs;
+      dataAttrs = _ref.dataAttrs,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '_self' : _ref$target;
 
   var handleClick = function handleClick(e) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
@@ -51,7 +53,8 @@ var Tile = function Tile(_ref) {
     onClick: handleClick
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), href && /*#__PURE__*/React.createElement("a", {
     href: href,
-    className: cn('link')
+    className: cn('link'),
+    target: target
   }, children), !href && children);
 };
 
@@ -65,6 +68,7 @@ Tile.propTypes = {
   onClick: PropTypes.func,
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired)
-  })
+  }),
+  target: PropTypes.oneOf(['_self', '_blank'])
 };
 export default Tile;

package/dist/es/index.d.ts

@@ -28,6 +28,8 @@ export { default as PaginationButtons } from './components/Pagination/components
 export { default as PaginationNavigation } from './components/Pagination/components/PaginationNavigation/PaginationNavigation';
 export { default as Paragraph } from './components/Paragraph/Paragraph';
 export { default as Preloader } from './components/Preloader/Preloader';
+export { default as PriceBadge } from './components/Badges/components/PriceBadge/PriceBadge';
+export { default as PromoBadge } from './components/Badges/components/PromoBadge/PromoBadge';
 export { default as RadioButton } from './components/RadioButton/RadioButton';
 export { default as Search } from './components/Search/Search';
 export { default as Select } from './components/Select/Select';

package/dist/es/index.js

@@ -28,6 +28,8 @@ export { default as PaginationButtons } from "./components/Pagination/components
 export { default as PaginationNavigation } from "./components/Pagination/components/PaginationNavigation/PaginationNavigation";
 export { default as Paragraph } from "./components/Paragraph/Paragraph";
 export { default as Preloader } from "./components/Preloader/Preloader";
+export { default as PriceBadge } from "./components/Badges/components/PriceBadge/PriceBadge";
+export { default as PromoBadge } from "./components/Badges/components/PromoBadge/PromoBadge";
 export { default as RadioButton } from "./components/RadioButton/RadioButton";
 export { default as Search } from "./components/Search/Search";
 export { default as Select } from "./components/Select/Select";

package/dist/lib/components/Accordion/Accordion.css

@@ -32,6 +32,7 @@
   right: 20px;
   width: 32px;
   height: 32px;
+  outline: none;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   opacity: 1;

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

@@ -0,0 +1,70 @@
+.mfui-price-badge {
+  font-size: 12px;
+  line-height: 16px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 4px;
+  padding-right: 8px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: 24px;
+  border-radius: 8px;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-price-badge_adaptive {
+    font-size: 15px;
+    line-height: 24px;
+    padding: 4px 8px;
+    height: 32px;
+    border-radius: 12px;
+  }
+}
+.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_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__text {
+  font-family: inherit;
+  margin-left: 4px;
+}
+.mfui-price-badge__icon {
+  height: 20px;
+  width: 20px;
+}

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import './PriceBadge.less';
+export declare const PriceBadgeTheme: {
+    readonly RED: "red";
+    readonly GREY: "grey";
+    readonly GREEN: "green";
+    readonly ORANGE: "orange";
+};
+export declare const PriceBadgeIcon: {
+    readonly TIMER: "timer";
+    readonly PRICE: "price";
+    readonly CHECK: "check";
+    readonly ATTENTION: "attention";
+};
+declare type PriceBadgeThemeType = typeof PriceBadgeTheme[keyof typeof PriceBadgeTheme];
+declare type PriceBadgeIconType = typeof PriceBadgeIcon[keyof typeof PriceBadgeIcon];
+export interface IPriceBadgeProps {
+    /** Адаптивный режим */
+    isAdaptive?: boolean;
+    /** Тип иконки */
+    iconType?: PriceBadgeIconType;
+    /** Цветовая тема */
+    theme?: PriceBadgeThemeType;
+    /** Дополнительный класс корневого элемента */
+    className?: 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/lib/components/Badges/components/PriceBadge/PriceBadge.js

@@ -0,0 +1,134 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.PriceBadgeIcon = exports.PriceBadgeTheme = void 0;
+
+require("core-js/modules/es.object.values");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var AttentionIcon = function AttentionIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    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 CheckIcon = function CheckIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    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 PriceIcon = function PriceIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    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", (0, _extends2["default"])({
+    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 PriceBadgeTheme = {
+  RED: 'red',
+  GREY: 'grey',
+  GREEN: 'green',
+  ORANGE: 'orange'
+};
+exports.PriceBadgeTheme = PriceBadgeTheme;
+var PriceBadgeIcon = {
+  TIMER: 'timer',
+  PRICE: 'price',
+  CHECK: 'check',
+  ATTENTION: 'attention'
+};
+exports.PriceBadgeIcon = PriceBadgeIcon;
+
+var getPriceBadgeIcon = function getPriceBadgeIcon(iconType) {
+  switch (iconType) {
+    case PriceBadgeIcon.TIMER:
+      return TimerIcon;
+
+    case PriceBadgeIcon.PRICE:
+      return PriceIcon;
+
+    case PriceBadgeIcon.CHECK:
+      return CheckIcon;
+
+    case PriceBadgeIcon.ATTENTION:
+      return AttentionIcon;
+
+    default:
+      return TimerIcon;
+  }
+};
+
+var cn = (0, _uiHelpers.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,
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children;
+  var Icon = getPriceBadgeIcon(iconType);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      theme: theme,
+      adaptive: isAdaptive
+    }, className)
+  }), /*#__PURE__*/React.createElement(Icon, {
+    className: cn('icon')
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('text')
+  }, children));
+};
+
+PriceBadge.propTypes = {
+  isAdaptive: PropTypes.bool,
+  iconType: PropTypes.oneOf(Object.values(PriceBadgeIcon)),
+  theme: PropTypes.oneOf(Object.values(PriceBadgeTheme)),
+  className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired).isRequired
+  }),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]).isRequired
+};
+var _default = PriceBadge;
+exports["default"] = _default;

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

@@ -0,0 +1,32 @@
+.mfui-promo-badge {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 4px 12px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-radius: 8px;
+  color: var(--base);
+}
+.mfui-promo-badge_type_hit {
+  background-color: var(--warmRedC);
+}
+.mfui-promo-badge_type_new {
+  background-color: var(--systemBlue);
+}
+.mfui-promo-badge_type_popular {
+  background-color: var(--137C);
+}
+.mfui-promo-badge_type_user-choice {
+  background-color: var(--reflexBlue);
+}
+.mfui-promo-badge__text {
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+}

package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import './PromoBadge.less';
+export declare const PromoBadgeTypes: {
+    readonly HIT: "hit";
+    readonly NEW: "new";
+    readonly POPULAR: "popular";
+    readonly USER_CHOICE: "user-choice";
+};
+declare type PromoBadgeTypesType = typeof PromoBadgeTypes[keyof typeof PromoBadgeTypes];
+export interface IPromoBadgeProps {
+    /** Тип промо-бэйджа */
+    type?: PromoBadgeTypesType;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    children: JSX.Element[] | Element[] | JSX.Element | Element | string;
+}
+declare const PromoBadge: React.FC<IPromoBadgeProps>;
+export default PromoBadge;

package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.js

@@ -0,0 +1,59 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.PromoBadgeTypes = void 0;
+
+require("core-js/modules/es.object.values");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var PromoBadgeTypes = {
+  HIT: 'hit',
+  NEW: 'new',
+  POPULAR: 'popular',
+  USER_CHOICE: 'user-choice'
+};
+exports.PromoBadgeTypes = PromoBadgeTypes;
+var cn = (0, _uiHelpers.cnCreate)('mfui-promo-badge');
+
+var PromoBadge = function PromoBadge(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'hit' : _ref$type,
+      className = _ref.className,
+      children = _ref.children,
+      dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      type: type
+    }, className)
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('text')
+  }, children));
+};
+
+PromoBadge.propTypes = {
+  type: PropTypes.oneOf(Object.values(PromoBadgeTypes)),
+  className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]).isRequired
+};
+var _default = PromoBadge;
+exports["default"] = _default;

package/dist/lib/components/Carousel/Carousel.js

@@ -311,7 +311,10 @@ var Carousel = function Carousel(_ref) {
       onFocus: handleSlideFocus(i),
       onMouseDown: disableFocusOnSlideClick
     }), child);
-  })), /*#__PURE__*/React.createElement(_NavArrow["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev), {
+  })), /*#__PURE__*/React.createElement(_NavArrow["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev
+    },
     className: cn('arrow', {
       prev: true,
       locked: isLocked
@@ -319,7 +322,10 @@ var Carousel = function Carousel(_ref) {
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
     theme: _NavArrow.Theme.PURPLE
-  })), /*#__PURE__*/React.createElement(_NavArrow["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next), {
+  }), /*#__PURE__*/React.createElement(_NavArrow["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next
+    },
     className: cn('arrow', {
       next: true,
       locked: isLocked
@@ -328,7 +334,7 @@ var Carousel = function Carousel(_ref) {
     onClick: handleNextClick,
     disabled: !loop && isEnd,
     theme: _NavArrow.Theme.PURPLE
-  })));
+  }));
 };
 
 Carousel.propTypes = {

package/dist/lib/components/Checkbox/Checkbox.css

@@ -37,6 +37,9 @@
   border: 2px solid;
   border-radius: 2px;
 }
+.mfui-checkbox__custom-input:focus {
+  outline: none;
+}
 .mfui-checkbox__icon {
   display: block;
   width: 32px;

package/dist/lib/components/Collapse/Collapse.js

@@ -76,6 +76,7 @@ var Collapse = function Collapse(props) {
     } else {
       animationStart.current = null;
       animationId.current = null;
+      rootNode.current.style.height = isOpenAction ? 'auto' : '0px';
     }
   }, []);
   (0, React.useEffect)(function () {

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

@@ -20,6 +20,8 @@ declare type ShadowType = typeof Shadow[keyof typeof Shadow];
 export interface ITileProps {
     /** Ссылка */
     href?: string;
+    /** Атрибут для открытия ссылки */
+    target?: '_self' | '_blank';
     /** Тема */
     theme?: ThemeType;
     /** Радиус границы */

package/dist/lib/components/Tile/Tile.js

@@ -49,7 +49,9 @@ var Tile = function Tile(_ref) {
       _ref$isInteractive = _ref.isInteractive,
       isInteractive = _ref$isInteractive === void 0 ? false : _ref$isInteractive,
       onClick = _ref.onClick,
-      dataAttrs = _ref.dataAttrs;
+      dataAttrs = _ref.dataAttrs,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '_self' : _ref$target;
 
   var handleClick = function handleClick(e) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
@@ -67,7 +69,8 @@ var Tile = function Tile(_ref) {
     onClick: handleClick
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), href && /*#__PURE__*/_react["default"].createElement("a", {
     href: href,
-    className: cn('link')
+    className: cn('link'),
+    target: target
   }, children), !href && children);
 };
 
@@ -81,7 +84,8 @@ Tile.propTypes = {
   onClick: _propTypes["default"].func,
   dataAttrs: _propTypes["default"].shape({
     root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
-  })
+  }),
+  target: _propTypes["default"].oneOf(['_self', '_blank'])
 };
 var _default = Tile;
 exports["default"] = _default;

package/dist/lib/index.d.ts

@@ -28,6 +28,8 @@ export { default as PaginationButtons } from './components/Pagination/components
 export { default as PaginationNavigation } from './components/Pagination/components/PaginationNavigation/PaginationNavigation';
 export { default as Paragraph } from './components/Paragraph/Paragraph';
 export { default as Preloader } from './components/Preloader/Preloader';
+export { default as PriceBadge } from './components/Badges/components/PriceBadge/PriceBadge';
+export { default as PromoBadge } from './components/Badges/components/PromoBadge/PromoBadge';
 export { default as RadioButton } from './components/RadioButton/RadioButton';
 export { default as Search } from './components/Search/Search';
 export { default as Select } from './components/Select/Select';

package/dist/lib/index.js

@@ -183,6 +183,18 @@ Object.defineProperty(exports, "Preloader", {
     return _Preloader["default"];
   }
 });
+Object.defineProperty(exports, "PriceBadge", {
+  enumerable: true,
+  get: function get() {
+    return _PriceBadge["default"];
+  }
+});
+Object.defineProperty(exports, "PromoBadge", {
+  enumerable: true,
+  get: function get() {
+    return _PromoBadge["default"];
+  }
+});
 Object.defineProperty(exports, "RadioButton", {
   enumerable: true,
   get: function get() {
@@ -316,6 +328,10 @@ var _Paragraph = _interopRequireDefault(require("./components/Paragraph/Paragrap
 
 var _Preloader = _interopRequireDefault(require("./components/Preloader/Preloader"));
 
+var _PriceBadge = _interopRequireDefault(require("./components/Badges/components/PriceBadge/PriceBadge"));
+
+var _PromoBadge = _interopRequireDefault(require("./components/Badges/components/PromoBadge/PromoBadge"));
+
 var _RadioButton = _interopRequireDefault(require("./components/RadioButton/RadioButton"));
 
 var _Search = _interopRequireDefault(require("./components/Search/Search"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "3.1.0",
+  "version": "3.3.1",
   "files": [
     "dist",
     "styles"
@@ -54,7 +54,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^1.0.1",
+    "@megafon/ui-icons": "^1.1.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@types/enzyme": "^3.10.5",
@@ -86,7 +86,7 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@datepicker-react/hooks": "^2.7.0",
-    "@megafon/ui-helpers": "^2.0.1",
+    "@megafon/ui-helpers": "^2.1.0",
     "@popperjs/core": "^2.5.3",
     "core-js": "^3.6.4",
     "date-fns": "^2.16.1",
@@ -97,5 +97,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "3b91f6030703838090828a8a77cff3d82cb14c10"
+  "gitHead": "4ef906c6961b5da2721dcde19062766c4fe8ba84"
 }