Figma

PromoBadge

import { PromoBadge } from '@megafon/ui-core';

Цвета

<PromoBadge color="system-blue">Новое</PromoBadge>
<PromoBadge color="warm-red">Хит сезона</PromoBadge>
<PromoBadge color="137c">Популярное</PromoBadge>
<PromoBadge color="reflex-blue">Выбор пользователей</PromoBadge>
<PromoBadge color="brand-purple">VIP</PromoBadge>
<PromoBadge color="brand-purple-20">По интересам</PromoBadge>
<PromoBadge color="gradient-purple">SuperOffer</PromoBadge>

Размеры

<PromoBadge color="system-blue">Новое</PromoBadge>
<PromoBadge color="warm-red" size="small">Хит сезона</PromoBadge>

PriceBadge

import { PriceBadge } from '@megafon/ui-core';

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

<PriceBadge>Базовый бейдж</PriceBadge>

Размеры бейджа

<PriceBadge size="big"><div style={{ width: "350px"}}>Большой бейдж</div></PriceBadge>
<PriceBadge size="small" subTitle="с дополнительным текстом">Маленький бейдж (по умолчанию)</PriceBadge>

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

<PriceBadge size="big" subTitle="с дополнительным текстом">Большой бейдж</PriceBadge>
<PriceBadge subTitle="Дополнительный текст">Маленький бейдж доп. текст не выводит</PriceBadge>

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

<PriceBadge theme='grey'>Серая тема</PriceBadge>
<PriceBadge theme='orange'>Оранжевая тема</PriceBadge>
<PriceBadge theme='green'>Зелёная тема</PriceBadge>
<PriceBadge theme='red'>Красная тема</PriceBadge>
  <div style={{ padding: '5px', background: '#333', borderRadius: '3px' }}>
  <PriceBadge theme='light'>Светлая тема</PriceBadge>
  </div>
<PriceBadge theme='dark'>Темная тема</PriceBadge>
<PriceBadge theme='purple'>Фиолетовая тема</PriceBadge>

Иконки

Цвет иконки зависит от цветовой темы бейджа.

<PriceBadge theme='grey' iconType='timer'>Иконка таймера</PriceBadge>
<PriceBadge theme='orange' iconType='price'>Иконка рубля</PriceBadge>
<PriceBadge theme='green' iconType='check'>Иконка галочки</PriceBadge>
<PriceBadge theme='red' iconType='attention'>Иконка восклицательного знака</PriceBadge>
<PriceBadge theme='grey' iconType='info'>Иконка информации</PriceBadge>
<PriceBadge theme='green' iconType='profile'>Иконка профиля</PriceBadge>

Адаптивность

На десктопе размер бейджа будет увеличен, на мобильном устройстве - стандартного размера.

<PriceBadge theme='green' isAdaptive>Адаптивный бейдж</PriceBadge>

TimerBadge

import { TimerBadge } from '@megafon/ui-core';
Демо-данные
import { add } from 'date-fns';
 
const date = new Date();
 
const someDaysBeforeEnd = add(date, { days: 6, hours: 1 });
const someDaysAndHoursBeforeEnd = add(date, { days: 6, hours: 4 });
const someHoursAndMinutesBeforeEnd = add(date, { hours: 5, minutes: 25 });
const someHoursBeforeEnd = add(date, { hours: 5, minutes: 1 });
const someMinutesBeforeEnd = add(date, { minutes: 40 });
const someSecondsBeforeEnd = add(date, { seconds: 59 });
const someMonthsBeforeEnd = add(date, { months: 3 });

Изначально таймер отображается в режиме даты, после пересечения границы countdownStart (по умолчанию это одни сутки) таймер переключается в режим обратного отсчёта.

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

Режим даты

<TimerBadge expirationDate={someMonthsBeforeEnd} />

Режим обратного отсчёта

<TimerBadge expirationDate={someHoursBeforeEnd} />

Дополнительный текст перед таймером

Режим даты

