@cloud-ru/uikit-product-site-section 0.23.3

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

@@ -0,0 +1,52 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.sectionPromoList {
+  width: 100%;
+  position: relative;
+}
+
+.cards {
+  display: flex;
+  gap: 8px;
+
+  &[data-layout-type='tablet'],
+  &[data-layout-type='mobile'] {
+    flex-direction: column;
+  }
+}
+
+.left {
+  padding: 32px;
+  background-color: var.$sys-invert-neutral-background;
+}
+
+.right {
+  --image-size: 440px;
+  --image-visible-size: 304px;
+  padding: 32px;
+  position: relative;
+  flex-grow: 1;
+  background-color: var.$sys-invert-neutral-background;
+  background-image: var(--image);
+  background-repeat: no-repeat;
+  background-size: var(--image-size);
+  background-position: calc(100% + var(--image-size) - var(--image-visible-size)) calc(100% + var(--image-size) - var(--image-visible-size));
+
+  &[data-layout-type='tablet'] {
+    --image-visible-size: 300px;
+  }
+
+  &[data-layout-type='mobile'] {
+    --image-visible-size: 140px;
+    --image-size: 280px;
+
+    padding: 0 0 var(--image-visible-size);
+    background-position-x: center;
+  }
+}
+
+.rightSectionText {
+  &[data-layout-type='mobile'] {
+    padding: 32px 32px 0;
+  }
+}

package/src/components/SectionSocial/SectionSocial.tsx

@@ -0,0 +1,66 @@
+import cn from 'classnames';
+
+import { Grid, GridProps } from '@cloud-ru/uikit-product-site-grid';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+
+import { CardSocial, CardSocialProps } from '../../helperComponents';
+import { SectionColor } from '../../types';
+import { SectionBasic, SectionBasicProps } from '../SectionBasic';
+import { GRID_CONFIG } from './constants';
+import styles from './styles.module.scss';
+
+export type SectionSocialProps = WithSupportProps<
+  WithLayoutType<
+    Pick<SectionBasicProps, 'title' | 'subtitle' | 'titleAlign'> & {
+      /** id секции */
+      id?: string;
+      /** CSS-класс */
+      className?: string;
+      /** Цвет фона */
+      backgroundColor?: SectionColor;
+      /** Заголовок */
+      title?: string;
+
+      /** Размер отступов сетки */
+      gap?: GridProps['gap'];
+      cards: Omit<CardSocialProps, 'layoutType'>[];
+    }
+  >
+>;
+
+export function SectionSocial({
+  id,
+  layoutType,
+  title,
+  subtitle,
+  backgroundColor,
+  className,
+  cards,
+  titleAlign,
+  gap = 's',
+  ...rest
+}: SectionSocialProps) {
+  return (
+    <SectionBasic
+      id={id}
+      title={title}
+      subtitle={subtitle}
+      titleAlign={titleAlign}
+      backgroundColor={backgroundColor}
+      layoutType={layoutType}
+      className={cn(className, styles.sectionSocial)}
+      {...extractSupportProps(rest)}
+    >
+      <Grid columnsConfig={GRID_CONFIG} layoutType={layoutType} gap={gap}>
+        {cards.map((card, index) => (
+          <CardSocial
+            {...card}
+            key={card.title}
+            layoutType={layoutType}
+            data-test-id={card['data-test-id'] ?? `section-social__card-${index}`}
+          />
+        ))}
+      </Grid>
+    </SectionBasic>
+  );
+}

package/src/components/SectionSocial/constants.ts

@@ -0,0 +1,5 @@
+export const GRID_CONFIG = {
+  desktop: { amount: 2, minWidth: 464 },
+  tablet: { amount: 2, minWidth: 328 },
+  mobile: { amount: 1, minWidth: 328 },
+};

package/src/components/SectionSocial/index.ts

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

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

@@ -0,0 +1,4 @@
+.sectionSocial {
+  width: 100%;
+  position: relative;
+}

package/src/components/SectionTable/SectionTable.tsx

