@megafon/ui-shared 2.0.0-beta.98 → 2.1.0

package/dist/es/components/VideoBanner/VideoBanner.css

@@ -5,133 +5,212 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-video-banner {
+.mfui-video-banner {
   position: relative;
   overflow: hidden;
 }
-.mfui-beta-video-banner__wrapper {
+@media screen and (min-width: 1280px) {
+  .mfui-video-banner {
+    margin-right: -80px;
+    margin-left: -80px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-video-banner {
+    margin-right: -64px;
+    margin-left: -64px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-video-banner {
+    margin-right: -48px;
+    margin-left: -48px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-banner {
+    margin-right: -16px;
+    margin-left: -16px;
+  }
+}
+.mfui-video-banner__wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  height: 400px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-height: 400px;
 }
 @media screen and (min-width: 1440px) {
-  .mfui-beta-video-banner__wrapper {
+  .mfui-video-banner__wrapper {
     height: 562px;
   }
 }
 @media screen and (min-width: 1280px) and (max-width: 1439px) {
-  .mfui-beta-video-banner__wrapper {
+  .mfui-video-banner__wrapper {
     height: 500px;
   }
 }
-@media screen and (min-width: 1280px) {
-  .mfui-beta-video-banner__wrapper {
-    padding-left: 80px;
-    padding-right: 80px;
-  }
-}
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-video-banner__wrapper {
-    padding-left: 64px;
-    padding-right: 64px;
+  .mfui-video-banner__wrapper {
+    max-height: 440px;
+    padding-top: 52px;
+    padding-bottom: 52px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-video-banner__wrapper {
-    padding-left: 48px;
-    padding-right: 48px;
+  .mfui-video-banner__wrapper {
+    max-height: 440px;
+    padding-top: 64px;
+    padding-bottom: 64px;
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-video-banner__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;
-            justify-content: center;
-    padding-left: 16px;
-    padding-right: 16px;
+  .mfui-video-banner__wrapper {
+    max-height: 488px;
+    padding-top: 42px;
+    padding-bottom: 42px;
   }
 }
-.mfui-beta-video-banner__video {
-  max-width: 100%;
-}
-.mfui-beta-video-banner__background-image,
-.mfui-beta-video-banner__video {
+.mfui-video-banner__background-image,
+.mfui-video-banner__video {
   position: absolute;
-  left: 50%;
   top: 50%;
+  left: 50%;
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
 }
-@media screen and (min-width: 1024px) {
-  .mfui-beta-video-banner__background-image_mobile {
-    display: none;
-  }
+.mfui-video-banner__background-image {
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
-.mfui-beta-video-banner__content {
+.mfui-video-banner__content {
+  position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  position: relative;
-  z-index: 1;
-  -ms-flex-item-align: center;
-      align-self: center;
-  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-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-  width: 550px;
-  height: 320px;
+}
+@media screen and (min-width: 1440px) {
+  .mfui-video-banner__content {
+    max-height: calc(562px - 2 * 70px);
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-video-banner__content {
+    max-height: calc(500px - 2 * 70px);
+  }
 }
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-video-banner__content {
-    width: 512px;
-    height: 296px;
+  .mfui-video-banner__content {
+    max-height: calc(440px - 2 * 52px);
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-video-banner__content {
-    width: 384px;
-    height: 272px;
+  .mfui-video-banner__content {
+    max-height: calc(440px - 2 * 64px);
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-banner__content {
+    max-height: calc(488px - 2 * 42px);
+  }
+}
+.mfui-video-banner__content_text-color_black {
+  color: #333333;
+}
+.mfui-video-banner__content_text-color_white {
+  color: #FFFFFF;
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-banner__content_text-color-mobile_black {
+    color: #333333;
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-video-banner__content {
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    width: 288px;
-    height: 316px;
+  .mfui-video-banner__content_text-color-mobile_white {
+    color: #FFFFFF;
   }
 }
-.mfui-beta-video-banner__text {
+.mfui-video-banner__description {
   margin-bottom: 32px;
+  white-space: pre-wrap;
 }
-.mfui-beta-video-banner__title {
+.mfui-video-banner__title {
   margin-bottom: 24px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-video-banner__title {
+  .mfui-video-banner__title {
     margin-bottom: 20px;
   }
 }
+.mfui-video-banner__title,
+.mfui-video-banner__text {
+  white-space: pre-wrap;
+}
 @media screen and (max-width: 767px) {
-  .mfui-beta-video-banner__title,
-  .mfui-beta-video-banner__text {
+  .mfui-video-banner__title,
+  .mfui-video-banner__text {
     text-align: center;
   }
 }
+.mfui-video-banner__btns-wrapper {
+  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: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  margin: -24px -10px 0;
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-banner__btns-wrapper {
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
+}
+@media screen and (max-width: 479px) {
+  .mfui-video-banner__btns-wrapper {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+}
+.mfui-video-banner__link,
+.mfui-video-banner__button {
+  margin: 24px 10px 0;
+}
+.mfui-video-banner__cost {
+  font-size: 12px;
+  line-height: 16px;
+  margin-bottom: 18px;
+}
+.mfui-video-banner__value {
+  display: inline;
+  margin: 0 3px;
+}
+.mfui-video-banner__content,
+.mfui-video-banner__breadcrumbs {
+  z-index: 1;
+}
+.mfui-video-banner__breadcrumbs {
+  position: absolute;
+  top: 32px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-banner__breadcrumbs {
+    display: none;
+  }
+}
+.mfui-video-banner__grid {
+  width: 100%;
+}

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

@@ -1,31 +1,72 @@
-import * as React from 'react';
+import React, { Ref } from 'react';
+import { Props as BreadcrumbsPropsType } from '../Breadcrumbs/Breadcrumbs';
 import './VideoBanner.less';
-export declare const VideoTypes: {
+declare type BreadCrumbsItemsType = BreadcrumbsPropsType['items'];
+export declare enum ClassName {
+    BUTTON = "button",
+    LINK = "link"
+}
+export declare const VideoType: {
     readonly YOUTUBE: "youtube";
     readonly VIDEO: "video";
 };
-declare type VideoType = typeof VideoTypes[keyof typeof VideoTypes];
+declare type VideoType = typeof VideoType[keyof typeof VideoType];
+export declare const ButtonColor: {
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+};
+export declare type ButtonColorType = typeof ButtonColor[keyof typeof ButtonColor];
+export declare const TextColor: {
+    readonly BLACK: "black";
+    readonly WHITE: "white";
+};
+declare type TextColorType = typeof TextColor[keyof typeof TextColor];
 export interface IContent {
     /** Заголовок */
     title: string;
     /** Текст-описание */
     description: string;
     /** Текст кнопки */
-    buttonTitle: string;
+    buttonTitle?: string;
     /** Ссылка на кнопке */
-    href?: string;
+    buttonHref?: string;
+    /** Добавляет атрибут download для тега <a> компонента Button */
+    buttonDownload?: boolean;
+    /** Цвет кнопки */
+    buttonColor?: ButtonColorType;
     /** Обработчик клика по кнопке */
     onButtonClick?: (e: React.SyntheticEvent<EventTarget>) => void;
-}
-export interface IImage {
-    /** Изображение для мобильных устройств */
-    mobile: string;
-    /** Изображение для компьютерных устройств */
-    desktop?: string;
+    /** Обработчик клика по ссылке */
+    onLinkClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Цвет текста */
+    textColor?: TextColorType;
+    /** Цвет текста на мобильном разрешении */
+    textColorMobile?: TextColorType;
+    /** Текст ссылки */
+    linkTitle?: string;
+    /** Адрес ссылки */
+    linkUrl?: string;
+    /** Добавляет атрибут download для тега <a> компонента TextLink */
+    linkDownload?: boolean;
+    /** Строка со стоимостью услуги */
+    cost?: string;
 }
 interface IVideoBannerProps {
-    /** Фоновые изображения */
-    image: IImage;
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        link?: string;
+        breadcrumbs?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement>;
     /** Данные для блока с контентом */
     content?: IContent;
     /** Источник видео. */
@@ -34,6 +75,16 @@ interface IVideoBannerProps {
     videoType?: VideoType;
     /** Наличие звука в видео */
     isMuted?: boolean;
+    /** Изображение для мобильного разрешения */
+    imageMobile: string;
+    /** Изображение для планшетного разрешения */
+    imageTablet: string;
+    /** Изображение для компьютерного разрешения */
+    imageDesktop?: string;
+    /** Изображение для большого компьютерного разрешения */
+    imageDesktopWide?: string;
+    /** Хлебные крошки */
+    breadcrumbs?: BreadCrumbsItemsType;
 }
 declare const VideoBanner: React.FC<IVideoBannerProps>;
 export default VideoBanner;