@megafon/ui-shared 2.0.0-beta.97 → 2.0.1

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Link } from '@megafon/ui-core';
+import './StoreButton.less';
+export declare enum Theme {
+    GOOGLE_PLAY = "google-play",
+    APP_STORE = "app-store",
+    HUAWEI_STORE = "huawei-store"
+}
+declare type LinkPropTypes = React.ComponentProps<typeof Link>;
+export declare type Props = Required<Pick<LinkPropTypes, 'href'>> & Pick<LinkPropTypes, 'onClick'> & {
+    /** Тема кнопки */
+    theme: Theme;
+    /** Дополнительный класс */
+    className?: string;
+};
+declare const StoreButton: React.FC<Props>;
+export default StoreButton;

package/dist/es/components/StoreButton/StoreButton.js

@@ -0,0 +1,37 @@
+import "core-js/modules/es.object.values";
+import * as React from 'react';
+import { Link } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
+import "./StoreButton.css";
+export var Theme;
+
+(function (Theme) {
+  Theme["GOOGLE_PLAY"] = "google-play";
+  Theme["APP_STORE"] = "app-store";
+  Theme["HUAWEI_STORE"] = "huawei-store";
+})(Theme || (Theme = {}));
+
+var cn = cnCreate('mfui-store-button');
+
+var StoreButton = function StoreButton(_ref) {
+  var href = _ref.href,
+      onClick = _ref.onClick,
+      theme = _ref.theme,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement(Link, {
+    href: href,
+    onClick: onClick,
+    className: cn({
+      theme: theme
+    }, className)
+  });
+};
+
+StoreButton.propTypes = {
+  href: PropTypes.string.isRequired,
+  theme: PropTypes.oneOf(Object.values(Theme)).isRequired,
+  onClick: PropTypes.func,
+  className: PropTypes.string
+};
+export default StoreButton;

package/dist/es/components/Table/Table.css

