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

package/src/components/SectionLeading/SectionLeading.tsx

@@ -0,0 +1,116 @@
+import debounce from 'lodash.debounce';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Carousel, CarouselProps } from '@snack-uikit/carousel';
+import { Typography } from '@snack-uikit/typography';
+
+import { CardLeading, CardLeadingItem } from '../../helperComponents';
+import { SectionBasic, SectionBasicProps } from '../SectionBasic';
+import styles from './styles.module.scss';
+import { calculateAmountOfItemsPerPage } from './utils';
+
+export type SectionLeadingProps = WithSupportProps<
+  WithLayoutType<
+    Pick<SectionBasicProps, 'title' | 'description' | 'titleSectionSize' | 'titleTag' | 'backgroundColor'> &
+      Pick<CarouselProps, 'autoSwipe'> & {
+        /** id секции */
+        id?: string;
+        /** Массив айтемов */
+        items: CardLeadingItem[];
+        /** Описание секции */
+        footerDescription?: string;
+        /** CSS - класснейм */
+        className?: string;
+      }
+  >
+>;
+
+const MOBILE_LAYOUTS = ['tablet', 'mobile'];
+
+export function SectionLeading({
+  id,
+  title,
+  description,
+  titleSectionSize = 'm',
+  titleTag,
+  items,
+  footerDescription,
+  backgroundColor,
+  className,
+  layoutType,
+  autoSwipe = 9,
+  ...rest
+}: SectionLeadingProps) {
+  const [currentPage, setCurrentPage] = useState<number>(0);
+  const [itemsPerPageAmount, setItemsPerPageAmount] = useState<number>(0);
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const node = wrapperRef.current;
+    if (!node) {
+      return;
+    }
+
+    const calculateAmountOfItems = () => {
+      const wrapperWidth = node.offsetWidth;
+      if (!wrapperWidth) {
+        return;
+      }
+
+      setItemsPerPageAmount(calculateAmountOfItemsPerPage(wrapperWidth));
+    };
+
+    const observer = new ResizeObserver(debounce(calculateAmountOfItems, 100));
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  const showArrows = useMemo(() => {
+    if (MOBILE_LAYOUTS.includes(layoutType)) {
+      return false;
+    }
+
+    return items.length > itemsPerPageAmount;
+  }, [items.length, itemsPerPageAmount, layoutType]);
+
+  return (
+    <SectionBasic
+      id={id}
+      layoutType={layoutType}
+      className={className}
+      backgroundColor={backgroundColor}
+      title={title}
+      description={description}
+      titleSectionSize={titleSectionSize}
+      titleTag={titleTag}
+      {...extractSupportProps(rest)}
+    >
+      <div ref={wrapperRef} className={styles.leadingSection} data-layout-type={layoutType}>
+        {itemsPerPageAmount > 0 && (
+          <Carousel
+            state={{ page: currentPage, onChange: setCurrentPage }}
+            arrows={showArrows}
+            controlsVisibility='always'
+            showItems={itemsPerPageAmount}
+            pagination={items.length > itemsPerPageAmount}
+            swipe={items.length > itemsPerPageAmount}
+            autoSwipe={autoSwipe}
+            infiniteScroll
+          >
+            {items.map(item => (
+              <CardLeading key={item.label} {...item} layoutType={layoutType} data-test-id={item['data-test-id']} />
+            ))}
+          </Carousel>
+        )}
+
+        {footerDescription && (
+          <div className={styles.footerDescription} data-layout-type={layoutType}>
+            <Typography.SansBodyL className={styles.footerDescriptionText}>{footerDescription}</Typography.SansBodyL>
+          </div>
+        )}
+      </div>
+    </SectionBasic>
+  );
+}

package/src/components/SectionLeading/index.ts

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

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

@@ -0,0 +1,30 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.leadingSection {
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  gap: var.$dimension-5m 0;
+
+  &[data-layout-type='tablet'] {
+    gap: var.$dimension-4m 0;
+  }
+
+  &[data-layout-type='mobile'] {
+    gap: var.$dimension-3m 0;
+  }
+}
+
+.footerDescription {
+  max-width: 704px;
+
+  &[data-layout-type='tablet'],
+  &[data-layout-type='mobile'] {
+    max-width: unset;
+  }
+}
+
+.footerDescriptionText {
+  color: var.$sys-neutral-text-support;
+}

package/src/components/SectionLeading/utils.ts