@@ -0,0 +1,46 @@
+import cn from 'classnames';
+
+import { RichText } from '@cloud-ru/uikit-product-site-rich-text';
+import { Table, TableProps } from '@cloud-ru/uikit-product-site-table';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+
+import { SectionBasic } from '../SectionBasic';
+import styles from './styles.module.scss';
+
+export type SectionTableProps = WithSupportProps<
+  WithLayoutType<
+    {
+      /** id секции */
+      id?: string;
+      /** CSS-класс */
+      className?: string;
+      /** Заголовок */
+      title?: string;
+      /** Подзаголовок */
+      subtitle?: string;
+      /** Описание */
+      description?: string;
+    } & TableProps
+  >
+>;
+
+export function SectionTable({ id, layoutType, className, title, subtitle, description, ...rest }: SectionTableProps) {
+  return (
+    <SectionBasic
+      id={id}
+      title={title}
+      backgroundColor='neutral-background1-level'
+      layoutType={layoutType}
+      className={cn(className, styles.sectionTable)}
+      {...extractSupportProps(rest)}
+    >
+      {subtitle && <RichText richText={subtitle} className={styles.subtitle} data-test-id='section-table__subtitle' />}
+
+      <Table {...rest} data-test-id='section-table__table' />
+
+      {description && (
+        <RichText className={styles.description} richText={description} data-test-id='section-table__description' />
+      )}
+    </SectionBasic>
+  );
+}

package/src/components/SectionTable/index.ts

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

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

@@ -0,0 +1,19 @@
+@use '@sbercloud/figma-tokens-web/build/scss/styles-theme-variables' as var;
+
+.sectionTable {
+  width: 100%;
+  position: relative;
+}
+
+.subtitle {
+  @include var.composite-var(var.$sans-title-m);
+
+  color: var.$sys-neutral-text-main;
+}
+
+.description {
+  @include var.composite-var(var.$sans-body-l);
+  color: var.$sys-neutral-text-support;
+
+  word-break: break-word;
+}

package/src/components/index.ts

@@ -0,0 +1,19 @@
+export * from './SectionAccordion';
+export * from './SectionBasic';
+export * from './SectionBenefits';
+export * from './SectionBenefitsBanner';
+export * from './SectionBlogCarousel';
+export * from './SectionCaseCarousel';
+export * from './SectionCatalog';
+export * from './SectionClientsCarousel';
+export * from './SectionContent';
+export * from './SectionContentList';
+export * from './SectionContentTabs';
+export * from './SectionExpertsCarousel';
+export * from './SectionLeading';
+export * from './SectionMarketplaceCarousel';
+export * from './SectionMedia';
+export * from './SectionPersonalManager';
+export * from './SectionPromoList';
+export * from './SectionSocial';
+export * from './SectionTable';

package/src/constants.ts

@@ -0,0 +1,4 @@
+export const SECTION_COLORS = {
+  NeutralBackground1Level: 'neutral-background1-level',
+  NeutralBackground: 'neutral-background',
+} as const;

package/src/helperComponents/BenefitItem/BenefitItem.tsx

@@ -0,0 +1,34 @@
+import { RichText } from '@cloud-ru/uikit-product-site-rich-text';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { Typography } from '@snack-uikit/typography';
+
+import styles from './styles.module.scss';
+import { getValueTypographyProps, getValueTypographySubtitleProps } from './utils';
+
+export type BenefitItemProps = WithLayoutType<{
+  title: string;
+  subtitle: string;
+  description: string;
+  paddingLeftItem?: number;
+}>;
+
+export function BenefitItem({ title, subtitle, description, paddingLeftItem, layoutType }: BenefitItemProps) {
+  const paddingItem =
+    (layoutType === 'desktop' || layoutType === 'desktopSmall') && paddingLeftItem ? paddingLeftItem : 0;
+
+  return (
+    <div className={styles.benefitItem} style={{ paddingLeft: `${paddingItem}px` }} data-layout-type={layoutType}>
+      <div className={styles.benefitsTitles}>
+        <Typography family='sans' tag='div' {...getValueTypographyProps(layoutType)}>
+          <RichText richText={title} />
+        </Typography>
+        <Typography family='sans' tag='div' {...getValueTypographySubtitleProps(layoutType)}>
+          <RichText richText={subtitle} className={styles.subtitleText} data-layout-type={layoutType} />
+        </Typography>
+      </div>
+      <Typography family='sans' tag='div' purpose='body' size='m'>
+        <RichText richText={description} />
+      </Typography>
+    </div>
+  );
+}

package/src/helperComponents/BenefitItem/index.ts

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

package/src/helperComponents/BenefitItem/styles.module.scss

