Property

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

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

Демо данныеimport { TextLink, Paragraph } from '@megafon/ui-core';
import { convert } from '@megafon/ui-helpers';

const convertConfig = {
    a: {
        component: TextLink,
        props: ['href'],
    },
    p: {
        component: Paragraph,
        props: ['size', 'hasMargin'],
    },
};

const titleWithLink = convert(
    'Тарифы <a href="https://moscow.megafon.ru">Включайся!</a>, с которыми работает опция',
    convertConfig,
);

const textWithLink = convert(
    '<a href="https://moscow.megafon.ru">Выбирай, Смотри, Слушай, Говори, Общайся</a>',
    convertConfig,
);

const textWithParagraph = convert(
    '<p hasMargin="false">Почта</p><p size="small">Mail.ru, Яндекс.Почта, Gmail</p><p hasMargin="false">Мессенджеры</p><p size="small">WhatsApp, Viber, Facebook Messenger, Snapchat, eMotion, ТамТам</p>',
    convertConfig,
);

Заголовок

В несколько строк

<ContentArea>
  <Property
      items={[
          {
              title: ['Детализация в салонах МегаФона', 'Оплачивается каждый день заказанной детализации.'],
              value: '2ГБ',
          },
      ]}
  />
</ContentArea>

C иконкой

<ContentArea>
  <Property
      icon={<WiFi style={{ display: 'block', fill: '#00B956' }} />}
      items={[{ title: ['Интернет не на все сервисы'], value: '500&nbsp₽' }]}
  />
</ContentArea>

Значение

В рамке

<ContentArea>
  <Property items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽', valueFrameColor: 'gray' }]} />
</ContentArea>

С подписью

<ContentArea>
  <Property items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽', valueUnit: 'в&nbspмесяц' }]} />
</ContentArea>

В рамке и с подписью

<ContentArea>
  <Property
      items={[
          {
              title: ['Звонки на все номера России'],
              value: '500&nbsp₽',
              valueFrameColor: 'gray',
              valueUnit: 'в&nbspмесяц',
          },
      ]}
  />
</ContentArea>

В несколько строк

<ContentArea>
  <Property items={[{ title: ['Звонки на все номера России'], value: valueInSeveralRow }]} />
</ContentArea>

Одно на несколько строк

<ContentArea>
  <Property
      mergedValue="500&nbsp₽"
      items={[
          {
              title: ['Музыкальные сервисы'],
              description: [
                  {
                      value: 'Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка, Google Play Music, Apple Music, онлайн радио.',
                  },
              ],
              value: '',
          },
          {
              title: ['Интернет не на все сервисы'],
              description: [
                  {
                      value: 'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
                  },
              ],
          },
      ]}
  />
</ContentArea>

Контент

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

<ContentArea>
  <Property items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽' }]} />
</ContentArea>

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

<ContentArea>
  <Property
      items={[
          {
              title: ['Интернет не на все сервисы'],
              description: [{ value: 'Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка' }],
          },
      ]}
  />
</ContentArea>

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

<ContentArea>
  <Property
      items={[
          {
              title: ['Музыкальные сервисы'],
              description: [
                  {
                      value: 'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
                      isCollapsible: true,
                  },
              ],
              value: '500&nbsp₽',
          },
      ]}
  />
</ContentArea>

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

<ContentArea>
  <Property
      items={[
          {
              title: ['Доп звонки'],
              value: '500&nbsp₽',
              description: [
                  {
                      value: 'После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно.',
                  },
                  {
                      value: 'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
                      isCollapsible: true,
                  },
              ],
          },
      ]}
  />
</ContentArea>

Бейдж

Тип бейджа по умолчанию

<ContentArea>
  <Property badge={'Акция'} items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽' }]} />
</ContentArea>

VIP бейдж

<ContentArea>
  <Property
      badge={'Акция'}
      badgeType="vip"
      items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽' }]}
  />
</ContentArea>

Несколько строк

<ContentArea>
  <Property
      items={[
          { title: ['Абонентская плата:'] },
          { value: '500&nbsp₽', description: [{ value: 'Звонки на все номера России' }] },
          { value: '500&nbsp₽', description: [{ value: 'Звонки на все номера России' }] },
          { value: '500&nbsp₽', description: [{ value: 'Звонки на все номера России' }] },
      ]}
  />
</ContentArea>

Нижняя граница

<ContentArea>
  <Property items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽' }]} borderBottom />
</ContentArea>

Без верхней границы

<ContentArea>
  <Property items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽' }]} disableBorderTop />
</ContentArea>

Границы с цветом #595959

<ContentArea>
  <Property
      borderColor="darker"
      items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽' }]}
      borderBottom
  />
</ContentArea>

Кастомные компоненты

В качестве заголовка и описания можно использовать другие компоненты.

<ContentArea>
  <Property
      items={[
          {
              title: [titleWithLink],
              value: '500&nbsp₽',
              description: [{ value: textWithLink }, { value: textWithParagraph }],
          },
      ]}
  />
</ContentArea>

Без ограничения по ширине

<ContentArea>
  <Property items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽' }]} fullWidth />
</ContentArea>

С тултипом

<ContentArea>
  <Property
      tooltip="После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно."
      items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽' }]}
  />
</ContentArea>

Комбинирование

<Container>
  <Property
      items={[
          {
              title: ['Доп звонки'],
              description: [
                  {
                      value: 'После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно.',
                  },
                  {
                      value: 'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
                      isCollapsible: true,
                  },
              ],
          },
      ]}
  />
  <Property
      icon={<WiFi style={{ display: 'block', fill: '#00B956' }} />}
      items={[{ title: ['Звонки на все номера России'], value: 'Безлимитно' }]}
  />
  <Property
      tooltip="После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно"
      borderColor="darker"
      borderBottom
      items={[
          {
              title: ['Звонки на все номера России'],
              value: '500&nbsp₽',
              valueFrameColor: 'gray',
              valueUnit: 'в&nbspмесяц',
          },
      ]}
  />
  <Property
      disableBorderTop
      mergedValue="500&nbsp₽"
      badge={'Акция'}
      items={[
          {
              title: ['Музыкальные сервисы'],
              description: [
                  {
                      value: 'Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка, Google Play Music, Apple Music, онлайн радио.',
                  },
              ],
              value: '',
          },
          {
              title: ['Интернет не на все сервисы'],
              description: [
                  {
                      value: 'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
                  },
              ],
          },
      ]}
  />
  <Property
      items={[
          { title: ['Абонентская плата:'] },
          { value: '500&nbsp₽', description: [{ value: ['Звонки на все номера России'] }] },
          { value: '3 ₽ в сутки', description: [{ value: ['SMS на прочие номера России'] }] },
      ]}
  />
  <Property items={[{ title: ['Срок оплаты'], value: 'Оплачивается каждый день заказанной детализации' }]} />
</Container>