@megafon/ui-shared 4.21.1 → 5.0.0

package/dist/es/components/CardsBox/helpers.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+var getColumnConfig = function getColumnConfig(count, index, renderTwoColumnsInRow) {
+  var offset = renderTwoColumnsInRow ? '2' : undefined;
+  var offsetForEvenColumn = index % 2 ? undefined : offset;
+  var columnSize = {
+    all: '4',
+    tablet: '6',
+    mobile: '12'
+  };
+
+  switch (count) {
+    case 2:
+    case 4:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetWide: offsetForEvenColumn,
+        leftOffsetDesktop: offsetForEvenColumn
+      });
+
+    default:
+      return _extends({}, columnSize);
+  }
+};
+
+export default getColumnConfig;

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

@@ -1,5 +1,10 @@
 import * as React from 'react';
 import { Carousel } from '@megafon/ui-core';
 declare type CarouselPropsTypes = React.ComponentProps<typeof Carousel>;
-declare const CarouselBox: React.FC<CarouselPropsTypes>;
+declare type DesktopSlidesPerView = 3 | 4;
+interface ICarouselBox extends CarouselPropsTypes {
+    /** Количество видимых слайдов на разрешении 1024 и выше */
+    desktopSlidesPerView?: DesktopSlidesPerView;
+}
+declare const CarouselBox: React.FC<ICarouselBox>;
 export default CarouselBox;

package/dist/es/components/CarouselBox/CarouselBox.js

@@ -1,3 +1,5 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.symbol.js";
 
@@ -16,16 +18,38 @@ var __rest = this && this.__rest || function (s, e) {
 
 import * as React from 'react';
 import { Carousel } from '@megafon/ui-core';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, breakpoints } from '@megafon/ui-helpers';
+
+var getDefaultSlideSettings = function getDefaultSlideSettings(desktopSlidesPerView) {
+  var _ref;
+
+  return _ref = {}, _defineProperty(_ref, breakpoints.MOBILE_SMALL_START, {
+    slidesPerView: 1,
+    spaceBetween: 16
+  }), _defineProperty(_ref, breakpoints.MOBILE_BIG_START, {
+    slidesPerView: 2,
+    spaceBetween: 20
+  }), _defineProperty(_ref, breakpoints.DESKTOP_SMALL_START, {
+    slidesPerView: desktopSlidesPerView,
+    spaceBetween: 20
+  }), _ref;
+};
+
 var cn = cnCreate('mfui-carousel-box');
 
 var CarouselBox = function CarouselBox(_a) {
   var children = _a.children,
-      props = __rest(_a, ["children"]);
+      slidesSettings = _a.slidesSettings,
+      _a$desktopSlidesPerVi = _a.desktopSlidesPerView,
+      desktopSlidesPerView = _a$desktopSlidesPerVi === void 0 ? 4 : _a$desktopSlidesPerVi,
+      props = __rest(_a, ["children", "slidesSettings", "desktopSlidesPerView"]);
 
+  var settings = slidesSettings || getDefaultSlideSettings(desktopSlidesPerView);
   return /*#__PURE__*/React.createElement("div", {
     className: cn()
-  }, /*#__PURE__*/React.createElement(Carousel, props, children));
+  }, /*#__PURE__*/React.createElement(Carousel, _extends({}, props, {
+    slidesSettings: settings
+  }), children));
 };
 
 export default CarouselBox;

package/dist/es/components/Property/Property.js

