PriceSummarySmall
Компактный вариант Figma price-summary-small: метка «Итого», сумма и опциональная function-ссылка. Без выбора периода, скидок и аккордеона invoice.
Демо
Когда использовать
- Узкая колонка или карточка, где нужен только итог и ссылка «Стоимость» / «Подробнее».
- Состояния
loadingиdataErrorсonRetry— как у полногоPriceSummary, но без детализации.
Когда не подходит:
- Нужен период, скидки или раскрываемый заказ —
PriceSummary.
Анатомия
Заголовок
Текст total из locale («Итого»).
Сумма
Typography headline + formatCurrency(value).
docsLink
Опциональная Button view='function' со ссылкой (docsLink.href, docsLink.text или locale costLink).
ContentBlock
Те же loading / dataError / onRetry, что и у PriceSummary.
Установка
pnpm add @cloud-ru/ds-uikit-product-price-summaryimport { PriceSummarySmall } from '@cloud-ru/ds-uikit-product-price-summary'Базовый пример
<PriceSummarySmall
value={9_999_999.99}
docsLink={{ href: 'https://example.com/pricing', text: 'Подробнее о стоимости' }}
/>Примеры использования
Итог со ссылкой
tsx
import { PriceSummarySmall } from '@cloud-ru/ds-uikit-product-price-summary';
import { FIGMA_SHOWCASE_SMALL_ARGS } from '../stories/PriceSummarySmall/constants';
import styles from './demoSurface.module.scss';
export function PriceSummarySmallDemo() {
return (
<div className={styles.surface}>
<PriceSummarySmall {...FIGMA_SHOWCASE_SMALL_ARGS} />
</div>
);
}Загрузка
tsx
import { PriceSummarySmall } from '@cloud-ru/ds-uikit-product-price-summary';
import styles from '../demoSurface.module.scss';
export function SmallLoading() {
return (
<div className={styles.surface}>
<PriceSummarySmall value={undefined} loading />
</div>
);
}Ошибка данных
tsx
import { PriceSummarySmall } from '@cloud-ru/ds-uikit-product-price-summary';
import { useState } from 'react';
import styles from '../demoSurface.module.scss';
export function SmallError() {
const [loading, setLoading] = useState(false);
const [dataError, setDataError] = useState(true);
const handleRetry = () => {
setLoading(true);
setTimeout(() => {
setLoading(false);
setDataError(false);
}, 800);
};
return (
<div className={styles.surface}>
<PriceSummarySmall value={10800} loading={loading} dataError={dataError} onRetry={handleRetry} />
</div>
);
}Props
Types
Props
PriceSummarySmallProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
className | string | — | no | Дополнительный класс корневого контейнера. |
data-test-id | string | — | no | |
dataError | boolean | — | no | |
docsLink | { href?: string; label?: string; } | undefined | — | no | Function-ссылка внизу блока. |
hintTooltipText | ReactNode | — | no | Контент подсказки для иконки рядом с итоговой суммой. |
loading | boolean | — | no | |
onRetry | (() => void) | — | no | |
value | number | 0 | no | Итоговая сумма. |