@megafon/ui-shared 6.0.0-beta.5 → 6.1.0

package/dist/es/components/BenefitsPictures/BenefitsPictures.js

@@ -2,46 +2,53 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.array.map.js";
 import * as React from 'react';
+import { useCallback } from 'react';
 import { Grid, GridColumn, Header, Paragraph } from '@megafon/ui-core';
 import { breakpoints, cnCreate } from '@megafon/ui-helpers';
 import convert from 'htmr';
 import throttle from 'lodash.throttle';
+import PropTypes from 'prop-types';
 import throttleTime from "../../constants/throttleTime";
 import getCenterConfig, { getLeftConfig } from "./helpers";
 import "./BenfitsPictures.css";
 export var ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
 var testIdPrefix = 'BenefitsPictures';
 var cn = cnCreate('mfui-benefits-pictures');
+
 var BenefitsPictures = function BenefitsPictures(_ref) {
   var items = _ref.items,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'left' : _ref$align,
-    _ref$textAlign = _ref.textAlign,
-    textAlign = _ref$textAlign === void 0 ? 'auto' : _ref$textAlign,
-    _ref$imgAlign = _ref.imgAlign,
-    imgAlign = _ref$imgAlign === void 0 ? 'auto' : _ref$imgAlign,
-    _ref$gridGap = _ref.gridGap,
-    gridGap = _ref$gridGap === void 0 ? 'large' : _ref$gridGap,
-    rootRef = _ref.rootRef,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes;
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'left' : _ref$align,
+      _ref$textAlign = _ref.textAlign,
+      textAlign = _ref$textAlign === void 0 ? 'auto' : _ref$textAlign,
+      _ref$imgAlign = _ref.imgAlign,
+      imgAlign = _ref$imgAlign === void 0 ? 'auto' : _ref$imgAlign,
+      _ref$gridGap = _ref.gridGap,
+      gridGap = _ref$gridGap === void 0 ? 'large' : _ref$gridGap,
+      rootRef = _ref.rootRef,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes;
   var isLargeGutter = gridGap === 'large';
   var isGridCenterAlign = align === 'center' && items.length !== ONLY_LEFT_ALIGN_ITEMS_COUNT;
+
   var _React$useState = React.useState(gridGap),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    currentGutter = _React$useState2[0],
-    setCurrentGutter = _React$useState2[1];
-  var resizeHandler = React.useCallback(function () {
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      currentGutter = _React$useState2[0],
+      setCurrentGutter = _React$useState2[1];
+
+  var resizeHandler = useCallback(function () {
     if (!isLargeGutter) {
       return;
     }
+
     if (window.innerWidth < breakpoints.DESKTOP_MIDDLE_START) {
       setCurrentGutter('medium');
     } else {
       setCurrentGutter('large');
     }
   }, [isLargeGutter]);
+
   var renderText = function renderText(text) {
     if (typeof text === 'string') {
       return /*#__PURE__*/React.createElement(Paragraph, {
@@ -52,8 +59,10 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
         }
       }, convert(text));
     }
+
     return text;
   };
+
   React.useEffect(function () {
     var throttledResizeHandler = throttle(resizeHandler, throttleTime.resize);
     resizeHandler();
@@ -77,9 +86,9 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
     }
   }, items.map(function (_ref2, index) {
     var img = _ref2.img,
-      title = _ref2.title,
-      text = _ref2.text,
-      alt = _ref2.alt;
+        title = _ref2.title,
+        text = _ref2.text,
+        alt = _ref2.alt;
     return /*#__PURE__*/React.createElement(GridColumn, _extends({}, align === 'left' ? getLeftConfig(items.length, index) : getCenterConfig(items.length, index, gridGap), {
       key: index
     }), /*#__PURE__*/React.createElement("div", {
@@ -108,4 +117,25 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
     }, convert(title)), !!text && renderText(text))));
   }))));
 };