@@ -128,7 +128,7 @@ var Property = function Property(_ref) {
         _ref3$titleSize = _ref3.titleSize,
         titleSize = _ref3$titleSize === void 0 ? 'default' : _ref3$titleSize,
         _ref3$valueFrameColor = _ref3.valueFrameColor,
-        valueFrameColor = _ref3$valueFrameColor === void 0 ? 'default' : _ref3$valueFrameColor;
+        valueFrameColor = _ref3$valueFrameColor === void 0 ? 'none' : _ref3$valueFrameColor;
     var isFirstItem = i === 0;
     var isRenderBadge = isFirstItem && !!badge;
     return /*#__PURE__*/React.createElement(Fragment, {
@@ -160,7 +160,7 @@ Property.propTypes = {
     value: PropTypes.string,
     titleSize: PropTypes.oneOf(['default', 'big']),
     valueUnit: PropTypes.string,
-    valueFrameColor: PropTypes.oneOf(['default', 'gray'])
+    valueFrameColor: PropTypes.oneOf(['none', 'default', 'gray'])
   }).isRequired).isRequired,
   className: PropTypes.string,
   badge: PropTypes.string,

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

@@ -16,5 +16,5 @@ export declare type Item = {
     description?: Desc[];
     value?: string;
     valueUnit?: string;
-    valueFrameColor?: 'default' | 'gray';
+    valueFrameColor?: 'none' | 'default' | 'gray';
 };

package/dist/es/index.d.ts

@@ -18,6 +18,7 @@ export { default as Container } from './components/Container/Container';
 export { default as DownloadLink } from './components/DownloadLinks/DownloadLink';
 export { default as DownloadLinks } from './components/DownloadLinks/DownloadLinks';
 export { default as FaqWrapper } from './components/FaqWrapper/FaqWrapper';
+export { default as helpers } from './components/CardsBox/helpers';
 export { default as Instructions } from './components/Instructions/Instructions';
 export { default as NotificationBox } from './components/NotificationBox/NotificationBox';
 export { default as PageTitle } from './components/PageTitle/PageTitle';

package/dist/es/index.js

@@ -18,6 +18,7 @@ export { default as Container } from "./components/Container/Container";
 export { default as DownloadLink } from "./components/DownloadLinks/DownloadLink";
 export { default as DownloadLinks } from "./components/DownloadLinks/DownloadLinks";
 export { default as FaqWrapper } from "./components/FaqWrapper/FaqWrapper";
+export { default as helpers } from "./components/CardsBox/helpers";
 export { default as Instructions } from "./components/Instructions/Instructions";
 export { default as NotificationBox } from "./components/NotificationBox/NotificationBox";
 export { default as PageTitle } from "./components/PageTitle/PageTitle";

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

@@ -5,17 +5,99 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-card-old {
+.mfui-card {
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  padding: 16px 16px 24px;
   border-radius: 12px;
-  overflow: hidden;
+  color: var(--content);
+  text-decoration: none;
   background-color: var(--base);
-  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
-.mfui-card-old__inner {
+@media screen and (min-width: 1280px) {
+  .mfui-card {
+    padding: 24px 24px 32px;
+  }
+}
+.mfui-card_full-height {
+  height: 100%;
+}
+.mfui-card_link {
+  cursor: pointer;
+}
+.mfui-card_view_shadow {
+  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+.mfui-card_link.mfui-card_view_shadow:hover {
+  -webkit-box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
+          box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
+}
+.mfui-card_view_background {
+  background-color: var(--spbSky0);
+}
+.mfui-card_link.mfui-card_view_background:hover {
+  background-color: var(--spbSky1);
+}
+.mfui-card_only-title {
+  padding: 24px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-card_only-title {
+    padding: 32px;
+  }
+}
+.mfui-card__icon {
+  width: 40px;
+  height: 40px;
+  margin-bottom: 32px;
+}
+.mfui-card__img-box {
+  position: relative;
+  margin-bottom: 24px;
+  padding-bottom: 56.25%;
+  border-radius: 12px;
+  overflow: hidden;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-card__img-box {
+    margin-bottom: 32px;
+  }
+}
+.mfui-card__img-box_position_bottom {
+  margin-top: 24px;
+  margin-bottom: 0;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-card__img-box_position_bottom {
+    margin-top: 32px;
+  }
+}
+.mfui-card__img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -webkit-transition: -webkit-transform 0.3s;
+  transition: -webkit-transform 0.3s;
+  transition: transform 0.3s;
+  transition: transform 0.3s, -webkit-transform 0.3s;
+}
+.mfui-card_link:hover .mfui-card__img {
+  -webkit-transform: scale(1.2);
+          transform: scale(1.2);
+}
+.mfui-card__texts {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -23,108 +105,169 @@ h5 {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  width: 100%;
-  padding: 32px 20px;
+  gap: 12px;
+  margin-top: 16px;
 }
-@media screen and (max-width: 767px) {
-  .mfui-card-old__inner {
-    padding: 24px 16px;
-  }
+.mfui-card__texts ol,
+.mfui-card__texts ul {
+  margin: 0;
+  padding-left: 24px;
 }
-.mfui-card-old__text {
-  font-size: 15px;
-  line-height: 24px;
-  font-weight: 400;
-  margin-top: 12px;
-  color: var(--content);
+.mfui-card__texts-title {
+  font-weight: 500;
 }
-.mfui-card-old__btns-wrapper {
+.mfui-card__features {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: space-evenly;
-      -ms-flex-pack: space-evenly;
-          justify-content: space-evenly;
-  margin-top: auto;
-  padding-top: 12px;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 12px;
+  margin-top: 16px;
 }
-.mfui-card-old__btns-wrapper_left-align {
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+.mfui-card__features-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 4px;
+  -webkit-box-align: baseline;
+      -ms-flex-align: baseline;
+          align-items: baseline;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
 }
-.mfui-card-old__fake-link {
-  color: var(--systemBlue);
+.mfui-card__features-item-separator {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  height: 2px;
+  background-image: radial-gradient(circle, var(--spbSky3) 1px, transparent 1px);
+  background-size: 6px 2px;
 }
-.mfui-card-old__button,
-.mfui-card-old__link,
-.mfui-card-old__fake-link {
-  margin: 12px 10px;
+.mfui-card__icons {
+  margin-top: 16px;
 }
-.mfui-card-old__svg-wrapper {
-  margin-bottom: 24px;
+.mfui-card__icons-desc {
+  margin-bottom: 12px;
 }
-.mfui-card-old__svg-wrapper svg {
-  width: 40px;
-  height: 40px;
+.mfui-card__icons-list {
+  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;
+}
+.mfui-card__icons-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-card__icons-item-icon {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  margin-right: 8px;
 }
-.mfui-card-old__pic-wrapper .mfui-card-old__img {
-  max-width: 100%;
+.mfui-card__icons-item-text {
+  margin-top: 4px;
 }
-.mfui-card-old__pic-wrapper {
+.mfui-card__price {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -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;
           justify-content: center;
-  margin-top: -32px;
-  margin-right: -20px;
-  margin-bottom: 32px;
-  margin-left: -20px;
-}
-@media screen and (max-width: 767px) {
-  .mfui-card-old__pic-wrapper {
-    margin-top: -24px;
-    margin-right: -16px;
-    margin-bottom: 24px;
-    margin-left: -16px;
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid var(--spbSky1);
+}
+@media screen and (min-width: 1280px) {
+  .mfui-card__price {
+    margin-top: 32px;
   }
 }
-.mfui-card-old__pic-wrapper_object-fit_fill img {
-  width: 100%;
-  height: auto;
+.mfui-card__img-box + .mfui-card__price {
+  padding-top: 0;
+  border: none;
 }
-.mfui-card-old__pic-wrapper_object-fit_contain img {
-  width: auto;
-  height: 100%;
+.mfui-card__price-old-value {
+  position: relative;
+  color: var(--spbSky3);
 }
-.mfui-card-old_href * {
-  text-decoration: none !important;
+.mfui-card__price-old-value:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: -1px;
+  left: -1px;
+  height: 1px;
+  background-color: var(--warmRedC);
 }
-.mfui-card-old_href:hover {
-  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
-          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
+.mfui-card__price-value {
+  font-weight: 600;
+  font-size: 22px;
+  line-height: 28px;
+  letter-spacing: 0.5px;
 }
-.mfui-card-old_full-height {
-  height: 100%;
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-card__price-value {
+    font-size: 26px;
+    line-height: 32px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-card__price-value {
+    font-size: 28px;
+    line-height: 36px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-card__price-value {
+    font-size: 32px;
+    line-height: 40px;
+  }
+}
+.mfui-card__buttons {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 32px;
+}
+.mfui-card__price + .mfui-card__buttons {
+  margin-top: 24px;
+}
+.mfui-card__buttons_centered {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.mfui-card__button {
+  -ms-flex-preferred-size: 190px;
+      flex-basis: 190px;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  -ms-flex-negative: 1;
+      flex-shrink: 1;
+  max-width: 320px;
 }
-.mfui-card-old_centered-text .mfui-card-old__text,
-.mfui-card-old_centered-text .mfui-card-old__title {
-  text-align: center;
+.mfui-card__footer {
+  margin-top: auto;
 }

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

@@ -1,74 +1,42 @@
-import React, { Ref } from 'react';
+import React from 'react';
 import './Card.less';
-export declare const Target: {
-    readonly SELF: "_self";
-    readonly BLANK: "_blank";
-};
-declare type TargetType = typeof Target[keyof typeof Target];
-interface IButton {
-    title: string;
-    href?: string;
-    target?: TargetType;
-    download?: boolean;
-    rel?: string;
-    onClick?: () => void;
-}
-interface ILink {
-    title: string;
-    href?: string;
-    target?: TargetType;
-    download?: boolean;
-    rel?: string;
-}
-export declare const ObjectFit: {
-    readonly FILL: "fill";
-    readonly CONTAIN: "contain";
-};
-declare type ObjectFitType = typeof ObjectFit[keyof typeof ObjectFit];
+import { ButtonType, FeaturesList, IconsList, Image, Link, Price, TextsList, Title } from './types';
 export interface ICard {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
-        link?: Record<string, string>;
+        icon?: Record<string, string>;
+        imgBox?: Record<string, string>;
         button?: Record<string, string>;
+        extraButton?: Record<string, string>;
     };
-    /** Дополнительный класс корневого элемента */
+    /** Дополнительный класс для компонента */
     className?: string;
-    /** Дополнительные классы для корневого и внутренних элементов */
-    classes?: {
-        root?: string;
-        button?: string;
-        link?: string;
-        inner?: string;
-    };
-    /** Ссылка на корневой элемент */
-    rootRef?: Ref<HTMLDivElement>;
-    /** Изображение в карточке */
-    imageSrc?: string;
-    /** Значение тега alt для изображения */
-    imageAlt?: string;
-    /** Иконка в карточке */
-    svgSrc?: React.ReactNode;
-    /** Заголовок карточки */
-    title: string | React.ReactNode[] | React.ReactNode;
-    /** Текст карточки */
-    text?: string | React.ReactNode[] | React.ReactNode;
-    /** Данные для кнопки */
-    button?: IButton;
-    /** Данные для ссылки */
-    link?: ILink;
-    /** Выравнивание текста по центру */
-    isCenteredText?: boolean;
-    /** Расположение кнопки/ссылки по левой стороне */
-    isLeftHAlign?: boolean;
-    /** Высота корневого элемента 100% */
     isFullHeight?: boolean;
-    /** Ссылка для всей карточки */
-    href?: string;
-    /** Target свойство, аналогично свойству 'target' тега 'a' */
-    target?: TargetType;
-    /** Режим позиционирования изображения */
-    objectFit?: ObjectFitType;
+    /** Вид */
+    view?: 'shadow' | 'background';
+    /** Ссылка для карточки */
+    link?: Link;
+    /** Изображение */
+    image?: Image;
+    /** Иконка */
+    icon?: React.ReactNode;
+    /** Заголовок */
+    title: Title;
+    /** Список текстов */
+    textsList?: TextsList;
+    /** Список характеристик */
+    featuresList?: FeaturesList;
+    /** Список иконок */
+    iconsList?: IconsList;
+    /** Цена */
+    price?: Price;
+    /** Кнопка */
+    button?: ButtonType;
+    /** Дополнительная кнопка */
+    extraButton?: ButtonType;
+    /** Обработчик клика по карточке */
+    onClick?: () => void;
 }
 declare const Card: React.FC<ICard>;
 export default Card;