Figma

VideoBanner

import { VideoBanner } from '@megafon/ui-shared';

Демо данные
const content: IContent = {
    title: 'Текст ≈40 симовлов. Короткие слова',
    description: 'Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.',
    href: '#',
    buttonTitle: 'Текст в кнопке',
    buttonColor: 'green',
    onButtonClick: () => {},
    textColor: 'black',
    linkTitle: 'Личный кабинет услуги',
    linkUrl: '#',
    cost: 'oт <b>1000 ₽</b> за сообщение',
}


const breadcrumbs = [
    {
        title: 'МегаФон',
        href: '#',
    },
    {
        title: 'Мобильная связь',
        href: '#',
    },
    {
        title: 'Тарифы',
        href: '#',
    },
];

Если в компоненте выбран тип видео 'youtube', то в качестве источника необходимо указать id видео:
<VideoBanner videoType="youtube" videoSrc="2Sps5MnvlKM" />


Если в компоненте не указан источник видео, то необходимо добавить изображения для всех разрешений.
<VideoBanner imageMobile='imageMobile' imageTablet='imageMobile' imageDesktop='imageDesktop' imageDesktopWide='imageDesktop' />

Базовое использование

На мобильном разрешении отображается только картинка.

<ContentArea>
  <VideoBanner videoType="video" videoSrc={video} imageMobile={imageMobile.src} imageTablet={imageMobile.src} />
</ContentArea>

Контент

<ContentArea>
  <VideoBanner videoType="video" videoSrc={video} content={content} imageMobile={imageMobile.src} imageTablet={imageMobile.src} />
</ContentArea>

Без кнопки

<ContentArea>
  <VideoBanner videoType="video" videoSrc={video} content={contentWithoutButton} imageMobile={imageMobile.src} imageTablet={imageMobile.src} />
</ContentArea>

Только изображение

<ContentArea>
  <VideoBanner imageMobile={imageMobile.src} imageTablet={imageMobile.src} imageDesktop={imageDesktop.src} imageDesktopWide={imageDesktop.src} content={content} />
</ContentArea>

Хлебные крошки

<ContentArea>
  <VideoBanner imageMobile={imageMobile.src} imageTablet={imageMobile.src} imageDesktop={imageDesktop.src} imageDesktopWide={imageDesktop.src} content={content} breadcrumbs={breadcrumbs} />
</ContentArea>

Видео с youtube

<ContentArea>
  <VideoBanner videoType="youtube" videoSrc={youtubeVideoId} imageMobile={imageMobile.src} imageTablet={imageMobile.src} />
</ContentArea>

Проигрывание видео на мобильном разрешении

<ContentArea>
  <VideoBanner videoType="youtube" videoSrc={youtubeVideoId} videoMobile imageMobile={imageMobile.src} imageTablet={imageMobile.src} />
</ContentArea>

Определение цвета текста

На всех разрешениях тёмный цвет текста

<ContentArea>
  <VideoBanner imageMobile={images.imageMobile} imageTablet={images.imageTablet.src} imageDesktop={images.imageDesktop.src} imageDesktopWide={images.imageDesktopWide.src} content={contentWithDefaultTextColor} breadcrumbs={breadcrumbs} />
</ContentArea>

Светлый цвет текста на мобильном разрешении

<ContentArea>
  <VideoBanner imageMobile={imageMobile.src} imageTablet={images.imageTablet.src} imageDesktop={images.imageDesktop.src} imageDesktopWide={images.imageDesktopWide.src} content={contentWithDifferentTextColor} />
</ContentArea>

С тенью в нижней части

<ContentArea>
  <VideoBanner imageMobile={images.imageMobile} imageTablet={images.imageTablet.src} imageDesktop={images.imageDesktop.src} imageDesktopWide={images.imageDesktopWide.src} content={contentWithDefaultTextColor} breadcrumbs={breadcrumbs} bottomShadow />
</ContentArea>

Цвета кнопок

<ContentArea>
  <VideoBanner imageMobile={imageMobile.src} imageTablet={imageMobile.src} imageDesktop={imageDesktop.src} imageDesktopWide={imageDesktop.src} content={content} />
  <br/>
  <VideoBanner imageMobile={imageMobile.src} imageTablet={imageMobile.src} imageDesktop={imageDesktop.src} imageDesktopWide={imageDesktop.src} content={contentWithPurpleButton} />
</ContentArea>

HTML-теги и спецсимволы

В свойстве content в свойствах title и description поддерживаются некоторые HTML-теги: "<br>, <font color>, <a href>".


Также в обоих свойствах поддерживается спецсимвол &nbsp.
Демо данные
const htmlTitle: '<a  href="https://moscow.megafon.ru">Текст</a><br><font color="#731982">≈40</font> символов.&nbspКороткие слова',
const htmlDescription = 'Описание&nbspдолжно <a href="https://moscow.megafon.ru">быть</a> <font color="#731982">примерно</font> не более 130 символов.<br>Пишите содержательно, кратно и не будет проблем с текстовым контентом.';
<ContentArea>
  <VideoBanner videoType="video" videoSrc={video} content={contentWithHtml} imageMobile={imageMobile.src} imageTablet={imageMobile.src} />
</ContentArea>