@megafon/ui-shared 9.1.0 → 9.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/es/components/BenefitCards/BenefitCard/BenefitCard.css +1 -1
  2. package/dist/es/components/BenefitCards/BenefitCard/BenefitCard.js +16 -5
  3. package/dist/es/components/BenefitCards/types.d.ts +4 -2
  4. package/dist/es/components/CardsOnBackground/components/CardOnBackground.css +1 -1
  5. package/dist/es/components/CardsOnBackground/components/CardOnBackground.d.ts +4 -0
  6. package/dist/es/components/CardsOnBackground/components/CardOnBackground.js +23 -7
  7. package/dist/es/components/CardsOnBackground/types.d.ts +17 -0
  8. package/dist/es/components/ChipsBox/ChipBox.d.ts +2 -2
  9. package/dist/lib/components/BenefitCards/BenefitCard/BenefitCard.css +1 -1
  10. package/dist/lib/components/BenefitCards/BenefitCard/BenefitCard.js +16 -5
  11. package/dist/lib/components/BenefitCards/types.d.ts +4 -2
  12. package/dist/lib/components/CardsOnBackground/components/CardOnBackground.css +1 -1
  13. package/dist/lib/components/CardsOnBackground/components/CardOnBackground.d.ts +4 -0
  14. package/dist/lib/components/CardsOnBackground/components/CardOnBackground.js +21 -5
  15. package/dist/lib/components/CardsOnBackground/types.d.ts +17 -0
  16. package/dist/lib/components/ChipsBox/ChipBox.d.ts +2 -2
  17. package/package.json +3 -3
