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
);

Заголовок

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

Детализация в салонах МегаФона

Оплачивается каждый день заказанной детализации.

2ГБ

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

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

C иконкой

Интернет не на все сервисы

500 ₽

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

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

Значение

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

Звонки на все номера России

до 100 Гб и до 1200 минут

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

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

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

Музыкальные сервисы

Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка, Google Play Music, Apple Music, онлайн радио.

Интернет не на все сервисы

Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.

500 ₽

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

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

Контент

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

Звонки на все номера России

500 ₽

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

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

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

Интернет не на все сервисы

Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка

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

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

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

Музыкальные сервисы

Подробнее

Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.

500 ₽

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

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

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

Доп звонки

После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно.

Подробнее

Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.

500 ₽

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

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

Бейдж

Акция

Звонки на все номера России

500 ₽

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

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

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

Абонентская плата:

Звонки на все номера России

500 ₽

Звонки на все номера России

500 ₽

Звонки на все номера России

500 ₽

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

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

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

Звонки на все номера России

500 ₽

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

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

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

Звонки на все номера России

500 ₽

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

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

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

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

Тарифы Включайся!, с которыми работает опция

Выбирай, Смотри, Слушай, Говори, Общайся

Почта

Mail.ru, Яндекс.Почта, Gmail

Мессенджеры

WhatsApp, Viber, Facebook Messenger, Snapchat, eMotion, ТамТам

500 ₽

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

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

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

Звонки на все номера России

500 ₽

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

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

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

Доп звонки

После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно.

Подробнее

Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.

Звонки на все номера России

Безлимитно

Акция

Музыкальные сервисы

Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка, Google Play Music, Apple Music, онлайн радио.

Интернет не на все сервисы

Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.

500 ₽

Абонентская плата:

Звонки на все номера России

500 ₽

SMS на прочие номера России

3 ₽ в сутки

Срок оплаты

Оплачивается каждый день заказанной детализации

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

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