@megafon/ui-shared 9.0.0-alpha.12 → 9.0.0-alpha.14

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-card{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--base);border-radius:24px;color:var(--content);-ms-flex-direction:column;flex-direction:column;padding:16px 16px 24px;text-decoration:none!important;-webkit-transition:background-color .3s,.3s,-webkit-box-shadow;transition:background-color .3s,.3s,-webkit-box-shadow;transition:background-color .3s,box-shadow,.3s;transition:background-color .3s,box-shadow,.3s,-webkit-box-shadow}@media screen and (min-width:1280px){.mfui-9-card{padding:24px 24px 32px}}.mfui-9-card_full-height{height:100%}.mfui-9-card_link{cursor:pointer}.mfui-9-card_view_shadow{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-9-card_link.mfui-9-card_view_hover-shadow:hover,.mfui-9-card_link.mfui-9-card_view_shadow:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-9-card_view_background{background-color:var(--spbSky0)}.mfui-9-card_link.mfui-9-card_view_background:hover{background-color:var(--spbSky1)}.mfui-9-card_only-title{padding:24px}@media screen and (min-width:1280px){.mfui-9-card_only-title{padding:32px}}.mfui-9-card__header{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-9-card__icon{height:40px;margin-bottom:32px;width:40px}.mfui-9-card__img-box{border-radius:24px;overflow:hidden;padding-bottom:56.25%;position:relative}.mfui-9-card__img-box_position_top{margin:-6px -6px 24px}@media screen and (min-width:1280px){.mfui-9-card__img-box_position_top{margin:-12px -12px 32px}}.mfui-9-card__img-box_position_bottom{margin:24px -6px 0}@media screen and (min-width:1280px){.mfui-9-card__img-box_position_bottom{margin:32px -12px 0}}.mfui-9-card__img{height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:100%}.mfui-9-card_link:hover .mfui-9-card__img{-webkit-transform:scale(1.2);transform:scale(1.2)}.mfui-9-card__marker-list{list-style-type:none;margin:16px 0 0;padding:0}.mfui-9-card__marker-item{padding-left:20px;position:relative}.mfui-9-card__marker-item:not(:last-child){margin-bottom:12px}.mfui-9-card__marker-item:before{background-color:var(--spbSky2);border-radius:50%;content:"";height:6px;left:0;opacity:.8;position:absolute;top:7px;width:6px}.mfui-9-card__marker-note{display:block;font-weight:500;margin:4px 0 0;padding:0}.mfui-9-card__texts{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;margin-top:16px}.mfui-9-card__texts ol,.mfui-9-card__texts ul{margin:0;padding-left:24px}.mfui-9-card__texts ol{list-style-type:decimal}.mfui-9-card__texts ul{list-style-type:disc}.mfui-9-card__texts-title{font-weight:500}.mfui-9-card__features{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;margin-top:16px;overflow:hidden}.mfui-9-card__features-list{list-style:none;margin:0;padding:0}.mfui-9-card__features-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-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-9-card__features-item:before{background-image:radial-gradient(circle,var(--spbSky3) 1px,transparent 1px);background-size:6px 2px;bottom:.4em;content:"";height:2px;position:absolute;width:100%}.mfui-9-card__features-item-value{-ms-flex-negative:0;flex-shrink:0;text-align:end}.mfui-9-card__features-item-text{background-color:var(--base);position:relative;-webkit-transition:background-color .3s;transition:background-color .3s;z-index:1}.mfui-9-card_view_background .mfui-9-card__features-item-text{background-color:var(--spbSky0)}.mfui-9-card_link.mfui-9-card_view_background:hover .mfui-9-card__features-item-text{background-color:var(--spbSky1)}.mfui-9-card__features-item-title .mfui-9-card__features-item-text{padding-right:4px}.mfui-9-card__features-item-value .mfui-9-card__features-item-text{padding-left:4px}.mfui-9-card__icons{margin-top:16px}.mfui-9-card__icons-desc{margin-bottom:12px}.mfui-9-card__icons-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px}.mfui-9-card__icons-item,.mfui-9-card__icons-list{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-card__icons-item-icon{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-right:8px;width:32px}.mfui-9-card__icons-item-text{margin-top:4px}.mfui-9-card__price{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-ms-flex-pack:center;border-top:1px solid var(--spbSky1);justify-content:center;margin-top:24px;padding-top:24px}@media screen and (min-width:1280px){.mfui-9-card__price{margin-top:32px}}.mfui-9-card__img-box+.mfui-9-card__price{border:none;padding-top:0}.mfui-9-card__price-old-value{color:var(--spbSky3);position:relative}.mfui-9-card__price-old-value:before{background-color:var(--fury);content:"";height:1px;left:-1px;position:absolute;right:-1px;top:50%}.mfui-9-card__price-value{font-size:22px;font-weight:600;letter-spacing:.5px;line-height:28px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-card__price-value{font-size:26px;line-height:32px}}@media screen and (min-width:1024px){.mfui-9-card__price-value{font-size:28px;line-height:36px}}@media screen and (min-width:1280px){.mfui-9-card__price-value{font-size:32px;line-height:40px}}.mfui-9-card__buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;margin-top:32px}.mfui-9-card__price+.mfui-9-card__buttons{margin-top:24px}.mfui-9-card__buttons_centered{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-9-card__button{-ms-flex-preferred-size:190px;flex-basis:190px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;max-width:320px}.mfui-9-card__footer{margin-top:auto}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-card{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--base);border-radius:24px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);-ms-flex-direction:column;flex-direction:column;padding:16px 16px 24px;text-decoration:none!important;-webkit-transition:background-color .3s,.3s,-webkit-box-shadow;transition:background-color .3s,.3s,-webkit-box-shadow;transition:background-color .3s,box-shadow,.3s;transition:background-color .3s,box-shadow,.3s,-webkit-box-shadow}@media screen and (min-width:1280px){.mfui-9-card{padding:24px 24px 32px}}.mfui-9-card_full-height{height:100%}.mfui-9-card_link{cursor:pointer}.mfui-9-card_view_shadow{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-9-card_link.mfui-9-card_view_hover-shadow:hover,.mfui-9-card_link.mfui-9-card_view_shadow:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-9-card_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-9-card_link.mfui-9-card_view_stroke:hover{border:1px solid var(--brandGreen)}.mfui-9-card_view_background{background-color:var(--spbSky0)}.mfui-9-card_link.mfui-9-card_view_background:hover{background-color:var(--spbSky1)}.mfui-9-card_only-title{padding:24px}@media screen and (min-width:1280px){.mfui-9-card_only-title{padding:32px}}.mfui-9-card__header{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-9-card__icon{height:40px;margin-bottom:32px;width:40px}.mfui-9-card__img-box{border-radius:24px;overflow:hidden;padding-bottom:56.25%;position:relative}.mfui-9-card__img-box_position_top{margin:-6px -6px 24px}@media screen and (min-width:1280px){.mfui-9-card__img-box_position_top{margin:-12px -12px 32px}}.mfui-9-card__img-box_position_bottom{margin:24px -6px 0}@media screen and (min-width:1280px){.mfui-9-card__img-box_position_bottom{margin:32px -12px 0}}.mfui-9-card__img{height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:100%}.mfui-9-card_link:hover .mfui-9-card__img{-webkit-transform:scale(1.2);transform:scale(1.2)}.mfui-9-card__marker-list{list-style-type:none;margin:16px 0 0;padding:0}.mfui-9-card__marker-item{padding-left:20px;position:relative}.mfui-9-card__marker-item:not(:last-child){margin-bottom:12px}.mfui-9-card__marker-item:before{background-color:var(--spbSky2);border-radius:50%;content:"";height:6px;left:0;opacity:.8;position:absolute;top:7px;width:6px}.mfui-9-card__marker-note{display:block;font-weight:500;margin:4px 0 0;padding:0}.mfui-9-card__texts{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;margin-top:16px}.mfui-9-card__texts ol,.mfui-9-card__texts ul{margin:0;padding-left:24px}.mfui-9-card__texts ol{list-style-type:decimal}.mfui-9-card__texts ul{list-style-type:disc}.mfui-9-card__texts-item_center .mfui-9-card__texts-desc,.mfui-9-card__texts-item_center .mfui-9-card__texts-title{text-align:center}.mfui-9-card__texts-title{font-weight:500}.mfui-9-card__features{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;margin-top:16px;overflow:hidden}.mfui-9-card__features-list{list-style:none;margin:0;padding:0}.mfui-9-card__features-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-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-9-card__features-item:before{background-image:radial-gradient(circle,var(--spbSky3) 1px,transparent 1px);background-size:6px 2px;bottom:.4em;content:"";height:2px;position:absolute;width:100%}.mfui-9-card__features-item-value{-ms-flex-negative:0;flex-shrink:0;text-align:end}.mfui-9-card__features-item-text{background-color:var(--base);position:relative;-webkit-transition:background-color .3s;transition:background-color .3s;z-index:1}.mfui-9-card_view_background .mfui-9-card__features-item-text{background-color:var(--spbSky0)}.mfui-9-card_link.mfui-9-card_view_background:hover .mfui-9-card__features-item-text{background-color:var(--spbSky1)}.mfui-9-card__features-item-title .mfui-9-card__features-item-text{padding-right:4px}.mfui-9-card__features-item-value .mfui-9-card__features-item-text{padding-left:4px}.mfui-9-card__icons{margin-top:16px}.mfui-9-card__icons-desc{margin-bottom:12px}.mfui-9-card__icons-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px}.mfui-9-card__icons-item,.mfui-9-card__icons-list{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-card__icons-item-icon{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-right:8px;width:32px}.mfui-9-card__icons-item-text{margin-top:4px}.mfui-9-card__price{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-ms-flex-pack:center;border-top:1px solid var(--spbSky1);justify-content:center;margin-top:24px;padding-top:24px}@media screen and (min-width:1280px){.mfui-9-card__price{margin-top:32px}}.mfui-9-card__img-box+.mfui-9-card__price{border:none;padding-top:0}.mfui-9-card__price-old-value{color:var(--spbSky3);position:relative}.mfui-9-card__price-old-value:before{background-color:var(--fury);content:"";height:1px;left:-1px;position:absolute;right:-1px;top:50%}.mfui-9-card__price-value{font-size:22px;font-weight:600;letter-spacing:.5px;line-height:28px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-card__price-value{font-size:26px;line-height:32px}}@media screen and (min-width:1024px){.mfui-9-card__price-value{font-size:28px;line-height:36px}}@media screen and (min-width:1280px){.mfui-9-card__price-value{font-size:32px;line-height:40px}}.mfui-9-card__buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;margin-top:32px}.mfui-9-card__price+.mfui-9-card__buttons{margin-top:24px}.mfui-9-card__button{-ms-flex-preferred-size:190px;flex-basis:190px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1}.mfui-9-card__footer{margin-top:auto}

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

@@ -21,8 +21,9 @@ export interface ICard {
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement | HTMLAnchorElement>;
     isFullHeight?: boolean;
+    isCenteredText?: boolean;
     /** Вид */
-    view?: 'shadow' | 'hover-shadow' | 'background';
+    view?: 'shadow' | 'hover-shadow' | 'background' | 'stroke';
     /** Ссылка для карточки */
     link?: Link;
     /** Изображение */

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

@@ -3,34 +3,34 @@ import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.string.link.js";
 import * as React from 'react';
 import { Button, Header } from '@megafon/ui-core';
-import { cnCreate, convert, filterDataAttrs } from '@megafon/ui-helpers';
+import { cnCreate, convert, filterDataAttrs, textConvertConfig } from '@megafon/ui-helpers';
 import "./Card.css";
-var textsConvertConfig = {
-  b: {
+var textsConvertConfig = _extends(_extends({}, textConvertConfig), {
+  ul: {
     component: function component(_ref) {
       var children = _ref.children;
-      return /*#__PURE__*/React.createElement("b", null, children);
+      return /*#__PURE__*/React.createElement("ul", null, children);
     }
   },
-  ul: {
+  ol: {
     component: function component(_ref2) {
       var children = _ref2.children;
-      return /*#__PURE__*/React.createElement("ul", null, children);
+      return /*#__PURE__*/React.createElement("ol", null, children);
     }
   },
-  ol: {
+  li: {
     component: function component(_ref3) {
       var children = _ref3.children;
-      return /*#__PURE__*/React.createElement("ol", null, children);
+      return /*#__PURE__*/React.createElement("li", null, children);
     }
   },
-  li: {
+  p: {
     component: function component(_ref4) {
       var children = _ref4.children;
-      return /*#__PURE__*/React.createElement("li", null, children);
+      return /*#__PURE__*/React.createElement("p", null, children);
     }
   }
-};
+});
 var cn = cnCreate('mfui-9-card');
 var Card = function Card(_ref5) {
   var dataAttrs = _ref5.dataAttrs,
@@ -39,6 +39,8 @@ var Card = function Card(_ref5) {
     rootRef = _ref5.rootRef,
     _ref5$isFullHeight = _ref5.isFullHeight,
     isFullHeight = _ref5$isFullHeight === void 0 ? false : _ref5$isFullHeight,
+    _ref5$isCenteredText = _ref5.isCenteredText,
+    isCenteredText = _ref5$isCenteredText === void 0 ? false : _ref5$isCenteredText,
     link = _ref5.link,
     _ref5$view = _ref5.view,
     view = _ref5$view === void 0 ? 'shadow' : _ref5$view,
@@ -102,7 +104,9 @@ var Card = function Card(_ref5) {
         className: cn('texts')
       }, textsList.map(function (item, i) {
         return /*#__PURE__*/React.createElement("div", {
-          className: cn('texts-item'),
+          className: cn('texts-item', {
+            center: isCenteredText
+          }),
           key: i
         }, !!item.title && /*#__PURE__*/React.createElement("div", {
           className: cn('texts-title')
@@ -170,10 +174,10 @@ var Card = function Card(_ref5) {
       return null;
     }
     var extraButtonType = (button === null || button === void 0 ? void 0 : button.type) === 'outline' ? 'text' : extraButton === null || extraButton === void 0 ? void 0 : extraButton.type;
+    var extraButtonDefaultTheme = view === 'background' ? 'white' : 'gray';
+    var extraButtonTheme = (extraButton === null || extraButton === void 0 ? void 0 : extraButton.theme) || extraButtonDefaultTheme;
     return /*#__PURE__*/React.createElement("div", {
-      className: cn('buttons', {
-        centered: (button === null || button === void 0 ? void 0 : button.isCentered) || (extraButton === null || extraButton === void 0 ? void 0 : extraButton.isCentered)
-      })
+      className: cn('buttons')
     }, !!button && /*#__PURE__*/React.createElement(Button, {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
@@ -191,7 +195,8 @@ var Card = function Card(_ref5) {
       className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.extraButton]),
       href: extraButton.href,
       target: extraButton.target,
-      type: extraButtonType || 'outline',
+      type: extraButtonType,
+      theme: extraButtonTheme,
       onClick: extraButton === null || extraButton === void 0 ? void 0 : extraButton.onClick
     }, extraButton.title));
   };

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

@@ -68,19 +68,17 @@ export type ButtonType = {
     href?: string;
     /** Target свойство кнопки */
     target?: Target;
-    /** Центрировать кнопку */
-    isCentered?: boolean;
+    /** Тема кнопки */
+    theme?: 'green' | 'gray' | 'white';
     /** Обработчик клика по кнопке */
     onClick?: () => void;
 };
 export type MainButtonType = ButtonType & {
     /** Тип кнопки */
     type?: 'primary' | 'outline';
-    /** Тема кнопки */
-    theme?: 'green' | 'green-soft';
 };
 export type ExtraButtonType = ButtonType & {
     /** Тип кнопки */
-    type?: 'outline' | 'text';
+    type?: 'primary' | 'text';
 };
 export {};