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

package/dist/es/components/PictureWithDescription/PictureWithDescription.css

@@ -6,7 +6,7 @@ h5 {
   margin: 0;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-picture-with-description {
+  .mfui-picture-with-description {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -18,48 +18,63 @@ h5 {
             justify-content: center;
   }
 }
-.mfui-beta-picture-with-description__picture {
+.mfui-picture-with-description__title {
+  margin-bottom: 24px;
+}
+.mfui-picture-with-description__picture {
   -ms-flex-item-align: start;
       align-self: flex-start;
   overflow: hidden;
   text-align: center;
 }
 @media screen and (max-width: 1023px) {
-  .mfui-beta-picture-with-description__picture {
+  .mfui-picture-with-description__picture {
     margin: 0 auto 32px;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-picture-with-description__picture {
-    width: 50%;
+  .mfui-picture-with-description__picture {
     -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
             order: 2;
+    width: 50%;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-picture-with-description__picture_align_left {
+  .mfui-picture-with-description__picture_align_left {
     -webkit-box-ordinal-group: 1;
         -ms-flex-order: 0;
             order: 0;
     margin-right: 20px;
   }
 }
-.mfui-beta-picture-with-description__img {
+.mfui-picture-with-description__img {
   width: 100%;
   max-width: 550px;
   height: 100%;
 }
+.mfui-picture-with-description__content :first-child {
+  margin-top: 0 !important;
+}
+.mfui-picture-with-description__content :last-child {
+  margin-bottom: 0 !important;
+}
 @media screen and (min-width: 1024px) {
-  .mfui-beta-picture-with-description__articles {
-    width: 50%;
+  .mfui-picture-with-description__articles {
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
             order: 1;
+    width: 50%;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-picture-with-description__articles_text-top-align {
+    -ms-flex-item-align: start;
+        align-self: flex-start;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-picture-with-description__articles_align_right {
+  .mfui-picture-with-description__articles_align_right {
     margin-right: 20px;
   }
 }

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

@@ -6,10 +6,23 @@ export declare const pictureAlignTypes: {
 };
 declare type PictureAlignTypesType = typeof pictureAlignTypes[keyof typeof pictureAlignTypes];
 export interface IPictureWithDescriptionProps {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        title?: string;
+    };
+    /** Заголовок */
+    title?: string | React.ReactNode | React.ReactNode[];
     /** Url изображения */
     pictureUrl: string;
     /** Расположение изображения */
     pictureAlign?: PictureAlignTypesType;
+    /** Выравнивание текста по верхнему краю */
+    isTextTopAlign?: boolean;
 }
 declare const PictureWithDescription: React.FC<IPictureWithDescriptionProps>;
 export default PictureWithDescription;

package/dist/es/components/PictureWithDescription/PictureWithDescription.js

@@ -1,20 +1,28 @@
 import * as React from 'react';
+import { Header } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import "./PictureWithDescription.css";
-import { cnCreate } from '@megafon/ui-core';
 export var pictureAlignTypes = {
   LEFT: 'left',
   RIGHT: 'right'
 };
-var cn = cnCreate('mfui-beta-picture-with-description');
+var cn = cnCreate('mfui-picture-with-description');
 
 var PictureWithDescription = function PictureWithDescription(_ref) {
-  var pictureUrl = _ref.pictureUrl,
+  var rootRef = _ref.rootRef,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      title = _ref.title,
+      pictureUrl = _ref.pictureUrl,
       _ref$pictureAlign = _ref.pictureAlign,
       pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
+      isTextTopAlign = _ref.isTextTopAlign,
       children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: cn()
+    className: cn([className, classes.root]),
+    ref: rootRef
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('picture', {
       align: pictureAlign
@@ -25,13 +33,29 @@ var PictureWithDescription = function PictureWithDescription(_ref) {
     alt: ""
   })), /*#__PURE__*/React.createElement("div", {
     className: cn('articles', {
-      align: pictureAlign
+      align: pictureAlign,
+      'text-top-align': isTextTopAlign
     })
-  }, children));
+  }, !!title && /*#__PURE__*/React.createElement(Header, {
+    className: cn('title', [classes.title]),
+    as: "h2"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, children)));
 };
 
 PictureWithDescription.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    title: PropTypes.string
+  }),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   pictureUrl: PropTypes.string.isRequired,
-  pictureAlign: PropTypes.oneOf([pictureAlignTypes.LEFT, pictureAlignTypes.RIGHT])
+  pictureAlign: PropTypes.oneOf([pictureAlignTypes.LEFT, pictureAlignTypes.RIGHT]),
+  isTextTopAlign: PropTypes.bool
 };
 export default PictureWithDescription;

package/dist/es/components/Property/Property.css

@@ -5,113 +5,121 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-property {
-  width: 100%;
-  padding: 26px 24px;
+.mfui-property__wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  padding: 24px 0;
   border-top: 1px solid #D8D8D8;
-  position: relative;
-}
-.mfui-beta-property_border-bottom {
-  border-bottom: 1px solid #D8D8D8;
 }
-@media screen and (max-width: 767px) {
-  .mfui-beta-property {
-    padding: 24px 0;
+@media screen and (min-width: 1280px) {
+  .mfui-property__wrapper {
+    padding: 26px 0;
   }
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-property {
-    padding: 24px;
-  }
+.mfui-property_border-bottom .mfui-property__wrapper {
+  border-bottom: 1px solid #D8D8D8;
 }
-.mfui-beta-property__item {
+.mfui-property__content {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: baseline;
-      -ms-flex-align: baseline;
-          align-items: baseline;
 }
-.mfui-beta-property__item_multirow:first-child {
-  margin-bottom: 10px;
+.mfui-property__item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
 }
-.mfui-beta-property__icon {
+.mfui-property__icon {
+  display: inline-block;
   width: 24px;
   height: 24px;
-  overflow: hidden;
   margin-right: 9px;
   margin-left: 1px;
-  display: inline-block;
+  overflow: hidden;
   vertical-align: bottom;
 }
-.mfui-beta-property__badge {
-  border-radius: 2px;
-  font-size: 12px;
+.mfui-property__badge {
   padding: 2px 8px;
+  border-radius: 2px;
   color: #FFFFFF;
+  font-size: 12px;
   background: #FFA717;
 }
-.mfui-beta-property__inner {
-  width: 431px;
-  margin-right: 115px;
-}
-@media screen and (max-width: 767px) {
-  .mfui-beta-property__inner {
-    width: 165px;
-    margin-right: 16px;
-  }
+.mfui-property__inner {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  padding-right: 20px;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-property__inner {
-    width: 360px;
-    margin-right: 135px;
+  .mfui-property__inner {
+    padding-right: 77px;
   }
 }
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-property__inner {
-    width: 415px;
-    margin-right: 96px;
+@media screen and (max-width: 767px) {
+  .mfui-property__inner {
+    padding-right: 8px;
   }
 }
-.mfui-beta-property__merged-value {
-  height: calc(100% - 26px * 2);
+.mfui-property__items-wrapper {
+  width: 100%;
+}
+.mfui-property__value-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  width: 35%;
+}
+@media screen and (max-width: 479px) {
+  .mfui-property__value-wrapper {
+    width: auto;
+    padding-left: 10px;
+  }
+}
+.mfui-property__value-wrapper_merged {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  position: absolute;
-  left: calc(431px + 24px + 20px);
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
   border-left: 1px solid #D8D8D8;
-  padding-left: 94px;
 }
-@media screen and (max-width: 767px) {
-  .mfui-beta-property__merged-value {
-    height: calc(100% - 24px * 2);
-    left: calc(165px + 0 + 8px);
-    padding-left: 7px;
-  }
+.mfui-property__desc {
+  margin-top: 8px;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-property__merged-value {
-    height: calc(100% - 24px * 2);
-    left: calc(360px + 24px + 77px);
-    padding-left: 58px;
-  }
+.mfui-property__item + .mfui-property__item {
+  margin-top: 16px;
 }
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-property__merged-value {
-    left: calc(415px + 24px + 20px);
-    padding-left: 75px;
+.mfui-property__value {
+  max-width: 234px;
+  white-space: pre-line;
+  text-align: right;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-property__value {
+    font-size: 20px;
+    line-height: 28px;
   }
 }
-.mfui-beta-property__desc {
-  margin-top: 8px;
-}
-.mfui-beta-property__item ~ .mfui-beta-property__item {
-  margin-top: 16px;
+@media screen and (max-width: 767px) {
+  .mfui-property__value {
+    font-size: 15px;
+    line-height: 24px;
+    font-weight: 500;
+  }
 }

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

@@ -1,14 +1,33 @@
-import * as React from 'react';
+import React, { Ref } from 'react';
 import './Property.less';
 import { Item } from './types';
 export interface IProperty {
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Массив с данными для строки */
     items: Item[];
+    /** Дополнительный класс для основного контейнера */
     className?: string;
+    /** Текст для бейджа */
     badge?: string;
+    /** Наличие нижней границы */
     borderBottom?: boolean;
+    /** Единое значение для всей строки */
     mergedValue?: string;
+    /** Иконка для строки */
     icon?: React.ReactNode;
-    multirow?: boolean;
+    /** Растягивание компонента на всю доступную ширину */
+    fullWidth?: boolean;
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        title?: string;
+        openedDescription?: string;
+        toggleDescription?: string;
+    };
 }
 declare const Property: React.FC<IProperty>;
 export default Property;

package/dist/es/components/Property/Property.js

@@ -1,15 +1,18 @@
 import "core-js/modules/es.symbol";
 import "core-js/modules/es.symbol.description";
 import "core-js/modules/es.array.map";
-import * as React from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Header, Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
-import { Header, cnCreate, convert } from '@megafon/ui-core';
 import "./Property.css";
 import PropertyDescription from "./PropertyDescription";
-var cn = cnCreate('mfui-beta-property');
+var cn = cnCreate('mfui-property');
 
 var Property = function Property(_ref) {
-  var items = _ref.items,
+  var rootRef = _ref.rootRef,
+      items = _ref.items,
       className = _ref.className,
       _ref$badge = _ref.badge,
       badge = _ref$badge === void 0 ? '' : _ref$badge,
@@ -18,58 +21,95 @@ var Property = function Property(_ref) {
       borderBottom = _ref$borderBottom === void 0 ? false : _ref$borderBottom,
       _ref$mergedValue = _ref.mergedValue,
       mergedValue = _ref$mergedValue === void 0 ? '' : _ref$mergedValue,
-      _ref$multirow = _ref.multirow,
-      multirow = _ref$multirow === void 0 ? false : _ref$multirow;
+      _ref$fullWidth = _ref.fullWidth,
+      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
   var renderTitle = React.useCallback(function (title) {
     return title && title.map(function (titleItem, i) {
       return /*#__PURE__*/React.createElement(Header, {
-        as: 'h5',
-        key: i
+        as: "h5",
+        key: i,
+        className: classes.title
       }, icon && i === 0 && /*#__PURE__*/React.createElement("div", {
         className: cn('icon')
-      }, icon), convert(titleItem));
+      }, icon), titleItem);
     });
-  }, []);
+  }, [classes.title, icon]);
   var renderDescription = React.useCallback(function (description) {
-    return description && description.map(function (descriptionItem, j) {
+    return description && description.map(function (_ref2, j) {
+      var value = _ref2.value,
+          isCollapsible = _ref2.isCollapsible;
       return /*#__PURE__*/React.createElement("div", {
         className: cn('desc'),
         key: j
-      }, /*#__PURE__*/React.createElement(PropertyDescription, descriptionItem));
+      }, /*#__PURE__*/React.createElement(PropertyDescription, {
+        value: value,
+        isCollapsible: isCollapsible,
+        classes: {
+          open: classes.openedDescription,
+          toggle: classes.toggleDescription
+        }
+      }));
     });
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  }, [classes.openedDescription, classes.toggleDescription]);
+  var getColumnConfig = React.useCallback(function () {
+    return fullWidth ? {
+      all: '12'
+    } : {
+      wide: '8',
+      desktop: '10',
+      tablet: '12',
+      mobile: '12'
+    };
+  }, [fullWidth]);
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
       'border-bottom': borderBottom
-    }, [className])
-  }, badge && /*#__PURE__*/React.createElement("span", {
+    }, [className]),
+    ref: rootRef
+  }, filterDataAttrs(dataAttrs)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridColumn, getColumnConfig(), /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, badge && /*#__PURE__*/React.createElement("div", {
+    className: cn('badge-wrapper')
+  }, /*#__PURE__*/React.createElement("span", {
     className: cn('badge')
-  }, badge), items.map(function (_ref2, i) {
-    var title = _ref2.title,
-        value = _ref2.value,
-        description = _ref2.description;
+  }, badge)), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('items-wrapper')
+  }, items.map(function (_ref3, i) {
+    var title = _ref3.title,
+        value = _ref3.value,
+        description = _ref3.description;
     return /*#__PURE__*/React.createElement("div", {
-      className: cn('item', {
-        multirow: multirow
-      }),
+      className: cn('item'),
       key: i
     }, /*#__PURE__*/React.createElement("div", {
       className: cn('inner')
-    }, renderTitle(title), renderDescription(description)), value && !mergedValue && /*#__PURE__*/React.createElement(Header, {
-      as: "h3"
-    }, value), mergedValue && i === 0 && /*#__PURE__*/React.createElement("div", {
-      className: cn('merged-value')
-    }, /*#__PURE__*/React.createElement(Header, {
-      as: "h3"
-    }, mergedValue)));
-  }));
+    }, renderTitle(title), renderDescription(description)), !mergedValue && /*#__PURE__*/React.createElement("div", {
+      className: cn('value-wrapper')
+    }, value && /*#__PURE__*/React.createElement("span", {
+      className: cn('value')
+    }, value)));
+  })), mergedValue && /*#__PURE__*/React.createElement("div", {
+    className: cn('value-wrapper', {
+      merged: true
+    })
+  }, /*#__PURE__*/React.createElement(Header, {
+    as: "h3"
+  }, mergedValue)))))));
 };
 
 Property.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   items: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.arrayOf(PropTypes.string.isRequired),
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]),
     description: PropTypes.arrayOf(PropTypes.shape({
-      value: PropTypes.arrayOf(PropTypes.string).isRequired,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]).isRequired,
       isCollapsible: PropTypes.bool
     })),
     value: PropTypes.string
