Figma

StoreBanner

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

Демо данные
const title = 'Скачивайте мобильное приложение МегаФон';
const text = 'Скачай и получи максимум';
const link = '#';
const onClick = () => {};

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

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGalaxyStore={link}
      onClickGalaxyStore={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      linkRuStore={link}
      onClickRuStore={onClick}
      linkHuawei={link}
      onClickHuawei={onClick}
      linkMiStore={link}
      onClickMiStore={onClick}
      linkVAppstore={link}
      onClickVAppstore={onClick}
      imageSrc={image.src}
      deviceMask="new-iphone"
  />
</ContentArea>

Шаблоны девайсов

iPhone

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      imageSrc={image.src}
      deviceMask="new-iphone"
  />
</ContentArea>

Android

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      imageSrc={androidImage.src}
      deviceMask="android"
  />
</ContentArea>

Цветовые темы

Зеленая

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      imageSrc={image.src}
      theme="green"
      deviceMask="new-iphone"
  />
</ContentArea>

Серая 1

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      imageSrc={image.src}
      theme="spbSky1"
      deviceMask="android"
  />
</ContentArea>

Серая 2

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      imageSrc={image.src}
      theme="spbSky0"
      deviceMask="android"
  />
</ContentArea>

QR-код

1 стор

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      imageSrc={image.src}
      qrCode={qrCode.src}
      deviceMask="new-iphone"
  />
</ContentArea>

2 стора

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      imageSrc={image.src}
      qrCode={qrCode.src}
      deviceMask="new-iphone"
  />
</ContentArea>

3 стора

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      linkHuawei={link}
      onClickHuawei={onClick}
      imageSrc={image.src}
      qrCode={qrCode.src}
      deviceMask="new-iphone"
  />
</ContentArea>

Кнопка

На белом фоне

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkButton="#"
      imageSrc={image.src}
      deviceMask="new-iphone"
  />
</ContentArea>

На зеленом фоне

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkButton="#"
      imageSrc={image.src}
      deviceMask="new-iphone"
      theme="green"
  />
</ContentArea>

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

В свойствах title и text поддерживаются некоторые HTML-теги:
- для title: "<br>, <font color>, <a href>";
- для text: "<br>, <font color>, <a href>, <b>".
Также в обоих свойствах поддерживается спецсимвол &nbsp.
Демо данные
const htmlTitle ='Скачивайте&nbspмобильное приложение <font color="#731982">МегаФон</font><br>по <a href="https://moscow.megafon.ru">ссылке</a>';
const htmlText = '<a href="https://moscow.megafon.ru">Скачай</a>&nbspи<br><font color="#731982">получи</font> <b>максимум</b>';
<ContentArea>
  <StoreBanner
      title={htmlTitle}
      text={htmlText}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      imageSrc={androidImage.src}
      deviceMask="android"
  />
</ContentArea>

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

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      linkVAppstore={link}
      onClickVAppstore={onClick}
      imageSrc={image.src}
      deviceMask="new-iphone"
      isContentLeftMobile
  />
</ContentArea>