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

package/src/components/SectionBenefits/types.ts

@@ -0,0 +1,91 @@
+import { CardBasicProps, CardInfoProps, CardProductProps } from '@cloud-ru/uikit-product-site-cards';
+
+import { SectionBasicProps } from '../SectionBasic';
+
+type CardBasicArray = Omit<CardBasicProps, 'layoutType'>[];
+type CardInfoArray = Omit<CardInfoProps, 'layoutType'>[];
+type CardNumericArray = Omit<CardInfoProps, 'layoutType' | 'icon'>[];
+type CardProductArray = Omit<CardProductProps, 'layoutType'>[];
+
+type ContentBasicTab = {
+  tabValue: string;
+  cards: CardBasicArray;
+};
+
+type ContentInfoTab = {
+  tabValue: string;
+  cards: CardInfoArray;
+};
+
+type ContentNumericTab = {
+  tabValue: string;
+  cards: CardNumericArray;
+};
+
+type ContentProductTab = {
+  tabValue: string;
+  cards: CardProductArray;
+};
+
+type ContentBasicWithoutTabs = {
+  type: 'basic';
+  content: CardBasicArray;
+
+  tabBarItems?: never;
+};
+
+type ContentBasicWithTabs = {
+  type: 'basic';
+  content: ContentBasicTab[];
+
+  tabBarItems: NonNullable<SectionBasicProps['tabBarItems']>;
+};
+
+type ContentNumericWithoutTabs = {
+  type: 'numeric';
+  content: CardNumericArray;
+
+  tabBarItems?: never;
+};
+
+type ContentNumericWithTabs = {
+  type: 'numeric';
+  content: ContentNumericTab[];
+
+  tabBarItems: NonNullable<SectionBasicProps['tabBarItems']>;
+};
+
+type ContentInfoWithoutTabs = {
+  type: 'info';
+  outline?: boolean;
+  content: CardInfoArray;
+
+  tabBarItems?: never;
+};
+
+type ContentInfoWithTabs = {
+  type: 'info';
+  outline?: boolean;
+  content: ContentInfoTab[];
+
+  tabBarItems: NonNullable<SectionBasicProps['tabBarItems']>;
+};
+
+type ContentProductWithoutTabs = {
+  type: 'product';
+  content: CardProductArray;
+
+  tabBarItems?: never;
+};
+
+type ContentProdctWithTabs = {
+  type: 'product';
+  content: ContentProductTab[];
+
+  tabBarItems: NonNullable<SectionBasicProps['tabBarItems']>;
+};
+
+export type ContentBasic = ContentBasicWithTabs | ContentBasicWithoutTabs;
+export type ContentInfo = ContentInfoWithTabs | ContentInfoWithoutTabs;
+export type ContentProduct = ContentProdctWithTabs | ContentProductWithoutTabs;
+export type ContentNumeric = ContentNumericWithTabs | ContentNumericWithoutTabs;

package/src/components/SectionBenefitsBanner/SectionBenefitsBanner.tsx

