PromoBadge

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

Цвета

<PromoBadge color="flamingo">Хит сезона</PromoBadge>
<PromoBadge color="berry">Популярное</PromoBadge>
<PromoBadge color="sky">Текст</PromoBadge>
<PromoBadge color="night">Выбор пользователей</PromoBadge>
<PromoBadge color="brand-purple">Новое</PromoBadge>
<PromoBadge color="brand-purple-20">По интересам</PromoBadge>
<PromoBadge color="gradient-purple">МегаСюрприз</PromoBadge>
<PromoBadge color="gray">Текст</PromoBadge>

Размеры

Показать код

<PromoBadge color="flamingo" size="medium">Хит сезона</PromoBadge>
<PromoBadge color="flamingo" size="small">Хит сезона</PromoBadge>

Prop name	Type	Default	Description
color	PromoBadgeColorsType \| undefined	sky	Цвет промо-бэйджа
size	PromoBadgeSizeType \| undefined	medium	Размер промо-бэйджа
className	string \| undefined		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string> \| undefined; } \| undefined		Дополнительные data-атрибуты к внутренним элементам

InfoBadge

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

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

Показать код

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

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

Показать код

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

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

Показать код

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

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

Показать код

<InfoBadge theme='grey'>Серая тема</InfoBadge>
<InfoBadge theme='orange'>Оранжевая тема</InfoBadge>
<InfoBadge theme='green'>Зелёная тема</InfoBadge>
<InfoBadge theme='red'>Красная тема</InfoBadge>
  <div style={{ padding: '5px', background: '#333', borderRadius: '3px' }}>
  <InfoBadge theme='light'>Светлая тема</InfoBadge>
  </div>
<InfoBadge theme='dark'>Темная тема</InfoBadge>
<div style={{ padding: '5px', background: 'var(--content)', borderRadius: '3px' }}>
  <InfoBadge theme='white-green'>Бело-зелёная тема</InfoBadge>
</div>
<div style={{ padding: '5px', background: 'var(--content)', borderRadius: '3px' }}>
  <InfoBadge theme='white-orange'>Бело-оранжевая тема</InfoBadge>
</div>
<div style={{ padding: '5px', background: 'var(--content)', borderRadius: '3px' }}>
  <InfoBadge theme='white-gray'>Бело-серая тема</InfoBadge>
</div>
<div style={{ padding: '5px', background: 'var(--content)', borderRadius: '3px' }}>
  <InfoBadge theme='white-red'>Бело-красная тема</InfoBadge>
</div>

Иконки

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

Показать код

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

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

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

Показать код

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

Prop name	Type	Default	Description
isAdaptive	boolean \| undefined	false	Адаптивный режим
iconType	InfoBadgeIconType \| undefined	timer	Тип иконки
theme	InfoBadgeThemeType \| undefined	grey	Цветовая тема
className	string \| undefined		Дополнительный класс корневого элемента
size	InfoBadgeSizeType \| undefined	small	Размер бейджа
subTitle	string \| undefined		Дополнительный текст (только для size="big")
dataAttrs	{ root?: Record<string, string> \| undefined; } \| undefined		Дополнительные data-атрибуты к внутренним элементам

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()}/>

Кастомный текст, когда время истекло

Показать код

<TimerBadge expirationDate={new Date()} countdownEndText="Время подошло к концу" />

Prop name	Type	Default	Description
expirationDate*	Date		Дата окончания таймера
countdownStart	number \| undefined	86400	Граница переключения в режим обратного отсчёта, в секундах
hasPrefix	boolean \| undefined	false	Отображение дополнительного текста
countdownText	string \| undefined	Закончится через	Текст перед таймером в режиме обратного отсчета. Появляется при hasPrefix=true.
expirationDateText	string \| undefined	Воспользуйтесь до	Текст перед таймером в режиме даты. Появляется при hasPrefix=true.
countdownEndText	string \| undefined	Время действия истекло	Кастомный текст после окончания обратного отсчета
className	string \| undefined		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string> \| undefined; text?: Record<string, string> \| undefined; timer?: Record<string, string> \| undefined; iconContainer?: Record<...> \| undefined; } \| undefined		Дополнительные data-атрибуты к внутренним элементам

