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

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

@@ -0,0 +1,153 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-table {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+}
+.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;
+}
+.mfui-beta-table__scroll {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto auto auto;
+  max-width: 100%;
+  border: 1px solid #D8D8D8;
+  overflow: auto;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-beta-table__scroll {
+    max-height: 500px;
+  }
+}
+.mfui-beta-table__top-shadow {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: block;
+  grid-column-start: 1;
+  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 {
+  position: -webkit-sticky;
+  position: sticky;
+  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 {
+  position: -webkit-sticky;
+  position: sticky;
+  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));
+}
+.mfui-beta-table__right-gradient {
+  position: -webkit-sticky;
+  position: sticky;
+  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-width: 0;
+  border-collapse: separate;
+  border-spacing: 0;
+  background-color: #FFFFFF;
+}
+.mfui-beta-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-right: 16px;
+    padding-left: 16px;
+  }
+}
+.mfui-beta-table__cell:first-child {
+  position: relative;
+  left: 0;
+  width: 144px;
+  min-width: 144px;
+  border-right: 1px solid #D8D8D8;
+}
+.mfui-beta-table__cell:not(:first-child) {
+  max-width: 288px;
+}
+.mfui-beta-table__row_head .mfui-beta-table__cell {
+  font-size: 12px;
+  line-height: 16px;
+  height: 72px;
+  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 {
+  border-bottom: 1px solid #D8D8D8;
+}
+.mfui-beta-table_min-cell-size_small .mfui-beta-table__cell:not(:first-child) {
+  min-width: 72px;
+}
+.mfui-beta-table_min-cell-size_large .mfui-beta-table__cell:not(:first-child) {
+  min-width: 144px;
+}
+.mfui-beta-table_fix-column .mfui-beta-table__cell:first-child {
+  position: -webkit-sticky;
+  position: sticky;
+}
+.mfui-beta-table_fix-column .mfui-beta-table__left-shadow {
+  left: 144px;
+}
+.mfui-beta-table_fix-column .mfui-beta-table__bottom-gradient {
+  z-index: 3;
+}

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import './Table.less';
+import { ITableRow } from './TableRow';
+export interface ITable {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Фиксация первой колонки */
+    fixColumn?: boolean;
+    /** Минимальный размер ячеек */
+    minCellSize?: 'small' | 'large';
+    children: Array<React.ReactElement<ITableRow>>;
+}
+declare const Table: React.FC<ITable>;
+export default Table;

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

@@ -0,0 +1,124 @@
+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 convert from 'htmr';
+import { cnCreate, detectTouch } from '@megafon/ui-helpers';
+import "./Table.css";
+var cn = cnCreate('mfui-beta-table');
+
+var Table = function Table(_ref) {
+  var className = _ref.className,
+      _ref$fixColumn = _ref.fixColumn,
+      fixColumn = _ref$fixColumn === void 0 ? true : _ref$fixColumn,
+      _ref$minCellSize = _ref.minCellSize,
+      minCellSize = _ref$minCellSize === void 0 ? 'large' : _ref$minCellSize,
+      children = _ref.children;
+  var scrollRef = React.useRef(null);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isTopShadow = _React$useState2[0],
+      setTopShadow = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isLeftShadow = _React$useState4[0],
+      setLeftShadow = _React$useState4[1];
+
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      isRightGradient = _React$useState6[0],
+      setRightGradient = _React$useState6[1];
+
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      isBottomGradient = _React$useState8[0],
+      setBottomGradient = _React$useState8[1];
+
+  var _React$useState9 = React.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      isTouchDevice = _React$useState10[0],
+      setTouchDevice = _React$useState10[1];
+
+  var handleTableScroll = React.useCallback(function () {
+    var scrollNode = scrollRef.current;
+
+    if (!scrollNode) {
+      return;
+    }
+
+    var scrollHeight = scrollNode.scrollHeight,
+        clientHeight = scrollNode.clientHeight,
+        scrollTop = scrollNode.scrollTop,
+        scrollWidth = scrollNode.scrollWidth,
+        clientWidth = scrollNode.clientWidth,
+        scrollLeft = scrollNode.scrollLeft;
+    var deltaHeight = scrollHeight - clientHeight;
+    var deltaWidth = scrollWidth - clientWidth;
+    setRightGradient(deltaWidth !== Math.floor(scrollLeft));
+    setBottomGradient(deltaHeight !== Math.floor(scrollTop));
+    setTopShadow(!!scrollTop);
+    setLeftShadow(!!scrollLeft);
+  }, []);
+  React.useEffect(function () {
+    var handleResize = throttle(handleTableScroll, 300);
+    handleTableScroll();
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [handleTableScroll]);
+  React.useEffect(function () {
+    setTouchDevice(detectTouch());
+  }, []);
+
+  var renderRows = function renderRows() {
+    return React.Children.map(children, function (_ref2) {
+      var _ref2$props = _ref2.props,
+          cells = _ref2$props.children,
+          head = _ref2$props.head;
+      return /*#__PURE__*/React.createElement("tr", {
+        className: cn('row', {
+          head: head
+        })
+      }, React.Children.map(cells, function (_ref3) {
+        var cell = _ref3.props.children;
+        return /*#__PURE__*/React.createElement("td", {
+          className: cn('cell')
+        }, typeof cell === 'string' ? convert(cell) : cell);
+      }));
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      'fix-column': fixColumn,
+      'min-cell-size': minCellSize,
+      touch: isTouchDevice
+    }, [className])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('scroll'),
+    ref: scrollRef,
+    onScroll: handleTableScroll
+  }, isTopShadow && /*#__PURE__*/React.createElement("div", {
+    className: cn('top-shadow')
+  }), isLeftShadow && /*#__PURE__*/React.createElement("div", {
+    className: cn('left-shadow')
+  }), /*#__PURE__*/React.createElement("table", {
+    className: cn('table')
+  }, /*#__PURE__*/React.createElement("tbody", null, renderRows())), isRightGradient && /*#__PURE__*/React.createElement("div", {
+    className: cn('right-gradient')
+  }), isBottomGradient && /*#__PURE__*/React.createElement("div", {
+    className: cn('bottom-gradient')
+  })));
+};
+
+Table.propTypes = {
+  className: PropTypes.string,
+  fixColumn: PropTypes.bool,
+  minCellSize: PropTypes.oneOf(['small', 'large']),
+  children: PropTypes.arrayOf(PropTypes.element.isRequired).isRequired
+};
+export default Table;