@@ -79,6 +119,12 @@ Property.propTypes = {
   borderBottom: PropTypes.bool,
   mergedValue: PropTypes.string,
   icon: PropTypes.node,
-  multirow: PropTypes.bool
+  fullWidth: PropTypes.bool,
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  classes: PropTypes.shape({
+    title: PropTypes.string,
+    openedDescription: PropTypes.string,
+    toggleDescription: PropTypes.string
+  })
 };
 export default Property;

package/dist/es/components/Property/PropertyDescription.css

@@ -5,13 +5,13 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-property-description__collapse {
-  font-size: 12px;
+.mfui-property-description__collapse {
   color: #34AAF2;
+  font-size: 12px;
   -webkit-text-decoration: underline dashed #34AAF2;
           text-decoration: underline dashed #34AAF2;
   cursor: pointer;
 }
-.mfui-beta-property-description__content-inner {
+.mfui-property-description__content-inner {
   margin-top: 8px;
 }

package/dist/es/components/Property/PropertyDescription.js

@@ -1,15 +1,17 @@
-import "core-js/modules/es.array.map";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
+import { Collapse } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
-import { cnCreate, Collapse, Paragraph, convert } from '@megafon/ui-core';
 import "./PropertyDescription.css";
-var cn = cnCreate('mfui-beta-property-description');
+var cn = cnCreate('mfui-property-description');
 
 var PropertyDescription = function PropertyDescription(_ref) {
   var value = _ref.value,
       _ref$isCollapsible = _ref.isCollapsible,
-      isCollapsible = _ref$isCollapsible === void 0 ? false : _ref$isCollapsible;
+      isCollapsible = _ref$isCollapsible === void 0 ? false : _ref$isCollapsible,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -19,35 +21,31 @@ var PropertyDescription = function PropertyDescription(_ref) {
   var handleClickDesc = React.useCallback(function () {
     return setIsOpened(!isOpened);
   }, [isOpened]);
-  var renderDescriptionItems = React.useCallback(function () {
-    return value.map(function (valueItem, i) {
-      return /*#__PURE__*/React.createElement(Paragraph, {
-        hasMargin: false,
-        key: i
-      }, convert(valueItem));
-    });
-  }, [value]);
 
   if (isCollapsible) {
     return /*#__PURE__*/React.createElement("div", {
-      className: cn()
+      className: cn([isOpened ? classes.open : undefined])
     }, /*#__PURE__*/React.createElement("span", {
-      className: cn('collapse'),
+      className: cn('collapse', classes.toggle),
       onClick: handleClickDesc
     }, isOpened ? 'Скрыть' : 'Подробнее'), /*#__PURE__*/React.createElement(Collapse, {
       className: cn('content'),
       classNameContainer: cn('content-inner'),
       isOpened: isOpened
-    }, renderDescriptionItems()));
-  } else {
-    return /*#__PURE__*/React.createElement("div", {
-      className: cn()
-    }, renderDescriptionItems());
+    }, value));
   }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, value);
 };
 
 PropertyDescription.propTypes = {
-  value: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
-  isCollapsible: PropTypes.bool
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  isCollapsible: PropTypes.bool,
+  classes: PropTypes.shape({
+    open: PropTypes.string,
+    toggle: PropTypes.string
+  })
 };
 export default PropertyDescription;

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

@@ -1,9 +1,14 @@
+import * as React from 'react';
 export declare type Desc = {
-    value: string[];
+    value: string | React.ReactNode[];
     isCollapsible?: boolean;
+    classes?: {
+        toggle?: string;
+        open?: string;
+    };
 };
 export declare type Item = {
-    title?: string[];
+    title?: string[] | React.ReactNode[];
     description?: Desc[];
     value?: string;
 };