@megafon/ui-shared 2.0.0-beta.24 → 2.0.0-beta.240

package/dist/es/components/Breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,46 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-breadcrumbs {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+.mfui-beta-breadcrumbs_color_black .mfui-beta-breadcrumbs__item:before {
+  color: #333333;
+}
+.mfui-beta-breadcrumbs_color_white .mfui-beta-breadcrumbs__item:before {
+  color: #FFFFFF;
+}
+.mfui-beta-breadcrumbs__icon {
+  position: relative;
+  width: 14px;
+  height: 3px;
+  margin-right: 10px;
+}
+.mfui-beta-breadcrumbs__item {
+  position: relative;
+  margin-right: 10px;
+  padding-left: 22px;
+}
+.mfui-beta-breadcrumbs__item:before {
+  content: '→';
+  position: absolute;
+  top: -2px;
+  left: 0;
+}
+.mfui-beta-breadcrumbs__item:first-child {
+  padding-left: 0;
+}
+.mfui-beta-breadcrumbs__item:first-child:before {
+  display: none;
+}
+.mfui-beta-breadcrumbs__item:last-child {
+  pointer-events: none;
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import './Breadcrumbs.less';
+declare type ItemType = {
+    title: string;
+    href?: string;
+};
+export declare const TextColor: {
+    readonly BLACK: "black";
+    readonly WHITE: "white";
+};
+declare type TextColorType = typeof TextColor[keyof typeof TextColor];
+export declare type Props = {
+    className?: string;
+    classes?: {
+        item?: string;
+    };
+    items: ItemType[];
+    color?: TextColorType;
+};
+declare const Breadcrumbs: React.FC<Props>;
+export default Breadcrumbs;

package/dist/es/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,49 @@
+import "core-js/modules/es.array.map";
+import "core-js/modules/es.object.values";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TextLink } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+import "./Breadcrumbs.css";
+export var TextColor = {
+  BLACK: 'black',
+  WHITE: 'white'
+};
+var cn = cnCreate('mfui-beta-breadcrumbs');
+
+var Breadcrumbs = function Breadcrumbs(_ref) {
+  var items = _ref.items,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'black' : _ref$color,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      color: color
+    }, className)
+  }, items.map(function (_ref2) {
+    var title = _ref2.title,
+        href = _ref2.href;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('item', classes.item),
+      key: title
+    }, /*#__PURE__*/React.createElement(TextLink, {
+      href: href,
+      color: color
+    }, title));
+  }));
+};
+
+Breadcrumbs.propTypes = {
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    item: PropTypes.string
+  }),
+  items: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    href: PropTypes.string
+  }).isRequired).isRequired,
+  color: PropTypes.oneOf(Object.values(TextColor))
+};
+export default Breadcrumbs;

package/dist/es/components/ButtonBanner/ButtonBanner.css