CounterBadge

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

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

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

Показать код

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

Иконка

По умолчанию

Показать код

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

Кастомная

Показать код

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

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

Светло-голубая (sky20, sky) - по умолчанию
Фиолетовая (Brand Purple 20, Brand Purple)
Белая (Base, Brand Purple)

Показать код

<CounterBadge colorTheme="light-blue" currentValue={30} totalCount={120} hasIcon />
<CounterBadge colorTheme="purple" currentValue={30} totalCount={120} hasIcon />
<CounterBadge colorTheme="white" currentValue={30} totalCount={120} hasIcon />

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

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

Показать код

<CounterBadge currentValue={89} totalCount={100} isAdaptive />

Prop name	Type	Default	Description
currentValue*	number		Текущее значение
totalCount	number \| undefined		Максимальное значение
hasIcon	boolean \| undefined	false	Наличие иконки
customIcon	Element \| undefined		Кастомная иконка
colorTheme	CounterBadgeColorThemeType \| undefined	light-blue	Цветовая тема
isAdaptive	boolean \| undefined	false	Адаптивный режим
className	string \| undefined		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string> \| undefined; } \| undefined		Дополнительные data-атрибуты к внутренним элементам

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" />

Prop name	Type	Default	Description
theme	NotificationBadgeThemeType \| undefined	green	Цветовая тема
size	NotificationBadgeSizeType \| undefined	big	Размер бейджа
autoWidth	boolean \| undefined	false	Ширина по размеру содержимого
className	string \| undefined		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string> \| undefined; } \| undefined		Дополнительные data-атрибуты к внутренним элементам

StatusBadge

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

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

Показать код


  <StatusBadge>Статус</StatusBadge>

Иконки

Показать код


  <StatusBadge view="icon" iconType="timer">Статус</StatusBadge>
  <StatusBadge view="icon" iconType="attention">Статус</StatusBadge>
  <StatusBadge view="icon" iconType="checkInvert">Статус</StatusBadge>
  <StatusBadge view="icon" iconType="info">Статус</StatusBadge>
  <StatusBadge view="icon" iconType="price">Статус</StatusBadge>
  <StatusBadge view="icon" iconType="profileFull">Статус</StatusBadge>

Цветовые темы по-умолчанию

Показать код


  <StatusBadge theme="green">Активна</StatusBadge>
  <StatusBadge theme="blue">Запланирована</StatusBadge>
  <StatusBadge theme="gray">Завершена</StatusBadge>
  <StatusBadge theme="orange">Приостановлена</StatusBadge>
  <StatusBadge theme="red">Ошибка</StatusBadge>

  <StatusBadge theme="green" view="icon">Активна</StatusBadge>
  <StatusBadge theme="blue" view="icon">Запланирована</StatusBadge>
  <StatusBadge theme="gray" view="icon">Завершена</StatusBadge>
  <StatusBadge theme="orange" view="icon">Приостановлена</StatusBadge>
  <StatusBadge theme="red" view="icon">Ошибка</StatusBadge>

Цветовые темы ( светлая )

Показать код


  <StatusBadge theme="green" background="light" view="icon">Активна</StatusBadge>
  <StatusBadge theme="blue" background="light" view="icon">Запланирована</StatusBadge>
  <StatusBadge theme="gray" background="light" view="icon">Завершена</StatusBadge>
  <StatusBadge theme="orange" background="light" view="icon">Приостановлена</StatusBadge>
  <StatusBadge theme="red" background="light" view="icon">Ошибка</StatusBadge>

  <StatusBadge theme="green" background="light" view="icon" isAdaptive>Активна</StatusBadge>
  <StatusBadge theme="blue" background="light" view="icon" isAdaptive>Запланирована</StatusBadge>
  <StatusBadge theme="gray" background="light" view="icon" isAdaptive>Завершена</StatusBadge>
  <StatusBadge theme="orange" background="light" view="icon" isAdaptive>Приостановлена</StatusBadge>
  <StatusBadge theme="red" background="light" view="icon" isAdaptive>Ошибка</StatusBadge>

Цветовые темы ( тёмная )

