@megafon/ui-shared 5.15.0 → 5.17.0

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.17.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.16.0...@megafon/ui-shared@5.17.0) (2024-07-17)
+
+
+### Bug Fixes
+
+* **imagebanner:** fix aligning for children ([cafb869](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/cafb8699b601a3bfa2aa149d64e1dbdf4b05b1c5))
+* **imagebanner:** fix image width for mobile ([0bcd718](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/0bcd718e37627f30dfeb440a54786bbcdec1dcc1))
+
+
+### Features
+
+* **card:** increase root and image border-radius ([45b6796](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/45b6796d9711c2818a6fc40c5e8491c7f978534c))
+* **container:** add layer with background color '--background' ([a4af59e](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/a4af59e7b71363fea59b457f45187bd61b7e84d9))
+
+
+
+
+
+# [5.16.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.15.0...@megafon/ui-shared@5.16.0) (2024-07-08)
+
+
+### Bug Fixes
+
+* **imagebanner:** fix size for mobile ([45e6e67](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/45e6e67a914d27f9b91c81a1216917cf399d4973))
+* **imagebanner:** review fixes ([1522d02](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/1522d0292428c7d04636d73b04ed679b81a1771c))
+
+
+### Features
+
+* **card:** add new props: markerList, badge; add new value hover-shadow to prop view; ([c73c54b](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/c73c54b158e4b6e38a77e569e874763feaa593b4))
+* **container:** add border-radius to root element ([419ec1f](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/419ec1fb16fffe138c772438768eab04e43f3589))
+* **imagebanner:** update badges for ImageBanner ([554e1ad](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/554e1ada1dc9dc7b7e7f9214056cdb83e4af9ba0))
+* **imagebanner:** update classes props for ImageBanner ([8ec0df4](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/8ec0df4ce74e1e4f00fc5edab52357f9f6aa9ede))
+* **imagebanner:** update image size for ImageBanner ([cd0242e](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/cd0242e24085bc2e1e8f0339ae8c7f0781c3fb39))
+* **textwithicon:** add border for icon ([1af5774](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/1af57741ebc67abe503c842ee181f0d36f04db26))
+
+
+
+
+
 # [5.15.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.14.0...@megafon/ui-shared@5.15.0) (2024-07-01)
 
 

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

