@cloud-ru/ds-uikit-product-page-layout 1.0.0

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@cloud-ru/ds-uikit-product-page-layout",
+  "version": "1.0.0",
+  "description": "Набор страничных раскладок продуктового кабинета — каталог, детальная страница сервиса, форма, дерево-навигация, сайдбар и общие слоты — с адаптацией desktop/mobile через AdaptiveProvider.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloud-ru-tech/snack-v2.git",
+    "directory": "packages/uikit-product-page-layout"
+  },
+  "homepage": "https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/uikit-product-page-layout",
+  "license": "Apache-2.0",
+  "author": "Nikita Ershov <niershov@cloud.ru>",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./locale": {
+      "source": "./src/locale/index.ts",
+      "types": "./dist/esm/locale/index.d.ts",
+      "import": "./dist/esm/locale/index.js",
+      "require": "./dist/cjs/locale/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "@cloud-ru/ds-button": "^1.0.0",
+    "@cloud-ru/ds-adaptive": "^1.0.0",
+    "@cloud-ru/ds-dropdown": "^1.0.0",
+    "@cloud-ru/ds-icon-predefined": "^1.0.0",
+    "@cloud-ru/ds-icons": "^1.0.0",
+    "@cloud-ru/ds-list": "^1.0.0",
+    "@cloud-ru/ds-loader": "^1.0.0",
+    "@cloud-ru/ds-locale": "^1.0.0",
+    "@cloud-ru/ds-block": "^1.0.0",
+    "@cloud-ru/ds-modal": "^1.0.0",
+    "@cloud-ru/ds-popover": "^1.0.0",
+    "@cloud-ru/ds-tooltip": "^1.0.0",
+    "@cloud-ru/ds-truncate-string": "^1.0.0",
+    "@cloud-ru/ds-typography": "^1.0.0",
+    "@cloud-ru/ds-uikit-product-button-predefined": "^1.0.0",
+    "@cloud-ru/ds-tree": "^1.0.0",
+    "@cloud-ru/ds-uikit-product-copy": "^1.0.0",
+    "@cloud-ru/ds-utils": "^1.0.0",
+    "@cloud-ru/ds-search": "^1.0.0",
+    "@cloud-ru/ds-uikit-product-quota": "^1.0.0",
+    "@cloud-ru/ds-status": "^1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/Actions/ActionView.tsx