package/dist/es/components/Table/TableCell.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface ITableCell {
+    children?: React.ReactNode;
+}
+declare const TableCell: React.FC<ITableCell>;
+export default TableCell;

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+
+var TableCell = function TableCell(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children && children);
+};
+
+TableCell.propTypes = {
+  children: PropTypes.node
+};
+export default TableCell;

package/dist/es/components/Table/TableRow.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ITableCell } from './TableCell';
+export interface ITableRow {
+    /** Ряд таблицы как заголовок */
+    head?: boolean;
+    children: Array<React.ReactElement<ITableCell>>;
+}
+declare const TableRow: React.FC<ITableRow>;
+export default TableRow;

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+
+var TableRow = function TableRow(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+
+TableRow.propTypes = {
+  head: PropTypes.bool,
+  children: PropTypes.arrayOf(PropTypes.element.isRequired).isRequired
+};
+export default TableRow;

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

@@ -0,0 +1,2 @@
+import { Tab } from '@megafon/ui-core';
+export default Tab;

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

@@ -0,0 +1,2 @@
+import { Tab } from '@megafon/ui-core';
+export default Tab;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Tabs } from '@megafon/ui-core';
+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

@@ -0,0 +1,32 @@
+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 { Tabs } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+var cn = cnCreate('mfui-beta-tabs-box');
+
+var TabsBox = function TabsBox(_a) {
+  var rootRef = _a.rootRef,
+      props = __rest(_a, ["rootRef"]);
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: rootRef,
+    className: cn()
+  }, /*#__PURE__*/React.createElement(Tabs, props));
+};
+
+export default TabsBox;

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

@@ -0,0 +1,16 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-text-box__content :first-child {
+  margin-top: 0 !important;
+}
+.mfui-beta-text-box__content :last-child {
+  margin-bottom: 0 !important;
+}
+.mfui-beta-text-box_text-center {
+  text-align: center;
+}

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+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

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { cnCreate } from '@megafon/ui-helpers';
+import { Grid, GridColumn } from '@megafon/ui-core';
+import "./TextBox.css";
+var cn = cnCreate('mfui-beta-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
+    }, [className]),
+    ref: rootRef
+  }, isFullWidth ? renderContent() : renderTextBoxWithGrid());
+};
+
+TextBox.propTypes = {
+  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-beta-text-box-picture_margin_default {
+  margin: 16px 0;
+}
+.mfui-beta-text-box-picture_margin_big-top {
+  margin: 24px 0 16px;
+}
+.mfui-beta-text-box-picture_margin_big-bottom {
+  margin: 16px 0 24px;
+}
+.mfui-beta-text-box-picture_margin_big-vertical {
+  margin: 24px 0;
+}
+.mfui-beta-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,31 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { cnCreate } from '@megafon/ui-helpers';
+import "./TextBoxPicture.css";
+export var pictureMarginTypes = {
+  DEFAULT: 'default',
+  BIG_TOP: 'big-top',
+  BIG_BOTTOM: 'big-bottom',
+  BIG_VERTICAL: 'big-vertical'
+};
+var cn = cnCreate('mfui-beta-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
+  }));
+};
+
+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

@@ -9,6 +9,9 @@ h5 {
   font-family: inherit;
   color: #333333;
 }
+.mfui-beta-title-description-box__item_header {
+  white-space: pre-wrap;
+}
 .mfui-beta-title-description-box__item:not(:last-child) {
   margin-bottom: 16px;
 }
@@ -18,3 +21,11 @@ h5 {
 .mfui-beta-title-description-box_h-align_center {
   text-align: center;
 }
+.mfui-beta-title-description-box__description {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}
+.mfui-beta-title-description-box__description :last-child {
+  margin-bottom: 0 !important;
+}

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

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

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 * as PropTypes from 'prop-types';
-import { cnCreate, Header, Paragraph, Grid, GridColumn } from '@megafon/ui-core';
+import { Header, Paragraph, Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import "./TitleDescriptionBox.css";
 var cn = cnCreate('mfui-beta-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'])
 };