+
+BenefitsPictures.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  items: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+    img: PropTypes.string.isRequired,
+    alt: PropTypes.string
+  }).isRequired).isRequired,
+  align: PropTypes.oneOf(['left', 'center']),
+  textAlign: PropTypes.oneOf(['left', 'center', 'auto']),
+  imgAlign: PropTypes.oneOf(['left', 'center', 'auto']),
+  gridGap: PropTypes.oneOf(['medium', 'large']),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    item: PropTypes.string
+  })
+};
 export default BenefitsPictures;

package/dist/es/components/BenefitsPictures/BenfitsPictures.css

@@ -1 +1,43 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-benefits-pictures{overflow:hidden}.mfui-benefits-pictures__inner{margin-bottom:-40px}@media screen and (min-width:768px){.mfui-benefits-pictures__inner{margin-bottom:-48px}}.mfui-benefits-pictures__item{margin-bottom:40px}@media screen and (min-width:768px){.mfui-benefits-pictures__item{margin-bottom:48px}}.mfui-benefits-pictures__content_h-align_center{text-align:center}.mfui-benefits-pictures__img{border-radius:12px;margin-bottom:32px;max-width:100%;vertical-align:top}.mfui-benefits-pictures__img_h-align_center{display:block;margin-left:auto;margin-right:auto}.mfui-benefits-pictures__title{margin-bottom:12px}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-benefits-pictures {
+  overflow: hidden;
+}
+.mfui-benefits-pictures__inner {
+  margin-bottom: -40px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-benefits-pictures__inner {
+    margin-bottom: -48px;
+  }
+}
+.mfui-benefits-pictures__item {
+  margin-bottom: 40px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-benefits-pictures__item {
+    margin-bottom: 48px;
+  }
+}
+.mfui-benefits-pictures__content_h-align_center {
+  text-align: center;
+}
+.mfui-benefits-pictures__img {
+  max-width: 100%;
+  margin-bottom: 32px;
+  border-radius: 12px;
+  vertical-align: top;
+}
+.mfui-benefits-pictures__img_h-align_center {
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+}
+.mfui-benefits-pictures__title {
+  margin-bottom: 12px;
+}

package/dist/es/components/BenefitsPictures/helpers.d.ts

@@ -1,8 +1,8 @@
 import { GridConfig } from './types';
 declare const columnSize: GridConfig;
 declare const isOddIndex: (index: number) => boolean;
-declare const getEvenOffset: (index: number) => '1' | undefined;
-declare const getOddOffset: (index: number) => '1' | undefined;
+declare const getEvenOffset: (index: number) => "1" | undefined;
+declare const getOddOffset: (index: number) => "1" | undefined;
 declare const getLeftConfig: (count: number, index: number) => GridConfig;
 declare const getCenterMediumConfig: (count: number, index: number) => GridConfig;
 declare const getCenterLargeConfig: (count: number, index: number) => GridConfig;

package/dist/es/components/BenefitsPictures/helpers.js

@@ -4,15 +4,19 @@ var columnSize = {
   desktop: '4',
   tablet: '5'
 };
+
 var isOddIndex = function isOddIndex(index) {
   return !((index + 1) % 2);
 };
+
 var getEvenOffset = function getEvenOffset(index) {
   return isOddIndex(index) ? '1' : undefined;
 };
+
 var getOddOffset = function getOddOffset(index) {
   return isOddIndex(index) ? undefined : '1';
 };
+
 var getLeftConfig = function getLeftConfig(count, index) {
   switch (count) {
     case 2:
@@ -22,18 +26,21 @@ var getLeftConfig = function getLeftConfig(count, index) {
         leftOffsetDesktop: getEvenOffset(index),
         leftOffsetTablet: getEvenOffset(index)
       });
+
     default:
       return _extends(_extends({}, columnSize), {
         leftOffsetTablet: getEvenOffset(index)
       });
   }
 };