@@ -0,0 +1,71 @@
+import { Button, ButtonProps, Size, VIEW } from '@cloud-ru/ds-button';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { ButtonDropdown, ButtonDropdownProps } from '@cloud-ru/ds-uikit-product-button-predefined';
+import { ReactNode } from 'react';
+
+import { ButtonDroplist, ButtonDroplistProps } from './buttons/ButtonDroplist';
+import { ButtonKebab, ButtonKebabProps } from './buttons/ButtonKebab';
+import { ButtonQuota, ButtonQuotaProps } from './buttons/ButtonQuota';
+import { BUTTON_TYPE } from './constants';
+import { Action } from './types';
+
+type CommonProps = { className?: string; size?: Size; fullWidth?: boolean };
+
+/**
+ * Рендерит один action. Составные варианты (`dropdown`/`kebab`/`droplist`) монтируют адаптивные
+ * `@ds`-примитивы, которые берут раскладку из `AdaptiveProvider`. Раскладку фиксируют обёртки
+ * `DesktopActions` / `MobileActions` (`withLayoutType`), поэтому отдельный проп `layoutType` не нужен.
+ */
+export function ActionView({
+  variant,
+  tooltip,
+  hidden = false,
+  commonProps,
+  ...buttonProps
+}: Action & { commonProps: CommonProps }) {
+  if (hidden) {
+    return null;
+  }
+
+  // disableSpanWrapper — кнопка остаётся ПРЯМЫМ flex-потомком контейнера действий: без него Tooltip
+  // добавляет span-обёртку (`flex:0 1 auto`), и `fullWidth`-кнопка (`flex:1 1 0`) не растягивается на
+  // всю ширину (mobile: 2 действия должны делить строку). Как в MobilePageForm ButtonGroup.
+  const addTooltip = (component: ReactNode) =>
+    tooltip ? (
+      <Tooltip {...tooltip} disableSpanWrapper>
+        {component}
+      </Tooltip>
+    ) : (
+      component
+    );
+
+  switch (variant) {
+    case BUTTON_TYPE.Outline:
+      return addTooltip(<Button view={VIEW.Outline} {...(buttonProps as ButtonProps)} {...commonProps} />);
+    case BUTTON_TYPE.Tonal:
+      return addTooltip(<Button view={VIEW.Tonal} {...(buttonProps as ButtonProps)} {...commonProps} />);
+    case BUTTON_TYPE.Function:
+      return addTooltip(<Button view={VIEW.Function} {...(buttonProps as ButtonProps)} {...commonProps} />);
+    case BUTTON_TYPE.Simple:
+      return addTooltip(<Button view={VIEW.Simple} {...(buttonProps as ButtonProps)} {...commonProps} />);
+    case BUTTON_TYPE.Dropdown: {
+      return addTooltip(<ButtonDropdown {...(buttonProps as ButtonDropdownProps)} {...commonProps} />);
+    }
+    case BUTTON_TYPE.Kebab: {
+      const { button, list } = buttonProps as ButtonKebabProps;
+      return addTooltip(<ButtonKebab button={{ ...button, ...commonProps }} list={list} />);
+    }
+    case BUTTON_TYPE.Droplist: {
+      const { button, list } = buttonProps as ButtonDroplistProps;
+      return addTooltip(<ButtonDroplist button={{ ...button, ...commonProps }} list={list} />);
+    }
+    case BUTTON_TYPE.Quota: {
+      const quotaProps = buttonProps as ButtonQuotaProps;
+
+      return addTooltip(<ButtonQuota {...quotaProps} buttonProps={quotaProps.buttonProps ?? commonProps} />);
+    }
+    case BUTTON_TYPE.Filled:
+    default:
+      return addTooltip(<Button view={VIEW.Filled} {...(buttonProps as ButtonProps)} {...commonProps} />);
+  }
+}

package/src/components/Actions/DesktopActions.tsx

