@megafon/ui-shared 7.7.0 → 7.8.0

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { ServiceCardDataType, BackgroundType } from './types';
+import './ServiceCards.scss';
+export interface IServiceCardsProps {
+    /** Цвет фона плиток */
+    background?: BackgroundType;
+    /** Список плиток */
+    items: [ServiceCardDataType, ServiceCardDataType, ServiceCardDataType, ServiceCardDataType, ServiceCardDataType];
+    /** Дополнительный класс для компонента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        card?: string;
+        cardTitle?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        item?: Record<string, string>;
+        card?: Record<string, string>;
+        cardTitle?: Record<string, string>;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+}
+declare const ServiceCards: React.FC<IServiceCardsProps>;
+export default ServiceCards;

package/dist/lib/components/ServiceCards/ServiceCards.js

@@ -0,0 +1,51 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.map.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _ServiceCard = _interopRequireDefault(require("./components/ServiceCard/ServiceCard"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var cn = (0, _uiHelpers.cnCreate)('mfui-service-cards');
+var ServiceCards = function ServiceCards(_ref) {
+  var className = _ref.className,
+    classes = _ref.classes,
+    items = _ref.items,
+    background = _ref.background,
+    dataAttrs = _ref.dataAttrs,
+    rootRef = _ref.rootRef;
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className, classes === null || classes === void 0 ? void 0 : classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('items')
+  }, items.map(function (item, i) {
+    var size = i === 0 ? 'big' : 'small';
+    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+      className: cn('item', {
+        size: size
+      }),
+      key: "".concat(item.title, "_").concat(i)
+    }), /*#__PURE__*/React.createElement(_ServiceCard["default"], (0, _extends2["default"])({}, item, {
+      background: background,
+      size: size,
+      classes: {
+        root: classes === null || classes === void 0 ? void 0 : classes.card,
+        title: classes === null || classes === void 0 ? void 0 : classes.cardTitle
+      },
+      dataAttrs: {
+        root: (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1),
+        title: (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.cardTitle, i + 1)
+      }
+    })));
+  })));
+};
+var _default = exports["default"] = ServiceCards;

package/dist/lib/components/ServiceCards/components/ServiceCard/ServiceCard.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-service-card{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;background-color:var(--base);border-radius:24px;color:var(--content);height:100%;justify-content:space-between;overflow:hidden;padding:24px 24px 22px;-webkit-transition:background-color,-webkit-box-shadow;transition:background-color,-webkit-box-shadow;transition:background-color,box-shadow;transition:background-color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-service-card{padding-bottom:32px}}.mfui-service-card:hover{text-decoration:none}.mfui-service-card__title{font-size:22px;font-weight:600;letter-spacing:.5px;line-height:28px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-service-card__title{font-size:26px;line-height:32px}}@media screen and (min-width:1024px){.mfui-service-card__title{font-size:28px;line-height:36px}}@media screen and (min-width:1280px){.mfui-service-card__title{font-size:32px;line-height:40px}}.mfui-service-card__subtitle{font-size:15px;font-weight:400;line-height:24px;margin-top:12px}.mfui-service-card__image-wrapper{overflow:hidden}.mfui-service-card__image{display:block;height:240px;width:240px}.mfui-service-card__circle,.mfui-service-card__price{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-service-card__circle{-webkit-box-pack:center;-ms-flex-pack:center;border:1px solid var(--brandGreen);border-radius:50%;height:48px;justify-content:center;width:48px}.mfui-service-card:hover .mfui-service-card__circle{-webkit-animation:scale-circle 1s ease-out forwards;animation:scale-circle 1s ease-out forwards;-webkit-transform-origin:center;transform-origin:center}.mfui-service-card__arrow{height:32px;min-width:32px;width:32px;fill:var(--brandGreen)}.mfui-service-card__value{font-size:15px;font-weight:500;line-height:24px;margin-left:8px}.mfui-service-card_size_big .mfui-service-card__image-wrapper{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:24px;justify-content:center;margin:32px auto}@media screen and (min-width:768px){.mfui-service-card_size_big .mfui-service-card__image{height:auto;max-height:100%;max-width:100%;width:auto}}.mfui-service-card_size_small .mfui-service-card__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-service-card_size_small .mfui-service-card__title{font-size:20px;line-height:28px}}.mfui-service-card_size_small .mfui-service-card__subtitle{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:3}.mfui-service-card_size_small .mfui-service-card__footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media screen and (max-width:767px){.mfui-service-card_size_small .mfui-service-card__footer{margin-top:20px}}.mfui-service-card_size_small .mfui-service-card__image-wrapper{margin-bottom:-22px;margin-right:-24px}@media screen and (min-width:768px){.mfui-service-card_size_small .mfui-service-card__image-wrapper{margin-bottom:-32px}}.mfui-service-card_size_small .mfui-service-card__image{height:110px;width:110px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-service-card_size_small .mfui-service-card__image{height:125px;width:125px}}@media screen and (min-width:1024px){.mfui-service-card_size_small .mfui-service-card__image{height:150px;width:150px}}@media screen and (max-width:767px){.mfui-service-card_size_small .mfui-service-card__circle{height:32px;width:32px}.mfui-service-card_size_small .mfui-service-card__arrow{height:20px;min-width:20px;width:20px}}.mfui-service-card:hover:not(.mfui-service-card_background_gray){-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-service-card_background_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-service-card_background_gray{background-color:var(--spbSky0)}.mfui-service-card_background_gray:hover{background-color:var(--spbSky1)}@-webkit-keyframes scale-circle{0%{scale:1}50%{scale:.6875}to{scale:1}}@keyframes scale-circle{0%{scale:1}50%{scale:.6875}to{scale:1}}

package/dist/lib/components/ServiceCards/components/ServiceCard/ServiceCard.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SizeType, ServiceCardDataType, BackgroundType } from '../../types';
+import './ServiceCard.scss';
+export interface IServiceCardProps extends ServiceCardDataType {
+    size: SizeType;
+    background?: BackgroundType;
+    classes?: {
+        root?: string;
+        title?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+        title?: Record<string, string>;
+        subtitle?: Record<string, string>;
+        footer?: Record<string, string>;
+    };
+}
+declare const ServiceCard: React.FC<IServiceCardProps>;
+export default ServiceCard;

