Instructions

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

Примеры и код

Свойства и методы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

черный iPhone

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

черный iPhone 2

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

белый iPhone

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

android

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

new iphone

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

iphone 12

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

iphone 15

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

iphone-cropped

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

android-cropped

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

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

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

ноутбук

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

ноутбук новый

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

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

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

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

<Instructions
  title="Как подписаться"
  instructionItems={items}
  itemsGap="medium"
  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={iphoneCropedInstructionItems}
  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[]		Пункты инструкции
itemsGap	"large" \| "medium" \| undefined		Отступ между пунктами инструкции. DEPRECATED: 'large'
additionalText	string \| undefined		Описание после инструкции
pictureAlign	PictureAlignTypesType \| undefined	left	Расположение изображения по горизонтали
pictureVerticalAlign	string \| undefined	center	Расположение изображения по вертикали
pictureMask	PictureMaskTypesType \| undefined	none	Маска изображения
pictureBackgroundColor	"spbSky0" \| undefined		Цвет фона изображения
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 PictureMaskTypesType =
    | 'android'
    | 'android-cropped'
    | 'new-iphone'
    | 'black-iphone'
    | 'white-iphone'
    | 'laptop'
    | 'iphone-12'
    | 'iphone-15'
    | 'iphone-cropped'
    | 'none';

type ArrowThemeType = 'purple' | 'dark';

type ElementOrderType = 'default' | 'reversed';