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

package/src/helperComponents/Expert/Expert.tsx

@@ -0,0 +1,28 @@
+import cn from 'classnames';
+
+import { Typography } from '@snack-uikit/typography';
+
+import { ExpertDetails } from '../../components/SectionExpertsCarousel/types';
+import styles from './styles.module.scss';
+
+export type ExpertProps = ExpertDetails & {
+  className?: string;
+};
+
+export function Expert({ image, name, surname, jobTitle, className }: ExpertProps) {
+  return (
+    <div className={cn(styles.expert, className)}>
+      <div className={styles.imageWrapper}>
+        <div className={styles.imageBackground}></div>
+        <img src={image} alt='expert' className={styles.image} />
+      </div>
+      <div className={styles.personalDetails}>
+        <Typography.SansTitleL className={styles.detailsColor}>{name}</Typography.SansTitleL>
+        <Typography.SansTitleL className={styles.detailsColor}>{surname}</Typography.SansTitleL>
+      </div>
+      <div className={styles.jobTitle}>
+        <Typography.SansBodyM className={styles.detailsColor}>{jobTitle}</Typography.SansBodyM>
+      </div>
+    </div>
+  );
+}

package/src/helperComponents/Expert/index.ts

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

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

@@ -0,0 +1,39 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.expert {
+  display: flex;
+  flex-direction: column;
+  gap: var.$dimension-1m;
+  overflow: hidden;
+}
+
+.imageWrapper {
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.imageBackground {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var.$sys-neutral-accent-default;
+  opacity: 0.08;
+}
+
+.personalDetails,
+.jobTitle {
+  display: flex;
+  flex-direction: column;
+}
+
+.detailsColor {
+  color: var.$sys-neutral-text-main;
+}
+
+.image {
+  position: relative;
+  height: 290px;
+  object-fit: cover;
+  pointer-events: none;
+}

package/src/helperComponents/PromoList/PromoList.tsx

@@ -0,0 +1,26 @@
+import { DecorCheckedSVG } from '@cloud-ru/uikit-product-icons';
+import { RichText } from '@cloud-ru/uikit-product-site-rich-text';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+
+import styles from './styles.module.scss';
+
+export type PromoListProps = { title: string; items: string[] };
+
+export function PromoList({ title, items, layoutType }: WithLayoutType<PromoListProps>) {
+  return (
+    <div className={styles.promoList} data-layout-type={layoutType}>
+      <div className={styles.title} data-layout-type={layoutType} data-test-id='promo-list__card_title'>
+        <RichText richText={title} />
+      </div>
+
+      <ul className={styles.list}>
+        {items.map(item => (
+          <li className={styles.listItem} key={item}>
+            <DecorCheckedSVG className={styles.listItemIcon} />
+            <RichText richText={item} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/helperComponents/PromoList/index.ts

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

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

@@ -0,0 +1,46 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.promoList {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  color: var.$sys-invert-neutral-text-main;
+
+  position: relative;
+
+  max-width: 480px;
+
+  &[data-layout-type='mobile'] {
+    max-width: 100%;
+  }
+}
+
+.title {
+  @include var.composite-var(var.$sans-headline-s);
+
+  &[data-layout-type='tablet'],
+  &[data-layout-type='mobile'] {
+    @include var.composite-var(var.$sans-title-l);
+  }
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.listItem {
+  @include var.composite-var(var.$sans-body-m);
+
+  display: flex;
+  gap: 8px;
+}
+
+.listItemIcon {
+  color: var.$sys-invert-neutral-accent-default;
+  flex-shrink: 0;
+}

package/src/helperComponents/SectionButton/SectionButton.tsx

@@ -0,0 +1,19 @@
+import { ArrowLinksSVG } from '@cloud-ru/uikit-product-icons';
+import { ButtonFilled, ButtonOutline } from '@snack-uikit/button';
+import { Link } from '@snack-uikit/link';
+
+import { SectionButtonProps } from './types';
+
+export function SectionButton(button: SectionButtonProps) {
+  const { type, ...buttonProps } = button;
+
+  if (button.href) {
+    return <Link key={button.label} {...buttonProps} text={button.label} size='l' insideText />;
+  }
+
+  if (type === 'outline') {
+    return <ButtonOutline key={button.label} size='l' appearance='neutral' icon={<ArrowLinksSVG />} {...buttonProps} />;
+  }
+
+  return <ButtonFilled key={button.label} size='l' {...buttonProps} />;
+}

package/src/helperComponents/SectionButton/index.tsx

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

package/src/helperComponents/SectionButton/types.ts

@@ -0,0 +1,9 @@
+import { ButtonFilledProps } from '@snack-uikit/button';
+
+export type SectionButtonProps = {
+  label: string;
+  href?: string;
+  target?: ButtonFilledProps['target'];
+  onClick?: ButtonFilledProps['onClick'];
+  type?: 'brand' | 'outline';
+};

package/src/helperComponents/SectionCarousel/SectionCarousel.tsx

@@ -0,0 +1,109 @@
+import debounce from 'lodash.debounce';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { extractSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Carousel } from '@snack-uikit/carousel';
+
+import { SectionBasic } from '../../components';
+import { SECTION_COLORS } from '../../constants';
+import styles from './styles.module.scss';
+import { SectionCarouselProps } from './types';
+import { calculateAmountOfItemsPerPage } from './utils';
+
+const MOBILE_LAYOUTS = ['tablet', 'mobile'];
+
+export function SectionCarousel({
+  id,
+  title,
+  titleTag,
+  subtitle,
+  subtitleTag,
+  titleSectionSize,
+  description,
+  children,
+  itemMinWidth,
+  maxItemsPerPage,
+  backgroundColor = SECTION_COLORS.NeutralBackground1Level,
+  className,
+  layoutType,
+  gap,
+  moreButton,
+  autoSwipe = 9,
+  infiniteScroll = true,
+  ...rest
+}: SectionCarouselProps) {
+  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 = wrapperRef.current?.offsetWidth;
+      if (!wrapperWidth) {
+        return;
+      }
+
+      setItemsPerPageAmount(
+        calculateAmountOfItemsPerPage({
+          wrapperWidth,
+          itemMinWidth,
+          maxItemsPerPage,
+        }),
+      );
+    };
+
+    const observer = new ResizeObserver(debounce(calculateAmountOfItems, 100));
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [itemMinWidth, maxItemsPerPage]);
+
+  const showArrows = useMemo(() => {
+    if (MOBILE_LAYOUTS.includes(layoutType)) {
+      return false;
+    }
+
+    return children.length > itemsPerPageAmount;
+  }, [children.length, itemsPerPageAmount, layoutType]);
+
+  return (
+    <SectionBasic
+      id={id}
+      layoutType={layoutType}
+      className={className}
+      data-section-background={backgroundColor}
+      title={title}
+      titleTag={titleTag}
+      subtitle={subtitle}
+      subtitleTag={subtitleTag}
+      titleSectionSize={titleSectionSize}
+      description={description}
+      backgroundColor={backgroundColor}
+      moreButton={moreButton}
+      {...extractSupportProps(rest)}
+    >
+      <div ref={wrapperRef} className={styles.sectionCarousel} data-layout-type={layoutType}>
+        {itemsPerPageAmount > 0 && (
+          <Carousel
+            state={{ page: currentPage, onChange: setCurrentPage }}
+            arrows={showArrows}
+            controlsVisibility='always'
+            showItems={itemsPerPageAmount}
+            pagination={children.length > itemsPerPageAmount}
+            swipe={children.length > itemsPerPageAmount}
+            gap={gap}
+            autoSwipe={infiniteScroll ? autoSwipe : undefined}
+            infiniteScroll={infiniteScroll}
+          >
+            {children}
+          </Carousel>
+        )}
+      </div>
+    </SectionBasic>
+  );
+}

package/src/helperComponents/SectionCarousel/index.ts

@@ -0,0 +1,2 @@
+export * from './SectionCarousel';
+export { type SectionCarouselProps, type LimitedSectionCarouselProps } from './types';

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

@@ -0,0 +1,8 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.sectionCarousel {
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+}

package/src/helperComponents/SectionCarousel/types.ts

@@ -0,0 +1,42 @@
+import { ReactElement } from 'react';
+
+import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { CarouselProps } from '@snack-uikit/carousel';
+
+import { SectionBasicProps } from '../../components';
+import { SectionColor } from '../../types';
+import { SectionTitleProps } from '../SectionTitle';
+
+type CarouselSlideConfig = {
+  /** Массив повторяющихся айтмов, из которых состоят слайды карусели */
+  children: ReactElement[];
+  /** Минимальная ширина айтема */
+  itemMinWidth: number;
+  /** Максимальное количество айтемов на слайде */
+  maxItemsPerPage: number;
+};
+
+export type SectionCarouselProps = WithSupportProps<
+  WithLayoutType<
+    SectionTitleProps &
+      CarouselSlideConfig & {
+        /** id секции */
+        id?: string;
+        /** Цвет фона */
+        backgroundColor?: SectionColor;
+        /** CSS - класснейм */
+        className?: string;
+        /**
+         * Автоматическое переключение слайдов в секундах
+         * @default 9
+         */
+        autoSwipe?: number;
+      } & Pick<CarouselProps, 'gap' | 'autoSwipe' | 'infiniteScroll'> &
+      Pick<SectionBasicProps, 'moreButton'>
+  >
+>;
+
+export type LimitedSectionCarouselProps<T extends object> = Omit<SectionCarouselProps, keyof CarouselSlideConfig> & {
+  /** Массив айтемов */
+  items: T[];
+};

package/src/helperComponents/SectionCarousel/utils.ts

@@ -0,0 +1,10 @@
+import { SectionCarouselProps } from './types';
+
+type Props = Pick<SectionCarouselProps, 'itemMinWidth' | 'maxItemsPerPage'> & {
+  wrapperWidth: number;
+};
+
+export const calculateAmountOfItemsPerPage = ({ wrapperWidth, itemMinWidth, maxItemsPerPage }: Props): number => {
+  const amount = Math.floor(wrapperWidth / itemMinWidth);
+  return amount > maxItemsPerPage ? maxItemsPerPage : amount;
+};

package/src/helperComponents/SectionCatalogFooter/SectionCatalogFooter.tsx

@@ -0,0 +1,29 @@
+import { ChevronRightSVG } from '@cloud-ru/uikit-product-icons';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
+
+import styles from './styles.module.scss';
+
+type FooterItem = {
+  label: string;
+  href?: string;
+  onClick?: ButtonFunctionProps['onClick'];
+};
+
+export type SectionCatalogFooterProps = WithLayoutType<{
+  items: FooterItem[];
+}>;
+
+export function SectionCatalogFooter({ items, layoutType }: SectionCatalogFooterProps) {
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.footer} data-layout-type={layoutType}>
+      {items.map(({ label, onClick, href }) => (
+        <ButtonFunction key={label} label={label} size='m' onClick={onClick} href={href} icon={<ChevronRightSVG />} />
+      ))}
+    </div>
+  );
+}

package/src/helperComponents/SectionCatalogFooter/index.ts

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

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

@@ -0,0 +1,10 @@
+.footer {
+  display: flex;
+  flex-direction: column;
+  padding-left: 8px;
+
+  &[data-layout-type='tablet'],
+  &[data-layout-type='mobile'] {
+    padding-left: 0;
+  }
+}

package/src/helperComponents/SectionTitle/SectionTitle.tsx

@@ -0,0 +1,72 @@
+import { useMemo } from 'react';
+
+import { RichText } from '@cloud-ru/uikit-product-site-rich-text';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { Link, PickLinkProps } from '@snack-uikit/link';
+import { Typography } from '@snack-uikit/typography';
+
+import styles from './styles.module.scss';
+import { SectionTag, Size } from './types';
+import { getTitleTypographyProps } from './utils';
+
+export type SectionTitleProps = WithLayoutType<{
+  /** Название секции */
+  title?: string;
+  /** Подзаголовок секции */
+  subtitle?: string;
+  /** Ссылка в названии */
+  titleLink?: PickLinkProps<typeof Link, 'href' | 'onClick' | 'target' | 'appearance' | 'textMode'>;
+  /** Описание секции */
+  description?: string;
+  /** Размер шрифтов заголовка и подзаголовка */
+  titleSectionSize?: Size;
+  /** Тег заголовка */
+  titleTag?: SectionTag;
+  /** Тег подзаголовка */
+  subtitleTag?: SectionTag;
+  /** Выравнивание текста */
+  titleAlign?: 'left' | 'center';
+}>;
+
+export function SectionTitle({
+  title,
+  subtitle,
+  titleLink,
+  description,
+  titleSectionSize = 'm',
+  titleTag = 'h2',
+  subtitleTag = 'h3',
+  layoutType,
+  titleAlign = 'left',
+}: SectionTitleProps) {
+  const titleProps = useMemo(
+    () => getTitleTypographyProps({ titleSectionSize, layoutType }),
+    [layoutType, titleSectionSize],
+  );
+
+  return (
+    <>
+      {(title || description) && (
+        <div className={styles.sectionTitle} data-align={titleAlign}>
+          <div className={styles.titlesWrapper} data-align={titleAlign}>
+            {title && (
+              <Typography family='sans' {...titleProps} tag={titleTag} className={styles.title}>
+                {titleLink ? <Link {...titleLink} {...titleProps} text={title} /> : <RichText richText={title} />}
+              </Typography>
+            )}
+            {subtitle && (
+              <Typography family='sans' purpose='label' size='l' tag={subtitleTag} className={styles.subtitle}>
+                <RichText richText={subtitle} />
+              </Typography>
+            )}
+          </div>
+          {description && (
+            <Typography.SansBodyL className={styles.description}>
+              <RichText richText={description} />
+            </Typography.SansBodyL>
+          )}
+        </div>
+      )}
+    </>
+  );
+}

package/src/helperComponents/SectionTitle/constants.ts

@@ -0,0 +1,5 @@
+export const SIZE = {
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;

package/src/helperComponents/SectionTitle/index.ts

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

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

@@ -0,0 +1,33 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.sectionTitle,
+.titlesWrapper {
+  display: flex;
+  gap: var.$dimension-1m;
+  text-align: left;
+
+  &[data-align='center'] {
+    text-align: center;
+  }
+}
+
+.sectionTitle {
+  flex-direction: column;
+}
+
+.titlesWrapper {
+  flex-direction: column-reverse;
+}
+
+.title {
+  color: var.$sys-neutral-text-main;
+  white-space: pre-line;
+}
+
+.subtitle {
+  color: var.$sys-neutral-text-light;
+}
+
+.description {
+  color: var.$sys-neutral-text-support;
+}

package/src/helperComponents/SectionTitle/types.ts

@@ -0,0 +1,7 @@
+import { Tag } from '@snack-uikit/typography';
+import { ValueOf } from '@snack-uikit/utils';
+
+import { SIZE } from './constants';
+
+export type Size = ValueOf<typeof SIZE>;
+export type SectionTag = Extract<Tag, 'h2' | 'h3' | 'h4'>;

package/src/helperComponents/SectionTitle/utils.ts

@@ -0,0 +1,83 @@
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+
+import { Size } from './types';
+
+type Props = WithLayoutType<{
+  titleSectionSize: Size;
+}>;
+
+export const getTitleTypographyProps = ({
+  layoutType,
+  titleSectionSize,
+}: Props): Pick<TypographyProps, 'size' | 'purpose'> => {
+  switch (layoutType) {
+    case 'tablet':
+      switch (titleSectionSize) {
+        case 'l':
+          return {
+            purpose: 'headline',
+            size: 'l',
+          };
+
+        case 's':
+          return {
+            purpose: 'title',
+            size: 'l',
+          };
+
+        case 'm':
+        default:
+          return {
+            purpose: 'headline',
+            size: 'm',
+          };
+      }
+
+    case 'mobile':
+      switch (titleSectionSize) {
+        case 'l':
+          return {
+            purpose: 'headline',
+            size: 'm',
+          };
+
+        case 's':
+          return {
+            purpose: 'title',
+            size: 'm',
+          };
+
+        case 'm':
+        default:
+          return {
+            purpose: 'headline',
+            size: 's',
+          };
+      }
+
+    case 'desktop':
+    case 'desktopSmall':
+    default:
+      switch (titleSectionSize) {
+        case 'l':
+          return {
+            purpose: 'display',
+            size: 'm',
+          };
+
+        case 's':
+          return {
+            purpose: 'headline',
+            size: 's',
+          };
+
+        case 'm':
+        default:
+          return {
+            purpose: 'headline',
+            size: 'l',
+          };
+      }
+  }
+};

package/src/helperComponents/index.ts

@@ -0,0 +1,10 @@
+export * from './CardLeading';
+export * from './CardSocial';
+export * from './Expert';
+export * from './PromoList';
+export * from './SectionCatalogFooter';
+export * from './SectionTitle';
+export * from './SectionCarousel';
+export * from './CardClient';
+export * from './BenefitItem';
+export * from './SectionButton';

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './helperComponents/SectionCarousel';

package/src/types.ts

@@ -0,0 +1,23 @@
+import { SiteVideoProps } from '@cloud-ru/uikit-product-site-media';
+import { ValueOf } from '@snack-uikit/utils';
+
+import { SECTION_COLORS } from './constants';
+
+export type SectionColor = ValueOf<typeof SECTION_COLORS>;
+
+type MediaVideoProps = Pick<SiteVideoProps, 'video' | 'onPlay' | 'onError'> & {
+  image?: never;
+};
+
+type MediaImageProps = {
+  video?: never;
+  onPlay?: never;
+  onError?: never;
+  /** Ссылка на изображение */
+  image: {
+    src: string;
+    alt?: string;
+  };
+};
+
+export type MediaContentProps = MediaImageProps | MediaVideoProps;