@@ -0,0 +1,11 @@
+const CARD_LEADING_MINIMAL_WIDTH = 328;
+const MAX_PER_PAGE = 3;
+
+export const calculateAmountOfItemsPerPage = (wrapperWidth: number): number => {
+  const amount = Math.floor(wrapperWidth / CARD_LEADING_MINIMAL_WIDTH);
+  if (amount < 1) {
+    return 1;
+  }
+
+  return amount > MAX_PER_PAGE ? MAX_PER_PAGE : amount;
+};

package/src/components/SectionMarketplaceCarousel/SectionMarketplaceCarousel.tsx

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

package/src/components/SectionMarketplaceCarousel/index.ts

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

package/src/components/SectionMarketplaceCarousel/utils.ts

@@ -0,0 +1,33 @@
+import { themeVars } from '@sbercloud/figma-tokens-cloud-platform';
+import { LayoutType } from '@cloud-ru/uikit-product-utils';
+
+import { SectionCarouselProps } from '../../helperComponents';
+
+export const getCarouselProps = (
+  layoutType: LayoutType,
+): Pick<SectionCarouselProps, 'itemMinWidth' | 'maxItemsPerPage' | 'gap'> => {
+  switch (layoutType) {
+    case 'mobile':
+      return {
+        itemMinWidth: 270,
+        maxItemsPerPage: 1,
+        gap: themeVars.dimension['2m'],
+      };
+
+    case 'tablet':
+      return {
+        itemMinWidth: 270,
+        maxItemsPerPage: 2,
+        gap: themeVars.dimension['2m'],
+      };
+
+    case 'desktop':
+    case 'desktopSmall':
+    default:
+      return {
+        itemMinWidth: 380,
+        maxItemsPerPage: 3,
+        gap: themeVars.dimension['3m'],
+      };
+  }
+};

package/src/components/SectionMedia/SectionMedia.tsx

@@ -0,0 +1,57 @@
+import { SiteVideo } from '@cloud-ru/uikit-product-site-media';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+
+import { MediaContentProps } from '../../types';
+import { SectionBasic, SectionBasicProps } from '../SectionBasic';
+import styles from './styles.module.scss';
+
+export type SectionMediaProps = WithLayoutType<
+  WithSupportProps<Pick<SectionBasicProps, 'id' | 'title' | 'titleTag' | 'description'> & MediaContentProps>
+>;
+
+export function SectionMedia({
+  id,
+  title,
+  titleTag,
+  layoutType,
+  description,
+  video,
+  onPlay,
+  onError,
+  image,
+  'data-test-id': dataTestId = 'section-media',
+  ...rest
+}: SectionMediaProps) {
+  return (
+    <SectionBasic
+      id={id}
+      layoutType={layoutType}
+      title={title}
+      titleTag={titleTag}
+      description={description}
+      data-test-id={dataTestId}
+      {...extractSupportProps(rest)}
+    >
+      <div className={styles.content}>
+        {image && (
+          <img
+            className={styles.image}
+            src={image.src}
+            alt={image?.alt || title}
+            data-test-id={`${dataTestId}__image`}
+          />
+        )}
+
+        {video && (
+          <SiteVideo
+            video={video}
+            onPlay={onPlay}
+            onError={onError}
+            layoutType={layoutType}
+            data-test-id={`${dataTestId}__video`}
+          />
+        )}
+      </div>
+    </SectionBasic>
+  );
+}

package/src/components/SectionMedia/index.ts

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

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

@@ -0,0 +1,9 @@
+.content {
+  display: flex;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}

package/src/components/SectionPersonalManager/SectionPersonalManager.tsx

