@megafon/ui-shared 9.0.3 → 9.2.0

package/dist/es/components/BenefitCards/BenefitCard/BenefitCard.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-benefit-card{border:none;border-radius:24px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:15px;line-height:24px;min-height:100%;overflow:hidden;padding:16px;position:relative;-webkit-transition:.3s;transition:.3s;width:100%}.mfui-9-benefit-card:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-benefit-card:focus{outline:none}@media screen and (min-width:1280px){.mfui-9-benefit-card{padding:24px}}.mfui-9-benefit-card:after{background:var(--stcWhite5);border-radius:24px;content:"";inset:0;opacity:0;pointer-events:none;position:absolute;-webkit-transition:opacity .3s;transition:opacity .3s}.mfui-9-benefit-card:hover{text-decoration:none}.mfui-9-benefit-card_interactive:hover:after{opacity:1}.mfui-9-benefit-card_background_gray{background-color:var(--spbSky0)}.mfui-9-benefit-card_background_white{background-color:var(--base)}.mfui-9-benefit-card_background_outline{background-color:var(--base);border:1px solid var(--spbSky2)}.mfui-9-benefit-card_background_soft-purple{background-color:var(--brandPurple20);border:none}.mfui-9-benefit-card_background_soft-green{background-color:var(--brandGreen20);border:none}.mfui-9-benefit-card_background_soft-night{background-color:var(--night20);border:none}.mfui-9-benefit-card_background_soft-sky{background-color:var(--sky20);border:none}.mfui-9-benefit-card_background_soft-flamingo{background-color:var(--flamingo20);border:none}.mfui-9-benefit-card_background_soft-berry{background-color:var(--berry20);border:none}.mfui-9-benefit-card_background_gradient-berry1{background:var(--gradientBerry1);border:none}.mfui-9-benefit-card_background_gradient-berry2{background:var(--gradientBerry2);border:none}.mfui-9-benefit-card_background_gradient-purple1{background:var(--gradientPurple1);border:none}.mfui-9-benefit-card_background_gradient-purple2{background:var(--gradientPurple2);border:none}.mfui-9-benefit-card_background_gradient-purple3{background:var(--gradientPurple3);border:none}.mfui-9-benefit-card_background_gray.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_outline.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_white.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--spbSky3);box-shadow:0 0 0 1px var(--spbSky3)}.mfui-9-benefit-card_background_soft-green.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--brandGreen80);box-shadow:0 0 0 1px var(--brandGreen80)}.mfui-9-benefit-card_background_soft-purple.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--brandPurple80);box-shadow:0 0 0 1px var(--brandPurple80)}.mfui-9-benefit-card_background_soft-night.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--night80);box-shadow:0 0 0 1px var(--night80)}.mfui-9-benefit-card_background_soft-berry.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--berry80);box-shadow:0 0 0 1px var(--berry80)}.mfui-9-benefit-card_background_soft-flamingo.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--flamingo80);box-shadow:0 0 0 1px var(--flamingo80)}.mfui-9-benefit-card_background_soft-sky.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--sky80);box-shadow:0 0 0 1px var(--sky80)}.mfui-9-benefit-card_background_gradient-berry1.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_gradient-berry2.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_gradient-purple1.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_gradient-purple2.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_gradient-purple3.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--berry);box-shadow:0 0 0 1px var(--berry)}.mfui-9-benefit-card_background_outline.mfui-9-benefit-card_interactive:hover:after,.mfui-9-benefit-card_background_white.mfui-9-benefit-card_interactive:hover:after{opacity:0}.mfui-9-benefit-card_gradient{color:var(--stcWhite)}.mfui-9-benefit-card__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:24px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-right:86px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-benefit-card__content{margin-right:64px}}@media screen and (min-width:1280px){.mfui-9-benefit-card__content{margin-right:136px}}.mfui-9-benefit-card__content b{font-weight:500}.mfui-9-benefit-card__image{bottom:0;height:85px;-o-object-fit:contain;object-fit:contain;-o-object-position:right bottom;object-position:right bottom;position:absolute;right:0;width:110px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-benefit-card__image{height:68px;width:88px}}@media screen and (min-width:1280px){.mfui-9-benefit-card__image{height:124px;width:160px}}.mfui-9-benefit-card__pseudo-link{color:var(--systemBlue);text-decoration:none}.mfui-9-benefit-card_gradient .mfui-9-benefit-card__pseudo-link{color:var(--stcWhite);font-weight:500}.mfui-9-benefit-card_interactive:hover .mfui-9-benefit-card__pseudo-link{text-decoration:underline}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-benefit-card{border:none;border-radius:24px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:15px;line-height:24px;min-height:100%;overflow:hidden;padding:16px;position:relative;-webkit-transition:.3s;transition:.3s;width:100%}.mfui-9-benefit-card:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-benefit-card:focus{outline:none}@media screen and (min-width:1280px){.mfui-9-benefit-card{padding:24px}}.mfui-9-benefit-card:after{background:var(--stcWhite5);border-radius:24px;content:"";inset:0;opacity:0;pointer-events:none;position:absolute;-webkit-transition:opacity .3s;transition:opacity .3s}.mfui-9-benefit-card:hover{text-decoration:none}.mfui-9-benefit-card_interactive:hover:after{opacity:1}.mfui-9-benefit-card_interactive{cursor:pointer}.mfui-9-benefit-card_background_gray{background-color:var(--spbSky0)}.mfui-9-benefit-card_background_white{background-color:var(--base)}.mfui-9-benefit-card_background_outline{background-color:var(--base);border:1px solid var(--spbSky2)}.mfui-9-benefit-card_background_soft-purple{background-color:var(--brandPurple20);border:none}.mfui-9-benefit-card_background_soft-green{background-color:var(--brandGreen20);border:none}.mfui-9-benefit-card_background_soft-night{background-color:var(--night20);border:none}.mfui-9-benefit-card_background_soft-sky{background-color:var(--sky20);border:none}.mfui-9-benefit-card_background_soft-flamingo{background-color:var(--flamingo20);border:none}.mfui-9-benefit-card_background_soft-berry{background-color:var(--berry20);border:none}.mfui-9-benefit-card_background_gradient-berry1{background:var(--gradientBerry1);border:none}.mfui-9-benefit-card_background_gradient-berry2{background:var(--gradientBerry2);border:none}.mfui-9-benefit-card_background_gradient-purple1{background:var(--gradientPurple1);border:none}.mfui-9-benefit-card_background_gradient-purple2{background:var(--gradientPurple2);border:none}.mfui-9-benefit-card_background_gradient-purple3{background:var(--gradientPurple3);border:none}.mfui-9-benefit-card_background_gray.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_outline.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_white.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--spbSky3);box-shadow:0 0 0 1px var(--spbSky3)}.mfui-9-benefit-card_background_soft-green.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--brandGreen80);box-shadow:0 0 0 1px var(--brandGreen80)}.mfui-9-benefit-card_background_soft-purple.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--brandPurple80);box-shadow:0 0 0 1px var(--brandPurple80)}.mfui-9-benefit-card_background_soft-night.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--night80);box-shadow:0 0 0 1px var(--night80)}.mfui-9-benefit-card_background_soft-berry.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--berry80);box-shadow:0 0 0 1px var(--berry80)}.mfui-9-benefit-card_background_soft-flamingo.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--flamingo80);box-shadow:0 0 0 1px var(--flamingo80)}.mfui-9-benefit-card_background_soft-sky.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--sky80);box-shadow:0 0 0 1px var(--sky80)}.mfui-9-benefit-card_background_gradient-berry1.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_gradient-berry2.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_gradient-purple1.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_gradient-purple2.mfui-9-benefit-card_interactive:hover,.mfui-9-benefit-card_background_gradient-purple3.mfui-9-benefit-card_interactive:hover{-webkit-box-shadow:0 0 0 1px var(--berry);box-shadow:0 0 0 1px var(--berry)}.mfui-9-benefit-card_background_outline.mfui-9-benefit-card_interactive:hover:after,.mfui-9-benefit-card_background_white.mfui-9-benefit-card_interactive:hover:after{opacity:0}.mfui-9-benefit-card_gradient{color:var(--stcWhite)}.mfui-9-benefit-card__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:24px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-right:86px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-benefit-card__content{margin-right:64px}}@media screen and (min-width:1280px){.mfui-9-benefit-card__content{margin-right:136px}}.mfui-9-benefit-card__content b{font-weight:500}.mfui-9-benefit-card__image{bottom:0;height:85px;-o-object-fit:contain;object-fit:contain;-o-object-position:right bottom;object-position:right bottom;position:absolute;right:0;width:110px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-benefit-card__image{height:68px;width:88px}}@media screen and (min-width:1280px){.mfui-9-benefit-card__image{height:124px;width:160px}}.mfui-9-benefit-card__pseudo-link{color:var(--systemBlue);text-decoration:none}.mfui-9-benefit-card_gradient .mfui-9-benefit-card__pseudo-link{color:var(--stcWhite);font-weight:500}.mfui-9-benefit-card_interactive:hover .mfui-9-benefit-card__pseudo-link{text-decoration:underline}

