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

package/src/components/PageForm/mobileStyles.module.scss

@@ -0,0 +1,88 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.container {
+  position: relative;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 0;
+
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: base.$sn-primitive-dimension-16;
+
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+  padding: base.$sn-primitive-dimension-16;
+
+  background-color: base.$sn-theme-color-neutral-background1Level;
+}
+
+.body {
+  @include base.composite-var(base.$sn-regular-body-m);
+
+  flex: 1;
+  color: base.$sn-theme-color-available-version-textMain;
+  background-color: base.$sn-theme-color-neutral-background1Level;
+}
+
+.footer {
+  position: sticky;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 1;
+  bottom: 0;
+
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-8;
+
+  box-sizing: border-box;
+  // Бока и низ подтягиваем к кромкам контейнера; сверху margin'а нет — зазор до рамки задаёт gap.
+  margin: 0 calc(0px - base.$sn-primitive-dimension-16) calc(0px - base.$sn-primitive-dimension-16);
+  padding: base.$sn-primitive-dimension-8 base.$sn-primitive-dimension-16 base.$sn-primitive-dimension-16;
+  border-top: base.$sn-primitive-strokeWeight-strokeRegular solid base.$sn-theme-color-neutral-decorTransparent;
+
+  background-color: base.$sn-theme-color-neutral-background1Level;
+}
+
+.priceSummary {
+  display: flex;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+  justify-content: space-between;
+
+  min-height: base.$sn-primitive-dimension-40;
+}
+
+.priceSummaryText {
+  color: base.$sn-theme-color-available-version-textSecondary;
+}
+
+.priceSummaryRight {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.header {
+  position: sticky;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 1;
+  top: 0;
+
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-16;
+
+  box-sizing: border-box;
+  // Верх/бока подтягиваем к кромкам контейнера, чтобы разделитель шёл во всю ширину.
+  margin: calc(0px - base.$sn-primitive-dimension-16) calc(0px - base.$sn-primitive-dimension-16) 0;
+  padding: base.$sn-primitive-dimension-16;
+  border-bottom: base.$sn-primitive-strokeWeight-strokeRegular solid base.$sn-theme-color-available-borderColor;
+
+  background-color: base.$sn-theme-color-neutral-background1Level;
+}
+
+.modalContent {
+  padding: 0 base.$sn-primitive-dimension-16;
+}

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

@@ -0,0 +1,134 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/block.module' as block;
+
+// Мастер задаёт паддинг карточки примитивом, а не block-анатомией (Figma node 9165:19616).
+$card-padding: base.$sn-primitive-dimension-56;
+// Паддинг карточки для прилипшего футера слишком велик: сверху он всегда поджат до этого значения,
+// а в прилипшем состоянии — со всех сторон (как в старом ките).
+$footer-compact-padding: block.$sn-block-anatomy-l-padding;
+
+.container {
+  display: flex;
+  gap: base.$sn-primitive-dimension-24;
+  justify-content: center;
+
+  box-sizing: border-box;
+  min-width: fit-content;
+  min-height: 100%;
+  padding: base.$sn-density-spacing-interval-l;
+}
+
+// Подложку, радиус и box-sizing несёт сам Block; здесь только габариты карточки.
+.form {
+  flex-shrink: 0;
+  // 800px — фиксированная ширина карточки формы, токена нет.
+  width: 800px;
+  min-height: 100%;
+}
+
+// Перебиваем размерное правило Block'а по той же оси `data-size`.
+.container > .form[data-size='l'] {
+  padding: $card-padding;
+}
+
+// Block — подложка, а не layout-контейнер: раскладку контента задаёт потребитель
+.formContent {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-32;
+}
+
+.headline {
+  position: relative;
+}
+
+.body {
+  @include base.composite-var(base.$sn-regular-body-m);
+
+  flex: 1;
+  color: base.$sn-theme-color-available-version-textMain;
+  background-color: base.$sn-theme-color-neutral-background1Level;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.footerSticky {
+  position: sticky;
+  bottom: 0;
+
+  box-sizing: border-box;
+  // Отрицательные margin'ы компенсируют padding карточки, растягивая футер до её кромок.
+  margin: calc(0px - $footer-compact-padding) calc(0px - $card-padding) calc(0px - $card-padding);
+  padding: $footer-compact-padding $card-padding $card-padding;
+  border-radius: 0 0 block.$sn-block-anatomy-l-borderRadius block.$sn-block-anatomy-l-borderRadius;
+
+  background-color: base.$sn-theme-color-neutral-background1Level;
+
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  transition:
+    border-radius 0.15s ease,
+    padding 0.15s ease;
+
+  // clip-path обрезает тень до верхней кромки — остаётся только тень сверху.
+  &::before {
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    inset: 0;
+
+    border-top: base.$sn-primitive-strokeWeight-strokeRegular solid base.$sn-theme-color-neutral-decor;
+    border-radius: inherit;
+
+    opacity: 0;
+
+    /* stylelint-disable-next-line declaration-property-value-allowed-list */
+    transition: opacity 0.15s ease;
+  }
+}
+
+.footerStuck {
+  padding: $footer-compact-padding;
+
+  &::before {
+    opacity: 1;
+  }
+}
+
+// Невидимый sentinel-элемент 1×1px для IntersectionObserver.
+.footerSentinel {
+  pointer-events: none;
+
+  position: absolute;
+  // Отсчёт идёт от слота содержимого Block'а — опускаем sentinel на нижнюю кромку карточки.
+  bottom: calc(0px - $card-padding);
+  left: 50%;
+  transform: translateX(-50%);
+
+  width: base.$sn-primitive-dimension-2;
+  height: base.$sn-primitive-dimension-1;
+}
+
+.mainActions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: auto;
+}
+
+.sideItems {
+  position: sticky;
+  top: base.$sn-density-spacing-interval-l;
+
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-4;
+  align-self: flex-start;
+  // 304px — фиксированная ширина боковой колонки, токена нет.
+  width: 304px;
+}

package/src/components/PageForm/types.ts

@@ -0,0 +1,64 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+import { ModalCustomProps } from '@cloud-ru/ds-modal';
+import { TooltipProps } from '@cloud-ru/ds-tooltip';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { PropsWithChildren, ReactNode } from 'react';
+
+import { ButtonPrimaryVariant, ButtonSecondaryVariant } from '../../types';
+import { HeadlineProps } from '../Headline';
+
+export type DesktopPageFormProps = WithSupportProps<
+  PropsWithChildren<
+    Pick<HeadlineProps, 'title' | 'subtitle'> & {
+      className?: string;
+
+      /** Закрепляет футер внизу формы при прокрутке контента. */
+      stickyFooter?: boolean;
+
+      stepper?: ReactNode;
+
+      priceSummary?: {
+        total: ReactNode;
+        content?: ReactNode;
+      };
+
+      sideBlock?: {
+        label: string;
+        content: ReactNode;
+        /**
+         * Только mobile: высота листа sideBlock'а (snap-точки `BottomSheet`). `[1]` — на всю высоту.
+         * По умолчанию — по высоте контента (fit-content).
+         */
+        snapPoints?: ModalCustomProps['snapPoints'];
+      }[];
+
+      footer?: {
+        buttonPrimary: (
+          | {
+              variant: ButtonPrimaryVariant;
+            }
+          | {
+              variant: 'custom';
+              label: string;
+            }
+        ) & {
+          tooltip?: TooltipProps;
+        } & Omit<ButtonProps, 'label'>;
+        buttonSecondary?: (
+          | {
+              variant: ButtonSecondaryVariant;
+            }
+          | {
+              variant: 'custom';
+              label: string;
+            }
+        ) & {
+          tooltip?: TooltipProps;
+        } & Omit<ButtonProps, 'label'>;
+        buttonAdditional?: ButtonProps & {
+          tooltip?: TooltipProps;
+        };
+      };
+    }
+  >
+>;

package/src/components/PageLoading/PageLoading.tsx

@@ -0,0 +1,18 @@
+import { LOADER_SIZE, Spinner } from '@cloud-ru/ds-loader';
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+
+import styles from './styles.module.scss';
+
+export type PageLoadingProps = WithSupportProps<{
+  /** CSS-класс */
+  className?: string;
+}>;
+
+export function PageLoading({ className, ...rest }: PageLoadingProps) {
+  return (
+    <div className={cn(styles.wrapper, className)} {...extractSupportProps(rest)}>
+      <Spinner size={LOADER_SIZE.M} className={styles.spinner} />
+    </div>
+  );
+}

package/src/components/PageLoading/index.ts

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

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

@@ -0,0 +1,17 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  color: base.$sn-theme-color-neutral-accent;
+}
+
+.spinner {
+  flex-shrink: 0;
+}

