@megafon/ui-core 3.2.0 → 3.4.0

package/CHANGELOG.md

@@ -3,6 +3,54 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.4.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.3.1...@megafon/ui-core@3.4.0) (2022-03-21)
+
+
+### Bug Fixes
+
+* **notification:** fix link styles ([9d7e67e](https://github.com/MegafonWebLab/megafon-ui/commit/9d7e67e1f21c9ddb1dc911502a114924c8896a6a))
+* **pricebadge:** fix icon styles ([f5502a0](https://github.com/MegafonWebLab/megafon-ui/commit/f5502a0e28d067694cee4165fe224a38ecf3a15f))
+* **storebutton:** fixed test for Select and update type for StoreButton ([8996754](https://github.com/MegafonWebLab/megafon-ui/commit/8996754482e9cf899fdcb0f488c8a9fa1afddd11))
+
+
+### Features
+
+* **badges:** add new component TimerBadge ([82a900b](https://github.com/MegafonWebLab/megafon-ui/commit/82a900b362ca15db30dfdbffbfe299b637cae5b3))
+* **promobadge:** add vip type (purple background color) ([51ea858](https://github.com/MegafonWebLab/megafon-ui/commit/51ea8582ff750199166c64681fecae636d30ca18))
+* **search:** add onFocus callback ([b6dfdad](https://github.com/MegafonWebLab/megafon-ui/commit/b6dfdadd8dc695d7622bb95443ef6556b4e5d1c6))
+
+
+
+
+
+## [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)
 
 

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,78 @@
+.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: 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-radius: 8px;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-price-badge_adaptive {
+    font-size: 15px;
+    line-height: 24px;
+    padding: 4px;
+    padding-right: 8px;
+    min-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: 2px;
+}
+.mfui-price-badge__icon-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.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,115 @@
+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("div", {
+    className: cn('icon-container')
+  }, /*#__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,35 @@
+.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_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__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,23 @@
+import * as React from 'react';
+import './PromoBadge.less';
+export declare const PromoBadgeTypes: {
+    readonly HIT: "hit";
+    readonly NEW: "new";
+    readonly VIP: "vip";
+    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,39 @@
+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',
+  VIP: 'vip',
+  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/Badges/components/TimerBadge/Timer/Timer.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export declare const getCountdownText: (remainingTime?: number) => string;
+interface ITimerProps {
+    actualRemainingTime: number;
+    expirationDate: Date;
+    showCountdown: boolean;
+    additionalText?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const Timer: React.FC<ITimerProps>;
+export default Timer;

package/dist/es/components/Badges/components/TimerBadge/Timer/Timer.js

@@ -0,0 +1,96 @@
+import "core-js/modules/es.array.concat";
+import "core-js/modules/es.date.to-string";
+import "core-js/modules/es.math.trunc";
+import _extends from "@babel/runtime/helpers/extends";
+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 '';
+      }
+  }
+};
+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;
+  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: 16px;
+  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/es/components/Badges/components/TimerBadge/TimerBadge.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import './TimerBadge.less';
+export interface ITimerBadgeProps {
+    /** Дата окончания таймера */
+    expirationDate: Date;
+    /** Граница переключения в режим обратного отсчёта, в секундах */
+    countdownStart?: number;
+    /** Отображение дополнительного текста */
+    hasPrefix?: boolean;
+    /** Текст перед таймером в режиме обратного отсчета. Появляется при hasPrefix=true. */
+    countdownText?: string;
+    /** Текст перед таймером в режиме даты. Появляется при hasPrefix=true. */
+    expirationDateText?: string;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        text?: Record<string, string>;
+        timer?: Record<string, string>;
+    };
+}
+declare const TimerBadge: React.FC<ITimerBadgeProps>;
+export default TimerBadge;