Показать код


  <StatusBadge theme="green" background="dark" view="icon">Активна</StatusBadge>
  <StatusBadge theme="blue" background="dark" view="icon">Запланирована</StatusBadge>
  <StatusBadge theme="gray" background="dark" view="icon">Завершена</StatusBadge>
  <StatusBadge theme="orange" background="dark" view="icon">Приостановлена</StatusBadge>
  <StatusBadge theme="red" background="dark" view="icon">Ошибка</StatusBadge>

  <StatusBadge theme="green" background="dark" view="icon" isAdaptive>Активна</StatusBadge>
  <StatusBadge theme="blue" background="dark" view="icon" isAdaptive>Запланирована</StatusBadge>
  <StatusBadge theme="gray" background="dark" view="icon" isAdaptive>Завершена</StatusBadge>
  <StatusBadge theme="orange" background="dark" view="icon" isAdaptive>Приостановлена</StatusBadge>
  <StatusBadge theme="red" background="dark" view="icon" isAdaptive>Ошибка</StatusBadge>

Тултип

Показать код


  <StatusBadge tooltip={{ title: 'Заголовок', text: 'Описание статуса', buttonText: 'Подробнее' }}>Статус</StatusBadge>
  <StatusBadge view="icon" tooltip={{ title: 'Заголовок', text: 'Описание статуса', buttonText: 'Подробнее' }}>Статус</StatusBadge>

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

Позволяет сделать на десктопе бейдж увеличенного размера

Показать код


  <StatusBadge isAdaptive>Статус</StatusBadge>
  <StatusBadge isAdaptive tooltip={{ title: 'Заголовок', text: 'Описание статуса', buttonText: 'Подробнее' }}>Статус</StatusBadge>

  <StatusBadge isAdaptive view="icon">Статус</StatusBadge>
  <StatusBadge isAdaptive view="icon" tooltip={{ title: 'Заголовок', text: 'Описание статуса', buttonText: 'Подробнее' }}>Статус</StatusBadge>

Prop name	Type	Default	Description
view	"dot" \| "icon" \| undefined	dot	Вид компонента
background	"light" \| "dark" \| undefined		Цвет компонента
theme	"green" \| "white" \| "gray" \| "blue" \| "red" \| "orange" \| undefined	green	Тема компонента
iconType	"info" \| "timer" \| "attention" \| "price" \| "checkInvert" \| "profileFull" \| undefined	timer	Тип иконки (для view = icon)
isAdaptive	boolean \| undefined	false	Адаптивный режим
tooltip	TooltipPropsType \| undefined		Тултип
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ root?: string \| undefined; container?: string \| undefined; tooltip?: string \| undefined; tooltipButton?: string \| undefined; tooltipCloseButton?: string \| undefined; } \| undefined		Дополнительные классы для внутренних элементов
dataAttrs	{ root?: Record<string, string> \| undefined; container?: Record<string, string> \| undefined; icon?: Record<string, string> \| undefined; arrow?: Record<string, string> \| undefined; tooltip?: Record<...> \| undefined; tooltipButton?: Record<...> \| undefined; tooltipCloseButton?: Record<...> \| undefined; } \| undefined		Дополнительные data-атрибуты к внутренним элементам

type TooltipPropsType {
    /** Заголовок */
    title?: string;
    /** Текст кнопки */
    buttonText?: string;
    /** Текст */
    text?: string;
    /** Позиционирование относительно триггер-элемента */
    placement?: PlacementType;
    /** Пересчет позиции тултипа в скрытом состоянии при изменении размера окна */
    isHiddenResize?: boolean;
    /** Отрендерить компонент в корневой элементе страницы body */
    isPortal?: boolean;
    /** Рендеринг компонента в указанном селекторе */
    portalSelector?: string;
    /** Обработчик на открытие */
    onOpen?: (e: AccessibilityEventTypeNative | FocusEvent) => void;
    /** Обработчик на закрытие */
    onClose?: (e: AccessibilityEventTypeNative | FocusEvent) => void;
    /** Обработчик на клик по кнопке закрытия */
    onCloseButtonClick?: (e: AccessibilityEventType) => void;
    /** Обработчик клика по кнопке */
    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
}