package/dist/lib/components/ServiceCards/components/ServiceCard/ServiceCard.js

@@ -0,0 +1,90 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.array.concat.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _setRelAttribute = require("../../../../helpers/setRelAttribute");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var ArrowRight = function ArrowRight(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12.5 20.8l4.8-4.8-4.8-4.8 1.6-1.7 6.4 6.5-6.4 6.5z"
+  }));
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-service-card');
+var ServiceCard = function ServiceCard(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    value = _ref.value,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'shadow' : _ref$background,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'big' : _ref$size,
+    imageSrc = _ref.imageSrc,
+    imageSrc2x = _ref.imageSrc2x,
+    _ref$imageAlt = _ref.imageAlt,
+    imageAlt = _ref$imageAlt === void 0 ? 'image' : _ref$imageAlt,
+    href = _ref.href,
+    _ref$target = _ref.target,
+    target = _ref$target === void 0 ? '_self' : _ref$target,
+    rel = _ref.rel,
+    classes = _ref.classes,
+    dataAttrs = _ref.dataAttrs,
+    onClick = _ref.onClick;
+  var isSizeSmall = size === 'small';
+  var currentRel = (0, _setRelAttribute.setRelAttribute)(rel, target);
+  var imageSrcSet = imageSrc2x ? "".concat(imageSrc, ", ").concat(imageSrc2x, " 2x") : undefined;
+  var footerElement = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: cn('image-wrapper')
+  }, /*#__PURE__*/React.createElement("img", {
+    className: cn('image'),
+    src: imageSrc,
+    srcSet: imageSrcSet,
+    alt: imageAlt
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('price')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('circle')
+  }, /*#__PURE__*/React.createElement(ArrowRight, {
+    className: cn('arrow')
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('value')
+  }, value)));
+  var renderFooter = function renderFooter() {
+    if (isSizeSmall) {
+      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+        className: cn('footer')
+      }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.footer)), footerElement);
+    }
+    return footerElement;
+  };
+  return /*#__PURE__*/React.createElement("a", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      background: background,
+      size: size
+    }, [classes === null || classes === void 0 ? void 0 : classes.root]),
+    href: href,
+    target: target,
+    rel: currentRel,
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('header')
+  }, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
+    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title])
+  }), typeof title === 'string' ? (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig) : title), subtitle && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.subtitle), {
+    className: cn('subtitle'),
+    style: {
+      WebkitBoxOrient: 'vertical'
+    }
+  }), typeof subtitle === 'string' ? (0, _uiHelpers.convert)(subtitle, _uiHelpers.textConvertConfig) : subtitle)), renderFooter());
+};
+var _default = exports["default"] = ServiceCard;

