@megafon/ui-shared 5.4.0 → 5.4.2

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.4.2](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.4.1...@megafon/ui-shared@5.4.2) (2024-01-22)
+
+
+### Bug Fixes
+
+* **card:** fix features list ([0fef3cb](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/0fef3cb3609c50e97edba24074562a13f72ffa55))
+
+
+
+
+
+## [5.4.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.4.0...@megafon/ui-shared@5.4.1) (2024-01-15)
+
+**Note:** Version bump only for package @megafon/ui-shared
+
+
+
+
+
 # [5.4.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.3.0...@megafon/ui-shared@5.4.0) (2024-01-09)
 
 

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

@@ -130,27 +130,58 @@ h5 {
           flex-direction: column;
   gap: 12px;
   margin-top: 16px;
+  overflow: hidden;
+}
+.mfui-card__features-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 .mfui-card__features-item {
+  position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  gap: 4px;
-  -webkit-box-align: baseline;
-      -ms-flex-align: baseline;
-          align-items: baseline;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
-.mfui-card__features-item-separator {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+.mfui-card__features-item:before {
+  content: '';
+  position: absolute;
+  bottom: 0.4em;
+  width: 100%;
   height: 2px;
   background-image: radial-gradient(circle, var(--spbSky3) 1px, transparent 1px);
   background-size: 6px 2px;
 }
+.mfui-card__features-item-value {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  text-align: end;
+}
+.mfui-card__features-item-text {
+  position: relative;
+  z-index: 1;
+  background-color: var(--base);
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+}
+.mfui-card_view_background .mfui-card__features-item-text {
+  background-color: var(--spbSky0);
+}
+.mfui-card_link.mfui-card_view_background:hover .mfui-card__features-item-text {
+  background-color: var(--spbSky1);
+}
+.mfui-card__features-item-title .mfui-card__features-item-text {
+  padding-right: 4px;
+}
+.mfui-card__features-item-value .mfui-card__features-item-text {
+  padding-left: 4px;
+}
 .mfui-card__icons {
   margin-top: 16px;
 }

package/dist/es/components/Card/Card.js

@@ -104,19 +104,21 @@ var Card = function Card(_ref5) {
     if (featuresList) {
       return /*#__PURE__*/React.createElement("div", {
         className: cn('features')
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement("ul", {
         className: cn('features-list')
       }, featuresList.items.map(function (item, i) {
-        return /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/React.createElement("li", {
           className: cn('features-item'),
           key: i
         }, /*#__PURE__*/React.createElement("div", {
           className: cn('features-item-title')
-        }, item.title), /*#__PURE__*/React.createElement("div", {
-          className: cn('features-item-separator')
-        }), /*#__PURE__*/React.createElement("div", {
+        }, /*#__PURE__*/React.createElement("span", {
+          className: cn('features-item-text')
+        }, item.title)), /*#__PURE__*/React.createElement("div", {
           className: cn('features-item-value')
-        }, item.value));
+        }, /*#__PURE__*/React.createElement("span", {
+          className: cn('features-item-text')
+        }, item.value)));
       })), featuresList.desc);
     }
 

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

@@ -1,7 +1,8 @@
 import React, { Ref } from 'react';
 import { Props as BreadcrumbsPropsType } from '../Breadcrumbs/Breadcrumbs';
 import './VideoBanner.less';
-declare type BreadCrumbsItemsType = BreadcrumbsPropsType['items'];
+export declare type BreadCrumbsItemsType = BreadcrumbsPropsType['items'];
+export declare const testIdPrefix = "VideoBanner";
 export declare enum ClassName {
     BUTTON = "button",
     LINK = "link"
@@ -59,7 +60,7 @@ export interface IContent {
     /** Строка со стоимостью услуги */
     cost?: string;
 }
-interface IVideoBannerProps {
+export interface IVideoBannerProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;

package/dist/es/components/VideoBanner/VideoBanner.js

@@ -13,6 +13,7 @@ import * as PropTypes from 'prop-types';
 import throttleTime from "../../constants/throttleTime";
 import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
 import "./VideoBanner.css";
+export var testIdPrefix = 'VideoBanner';
 var cn = cnCreate('mfui-video-banner');
 export var ClassName;
 
@@ -112,7 +113,8 @@ var VideoBanner = function VideoBanner(_ref2) {
       className: cn('content', {
         'text-color': textColor,
         'text-color-mobile': textColorMobile
-      })
+      }),
+      "data-testid": "".concat(testIdPrefix, "-content")
     }, /*#__PURE__*/React.createElement(Header, {
       className: cn('title'),
       as: "h1",
@@ -171,7 +173,8 @@ var VideoBanner = function VideoBanner(_ref2) {
             width: "100%",
             height: "100%",
             frameBorder: "0",
-            allow: "autoplay"
+            allow: "autoplay",
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
           });
         }
 
@@ -184,7 +187,8 @@ var VideoBanner = function VideoBanner(_ref2) {
               className: cn('video', [classes.video]),
               autoPlay: true,
               loop: true,
-              muted: isMuted
+              muted: isMuted,
+              "data-testid": "".concat(testIdPrefix, "-video")
             }, /*#__PURE__*/React.createElement("source", {
               src: videoSrc,
               type: "video/mp4"
@@ -230,7 +234,9 @@ var VideoBanner = function VideoBanner(_ref2) {
     classes: {
       item: classes.breadcrumbs
     }
-  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/React.createElement("picture", null, /*#__PURE__*/React.createElement("source", {
+  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/React.createElement("picture", {
+    "data-testid": "".concat(testIdPrefix, "-picture")
+  }, /*#__PURE__*/React.createElement("source", {
     media: "(min-width: ".concat(breakpoints.DESKTOP_MIDDLE_START, "px)"),
     srcSet: imageDesktopWide
   }), /*#__PURE__*/React.createElement("source", {

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

@@ -56,5 +56,6 @@ export interface IVideoBlockProps {
     /** Фикс для белого фона */
     fixWhiteVideoBackground?: boolean;
 }
+export declare const testIdPrefix = "VideoBlock";
 declare const VideoBlock: React.FC<IVideoBlockProps>;
 export default VideoBlock;

package/dist/es/components/VideoBlock/VideoBlock.js

@@ -12,6 +12,7 @@ export var VideoTypes = {
   YOUTUBE: 'youtube',
   VIDEO: 'video'
 };
+export var testIdPrefix = 'VideoBlock';
 var cn = cnCreate('mfui-video-block');
 
 var VideoBlock = function VideoBlock(_ref) {
@@ -60,7 +61,8 @@ var VideoBlock = function VideoBlock(_ref) {
             frameBorder: "0",
             allow: "autoplay",
             title: "iframe",
-            allowFullScreen: true
+            allowFullScreen: true,
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
           }));
         }
 
@@ -78,7 +80,8 @@ var VideoBlock = function VideoBlock(_ref) {
               controls: !isAutoplay,
               loop: true,
               poster: poster,
-              playsInline: playsinline
+              playsInline: playsinline,
+              "data-testid": "".concat(testIdPrefix, "-video")
             }, /*#__PURE__*/React.createElement("source", {
               src: videoSrc,
               type: "video/mp4"
@@ -103,7 +106,8 @@ var VideoBlock = function VideoBlock(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: cn('content', {
         'position-right': contentPositionRight
-      })
+      }),
+      "data-testid": "".concat(testIdPrefix, "-content")
     }, /*#__PURE__*/React.createElement(Header, {
       as: "h2",
       className: cn('header')

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

@@ -130,27 +130,58 @@ h5 {
           flex-direction: column;
   gap: 12px;
   margin-top: 16px;
+  overflow: hidden;
+}
+.mfui-card__features-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 .mfui-card__features-item {
+  position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  gap: 4px;
-  -webkit-box-align: baseline;
-      -ms-flex-align: baseline;
-          align-items: baseline;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
-.mfui-card__features-item-separator {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+.mfui-card__features-item:before {
+  content: '';
+  position: absolute;
+  bottom: 0.4em;
+  width: 100%;
   height: 2px;
   background-image: radial-gradient(circle, var(--spbSky3) 1px, transparent 1px);
   background-size: 6px 2px;
 }
+.mfui-card__features-item-value {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  text-align: end;
+}
+.mfui-card__features-item-text {
+  position: relative;
+  z-index: 1;
+  background-color: var(--base);
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+}
+.mfui-card_view_background .mfui-card__features-item-text {
+  background-color: var(--spbSky0);
+}
+.mfui-card_link.mfui-card_view_background:hover .mfui-card__features-item-text {
+  background-color: var(--spbSky1);
+}
+.mfui-card__features-item-title .mfui-card__features-item-text {
+  padding-right: 4px;
+}
+.mfui-card__features-item-value .mfui-card__features-item-text {
+  padding-left: 4px;
+}
 .mfui-card__icons {
   margin-top: 16px;
 }

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

@@ -119,19 +119,21 @@ var Card = function Card(_ref5) {
     if (featuresList) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: cn('features')
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("ul", {
         className: cn('features-list')
       }, featuresList.items.map(function (item, i) {
-        return /*#__PURE__*/_react["default"].createElement("div", {
+        return /*#__PURE__*/_react["default"].createElement("li", {
           className: cn('features-item'),
           key: i
         }, /*#__PURE__*/_react["default"].createElement("div", {
           className: cn('features-item-title')
-        }, item.title), /*#__PURE__*/_react["default"].createElement("div", {
-          className: cn('features-item-separator')
-        }), /*#__PURE__*/_react["default"].createElement("div", {
+        }, /*#__PURE__*/_react["default"].createElement("span", {
+          className: cn('features-item-text')
+        }, item.title)), /*#__PURE__*/_react["default"].createElement("div", {
           className: cn('features-item-value')
-        }, item.value));
+        }, /*#__PURE__*/_react["default"].createElement("span", {
+          className: cn('features-item-text')
+        }, item.value)));
       })), featuresList.desc);
     }
 

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

@@ -1,7 +1,8 @@
 import React, { Ref } from 'react';
 import { Props as BreadcrumbsPropsType } from '../Breadcrumbs/Breadcrumbs';
 import './VideoBanner.less';
-declare type BreadCrumbsItemsType = BreadcrumbsPropsType['items'];
+export declare type BreadCrumbsItemsType = BreadcrumbsPropsType['items'];
+export declare const testIdPrefix = "VideoBanner";
 export declare enum ClassName {
     BUTTON = "button",
     LINK = "link"
@@ -59,7 +60,7 @@ export interface IContent {
     /** Строка со стоимостью услуги */
     cost?: string;
 }
-interface IVideoBannerProps {
+export interface IVideoBannerProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;

package/dist/lib/components/VideoBanner/VideoBanner.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.TextColor = exports.ButtonColor = exports.VideoType = exports.ClassName = void 0;
+exports["default"] = exports.TextColor = exports.ButtonColor = exports.VideoType = exports.ClassName = exports.testIdPrefix = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -41,6 +41,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var testIdPrefix = 'VideoBanner';
+exports.testIdPrefix = testIdPrefix;
 var cn = (0, _uiHelpers.cnCreate)('mfui-video-banner');
 var ClassName;
 exports.ClassName = ClassName;
@@ -145,7 +147,8 @@ var VideoBanner = function VideoBanner(_ref2) {
       className: cn('content', {
         'text-color': textColor,
         'text-color-mobile': textColorMobile
-      })
+      }),
+      "data-testid": "".concat(testIdPrefix, "-content")
     }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
       className: cn('title'),
       as: "h1",
@@ -205,7 +208,8 @@ var VideoBanner = function VideoBanner(_ref2) {
             width: "100%",
             height: "100%",
             frameBorder: "0",
-            allow: "autoplay"
+            allow: "autoplay",
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
           });
         }
 
@@ -218,7 +222,8 @@ var VideoBanner = function VideoBanner(_ref2) {
               className: cn('video', [classes.video]),
               autoPlay: true,
               loop: true,
-              muted: isMuted
+              muted: isMuted,
+              "data-testid": "".concat(testIdPrefix, "-video")
             }, /*#__PURE__*/_react["default"].createElement("source", {
               src: videoSrc,
               type: "video/mp4"
@@ -266,7 +271,9 @@ var VideoBanner = function VideoBanner(_ref2) {
     classes: {
       item: classes.breadcrumbs
     }
-  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/_react["default"].createElement("picture", null, /*#__PURE__*/_react["default"].createElement("source", {
+  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/_react["default"].createElement("picture", {
+    "data-testid": "".concat(testIdPrefix, "-picture")
+  }, /*#__PURE__*/_react["default"].createElement("source", {
     media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_MIDDLE_START, "px)"),
     srcSet: imageDesktopWide
   }), /*#__PURE__*/_react["default"].createElement("source", {

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

@@ -56,5 +56,6 @@ export interface IVideoBlockProps {
     /** Фикс для белого фона */
     fixWhiteVideoBackground?: boolean;
 }
+export declare const testIdPrefix = "VideoBlock";
 declare const VideoBlock: React.FC<IVideoBlockProps>;
 export default VideoBlock;

package/dist/lib/components/VideoBlock/VideoBlock.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.VideoTypes = void 0;
+exports["default"] = exports.testIdPrefix = exports.VideoTypes = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -30,6 +30,8 @@ var VideoTypes = {
   VIDEO: 'video'
 };
 exports.VideoTypes = VideoTypes;
+var testIdPrefix = 'VideoBlock';
+exports.testIdPrefix = testIdPrefix;
 var cn = (0, _uiHelpers.cnCreate)('mfui-video-block');
 
 var VideoBlock = function VideoBlock(_ref) {
@@ -79,7 +81,8 @@ var VideoBlock = function VideoBlock(_ref) {
             frameBorder: "0",
             allow: "autoplay",
             title: "iframe",
-            allowFullScreen: true
+            allowFullScreen: true,
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
           }));
         }
 
@@ -97,7 +100,8 @@ var VideoBlock = function VideoBlock(_ref) {
               controls: !isAutoplay,
               loop: true,
               poster: poster,
-              playsInline: playsinline
+              playsInline: playsinline,
+              "data-testid": "".concat(testIdPrefix, "-video")
             }, /*#__PURE__*/_react["default"].createElement("source", {
               src: videoSrc,
               type: "video/mp4"
@@ -123,7 +127,8 @@ var VideoBlock = function VideoBlock(_ref) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('content', {
         'position-right': contentPositionRight
-      })
+      }),
+      "data-testid": "".concat(testIdPrefix, "-content")
     }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
       as: "h2",
       className: cn('header')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-shared",
-  "version": "5.4.0",
+  "version": "5.4.2",
   "files": [
     "dist"
   ],
@@ -48,7 +48,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.17.0",
+    "@megafon/ui-icons": "^2.18.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -82,7 +82,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@megafon/ui-core": "^5.4.3",
+    "@megafon/ui-core": "^5.4.5",
     "@megafon/ui-helpers": "^2.5.4",
     "core-js": "^3.6.4",
     "htmr": "^0.9.2",
@@ -90,5 +90,5 @@
     "prop-types": "^15.7.2",
     "swiper": "^6.5.6"
   },
-  "gitHead": "1120ea0f847f81f7a9218cba42ee13a24f09912a"
+  "gitHead": "372cdb83f6be5d3a870df80e80c60b10f33cd91a"
 }