TitleDescriptionBox

import { TitleDescriptionBox } from '@megafon/ui-shared';

Контент

Заголовок и описание

<TitleDescriptionBox
  title="Интернет"
  description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
/>

Только заголовок

Показать код

<TitleDescriptionBox
  title="Интернет"
/>

Только описание

Показать код

<TitleDescriptionBox
  description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
/>

Несколько описаний

Показать код

<TitleDescriptionBox
  title="Интернет"
  description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
/>
<TitleDescriptionBox
  description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
/>
<TitleDescriptionBox
  description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
/>

Горизонтальное выравнивание

Показать код

<TitleDescriptionBox
  title="Интернет"
  description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
  align="center"
/>

Цвет текста

Показать код

<TitleDescriptionBox
  title="Интернет"
  description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
  textColor="white"
/>

Кнопка

Короткий заголовок и кнопка

Показать код

<TitleDescriptionBox
  title="Короткий заголовок"
  button={{
      title: "Все сервисы",
      showArrow: true,
  }}
/>

Длинный заголовок и кнопка

Показать код

<TitleDescriptionBox
  title="Пример длинного заголовка, который нужно ограничить по ширине"
  button={{
      title: "Все сервисы",
      showArrow: true,
  }}
/>

Заголовок, описание и кнопка

Показать код

<TitleDescriptionBox
  title="Заголовок и текст с подписью"
  description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
  button={{
      title: "Все сервисы",
      showArrow: true,
  }}
/>

Prop name	Type	Default	Description
dataAttrs	{ root?: Record<string, string> \| undefined; button?: Record<string, string> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
rootRef	Ref<HTMLDivElement> \| undefined		Ссылка на корневой элемент
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ root?: string \| undefined; button?: string \| undefined; } \| undefined	{}	Дополнительные классы для внутренних элементов
title	ReactNode \| ReactNode[]		Заголовок
description	ReactNode \| ReactNode[]		Описание
textColor	"white" \| undefined		Цвет текста
align	"center" \| undefined		Горизонтальное выравнивание (в состоянии без кнопки)
button	ButtonType \| undefined		Кнопка

type ButtonType = {
    /** Название */
    title: string;
    /** Иконка */
    icon?: React.JSX.Element;
    /** Ссылка */
    href?: string;
    /** Target свойство кнопки */
    target?: '_self' | '_blank' | '_parent' | '_top';
    /** Rel - атрибут тега <a> */
    rel?: string;
    /** Задает атрибут download для тега <a> */
    download?: boolean;
    /** Показать стелку */
    showArrow?: boolean;
    /** Обработчик клика */
    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
};