package/dist/es/components/BenefitCards/BenefitCard/BenefitCard.css CHANGED
@@ -1 +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}
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_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 CHANGED
@@ -26,21 +26,32 @@ var BenefitCard = function BenefitCard(_ref2) {
26
26
  _ref2$background = _ref2.background,
27
27
  background = _ref2$background === void 0 ? 'gray' : _ref2$background,
28
28
  dataAttrs = _ref2.dataAttrs,
29
- className = _ref2.className;
30
- var isLink = !!link;
29
+ className = _ref2.className,
30
+ onClick = _ref2.onClick;
31
+ var isLink = !!link && !!link.href;
31
32
  var Element = isLink ? 'a' : 'div';
33
+ var isClickableDiv = !!onClick && !isLink;
32
34
  var isGradientBackground = !!background && background.includes('gradient');
35
+ var clickableDivProps = {
36
+ role: 'button',
37
+ tabIndex: 0,
38
+ onKeyDown: function onKeyDown(e) {
39
+ if (e.key === 'Enter') {
40
+ onClick === null || onClick === void 0 ? void 0 : onClick();
41
+ }
42
+ }
43
+ };
33
44
  return /*#__PURE__*/React.createElement(Element, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
34
45
  href: link === null || link === void 0 ? void 0 : link.href,
35
46
  target: link === null || link === void 0 ? void 0 : link.target,
36
47
  rel: isLink ? setRelAttribute(link.rel, link.target) : undefined,
37
48
  className: cn({
38
49
  background: background,
39
- interactive: isLink,
50
+ interactive: isLink || isClickableDiv,
40
51
  gradient: isGradientBackground
41
52
  }, [className]),
42
- tabIndex: isLink ? 0 : -1
43
- }), /*#__PURE__*/React.createElement("div", {
53
+ onClick: onClick
54
+ }, isClickableDiv && clickableDivProps), /*#__PURE__*/React.createElement("div", {
44
55
  className: cn('content')
45
56
  }, /*#__PURE__*/React.createElement(Header, {
46
57
  as: "h3",
package/dist/es/components/BenefitCards/types.d.ts CHANGED
@@ -3,9 +3,9 @@ export type MainBackgroundType = SoftBackgroundType | 'outline' | 'white' | 'gra
3
3
  export type ExtraBackgroundType = SoftBackgroundType | 'gradient-berry1' | 'gradient-berry2' | 'gradient-purple1' | 'gradient-purple2' | 'gradient-purple3';
4
4
  export type LinkType = {
5
5
  /** Атрибут ссылки href */
6
- href: string;
6
+ href?: string;
7
7
  /** Атрибут ссылки target */
8
- target: '_self' | '_blank';
8
+ target?: '_self' | '_blank';
9
9
  /** Атрибут ссылки rel */
10
10
  rel?: string;
11
11
  /** Текст псевдоссылки внутри карточки */
@@ -20,5 +20,7 @@ export interface IBenefitCardData {
20
20
  imageSrc: string;
21
21
  /** Ссылка */
22
22
  link?: LinkType;
23
+ /** Обработчик клика по карточке */
24
+ onClick?: () => void;
23
25
  }
24
26
  export {};
package/dist/es/components/CardsOnBackground/components/CardOnBackground.css CHANGED
@@ -1 +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%}
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: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 CHANGED
@@ -16,6 +16,10 @@ export type CardOnBackgroundType = CardDataType & {
16
16
  button?: Record<string, string>;
17
17
  extraButton?: Record<string, string>;
18
18
  header?: Record<string, string>;
19
+ price?: Record<string, string>;
20
+ priceOldValue?: Record<string, string>;
21
+ pricePeriod?: Record<string, string>;
22
+ promoBadge?: Record<string, string>;
19
23
  };
20
24
  };
21
25
  declare const CardOnBackground: React.FC<CardOnBackgroundType>;
package/dist/es/components/CardsOnBackground/components/CardOnBackground.js CHANGED
@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import "core-js/modules/es.symbol.js";
3
3
  import "core-js/modules/es.symbol.description.js";
4
4
  import React from 'react';
5
- import { Button, Header } from '@megafon/ui-core';
6
- import { cnCreate, convert, textConvertConfig, titleConvertConfig } from '@megafon/ui-helpers';
5
+ import { Button, Header, PromoBadge } from '@megafon/ui-core';
6
+ import { cnCreate, convert, filterDataAttrs, textConvertConfig, titleConvertConfig } from '@megafon/ui-helpers';
7
7
  import { setRelAttribute } from "../../../helpers/setRelAttribute";
8
8
  import "./CardOnBackground.css";
9
9
  var cn = cnCreate('mfui-9-card-on-background');
@@ -22,7 +22,9 @@ var CardOnBackground = function CardOnBackground(_ref) {
22
22
  headerRef = _ref.headerRef,
23
23
  _ref$classes = _ref.classes,
24
24
  classes = _ref$classes === void 0 ? {} : _ref$classes,
25
- dataAttrs = _ref.dataAttrs;
25
+ dataAttrs = _ref.dataAttrs,
26
+ price = _ref.price,
27
+ promoBadge = _ref.promoBadge;
26
28
  var showButtons = !!(button === null || button === void 0 ? void 0 : button.title) || !!(extraButton === null || extraButton === void 0 ? void 0 : extraButton.title);
27
29
  var isLink = !!href && !showButtons;
28
30
  var ElementType = isLink ? 'a' : 'div';
@@ -31,15 +33,21 @@ var CardOnBackground = function CardOnBackground(_ref) {
31
33
  className: cn({
32
34
  active: isLink
33
35
  }, [classes.root])
34
- }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, isLink && {
36
+ }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), isLink && {
35
37
  href: href,
36
38
  target: target,
37
39
  rel: currentRel
38
- }), /*#__PURE__*/React.createElement("div", {
40
+ }), !!promoBadge && /*#__PURE__*/React.createElement(PromoBadge, {
41
+ className: cn('badge'),
42
+ color: promoBadge.color,
43
+ dataAttrs: {
44
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.promoBadge
45
+ }
46
+ }, promoBadge.text), /*#__PURE__*/React.createElement("div", {
39
47
  className: cn('content')
40
48
  }, /*#__PURE__*/React.createElement("div", _extends({
41
49
  className: cn('header-wrapper')
42
- }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header, {
50
+ }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header), {
43
51
  style: {
44
52
  minHeight: headerHeight
45
53
  }
@@ -61,7 +69,15 @@ var CardOnBackground = function CardOnBackground(_ref) {
61
69
  className: cn('image'),
62
70
  src: imageSrc,
63
71
  alt: imageAlt
64
- })), showButtons && /*#__PURE__*/React.createElement("div", {
72
+ })), !!price && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.price), {
73
+ className: cn('price')
74
+ }), !!price.oldValue && /*#__PURE__*/React.createElement("span", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.priceOldValue), {
75
+ className: cn('price-old-value')
76
+ }), price.oldValue), /*#__PURE__*/React.createElement("span", {
77
+ className: cn('price-value')
78
+ }, price.value), !!price.period && /*#__PURE__*/React.createElement("span", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pricePeriod), {
79
+ className: cn('price-period')
80
+ }), price.period)), showButtons && /*#__PURE__*/React.createElement("div", {
65
81
  className: cn('buttons')
66
82
  }, !!(button === null || button === void 0 ? void 0 : button.title) && /*#__PURE__*/React.createElement("div", {
67
83
  className: cn('button')
package/dist/es/components/CardsOnBackground/types.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import type { IPromoBadgeProps } from '@megafon/ui-core/dist/lib/components/Badges/PromoBadge/PromoBadge';
2
3
  type TargetType = '_self' | '_blank' | '_parent' | '_top';
3
4
  export type ButtonType = {
4
5
  /** Название */
@@ -12,6 +13,18 @@ export type ButtonType = {
12
13
  /** Обработчик клика */
13
14
  onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
14
15
  };
16
+ export type PriceType = {
17
+ /** Текущее значение */
18
+ value: string;
19
+ /** Старое значение */
20
+ oldValue?: string;
21
+ /** Период */
22
+ period?: string;
23
+ };
24
+ type PromoBadgeType = {
25
+ text: string;
26
+ color: IPromoBadgeProps['color'];
27
+ };
15
28
  export type CardDataType = {
16
29
  /** Заголовок */
17
30
  title: string;
@@ -31,6 +44,10 @@ export type CardDataType = {
31
44
  target?: TargetType;
32
45
  /** Атрибут ссылки rel */
33
46
  rel?: string;
47
+ /** Цена */
48
+ price?: PriceType;
49
+ /** Параметры для отображения компонента PromoBadge в карточке */
50
+ promoBadge?: PromoBadgeType;
34
51
  };
35
52
  export declare const BackgroundColor: {
36
53
  readonly GRAY: "gray";
package/dist/es/components/ChipsBox/ChipBox.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { Chip } from '@megafon/ui-core';
3
- export type ChipBoxPropsType = Omit<React.ComponentProps<typeof Chip>, 'color' | 'checked'>;
2
+ import { ChipBadge } from '@megafon/ui-core';
3
+ export type ChipBoxPropsType = Omit<React.ComponentProps<typeof ChipBadge>, 'color' | 'checked'>;
4
4
  declare const ChipBox: React.FC<ChipBoxPropsType>;
5
5
  export default ChipBox;
package/dist/lib/components/BenefitCards/BenefitCard/BenefitCard.css CHANGED
@@ -1 +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}
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_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/lib/components/BenefitCards/BenefitCard/BenefitCard.js CHANGED
@@ -35,21 +35,32 @@ var BenefitCard = function BenefitCard(_ref2) {
35
35
  _ref2$background = _ref2.background,
36
36
  background = _ref2$background === void 0 ? 'gray' : _ref2$background,
37
37
  dataAttrs = _ref2.dataAttrs,
38
- className = _ref2.className;
39
- var isLink = !!link;
38
+ className = _ref2.className,
39
+ onClick = _ref2.onClick;
40
+ var isLink = !!link && !!link.href;
40
41
  var Element = isLink ? 'a' : 'div';
42
+ var isClickableDiv = !!onClick && !isLink;
41
43
  var isGradientBackground = !!background && background.includes('gradient');
44
+ var clickableDivProps = {
45
+ role: 'button',
46
+ tabIndex: 0,
47
+ onKeyDown: function onKeyDown(e) {
48
+ if (e.key === 'Enter') {
49
+ onClick === null || onClick === void 0 ? void 0 : onClick();
50
+ }
51
+ }
52
+ };
42
53
  return /*#__PURE__*/React.createElement(Element, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
43
54
  href: link === null || link === void 0 ? void 0 : link.href,
44
55
  target: link === null || link === void 0 ? void 0 : link.target,
45
56
  rel: isLink ? (0, _setRelAttribute.setRelAttribute)(link.rel, link.target) : undefined,
46
57
  className: cn({
47
58
  background: background,
48
- interactive: isLink,
59
+ interactive: isLink || isClickableDiv,
49
60
  gradient: isGradientBackground
50
61
  }, [className]),
51
- tabIndex: isLink ? 0 : -1
52
- }), /*#__PURE__*/React.createElement("div", {
62
+ onClick: onClick
63
+ }, isClickableDiv && clickableDivProps), /*#__PURE__*/React.createElement("div", {
53
64
  className: cn('content')
54
65
  }, /*#__PURE__*/React.createElement(_uiCore.Header, {
55
66
  as: "h3",
package/dist/lib/components/BenefitCards/types.d.ts CHANGED
@@ -3,9 +3,9 @@ export type MainBackgroundType = SoftBackgroundType | 'outline' | 'white' | 'gra
3
3
  export type ExtraBackgroundType = SoftBackgroundType | 'gradient-berry1' | 'gradient-berry2' | 'gradient-purple1' | 'gradient-purple2' | 'gradient-purple3';
4
4
  export type LinkType = {
5
5
  /** Атрибут ссылки href */
6
- href: string;
6
+ href?: string;
7
7
  /** Атрибут ссылки target */
8
- target: '_self' | '_blank';
8
+ target?: '_self' | '_blank';
9
9
  /** Атрибут ссылки rel */
10
10
  rel?: string;
11
11
  /** Текст псевдоссылки внутри карточки */
@@ -20,5 +20,7 @@ export interface IBenefitCardData {
20
20
  imageSrc: string;
21
21
  /** Ссылка */
22
22
  link?: LinkType;
23
+ /** Обработчик клика по карточке */
24
+ onClick?: () => void;
23
25
  }
24
26
  export {};
package/dist/lib/components/CardsOnBackground/components/CardOnBackground.css CHANGED
@@ -1 +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%}
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: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/lib/components/CardsOnBackground/components/CardOnBackground.d.ts CHANGED
@@ -16,6 +16,10 @@ export type CardOnBackgroundType = CardDataType & {
16
16
  button?: Record<string, string>;
17
17
  extraButton?: Record<string, string>;
18
18
  header?: Record<string, string>;
19
+ price?: Record<string, string>;
20
+ priceOldValue?: Record<string, string>;
21
+ pricePeriod?: Record<string, string>;
22
+ promoBadge?: Record<string, string>;
19
23
  };
20
24
  };
21
25
  declare const CardOnBackground: React.FC<CardOnBackgroundType>;
package/dist/lib/components/CardsOnBackground/components/CardOnBackground.js CHANGED
@@ -28,7 +28,9 @@ var CardOnBackground = function CardOnBackground(_ref) {
28
28
  headerRef = _ref.headerRef,
29
29
  _ref$classes = _ref.classes,
30
30
  classes = _ref$classes === void 0 ? {} : _ref$classes,
31
- dataAttrs = _ref.dataAttrs;
31
+ dataAttrs = _ref.dataAttrs,
32
+ price = _ref.price,
33
+ promoBadge = _ref.promoBadge;
32
34
  var showButtons = !!(button === null || button === void 0 ? void 0 : button.title) || !!(extraButton === null || extraButton === void 0 ? void 0 : extraButton.title);
33
35
  var isLink = !!href && !showButtons;
34
36
  var ElementType = isLink ? 'a' : 'div';
@@ -37,15 +39,21 @@ var CardOnBackground = function CardOnBackground(_ref) {
37
39
  className: cn({
38
40
  active: isLink
39
41
  }, [classes.root])
40
- }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, isLink && {
42
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), isLink && {
41
43
  href: href,
42
44
  target: target,
43
45
  rel: currentRel
44
- }), /*#__PURE__*/_react["default"].createElement("div", {
46
+ }), !!promoBadge && /*#__PURE__*/_react["default"].createElement(_uiCore.PromoBadge, {
47
+ className: cn('badge'),
48
+ color: promoBadge.color,
49
+ dataAttrs: {
50
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.promoBadge
51
+ }
52
+ }, promoBadge.text), /*#__PURE__*/_react["default"].createElement("div", {
45
53
  className: cn('content')
46
54
  }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
47
55
  className: cn('header-wrapper')
48
- }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header, {
56
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header), {
49
57
  style: {
50
58
  minHeight: headerHeight
51
59
  }
@@ -67,7 +75,15 @@ var CardOnBackground = function CardOnBackground(_ref) {
67
75
  className: cn('image'),
68
76
  src: imageSrc,
69
77
  alt: imageAlt
70
- })), showButtons && /*#__PURE__*/_react["default"].createElement("div", {
78
+ })), !!price && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.price), {
79
+ className: cn('price')
80
+ }), !!price.oldValue && /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.priceOldValue), {
81
+ className: cn('price-old-value')
82
+ }), price.oldValue), /*#__PURE__*/_react["default"].createElement("span", {
83
+ className: cn('price-value')
84
+ }, price.value), !!price.period && /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pricePeriod), {
85
+ className: cn('price-period')
86
+ }), price.period)), showButtons && /*#__PURE__*/_react["default"].createElement("div", {
71
87
  className: cn('buttons')
72
88
  }, !!(button === null || button === void 0 ? void 0 : button.title) && /*#__PURE__*/_react["default"].createElement("div", {
73
89
  className: cn('button')
package/dist/lib/components/CardsOnBackground/types.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import type { IPromoBadgeProps } from '@megafon/ui-core/dist/lib/components/Badges/PromoBadge/PromoBadge';
2
3
  type TargetType = '_self' | '_blank' | '_parent' | '_top';
3
4
  export type ButtonType = {
4
5
  /** Название */
@@ -12,6 +13,18 @@ export type ButtonType = {
12
13
  /** Обработчик клика */
13
14
  onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
14
15
  };
16
+ export type PriceType = {
17
+ /** Текущее значение */
18
+ value: string;
19
+ /** Старое значение */
20
+ oldValue?: string;
21
+ /** Период */
22
+ period?: string;
23
+ };
24
+ type PromoBadgeType = {
25
+ text: string;
26
+ color: IPromoBadgeProps['color'];
27
+ };
15
28
  export type CardDataType = {
16
29
  /** Заголовок */
17
30
  title: string;
@@ -31,6 +44,10 @@ export type CardDataType = {
31
44
  target?: TargetType;
32
45
  /** Атрибут ссылки rel */
33
46
  rel?: string;
47
+ /** Цена */
48
+ price?: PriceType;
49
+ /** Параметры для отображения компонента PromoBadge в карточке */
50
+ promoBadge?: PromoBadgeType;
34
51
  };
35
52
  export declare const BackgroundColor: {
36
53
  readonly GRAY: "gray";
package/dist/lib/components/ChipsBox/ChipBox.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { Chip } from '@megafon/ui-core';
3
- export type ChipBoxPropsType = Omit<React.ComponentProps<typeof Chip>, 'color' | 'checked'>;
2
+ import { ChipBadge } from '@megafon/ui-core';
3
+ export type ChipBoxPropsType = Omit<React.ComponentProps<typeof ChipBadge>, 'color' | 'checked'>;
4
4
  declare const ChipBox: React.FC<ChipBoxPropsType>;
5
5
  export default ChipBox;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-shared",
3
- "version": "9.1.0",
3
+ "version": "9.2.0",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -77,7 +77,7 @@
77
77
  },
78
78
  "dependencies": {
79
79
  "@babel/runtime": "^7.8.4",
80
- "@megafon/ui-core": "^9.2.2",
80
+ "@megafon/ui-core": "^9.3.0",
81
81
  "@megafon/ui-helpers": "^5.0.1",
82
82
  "@megafon/ui-icons": "^4.0.1",
83
83
  "core-js": "^3.6.4",
@@ -85,5 +85,5 @@
85
85
  "lodash.throttle": "^4.1.1",
86
86
  "swiper": "^12.1.2"
87
87
  },
88
- "gitHead": "e746dd0ee3ab2b7618370b83c507e11e456f8406"
88
+ "gitHead": "e090c9565de565ddb498c09b2ae596972996828c"
89
89
  }