package/dist/es/components/BenefitCards/BenefitCard/BenefitCard.js

@@ -26,21 +26,32 @@ var BenefitCard = function BenefitCard(_ref2) {
     _ref2$background = _ref2.background,
     background = _ref2$background === void 0 ? 'gray' : _ref2$background,
     dataAttrs = _ref2.dataAttrs,
-    className = _ref2.className;
-  var isLink = !!link;
+    className = _ref2.className,
+    onClick = _ref2.onClick;
+  var isLink = !!link && !!link.href;
   var Element = isLink ? 'a' : 'div';
+  var isClickableDiv = !!onClick && !isLink;
   var isGradientBackground = !!background && background.includes('gradient');
+  var clickableDivProps = {
+    role: 'button',
+    tabIndex: 0,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter') {
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+      }
+    }
+  };
   return /*#__PURE__*/React.createElement(Element, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     href: link === null || link === void 0 ? void 0 : link.href,
     target: link === null || link === void 0 ? void 0 : link.target,
     rel: isLink ? setRelAttribute(link.rel, link.target) : undefined,
     className: cn({
       background: background,
-      interactive: isLink,
+      interactive: isLink || isClickableDiv,
       gradient: isGradientBackground
     }, [className]),
-    tabIndex: isLink ? 0 : -1
-  }), /*#__PURE__*/React.createElement("div", {
+    onClick: onClick
+  }, isClickableDiv && clickableDivProps), /*#__PURE__*/React.createElement("div", {
     className: cn('content')
   }, /*#__PURE__*/React.createElement(Header, {
     as: "h3",

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

@@ -3,9 +3,9 @@ export type MainBackgroundType = SoftBackgroundType | 'outline' | 'white' | 'gra
 export type ExtraBackgroundType = SoftBackgroundType | 'gradient-berry1' | 'gradient-berry2' | 'gradient-purple1' | 'gradient-purple2' | 'gradient-purple3';
 export type LinkType = {
     /** Атрибут ссылки href */
-    href: string;
+    href?: string;
     /** Атрибут ссылки target */
-    target: '_self' | '_blank';
+    target?: '_self' | '_blank';
     /** Атрибут ссылки rel */
     rel?: string;
     /** Текст псевдоссылки внутри карточки */
@@ -20,5 +20,7 @@ export interface IBenefitCardData {
     imageSrc: string;
     /** Ссылка */
     link?: LinkType;
+    /** Обработчик клика по карточке */
+    onClick?: () => void;
 }
 export {};

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;-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}.mfui-9-card:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-card:focus{outline:none}@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}
+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:32px 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}.mfui-9-card:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-card:focus{outline:none}.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;margin-bottom:32px;margin-left:-12px;margin-right:-12px;overflow:hidden;padding-bottom:56.25%;position:relative}.mfui-9-card__img-box_position_top{margin-top:-20px}.mfui-9-card__img-box_position_bottom{margin-top:20px}.mfui-9-card__img-box_position_bottom:last-child{margin-bottom:-20px}.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-bottom:-8px;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/CardsOnBackground/components/CardOnBackground.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-card-on-background{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--base);border-radius:24px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);height:100%;justify-content:center;min-width:240px;padding:16px 16px 0;text-decoration:none}.mfui-9-card-on-background:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-card-on-background:focus{outline:none}@media screen and (min-width:768px){.mfui-9-card-on-background{padding:24px 24px 0}}.mfui-9-card-on-background:hover{text-decoration:none}.mfui-9-card-on-background_active: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-on-background__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:520px;width:100%}.mfui-9-card-on-background__description{font-size:15px;font-weight:400;line-height:24px;margin-top:8px;text-align:center}.mfui-9-card-on-background__image-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;height:118px;justify-content:center;margin:16px 0;overflow:hidden;width:118px}@media screen and (min-width:1024px){.mfui-9-card-on-background__image-wrapper{height:168px;width:168px}}.mfui-9-card-on-background__image{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.mfui-9-card-on-background__buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;gap:12px;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-bottom:16px;width:100%}@media screen and (min-width:768px){.mfui-9-card-on-background__buttons{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-bottom:24px}}.mfui-9-card-on-background__button{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-card-on-background{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--base);border-radius:24px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);height:100%;justify-content:center;min-width:240px;padding:24px 16px;text-decoration:none}.mfui-9-card-on-background:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-card-on-background:focus{outline:none}@media screen and (min-width:1024px){.mfui-9-card-on-background{padding:24px}}.mfui-9-card-on-background:hover{text-decoration:none}.mfui-9-card-on-background_active: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-on-background__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:520px;width:100%}.mfui-9-card-on-background__description{font-size:15px;font-weight:400;line-height:24px;margin-top:8px;text-align:center}.mfui-9-card-on-background__image-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;height:118px;justify-content:center;margin:16px 0;overflow:hidden;width:118px}@media screen and (min-width:1024px){.mfui-9-card-on-background__image-wrapper{height:168px;width:168px}}.mfui-9-card-on-background__image{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.mfui-9-card-on-background__price{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;font-size:15px;font-weight:400;line-height:24px;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;justify-content:center}.mfui-9-card-on-background__price:not(:last-child){margin-bottom:24px}.mfui-9-card-on-background__price-old-value{color:var(--spbSky3);font-size:15px;font-weight:400;line-height:24px;position:relative}.mfui-9-card-on-background__price-old-value:before{background-color:var(--fury);content:"";height:1px;left:-1px;position:absolute;right:-1px;top:50%}.mfui-9-card-on-background__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-on-background__price-value{font-size:26px;line-height:32px}}@media screen and (min-width:1024px){.mfui-9-card-on-background__price-value{font-size:28px;line-height:36px}}@media screen and (min-width:1280px){.mfui-9-card-on-background__price-value{font-size:32px;line-height:40px}}.mfui-9-card-on-background__price-period{font-size:15px;font-weight:400;line-height:24px}.mfui-9-card-on-background__buttons{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;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:auto;width:100%}@media screen and (min-width:768px){.mfui-9-card-on-background__buttons{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}}.mfui-9-card-on-background__button{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%}.mfui-9-card-on-background__badge{position:absolute;right:16px;top:-9px;z-index:0}@media screen and (min-width:1024px){.mfui-9-card-on-background__badge{right:24px}}