@@ -0,0 +1,122 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-button-banner {
+  position: relative;
+  border: 1px solid #D8D8D8;
+  background-color: #FFFFFF;
+  border-radius: 0 8px 8px 0;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-button-banner {
+    border-radius: 0 0 8px 8px;
+  }
+}
+.mfui-beta-button-banner:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 12px;
+  background-color: #00B956;
+  border-radius: 0 12px 12px 0;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-button-banner:before {
+    border-radius: 0 0 12px 12px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-button-banner:before {
+    right: 0;
+    bottom: auto;
+    width: auto;
+    height: 12px;
+  }
+}
+.mfui-beta-button-banner__content {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-button-banner__content {
+    padding: 36px 16px 32px;
+    text-align: center;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-button-banner__content {
+    padding: 32px 0;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-beta-button-banner__content {
+    padding: 40px 0;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-beta-button-banner__content {
+    padding: 48px 0;
+  }
+}
+.mfui-beta-button-banner__media {
+  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;
+          justify-content: center;
+  height: 100%;
+  padding: 0 20px;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 0 8px 8px 0;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-button-banner__media {
+    border-radius: 0 0 8px 8px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-button-banner__media {
+    height: auto;
+    padding: 0 16px 24px;
+  }
+}
+.mfui-beta-button-banner_scaling_cover .mfui-beta-button-banner__media {
+  background-size: cover;
+}
+.mfui-beta-button-banner_scaling_contain .mfui-beta-button-banner__media {
+  background-size: contain;
+}
+.mfui-beta-button-banner__header {
+  margin-bottom: 16px;
+}
+.mfui-beta-button-banner__button {
+  max-width: 100%;
+}
+.mfui-beta-button-banner__text {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}
+.mfui-beta-button-banner_image .mfui-beta-button-banner__media {
+  padding: 0;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-button-banner_image .mfui-beta-button-banner__media {
+    height: 222px;
+  }
+}
+.mfui-beta-button-banner_image .mfui-beta-button-banner__text {
+  margin-bottom: 32px;
+}

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

@@ -0,0 +1,54 @@
+import React, { Ref } from 'react';
+import './ButtonBanner.less';
+export declare const ButtonColor: {
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+};
+declare type ButtonColorType = typeof ButtonColor[keyof typeof ButtonColor];
+export declare const ButtonTarget: {
+    readonly SELF: "_self";
+    readonly BLANK: "_blank";
+};
+declare type ButtonTargetType = typeof ButtonTarget[keyof typeof ButtonTarget];
+export declare const ImageScaling: {
+    readonly COVER: "cover";
+    readonly CONTAIN: "contain";
+};
+declare type ImageScalingType = typeof ImageScaling[keyof typeof ImageScaling];
+export interface IButtonBannerProps {
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Дополнительный css класс для корневого элемента */
+    className?: string;
+    /** Дополнительный css классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Заголовок */
+    title: string;
+    /** Текст */
+    text: string | React.ReactNode | React.ReactNode[];
+    /** URL изображения */
+    imageUrl?: string;
+    /** Текст кнопки */
+    buttonText: string;
+    /** URL кнопки */
+    buttonUrl?: string;
+    /** Download - свойство тега <a> */
+    buttonDownload?: boolean;
+    /** Target - свойство тега <a> */
+    buttonTarget?: ButtonTargetType;
+    /** Цвет кнопки */
+    buttonColor?: ButtonColorType;
+    /** Масштабирование изображения */
+    imageScaling?: ImageScalingType;
+    /** Обработчик клика по кнопке */
+    onButtonClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+}
+declare const ButtonBanner: React.FC<IButtonBannerProps>;
+export default ButtonBanner;

package/dist/es/components/ButtonBanner/ButtonBanner.js

@@ -0,0 +1,107 @@
+import "core-js/modules/es.object.values";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import * as PropTypes from 'prop-types';
+import "./ButtonBanner.css";
+import { Button, Grid, GridColumn, Header } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+export var ButtonColor = {
+  GREEN: 'green',
+  PURPLE: 'purple'
+};
+export var ButtonTarget = {
+  SELF: '_self',
+  BLANK: '_blank'
+};
+export var ImageScaling = {
+  COVER: 'cover',
+  CONTAIN: 'contain'
+};
+
+var getMediaStyle = function getMediaStyle(imageUrl) {
+  return imageUrl ? {
+    backgroundImage: "url(".concat(imageUrl, ")")
+  } : undefined;
+};
+
+var cn = cnCreate('mfui-beta-button-banner');
+
+var ButtonBanner = function ButtonBanner(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      rootRef = _ref.rootRef,
+      title = _ref.title,
+      text = _ref.text,
+      _ref$imageUrl = _ref.imageUrl,
+      imageUrl = _ref$imageUrl === void 0 ? '' : _ref$imageUrl,
+      buttonText = _ref.buttonText,
+      buttonUrl = _ref.buttonUrl,
+      buttonDownload = _ref.buttonDownload,
+      _ref$buttonTarget = _ref.buttonTarget,
+      buttonTarget = _ref$buttonTarget === void 0 ? '_self' : _ref$buttonTarget,
+      _ref$buttonColor = _ref.buttonColor,
+      buttonColor = _ref$buttonColor === void 0 ? 'green' : _ref$buttonColor,
+      _ref$imageScaling = _ref.imageScaling,
+      imageScaling = _ref$imageScaling === void 0 ? 'cover' : _ref$imageScaling,
+      onButtonClick = _ref.onButtonClick;
+  var buttonElem = /*#__PURE__*/React.createElement(Button, {
+    className: cn('button', [classes.button]),
+    href: buttonUrl,
+    target: buttonTarget,
+    theme: buttonColor,
+    onClick: onButtonClick,
+    download: buttonDownload
+  }, buttonText);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+    className: cn({
+      image: !!imageUrl,
+      scaling: imageScaling
+    }, [className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(Grid, {
+    guttersLeft: "medium"
+  }, /*#__PURE__*/React.createElement(GridColumn, {
+    all: "6",
+    mobile: "12",
+    leftOffsetTablet: "1",
+    leftOffsetDesktop: "1",
+    leftOffsetWide: "1"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/React.createElement(Header, {
+    className: cn('header'),
+    as: "h2"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: cn('text')
+  }, text), !!imageUrl && buttonElem)), /*#__PURE__*/React.createElement(GridColumn, {
+    all: "5",
+    mobile: "12"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('media'),
+    style: getMediaStyle(imageUrl)
+  }, !imageUrl && buttonElem))));
+};
+
+ButtonBanner.propTypes = {
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    button: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  title: PropTypes.string.isRequired,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  imageUrl: PropTypes.string,
+  buttonText: PropTypes.string.isRequired,
+  buttonUrl: PropTypes.string,
+  buttonDownload: PropTypes.bool,
+  buttonTarget: PropTypes.oneOf(Object.values(ButtonTarget)),
+  buttonColor: PropTypes.oneOf(Object.values(ButtonColor)),
+  onButtonClick: PropTypes.func
+};
+export default ButtonBanner;

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

@@ -1,20 +1,44 @@
-import * as React from 'react';
+import React, { Ref } from 'react';
 import './ButtonLinkBox.less';
 export interface IButtonLinkBoxProps {
-    /** Custom className */
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Дополнительный класс корневого элемента */
     className?: string;
-    /** Button title */
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        link?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Заголовок кнопки */
     buttonTitle?: string;
-    /** Button url */
+    /** Ссылка кнопки */
     buttonUrl?: string;
-    /** Button color */
+    /** Добавляет атрибут download для тега <a> компонента Button */
+    buttonDownload?: boolean;
+    /** Цвет кнопки */
     buttonColor?: 'green' | 'purple';
-    /** Link title */
+    /** Target свойство кнопки */
+    buttonTarget?: '_self' | '_blank' | '_parent' | '_top';
+    /** Заголовок ссылки */
     linkTitle?: string;
-    /** Link url */
+    /** Добавляет атрибут download для тега <a> компонента Button */
     linkUrl?: string;
-    /** Horizontal alignment */
+    /** Target свойство ссылки */
+    linkTarget?: '_self' | '_blank' | '_parent' | '_top';
+    /** Добавляет атрибут download к свойству тега <a> */
+    linkDownload?: boolean;
+    /** Горизонтальное выравнивание */
     hAlign?: 'center' | 'left';
+    /** Обработчик клика по кнопке */
+    onButtonClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Обработчик клика по ссылке */
+    onLinkClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 }
 declare const ButtonLinkBox: React.FC<IButtonLinkBoxProps>;
 export default ButtonLinkBox;

package/dist/es/components/ButtonLinkBox/ButtonLinkBox.js

@@ -1,42 +1,77 @@
-import * as React from 'react';
+import "core-js/modules/es.string.link";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
 import * as PropTypes from 'prop-types';
-import { cnCreate, Button, TextLink } from '@megafon/ui-core';
+import { Button, TextLink } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import "./ButtonLinkBox.css";
 var cn = cnCreate('mfui-beta-button-link-box');
 
 var ButtonLinkBox = function ButtonLinkBox(_ref) {
-  var buttonTitle = _ref.buttonTitle,
+  var dataAttrs = _ref.dataAttrs,
+      rootRef = _ref.rootRef,
+      buttonTitle = _ref.buttonTitle,
       buttonUrl = _ref.buttonUrl,
+      buttonDownload = _ref.buttonDownload,
       _ref$buttonColor = _ref.buttonColor,
       buttonColor = _ref$buttonColor === void 0 ? 'green' : _ref$buttonColor,
       linkTitle = _ref.linkTitle,
       linkUrl = _ref.linkUrl,
+      linkDownload = _ref.linkDownload,
       hAlign = _ref.hAlign,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
+      className = _ref.className,
+      buttonTarget = _ref.buttonTarget,
+      linkTarget = _ref.linkTarget,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      onButtonClick = _ref.onButtonClick,
+      onLinkClick = _ref.onLinkClick;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
     className: cn({
       'h-align': hAlign
-    }, className)
-  }, buttonTitle && /*#__PURE__*/React.createElement("div", {
+    }, [className, classes.root]),
+    ref: rootRef
+  }), buttonTitle && /*#__PURE__*/React.createElement("div", {
     className: cn('row')
   }, /*#__PURE__*/React.createElement(Button, {
+    className: classes.button,
     href: buttonUrl,
-    theme: buttonColor
+    theme: buttonColor,
+    onClick: onButtonClick,
+    target: buttonTarget,
+    download: buttonDownload
   }, buttonTitle)), linkTitle && /*#__PURE__*/React.createElement("div", {
     className: cn('row')
   }, /*#__PURE__*/React.createElement(TextLink, {
+    className: classes.link,
     href: linkUrl,
-    underlineVisibility: "always"
+    download: linkDownload,
+    underlineVisibility: "always",
+    target: linkTarget,
+    onClick: onLinkClick
   }, linkTitle)));
 };
 
 ButtonLinkBox.propTypes = {
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
   className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    button: PropTypes.string,
+    link: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   buttonTitle: PropTypes.string,
   buttonUrl: PropTypes.string,
+  buttonDownload: PropTypes.bool,
   buttonColor: PropTypes.oneOf(['green', 'purple']),
   linkTitle: PropTypes.string,
   linkUrl: PropTypes.string,
-  hAlign: PropTypes.oneOf(['center'])
+  linkDownload: PropTypes.bool,
+  hAlign: PropTypes.oneOf(['center']),
+  onButtonClick: PropTypes.func,
+  onLinkClick: PropTypes.func
 };
 export default ButtonLinkBox;

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

