llms.txt

CardServiceLight

Компактная интерактивная строка: иконка + текст + promo tag + кнопка «Избранное» (ArrowRight/Left keyboard nav).

Когда использовать

  • Компактные списки сервисов в сайдбаре или меню.
  • Строка с иконкой, названием и кнопкой «Избранное».

Установка

pnpm add @cloud-ru/ds-uikit-product-card-predefined
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined'

Примеры использования

Базовый пример

Базовый примерКомпактная строка с иконкой и заголовком.
tsx
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Basic() {
  return <CardServiceLight title='Мой сервис' icon={<PlaceholderSVG size={24} />} />;
}

Promo tag

Promo tagЧерез promoTag рядом с заголовком отображается промо-бейдж.
tsx
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithPromoTag() {
  return <CardServiceLight title='Мой сервис' icon={<PlaceholderSVG size={24} />} promoTag={{ variant: 'preview' }} />;
}

Обрезка заголовка

Обрезка заголовкаtruncate.title ограничивает число строк заголовка через TruncateString.
tsx
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';

const longTitle =
  'Очень длинное название сервиса, которое не помещается в одну строку и обрезается через TruncateString';

export function WithTruncate() {
  return (
    <div style={{ maxWidth: 280 }}>
      <CardServiceLight title={longTitle} icon={<PlaceholderSVG size={24} />} truncate={{ title: 1 }} />
    </div>
  );
}

Кнопка «Избранное» (always)

Кнопка «Избранное» (always)actionsVisibility="always" — действия видны постоянно; favorite.checked и onChange задают controlled-режим избранного.
tsx
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight, VISIBILITY_STRATEGY } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

export function WithFavorite() {
  const [isFavorite, setIsFavorite] = useState(false);

  return (
    <CardServiceLight
      title='Мой сервис'
      icon={<PlaceholderSVG size={24} />}
      actionsVisibility={VISIBILITY_STRATEGY.always}
      favorite={{
        enabled: true,
        checked: isFavorite,
        onChange: setIsFavorite,
      }}
    />
  );
}

Кнопка «Избранное» (hover)

Кнопка «Избранное» (hover)actionsVisibility="hover" — действия появляются при наведении и фокусе на карточке.
tsx
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight, VISIBILITY_STRATEGY } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithFavoriteHover() {
  return (
    <CardServiceLight
      title='Мой сервис'
      icon={<PlaceholderSVG size={24} />}
      actionsVisibility={VISIBILITY_STRATEGY.hover}
      favorite={{
        enabled: true,
      }}
    />
  );
}

Неактивное состояние

Неактивное состояниеdisabled блокирует взаимодействие с карточкой.
tsx
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Disabled() {
  return <CardServiceLight title='Мой сервис' icon={<PlaceholderSVG size={24} />} disabled />;
}

Обработка клика

Обработка кликаonClick вызывается при клике по карточке.

Кликов по карточке: 0

tsx
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { Typography } from '@cloud-ru/ds-typography';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

export function WithOnClick() {
  const [clicks, setClicks] = useState(0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <CardServiceLight title='Мой сервис' icon={<PlaceholderSVG size={24} />} onClick={() => setClicks(c => c + 1)} />

      <Typography variant='body' size='m'>
        Кликов по карточке: {clicks}
      </Typography>
    </div>
  );
}

Ссылка (polymorphic)

Ссылка (polymorphic)Через as и href карточка рендерится как якорь.
Ссылка-сервис
tsx
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';

export function PolymorphicLink() {
  return (
    <CardServiceLight
      as='a'
      href='https://cloud.ru'
      target='_blank'
      title='Ссылка-сервис'
      icon={<PlaceholderSVG size={24} />}
    />
  );
}

Видимость действий

Проп карточки actionsVisibility ('hover' по умолчанию) управляет всеми действиями сразу — тултипом, избранным и кнопкой раскрытия.

Props

Types