@@ -0,0 +1,91 @@
+import cn from 'classnames';
+
+import { RichText } from '@cloud-ru/uikit-product-site-rich-text';
+import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Typography, TypographyProps } from '@snack-uikit/typography';
+
+import { BenefitItem, BenefitItemProps } from '../../helperComponents';
+import { SectionBasic } from '../SectionBasic';
+import styles from './styles.module.scss';
+import { BackgroundType } from './types';
+import { getTitleTypographyProps } from './utils';
+
+type ItemProps = Omit<BenefitItemProps, 'layoutType'>;
+
+export type SectionBenefitsBannerProps = WithSupportProps<
+  WithLayoutType<
+    {
+      /** Заголовок */
+      title?: string;
+      /** Тэг заголовка */
+      titleTag?: TypographyProps['tag'];
+      /** Выгоды */
+      items: ItemProps[];
+      /** Описание под баннером */
+      description?: string[] | string;
+      /** CSS класс */
+      className?: string;
+    } & BackgroundType
+  >
+>;
+
+export function SectionBenefitsBanner({
+  title,
+  titleTag = 'h3',
+  items,
+  layoutType,
+  backgroundType = 'color',
+  appearance = 'brand',
+  color,
+  backgroundImage,
+  description,
+  className,
+  ...rest
+}: SectionBenefitsBannerProps) {
+  return (
+    <SectionBasic layoutType={layoutType} className={className} {...rest}>
+      <div className={styles.bannerWrapper} data-layout-type={layoutType}>
+        <div
+          className={cn(styles.banner, {
+            [styles.white]: backgroundType && backgroundType === 'image',
+          })}
+          data-layout-type={layoutType}
+          data-appearance={appearance}
+          data-color={color}
+        >
+          {backgroundImage && (
+            <img
+              className={styles.illustration}
+              src={backgroundImage}
+              alt='benefits-illustration'
+              data-layout-type={layoutType}
+            />
+          )}
+          <div className={styles.contentWrapper}>
+            {title && (
+              <Typography family='light' tag={titleTag} {...getTitleTypographyProps(layoutType)}>
+                <RichText richText={title} />
+              </Typography>
+            )}
+            <div className={styles.benefitItems} data-items-amount={items.length} data-layout-type={layoutType}>
+              {items.map(item => (
+                <BenefitItem key={item.description} {...item} layoutType={layoutType} />
+              ))}
+            </div>
+          </div>
+        </div>
+        {description && (
+          <div className={styles.description} data-attribute='no_search_index'>
+            <Typography family='sans' purpose='body' size='m' tag='div'>
+              {Array.isArray(description) ? (
+                description.map(item => <RichText key={item} richText={item} />)
+              ) : (
+                <RichText richText={description} />
+              )}
+            </Typography>
+          </div>
+        )}
+      </div>
+    </SectionBasic>
+  );
+}

package/src/components/SectionBenefitsBanner/index.ts

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

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

