@megafon/ui-shared 6.13.0 → 6.14.0

package/dist/lib/components/PictureBox/PictureBox.css

@@ -0,0 +1,88 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-v6-picture-box_mask_none .mfui-v6-picture-box__image {
+  width: 100%;
+  border-radius: 24px;
+  vertical-align: top;
+}
+@media screen and (min-width: 768px) {
+  .mfui-v6-picture-box_mask_none .mfui-v6-picture-box__image {
+    height: 414px;
+    -o-object-fit: cover;
+       object-fit: cover;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-v6-picture-box_mask_none .mfui-v6-picture-box__image {
+    height: 520px;
+  }
+}
+.mfui-v6-picture-box_mask_mac-book .mfui-v6-picture-box__image {
+  position: absolute;
+  top: 2%;
+  right: 0;
+  left: 0;
+  width: 82%;
+  height: 87%;
+  margin: 0 auto;
+  border-top-left-radius: 1.4% 2.29885057%;
+  border-top-right-radius: 1.4% 2.29885057%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.mfui-v6-picture-box__content {
+  -ms-flex-item-align: center;
+      align-self: center;
+  margin-top: 32px;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-v6-picture-box__content {
+    margin-top: 0;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-v6-picture-box_align_left .mfui-v6-picture-box__content {
+    margin-left: 12px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-v6-picture-box_align_left .mfui-v6-picture-box__content {
+    margin-left: 44px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-v6-picture-box_align_right .mfui-v6-picture-box__content {
+    margin-right: 12px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-v6-picture-box_align_right .mfui-v6-picture-box__content {
+    margin-right: 44px;
+  }
+}
+.mfui-v6-picture-box__button-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  gap: 20px;
+  margin-top: 32px;
+}
+.mfui-v6-picture-box_mask_mac-book .mfui-v6-picture-box__mask {
+  position: relative;
+  padding-bottom: 60.9%;
+  background-image: url('./img/mac-book-1x.png');
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+}
+@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
+  .mfui-v6-picture-box_mask_mac-book .mfui-v6-picture-box__mask {
+    background-image: url('./img/mac-book-2x.png');
+  }
+}

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import './PictureBox.less';
+declare type ImageType = {
+    src: string;
+    src2x?: string;
+    align?: 'right' | 'left';
+    alt?: string;
+};
+declare type ButtonType = {
+    title?: string;
+    href?: string;
+    target?: '_self' | '_blank';
+    rel?: string;
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+export interface IPictureBoxProps {
+    /** Изображение */
+    image: ImageType;
+    /** Кнопка */
+    button?: ButtonType;
+    /** Дополнительная кнопка */
+    extraButton?: ButtonType;
+    /** Маска */
+    pictureMask?: 'mac-book' | 'none';
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+    /** Дополнительный класс корневого элемента */
+    classes?: {
+        root?: string;
+        button?: string;
+        extraButton?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+        extraButton?: Record<string, string>;
+        image?: Record<string, string>;
+        mask?: Record<string, string>;
+        buttonsWrapper?: Record<string, string>;
+    };
+}
+declare const PictureBox: React.FC<IPictureBoxProps>;
+export default PictureBox;

package/dist/lib/components/PictureBox/PictureBox.js

@@ -0,0 +1,155 @@
+"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"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+require("core-js/modules/es.array.concat.js");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 cn = (0, _uiHelpers.cnCreate)('mfui-v6-picture-box');
+
+var PictureBox = function PictureBox(_ref) {
+  var image = _ref.image,
+      button = _ref.button,
+      extraButton = _ref.extraButton,
+      _ref$pictureMask = _ref.pictureMask,
+      pictureMask = _ref$pictureMask === void 0 ? 'none' : _ref$pictureMask,
+      dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
+      classes = _ref.classes,
+      rootRef = _ref.rootRef,
+      children = _ref.children;
+  var imageSrc = image.src,
+      imageSrc2x = image.src2x,
+      _image$align = image.align,
+      imageAlign = _image$align === void 0 ? 'left' : _image$align,
+      _image$alt = image.alt,
+      imageAlt = _image$alt === void 0 ? '' : _image$alt;
+  var imageOrder = imageAlign === 'left' ? '0' : '1';
+
+  var renderImg = function renderImg() {
+    var srcSet = imageSrc2x ? "".concat(imageSrc, ", ").concat(imageSrc2x, " 2x") : undefined;
+    var img = /*#__PURE__*/React.createElement("img", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
+      className: cn('image'),
+      srcSet: srcSet,
+      src: imageSrc,
+      alt: imageAlt
+    }));
+
+    if (pictureMask !== 'none') {
+      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mask), {
+        className: cn('mask')
+      }), img);
+    }
+
+    return img;
+  };
+
+  var renderButtons = function renderButtons() {
+    if (!button && !extraButton) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.buttonsWrapper), {
+      className: cn('button-wrapper')
+    }), !!button && /*#__PURE__*/React.createElement(_uiCore.Button, {
+      href: button.href,
+      target: button.target,
+      rel: button.rel,
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
+      classes: {
+        root: classes === null || classes === void 0 ? void 0 : classes.button
+      },
+      onClick: button.onClick
+    }, button.title), !!extraButton && /*#__PURE__*/React.createElement(_uiCore.Button, {
+      href: extraButton.href,
+      target: extraButton.target,
+      rel: extraButton.rel,
+      type: "outline",
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
+      },
+      classes: {
+        root: classes === null || classes === void 0 ? void 0 : classes.extraButton
+      },
+      onClick: extraButton.onClick
+    }, extraButton.title));
+  };
+
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      align: imageAlign,
+      mask: pictureMask
+    }, [classes === null || classes === void 0 ? void 0 : classes.root, className])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(_uiCore.Grid, {
+    guttersLeft: "medium"
+  }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+    all: "7",
+    tablet: "12",
+    mobile: "12",
+    orderWide: imageOrder,
+    orderDesktop: imageOrder
+  }, renderImg()), /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+    all: "5",
+    tablet: "12",
+    mobile: "12",
+    flex: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, children, renderButtons()))));
+};
+
+PictureBox.propTypes = {
+  image: _propTypes["default"].shape({
+    src: _propTypes["default"].string.isRequired,
+    src2x: _propTypes["default"].string,
+    align: _propTypes["default"].oneOf(['right', 'left']),
+    alt: _propTypes["default"].string
+  }).isRequired,
+  button: _propTypes["default"].shape({
+    title: _propTypes["default"].string,
+    href: _propTypes["default"].string,
+    target: _propTypes["default"].oneOf(['_self', '_blank']),
+    rel: _propTypes["default"].string,
+    onClick: _propTypes["default"].func
+  }),
+  extraButton: _propTypes["default"].shape({
+    title: _propTypes["default"].string,
+    href: _propTypes["default"].string,
+    target: _propTypes["default"].oneOf(['_self', '_blank']),
+    rel: _propTypes["default"].string,
+    onClick: _propTypes["default"].func
+  }),
+  pictureMask: _propTypes["default"].oneOf(['mac-book', 'none']),
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].objectOf(_propTypes["default"].string),
+  dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].object),
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])])
+};
+var _default = PictureBox;
+exports["default"] = _default;

