Instructions

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

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

<Instructions title="Как подписаться" instructionItems={items} />

Базовое использование. Большой размер картинки

Показать код

<Instructions title="Как подписаться" instructionItems={itemsBigSize} size='big' />

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

Показать код

<Instructions
      title="Как подписаться"
      instructionItems={items}
      button={{
          title: 'Подключить',
          href: '#',
      }}
  />

Базовое использование c обратным порядком элементов на планшетах и мобильных устройствах

Показать код

<Instructions title="Как подписаться" instructionItems={items} elementOrder="reversed" />

Базовое использование c нумерацией элементов на планшетах и мобильных устройствах

Показать код

<Instructions title="Как подписаться" instructionItems={items} showMobileNumeration />

Видео контент

Показать код

<Instructions
      title="Как подписаться"
      instructionItems={itemsWithVideo}
      button={{
          title: 'Подключить',
          icon: <BalanceIcon />,
          href: '#',
      }}
  />

Изображение справа

По умолчанию располагается слева

Показать код

<Instructions
      title="Как подписаться"
      instructionItems={items}
      pictureAlign='right'
      button={{
          type: 'outline',
          title: 'Подключить',
          icon: <BalanceIcon />,
          href: '#',
      }}
  />

Рамка для изображения

android

Показать код

<Instructions title="Как подписаться" instructionItems={phoneInstructionItems} pictureMask='android' />

android. Большой размер маски + фоновая картинка

Показать код

<Instructions
      title="Как подписаться"
      instructionItems={phoneInstructionItems}
      pictureMask='android'
      size='big'
      pictureOverlay='logo-spb-sky-0'
  />

android cropped

Показать код

<Instructions
      title="Как подписаться"
      instructionItems={phoneInstructionItems}
      pictureMask='android-cropped'
  />

android cropped. Большой размер маски + фоновая картинка

Показать код

<Instructions
      title="Как подписаться"
      instructionItems={phoneInstructionItems}
      pictureMask='android-cropped'
      size='big'
      pictureBackgroundColor="violet"
      pictureOverlay='logo-cropped-base-with-opacity'
  />

iphone

Показать код

<Instructions title="Как подписаться" instructionItems={phoneInstructionItems} pictureMask='iphone' />

iphone. Большой размер маски + фоновая картинка

Показать код

<Instructions
      title="Как подписаться"
      instructionItems={phoneInstructionItems}
      pictureMask='iphone'
      size='big'
      pictureOverlay='logo-spb-sky-0'
  />

iphone cropped

Показать код

<Instructions
      title="Как подписаться"
      instructionItems={phoneInstructionItems}
      pictureMask='iphone-cropped'
  />

iphone cropped. Большой размер маски

Показать код

<Instructions
      title="Как подписаться"
      instructionItems={phoneInstructionItems}
      pictureMask='iphone-cropped'
      size='big'
  />

Выравнивание девайса по верхнему краю

Показать код

<Instructions title="Как подписаться" instructionItems={phoneInstructionItems} pictureMask='iphone' pictureVerticalAlign='top' />

ноутбук

Показать код

<Instructions title="Как подписаться" instructionItems={laptopInstructionItems} pictureMask='laptop' />

ноутбук. Большой размер маски

Показать код

<Instructions title="Как подписаться" instructionItems={laptopInstructionItems} pictureMask='laptop' size='big'/>

Небольшое количество пунктов

Показать код

<Instructions title="Как подписаться" instructionItems={[items[0], items[1]]} />

Дополнительный текст

Показать код

<Instructions
  title="Как подписаться"
  instructionItems={items}
  additionalText="Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину"
  button={{
      title: 'Подключить',
      href: '#',
  }}
/>

Использование с children

Показать код

<Instructions
  title="Как подписаться"
  instructionItems={items}
>
  <strong
      style={{
          display: 'block',
          color: 'red',
          margin: '32px auto',
          textAlign: 'center'
      }}
  >
      Важное уведомление
  </strong>
</Instructions>

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

В свойствах title и text поддерживаются некоторые HTML-теги:
- для title: "<br>, <font color>, <a href>";
- для text: "<br>, <font color>, <a href>, <b>".
Также в обоих свойствах поддерживается спецсимвол &nbsp.

Показать код

