Figma

Instructions

import { Instructions } from '@megafon/ui-shared';
Демо данные
const items = [
    {
        title:  'Пункт инструкции №1';
        mediaUrl: '/instructions/1.png';
        isVideo: true;
    },
    {
        title: 'Пункт инструкции №2';
        mediaUrl: '/instructions/2.png',
        isVideo: false;
    },
]

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

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

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

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

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

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

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

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

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

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

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

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

черный 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}
  additionalText="Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину"
/>

Использование с 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"
/>