<TimerBadge expirationDate={someMonthsBeforeEnd} hasPrefix/>

Режим обратного отсчёта

<TimerBadge expirationDate={someHoursBeforeEnd} hasPrefix/>

Кастомный дополнительный текст

Режим даты

<TimerBadge expirationDate={someMonthsBeforeEnd} hasPrefix expirationDateText="Действительно до"/>

Режим обратного отсчёта

<TimerBadge expirationDate={someHoursBeforeEnd} hasPrefix countdownText="Срок действия истечёт через"/>

Форматы отображения обратного отсчёта

Оставшееся время    Отображаемый формат 
  > 1 дня             дн / дн + ч       
  > 1 часа            ч  / ч + мин      
  < 1 часа            мин           
  < 1 минуты          сек

Меньше часа

Когда времени остается меньше часа, у иконки появляется тень.

Через одну минуту после последнего обновления страницы демо не будет соответствовать своему описанию. Для корректного отображения необходимо обновить страницу.

<TimerBadge expirationDate={someMinutesBeforeEnd} hasPrefix countdownText="Осталось несколько минут:"/>
<TimerBadge expirationDate={someSecondsBeforeEnd} hasPrefix countdownText="Осталось несколько секунд:"/>

Больше часа, меньше дня

<TimerBadge expirationDate={someHoursBeforeEnd} hasPrefix countdownText="Осталось несколько часов:"/>
<TimerBadge expirationDate={someHoursAndMinutesBeforeEnd} hasPrefix countdownText="Осталось меньше суток:"/>

Больше одного дня

  • Установлено кастомное время начала обратного отсчёта
<TimerBadge countdownStart={604800} expirationDate={someDaysBeforeEnd} hasPrefix countdownText="Осталось несколько дней:"/>
<TimerBadge countdownStart={604800} expirationDate={someDaysAndHoursBeforeEnd} hasPrefix countdownText="Осталось меньше недели:"/>

Время истекло

<TimerBadge expirationDate={new Date()}/>

CounterBadge

import { CounterBadge } from '@megafon/ui-core';

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

Общее количество

<CounterBadge totalCount={8} />
<CounterBadge totalCount={36} />
<CounterBadge totalCount={100} />

Лимитированное количество

<CounterBadge currentValue={1} totalCount={5} />
<CounterBadge currentValue={8} totalCount={30} />
<CounterBadge currentValue={25} totalCount={100} />

Иконка

По умолчанию

<CounterBadge totalCount={5} hasIcon />
<CounterBadge currentValue={30} totalCount={120} hasIcon />

Кастомная

<CounterBadge totalCount={5} hasIcon customIcon={<CustomIcon style={{ fill: '#999999'}} />} />

Цветовая тема

  • Светло-голубая (311C20, 311C) - по умолчанию
  • Фиолетовая (Brand Purple 20, Brand Purple)
<CounterBadge colorTheme="light-blue" currentValue={30} totalCount={120} hasIcon />
<CounterBadge colorTheme="purple" currentValue={30} totalCount={120} hasIcon />

Адаптивность

На десктопе размер бейджа будет увеличен, на мобильном устройстве - стандартного размера.

<CounterBadge totalCount={5} isAdaptive />
<CounterBadge totalCount={365} isAdaptive />
<CounterBadge currentValue={89} totalCount={100} isAdaptive />
<CounterBadge totalCount={120} hasIcon isAdaptive />

NotificationBadge

import { NotificationBadge } from '@megafon/ui-core';

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

<NotificationBadge autoWidth>24 сообщения</NotificationBadge>
<NotificationBadge>2</NotificationBadge>
<NotificationBadge size="medium">2</NotificationBadge>
<NotificationBadge size="small" />
<NotificationBadge theme="red" autoWidth>24 сообщения</NotificationBadge>
<NotificationBadge theme="red">2</NotificationBadge>
<NotificationBadge theme="red" size="medium">2</NotificationBadge>
<NotificationBadge theme="red" size="small" />