<Instructions
  title='Скачивайте&nbspмобильное приложение <font color="#731982">МегаФон</font><br>по <a href="https://moscow.megafon.ru">ссылке</a>'
  instructionItems={items}
  additionalText='<b>Текстовое</b> <font color="#731982">описание</font> не<br>должно <a href="https://moscow.megafon.ru">превышать</a> 150&nbspсимволов.'
>
  <strong
      style={{
          display: 'block',
          color: 'red',
          margin: '32px auto',
          textAlign: 'center'
      }}
  >
      Важное уведомление
  </strong>
</Instructions>

Использование со стрелками навигации и фоном

Показать код

<Instructions
      instructionItems={phoneInstructionItems}
      pictureMask='iphone-cropped'
      showArrows={true}
      arrowsTheme="dark"
      pictureBackgroundColor="spbSky0"
  />

Дополнительное изображение с qr-кодом

Показать код

<Instructions
      instructionItems={qrCodeInstructionItems}
      pictureMask='iphone-cropped'
      showArrows={true}
      arrowsTheme="dark"
      pictureBackgroundColor="spbSky0"
      pictureAlign="right"
  />

Instructions

Prop name	Type	Default	Description
dataAttrs	{ root?: Record<string, string> \| undefined; item?: Record<string, string> \| undefined; image?: Record<string, string> \| undefined; mobileItemText?: Record<...> \| undefined; wrapper?: Record<...> \| undefined; arrowPrev?: Record<...> \| undefined; arrowNext?: Record<...> \| undefined; button?: Record<...> \| undefined; ...		Дополнительные data атрибуты к внутренним элементам
rootRef	Ref<HTMLDivElement> \| undefined		Ссылка на корневой элемент
classes	{ instructionItem?: string \| undefined; desktopInstructionItem?: string \| undefined; mobileInstructionItem?: string \| undefined; activeInstructionItem?: string \| undefined; ... 6 more ...; button?: string \| undefined; } \| undefined		Дополнительные классы для внутренних элементов
title	string \| undefined		Заголовок инструкции
instructionItems*	InstructionItemType[]		Пункты инструкции
additionalText	string \| undefined		Описание после инструкции
pictureAlign	PictureAlignTypesType \| undefined	left	Расположение изображения по горизонтали
pictureVerticalAlign	string \| undefined	center	Расположение изображения по вертикали
pictureMask	PictureMaskTypesType \| undefined	none	Маска изображения
pictureBackgroundColor	PictureBackgroundColorsType \| undefined	transparent	Цвет фона изображения
pictureOverlay	PictureOverlayType \| undefined	none	* Оверлей поверх цвета фона
size	SizeType \| undefined	default	Размер картинки или маски
showArrows	boolean \| undefined		Показать стрелки для смены пунктов инструкции
arrowsTheme	ArrowThemeType \| undefined	dark	Цветовая тема стрелок навигации
elementOrder	ElementOrderType \| undefined	default	Вертикальный порядок элементов на мобильных устройствах и планшетах
showMobileNumeration	boolean \| undefined		Показать нумерацию пунктов инструкции на мобильных устройствах
button	ButtonType \| undefined		Кнопка
getSwiper	((instance: Swiper) => void) \| undefined		Ref на swiper

type InstructionItemType = {
    title: string | React.ReactNode | React.ReactNode[];
    mediaUrl: string;
    isVideo: boolean;
    imageAlt?: string;
    qrCode?: string;
    qrCodeText?: string | React.ReactNode | React.ReactNode[];
};

type ButtonType = {
    title: string,
    type?: 'primary' | 'outline',
    icon?: React.JSX.Element,
    href?: string,
    target?: '_self' | '_blank' | '_parent' | '_top',
    rel?: string,
    onClick?: (e: React.SyntheticEvent<EventTarget>) => void,
};

type PictureAlignTypesType = 'left' |'right';

type PictureBackgroundColorType = 'spbSky0' | 'spbSky1' | 'base' | 'violet' | 'transparent';

type PictureMaskTypesType = 'android' | 'android-cropped' | 'iphone' | 'iphone-cropped' | 'laptop' | 'none';

type ArrowThemeType = 'purple' | 'dark';

type ElementOrderType = 'default' | 'reversed';

type SizeType = 'default' | 'big';

type PictureOverlayType =
    | 'logo-base'
    | 'logo-spb-sky-0'
    | 'logo-cropped-base-with-opacity'
    | 'logo-cropped-spb-sky-3'
    | 'none';