@@ -0,0 +1,34 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element' as ste;
+
+.benefitItem {
+  display: flex;
+  color: inherit;
+
+  flex-direction: column;
+  gap: ste.$dimension-1m;
+
+  &[data-layout-type='tablet'] {
+    gap: calc(#{ste.$dimension-1m} + #{ste.$dimension-050m});
+    max-width: unset;
+  }
+
+  &[data-layout-type='mobile'] {
+    gap: unset;
+    max-width: unset;
+  }
+}
+
+.benefitsTitles {
+  display: flex;
+  gap: ste.$dimension-1m;
+  align-items: flex-end;
+}
+
+.subtitleText {
+  padding-bottom: 8px;
+
+  &[data-layout-type='tablet'],
+  &[data-layout-type='mobile'] {
+    padding-bottom: 5px;
+  }
+}

package/src/helperComponents/BenefitItem/utils.ts

@@ -0,0 +1,28 @@
+import { LayoutType } from '@cloud-ru/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+
+export function getValueTypographyProps(layoutType: LayoutType): Pick<TypographyProps, 'purpose' | 'size'> {
+  switch (layoutType) {
+    case 'mobile':
+    case 'tablet':
+      return { purpose: 'display', size: 's' };
+
+    case 'desktop':
+    case 'desktopSmall':
+    default:
+      return { purpose: 'display', size: 'l' };
+  }
+}
+
+export function getValueTypographySubtitleProps(layoutType: LayoutType): Pick<TypographyProps, 'purpose' | 'size'> {
+  switch (layoutType) {
+    case 'mobile':
+    case 'tablet':
+      return { purpose: 'title', size: 'm' };
+
+    case 'desktop':
+    case 'desktopSmall':
+    default:
+      return { purpose: 'headline', size: 's' };
+  }
+}

package/src/helperComponents/CardClient/CardClient.tsx

@@ -0,0 +1,15 @@
+import styles from './styles.module.scss';
+
+export type CardClientProps = {
+  img: string;
+  alt: string;
+};
+
+export function CardClient({ img, alt }: CardClientProps) {
+  return (
+    <div className={styles.cardClient}>
+      <div className={styles.imageBackground} />
+      <img className={styles.image} src={img} alt={alt} />
+    </div>
+  );
+}

package/src/helperComponents/CardClient/index.ts

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

package/src/helperComponents/CardClient/styles.module.scss

@@ -0,0 +1,25 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.cardClient {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  height: 100px;
+}
+
+.imageBackground {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var.$sys-neutral-background;
+}
+
+.image {
+  position: relative;
+  max-width: 172px;
+  max-height: 48px;
+  object-fit: cover;
+  pointer-events: none;
+}

package/src/helperComponents/CardLeading/CardLeading.tsx

@@ -0,0 +1,29 @@
+import { extractSupportProps, WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { Typography } from '@snack-uikit/typography';
+
+import styles from './styles.module.scss';
+import { CardLeadingItem } from './types';
+import { getLabelTypographyProps, getValueTypographyProps } from './utils';
+
+export type CardLeadingProps = WithLayoutType<CardLeadingItem>;
+
+export function CardLeading({ layoutType, value, label, description, image, ...rest }: CardLeadingProps) {
+  return (
+    <div className={styles.cardLeading} {...extractSupportProps(rest)}>
+      <div className={styles.wrapper}>
+        <div className={styles.header}>
+          <Typography family='sans' {...getValueTypographyProps(layoutType)} className={styles.cardLeadingColor}>
+            {value}
+          </Typography>
+          <Typography family='sans' {...getLabelTypographyProps(layoutType)} className={styles.cardLeadingColor}>
+            {label}
+          </Typography>
+        </div>
+        <img className={styles.illustration} src={image} alt='illustration' />
+        <div className={styles.footer} data-layout-type={layoutType}>
+          <Typography.SansBodyL className={styles.cardLeadingColor}>{description}</Typography.SansBodyL>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/helperComponents/CardLeading/index.ts

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

package/src/helperComponents/CardLeading/styles.module.scss

@@ -0,0 +1,43 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.cardLeading {
+  overflow: hidden;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background-color: var.$sys-neutral-background;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var.$dimension-2m;
+
+  padding: var.$dimension-4m;
+
+  &[data-layout-type='tablet'],
+  &[data-layout-type='mobile'] {
+    padding: var.$dimension-3m;
+  }
+}
+
+.cardLeadingColor {
+  color: var.$sys-neutral-text-main;
+}
+
+.illustration {
+  pointer-events: none;
+}
+
+.footer {
+  padding: var.$dimension-4m;
+
+  &[data-layout-type='tablet'],
+  &[data-layout-type='mobile'] {
+    padding: var.$dimension-3m;
+  }
+}

package/src/helperComponents/CardLeading/types.ts

@@ -0,0 +1,12 @@
+import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
+
+export type CardLeadingItem = WithSupportProps<{
+  /** Заголовок карточки, значение */
+  value: string;
+  /** Подзаголовок карточки */
+  label: string;
+  /** Описание карточки */
+  description: string;
+  /** Ссылка на картинку */
+  image: string;
+}>;

package/src/helperComponents/CardLeading/utils.ts

@@ -0,0 +1,28 @@
+import { LayoutType } from '@cloud-ru/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+
+export const getValueTypographyProps = (layoutType: LayoutType): Pick<TypographyProps, 'purpose' | 'size'> => {
+  switch (layoutType) {
+    case 'mobile':
+    case 'tablet':
+      return { purpose: 'headline', size: 'l' };
+
+    case 'desktop':
+    case 'desktopSmall':
+    default:
+      return { purpose: 'display', size: 'l' };
+  }
+};
+
+export const getLabelTypographyProps = (layoutType: LayoutType): Pick<TypographyProps, 'purpose' | 'size'> => {
+  switch (layoutType) {
+    case 'mobile':
+    case 'tablet':
+      return { purpose: 'label', size: 'l' };
+
+    case 'desktop':
+    case 'desktopSmall':
+    default:
+      return { purpose: 'title', size: 'm' };
+  }
+};

package/src/helperComponents/CardSocial/CardSocial.tsx

@@ -0,0 +1,105 @@
+import cn from 'classnames';
+import { AnchorHTMLAttributes, MouseEvent } from 'react';
+
+import { Icon, IconProps, useCardInteractions } from '@cloud-ru/uikit-product-site-cards';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Card } from '@snack-uikit/card';
+import { Typography } from '@snack-uikit/typography';
+
+import styles from './styles.module.scss';
+import { getTypographySize } from './utils';
+
+export type CardSocialProps = WithSupportProps<
+  WithLayoutType<{
+    /** Заголовок карточки*/
+    title: string;
+    /** Описание карточки */
+    description?: string;
+    /** Ссылка */
+    href: string;
+    /** HTML-аттрибут target */
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /** Колбек клика*/
+    onClick?(e?: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
+    /** Слот под иконку/кастомную ноду */
+    icon?: IconProps['icon'];
+    /**
+     * Является ли деактивированным
+     * @default false
+     */
+    disabled?: boolean;
+    /** CSS-класс */
+    className?: string;
+  }>
+>;
+
+export function CardSocial({
+  title,
+  description,
+  icon,
+  href,
+  target = '_blank',
+  onClick,
+  disabled = false,
+  className,
+  layoutType,
+  'data-test-id': dataTestId = 'card-social',
+  ...rest
+}: CardSocialProps) {
+  const { anchorRef, handleCardKeyDown, handleCardClick, handleLinkClick } = useCardInteractions({
+    href,
+    onClick,
+    disabled,
+  });
+
+  return (
+    <Card
+      {...extractSupportProps(rest)}
+      size='m'
+      className={cn(styles.card, className)}
+      disabled={disabled}
+      onClick={handleCardClick}
+      onKeyDown={handleCardKeyDown}
+      data-test-id={dataTestId}
+    >
+      <div data-layout-type={layoutType} className={styles.wrapper}>
+        {icon && <Icon size='l' data-test-id={`${dataTestId}__icon`} icon={icon} />}
+
+        <div className={styles.content}>
+          <Typography
+            tag='h3'
+            family='sans'
+            purpose='title'
+            size={getTypographySize(layoutType)}
+            className={styles.title}
+            data-test-id={`${dataTestId}__title`}
+          >
+            <a
+              tabIndex={-1}
+              ref={anchorRef}
+              href={href}
+              target={target}
+              onClick={handleLinkClick}
+              data-test-id={`${dataTestId}__title-link`}
+            >
+              {title}
+            </a>
+          </Typography>
+
+          {description && (
+            <Typography
+              tag='h3'
+              family='sans'
+              purpose='body'
+              size={getTypographySize(layoutType)}
+              className={styles.description}
+              data-test-id={`${dataTestId}__description`}
+            >
+              {description}
+            </Typography>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}

package/src/helperComponents/CardSocial/index.ts

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

package/src/helperComponents/CardSocial/styles.module.scss

@@ -0,0 +1,48 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-card' as ste;
+
+.card {
+  position: relative;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 16px;
+
+  &[data-layout-type=mobile],
+  &[data-layout-type=tablet] {
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  width: 100%;
+}
+
+.title {
+  color: ste.$sys-neutral-text-main;
+
+  a {
+    color: inherit;
+    text-decoration: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+}
+
+.description {
+  color: ste.$sys-neutral-text-support;
+}

package/src/helperComponents/CardSocial/utils.ts

@@ -0,0 +1,13 @@
+import { LayoutType } from '@cloud-ru/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+
+export const getTypographySize = (layoutType: LayoutType): TypographyProps['size'] => {
+  switch (layoutType) {
+    case 'tablet':
+    case 'mobile':
+      return 'm';
+
+    default:
+      return 'l';
+  }
+};