package/dist/lib/components/ServiceCards/types.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export type TargetType = '_self' | '_blank' | '_parent' | '_top';
+export type ServiceCardDataType = {
+    /** Заголовок */
+    title: string | React.ReactNode | ReactNode[];
+    /** Подзаголовок */
+    subtitle?: string | React.ReactNode | ReactNode[];
+    /** Значение */
+    value: string;
+    /** Изображение */
+    imageSrc: string;
+    /** Изображение 2x */
+    imageSrc2x?: string;
+    /** Значение тега alt для изображения */
+    imageAlt?: string;
+    /** Ссылка */
+    href: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+    /** Обработчик клика по кнопке */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+export type SizeType = 'big' | 'small';
+export type BackgroundType = 'white' | 'gray' | 'shadow';

package/dist/lib/components/ServiceCards/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/lib/index.d.ts

@@ -35,6 +35,8 @@ export { default as PromoCard } from './components/PromoCards/components/PromoCa
 export { default as PromoCards } from './components/PromoCards/PromoCards';
 export { default as Property } from './components/Property/Property';
 export { default as PropertyDescription } from './components/Property/PropertyDescription';
+export { default as ServiceCard } from './components/ServiceCards/components/ServiceCard/ServiceCard';
+export { default as ServiceCards } from './components/ServiceCards/ServiceCards';
 export { default as SidePictureCard } from './components/SidePictureCards/components/SidePictureCard';
 export { default as SidePictureCards } from './components/SidePictureCards/SidePictureCards';
 export { default as Steps } from './components/Steps/Steps';

package/dist/lib/index.js

@@ -225,6 +225,18 @@ Object.defineProperty(exports, "PropertyDescription", {
     return _PropertyDescription["default"];
   }
 });
+Object.defineProperty(exports, "ServiceCard", {
+  enumerable: true,
+  get: function get() {
+    return _ServiceCard["default"];
+  }
+});
+Object.defineProperty(exports, "ServiceCards", {
+  enumerable: true,
+  get: function get() {
+    return _ServiceCards["default"];
+  }
+});
 Object.defineProperty(exports, "SidePictureCard", {
   enumerable: true,
   get: function get() {
@@ -382,6 +394,8 @@ var _PromoCard = _interopRequireDefault(require("./components/PromoCards/compone
 var _PromoCards = _interopRequireDefault(require("./components/PromoCards/PromoCards"));
 var _Property = _interopRequireDefault(require("./components/Property/Property"));
 var _PropertyDescription = _interopRequireDefault(require("./components/Property/PropertyDescription"));
+var _ServiceCard = _interopRequireDefault(require("./components/ServiceCards/components/ServiceCard/ServiceCard"));
+var _ServiceCards = _interopRequireDefault(require("./components/ServiceCards/ServiceCards"));
 var _SidePictureCard = _interopRequireDefault(require("./components/SidePictureCards/components/SidePictureCard"));
 var _SidePictureCards = _interopRequireDefault(require("./components/SidePictureCards/SidePictureCards"));
 var _Steps = _interopRequireDefault(require("./components/Steps/Steps"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-shared",
-    "version": "7.7.0",
+    "version": "7.8.0",
     "files": [
         "dist"
     ],
@@ -77,13 +77,13 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.8.4",
-        "@megafon/ui-core": "^7.6.0",
+        "@megafon/ui-core": "^7.7.0",
         "@megafon/ui-helpers": "^3.1.1",
-        "@megafon/ui-icons": "^3.4.0",
+        "@megafon/ui-icons": "^3.5.0",
         "core-js": "^3.6.4",
         "htmr": "^1.0.2",
         "lodash.throttle": "^4.1.1",
         "swiper": "^11.1.1"
     },
-    "gitHead": "327dfbd92bc2d6dfd02455d92527ae27d9944207"
+    "gitHead": "a573f87db1256b45a663aa9acc352edc61a58004"
 }