PropsCardServiceLightProps
PropTypeDefaultRequiredDescription
actionsVisibility"always" | "hover"'hover'noФормат отображения дополнительных действий: всегда или при наведении и фокусе
asElementType—noПолиморфный элемент: `'button'`, `'a'`, `{Link}` и т.д.
classNamestring—noCSS-класс корневого элемента
data-test-idstring—noSupport prop для тестов
disabledbooleanfalsenoНеактивное состояние
expandable{ value: boolean; onClick(): void; }—noНастройки кнопки раскрытия
favoriteFavoriteProps—noНастройки кнопки «Избранное». Keyboard: ArrowRight на карточке → tooltip (если есть) → Favorite; ArrowLeft — в обратном порядке.
iconReactElement<any, string | JSXElementConstructor<any>>—noИконка сервиса
innerRefany—noRef на реальный DOM-элемент / инстанс
promoTagCardPromoTagProps—noНастройки promo tag. При отсутствии не отображается
titlestring—yesЗаголовок карточки
tooltipOmit<TooltipProps, "size" | "trigger">—noПодсказка с иконкой «?» рядом с заголовком
truncate{ title?: number; }—noНастройки обрезки текста заголовка

CardPromoTagPropstype

PromoTagPredefinedProps & { as?: never; innerRef?: never; }

FavoritePropsinterface

PropTypeDefaultRequiredDescription
checkedboolean | undefined—noСостояние избранного (controlled)
enabledboolean—yesВключить отображение кнопки избранного
onChange((value: boolean) => void) | undefined—noКолбэк изменения состояния избранного

Unions

VisibilityStrategyunion

"always" | "hover"

Related props

PolymorphicReftype

ComponentPropsWithRef<T>["ref"]

PromoTagPredefinedBasePropstype

{ [x: string]: any; [x: number]: any; [x: symbol]: any; }

TooltipPropsinterface

PropTypeDefaultRequiredDescription
childrenReactNode | ChildrenFunction—noТриггер поповера (подробнее читайте ниже)
classNamestring | undefined—no
closeOnPopstateboolean | undefined—noЗакрывать ли поповер при переходе по истории браузера
data-test-idstring | undefined—no
disableMaxWidthboolean | undefined—noОтключение ограничения ширины тултипа
disableSpanWrapperboolean | undefined—noОтключает для `isValidElement` внешнюю обертку триггера <br/> Пригодится для элементов с `position: absolute` <br/> Работает для триггеров, которые умеют отдать свою DOM-ноду: нативные элементы, `forwardRef`-компоненты и компоненты, помеченные `withInnerRefSupport` из `@cloud-ru/ds-utils`. Остальные всё равно получают `<span>` — без ноды поповеру не от чего считать позицию; в dev-режиме об этом печатается предупреждение.
fallbackPlacementsPlacement[] | undefined—noЦепочка расположений которая будет применяться к поповеру от первого к последнему если при текущем он не влезает.
hoverDelayClosenumber | undefined—noЗадержка закрытия по ховеру
hoverDelayOpennumber | undefined—noЗадержка открытия по ховеру
offsetnumber | undefined—noОтступ поповера от его триггер-элемента (в пикселях).
onOpenChange((isOpen: boolean) => void) | undefined—noКолбек отображения компонента. Срабатывает при изменении состояния open.
openboolean | undefined—noУправляет состоянием показан/не показан.
placement"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"—noПоложение поповера относительно своего триггера (children).
tipstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—yesСодержимое тултипа (текст или разметка)
trigger"click" | "clickAndFocusVisible" | "focus" | "focusVisible" | "hover" | "hoverAndFocus" | "hoverAndFocusVisible"—noУсловие отображения поповера: <br/> - `click` - открывать по клику <br/> - `hover` - открывать по ховеру <br/> - `focusVisible` - открывать по focus-visible <br/> - `focus` - открывать по фокусу <br/> - `hoverAndFocusVisible` - открывать по ховеру и focus-visible <br/> - `hoverAndFocus` - открывать по ховеру и фокусу <br/> - `clickAndFocusVisible` - открывать по клику и focus-visible
triggerClassNamestring | undefined—noCSS-класс триггера
triggerRefForwardedRef<HTMLElement | ReferenceType | null> | undefined—noRef ссылка на триггер

Types

CardServiceLightProps

Unions

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

Desktop-first: раскладку берёт AdaptiveProvider. На mobile:

  • у внутреннего .container ставится data-mobile — min-height 40 вместо 32;
  • кнопки действий рендерятся с размером s вместо m.

Отдельного пропа раскладки нет; форс — toolbar-global layoutType / вложенный AdaptiveProvider / withLayoutType.

Storybook

Открыть в Storybook →

Figma

Открыть в Figma →