@megafon/ui-core 6.0.0-beta.4 → 6.0.1

package/dist/es/components/Badges/{PriceBadge → components/PriceBadge}/PriceBadge.js

@@ -1,7 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.object.values.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import "./PriceBadge.css";
+
 var ProfileIcon = function ProfileIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -9,6 +12,7 @@ var ProfileIcon = function ProfileIcon(props) {
     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"
@@ -16,6 +20,7 @@ var ProfileIconBig = function ProfileIconBig(props) {
     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"
@@ -23,6 +28,7 @@ var AttentionIcon = function AttentionIcon(props) {
     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"
@@ -32,6 +38,7 @@ var CheckIcon = function CheckIcon(props) {
     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"
@@ -39,6 +46,7 @@ var InfoIcon = function InfoIcon(props) {
     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"
@@ -48,6 +56,7 @@ var PriceIcon = function PriceIcon(props) {
     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"
@@ -57,6 +66,7 @@ var TimerIcon = function TimerIcon(props) {
     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"
@@ -64,6 +74,7 @@ var AttentionIconBig = function AttentionIconBig(props) {
     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 CheckIconBig = function CheckIconBig(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
@@ -73,6 +84,7 @@ var CheckIconBig = function CheckIconBig(props) {
     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"
@@ -80,6 +92,7 @@ var InfoIconBig = function InfoIconBig(props) {
     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"
@@ -89,6 +102,7 @@ var PriceIconBig = function PriceIconBig(props) {
     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"
@@ -98,6 +112,7 @@ var TimerIconBig = function TimerIconBig(props) {
     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',
@@ -119,49 +134,64 @@ 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.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;
+
     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;
+      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), {
@@ -180,4 +210,17 @@ var PriceBadge = function PriceBadge(_ref) {
     className: cn('sub-title')
   }, subTitle)));
 };
+
+PriceBadge.propTypes = {
+  isAdaptive: PropTypes.bool,
+  iconType: PropTypes.oneOf(Object.values(PriceBadgeIcon)),
+  theme: PropTypes.oneOf(Object.values(PriceBadgeTheme)),
+  size: PropTypes.oneOf(Object.values(PriseBadgeSize)),
+  subTitle: PropTypes.string,
+  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,64 @@
+.mfui-promo-badge {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  padding: 4px 12px;
+  border-radius: 8px;
+  color: var(--stcWhite);
+  /* DEPRECATED classes &_type BEGIN */
+  /* DEPRECATED classes &_type END */
+}
+.mfui-promo-badge_color_137c {
+  background-color: var(--137C);
+}
+.mfui-promo-badge_color_brand-purple-20 {
+  color: var(--brandPurple);
+  background-color: var(--brandPurple20);
+}
+.mfui-promo-badge_color_brand-purple {
+  background-color: var(--brandPurple);
+}
+.mfui-promo-badge_color_reflex-blue {
+  background-color: var(--reflexBlue);
+}
+.mfui-promo-badge_color_system-blue {
+  background-color: var(--systemBlue);
+}
+.mfui-promo-badge_color_warm-red {
+  background-color: var(--warmRedC);
+}
+.mfui-promo-badge_color_gradient-purple {
+  color: var(--stcWhite);
+  background: linear-gradient(126.8deg, #A336BE 21%, #363078 78%);
+}
+.mfui-promo-badge_type_hit {
+  background-color: var(--warmRedC);
+}
+.mfui-promo-badge_type_new {
+  background-color: var(--systemBlue);
+}
+.mfui-promo-badge_type_vip {
+  background-color: var(--brandPurple);
+}
+.mfui-promo-badge_type_popular {
+  background-color: var(--137C);
+}
+.mfui-promo-badge_type_user-choice {
+  background-color: var(--reflexBlue);
+}
+.mfui-promo-badge_type_interests {
+  color: var(--brandPurple);
+  background-color: var(--brandPurple20);
+}
+.mfui-promo-badge__text {
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+}

package/dist/{lib/components/Badges → es/components/Badges/components}/PromoBadge/PromoBadge.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './PromoBadge.scss';
+import './PromoBadge.less';
 export declare const PromoBadgeColors: {
     readonly '137C': "137c";
     readonly BRAND_PURPLE_20: "brand-purple-20";
@@ -9,7 +9,7 @@ export declare const PromoBadgeColors: {
     readonly WARM_RED: "warm-red";
     readonly GRADIENT_PURPLE: "gradient-purple";
 };
-type PromoBadgeColorsType = (typeof PromoBadgeColors)[keyof typeof PromoBadgeColors];
+declare type PromoBadgeColorsType = typeof PromoBadgeColors[keyof typeof PromoBadgeColors];
 export declare const PromoBadgeTypes: {
     readonly HIT: "hit";
     readonly NEW: "new";
@@ -18,7 +18,7 @@ export declare const PromoBadgeTypes: {
     readonly USER_CHOICE: "user-choice";
     readonly INTERESTS: "interests";
 };
-type PromoBadgeTypesType = (typeof PromoBadgeTypes)[keyof typeof PromoBadgeTypes];
+declare type PromoBadgeTypesType = typeof PromoBadgeTypes[keyof typeof PromoBadgeTypes];
 export interface IPromoBadgeProps {
     /** Цвет промо-бэйджа */
     color?: PromoBadgeColorsType;

package/dist/es/components/Badges/{PromoBadge → components/PromoBadge}/PromoBadge.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.object.values.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import "./PromoBadge.css";
 export var PromoBadgeColors = {
   '137C': '137c',
@@ -10,8 +12,8 @@ export var PromoBadgeColors = {
   SYSTEM_BLUE: 'system-blue',
   WARM_RED: 'warm-red',
   GRADIENT_PURPLE: 'gradient-purple'
-};
-// DEPRECATED
+}; // DEPRECATED
+
 export var PromoBadgeTypes = {
   HIT: 'hit',
   NEW: 'new',
@@ -21,13 +23,14 @@ export var PromoBadgeTypes = {
   INTERESTS: 'interests'
 };
 var cn = cnCreate('mfui-promo-badge');
+
 var PromoBadge = function PromoBadge(_ref) {
   var color = _ref.color,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? PromoBadgeTypes.HIT : _ref$type,
-    className = _ref.className,
-    children = _ref.children,
-    dataAttrs = _ref.dataAttrs;
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? PromoBadgeTypes.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({
       color: color,
@@ -37,4 +40,15 @@ var PromoBadge = function PromoBadge(_ref) {
     className: cn('text')
   }, children));
 };
+
+PromoBadge.propTypes = {
+  color: PropTypes.oneOf(Object.values(PromoBadgeColors)),
+  // DEPRECATED
+  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/Badges/{TimerBadge/components → components/TimerBadge}/Timer/Timer.js

@@ -1,54 +1,70 @@
 import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.math.trunc.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.date.to-string.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import format from 'date-fns/format';
 import ruLocale from 'date-fns/locale/ru';
+import * as PropTypes from 'prop-types';
 var SECONDS_IN_DAY = 86400;
 var SECONDS_IN_HOUR = 3600;
 var SECONDS_IN_MINUTE = 60;
+
 var formatDate = function formatDate(date, pattern) {
   return format(date, pattern, {
     locale: ruLocale
   });
 };
+
 export var getCountdownText = function getCountdownText() {
   var remainingTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var isMoreHourAndLessDay = remainingTime >= SECONDS_IN_HOUR && remainingTime < SECONDS_IN_DAY;
+
   var truncTime = function truncTime() {
     var divider = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
     return Math.trunc(remainingTime / divider);
   };
+
   switch (true) {
     case remainingTime <= 0:
       {
         return '';
       }
+
     case remainingTime < SECONDS_IN_MINUTE:
       {
         var seconds = truncTime();
         return "".concat(seconds, " \u0441\u0435\u043A");
       }
+
     case remainingTime < SECONDS_IN_HOUR:
       {
         var minutes = truncTime(SECONDS_IN_MINUTE);
         return "".concat(minutes, " \u043C\u0438\u043D");
       }
+
     case isMoreHourAndLessDay:
       {
         var hours = truncTime(SECONDS_IN_HOUR);
         var secondsLeft = remainingTime - hours * SECONDS_IN_HOUR;
+
         var _minutes = Math.trunc(secondsLeft / SECONDS_IN_MINUTE);
+
         return _minutes ? "".concat(hours, " \u0447 ").concat(_minutes, " \u043C\u0438\u043D") : "".concat(hours, " \u0447");
       }
+
     case remainingTime >= SECONDS_IN_DAY:
       {
         var days = truncTime(SECONDS_IN_DAY);
+
         var _secondsLeft = remainingTime - days * SECONDS_IN_DAY;
+
         var _hours = Math.trunc(_secondsLeft / SECONDS_IN_HOUR);
+
         return _hours ? "".concat(days, " \u0434\u043D ").concat(_hours, " \u0447") : "".concat(days, " \u0434\u043D");
       }
+
     default:
       {
         return '';
@@ -56,14 +72,25 @@ export var getCountdownText = function getCountdownText() {
   }
 };
 var cn = cnCreate('mfui-timer');
+
 var Timer = function Timer(_ref) {
   var actualRemainingTime = _ref.actualRemainingTime,
-    expirationDate = _ref.expirationDate,
-    showCountdown = _ref.showCountdown,
-    additionalText = _ref.additionalText,
-    dataAttrs = _ref.dataAttrs;
+      expirationDate = _ref.expirationDate,
+      showCountdown = _ref.showCountdown,
+      additionalText = _ref.additionalText,
+      dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn()
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), additionalText && /*#__PURE__*/React.createElement("span", null, additionalText, " "), /*#__PURE__*/React.createElement("span", null, showCountdown ? getCountdownText(actualRemainingTime) : formatDate(expirationDate, 'dd MMMM yyyy')));
 };
+
+Timer.propTypes = {
+  expirationDate: PropTypes.instanceOf(Date).isRequired,
+  actualRemainingTime: PropTypes.number.isRequired,
+  showCountdown: PropTypes.bool.isRequired,
+  additionalText: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
 export default Timer;

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

@@ -0,0 +1,60 @@
+.mfui-timer-badge {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 1px 2px;
+  padding-right: 8px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  border: 1px solid var(--spbSky1);
+  border-radius: 12px;
+  background: var(--base);
+  overflow: hidden;
+}
+.mfui-timer-badge_theme_grey .mfui-timer-badge__text {
+  color: var(--spbSky3);
+}
+.mfui-timer-badge_theme_grey .mfui-timer-badge__icon {
+  fill: var(--spbSky3);
+}
+.mfui-timer-badge_theme_red .mfui-timer-badge__text {
+  color: var(--fury);
+}
+.mfui-timer-badge_theme_red .mfui-timer-badge__icon {
+  fill: var(--fury);
+}
+.mfui-timer-badge__text {
+  font-size: 12px;
+  line-height: 18px;
+  font-family: inherit;
+  margin-left: 2px;
+  font-weight: 500;
+}
+.mfui-timer-badge__icon {
+  height: 20px;
+  width: 20px;
+}
+.mfui-timer-badge__icon-container {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-timer-badge__icon-container_shadow:before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  -webkit-box-shadow: 0px 0px 6px var(--fury);
+          box-shadow: 0px 0px 6px var(--fury);
+}

package/dist/{lib/components/Badges → es/components/Badges/components}/TimerBadge/TimerBadge.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import './TimerBadge.scss';
+import React from 'react';
+import './TimerBadge.less';
 export declare const TIMEOUT = 1000;
 export interface ITimerBadgeProps {
     /** Дата окончания таймера */

package/dist/es/components/Badges/{TimerBadge → components/TimerBadge}/TimerBadge.js

@@ -3,10 +3,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.date.now.js";
 import "core-js/modules/es.date.to-string.js";
 import "core-js/modules/web.timers.js";
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import Timer from "./components/Timer/Timer";
+import * as PropTypes from 'prop-types';
+import Timer from "./Timer/Timer";
 import "./TimerBadge.css";
+
 var TimerIcon = function TimerIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -16,6 +18,7 @@ var TimerIcon = function TimerIcon(props) {
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-8.414V5H9v5.414l3 3L13.414 12 11 9.586z"
   }));
 };
+
 var SECONDS_IN_HOUR = 3600;
 var MS_IN_SECOND = 1000;
 export var TIMEOUT = 1000;
@@ -24,38 +27,43 @@ var TimerBadgeTheme = {
   GREY: 'grey'
 };
 var cn = cnCreate('mfui-timer-badge');
+
 var TimerBadge = function TimerBadge(_ref) {
   var expirationDate = _ref.expirationDate,
-    _ref$countdownStart = _ref.countdownStart,
-    countdownStart = _ref$countdownStart === void 0 ? 86400 : _ref$countdownStart,
-    _ref$hasPrefix = _ref.hasPrefix,
-    hasPrefix = _ref$hasPrefix === void 0 ? false : _ref$hasPrefix,
-    _ref$countdownText = _ref.countdownText,
-    countdownText = _ref$countdownText === void 0 ? 'Закончится через' : _ref$countdownText,
-    _ref$expirationDateTe = _ref.expirationDateText,
-    expirationDateText = _ref$expirationDateTe === void 0 ? 'Воспользуйтесь до' : _ref$expirationDateTe,
-    className = _ref.className,
-    dataAttrs = _ref.dataAttrs;
+      _ref$countdownStart = _ref.countdownStart,
+      countdownStart = _ref$countdownStart === void 0 ? 86400 : _ref$countdownStart,
+      _ref$hasPrefix = _ref.hasPrefix,
+      hasPrefix = _ref$hasPrefix === void 0 ? false : _ref$hasPrefix,
+      _ref$countdownText = _ref.countdownText,
+      countdownText = _ref$countdownText === void 0 ? 'Закончится через' : _ref$countdownText,
+      _ref$expirationDateTe = _ref.expirationDateText,
+      expirationDateText = _ref$expirationDateTe === void 0 ? 'Воспользуйтесь до' : _ref$expirationDateTe,
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs;
   var remainingTime = (expirationDate.getTime() - Date.now()) / MS_IN_SECOND;
-  var _React$useState = React.useState(remainingTime),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    actualRemainingTime = _React$useState2[0],
-    setActualRemainingTime = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    showCountdown = _React$useState4[0],
-    setShowCountdown = _React$useState4[1];
+
+  var _useState = useState(remainingTime),
+      _useState2 = _slicedToArray(_useState, 2),
+      actualRemainingTime = _useState2[0],
+      setActualRemainingTime = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showCountdown = _useState4[0],
+      setShowCountdown = _useState4[1];
+
   var isLastHour = actualRemainingTime < SECONDS_IN_HOUR;
   var isTimeExpired = actualRemainingTime < 1;
   var theme = showCountdown ? TimerBadgeTheme.RED : TimerBadgeTheme.GREY;
   var additionalText = showCountdown ? countdownText : expirationDateText;
-  React.useEffect(function () {
+  useEffect(function () {
     setShowCountdown(actualRemainingTime < countdownStart);
   }, [actualRemainingTime, countdownStart]);
-  React.useEffect(function () {
+  useEffect(function () {
     if (isTimeExpired) {
       return undefined;
     }
+
     var timeoutId = window.setTimeout(function () {
       return setActualRemainingTime(actualRemainingTime - 1);
     }, TIMEOUT);
@@ -85,4 +93,19 @@ var TimerBadge = function TimerBadge(_ref) {
     }
   })));
 };
+
+TimerBadge.propTypes = {
+  expirationDate: PropTypes.instanceOf(Date).isRequired,
+  countdownStart: PropTypes.number,
+  hasPrefix: PropTypes.bool,
+  countdownText: PropTypes.string,
+  expirationDateText: PropTypes.string,
+  className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    text: PropTypes.objectOf(PropTypes.string.isRequired),
+    timer: PropTypes.objectOf(PropTypes.string.isRequired),
+    iconContainer: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
 export default TimerBadge;