@@ -0,0 +1,130 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-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);
+}
+.mfui-beta-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 {
+    padding: 24px 16px;
+  }
+}
+.mfui-beta-card__text {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+  margin-top: 12px;
+  color: #333333;
+}
+.mfui-beta-card__btns-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -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 {
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+}
+.mfui-beta-card__fake-link {
+  color: #34AAF2;
+}
+.mfui-beta-card__button,
+.mfui-beta-card__link,
+.mfui-beta-card__fake-link {
+  margin: 12px 10px;
+}
+.mfui-beta-card__svg-wrapper {
+  margin-bottom: 24px;
+}
+.mfui-beta-card__svg-wrapper svg {
+  width: 40px;
+  height: 40px;
+}
+.mfui-beta-card__pic-wrapper .mfui-beta-card__img {
+  max-width: 100%;
+}
+.mfui-beta-card__pic-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;
+          justify-content: center;
+  margin-top: -32px;
+  margin-right: -20px;
+  margin-bottom: 32px;
+  margin-left: -20px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-card__pic-wrapper {
+    margin-top: -24px;
+    margin-right: -16px;
+    margin-bottom: 24px;
+    margin-left: -16px;
+  }
+}
+.mfui-beta-card__pic-wrapper_object-fit_fill img {
+  width: 100%;
+  height: auto;
+}
+.mfui-beta-card__pic-wrapper_object-fit_contain img {
+  width: auto;
+  height: 100%;
+}
+.mfui-beta-card_href * {
+  text-decoration: none !important;
+}
+.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_full-height {
+  height: 100%;
+}
+.mfui-beta-card_centered-text .mfui-beta-card__text,
+.mfui-beta-card_centered-text .mfui-beta-card__title {
+  text-align: center;
+}