package/dist/es/components/CardsOnBackground/components/CardOnBackground.d.ts

@@ -16,6 +16,10 @@ export type CardOnBackgroundType = CardDataType & {
         button?: Record<string, string>;
         extraButton?: Record<string, string>;
         header?: Record<string, string>;
+        price?: Record<string, string>;
+        priceOldValue?: Record<string, string>;
+        pricePeriod?: Record<string, string>;
+        promoBadge?: Record<string, string>;
     };
 };
 declare const CardOnBackground: React.FC<CardOnBackgroundType>;

package/dist/es/components/CardsOnBackground/components/CardOnBackground.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import React from 'react';
-import { Button, Header } from '@megafon/ui-core';
-import { cnCreate, convert, textConvertConfig, titleConvertConfig } from '@megafon/ui-helpers';
+import { Button, Header, PromoBadge } from '@megafon/ui-core';
+import { cnCreate, convert, filterDataAttrs, textConvertConfig, titleConvertConfig } from '@megafon/ui-helpers';
 import { setRelAttribute } from "../../../helpers/setRelAttribute";
 import "./CardOnBackground.css";
 var cn = cnCreate('mfui-9-card-on-background');
@@ -22,7 +22,9 @@ var CardOnBackground = function CardOnBackground(_ref) {
     headerRef = _ref.headerRef,
     _ref$classes = _ref.classes,
     classes = _ref$classes === void 0 ? {} : _ref$classes,
-    dataAttrs = _ref.dataAttrs;
+    dataAttrs = _ref.dataAttrs,
+    price = _ref.price,
+    promoBadge = _ref.promoBadge;
   var showButtons = !!(button === null || button === void 0 ? void 0 : button.title) || !!(extraButton === null || extraButton === void 0 ? void 0 : extraButton.title);
   var isLink = !!href && !showButtons;
   var ElementType = isLink ? 'a' : 'div';
@@ -31,15 +33,21 @@ var CardOnBackground = function CardOnBackground(_ref) {
     className: cn({
       active: isLink
     }, [classes.root])
-  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, isLink && {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), isLink && {
     href: href,
     target: target,
     rel: currentRel
-  }), /*#__PURE__*/React.createElement("div", {
+  }), !!promoBadge && /*#__PURE__*/React.createElement(PromoBadge, {
+    className: cn('badge'),
+    color: promoBadge.color,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.promoBadge
+    }
+  }, promoBadge.text), /*#__PURE__*/React.createElement("div", {
     className: cn('content')
   }, /*#__PURE__*/React.createElement("div", _extends({
     className: cn('header-wrapper')
-  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header, {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header), {
     style: {
       minHeight: headerHeight
     }
@@ -61,7 +69,15 @@ var CardOnBackground = function CardOnBackground(_ref) {
     className: cn('image'),
     src: imageSrc,
     alt: imageAlt
-  })), showButtons && /*#__PURE__*/React.createElement("div", {
+  })), !!price && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.price), {
+    className: cn('price')
+  }), !!price.oldValue && /*#__PURE__*/React.createElement("span", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.priceOldValue), {
+    className: cn('price-old-value')
+  }), price.oldValue), /*#__PURE__*/React.createElement("span", {
+    className: cn('price-value')
+  }, price.value), !!price.period && /*#__PURE__*/React.createElement("span", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pricePeriod), {
+    className: cn('price-period')
+  }), price.period)), showButtons && /*#__PURE__*/React.createElement("div", {
     className: cn('buttons')
   }, !!(button === null || button === void 0 ? void 0 : button.title) && /*#__PURE__*/React.createElement("div", {
     className: cn('button')

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { IPromoBadgeProps } from '@megafon/ui-core/dist/lib/components/Badges/PromoBadge/PromoBadge';
 type TargetType = '_self' | '_blank' | '_parent' | '_top';
 export type ButtonType = {
     /** Название */
@@ -12,6 +13,18 @@ export type ButtonType = {
     /** Обработчик клика */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 };
+export type PriceType = {
+    /** Текущее значение */
+    value: string;
+    /** Старое значение */
+    oldValue?: string;
+    /** Период */
+    period?: string;
+};
+type PromoBadgeType = {
+    text: string;
+    color: IPromoBadgeProps['color'];
+};
 export type CardDataType = {
     /** Заголовок */
     title: string;
@@ -31,6 +44,10 @@ export type CardDataType = {
     target?: TargetType;
     /** Атрибут ссылки rel */
     rel?: string;
+    /** Цена */
+    price?: PriceType;
+    /** Параметры для отображения компонента PromoBadge в карточке */
+    promoBadge?: PromoBadgeType;
 };
 export declare const BackgroundColor: {
     readonly GRAY: "gray";

package/dist/es/components/ChipsBox/ChipBox.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Chip } from '@megafon/ui-core';
-export type ChipBoxPropsType = Omit<React.ComponentProps<typeof Chip>, 'color' | 'checked'>;
+import { ChipBadge } from '@megafon/ui-core';
+export type ChipBoxPropsType = Omit<React.ComponentProps<typeof ChipBadge>, 'color' | 'checked'>;
 declare const ChipBox: React.FC<ChipBoxPropsType>;
 export default ChipBox;