# @cloud-ru/ds-uikit-product-title-clickable

> Кликабельный заголовок-ссылка раздела с иконкой, шевроном и опциональным аватар-блоком — для шапок продуктовых разделов.

Docs: /snack-v2/components/uikit-product-title-clickable/

## Установка

```sh
pnpm add @cloud-ru/ds-uikit-product-title-clickable
```

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

- Заголовок продуктового раздела ведёт на отдельную страницу/детальный вид.
- В шапке карточки/секции, где навигация по клику на заголовок ожидаема пользователем.
- Когда нужен визуальный аффорданс перехода (шеврон) поверх обычной ссылки.

Когда **не** нужен:

- Inline-ссылка в тексте:
  - используйте [`@cloud-ru/ds-link`](/components/link).
- Action-кнопка:
  - используйте [`@cloud-ru/ds-button`](/components/button/button).
- Строка списка с действием:
  - используйте [`@cloud-ru/ds-uikit-product-info-row`](/components/uikit-product-info-row).

## API

### TitleClickable
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `as` | `ElementType` | — | no | Полиморфный тег корня — `'a'` по умолчанию, либо компонент-роутер (`Link` из react-router-dom). |
| `avatar` | `({ 'data-test-id'?: string; } & AriaAttributes & { name: string; src?: string; appearance?: Appearance \| undefined; size?: Size \| undefined; ... 5 more ...; innerRef?: Ref<...> \| undefined; } & HTMLAttributes<...> & { ...; }) \| undefined` | — | no | @deprecated Используй `before={<TitleClickableAvatar {...} subtitle={...} />}`. Аватар с subtitle (Figma `userTitle`). |
| `before` | `ReactNode` | — | no | Слот слева от заголовка. Произвольная нода либо предзаготовленные пресеты `<TitleClickableIcon icon={...} />` / `<TitleClickableAvatar {...} />`. Соответствует Figma-слоту `+ slotTitle` (`simpleTitle` / `userTitle`). |
| `children` | `ReactNode` | — | no | Кастомное содержимое вместо title/before |
| `className` | `string` | — | no | CSS-класс |
| `data-test-id` | `string` | — | no |  |
| `fullWidth` | `boolean` | — | no | Занимает ли всю ширину |
| `icon` | `ReactNode` | — | no | @deprecated Используй `before={<TitleClickableIcon icon={...} />}`. Иконка слева от заголовка. |
| `innerRef` | `any` | — | no | Ref на корневой элемент. |
| `showArrow` | `boolean` | `true` | no | Показывать иконку-стрелку справа. Иконка автоматически меняется на `external link` при `target='_blank'`. |
| `title` | `string` | — | no | Заголовок |
| `titleTag` | `ElementType` | — | no | Тег заголовка для семантики (например `'h2'`, `'h3'`, `'span'`) |

#### Related types
- `Appearance` = `blue | green | neutral | orange | pink | primary | red | violet | yellow`
- `AvatarProps` (interface)
- `PolymorphicRef` (alias)
- `Shape` = `rounded | squared`
- `Size` = `s | xs`
- `StatusAppearance` = `blue | green | loading | neutral | orange | pink | primary | red | violet | yellow`

### TitleClickableAvatar
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `appearance` | `blue \| green \| neutral \| orange \| pink \| red \| violet \| yellow` | — | no | Внешний вид (цвет) |
| `badge` | `ReactNode` | — | no | Произвольный нод в слот значка (правый-нижний угол). Перекрывает `status`. |
| `children` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — | no |  |
| `className` | `string` | — | no | CSS-класс |
| `data-test-id` | `string` | — | no |  |
| `innerRef` | `Ref<HTMLDivElement>` | — | no | Ref на корневой DOM-элемент. Используем явный проп, чтобы не зависеть от `forwardRef` и не тащить type-assertions на экспорт. |
| `name` | `string` | — | yes | Имя пользователя для генерации аббревиатуры |
| `shape` | `rounded \| squared` | — | no | Форма: круглая или квадратная |
| `showTwoSymbols` | `boolean` | — | no | Отображение двух заглавных символов имени вместо одного |
| `size` | `3xl \| 6xl \| 9xl \| l \| m \| s \| xs` | — | no | Размер |
| `src` | `string` | — | no | URL изображения аватара |
| `status` | `blue \| green \| neutral \| orange \| pink \| red \| violet \| yellow` | — | no | Appearance дефолтного `StatusIndicator` в правом-нижнем углу. Размер индикатора подбирается из `size` аватара автоматически. Полностью настроить значок можно через слот `badge`, который перекрывает `status`. |
| `subtitle` | `string` | — | yes | Подпись под именем (e-mail, роль и т.п.). |