@@ -18,7 +18,7 @@ h5 {
       -ms-flex-direction: column;
           flex-direction: column;
   padding: 16px 16px 24px;
-  border-radius: 12px;
+  border-radius: 24px;
   color: var(--content);
   text-decoration: none !important;
   background-color: var(--base);
@@ -42,6 +42,7 @@ h5 {
   -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
           box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
+.mfui-card_link.mfui-card_view_hover-shadow:hover,
 .mfui-card_link.mfui-card_view_shadow:hover {
   -webkit-box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
           box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
@@ -60,6 +61,18 @@ h5 {
     padding: 32px;
   }
 }
+.mfui-card__header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 12px;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: start;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
 .mfui-card__icon {
   width: 40px;
   height: 40px;
@@ -67,23 +80,24 @@ h5 {
 }
 .mfui-card__img-box {
   position: relative;
-  margin-bottom: 24px;
   padding-bottom: 56.25%;
-  border-radius: 12px;
+  border-radius: 24px;
   overflow: hidden;
 }
+.mfui-card__img-box_position_top {
+  margin: -6px -6px 24px -6px;
+}
 @media screen and (min-width: 1280px) {
-  .mfui-card__img-box {
-    margin-bottom: 32px;
+  .mfui-card__img-box_position_top {
+    margin: -12px -12px 32px -12px;
   }
 }
 .mfui-card__img-box_position_bottom {
-  margin-top: 24px;
-  margin-bottom: 0;
+  margin: 24px -6px 0 -6px;
 }
 @media screen and (min-width: 1280px) {
   .mfui-card__img-box_position_bottom {
-    margin-top: 32px;
+    margin: 32px -12px 0 -12px;
   }
 }
 .mfui-card__img {
@@ -101,6 +115,35 @@ h5 {
   -webkit-transform: scale(1.2);
           transform: scale(1.2);
 }
+.mfui-card__marker-list {
+  margin: 16px 0 0 0;
+  padding: 0;
+  list-style-type: none;
+}
+.mfui-card__marker-item {
+  position: relative;
+  padding-left: 20px;
+}
+.mfui-card__marker-item:not(:last-child) {
+  margin-bottom: 12px;
+}
+.mfui-card__marker-item:before {
+  content: '';
+  position: absolute;
+  top: 7px;
+  left: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--stcBlack20);
+  opacity: 0.8;
+}
+.mfui-card__marker-note {
+  display: block;
+  margin: 4px 0 0 0;
+  padding: 0;
+  font-weight: 500;
+}
 .mfui-card__texts {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -117,6 +160,9 @@ h5 {
   margin: 0;
   padding-left: 24px;
 }
+.mfui-card__texts ul {
+  list-style-type: disc;
+}
 .mfui-card__texts-title {
   font-weight: 500;
 }

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

@@ -1,6 +1,6 @@
-import React, { Ref } from 'react';
+import React, { ReactElement, Ref } from 'react';
 import './Card.less';
-import { ButtonType, FeaturesList, IconsList, Image, Link, Price, TextsList, Title } from './types';
+import { ButtonType, FeaturesList, IconsList, Image, Link, MarkerList, Price, TextsList, Title } from './types';
 export interface ICard {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -22,7 +22,7 @@ export interface ICard {
     rootRef?: Ref<HTMLDivElement | HTMLAnchorElement>;
     isFullHeight?: boolean;
     /** Вид */
-    view?: 'shadow' | 'background';
+    view?: 'shadow' | 'hover-shadow' | 'background';
     /** Ссылка для карточки */
     link?: Link;
     /** Изображение */
@@ -31,6 +31,8 @@ export interface ICard {
     icon?: React.ReactNode;
     /** Заголовок */
     title: Title;
+    /** Маркированный список */
+    markerList?: MarkerList;
     /** Список текстов */
     textsList?: TextsList;
     /** Список характеристик */
@@ -43,6 +45,8 @@ export interface ICard {
     button?: ButtonType;
     /** Дополнительная кнопка */
     extraButton?: ButtonType;
+    /** Бейдж */
+    badge?: ReactElement;
     /** Обработчик клика по карточке */
     onClick?: () => void;
 }

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

@@ -47,14 +47,16 @@ var Card = function Card(_ref5) {
       image = _ref5.image,
       icon = _ref5.icon,
       title = _ref5.title,
+      markerList = _ref5.markerList,
       textsList = _ref5.textsList,
       featuresList = _ref5.featuresList,
       iconsList = _ref5.iconsList,
       price = _ref5.price,
       button = _ref5.button,
       extraButton = _ref5.extraButton,
+      badge = _ref5.badge,
       onClick = _ref5.onClick;
-  var isOnlyTitle = !image && !icon && !textsList && !featuresList && !iconsList && !price && !button && !extraButton;
+  var isOnlyTitle = !image && !icon && !markerList && !textsList && !featuresList && !iconsList && !price && !button && !extraButton;
   var isLink = (link === null || link === void 0 ? void 0 : link.href) && !button && !extraButton;
   var isBottomImage = (image === null || image === void 0 ? void 0 : image.position) === 'bottom';
   var ElementType = isLink ? 'a' : 'div';
@@ -64,14 +66,18 @@ var Card = function Card(_ref5) {
       return null;
     }
 
+    var _image$position = image.position,
+        position = _image$position === void 0 ? 'top' : _image$position,
+        src = image.src,
+        alt = image.alt;
     return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.imgBox), {
       className: cn('img-box', {
-        position: image.position
+        position: position
       })
     }), /*#__PURE__*/React.createElement("img", {
       className: cn('img'),
-      src: image.src,
-      alt: image.alt
+      src: src,
+      alt: alt
     }));
   };
 
@@ -86,6 +92,19 @@ var Card = function Card(_ref5) {
   };
 
   var renderContent = function renderContent() {
+    if (markerList) {
+      return /*#__PURE__*/React.createElement("ul", {
+        className: cn('marker-list')
+      }, markerList.map(function (item, i) {
+        return /*#__PURE__*/React.createElement("li", {
+          className: cn('marker-item'),
+          key: i
+        }, convert(item.title, {}), !!item.note && /*#__PURE__*/React.createElement("span", {
+          className: cn('marker-note')
+        }, convert(item.note, {})));
+      }));
+    }
+
     if (textsList) {
       return /*#__PURE__*/React.createElement("div", {
         className: cn('texts')
@@ -210,11 +229,13 @@ var Card = function Card(_ref5) {
     target: isLink ? link === null || link === void 0 ? void 0 : link.target : undefined,
     onClick: isLink ? onClick : undefined,
     ref: rootRef
-  }), renderIcon(), !isBottomImage && renderImage(), /*#__PURE__*/React.createElement(Header, {
+  }), renderIcon(), !isBottomImage && renderImage(), /*#__PURE__*/React.createElement("div", {
+    className: cn('header')
+  }, /*#__PURE__*/React.createElement(Header, {
     className: cn('title'),
     as: "h3",
     align: title.align
-  }, title.text), renderContent(), renderFooter());
+  }, title.text), badge), renderContent(), renderFooter());
 };
 
 Card.propTypes = {

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

@@ -20,6 +20,12 @@ export declare type Title = {
     /** Выравнивание */
     align?: 'left' | 'center';
 };
+export declare type MarkerList = {
+    /** Заголовок */
+    title: string;
+    /** Примечание */
+    note?: string;
+}[];
 export declare type TextsList = {
     /** Заголовок */
     title?: string;