@@ -0,0 +1,119 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element' as ste;
+
+$colors: (
+  neutral: ste.$sys-neutral-background,
+  white: ste.$sys-neutral-background1-level,
+  violet: ste.$sys-violet-background,
+  blue: ste.$sys-blue-background,
+);
+
+$decor: 'decor';
+$graphite: 'graphite';
+$brand: 'brand';
+
+@mixin decor-background-colors {
+  @each $color, $value in $colors {
+    &[data-color='#{$color}'][data-appearance='#{$decor}'] {
+      background-color: $value;
+    }
+  }
+}
+
+@mixin appearance {
+  &[data-appearance='#{$graphite}'] {
+    background-color: ste.$sys-graphite-accent-default;
+
+    color: ste.$sys-invert-neutral-text-main;
+  }
+
+  &[data-appearance='#{$brand}'] {
+    background-color: ste.$sys-primary-accent-default;
+  }
+}
+
+.bannerWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: ste.$dimension-2m;
+}
+
+.banner {
+  position: relative;
+  overflow: hidden;
+
+  color: ste.$sys-graphite-text-main;
+  padding: ste.$dimension-5m;
+
+  &[data-layout-type='tablet'] {
+    padding: ste.$dimension-4m;
+  }
+
+  &[data-layout-type='mobile'] {
+    padding: ste.$dimension-3m;
+  }
+
+  @include decor-background-colors;
+  @include appearance;
+}
+
+.contentWrapper {
+  position: relative;
+
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 1;
+
+  display: flex;
+  flex-direction: column;
+  gap: ste.$dimension-4m;
+}
+
+.banner.white {
+  color: ste.$sys-graphite-on-accent;
+  background: transparent;
+}
+
+.benefitItems {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: ste.$dimension-2m;
+
+  &[data-layout-type='tablet'] {
+    grid-template-columns: repeat(2, 1fr);
+    gap: ste.$dimension-4m ste.$dimension-6m;
+  }
+
+  &[data-layout-type='mobile'] {
+    grid-template-columns: 100%;
+    gap: ste.$dimension-3m;
+  }
+
+  &[data-items-amount='3'] {
+    grid-template-columns: repeat(3, 1fr);
+
+    &[data-layout-type='tablet'] {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    &[data-layout-type='mobile'] {
+      grid-template-columns: 100%;
+    }
+  }
+}
+
+.description {
+  color: ste.$sys-neutral-text-support;
+}
+
+.illustration {
+  position: absolute;
+  pointer-events: none;
+
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 0;
+
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center 0;
+  top: 0;
+  left: 0;
+}

package/src/components/SectionBenefitsBanner/types.ts

@@ -0,0 +1,42 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+export const Appearance = {
+  Decor: 'decor',
+  Brand: 'brand',
+  Graphite: 'graphite',
+} as const;
+
+export const Color = {
+  Neutral: 'neutral',
+  White: 'white',
+  Violet: 'violet',
+  Blue: 'blue',
+} as const;
+
+type ColorType = ValueOf<typeof Color>;
+
+export type AppearanceType = ValueOf<typeof Appearance>;
+
+export type WithColor = {
+  appearance: Exclude<AppearanceType, 'brand' | 'graphite'>;
+  color?: ColorType;
+};
+
+export type WithoutColor = {
+  appearance: Exclude<AppearanceType, 'decor'>;
+  color?: never;
+};
+
+export type ColorsProps = (WithColor | WithoutColor) & {
+  backgroundType: 'color';
+  backgroundImage?: never;
+};
+
+type WithBgImage = {
+  backgroundType: 'image';
+  backgroundImage: string;
+  appearance?: never;
+  color?: never;
+};
+
+export type BackgroundType = ColorsProps | WithBgImage;

package/src/components/SectionBenefitsBanner/utils.ts

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

package/src/components/SectionBlogCarousel/SectionBlogCarousel.tsx

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+
+import { CardMedia, CardMediaProps } from '@cloud-ru/uikit-product-site-cards';
+
+import { LimitedSectionCarouselProps, SectionCarousel } from '../../helperComponents';
+import { getCarouselProps } from './utils';
+
+export type BlogCarouselItem = Omit<CardMediaProps, 'size' | 'layoutType'>;
+
+export type SectionBlogCarouselProps = Omit<LimitedSectionCarouselProps<BlogCarouselItem>, 'gap' | 'titleLink'>;
+
+export function SectionBlogCarousel({ items, ...props }: SectionBlogCarouselProps) {
+  const carouselProps = useMemo(() => getCarouselProps(props.layoutType), [props.layoutType]);
+
+  return (
+    <SectionCarousel {...props} {...carouselProps}>
+      {items.map(item => (
+        <CardMedia key={item.title} {...item} size='m' layoutType={props.layoutType} />
+      ))}
+    </SectionCarousel>
+  );
+}

package/src/components/SectionBlogCarousel/index.ts

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

package/src/components/SectionBlogCarousel/utils.ts

@@ -0,0 +1,29 @@
+import { LayoutType } from '@cloud-ru/uikit-product-utils';
+
+import { SectionCarouselProps } from '../../helperComponents';
+
+export const getCarouselProps = (
+  layoutType: LayoutType,
+): Pick<SectionCarouselProps, 'itemMinWidth' | 'maxItemsPerPage'> => {
+  switch (layoutType) {
+    case 'mobile':
+      return {
+        itemMinWidth: 270,
+        maxItemsPerPage: 1,
+      };
+
+    case 'tablet':
+      return {
+        itemMinWidth: 340,
+        maxItemsPerPage: 2,
+      };
+
+    case 'desktop':
+    case 'desktopSmall':
+    default:
+      return {
+        itemMinWidth: 340,
+        maxItemsPerPage: 3,
+      };
+  }
+};

package/src/components/SectionCaseCarousel/SectionCaseCarousel.tsx

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+
+import { CaseCard, CaseCardProps } from '@cloud-ru/uikit-product-site-case-card';
+
+import { LimitedSectionCarouselProps, SectionCarousel } from '../../helperComponents';
+import { getCarouselProps } from './utils';
+
+export type CaseItem = Omit<CaseCardProps, 'layoutType'>;
+
+export type SectionCaseCarouselProps = Omit<LimitedSectionCarouselProps<CaseItem>, 'description' | 'gap' | 'titleLink'>;
+
+export function SectionCaseCarousel({ items, layoutType, ...props }: SectionCaseCarouselProps) {
+  const carouselProps = useMemo(() => getCarouselProps(layoutType), [layoutType]);
+
+  return (
+    <SectionCarousel {...props} {...carouselProps} layoutType={layoutType}>
+      {items.map(item => (
+        <CaseCard key={item.description} {...item} layoutType={layoutType} />
+      ))}
+    </SectionCarousel>
+  );
+}

package/src/components/SectionCaseCarousel/index.ts

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

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

@@ -0,0 +1,3 @@
+.card {
+  height: 100%;
+}

package/src/components/SectionCaseCarousel/utils.ts

@@ -0,0 +1,24 @@
+import { LayoutType } from '@cloud-ru/uikit-product-utils';
+
+import { SectionCarouselProps } from '../../helperComponents';
+
+export const getCarouselProps = (
+  layoutType: LayoutType,
+): Pick<SectionCarouselProps, 'itemMinWidth' | 'maxItemsPerPage'> => {
+  switch (layoutType) {
+    case 'tablet':
+    case 'mobile':
+      return {
+        itemMinWidth: 270,
+        maxItemsPerPage: 1,
+      };
+
+    case 'desktop':
+    case 'desktopSmall':
+    default:
+      return {
+        itemMinWidth: 320,
+        maxItemsPerPage: 2,
+      };
+  }
+};

package/src/components/SectionCatalog/SectionCatalog.tsx

@@ -0,0 +1,105 @@
+import cn from 'classnames';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { CardProduct, CardProductProps } from '@cloud-ru/uikit-product-site-cards';
+import { Grid } from '@cloud-ru/uikit-product-site-grid';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Tabs } from '@snack-uikit/tabs';
+
+import { SectionCatalogFooter, SectionCatalogFooterProps } from '../../helperComponents';
+import { SectionColor } from '../../types';
+import { SectionBasic } from '../SectionBasic';
+import { GRID_CONFIG } from './constants';
+import styles from './styles.module.scss';
+
+type ProductCategory = {
+  id: string;
+  label: string;
+  items: Omit<CardProductProps, 'layoutType'>[];
+};
+
+export type SectionCatalogProps = WithSupportProps<
+  WithLayoutType<{
+    /** id секции */
+    id?: string;
+    /** CSS-класс */
+    className?: string;
+    /** Заголовок */
+    title: string;
+    /** Цвет фона */
+    backgroundColor?: SectionColor;
+    /** Список продуктов по категориям */
+    categories: ProductCategory[];
+    /** Выбранная категория продуктов */
+    selectedCategory?: string;
+    /** Колбек смены выбранной категории продуктов */
+    onCategorySelect?(category: string): void;
+    /** Список элементов для футера в каталоге */
+    footer?: SectionCatalogFooterProps['items'];
+  }>
+>;
+
+export function SectionCatalog({
+  id,
+  layoutType,
+  className,
+  title,
+  backgroundColor,
+  selectedCategory: selectedCategoryProp,
+  onCategorySelect,
+  categories,
+  footer,
+  ...rest
+}: SectionCatalogProps) {
+  const [selectedCategory, setSelectedCategory] = useUncontrolledProp(
+    selectedCategoryProp,
+    categories[0].id,
+    onCategorySelect,
+  );
+
+  const isDesktop = ['desktop', 'desktopSmall'].includes(layoutType);
+
+  const isOutlineCard = backgroundColor === 'neutral-background1-level';
+
+  return (
+    <SectionBasic
+      id={id}
+      title={title}
+      backgroundColor={backgroundColor}
+      layoutType={layoutType}
+      className={cn(className, styles.sectionCatalog)}
+      {...extractSupportProps(rest)}
+    >
+      <div className={styles.body}>
+        <Tabs value={selectedCategory} onChange={setSelectedCategory}>
+          <div className={cn(styles.categoryList, { [styles.desktopCategoryList]: isDesktop })}>
+            <Tabs.TabBar
+              type='primary'
+              orientation={isDesktop ? 'vertical' : 'horizontal'}
+              markerPosition={isDesktop ? 'before' : 'after'}
+              className={cn({ [styles.desktopTabs]: isDesktop })}
+            >
+              {categories.map(({ id, label }) => (
+                <Tabs.Tab key={id} value={id} label={label} />
+              ))}
+            </Tabs.TabBar>
+
+            {footer && isDesktop && <SectionCatalogFooter items={footer} layoutType={layoutType} />}
+          </div>
+
+          {categories.map(({ id, items }) => (
+            <Tabs.TabContent key={id} value={id} className={styles.tabContent}>
+              <Grid columnsConfig={GRID_CONFIG} gap='s' layoutType={layoutType}>
+                {items.map(item => (
+                  <CardProduct key={item.title} layoutType={layoutType} outline={isOutlineCard} {...item} />
+                ))}
+              </Grid>
+            </Tabs.TabContent>
+          ))}
+        </Tabs>
+
+        {footer && !isDesktop && <SectionCatalogFooter items={footer} layoutType={layoutType} />}
+      </div>
+    </SectionBasic>
+  );
+}