#### Related types
- `Appearance` = `blue | green | neutral | orange | pink | primary | red | violet | yellow`
- `Shape` = `rounded | squared`
- `Size` = `s | xs`
- `StatusAppearance` = `blue | green | loading | neutral | orange | pink | primary | red | violet | yellow`

### TitleClickableContent
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `avatar` | `({ 'data-test-id'?: string; } & AriaAttributes & { name: string; src?: string; appearance?: Appearance \| undefined; size?: Size \| undefined; ... 5 more ...; innerRef?: Ref<...> \| undefined; } & HTMLAttributes<...> & { ...; }) \| undefined` | — | no | @deprecated Используй `before={<TitleClickableAvatar {...} subtitle={...} />}`. Аватар с subtitle (Figma `userTitle`). |
| `before` | `ReactNode` | — | no | Слот слева от заголовка. Произвольная нода либо предзаготовленные пресеты `<TitleClickableIcon icon={...} />` / `<TitleClickableAvatar {...} />`. Соответствует Figma-слоту `+ slotTitle` (`simpleTitle` / `userTitle`). |
| `children` | `ReactNode` | — | no | Кастомное содержимое вместо title/before |
| `fullWidth` | `boolean` | — | no | Занимает ли всю ширину |
| `icon` | `ReactNode` | — | no | @deprecated Используй `before={<TitleClickableIcon icon={...} />}`. Иконка слева от заголовка. |
| `title` | `string` | — | no | Заголовок |
| `titleTag` | `ElementType` | — | no | Тег заголовка для семантики (например `'h2'`, `'h3'`, `'span'`) |

### TitleClickableIcon
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `className` | `string` | — | no |  |
| `icon` | `ReactNode` | — | yes | Иконка (24×24). |

## Примеры

### Basic

```tsx
import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable';

export function Basic() {
  return <TitleClickable href='#' title='Production environment' />;
}
```

### External

```tsx
import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable';

export function External() {
  return <TitleClickable href='https://example.com' target='_blank' title='Внешняя ссылка' />;
}
```

### FullWidth

```tsx
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable';

export function FullWidth() {
  return <TitleClickable href='#' title='Раздел занимает всю ширину контейнера' icon={<PlaceholderSVG />} fullWidth />;
}
```

### HiddenArrow

```tsx
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable';

export function HiddenArrow() {
  return <TitleClickable href='#' title='Без шеврона' icon={<PlaceholderSVG />} showArrow={false} />;
}
```

### WithAvatar

```tsx
import { TitleClickable, TitleClickableAvatar } from '@cloud-ru/ds-uikit-product-title-clickable';

export function WithAvatar() {
  return (
    <TitleClickable href='#' fullWidth before={<TitleClickableAvatar name='John Doe' subtitle='jdoe@example.com' />} />
  );
}
```

### WithCustomBefore

```tsx
import { Typography } from '@cloud-ru/ds-typography';
import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable';

export function WithCustomBefore() {
  return (
    <TitleClickable
      href='#'
      before={
        <Typography variant='label' size='s' as='span'>
          Custom before
        </Typography>
      }
    />
  );
}
```

### WithIcon

```tsx
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { TitleClickable, TitleClickableIcon } from '@cloud-ru/ds-uikit-product-title-clickable';

export function WithIcon() {
  return (
    <TitleClickable href='#' title='Production environment' before={<TitleClickableIcon icon={<PlaceholderSVG />} />} />
  );
}
```