package/src/components/PageServices/DesktopPageServices.tsx

@@ -0,0 +1,55 @@
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+
+import { Headline } from '../Headline';
+import { PageSidebar } from '../PageSidebar';
+import { usePageHeight } from './hooks';
+import styles from './styles.module.scss';
+import { DesktopPageServicesProps } from './types';
+
+export function DesktopPageServices({
+  children,
+  title,
+  actions,
+  className,
+  sidebar,
+  slotBeforeTitle,
+  subtitle,
+  slotAfterTitle,
+  truncateTitle,
+  autoHeight,
+  limitContentMaxWidth,
+  ...rest
+}: DesktopPageServicesProps) {
+  const height = usePageHeight(autoHeight);
+
+  return (
+    <div
+      className={cn(styles.wrapper, className)}
+      {...(!autoHeight && { style: { height } })}
+      {...extractSupportProps(rest)}
+    >
+      <div className={styles.tempContainer}>
+        <div className={styles.container} data-limited={limitContentMaxWidth}>
+          <Headline
+            title={title}
+            actions={actions}
+            slotBeforeTitle={slotBeforeTitle}
+            slotAfterTitle={slotAfterTitle}
+            subtitle={subtitle}
+            truncateTitle={truncateTitle}
+          />
+
+          <div className={styles.childWrapper}>{children}</div>
+        </div>
+      </div>
+      {sidebar && (
+        <div className={styles.sidebar}>
+          <PageSidebar {...sidebar} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+DesktopPageServices.displayName = 'DesktopPageServices';

package/src/components/PageServices/MobilePageServices.tsx

@@ -0,0 +1,47 @@
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { PropsWithChildren } from 'react';
+
+import { ActionsProps, MobileActions } from '../Actions';
+import { Headline, HeadlineProps } from '../Headline';
+import { SidebarSelect, SidebarSelectProps } from '../PageSidebar';
+import styles from './mobileStyles.module.scss';
+
+export type MobilePageServicesProps = WithSupportProps<
+  PropsWithChildren<
+    Pick<HeadlineProps, 'title' | 'slotBeforeTitle' | 'subtitle' | 'slotAfterTitle'> & {
+      className?: string;
+      sidebar?: SidebarSelectProps;
+      actions?: ActionsProps['items'];
+      maxVisibleActionsItems?: ActionsProps['maxVisibleItems'];
+    }
+  >
+>;
+
+export function MobilePageServices({
+  children,
+  title,
+  actions = [],
+  className,
+  sidebar,
+  slotAfterTitle,
+  subtitle,
+  slotBeforeTitle,
+  maxVisibleActionsItems,
+  ...rest
+}: MobilePageServicesProps) {
+  return (
+    <div className={cn(styles.wrapper, className)} {...extractSupportProps(rest)}>
+      {/* Триггер-селект «Информация» — full-bleed строка с разделителем снизу (Figma 3334:63034). */}
+      {sidebar && <SidebarSelect {...sidebar} className={styles.sidebarSelect} />}
+
+      <div className={styles.body}>
+        <Headline title={title} slotBeforeTitle={slotBeforeTitle} slotAfterTitle={slotAfterTitle} subtitle={subtitle} />
+
+        {actions.length > 0 && <MobileActions items={actions} maxVisibleItems={maxVisibleActionsItems} />}
+
+        <div className={styles.childWrapper}>{children}</div>
+      </div>
+    </div>
+  );
+}

package/src/components/PageServices/PageServices.tsx

@@ -0,0 +1,30 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+
+import { DesktopActions } from '../Actions';
+import { DesktopPageServices } from './DesktopPageServices';
+import { MobilePageServices, MobilePageServicesProps } from './MobilePageServices';
+import { DesktopPageServicesProps } from './types';
+
+export type PageServicesProps = Omit<DesktopPageServicesProps, 'actions'> &
+  Pick<MobilePageServicesProps, 'actions' | 'maxVisibleActionsItems'>;
+
+/**
+ * Адаптивный `PageServices`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * `MobilePageServices` и передаёт `actions` структурированным массивом; на остальных раскладках
+ * оборачивает `actions` в `DesktopActions` и отдаёт `DesktopPageServices` через слот `actions`.
+ * Форс платформы — `withLayoutType` / вложенный `<AdaptiveProvider layoutType=…>`; пропа
+ * `layoutType` у компонента нет.
+ */
+export function PageServices({ actions, maxVisibleActionsItems, ...props }: PageServicesProps) {
+  const { layoutType } = useAdaptiveLayout();
+
+  if (isMobileLayout(layoutType)) {
+    return <MobilePageServices actions={actions} maxVisibleActionsItems={maxVisibleActionsItems} {...props} />;
+  }
+
+  const actionsNode = actions ? <DesktopActions items={actions} /> : undefined;
+
+  return <DesktopPageServices {...props} actions={actionsNode} />;
+}
+
+PageServices.displayName = 'PageServices';

package/src/components/PageServices/hooks.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+import { GLOBAL_CONTAINER_ID } from '../../constants';
+
+/**
+ * Высота страницы сервиса, синхронизированная с глобальным контейнером приложения
+ * (`GLOBAL_CONTAINER_ID`) через `ResizeObserver`. При `autoHeight` наблюдение отключается —
+ * страница занимает высоту по контенту.
+ */
+export function usePageHeight(autoHeight?: boolean): number {
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    if (autoHeight) return;
+
+    const container = document.getElementById(GLOBAL_CONTAINER_ID);
+
+    if (!container) return;
+
+    const observer = new ResizeObserver(entities =>
+      entities.forEach(entity => {
+        if (entity.target === container) {
+          const [{ blockSize }] = entity.contentBoxSize;
+          setHeight(Math.floor(blockSize));
+        }
+      }),
+    );
+
+    observer.observe(container);
+
+    return () => observer.disconnect();
+  }, [autoHeight]);
+
+  return height;
+}

package/src/components/PageServices/index.ts

@@ -0,0 +1,4 @@
+export * from './PageServices';
+export * from './DesktopPageServices';
+export * from './MobilePageServices';
+export * from './types';

package/src/components/PageServices/mobileStyles.module.scss

@@ -0,0 +1,34 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+}
+
+.sidebarSelect {
+  border-bottom: base.$sn-primitive-strokeWeight-strokeRegular solid base.$sn-theme-color-neutral-decor;
+}
+
+// Тело страницы: контент с отступом 16 (compact density), селект выше — full-bleed.
+.body {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: base.$sn-density-spacing-interval-l;
+
+  box-sizing: border-box;
+  padding: base.$sn-density-spacing-interval-l;
+}
+
+.childWrapper {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 1;
+
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,61 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.wrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+
+  min-width: 100%;
+  height: 100%;
+}
+
+.sidebar {
+  position: relative;
+
+  flex-grow: 0;
+  flex-shrink: 0;
+
+  box-sizing: border-box;
+  width: fit-content;
+  // 256px — ширина сайдбара из Figma-мастера, токена нет.
+  max-width: 256px;
+}
+
+.tempContainer {
+  position: relative;
+
+  overflow-y: auto;
+  flex-grow: 1;
+  flex-shrink: 1;
+
+  box-sizing: border-box;
+  // 992px — минимальная ширина контентной области из Figma-мастера, токена нет.
+  min-width: 992px;
+}
+
+.container {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-density-spacing-interval-m;
+
+  box-sizing: border-box;
+  min-height: 100%;
+  padding: base.$sn-density-spacing-interval-l;
+
+  &[data-limited='true'] {
+    // 1248px — десктопный фрейм страницы из Figma-мастера, токена нет.
+    max-width: 1248px;
+    margin: 0 auto;
+  }
+}
+
+.childWrapper {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 1;
+
+  box-sizing: border-box;
+}

package/src/components/PageServices/types.ts

@@ -0,0 +1,16 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { PropsWithChildren } from 'react';
+
+import { HeadlineProps } from '../Headline';
+import { PageSidebarProps } from '../PageSidebar';
+
+export type DesktopPageServicesProps = WithSupportProps<
+  PropsWithChildren<
+    Pick<HeadlineProps, 'title' | 'actions' | 'subtitle' | 'slotAfterTitle' | 'slotBeforeTitle' | 'truncateTitle'> & {
+      className?: string;
+      sidebar?: PageSidebarProps;
+      autoHeight?: boolean;
+      limitContentMaxWidth?: boolean;
+    }
+  >
+>;