@megafon/ui-shared 4.21.2 → 5.0.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/compare/@megafon/ui-shared@4.21.2...@megafon/ui-shared@5.0.0) (2023-08-30)
+
+
+### Bug Fixes
+
+* **property:** fix default value frame color ([340cd88](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/commit/340cd88eba9746540b4a7398ca42d3af4e1647f4))
+
+
+### Features
+
+* **card:** full redesign ([7368f0d](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/commit/7368f0dfaab8964489c427f9a3b649f87a1ba10b))
+* **cardsbox:** redesign ([1952bd8](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/commit/1952bd8b50eef8ff7e6e42bf2eaa3825f85e54c6))
+* **carouselbox:** add minor features ([068a27d](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/commit/068a27d1f3e48a6b161aa50cfa73e288acdfae75))
+
+
+### BREAKING CHANGES
+
+* **cardsbox:** remove onChange, gridHAlign and rootRef props; change dataAttrs prop;
+* **card:** removed all props, added new props
+
+
+
+
+
 ## [4.21.2](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/compare/@megafon/ui-shared@4.21.1...@megafon/ui-shared@4.21.2) (2023-08-28)
 
 **Note:** Version bump only for package @megafon/ui-shared

package/dist/es/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/es/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;