package/dist/lib/index.d.ts

@@ -30,6 +30,7 @@ export { default as Instructions } from './components/Instructions/Instructions'
 export { default as NotificationBox } from './components/NotificationBox/NotificationBox';
 export { default as PageTitle } from './components/PageTitle/PageTitle';
 export { default as Partners } from './components/Partners/Partners';
+export { default as PictureBox } from './components/PictureBox/PictureBox';
 export { default as PictureWithDescription } from './components/PictureWithDescription/PictureWithDescription';
 export { default as PromoCard } from './components/PromoCards/components/PromoCard/PromoCard';
 export { default as PromoCards } from './components/PromoCards/PromoCards';

package/dist/lib/index.js

@@ -195,6 +195,12 @@ Object.defineProperty(exports, "Partners", {
     return _Partners["default"];
   }
 });
+Object.defineProperty(exports, "PictureBox", {
+  enumerable: true,
+  get: function get() {
+    return _PictureBox["default"];
+  }
+});
 Object.defineProperty(exports, "PictureWithDescription", {
   enumerable: true,
   get: function get() {
@@ -410,6 +416,8 @@ var _PageTitle = _interopRequireDefault(require("./components/PageTitle/PageTitl
 
 var _Partners = _interopRequireDefault(require("./components/Partners/Partners"));
 
+var _PictureBox = _interopRequireDefault(require("./components/PictureBox/PictureBox"));
+
 var _PictureWithDescription = _interopRequireDefault(require("./components/PictureWithDescription/PictureWithDescription"));
 
 var _PromoCard = _interopRequireDefault(require("./components/PromoCards/components/PromoCard/PromoCard"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-shared",
-    "version": "6.13.0",
+    "version": "6.14.0",
     "files": [
         "dist"
     ],
@@ -90,5 +90,5 @@
         "prop-types": "^15.7.2",
         "swiper": "^6.5.6"
     },
-    "gitHead": "186610744e45978f2f18cfce24ff802193a999e0"
+    "gitHead": "e69e53767fbb36f2f54c1c90b1fc233fb8560549"
 }