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>; item?: Record<string, string>; image?: Record<string, string>; mobileItemText?: Record<string, string>; wrapper?: Record<string, string>; arrowPrev?: Record<...>; arrowNext?: Record<...>; button?: Record<...>; }		Дополнительные data атрибуты к внутренним элементам
rootRef	Ref<HTMLDivElement>		Ссылка на корневой элемент
classes	{ instructionItem?: string; desktopInstructionItem?: string; mobileInstructionItem?: string; activeInstructionItem?: string; desktopItemTitle?: string; mobileItemTitle?: string; instructionItemImg?: string; additionalText?: string; arrowPrev?: string; arrowNext?: string; button?: string; }		Дополнительные классы для внутренних элементов
title	string		Заголовок инструкции
instructionItems*	InstructionItemType[]		Пункты инструкции
itemsGap	"medium" \| "large"		Отступ между пунктами инструкции. DEPRECATED: 'large'
additionalText	string		Описание после инструкции
pictureAlign	PictureAlignTypesType	left	Расположение изображения по горизонтали
pictureVerticalAlign	string	center	Расположение изображения по вертикали
pictureMask	PictureMaskTypesType	none	Маска изображения
pictureBackgroundColor	"spbSky0"		Цвет фона изображения
showArrows	boolean		Показать стрелки для смены пунктов инструкции
arrowsTheme	ArrowThemeType	dark	Цветовая тема стрелок навигации
elementOrder	ElementOrderType	default	Вертикальный порядок элементов на мобильных устройствах и планшетах
showMobileNumeration	boolean		Показать нумерацию пунктов инструкции на мобильных устройствах
button	ButtonType		Кнопка
getSwiper	(instance: Swiper) => void		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';