package/src/components/SectionCatalog/constants.ts

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

package/src/components/SectionCatalog/index.ts

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

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

@@ -0,0 +1,45 @@
+.sectionCatalog {
+  width: 100%;
+  position: relative;
+}
+
+.body {
+  display: flex;
+  gap: 32px;
+  width: 100%;
+
+  [data-layout-type='tablet'] & {
+    flex-direction: column;
+    gap: 32px;
+  }
+
+  [data-layout-type='mobile'] & {
+    flex-direction: column;
+    gap: 24px;
+  }
+}
+
+.categoryList {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.tabContent {
+  width: 100%;
+}
+
+.desktopTabs button {
+  text-wrap: auto;
+  text-align: left;
+  box-sizing: border-box;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.desktopCategoryList,
+.desktopTabs,
+.desktopTabs button {
+  max-width: 280px;
+  flex-shrink: 0;
+}

package/src/components/SectionClientsCarousel/SectionClientsCarousel.tsx

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+
+import { themeVars } from '@sbercloud/figma-tokens-cloud-platform';
+
+import { CardClient, CardClientProps, LimitedSectionCarouselProps, SectionCarousel } from '../../helperComponents';
+import { getCarouselProps } from './utils';
+
+export type SectionClientsCarouselProps = Omit<
+  LimitedSectionCarouselProps<CardClientProps>,
+  'description' | 'gap' | 'titleLink'
+>;
+
+export function SectionClientsCarousel({ items, ...props }: SectionClientsCarouselProps) {
+  const carouselProps = useMemo(() => getCarouselProps(props.layoutType), [props.layoutType]);
+
+  return (
+    <SectionCarousel autoSwipe={0} {...props} {...carouselProps} gap={themeVars.dimension['1m']}>
+      {items.map(item => (
+        <CardClient key={item.alt} {...item} />
+      ))}
+    </SectionCarousel>
+  );
+}

package/src/components/SectionClientsCarousel/index.ts

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