@megafon/ui-shared 4.20.6 → 4.21.1

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

@@ -9,6 +9,7 @@ import { Collapse } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import "./PropertyDescription.css";
+export var testIdPrefix = 'PropertyDescription';
 var cn = cnCreate('mfui-property-description');
 
 var PropertyDescription = function PropertyDescription(_ref) {
@@ -30,16 +31,17 @@ var PropertyDescription = function PropertyDescription(_ref) {
 
   if (isCollapsible) {
     return /*#__PURE__*/React.createElement("div", {
-      className: cn([isOpened ? classes.open : undefined])
-    }, /*#__PURE__*/React.createElement("span", _extends({
-      onClick: handleClickDesc
-    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink), {
-      className: cn('collapse', classes.toggle)
-    }), isOpened ? 'Скрыть' : 'Подробнее'), /*#__PURE__*/React.createElement(Collapse, {
+      className: cn([isOpened ? classes.open : undefined]),
+      "data-testid": "".concat(testIdPrefix, "-collapsible")
+    }, /*#__PURE__*/React.createElement(Collapse, {
       className: cn('content'),
       classNameContainer: cn('content-inner'),
       isOpened: isOpened
-    }, value));
+    }, value), /*#__PURE__*/React.createElement("span", _extends({
+      onClick: handleClickDesc
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink), {
+      className: cn('collapse', classes.toggle)
+    }), isOpened ? 'Скрыть' : 'Подробнее'));
   }
 
   return /*#__PURE__*/React.createElement("div", {

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

@@ -12,6 +12,9 @@ export declare type Desc = {
 };
 export declare type Item = {
     title?: string[] | React.ReactNode[];
+    titleSize?: 'default' | 'big';
     description?: Desc[];
     value?: string;
+    valueUnit?: string;
+    valueFrameColor?: 'default' | 'gray';
 };

package/dist/lib/components/AccordionBox/AccordionBox.d.ts

@@ -27,7 +27,7 @@ export interface IAccordionBox {
     isFullWidth?: boolean;
     /** Центрирование по горизонтали для расширения 1280+ */
     hCenterAlignWide?: boolean;
-    /** Дополнительный класс для корнеовго элемента */
+    /** Дополнительный класс для корневого элемента */
     className?: string;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {

package/dist/lib/components/AccordionBox/AccordionBox.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 require("core-js/modules/es.array.index-of.js");
 
 require("core-js/modules/es.symbol.js");
@@ -25,6 +27,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -38,6 +42,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 
+var testIdPrefix = 'AccordionBox';
 var cn = (0, _uiHelpers.cnCreate)('mfui-accordion-box');
 
 var AccordionBox = function AccordionBox(_a) {
@@ -50,8 +55,19 @@ var AccordionBox = function AccordionBox(_a) {
   return /*#__PURE__*/React.createElement("div", {
     className: cn()
   }, /*#__PURE__*/React.createElement(_uiCore.Grid, {
-    hAlign: hCenterAlignWide ? 'center' : 'left'
-  }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _getColumnConfig.getColumnConfig)(isFullWidth), /*#__PURE__*/React.createElement(_uiCore.Accordion, restProps))));
+    hAlign: hCenterAlignWide ? 'center' : 'left',
+    dataAttrs: {
+      container: {
+        'data-testid': "".concat(testIdPrefix, "-container")
+      }
+    }
+  }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({}, (0, _getColumnConfig.getColumnConfig)(isFullWidth), {
+    dataAttrs: {
+      root: {
+        'data-testid': "".concat(testIdPrefix, "-column")
+      }
+    }
+  }), /*#__PURE__*/React.createElement(_uiCore.Accordion, restProps))));
 };
 
 AccordionBox.propTypes = {

package/dist/lib/components/Card/Card.css

@@ -5,7 +5,7 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-card {
+.mfui-card-old {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -15,7 +15,7 @@ h5 {
   -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
           box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
-.mfui-card__inner {
+.mfui-card-old__inner {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -34,18 +34,18 @@ h5 {
   padding: 32px 20px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-card__inner {
+  .mfui-card-old__inner {
     padding: 24px 16px;
   }
 }
-.mfui-card__text {
+.mfui-card-old__text {
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
   margin-top: 12px;
   color: var(--content);
 }
-.mfui-card__btns-wrapper {
+.mfui-card-old__btns-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -60,30 +60,30 @@ h5 {
   margin-top: auto;
   padding-top: 12px;
 }
-.mfui-card__btns-wrapper_left-align {
+.mfui-card-old__btns-wrapper_left-align {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
 }
-.mfui-card__fake-link {
+.mfui-card-old__fake-link {
   color: var(--systemBlue);
 }
-.mfui-card__button,
-.mfui-card__link,
-.mfui-card__fake-link {
+.mfui-card-old__button,
+.mfui-card-old__link,
+.mfui-card-old__fake-link {
   margin: 12px 10px;
 }
-.mfui-card__svg-wrapper {
+.mfui-card-old__svg-wrapper {
   margin-bottom: 24px;
 }
-.mfui-card__svg-wrapper svg {
+.mfui-card-old__svg-wrapper svg {
   width: 40px;
   height: 40px;
 }
-.mfui-card__pic-wrapper .mfui-card__img {
+.mfui-card-old__pic-wrapper .mfui-card-old__img {
   max-width: 100%;
 }
-.mfui-card__pic-wrapper {
+.mfui-card-old__pic-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -99,32 +99,32 @@ h5 {
   margin-left: -20px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-card__pic-wrapper {
+  .mfui-card-old__pic-wrapper {
     margin-top: -24px;
     margin-right: -16px;
     margin-bottom: 24px;
     margin-left: -16px;
   }
 }
-.mfui-card__pic-wrapper_object-fit_fill img {
+.mfui-card-old__pic-wrapper_object-fit_fill img {
   width: 100%;
   height: auto;
 }
-.mfui-card__pic-wrapper_object-fit_contain img {
+.mfui-card-old__pic-wrapper_object-fit_contain img {
   width: auto;
   height: 100%;
 }
-.mfui-card_href * {
+.mfui-card-old_href * {
   text-decoration: none !important;
 }
-.mfui-card_href:hover {
+.mfui-card-old_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 {
+.mfui-card-old_full-height {
   height: 100%;
 }
-.mfui-card_centered-text .mfui-card__text,
-.mfui-card_centered-text .mfui-card__title {
+.mfui-card-old_centered-text .mfui-card-old__text,
+.mfui-card-old_centered-text .mfui-card-old__title {
   text-align: center;
 }

package/dist/lib/components/Card/Card.js

@@ -31,7 +31,7 @@ var ObjectFit = {
   CONTAIN: 'contain'
 };
 exports.ObjectFit = ObjectFit;
-var cn = (0, _uiHelpers.cnCreate)('mfui-card');
+var cn = (0, _uiHelpers.cnCreate)('mfui-card-old');
 
 var Card = function Card(_ref) {
   var dataAttrs = _ref.dataAttrs,

package/dist/lib/components/Property/Property.css

@@ -15,98 +15,124 @@ h5 {
           flex-direction: column;
   padding: 24px 0;
 }
-@media screen and (min-width: 1280px) {
-  .mfui-property__wrapper {
-    padding: 26px 0;
-  }
+.mfui-property_border-top.mfui-property_border-color_default .mfui-property__wrapper {
+  border-top: 1px solid var(--spbSky1);
+}
+.mfui-property_border-bottom.mfui-property_border-color_default .mfui-property__wrapper {
+  border-bottom: 1px solid var(--spbSky1);
 }
-.mfui-property_border-top .mfui-property__wrapper {
+.mfui-property_border-top.mfui-property_border-color_darker .mfui-property__wrapper {
   border-top: 1px solid var(--spbSky2);
 }
-.mfui-property_border-bottom .mfui-property__wrapper {
+.mfui-property_border-bottom.mfui-property_border-color_darker .mfui-property__wrapper {
   border-bottom: 1px solid var(--spbSky2);
 }
-.mfui-property__content {
+.mfui-property__main {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  gap: 20px;
+  -webkit-box-align: baseline;
+      -ms-flex-align: baseline;
+          align-items: baseline;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
 }
-.mfui-property__item {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+.mfui-property__main:not(:first-child) {
+  margin-top: 24px;
+}
+.mfui-property__main_with-out-title {
+  margin-top: 16px !important;
+}
+.mfui-property__main_with-badge {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.mfui-property__title-item_size_default {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+}
+.mfui-property__title-item_size_big {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-property__title-item_size_big {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-property__title-item {
+    font-size: 15px;
+    line-height: 24px;
+    font-weight: 500;
+  }
 }
 .mfui-property__icon {
   display: inline-block;
   width: 24px;
   height: 24px;
-  margin-right: 9px;
+  margin-right: 8px;
   margin-left: 1px;
   overflow: hidden;
   vertical-align: bottom;
 }
 .mfui-property__badge {
-  padding: 2px 8px;
-  border-radius: 2px;
-  color: var(--stcWhite);
-  font-size: 12px;
-  background: var(--137C);
-}
-.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-property__inner {
-    padding-right: 77px;
+  margin-bottom: 8px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-property__title .mfui-property__desc {
+    width: 100%;
   }
 }
-@media screen and (max-width: 767px) {
-  .mfui-property__inner {
-    padding-right: 8px;
+.mfui-property__tooltip {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-left: 8px;
+  vertical-align: text-bottom;
+  cursor: pointer;
+  fill: var(--spbSky2);
+}
+.mfui-property__tooltip-inner {
+  max-width: 350px;
+}
+.mfui-property__desc {
+  margin-top: 12px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-property__desc {
+    width: 70%;
   }
 }
-.mfui-property__items-wrapper {
-  width: 100%;
+.mfui-property__desc_collapsible {
+  margin-top: 12px;
 }
 .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;
-  border-left: 1px solid var(--spbSky2);
+  -webkit-box-align: baseline;
+      -ms-flex-align: baseline;
+          align-items: baseline;
+  padding: 4px 8px;
+  border-radius: 8px;
+  white-space: pre-line;
+  text-align: right;
 }
-.mfui-property__desc {
-  margin-top: 8px;
+.mfui-property__value-wrapper_frame_default {
+  background: var(--base);
 }
-.mfui-property__item + .mfui-property__item {
-  margin-top: 16px;
+.mfui-property__value-wrapper_frame_gray {
+  background: var(--spbSky0);
 }
 .mfui-property__value {
-  max-width: 234px;
-  white-space: pre-line;
-  text-align: right;
   font-weight: 500;
   font-size: 18px;
   line-height: 24px;
@@ -125,3 +151,6 @@ h5 {
     font-weight: 500;
   }
 }
+.mfui-property__value-unit:before {
+  content: '\00a0';
+}

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

@@ -1,4 +1,5 @@
-import React, { Ref } from 'react';
+import React, { Ref, ComponentProps } from 'react';
+import { PromoBadge } from '@megafon/ui-core';
 import './Property.less';
 import { Item } from './types';
 export interface IProperty {
@@ -10,10 +11,16 @@ export interface IProperty {
     className?: string;
     /** Текст для бейджа */
     badge?: string;
+    /** Тип бейджа */
+    badgeType?: ComponentProps<typeof PromoBadge>['type'];
+    /** Текст тултипа */
+    tooltip?: string;
     /** Отключить верхнюю границу */
     disableBorderTop?: boolean;
     /** Наличие нижней границы */
     borderBottom?: boolean;
+    /** Цвет верхней и нижней границ */
+    borderColor?: 'default' | 'darker';
     /** Единое значение для всей строки */
     mergedValue?: string;
     /** Иконка для строки */
@@ -32,5 +39,6 @@ export interface IProperty {
         toggleDescription?: string;
     };
 }
+export declare const testIdPrefix = "Property";
 declare const Property: React.FC<IProperty>;
 export default Property;