@cloud-ru/ds-uikit-product-toggles-predefined 1.0.0

package/src/components/ToggleCard/ToggleCard.tsx

@@ -0,0 +1,102 @@
+import { Card, VIEW } from '@cloud-ru/ds-card';
+import { IconPredefined } from '@cloud-ru/ds-icon-predefined';
+import { PromoTag } from '@cloud-ru/ds-promo-tag';
+import { useToggleGroup } from '@cloud-ru/ds-toggles';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { KeyboardEventHandler } from 'react';
+
+import { SIZE, TEST_IDS } from '../../constants';
+import { ToggleCardProps } from '../../types';
+import styles from './styles.module.scss';
+import { isEmblemPicture, sizeToEmblemSize } from './utils';
+
+const TRUNCATE_DEFAULTS = { title: 1, description: 2 };
+
+/**
+ * ToggleCard — кликабельная карточка выбора. Работает внутри `ToggleGroup`:
+ * клик / Enter / Space по карточке переключает её значение в контексте группы.
+ * Визуальный chrome (acrylic-фон, state-layer выбора, outline, focus-ring)
+ * приходит из `@cloud-ru/ds-card`; карточка добавляет раскладку контента и клавиатуру.
+ */
+export function ToggleCard({
+  title,
+  value,
+  description,
+  emblem,
+  promoBadge,
+  size = SIZE.M,
+  truncate,
+  disabled = false,
+  className,
+  ...rest
+}: ToggleCardProps) {
+  const { isChecked, handleClick, multipleSelection } = useToggleGroup({ value });
+
+  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
+    if (disabled) return;
+
+    if (e.code === 'Enter' || e.code === 'Space') {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+
+  // `?? DEFAULT` вместо spread: явный `truncate={{ description: undefined }}`
+  // (сборка объекта из optional-переменной) не должен перетирать дефолт.
+  const maxLines = {
+    title: truncate?.title ?? TRUNCATE_DEFAULTS.title,
+    description: truncate?.description ?? TRUNCATE_DEFAULTS.description,
+  };
+
+  return (
+    <Card
+      className={cn(styles.card, className)}
+      view={VIEW.Outline}
+      radius={size}
+      checked={isChecked}
+      disabled={disabled}
+      role={multipleSelection ? 'checkbox' : 'radio'}
+      aria-checked={isChecked}
+      onClick={!disabled ? handleClick : undefined}
+      onKeyDown={handleKeyDown}
+      data-test-id={TEST_IDS.card}
+      {...extractSupportProps(rest)}
+    >
+      {promoBadge && (
+        <div className={styles.promoBadge} data-size={size} data-test-id={TEST_IDS.promoBadge}>
+          <PromoTag {...(typeof promoBadge === 'string' ? { label: promoBadge } : promoBadge)} roleAppearance='decor' />
+        </div>
+      )}
+
+      <div className={styles.content} data-size={size}>
+        {emblem && (
+          <span
+            className={styles.emblem}
+            data-test-id={TEST_IDS.cardEmblem}
+            aria-hidden={isEmblemPicture(emblem) ? undefined : true}
+          >
+            {isEmblemPicture(emblem) ? (
+              <img className={styles.picture} src={emblem.src} alt={emblem.alt} data-size={sizeToEmblemSize(size)} />
+            ) : (
+              <IconPredefined {...emblem} size={sizeToEmblemSize(size)} background={emblem.background ?? false} />
+            )}
+          </span>
+        )}
+
+        <div className={styles.textContent}>
+          <span className={styles.title} data-test-id={TEST_IDS.cardTitle}>
+            <TruncateString text={title} maxLines={maxLines.title} />
+          </span>
+
+          {description && (
+            <span className={styles.description} data-test-id={TEST_IDS.cardDescription}>
+              <TruncateString text={description} maxLines={maxLines.description} />
+            </span>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}

package/src/components/ToggleCard/index.ts

@@ -0,0 +1 @@
+export * from './ToggleCard';

package/src/components/ToggleCard/styles.module.scss

@@ -0,0 +1,150 @@
+/**
+ * ToggleCard — раскладка контента поверх chrome `@cloud-ru/ds-card`.
+ * Сам card (acrylic-фон, state-layer выбора, outline, focus-ring) рендерит `@cloud-ru/ds-card`;
+ * `.content` соответствует Figma-слою `wrapper`. `@cloud-ru/ds-card` content-слот padding
+ * не задаёт — он целиком на этом пакете.
+ *
+ * Ось `size` (как в продуктовом ките) масштабирует анатомию карточки целиком:
+ *   size | padding | gap | title       | description
+ *   s    | 8       | 4   | title/s     | body/m
+ *   m    | 16      | 8   | title/m     | body/m
+ *   l    | 24      | 16  | title/l     | body/l
+ */
+@use 'sass:map';
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/card.module' as card;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/iconPredefined.module' as iconPredefined;
+
+$paddings: (
+  's': base.$sn-density-spacing-interval-s,
+  'm': base.$sn-density-spacing-interval-m,
+  'l': base.$sn-density-spacing-interval-l,
+);
+$gaps: (
+  's': base.$sn-density-spacing-interval-xs,
+  'm': base.$sn-density-spacing-interval-s,
+  'l': base.$sn-density-spacing-interval-m,
+);
+$title-typography: (
+  's': base.$sn-regular-title-s,
+  'm': base.$sn-regular-title-m,
+  'l': base.$sn-regular-title-l,
+);
+$description-typography: (
+  's': base.$sn-regular-body-m,
+  'm': base.$sn-regular-body-m,
+  'l': base.$sn-regular-body-l,
+);
+
+$radius-to-badge-padding-top: (
+  's': card.$sn-card-anatomy-radius-s-container-badge-paddingTop,
+  'm': card.$sn-card-anatomy-radius-m-container-badge-paddingTop,
+  'l': card.$sn-card-anatomy-radius-l-container-badge-paddingTop,
+);
+$radius-to-badge-padding-right: (
+  's': card.$sn-card-anatomy-radius-s-container-badge-paddingLeft,
+  'm': card.$sn-card-anatomy-radius-m-container-badge-paddingLeft,
+  'l': card.$sn-card-anatomy-radius-l-container-badge-paddingLeft,
+);
+
+.card {
+  cursor: pointer;
+
+  &[data-disabled] {
+    cursor: not-allowed;
+  }
+}
+
+.promoBadge {
+  pointer-events: none;
+
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+
+  display: flex;
+
+  box-sizing: border-box;
+
+  @each $size in ('s', 'm', 'l') {
+    &[data-size='#{$size}'] {
+      padding-top: map.get($radius-to-badge-padding-top, $size);
+      padding-right: map.get($radius-to-badge-padding-right, $size);
+    }
+  }
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+
+  @each $size in ('s', 'm', 'l') {
+    &[data-size='#{$size}'] {
+      gap: map.get($gaps, $size);
+      padding: map.get($paddings, $size);
+    }
+  }
+}
+
+.emblem {
+  // Слот ведущей эмблемы. Размер и цвет иконки задаёт встроенный `IconPredefined`
+  // (size выводится из размера карточки), поэтому здесь только flex-обвязка.
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.picture {
+  // `data-size` уже приведён к размеру эмблемы (m/l/5xl) в компоненте — ключуемся
+  // прямо по нему, без второго маппинга card→emblem. `rounded`-сегмент даёт
+  // border-radius (круглый бейдж, как у дефолтного IconPredefined), иначе
+  // картинка осталась бы прямоугольной и overflow:hidden ничего не обрезал бы.
+  overflow: hidden;
+  box-sizing: border-box;
+  object-fit: cover;
+
+  @each $size in ('m', 'l', '5xl') {
+    &[data-size='#{$size}'] {
+      @include base.composite-var(iconPredefined.$iconPredefined, 'anatomy', 'size', $size);
+      @include base.composite-var(iconPredefined.$iconPredefined, 'anatomy', 'size', $size, 'rounded');
+    }
+  }
+}
+
+.textContent {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  align-items: flex-start;
+
+  min-width: 0;
+}
+
+.title {
+  // width: 100% обязателен: в колонке `align-items: flex-start` без него заголовок
+  // тянется по контенту и переполняет карточку — TruncateString не может измерить
+  // доступную ширину. С шириной 100% он считает её от textContent и обрезает.
+  width: 100%;
+  color: base.$sn-theme-color-available-version-textMain;
+
+  @each $size in ('s', 'm', 'l') {
+    .content[data-size='#{$size}'] & {
+      @include base.composite-var(map.get($title-typography, $size));
+    }
+  }
+}
+
+.description {
+  width: 100%;
+  color: base.$sn-theme-color-available-version-textSecondary;
+
+  @each $size in ('s', 'm', 'l') {
+    .content[data-size='#{$size}'] & {
+      @include base.composite-var(map.get($description-typography, $size));
+    }
+  }
+}

package/src/components/ToggleCard/utils.ts

@@ -0,0 +1,24 @@
+import { SIZE as ICON_SIZE, Size as IconSize } from '@cloud-ru/ds-icon-predefined';
+
+import { SIZE } from '../../constants';
+import { Emblem, EmblemPicture, Size } from '../../types';
+
+/**
+ * Эмблема масштабируется вместе с карточкой (как в продуктовом ките):
+ * размер `IconPredefined` выводится из `size` карточки, а не задаётся снаружи.
+ */
+export function sizeToEmblemSize(size: Size): IconSize {
+  switch (size) {
+    case SIZE.S:
+      return ICON_SIZE.M;
+    case SIZE.L:
+      return ICON_SIZE['5XL'];
+    case SIZE.M:
+    default:
+      return ICON_SIZE.L;
+  }
+}
+
+export function isEmblemPicture(emblem: Emblem): emblem is EmblemPicture {
+  return 'src' in emblem;
+}

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,36 @@
+import { ToggleGroup as ToggleGroupBase, ToggleGroupProps as ToggleGroupBaseProps } from '@cloud-ru/ds-toggles';
+import { excludeSupportProps, extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { CSSProperties } from 'react';
+
+import { GAP, ORIENTATION, TEST_IDS } from '../../constants';
+import { ToggleGroupProps } from '../../types';
+import styles from './styles.module.scss';
+
+/**
+ * ToggleGroup — провайдер выбора + grid-раскладка карточек `ToggleCard`.
+ * Состояние (controlled/uncontrolled, single/multiple) держит `@cloud-ru/ds-toggles::ToggleGroup`;
+ * обёртка добавляет ориентацию, gap и breakpoint горизонтальной раскладки.
+ */
+export function ToggleGroup(props: ToggleGroupProps) {
+  const { children, orientation = ORIENTATION.Vertical, gap = GAP.S, breakpoint = 0, className, ...rest } = props;
+
+  const restProps = rest as Record<string, unknown>;
+  const supportProps = extractSupportProps(restProps);
+  const groupProps = excludeSupportProps(restProps) as ToggleGroupBaseProps;
+
+  return (
+    <ToggleGroupBase {...groupProps}>
+      <div
+        className={cn(styles.toggleGroup, className)}
+        style={{ '--toggle-group-breakpoint': `${breakpoint}px` } as CSSProperties}
+        data-orientation={orientation}
+        data-gap={gap}
+        data-test-id={TEST_IDS.group}
+        {...supportProps}
+      >
+        {children}
+      </div>
+    </ToggleGroupBase>
+  );
+}

package/src/components/ToggleGroup/index.ts

@@ -0,0 +1 @@
+export * from './ToggleGroup';

package/src/components/ToggleGroup/styles.module.scss

@@ -0,0 +1,28 @@
+/**
+ * ToggleGroup — grid-раскладка карточек.
+ * gap s/m/l → density spacing interval s(8)/m(16)/l(24).
+ * Горизонтальная ориентация раскладывает карточки в авто-колонки с минимальной
+ * шириной `--toggle-group-breakpoint` (px, из пропа `breakpoint`).
+ */
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+$gaps: (
+  's': base.$sn-density-spacing-interval-s,
+  'm': base.$sn-density-spacing-interval-m,
+  'l': base.$sn-density-spacing-interval-l,
+);
+
+.toggleGroup {
+  display: grid;
+
+  @each $gap, $token in $gaps {
+    &[data-gap='#{$gap}'] {
+      gap: $token;
+    }
+  }
+
+  &[data-orientation='horizontal'] {
+    grid-auto-rows: 1fr;
+    grid-template-columns: repeat(auto-fit, minmax(var(--toggle-group-breakpoint, 0), 1fr));
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './ToggleCard';
+export * from './ToggleGroup';
+
+export { useToggleGroup } from '@cloud-ru/ds-toggles';

package/src/constants.ts

@@ -0,0 +1,25 @@
+export const SIZE = {
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;
+
+export const ORIENTATION = {
+  Horizontal: 'horizontal',
+  Vertical: 'vertical',
+} as const;
+
+export const GAP = {
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;
+
+export const TEST_IDS = {
+  card: 'toggle-card',
+  cardEmblem: 'toggle-card__emblem',
+  cardTitle: 'toggle-card__title',
+  cardDescription: 'toggle-card__description',
+  promoBadge: 'toggle-card__promo-badge',
+  group: 'toggle-group',
+} as const;

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './constants';
+export * from './types';

package/src/types.ts

@@ -0,0 +1,69 @@
+import { IconPredefinedProps } from '@cloud-ru/ds-icon-predefined';
+import { PromoTagProps } from '@cloud-ru/ds-promo-tag';
+import { ToggleGroupProps as ToggleGroupPropsDs } from '@cloud-ru/ds-toggles';
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+
+import { GAP, ORIENTATION, SIZE } from './constants';
+
+export type Size = ValueOf<typeof SIZE>;
+export type Orientation = ValueOf<typeof ORIENTATION>;
+export type Gap = ValueOf<typeof GAP>;
+
+export type EmblemPicture = {
+  /** URL картинки-эмблемы */
+  src: string;
+  /** Альтернативный текст картинки */
+  alt: string;
+};
+
+export type EmblemIcon = Pick<IconPredefinedProps, 'icon' | 'appearance' | 'background' | 'shape'>;
+
+/** Эмблема карточки: параметры встроенного `IconPredefined` либо картинка (`src` / `alt`). */
+export type Emblem = EmblemPicture | EmblemIcon;
+
+export type ToggleCardProps = WithSupportProps<{
+  /** Заголовок карточки */
+  title: string;
+  /** Значение карточки в контексте `ToggleGroup` */
+  value: string;
+  /** Основной текст под заголовком */
+  description?: string;
+  /**
+   * Ведущая эмблема. Передаются только параметры — сам `IconPredefined`
+   * встроен в компонент; `size` эмблемы выводится из `size` карточки.
+   */
+  emblem?: Emblem;
+  /** Промо-бейдж в правом верхнем углу карточки */
+  promoBadge?: Pick<PromoTagProps, 'label' | 'appearance'> | string;
+  /** Размер карточки — масштабирует padding, gap, типографику и `radius` контейнера `@cloud-ru/ds-card` */
+  size?: Size;
+  /**
+   * Максимальное число строк до обрезки.
+   * @default '{ title: 1; description: 2; }'
+   */
+  truncate?: {
+    /** Максимум строк заголовка */
+    title?: number;
+    /** Максимум строк содержимого */
+    description?: number;
+  };
+  /** Заблокированное состояние: интерактив отключён */
+  disabled?: boolean;
+  /** CSS-класс корневого элемента */
+  className?: string;
+}>;
+
+export type ToggleGroupProps = ToggleGroupPropsDs &
+  WithSupportProps<{
+    /** Дочерние карточки `ToggleCard` */
+    children?: ReactNode;
+    /** Направление раскладки */
+    orientation?: Orientation;
+    /** Расстояние между карточками */
+    gap?: Gap;
+    /** Минимальная ширина карточки для горизонтальной раскладки (px) */
+    breakpoint?: number;
+    /** CSS-класс корневого элемента */
+    className?: string;
+  }>;