@@ -5,149 +5,149 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-table {
-  font-family: inherit;
-  font-size: 15px;
-  line-height: 24px;
+.mfui-table {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+}
+.mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-track {
+  background-color: #EDEDED;
 }
-.mfui-beta-table__scroll {
+.mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #D8D8D8;
+}
+.mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-corner {
+  background-color: #FFFFFF;
+}
+.mfui-table:not(.mfui-table_touch) .mfui-table__scroll {
+  scrollbar-color: #D8D8D8 #EDEDED;
+  scrollbar-width: thin;
+}
+.mfui-table__scroll {
+  position: relative;
   display: grid;
   grid-template-columns: auto auto auto;
   max-width: 100%;
-  overflow: auto;
-  position: relative;
   border: 1px solid #D8D8D8;
+  overflow: auto;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-table__scroll {
+  .mfui-table__scroll {
     max-height: 500px;
   }
 }
-.mfui-beta-table__top-shadow {
+.mfui-table__top-shadow {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
-  width: 100%;
+  z-index: 2;
   display: block;
-  grid-column-end: 4;
   grid-column-start: 1;
-  z-index: 2;
-  margin-bottom: -6px;
+  grid-column-end: 4;
+  width: 100%;
   height: 6px;
+  margin-bottom: -6px;
   background: linear-gradient(359.94deg, rgba(0, 0, 0, 0.0001) 0.06%, rgba(0, 0, 0, 0.03) 38.08%, rgba(0, 0, 0, 0.08) 74.98%);
 }
-.mfui-beta-table__left-shadow {
+.mfui-table__left-shadow {
   position: -webkit-sticky;
   position: sticky;
-  z-index: 2;
-  width: 6px;
-  left: 0;
   top: 0;
   bottom: 0;
+  left: 0;
+  z-index: 2;
+  width: 6px;
   margin-right: -6px;
   background: -webkit-gradient(linear, right top, left top, color-stop(16.3%, rgba(0, 0, 0, 0.0001)), color-stop(51.81%, rgba(0, 0, 0, 0.03)), color-stop(86.27%, rgba(0, 0, 0, 0.08)));
   background: linear-gradient(270deg, rgba(0, 0, 0, 0.0001) 16.3%, rgba(0, 0, 0, 0.03) 51.81%, rgba(0, 0, 0, 0.08) 86.27%);
 }
-.mfui-beta-table__bottom-gradient {
-  display: block;
-  height: 48px;
-  width: 100%;
-  margin-top: -48px;
+.mfui-table__bottom-gradient {
   position: -webkit-sticky;
   position: sticky;
-  z-index: 1;
   bottom: 0;
+  z-index: 1;
+  display: block;
+  grid-column-start: 1;
+  grid-column-end: 4;
+  width: 100%;
+  height: 48px;
+  margin-top: -48px;
   background: -webkit-gradient(linear, left bottom, left top, color-stop(25%, #FFFFFF), to(rgba(255, 255, 255, 0)));
   background: linear-gradient(to top, #FFFFFF 25%, rgba(255, 255, 255, 0));
-  grid-column-end: 4;
-  grid-column-start: 1;
 }
-.mfui-beta-table__right-gradient {
-  display: block;
-  height: 100%;
-  width: 48px;
+.mfui-table__right-gradient {
   position: -webkit-sticky;
   position: sticky;
-  z-index: 1;
   right: 0;
+  z-index: 1;
+  display: block;
+  width: 48px;
+  height: 100%;
   margin-left: -48px;
   background: -webkit-gradient(linear, right top, left top, color-stop(25%, #FFFFFF), to(rgba(255, 255, 255, 0)));
   background: linear-gradient(to left, #FFFFFF 25%, rgba(255, 255, 255, 0));
 }
-.mfui-beta-table__table {
-  border-spacing: 0;
+.mfui-table__table {
   border-width: 0;
   border-collapse: separate;
+  border-spacing: 0;
   background-color: #FFFFFF;
 }
-.mfui-beta-table__cell {
-  padding: 24px;
+.mfui-table__cell {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  padding: 24px;
   background-color: #FFFFFF;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-table__cell {
-    padding-left: 16px;
+  .mfui-table__cell {
     padding-right: 16px;
+    padding-left: 16px;
   }
 }
-.mfui-beta-table__cell:first-child {
+.mfui-table__cell:first-child {
+  position: relative;
   left: 0;
-  min-width: 144px;
   width: 144px;
-  position: relative;
+  min-width: 144px;
   border-right: 1px solid #D8D8D8;
 }
-.mfui-beta-table__cell:not(:first-child) {
+.mfui-table__cell:not(:first-child) {
   max-width: 288px;
 }
-.mfui-beta-table__row_head .mfui-beta-table__cell {
+.mfui-table__row_head .mfui-table__cell {
   font-size: 12px;
   line-height: 16px;
   height: 72px;
-  background-color: #F6F6F6;
-  color: rgba(51, 51, 51, 0.5);
   padding-bottom: 12px;
+  color: rgba(51, 51, 51, 0.5);
   vertical-align: bottom;
+  background-color: #F6F6F6;
 }
-.mfui-beta-table__row:not(:last-child) .mfui-beta-table__cell {
+.mfui-table__row:not(:last-child) .mfui-table__cell {
   border-bottom: 1px solid #D8D8D8;
 }
-.mfui-beta-table_min-cell-size_small .mfui-beta-table__cell:not(:first-child) {
+.mfui-table_min-cell-size_small .mfui-table__cell:not(:first-child) {
   min-width: 72px;
 }
-.mfui-beta-table_min-cell-size_large .mfui-beta-table__cell:not(:first-child) {
+.mfui-table_min-cell-size_large .mfui-table__cell:not(:first-child) {
   min-width: 144px;
 }
-.mfui-beta-table_fix-column .mfui-beta-table__cell:first-child {
+.mfui-table_fix-column .mfui-table__cell:first-child {
   position: -webkit-sticky;
   position: sticky;
 }
-.mfui-beta-table_fix-column .mfui-beta-table__left-shadow {
+.mfui-table_fix-column .mfui-table__left-shadow {
   left: 144px;
 }
-.mfui-beta-table_fix-column .mfui-beta-table__bottom-gradient {
+.mfui-table_fix-column .mfui-table__bottom-gradient {
   z-index: 3;
 }
-.mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar-track {
-  background-color: #EDEDED;
-}
-.mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background-color: #D8D8D8;
-}
-.mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar-corner {
-  background-color: #FFFFFF;
-}
-.mfui-beta-table:not(.mfui-beta-table_touch) .mfui-beta-table__scroll {
-  scrollbar-color: #D8D8D8 #EDEDED;
-  scrollbar-width: thin;
-}

package/dist/es/components/Table/Table.js

@@ -1,12 +1,12 @@
 import "core-js/modules/es.array.map";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import throttle from 'lodash.throttle';
+import { cnCreate, detectTouch } from '@megafon/ui-helpers';
 import convert from 'htmr';
-import { cnCreate, detectTouch } from '@megafon/ui-core';
+import throttle from 'lodash.throttle';
+import * as PropTypes from 'prop-types';
 import "./Table.css";
-var cn = cnCreate('mfui-beta-table');
+var cn = cnCreate('mfui-table');
 
 var Table = function Table(_ref) {
   var className = _ref.className,

package/dist/es/components/Table/TableRow.js

@@ -7,6 +7,7 @@ var TableRow = function TableRow(_ref) {
 };
 
 TableRow.propTypes = {
+  // eslint-disable-next-line react/no-unused-prop-types
   head: PropTypes.bool,
   children: PropTypes.arrayOf(PropTypes.element.isRequired).isRequired
 };

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

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { Tabs } from '@megafon/ui-core';
-declare type TabsPropsType = React.ComponentProps<typeof Tabs>;
+declare type TabsPropsType = React.ComponentProps<typeof Tabs> & {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+};
 declare const TabsBox: React.FC<TabsPropsType>;
 export default TabsBox;

package/dist/es/components/TabsBox/TabsBox.js

@@ -1,9 +1,30 @@
+import "core-js/modules/es.symbol";
+import "core-js/modules/es.array.index-of";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
 import * as React from 'react';
-import { cnCreate, Tabs } from '@megafon/ui-core';
-var cn = cnCreate('mfui-beta-tabs-box');
+import { Tabs } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+var cn = cnCreate('mfui-tabs-box');
+
+var TabsBox = function TabsBox(_a) {
+  var rootRef = _a.rootRef,
+      props = __rest(_a, ["rootRef"]);
 
-var TabsBox = function TabsBox(props) {
   return /*#__PURE__*/React.createElement("div", {
+    ref: rootRef,
     className: cn()
   }, /*#__PURE__*/React.createElement(Tabs, props));
 };

package/dist/es/components/TextBox/TextBox.css

@@ -5,6 +5,12 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-text-box_text-center {
+.mfui-text-box__content :first-child {
+  margin-top: 0 !important;
+}
+.mfui-text-box__content :last-child {
+  margin-bottom: 0 !important;
+}
+.mfui-text-box_text-center {
   text-align: center;
 }

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

@@ -3,6 +3,14 @@ import './TextBox.less';
 export interface ITextBoxProps {
     /** Центрирование текста по горизонтали */
     textCenter?: boolean;
+    /** Центрирование компонента по горизонтали при ограниченной ширине */
+    centeringWithLimitedWidth?: boolean;
+    /** Растягивание компонента на всю доступную ширину */
+    isFullWidth?: boolean;
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
 }
 declare const TextBox: React.FC<ITextBoxProps>;
 export default TextBox;

package/dist/es/components/TextBox/TextBox.js

@@ -1,21 +1,53 @@
 import * as React from 'react';
+import { Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
-import { cnCreate } from '@megafon/ui-core';
 import "./TextBox.css";
-var cn = cnCreate('mfui-beta-text-box');
+var cn = cnCreate('mfui-text-box');
 
 var TextBox = function TextBox(_ref) {
   var _ref$textCenter = _ref.textCenter,
       textCenter = _ref$textCenter === void 0 ? false : _ref$textCenter,
+      _ref$centeringWithLim = _ref.centeringWithLimitedWidth,
+      centeringWithLimitedWidth = _ref$centeringWithLim === void 0 ? false : _ref$centeringWithLim,
+      _ref$isFullWidth = _ref.isFullWidth,
+      isFullWidth = _ref$isFullWidth === void 0 ? true : _ref$isFullWidth,
+      rootRef = _ref.rootRef,
+      className = _ref.className,
       children = _ref.children;
+
+  var renderContent = function renderContent() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('content')
+    }, children);
+  };
+
+  var renderTextBoxWithGrid = function renderTextBoxWithGrid() {
+    return /*#__PURE__*/React.createElement(Grid, {
+      hAlign: centeringWithLimitedWidth ? 'center' : 'left'
+    }, /*#__PURE__*/React.createElement(GridColumn, {
+      wide: "8",
+      desktop: "10",
+      tablet: "12",
+      mobile: "12"
+    }, renderContent()));
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: cn({
       'text-center': textCenter
-    })
-  }, children);
+    }, [className]),
+    ref: rootRef
+  }, isFullWidth ? renderContent() : renderTextBoxWithGrid());
 };
 
 TextBox.propTypes = {
-  textCenter: PropTypes.bool
+  textCenter: PropTypes.bool,
+  centeringWithLimitedWidth: PropTypes.bool,
+  isFullWidth: PropTypes.bool,
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  className: PropTypes.string
 };
 export default TextBox;

package/dist/es/components/TextBox/TextBoxPicture.css

@@ -0,0 +1,24 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-text-box-picture_margin_default {
+  margin: 16px 0;
+}
+.mfui-text-box-picture_margin_big-top {
+  margin: 24px 0 16px;
+}
+.mfui-text-box-picture_margin_big-bottom {
+  margin: 16px 0 24px;
+}
+.mfui-text-box-picture_margin_big-vertical {
+  margin: 24px 0;
+}
+.mfui-text-box-picture__img {
+  display: block;
+  max-width: 100%;
+  border: 1px solid #EDEDED;
+}

package/dist/es/components/TextBox/TextBoxPicture.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import './TextBoxPicture.less';
+export declare const pictureMarginTypes: {
+    readonly DEFAULT: "default";
+    readonly BIG_TOP: "big-top";
+    readonly BIG_BOTTOM: "big-bottom";
+    readonly BIG_VERTICAL: "big-vertical";
+};
+declare type PictureMarginTypesType = typeof pictureMarginTypes[keyof typeof pictureMarginTypes];
+export interface ITextBoxPictureProps {
+    /** URL картинки */
+    url: string;
+    /** Значение вертикальных отступов */
+    margin?: PictureMarginTypesType;
+}
+declare const TextBoxPicture: React.FC<ITextBoxPictureProps>;
+export default TextBoxPicture;

package/dist/es/components/TextBox/TextBoxPicture.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import "./TextBoxPicture.css";
+export var pictureMarginTypes = {
+  DEFAULT: 'default',
+  BIG_TOP: 'big-top',
+  BIG_BOTTOM: 'big-bottom',
+  BIG_VERTICAL: 'big-vertical'
+};
+var cn = cnCreate('mfui-text-box-picture');
+
+var TextBoxPicture = function TextBoxPicture(_ref) {
+  var url = _ref.url,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? pictureMarginTypes.DEFAULT : _ref$margin;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      margin: margin
+    })
+  }, /*#__PURE__*/React.createElement("img", {
+    className: cn('img'),
+    src: url,
+    alt: ""
+  }));
+};
+
+TextBoxPicture.propTypes = {
+  url: PropTypes.string.isRequired,
+  margin: PropTypes.oneOf([pictureMarginTypes.DEFAULT, pictureMarginTypes.BIG_TOP, pictureMarginTypes.BIG_BOTTOM, pictureMarginTypes.BIG_VERTICAL])
+};
+export default TextBoxPicture;

package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.css

@@ -5,16 +5,27 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-title-description-box {
+.mfui-title-description-box {
   font-family: inherit;
   color: #333333;
 }
-.mfui-beta-title-description-box__item:not(:last-child) {
+.mfui-title-description-box__item_header {
+  white-space: pre-wrap;
+}
+.mfui-title-description-box__item:not(:last-child) {
   margin-bottom: 16px;
 }
-.mfui-beta-title-description-box_text-color_white {
+.mfui-title-description-box_text-color_white {
   color: #FFFFFF;
 }
-.mfui-beta-title-description-box_h-align_center {
+.mfui-title-description-box_h-align_center {
   text-align: center;
 }
+.mfui-title-description-box__description {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}
+.mfui-title-description-box__description :last-child {
+  margin-bottom: 0 !important;
+}

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

@@ -1,12 +1,18 @@
 import * as React from 'react';
 import './TitleDescriptionBox.less';
 export interface ITitleDescriptionBoxProps {
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Заголовок */
-    title?: string;
+    title?: string | React.ReactNode[] | React.ReactNode;
     /** Описание */
-    description?: string;
+    description?: string | React.ReactNode[] | React.ReactNode;
     /** Цвет текста */
     textColor?: 'white';
     /** Горизонтальное выравнивание */

package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.js

@@ -1,42 +1,62 @@
 import "core-js/modules/es.symbol";
 import "core-js/modules/es.symbol.description";
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
+import { Header, Paragraph, Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
-import { cnCreate, Header, Paragraph, Grid, GridColumn } from '@megafon/ui-core';
 import "./TitleDescriptionBox.css";
-var cn = cnCreate('mfui-beta-title-description-box');
+var cn = cnCreate('mfui-title-description-box');
 
 var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
-  var title = _ref.title,
+  var dataAttrs = _ref.dataAttrs,
+      title = _ref.title,
       description = _ref.description,
       textColor = _ref.textColor,
       hAlign = _ref.hAlign,
+      rootRef = _ref.rootRef,
       className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
+  var renderDescription = React.useCallback(function () {
+    if (typeof description === 'string') {
+      return /*#__PURE__*/React.createElement(Paragraph, {
+        className: cn('item'),
+        hasMargin: false,
+        color: "inherit"
+      }, description);
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('description')
+    }, description);
+  }, [description]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
     className: cn({
       'h-align': hAlign,
       'text-color': textColor
-    }, className)
-  }, /*#__PURE__*/React.createElement(Grid, {
+    }, className),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(Grid, {
     hAlign: hAlign
   }, /*#__PURE__*/React.createElement(GridColumn, {
     wide: "8",
     desktop: "10"
   }, title && /*#__PURE__*/React.createElement(Header, {
-    className: cn('item'),
+    className: cn('item', {
+      header: true
+    }),
     as: "h2",
     color: "inherit"
-  }, title), description && /*#__PURE__*/React.createElement(Paragraph, {
-    className: cn('item'),
-    hasMargin: false,
-    color: "inherit"
-  }, description))));
+  }, title), description && renderDescription())));
 };
 
 TitleDescriptionBox.propTypes = {
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   className: PropTypes.string,
-  title: PropTypes.string,
-  description: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]),
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]),
   hAlign: PropTypes.oneOf(['center']),
   textColor: PropTypes.oneOf(['white'])
 };