PromoBadge

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

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

Темы

<PromoBadge type="hit">Хит сезона</PromoBadge>
<PromoBadge type="new">Новое</PromoBadge>
<PromoBadge type="vip">VIP</PromoBadge>
<PromoBadge type="popular">Популярное</PromoBadge>
<PromoBadge type="user-choice">Выбор пользователей</PromoBadge>
<PromoBadge type="interests">По интересам</PromoBadge>

<PromoBadge type="hit">Хит сезона</PromoBadge>
<PromoBadge type="new">Новое</PromoBadge>
<PromoBadge type="vip">VIP</PromoBadge>
<PromoBadge type="popular">Популярное</PromoBadge>
<PromoBadge type="user-choice">Выбор пользователей</PromoBadge>
<PromoBadge type="interests">По интересам</PromoBadge>

PriceBadge

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

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

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

Базовый бейдж

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

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

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

Большой бейдж

Маленький бейдж (по умолчанию)

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

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

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

Большой бейдж

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

Маленький бейдж доп. текст не выводит

<PriceBadge size="big" subTitle="с дополнительным текстом">
  Большой бейдж
</PriceBadge>
<PriceBadge 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>

<PriceBadge theme="grey">Серая тема</PriceBadge>
<PriceBadge theme="orange">Оранжевая тема</PriceBadge>
<PriceBadge theme="green">Зелёная тема</PriceBadge>
<PriceBadge theme="red">Красная тема</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="timer">
  Иконка таймера
</PriceBadge>
<PriceBadge theme="orange" iconType="price">
  Иконка рубля
</PriceBadge>
<PriceBadge theme="green" iconType="check">
  Иконка галочки
</PriceBadge>
<PriceBadge theme="red" iconType="attention">
  Иконка восклицательного знака
</PriceBadge>

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

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

Адаптивный бейдж

<PriceBadge theme="green" isAdaptive>
  Адаптивный бейдж
</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 (по умолчанию это одни сутки) таймер переключается в режим обратного отсчёта.

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

Режим даты

12 июля 2023

<TimerBadge expirationDate={someMonthsBeforeEnd} />

<TimerBadge expirationDate={someMonthsBeforeEnd} />

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

12 апреля 2023

<TimerBadge expirationDate={someHoursBeforeEnd} />

<TimerBadge expirationDate={someHoursBeforeEnd} />

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

Режим даты

Воспользуйтесь до 12 июля 2023

<TimerBadge expirationDate={someMonthsBeforeEnd} hasPrefix />

<TimerBadge expirationDate={someMonthsBeforeEnd} hasPrefix />

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

Воспользуйтесь до 12 апреля 2023

<TimerBadge expirationDate={someHoursBeforeEnd} hasPrefix />

<TimerBadge expirationDate={someHoursBeforeEnd} hasPrefix />

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

Режим даты

Действительно до 12 июля 2023

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

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

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

Воспользуйтесь до 12 апреля 2023

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

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

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

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

Меньше часа

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

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

Воспользуйтесь до 12 апреля 2023

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

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

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

Воспользуйтесь до 12 апреля 2023

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

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

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

Установлено кастомное время начала обратного отсчёта

Воспользуйтесь до 18 апреля 2023

<TimerBadge
  countdownStart={604800}
  expirationDate={someDaysBeforeEnd}
  hasPrefix
  countdownText="Осталось несколько дней:"
/>
<TimerBadge
  countdownStart={604800}
  expirationDate={someDaysAndHoursBeforeEnd}
  hasPrefix
  countdownText="Осталось меньше недели:"
/>

<TimerBadge
  countdownStart={604800}
  expirationDate={someDaysBeforeEnd}
  hasPrefix
  countdownText="Осталось несколько дней:"
/>
<TimerBadge
  countdownStart={604800}
  expirationDate={someDaysAndHoursBeforeEnd}
  hasPrefix
  countdownText="Осталось меньше недели:"
/>

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

Время действия истекло

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

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