@megafon/ui-shared 6.13.0 → 6.14.0

package/dist/es/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/es/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/es/components/PictureBox/PictureBox.js

@@ -0,0 +1,134 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.concat.js";
+import * as React from 'react';
+import { Button, Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
+import "./PictureBox.css";
+var cn = 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", _extends({}, 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", _extends({}, 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", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.buttonsWrapper), {
+      className: cn('button-wrapper')
+    }), !!button && /*#__PURE__*/React.createElement(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(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", _extends({
+    className: cn({
+      align: imageAlign,
+      mask: pictureMask
+    }, [classes === null || classes === void 0 ? void 0 : classes.root, className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(Grid, {
+    guttersLeft: "medium"
+  }, /*#__PURE__*/React.createElement(GridColumn, {
+    all: "7",
+    tablet: "12",
+    mobile: "12",
+    orderWide: imageOrder,
+    orderDesktop: imageOrder
+  }, renderImg()), /*#__PURE__*/React.createElement(GridColumn, {
+    all: "5",
+    tablet: "12",
+    mobile: "12",
+    flex: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, children, renderButtons()))));
+};
+
+PictureBox.propTypes = {
+  image: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    src2x: PropTypes.string,
+    align: PropTypes.oneOf(['right', 'left']),
+    alt: PropTypes.string
+  }).isRequired,
+  button: PropTypes.shape({
+    title: PropTypes.string,
+    href: PropTypes.string,
+    target: PropTypes.oneOf(['_self', '_blank']),
+    rel: PropTypes.string,
+    onClick: PropTypes.func
+  }),
+  extraButton: PropTypes.shape({
+    title: PropTypes.string,
+    href: PropTypes.string,
+    target: PropTypes.oneOf(['_self', '_blank']),
+    rel: PropTypes.string,
+    onClick: PropTypes.func
+  }),
+  pictureMask: PropTypes.oneOf(['mac-book', 'none']),
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])])
+};
+export default PictureBox;

package/dist/es/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/es/index.js

@@ -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/components/BenefitsIcons/style/BenefitsIcons.css

@@ -6,6 +6,8 @@ h5 {
   margin: 0;
 }
 .mfui-v6-benefits-icons {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   overflow: hidden;
 }
 .mfui-v6-benefits-icons__inner {

package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css

@@ -8,7 +8,7 @@ h5 {
 .mfui-v6-benefits-icons-tile {
   min-height: 100%;
   padding: 24px;
-  border-radius: 12px;
+  border-radius: 24px;
 }
 .mfui-v6-benefits-icons-tile_background_transparent {
   padding: 0;
@@ -22,6 +22,12 @@ h5 {
 .mfui-v6-benefits-icons-tile_background_purple {
   background-color: var(--brandPurple20);
 }
+.mfui-v6-benefits-icons-tile_background_white {
+  background-color: var(--base);
+}
+.mfui-v6-benefits-icons-tile_background_stroke {
+  border: 1px solid var(--spbSky2);
+}
 .mfui-v6-benefits-icons-tile .mfui-v6-benefits-icons-tile__svg-icon {
   margin-bottom: 10px;
 }

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

@@ -38,6 +38,8 @@ export declare const BackgroundEnum: {
     readonly GRAY: "gray";
     readonly GREEN: "green";
     readonly PURPLE: "purple";
+    readonly WHITE: "white";
+    readonly STROKE: "stroke";
 };
 export declare type BackgroundType = typeof BackgroundEnum[keyof typeof BackgroundEnum];
 export declare type GridConfig = {

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

@@ -19,6 +19,8 @@ var BackgroundEnum = {
   TRANSPARENT: 'transparent',
   GRAY: 'gray',
   GREEN: 'green',
-  PURPLE: 'purple'
+  PURPLE: 'purple',
+  WHITE: 'white',
+  STROKE: 'stroke'
 };
 exports.BackgroundEnum = BackgroundEnum;