@megafon/ui-shared 2.0.0-beta.99 → 2.0.0

package/dist/es/components/Card/Card.css

@@ -5,99 +5,126 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-card {
+.mfui-card {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   border-radius: 8px;
+  overflow: hidden;
+  background-color: #FFFFFF;
   -webkit-box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
           box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
-  background-color: #FFFFFF;
-  overflow: hidden;
 }
-.mfui-beta-card_href * {
-  text-decoration: none;
-}
-.mfui-beta-card_href:hover {
-  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
-          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
-}
-.mfui-beta-card__inner {
+.mfui-card__inner {
+  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-flex: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
+  -ms-flex-negative: 1;
+      flex-shrink: 1;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
   padding: 32px 20px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-card__inner {
+  .mfui-card__inner {
     padding: 24px 16px;
   }
 }
-.mfui-beta-card__title {
-  margin-bottom: 12px;
+.mfui-card__text {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+  margin-top: 12px;
+  color: #333333;
 }
-.mfui-beta-card__btns-wrapper {
+.mfui-card__btns-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
-  -webkit-box-pack: space-evenly;
-      -ms-flex-pack: space-evenly;
-          justify-content: space-evenly;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  margin-top: 12px;
+  -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
+  margin-top: auto;
+  padding-top: 12px;
 }
-.mfui-beta-card__btns-wrapper_left-align {
+.mfui-card__btns-wrapper_left-align {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
 }
-.mfui-beta-card__fake-link {
+.mfui-card__fake-link {
   color: #34AAF2;
 }
-.mfui-beta-card__button,
-.mfui-beta-card__link,
-.mfui-beta-card__fake-link {
+.mfui-card__button,
+.mfui-card__link,
+.mfui-card__fake-link {
   margin: 12px 10px;
 }
-.mfui-beta-card__pic-wrapper {
-  margin-bottom: 32px;
+.mfui-card__svg-wrapper {
+  margin-bottom: 24px;
 }
-@media screen and (max-width: 767px) {
-  .mfui-beta-card__pic-wrapper {
-    margin-bottom: 24px;
-  }
-}
-.mfui-beta-card__pic-wrapper .mfui-beta-card__img {
-  max-width: 100%;
-}
-.mfui-beta-card__pic-wrapper svg {
+.mfui-card__svg-wrapper svg {
   width: 40px;
   height: 40px;
 }
-.mfui-beta-card__pic-wrapper_img {
+.mfui-card__pic-wrapper .mfui-card__img {
+  max-width: 100%;
+}
+.mfui-card__pic-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   margin-top: -32px;
-  margin-left: -20px;
   margin-right: -20px;
+  margin-bottom: 32px;
+  margin-left: -20px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-card__pic-wrapper_img {
+  .mfui-card__pic-wrapper {
     margin-top: -24px;
-    margin-left: -16px;
     margin-right: -16px;
+    margin-bottom: 24px;
+    margin-left: -16px;
   }
 }
-.mfui-beta-card__pic-wrapper_object-fit_fill img {
+.mfui-card__pic-wrapper_object-fit_fill img {
   width: 100%;
   height: auto;
 }
-.mfui-beta-card__pic-wrapper_object-fit_contain img {
+.mfui-card__pic-wrapper_object-fit_contain img {
   width: auto;
   height: 100%;
 }
+.mfui-card_href * {
+  text-decoration: none !important;
+}
+.mfui-card_href:hover {
+  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
+}
+.mfui-card_full-height {
+  height: 100%;
+}
+.mfui-card_centered-text .mfui-card__text,
+.mfui-card_centered-text .mfui-card__title {
+  text-align: center;
+}

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

@@ -1,12 +1,21 @@
-import * as React from 'react';
+import React, { Ref } from 'react';
 import './Card.less';
+export declare const Target: {
+    readonly SELF: "_self";
+    readonly BLANK: "_blank";
+};
+declare type TargetType = typeof Target[keyof typeof Target];
 interface IButton {
     title: string;
     href: string;
+    target?: TargetType;
+    download?: boolean;
 }
 interface ILink {
     title: string;
     href?: string;
+    target?: TargetType;
+    download?: boolean;
 }
 export declare const ObjectFit: {
     readonly FILL: "fill";
@@ -14,22 +23,43 @@ export declare const ObjectFit: {
 };
 declare type ObjectFitType = typeof ObjectFit[keyof typeof ObjectFit];
 export interface ICard {
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        link?: string;
+        inner?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement>;
     /** Изображение в карточке */
     imageSrc?: string;
     /** Иконка в карточке */
     svgSrc?: React.ReactNode;
     /** Заголовок карточки */
-    title: string;
+    title: string | React.ReactNode[] | React.ReactNode;
     /** Текст карточки */
-    text: string;
+    text?: string | React.ReactNode[] | React.ReactNode;
     /** Данные для кнопки */
     button?: IButton;
     /** Данные для ссылки */
     link?: ILink;
+    /** Выравнивание текста по центру */
+    isCenteredText?: boolean;
     /** Расположение кнопки/ссылки по левой стороне */
     isLeftHAlign?: boolean;
+    /** Высота корневого элемента 100% */
+    isFullHeight?: boolean;
     /** Ссылка для всей карточки */
     href?: string;
+    /** Target свойство, аналогично свойству 'target' тега 'a' */
+    target?: TargetType;
     /** Режим позиционирования изображения */
     objectFit?: ObjectFitType;
 }

package/dist/es/components/Card/Card.js

@@ -1,30 +1,45 @@
 import "core-js/modules/es.object.values";
 import "core-js/modules/es.string.link";
-import * as React from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
 import "./Card.css";
-import { cnCreate, Header, Paragraph, Button, TextLink, Link } from '@megafon/ui-core';
+import { Header, Button, TextLink, Link } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
+export var Target = {
+  SELF: '_self',
+  BLANK: '_blank'
+};
 export var ObjectFit = {
   FILL: 'fill',
   CONTAIN: 'contain'
 };
-var cn = cnCreate('mfui-beta-card');
+var cn = cnCreate('mfui-card');
 
 var Card = function Card(_ref) {
-  var imageSrc = _ref.imageSrc,
+  var dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      rootRef = _ref.rootRef,
+      imageSrc = _ref.imageSrc,
       svgSrc = _ref.svgSrc,
       title = _ref.title,
       text = _ref.text,
       button = _ref.button,
       link = _ref.link,
+      _ref$isCenteredText = _ref.isCenteredText,
+      isCenteredText = _ref$isCenteredText === void 0 ? false : _ref$isCenteredText,
       _ref$isLeftHAlign = _ref.isLeftHAlign,
       isLeftHAlign = _ref$isLeftHAlign === void 0 ? false : _ref$isLeftHAlign,
+      _ref$isFullHeight = _ref.isFullHeight,
+      isFullHeight = _ref$isFullHeight === void 0 ? false : _ref$isFullHeight,
       href = _ref.href,
+      target = _ref.target,
       _ref$objectFit = _ref.objectFit,
       objectFit = _ref$objectFit === void 0 ? 'fill' : _ref$objectFit;
   var isAlignAvailable = !button || !link;
   var isCardLink = !!href;
-  var isRenderBtn = !!button && !isCardLink;
   var Element = href ? Link : 'div';
   var renderImage = React.useCallback(function () {
     switch (true) {
@@ -32,19 +47,19 @@ var Card = function Card(_ref) {
         {
           return /*#__PURE__*/React.createElement("div", {
             className: cn('pic-wrapper', {
-              'object-fit': objectFit,
-              'img': true
+              'object-fit': objectFit
             })
           }, /*#__PURE__*/React.createElement("img", {
             className: cn('img'),
-            src: imageSrc
+            src: imageSrc,
+            alt: ""
           }));
         }
 
       case !!svgSrc:
         {
           return /*#__PURE__*/React.createElement("div", {
-            className: cn('pic-wrapper')
+            className: cn('svg-wrapper')
           }, svgSrc);
         }
 
@@ -52,65 +67,111 @@ var Card = function Card(_ref) {
         return null;
     }
   }, [imageSrc, svgSrc, objectFit]);
-  var renderLink = React.useCallback(function (_ref2) {
-    var linkHref = _ref2.href,
-        linkTitle = _ref2.title;
-    var isFakeLink = !linkHref;
+  var renderLink = React.useCallback(function () {
+    if (!link) {
+      return null;
+    }
+
+    var linkHref = link.href,
+        linkTitle = link.title,
+        linkTarget = link.target,
+        download = link.download;
 
-    if (isFakeLink || isCardLink) {
+    if (!linkHref || isCardLink) {
       return /*#__PURE__*/React.createElement("span", {
         className: cn('fake-link')
       }, linkTitle);
     }
 
     return /*#__PURE__*/React.createElement(TextLink, {
-      className: cn('link'),
-      href: linkHref
+      className: cn('link', [classes.link]),
+      href: linkHref,
+      target: linkTarget,
+      download: download
     }, linkTitle);
-  }, [isCardLink]);
-  var renderBtn = React.useCallback(function (_ref3) {
-    var btnHref = _ref3.href,
-        btnTitle = _ref3.title;
+  }, [link, isCardLink, classes]);
+  var renderBtn = React.useCallback(function () {
+    if (!button || isCardLink) {
+      return null;
+    }
+
+    var btnHref = button.href,
+        btnTitle = button.title,
+        btnTarget = button.target,
+        buttonDownload = button.download;
     return /*#__PURE__*/React.createElement(Button, {
-      className: cn('button'),
-      href: btnHref
+      className: cn('button', [classes.button]),
+      href: btnHref,
+      target: btnTarget,
+      download: buttonDownload
     }, btnTitle);
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  }, [button, isCardLink, classes]);
+  var renderBtnsWrapper = React.useCallback(function () {
+    var btnElem = renderBtn();
+    var linkElem = renderLink();
+
+    if (!btnElem && !linkElem) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('btns-wrapper', {
+        'left-align': isAlignAvailable && isLeftHAlign
+      })
+    }, btnElem, linkElem);
+  }, [renderBtn, renderLink, isAlignAvailable, isLeftHAlign]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
     className: cn('', {
-      'href': !!href
-    })
-  }, /*#__PURE__*/React.createElement(Element, {
-    href: href
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn('inner')
-  }, renderImage(), /*#__PURE__*/React.createElement(Header, {
+      href: !!href,
+      'full-height': isFullHeight,
+      'centered-text': isCenteredText
+    }, [className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(Element, {
+    href: href,
+    target: target,
+    className: cn('inner', [classes.inner])
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, renderImage(), /*#__PURE__*/React.createElement(Header, {
     as: "h3",
     className: cn('title')
-  }, title), /*#__PURE__*/React.createElement(Paragraph, {
-    hasMargin: false
-  }, text), /*#__PURE__*/React.createElement("div", {
-    className: cn('btns-wrapper', {
-      'left-align': isAlignAvailable && isLeftHAlign
-    })
-  }, isRenderBtn && renderBtn(button), link && renderLink(link)))));
+  }, title), !!text && /*#__PURE__*/React.createElement("div", {
+    className: cn('text')
+  }, text), renderBtnsWrapper())));
 };
 
 Card.propTypes = {
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    button: PropTypes.string,
+    link: PropTypes.string,
+    inner: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   imageSrc: PropTypes.string,
   svgSrc: PropTypes.node,
-  title: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   button: PropTypes.shape({
     title: PropTypes.string.isRequired,
-    href: PropTypes.string.isRequired
+    href: PropTypes.string.isRequired,
+    target: PropTypes.oneOf(Object.values(Target)),
+    download: PropTypes.bool
   }),
   link: PropTypes.shape({
     title: PropTypes.string.isRequired,
-    href: PropTypes.string
+    href: PropTypes.string,
+    target: PropTypes.oneOf(Object.values(Target)),
+    download: PropTypes.bool
   }),
+  isCenteredText: PropTypes.bool,
   isLeftHAlign: PropTypes.bool,
+  isFullHeight: PropTypes.bool,
   href: PropTypes.string,
+  target: PropTypes.oneOf(Object.values(Target)),
   objectFit: PropTypes.oneOf(Object.values(ObjectFit))
 };
 export default Card;

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

@@ -1,7 +1,15 @@
 import * as React from 'react';
 import { ICard } from '../Card/Card';
-interface ICardsBox {
+interface ICardsBoxProps {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Обработчик смены слайда (должен быть обернут в useCallback) */
+    onChange?: (currentIndex: number, previousIndex: number, slidesPerView?: number | 'auto') => void;
     children: Array<React.ReactElement<ICard>> | React.ReactElement<ICard>;
 }
-declare const CardsBox: React.FC<ICardsBox>;
+declare const CardsBox: React.FC<ICardsBoxProps>;
 export default CardsBox;

package/dist/es/components/CardsBox/CardsBox.js

@@ -1,25 +1,31 @@
 import "core-js/modules/es.array.map";
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _SlidesSettings;
 
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import { Grid, GridColumn, Carousel } from '@megafon/ui-core';
+import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
-import { cnCreate, Grid, GridColumn, Carousel, breakpoints, throttleTime } from '@megafon/ui-core';
+import * as PropTypes from 'prop-types';
+import throttleTime from "../../constants/throttleTime";
 var MAX_CARDS_COUNT_IN_GRID_ON_MOBILE = 2;
-var SlidesSettings = (_SlidesSettings = {}, _defineProperty(_SlidesSettings, breakpoints.mobileSmallStart, {
+var SlidesSettings = (_SlidesSettings = {}, _defineProperty(_SlidesSettings, breakpoints.MOBILE_SMALL_START, {
   slidesPerView: 1,
   spaceBetween: 16
-}), _defineProperty(_SlidesSettings, breakpoints.mobileBigStart, {
+}), _defineProperty(_SlidesSettings, breakpoints.MOBILE_BIG_START, {
   slidesPerView: 2,
   spaceBetween: 20
 }), _SlidesSettings);
-var cn = cnCreate('mfui-beta-cards-box');
+var cn = cnCreate('mfui-cards-box');
 
 var CardsBox = function CardsBox(_ref) {
-  var children = _ref.children;
+  var rootRef = _ref.rootRef,
+      dataAttrs = _ref.dataAttrs,
+      onChange = _ref.onChange,
+      children = _ref.children;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -41,12 +47,13 @@ var CardsBox = function CardsBox(_ref) {
   }, [children]);
   var renderCarousel = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(Carousel, {
-      slidesSettings: SlidesSettings
+      slidesSettings: SlidesSettings,
+      onChange: onChange
     }, children);
-  }, [children]);
+  }, [children, onChange]);
   React.useEffect(function () {
     var resizeHandler = function resizeHandler() {
-      return window.innerWidth <= breakpoints.mobileBigEnd ? setIsMobile(true) : setIsMobile(false);
+      return window.innerWidth <= breakpoints.MOBILE_BIG_END ? setIsMobile(true) : setIsMobile(false);
     };
 
     var resizeHandlerThrottled = throttle(resizeHandler, throttleTime.resize);
@@ -56,12 +63,18 @@ var CardsBox = function CardsBox(_ref) {
       window.removeEventListener('resize', resizeHandlerThrottled);
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn()
-  }, isRenderCarousel ? renderCarousel() : renderGrid());
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn(),
+    ref: rootRef
+  }, filterDataAttrs(dataAttrs)), isRenderCarousel ? renderCarousel() : renderGrid());
 };
 
 CardsBox.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]).isRequired
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]).isRequired,
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  onChange: PropTypes.func
 };
 export default CardsBox;

package/dist/es/components/CarouselBox/CarouselBox.js

@@ -15,8 +15,9 @@ var __rest = this && this.__rest || function (s, e) {
 };
 
 import * as React from 'react';
-import { cnCreate, Carousel } from '@megafon/ui-core';
-var cn = cnCreate('mfui-beta-carousel-box');
+import { Carousel } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+var cn = cnCreate('mfui-carousel-box');
 
 var CarouselBox = function CarouselBox(_a) {
   var children = _a.children,