+
 var getCenterMediumConfig = function getCenterMediumConfig(count, index) {
   switch (count) {
     case 3:
       return _extends(_extends({}, columnSize), {
         leftOffsetTablet: getOddOffset(index)
       });
+
     case 4:
       return _extends(_extends({}, columnSize), {
         rightOffsetWide: getOddOffset(index),
@@ -43,6 +50,7 @@ var getCenterMediumConfig = function getCenterMediumConfig(count, index) {
         rightOffsetTablet: getEvenOffset(index),
         leftOffsetTablet: getOddOffset(index)
       });
+
     default:
       return _extends(_extends({}, columnSize), {
         rightOffsetWide: getOddOffset(index),
@@ -50,6 +58,7 @@ var getCenterMediumConfig = function getCenterMediumConfig(count, index) {
       });
   }
 };
+
 var getCenterLargeConfig = function getCenterLargeConfig(count, index) {
   switch (count) {
     case 4:
@@ -61,25 +70,30 @@ var getCenterLargeConfig = function getCenterLargeConfig(count, index) {
         leftOffsetTablet: getOddOffset(index),
         rightOffsetTablet: getEvenOffset(index)
       });
+
     case 3:
       return _extends(_extends({}, columnSize), {
         leftOffsetTablet: getOddOffset(index)
       });
+
     default:
       return _extends({}, columnSize);
   }
 };
+
 var getCenterConfig = function getCenterConfig(count, index, gutterSize) {
   switch (gutterSize) {
     case 'medium':
       {
         return getCenterMediumConfig(count, index);
       }
+
     default:
       {
         return getCenterLargeConfig(count, index);
       }
   }
 };
+
 export default getCenterConfig;
 export { columnSize, isOddIndex, getEvenOffset, getOddOffset, getLeftConfig, getCenterMediumConfig, getCenterLargeConfig };

package/dist/es/components/BenefitsPictures/types.d.ts

@@ -9,8 +9,8 @@ export interface IBenefit {
     /** Значение тега alt для изображения */
     alt?: string;
 }
-type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
-export type GridConfig = {
+declare type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+export declare type GridConfig = {
     wide?: TGridSizeValues;
     desktop?: TGridSizeValues;
     tablet?: TGridSizeValues;
@@ -21,5 +21,5 @@ export type GridConfig = {
     rightOffsetTablet?: TGridSizeValues;
     rightOffsetWide?: TGridSizeValues;
 };
-export type GridGutterSize = 'large' | 'medium';
+export declare type GridGutterSize = 'large' | 'medium';
 export {};

package/dist/es/components/BenefitsPictures/types.js

@@ -1 +0,0 @@
-export {};

package/dist/es/components/BlogBox/BlogBox.css

@@ -0,0 +1,92 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-blog-box {
+  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-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-blog-box__list {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    -webkit-column-gap: 20px;
+       -moz-column-gap: 20px;
+            column-gap: 20px;
+    row-gap: 24px;
+  }
+}
+.mfui-blog-box__list_row {
+  grid-template-columns: repeat(6, 1fr);
+}
+.mfui-blog-box__list_row .mfui-blog-box__item {
+  grid-column-end: span 2;
+}
+.mfui-blog-box__list_row-size_1 .mfui-blog-box__item {
+  grid-column-start: 3;
+}
+.mfui-blog-box__list_row-size_2 .mfui-blog-box__item:first-child {
+  grid-column-start: 2;
+}
+.mfui-blog-box__item_view_thumbnail {
+  margin-top: 16px;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-blog-box__item_view_thumbnail {
+    grid-column-start: 1;
+    grid-column-end: 2;
+    margin-top: 0;
+  }
+}
+.mfui-blog-box__item_view_full {
+  margin-bottom: 24px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-blog-box__item_view_full {
+    margin-bottom: 32px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-blog-box__item_view_full {
+    grid-row-start: 1;
+    grid-row-end: 4;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    margin-bottom: 0;
+  }
+}
+.mfui-blog-box__button-wrapper {
+  margin-top: 32px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-blog-box__button-wrapper {
+    margin-top: 40px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-blog-box__button-wrapper {
+    margin-top: 56px;
+  }
+}
+.mfui-blog-box__button {
+  min-width: 208px;
+}
+.mfui-blog-box_align-left {
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+.mfui-blog-box_align-left .mfui-blog-box__item:first-child {
+  grid-column-start: 1;
+}

package/dist/es/components/BlogBox/BlogBox.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ButtonType, TileDataType } from './types';
+import './BlogBox.less';
+export interface IBlogBox {
+    /** Статьи (не более 4, остальные будут проигнорированы) */
+    items: TileDataType[];
+    /** Кнопка */
+    button?: ButtonType;
+    /** Выравнивание по левому краю (при количестве статей менее трех) */
+    hasAlignLeft?: boolean;
+    /** Дополнительный класс для компонента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        item?: string;
+        button?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        list?: Record<string, string>;
+        item?: Record<string, string>;
+        button?: Record<string, string>;
+    };
+}
+declare const BlogBox: React.FC<IBlogBox>;
+export default BlogBox;

package/dist/es/components/BlogBox/BlogBox.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.concat.js";
+import React from 'react';
+import { Button } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
+import useResolutions from "../../hooks/useResolutions";
+import BlogBoxTile from "./components/BlogBoxTile";
+import "./BlogBox.css";
+var maxItemsCount = 4;
+var cn = cnCreate('mfui-blog-box');
+
+var BlogBox = function BlogBox(_ref) {
+  var items = _ref.items,
+      button = _ref.button,
+      _ref$hasAlignLeft = _ref.hasAlignLeft,
+      hasAlignLeft = _ref$hasAlignLeft === void 0 ? false : _ref$hasAlignLeft,
+      className = _ref.className,
+      classes = _ref.classes,
+      dataAttrs = _ref.dataAttrs;
+
+  var _useResolutions = useResolutions(),
+      isDesktop = _useResolutions.isDesktop;
+
+  var visibleItems = items.slice(0, maxItemsCount);
+  var itemsCount = visibleItems.length;
+  var isRow = isDesktop && itemsCount < maxItemsCount;
+  var isAlignLeft = isRow && hasAlignLeft;
+
+  var getView = function getView(isCompact, i) {
+    if (isCompact) {
+      return 'compact';
+    }
+
+    if (i === 0) {
+      return 'full';
+    }
+
+    return 'thumbnail';
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'align-left': isAlignLeft
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list), {
+    className: cn('list', {
+      row: isRow,
+      'row-size': isRow && "".concat(itemsCount)
+    })
+  }), visibleItems.map(function (item, i) {
+    var view = getView(isRow, i);
+    return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+      className: cn('item', {
+        view: view
+      }, [classes === null || classes === void 0 ? void 0 : classes.item]),
+      key: "".concat(item.title, "_").concat(i)
+    }), /*#__PURE__*/React.createElement(BlogBoxTile, _extends({}, item, {
+      view: view
+    })));
+  })), (button === null || button === void 0 ? void 0 : button.title) && /*#__PURE__*/React.createElement("div", {
+    className: cn('button-wrapper')
+  }, /*#__PURE__*/React.createElement(Button, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
+    className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.button]),
+    href: button.href,
+    target: button.target,
+    rel: button.rel
+  }, button.title)));
+};
+
+BlogBox.propTypes = {
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  items: PropTypes.arrayOf(PropTypes.shape({
+    date: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    image: PropTypes.shape({
+      srcMobile: PropTypes.string.isRequired,
+      srcDesktop: PropTypes.string.isRequired,
+      srcThumbnail: PropTypes.string.isRequired,
+      alt: PropTypes.string
+    }).isRequired,
+    href: PropTypes.string.isRequired,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    rel: PropTypes.string
+  }).isRequired).isRequired,
+  button: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    rel: PropTypes.string
+  }),
+  hasAlignLeft: PropTypes.bool
+};
+export default BlogBox;