@@ -0,0 +1,135 @@
+import cn from 'classnames';
+import { useMemo } from 'react';
+
+import { CloudMoveSVG, HeadphonesSVG, UsersSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { CardBasic, CardBasicProps } from '@cloud-ru/uikit-product-site-cards';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { ButtonFilled } from '@snack-uikit/button';
+import { Typography } from '@snack-uikit/typography';
+
+import { SectionBasic } from '../SectionBasic';
+import styles from './styles.module.scss';
+import { getCardTitleTypographyProps } from './utils';
+
+export type SectionPersonalManagerProps = WithSupportProps<
+  WithLayoutType<{
+    /** id секции */
+    id?: string;
+    title?: string;
+    description?: string;
+    manager: {
+      img: string;
+      title?: string;
+      text?: string;
+    };
+    card?: {
+      title: string;
+      text: string;
+    };
+    benefits?: Pick<CardBasicProps, 'title' | 'icon'>[];
+    withoutBenefits?: boolean;
+    /** CSS-класс */
+    className?: string;
+    /** Хэндлер клика по кнопке "Получить консультацию" */
+    onGetConsultationClick(): void;
+  }>
+>;
+
+export function SectionPersonalManager({
+  id,
+  layoutType,
+  title,
+  description,
+  manager,
+  card,
+  benefits,
+  withoutBenefits,
+  className,
+  onGetConsultationClick,
+  ...rest
+}: SectionPersonalManagerProps) {
+  const { t } = useLocale('SiteSection');
+
+  const benefitsCards = useMemo<SectionPersonalManagerProps['benefits']>(() => {
+    if (benefits) {
+      return benefits;
+    }
+
+    return [
+      {
+        title: t('PersonalManager.argumentAmountOfExperts'),
+        icon: UsersSVG,
+      },
+      {
+        title: t('PersonalManager.argumentMethodologies'),
+        icon: CloudMoveSVG,
+      },
+      {
+        title: t('PersonalManager.argumentPersonalManager'),
+        icon: HeadphonesSVG,
+      },
+    ];
+  }, [benefits, t]);
+
+  return (
+    <SectionBasic
+      id={id}
+      title={title || t('PersonalManager.title')}
+      description={description || t('PersonalManager.subtitle')}
+      backgroundColor='neutral-background1-level'
+      layoutType={layoutType}
+      className={cn(className, styles.sectionPersonalManager)}
+      {...extractSupportProps(rest)}
+    >
+      <div className={styles.content} data-layout-type={layoutType}>
+        <div className={cn(styles.card, styles.leftSide)} data-layout-type={layoutType}>
+          <div className={styles.approachTextWrapper} data-layout-type={layoutType}>
+            <div className={styles.cardTextContent}>
+              <Typography family='sans' {...getCardTitleTypographyProps(layoutType)}>
+                {manager.title || t('PersonalManager.individualApproachTitle')}
+              </Typography>
+              <Typography family='sans' purpose='body' size='l' className={styles.cardDescription}>
+                {manager.text || t('PersonalManager.individualApproachDescription')}
+              </Typography>
+            </div>
+            <ButtonFilled
+              className={styles.consultationButton}
+              size='l'
+              appearance='primary'
+              label={t('PersonalManager.consultationButton')}
+              onClick={onGetConsultationClick}
+              data-layout-type={layoutType}
+              data-test-id='personal-manager_get-consultation-button'
+            />
+          </div>
+          <div className={styles.imageWrapper} data-layout-type={layoutType}>
+            <div className={styles.imageBackground}></div>
+            <img
+              src={manager.img}
+              alt='personal_manager'
+              className={styles.approachManager}
+              data-layout-type={layoutType}
+            />
+          </div>
+        </div>
+        <div className={cn(styles.card, styles.cardTextContent, styles.rightSide)} data-layout-type={layoutType}>
+          <Typography family='sans' {...getCardTitleTypographyProps(layoutType)}>
+            {card?.title || t('PersonalManager.allDaySupportTitle')}
+          </Typography>
+          <Typography family='sans' purpose='body' size='l' className={styles.cardDescription}>
+            {card?.text || t('PersonalManager.allDaySupportDescription')}
+          </Typography>
+        </div>
+      </div>
+
+      {!withoutBenefits && (
+        <div className={styles.expertiseCards} data-layout-type={layoutType}>
+          {benefitsCards?.map(card => (
+            <CardBasic key={card.title} title={card.title} icon={card.icon} layoutType={layoutType} />
+          ))}
+        </div>
+      )}
+    </SectionBasic>
+  );
+}

package/src/components/SectionPersonalManager/index.ts

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

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

@@ -0,0 +1,146 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.sectionPersonalManager {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.content {
+  display: flex;
+  box-sizing: border-box;
+
+  flex-direction: row;
+  gap: var.$dimension-4m;
+
+  &[data-layout-type='tablet'] {
+    flex-direction: column;
+    gap: var.$dimension-2m;
+  }
+
+  &[data-layout-type='mobile'] {
+    flex-direction: column;
+    gap: var.$dimension-2m;
+  }
+}
+
+.card {
+  box-sizing: border-box;
+  background-color: var.$sys-neutral-background;
+
+  padding: var.$dimension-4m;
+
+  &[data-layout-type='tablet'],
+  &[data-layout-type='mobile'] {
+    padding: var.$dimension-3m;
+  }
+}
+
+.cardDescription {
+  color: var.$sys-neutral-text-support;
+}
+
+.cardTextContent {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var.$dimension-2m;
+}
+
+.leftSide {
+  box-sizing: border-box;
+  display: flex;
+  gap: var.$dimension-3m;
+
+  align-items: flex-start;
+  flex-direction: row;
+
+  &[data-layout-type='tablet'] {
+    justify-content: space-between;
+  }
+
+  &[data-layout-type='mobile'] {
+    flex-direction: column-reverse;
+  }
+}
+
+.rightSide {
+  box-sizing: border-box;
+
+  &[data-layout-type='desktop'],
+  &[data-layout-type='desktopSmall'] {
+    max-width: 384px;
+    flex-shrink: 0;
+  }
+}
+
+.approachTextWrapper {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: var.$dimension-3m;
+
+  &[data-layout-type='desktop'],
+  &[data-layout-type='desktopSmall'] {
+    max-width: 472px;
+  }
+}
+
+.consultationButton {
+  &[data-layout-type='mobile'] {
+    width: 100%;
+  }
+}
+
+.expertiseCards {
+  box-sizing: border-box;
+  display: flex;
+
+  flex-direction: row;
+  gap: var.$dimension-4m;
+
+  &[data-layout-type='tablet'],
+  &[data-layout-type='mobile']{
+    flex-direction: column;
+    gap: var.$dimension-2m;
+  }
+}
+
+.imageWrapper {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  max-width: 288px;
+
+  &[data-layout-type='desktop'],
+  &[data-layout-type='desktopSmall'] {
+    min-width: 216px;
+  }
+
+  &[data-layout-type='tablet'] {
+    overflow: hidden;
+    min-width: 196px;
+
+    width: 100%;
+  }
+
+  &[data-layout-type='mobile'] {
+    overflow: hidden;
+  }
+}
+
+.imageBackground {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var.$sys-neutral-accent-default;
+  opacity: 0.08;
+}
+
+.approachManager {
+  position: relative;
+  object-fit: cover;
+  pointer-events: none;
+  width: 100%;
+}

package/src/components/SectionPersonalManager/utils.ts

@@ -0,0 +1,15 @@
+import { LayoutType } from '@cloud-ru/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+
+export const getCardTitleTypographyProps = (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/components/SectionPromoList/SectionPromoList.tsx

@@ -0,0 +1,66 @@
+import cn from 'classnames';
+
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+
+import { PromoList, PromoListProps } from '../../helperComponents';
+import { SectionBasic } from '../SectionBasic';
+import styles from './styles.module.scss';
+
+export type SectionPromoListProps = WithSupportProps<
+  WithLayoutType<{
+    /** id секции */
+    id?: string;
+    /** CSS-класс */
+    className?: string;
+    /** Заголовок */
+    title: string;
+    /** Описание */
+    description?: string;
+    /** Ссылка на изображение */
+    image: string;
+    /** Элементы левого списка */
+    leftList: PromoListProps;
+    /** Элементы правого списка */
+    rightList: PromoListProps;
+  }>
+>;
+
+export function SectionPromoList({
+  id,
+  layoutType,
+  className,
+  title,
+  description,
+  image,
+  leftList,
+  rightList,
+  ...rest
+}: SectionPromoListProps) {
+  return (
+    <SectionBasic
+      id={id}
+      title={title}
+      description={description}
+      backgroundColor='neutral-background1-level'
+      layoutType={layoutType}
+      className={cn(className, styles.sectionPromoList)}
+      {...extractSupportProps(rest)}
+    >
+      <div className={styles.cards} data-layout-type={layoutType}>
+        <div className={styles.left} data-test-id='promo-list__card'>
+          <PromoList {...leftList} layoutType={layoutType} />
+        </div>
+        <div
+          className={styles.right}
+          data-layout-type={layoutType}
+          data-test-id='promo-list__card'
+          style={{ '--image': `url(${image})` }}
+        >
+          <div className={styles.rightSectionText} data-layout-type={layoutType}>
+            <PromoList {...rightList} layoutType={layoutType} />
+          </div>
+        </div>
+      </div>
+    </SectionBasic>
+  );
+}

package/src/components/SectionPromoList/index.ts

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