@@ -0,0 +1,33 @@
+import { LAYOUT_TYPE, withLayoutType } from '@cloud-ru/ds-adaptive';
+
+import { ActionView } from './ActionView';
+import styles from './styles.module.scss';
+import { ActionsProps } from './types';
+import { hasVisibleActions } from './utils';
+
+function DesktopActionsBase({ items }: Pick<ActionsProps, 'items'>) {
+  if (!hasVisibleActions(items)) {
+    return null;
+  }
+
+  return (
+    <div className={styles.desktopActionsWrapper}>
+      {items.map((action, index) => (
+        <ActionView
+          {...action}
+          key={index}
+          commonProps={{
+            className: styles.button,
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Десктопная панель действий. Форсирует `desktop`-раскладку через `withLayoutType`, чтобы вложенные
+ * адаптивные `@ds`-примитивы (`ButtonDropdown`/`ButtonKebab`/`ButtonDroplist`) рендерили
+ * desktop-popover даже под mobile-провайдером.
+ */
+export const DesktopActions = withLayoutType(DesktopActionsBase, LAYOUT_TYPE.Desktop);

package/src/components/Actions/MobileActions.tsx

@@ -0,0 +1,167 @@
+import { LAYOUT_TYPE, withLayoutType } from '@cloud-ru/ds-adaptive';
+import { Button, VIEW } from '@cloud-ru/ds-button';
+import { KebabSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Droplist, DroplistProps, Item } from '@cloud-ru/ds-list';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { quotaLocale, QuotaWidget } from '@cloud-ru/ds-uikit-product-quota';
+import { useDynamicList } from '@cloud-ru/ds-utils';
+import { MouseEvent, ReactNode, useRef, useState } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { ActionView } from './ActionView';
+import { BUTTON_TYPE } from './constants';
+import styles from './styles.module.scss';
+import { ActionsProps } from './types';
+import { hasVisibleActions } from './utils';
+
+/** Узкий тип action'а-кнопки внутри droplist'а: читаем только используемые слоты. */
+type SimpleButtonAction = {
+  label?: string;
+  icon?: ReactNode;
+  href?: string;
+  disabled?: boolean;
+  onClick?(event: MouseEvent<HTMLElement>): void;
+};
+
+function MobileActionsBase({ items, maxVisibleItems }: ActionsProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const { visibleItems, hiddenItems } = useDynamicList({ parentContainerRef: containerRef, items, maxVisibleItems });
+
+  const { t: tQuota } = quotaLocale.useTranslations();
+
+  if (!hasVisibleActions(items)) {
+    return null;
+  }
+
+  const hiddenItemsWithKebab = hiddenItems.concat(visibleItems.filter(item => item.variant === BUTTON_TYPE.Kebab));
+  const visibleItemsWithoutKebab = visibleItems.filter(item => item.variant !== BUTTON_TYPE.Kebab);
+
+  const droplistItems = hiddenItemsWithKebab.reduce<Item[]>((acc, action) => {
+    switch (action.variant) {
+      case BUTTON_TYPE.Tonal:
+      case BUTTON_TYPE.Simple:
+      case BUTTON_TYPE.Outline:
+      case BUTTON_TYPE.Function:
+      case BUTTON_TYPE.Filled:
+      case undefined: {
+        const simpleAction = action as SimpleButtonAction;
+
+        acc.push({
+          content: { label: simpleAction.label ?? '' },
+          onClick: event => {
+            setIsOpen(false);
+            simpleAction.onClick?.(event);
+          },
+          beforeContent: simpleAction.icon,
+          itemWrapRender: item => {
+            const node =
+              simpleAction.href && !simpleAction.disabled ? (
+                <a href={simpleAction.href} target='_blank' rel='noreferrer'>
+                  {item}
+                </a>
+              ) : (
+                item
+              );
+
+            return action.tooltip ? <Tooltip {...action.tooltip}>{node}</Tooltip> : node;
+          },
+        });
+        break;
+      }
+      case BUTTON_TYPE.Quota: {
+        // QuotaWidget самодостаточен (свой триггер + dropdown) — рендерим инлайн как inactive-айтем.
+        const quotaWidget = <QuotaWidget {...action} buttonProps={{ size: 'm', fullWidth: true }} />;
+
+        acc.push({
+          type: 'group',
+          label: tQuota('quotas'),
+          divider: acc.length > 0,
+          items: [
+            {
+              inactive: true,
+              content: action.tooltip ? <Tooltip {...action.tooltip}>{quotaWidget}</Tooltip> : quotaWidget,
+            },
+          ],
+        });
+        break;
+      }
+      case BUTTON_TYPE.Droplist:
+      case BUTTON_TYPE.Kebab: {
+        const needDivider = Boolean(action.variant === BUTTON_TYPE.Droplist && action.button?.label) || acc.length > 0;
+
+        acc.push({
+          type: 'group',
+          label: action.variant === BUTTON_TYPE.Droplist ? action.button?.label : undefined,
+          divider: needDivider,
+          items: action.list.items.map(item => ({
+            ...item,
+            onClick: event => {
+              setIsOpen(false);
+              (item as { onClick?(e: MouseEvent<HTMLElement>): void }).onClick?.(event);
+            },
+          })),
+        });
+        break;
+      }
+      case BUTTON_TYPE.Dropdown: {
+        // Dropdown-вариант — ButtonDropdown (droplist по items): разворачиваем items в группу, как Droplist/Kebab.
+        acc.push({
+          type: 'group',
+          label: action.label,
+          divider: acc.length > 0,
+          items: action.items.map(item => ({
+            ...item,
+            onClick: event => {
+              setIsOpen(false);
+              (item as { onClick?(e: MouseEvent<HTMLElement>): void }).onClick?.(event);
+            },
+          })),
+        });
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+
+    return acc;
+  }, []) satisfies DroplistProps['items'];
+
+  return (
+    <div className={styles.mobileActionsWrapper} ref={containerRef} data-test-id={TEST_IDS.mobileActions.root}>
+      {droplistItems.length > 0 && (
+        <Droplist size='m' open={isOpen} onOpenChange={setIsOpen} items={droplistItems}>
+          <Button
+            className={styles.button}
+            view={VIEW.Outline}
+            appearance='neutral'
+            icon={<KebabSVG />}
+            size='m'
+            data-test-id={TEST_IDS.mobileActions.trigger}
+          />
+        </Droplist>
+      )}
+
+      {visibleItemsWithoutKebab.map((action, index) => (
+        <ActionView
+          {...action}
+          key={index}
+          commonProps={{
+            className: styles.button,
+            size: 'm',
+            fullWidth: true,
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Мобильная панель действий. Форсирует `mobile`-раскладку через `withLayoutType`, чтобы вложенные
+ * адаптивные `@ds`-примитивы (`ButtonDropdown`/`ButtonKebab`/`ButtonDroplist`) рендерили
+ * bottom-sheet даже под desktop-провайдером.
+ */
+export const MobileActions = withLayoutType(MobileActionsBase, LAYOUT_TYPE.Mobile);

package/src/components/Actions/buttons/ButtonDroplist.tsx

@@ -0,0 +1,43 @@
+import { Button, ButtonProps, VIEW } from '@cloud-ru/ds-button';
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Droplist, DroplistProps } from '@cloud-ru/ds-list';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { useMemo } from 'react';
+
+export type ButtonDroplistProps = {
+  button:
+    | (Omit<ButtonProps, 'appearance' | 'view'> & { buttonType?: 'filled' })
+    | (Omit<ButtonProps, 'icon' | 'iconPosition' | 'appearance' | 'view'> & { buttonType?: 'function' });
+  list: Pick<DroplistProps, 'items' | 'closeDroplistOnItemClick' | 'className' | 'open' | 'onOpenChange'>;
+};
+
+export function ButtonDroplist({ button, list }: ButtonDroplistProps) {
+  const [open = false, onOpenChange] = useValueControl<boolean>({ onChange: list.onOpenChange, value: list.open });
+
+  const Icon = open ? ChevronUpSVG : ChevronDownSVG;
+
+  const buttonType = button.buttonType ?? 'function';
+
+  const buttonProps: ButtonProps = useMemo(
+    () =>
+      buttonType === 'filled'
+        ? { ...button, view: VIEW.Filled, appearance: 'primary' }
+        : { ...button, view: VIEW.Function, appearance: 'neutral', icon: <Icon />, iconPosition: 'after' },
+    [buttonType, button, Icon],
+  );
+
+  return (
+    <Droplist
+      {...list}
+      open={open}
+      onOpenChange={onOpenChange}
+      selection={{
+        mode: 'single',
+        value: 'null',
+      }}
+      size='m'
+    >
+      <Button {...buttonProps} />
+    </Droplist>
+  );
+}

package/src/components/Actions/buttons/ButtonKebab.tsx

@@ -0,0 +1,29 @@
+import { Button, ButtonProps, VIEW } from '@cloud-ru/ds-button';
+import { KebabSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Droplist, DroplistProps } from '@cloud-ru/ds-list';
+import { useValueControl } from '@cloud-ru/ds-utils';
+
+export type ButtonKebabProps = {
+  button?: Omit<ButtonProps, 'label' | 'icon' | 'view'>;
+  list: Pick<DroplistProps, 'items' | 'closeDroplistOnItemClick' | 'open' | 'onOpenChange' | 'className'>;
+};
+
+export function ButtonKebab({ button, list }: ButtonKebabProps) {
+  const [open = false, onOpenChange] = useValueControl<boolean>({ onChange: list.onOpenChange, value: list.open });
+
+  return (
+    <Droplist
+      {...list}
+      open={open}
+      onOpenChange={onOpenChange}
+      selection={{
+        mode: 'single',
+        value: 'null',
+      }}
+      placement='bottom-end'
+      size='m'
+    >
+      <Button {...button} view={VIEW.Outline} icon={<KebabSVG />} appearance='neutral' />
+    </Droplist>
+  );
+}

package/src/components/Actions/buttons/ButtonQuota.tsx

@@ -0,0 +1,16 @@
+import { QuotaWidget, QuotaWidgetProps } from '@cloud-ru/ds-uikit-product-quota';
+
+/**
+ * Quota-вариант action'а. В легаси на мобиле рендерился `QuotaWidgetMobile` (bottom-sheet),
+ * которого в `@cloud-ru/ds-uikit-product-quota` нет — есть только `QuotaWidget`, самостоятельно управляющий
+ * собственным dropdown'ом и кнопкой-триггером (`buttonProps`). Поэтому используем `QuotaWidget` на
+ * обеих раскладках; `QuotaWidget` сам не адаптивен.
+ *
+ * TODO Figma-phase: на mobile легаси показывал квоты в bottom-sheet; `@ds` `QuotaWidget` всегда
+ * открывает анкорный dropdown. Визуальный паритет мобильной выкладки квот — отдельная задача.
+ */
+export type ButtonQuotaProps = QuotaWidgetProps;
+
+export function ButtonQuota({ buttonProps, ...props }: ButtonQuotaProps) {
+  return <QuotaWidget {...props} buttonProps={{ size: 's', ...buttonProps }} />;
+}

package/src/components/Actions/buttons/index.ts

@@ -0,0 +1,3 @@
+export * from './ButtonDroplist';
+export * from './ButtonKebab';
+export * from './ButtonQuota';

package/src/components/Actions/constants.ts

@@ -0,0 +1,11 @@
+export const BUTTON_TYPE = {
+  Filled: 'filled',
+  Outline: 'outline',
+  Tonal: 'tonal',
+  Function: 'function',
+  Simple: 'simple',
+  Dropdown: 'dropdown',
+  Droplist: 'droplist',
+  Quota: 'quota',
+  Kebab: 'kebab',
+} as const;

package/src/components/Actions/index.ts

@@ -0,0 +1,7 @@
+export * from './ActionView';
+export * from './buttons';
+export * from './constants';
+export * from './DesktopActions';
+export * from './utils';
+export * from './MobileActions';
+export * from './types';

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

@@ -0,0 +1,34 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.desktopActionsWrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  flex-shrink: 0;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+
+  height: 100%;
+}
+
+.mobileActionsWrapper {
+  display: flex;
+  // row-reverse: kebab (первый в DOM) встаёт справа, видимые действия — слева (Figma 3334:63034).
+  flex-direction: row-reverse;
+  flex-shrink: 0;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+
+  width: 100%;
+}
+
+.button {
+  white-space: nowrap;
+
+  &[data-full-width]:not([data-variant='icon-only']) {
+    flex: 1 1 0;
+  }
+
+  &[data-variant='icon-only'] {
+    flex: 0 0 auto;
+  }
+}

package/src/components/Actions/types.ts

@@ -0,0 +1,34 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+import { TooltipProps } from '@cloud-ru/ds-tooltip';
+import { ButtonDropdownProps } from '@cloud-ru/ds-uikit-product-button-predefined';
+
+import { ButtonDroplistProps } from './buttons/ButtonDroplist';
+import { ButtonKebabProps } from './buttons/ButtonKebab';
+import { ButtonQuotaProps } from './buttons/ButtonQuota';
+import { BUTTON_TYPE } from './constants';
+
+/**
+ * Action — один элемент панели действий. Дискриминированный union по `variant` (`BUTTON_TYPE`).
+ * Простые кнопки (`filled`/`outline`/`tonal`/`function`/`simple`) маппятся на единый `Button` из
+ * `@cloud-ru/ds-button` с соответствующим `view`; составные (`dropdown`/`kebab`/`droplist`/`quota`) — на
+ * предопределённые обёртки.
+ */
+export type Action = {
+  tooltip?: TooltipProps;
+  hidden?: boolean;
+} & (
+  | ({ variant?: typeof BUTTON_TYPE.Filled } & ButtonProps)
+  | ({ variant: typeof BUTTON_TYPE.Outline } & ButtonProps)
+  | ({ variant: typeof BUTTON_TYPE.Tonal } & ButtonProps)
+  | ({ variant: typeof BUTTON_TYPE.Function } & ButtonProps)
+  | ({ variant: typeof BUTTON_TYPE.Simple } & ButtonProps)
+  | ({ variant: typeof BUTTON_TYPE.Dropdown } & ButtonDropdownProps)
+  | ({ variant: typeof BUTTON_TYPE.Kebab } & ButtonKebabProps)
+  | ({ variant: typeof BUTTON_TYPE.Droplist } & ButtonDroplistProps)
+  | ({ variant: typeof BUTTON_TYPE.Quota } & ButtonQuotaProps)
+);
+
+export type ActionsProps = {
+  items: Action[];
+  maxVisibleItems?: number;
+};

package/src/components/Actions/utils.ts

@@ -0,0 +1,5 @@
+import { Action } from './types';
+
+export function hasVisibleActions(actions: Action[]) {
+  return actions.some(action => !action.hidden);
+}

package/src/components/DefaultSubtitle/DefaultSubtitle.tsx

@@ -0,0 +1,27 @@
+import { QuestionTooltip } from '@cloud-ru/ds-tooltip';
+import { CopyLine, CopyLineProps } from '@cloud-ru/ds-uikit-product-copy';
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+
+import styles from './styles.module.scss';
+
+export type DefaultSubtitleProps = WithSupportProps<{
+  /** Подпись слева */
+  label: string;
+  /** Копируемое значение (пропсы CopyLine) */
+  value: CopyLineProps;
+  /** Тултип-подсказка рядом с подписью */
+  labelTooltip?: ReactNode;
+}>;
+
+export function DefaultSubtitle({ label, labelTooltip, value, ...rest }: DefaultSubtitleProps) {
+  return (
+    <div className={styles.subtitle} {...extractSupportProps(rest)}>
+      <div className={styles.label}>
+        {label}
+        {labelTooltip && <QuestionTooltip tip={labelTooltip} />}
+      </div>
+      <CopyLine {...value} />
+    </div>
+  );
+}

package/src/components/DefaultSubtitle/index.ts

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

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

@@ -0,0 +1,17 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.subtitle {
+  display: flex;
+  flex-direction: row;
+  gap: base.$sn-primitive-dimension-12;
+  align-items: center;
+}
+
+.label {
+  @include base.composite-var(base.$sn-regular-body-m);
+
+  display: flex;
+  flex-direction: row;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+}

package/src/components/Headline/Headline.tsx

@@ -0,0 +1,42 @@
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+
+import styles from './styles.module.scss';
+import { HeadlineProps } from './types';
+
+export function Headline({
+  title,
+  actions,
+  moreActions,
+  slotBeforeTitle,
+  slotAfterTitle,
+  subtitle,
+  truncateTitle,
+  ...rest
+}: HeadlineProps) {
+  const needsRender = Boolean(title || slotBeforeTitle || slotAfterTitle || subtitle || actions || moreActions);
+
+  if (!needsRender) return null;
+
+  return (
+    <div className={styles.headline} {...extractSupportProps(rest)}>
+      <div className={styles.headlineLayout}>
+        <div className={styles.titleLayout}>
+          {slotBeforeTitle && <div className={styles.prefixButtonWrapper}>{slotBeforeTitle}</div>}
+          <Typography variant={VARIANT.headline} size={SIZE.s} as='h1' className={styles.title}>
+            {truncateTitle ? <TruncateString variant='end' text={title} maxLines={1} /> : title}
+          </Typography>
+
+          {slotAfterTitle && <div className={styles.statusWrapper}>{slotAfterTitle}</div>}
+
+          {moreActions && <div className={styles.moreActions}>{moreActions}</div>}
+        </div>
+
+        {Boolean(actions) && <div className={styles.actions}>{actions}</div>}
+      </div>
+
+      {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
+    </div>
+  );
+}

package/src/components/Headline/index.ts

@@ -0,0 +1,2 @@
+export * from './Headline';
+export * from './types';