SidePictureCards

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

Примеры и код

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

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

Минимум 2 карточки в блоке

<SidePictureCards
      items={[
          {
              title: "Решение для помещений",
              image: { src: image.src, srcWide: imageWide.src, alt: "picture" },
              iconItems: [
                  { icon: <VideoIcon />, text: "Камера: доставка, установка, настройка", info: "5 500 ₽" },
                  { icon: <UploadIcon />, text: "Облачное хранение", info: "от 399 ₽/мес" },
                  { icon: <WiFiIcon />, text: "Интернет", info: "от 500 ₽/мес" },
              ],
              button: {
                  title: "Добавить в корзину",
                  href: "#"
              },
          },
          {
              title: "Максимум 40 символов в 2 строки, далее троеточие, ",
              image: { src: image.src, srcWide: imageWide.src, alt: "picture" },
              iconItems: [
                  { icon: <VideoIcon />, text: "Минимум 2 и максимум 4 блока информации с иконками" },
                  { icon:
                      <WiFiIcon />,
                      text: "Текст максимум 50 символов в 3 строки, далее троеточие при переполнении",
                      info: "Максимум 40 символов в 2 строки, далее троеточие",
                  },
              ],
              button: {
                  title: "Добавить в корзину",
                  href: "#"
              },
          }
      ]}
  />

Варианты отображения

Текст и инфо - опциональные параметры

<SidePictureCards
      items={[1, 2].map((item, index) => ({
          title: "Title",
          image: { src: image.src, srcWide: imageWide.src, alt: "picture"
          },
          iconItems: index === 0 ? [
              { icon: <VideoIcon />, text: "Text" },
              { icon: <UploadIcon />, text: "Text" },
              { icon: <WiFiIcon />, text: "Text" },
              { icon: <WiFiIcon />, text: "Text" },
          ] : [
              { icon: <VideoIcon />, info: "Info" },
              { icon: <UploadIcon />, info: "Info" },
              { icon: <WiFiIcon />, info: "Info" },
          ],
          button: {
              title: "Button",
              href: "#"
          },
      }))}
  />

Заголовок и кнопка - опциональные параметры

<SidePictureCards
      items={[1, 2].map((item, index) => ({
          title: index === 0 ? "Title" : undefined,
          image: { src: image.src, srcWide: imageWide.src, alt: "picture"
          },
          iconItems: [
              { icon: <VideoIcon />, text: "Text", info: "Info" },
              { icon: <UploadIcon />, text: "Text", info: "Info" },
          ],
          button: index !== 0 ? {
              title: "Button",
              href: "#"
          } : undefined,
      }))}
  />

Свойства карточки

Карточка может быть ссылкой

<Container>
      <TitleDescriptionBox title="Gray на белом фоне" />
      <SidePictureCards
          background="gray"
          items={[1, 2, 3].map(item => ({
              title: "Title",
              image: { src: image.src, srcWide: imageWide.src, alt: "picture"
              },
              iconItems: [
                  { icon: <VideoIcon />, text: "Text", info: "Info" },
                  { icon: <UploadIcon />, text: "Text", info: "Info" },
                  { icon: <WiFiIcon />, text: "Text", info: "Info" },
              ],
              href: "#",
          }))}
      />
  </Container>
  <Container backgroundColor="light-gray">
      <TitleDescriptionBox title="White на сером фоне" />
      <SidePictureCards
          background="white"
          items={[1, 2, 3, 4].map(item => ({
              title: "Title",
              image: { src: image.src, srcWide: imageWide.src, alt: "picture"
              },
              iconItems: [
                  { icon: <VideoIcon />, text: "Text", info: "Info" },
                  { icon: <UploadIcon />, text: "Text", info: "Info" },
                  { icon: <WiFiIcon />, text: "Text", info: "Info" },
              ],
              href: "#",
          }))}
      />
  </Container>

Prop name	Type	Default	Description
items*	CardDataType[]		Карточки. Минимальное количество 2 карточки
background	BackgroundType	gray	Цвет фона карточек
className	string		Дополнительный класс для компонента
classes	{ root?: string; item?: string; }	{}	Дополнительные классы для внутренних элементов
dataAttrs	{ root?: Record<string, string>; item?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам

type BackgroundType = 'white' | 'gray';

type CardDataType = {
    /** Заголовок */
    title?: string;
    /** Изображение */
    image: ImageType;
    /** Список пунктов с иконками */
    iconItems: IconContentType[];
    /** Кнопка */
    button?: ButtonType;
    /** Ссылка */
    href?: string;
    /** Атрибут ссылки target */
    target?: TargetType;
    /** Атрибут ссылки rel */
    rel?: string;
};

type TargetType = '_self' | '_blank' | '_parent' | '_top';

type ButtonType = {
    /** Название */
    title: string;
    /** Ссылка */
    href: string;
    /** Атрибут ссылки target */
    target?: TargetType;
    /** Атрибут ссылки rel */
    rel?: string;
};

type ImageType = {
    /** Изображение на разрешении экрана 0-1279 */
    src: string;
    /** Изображение на разрешении экрана 1280+ */
    srcWide: string;
    /** Значение тега alt для изображения */
    alt?: string;
};

type IconContentType = {
    /** Иконка */
    icon: JSX.Element;
    /** Текст-описание */
    text?: string;
    /** Дополнительная информация, значение */
    info?: string;
};