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

package/src/components/SectionClientsCarousel/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: 270,
+        maxItemsPerPage: 2,
+      };
+
+    case 'desktop':
+    case 'desktopSmall':
+    default:
+      return {
+        itemMinWidth: 300,
+        maxItemsPerPage: 4,
+      };
+  }
+};

package/src/components/SectionContent/SectionContent.tsx

@@ -0,0 +1,98 @@
+import cn from 'classnames';
+
+import { Layout } from '@cloud-ru/uikit-product-site-layout';
+import { SiteVideo } from '@cloud-ru/uikit-product-site-media';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { ButtonFilled, ButtonFilledProps } from '@snack-uikit/button';
+
+import { SECTION_COLORS } from '../../constants';
+import { SectionTitle, SectionTitleProps } from '../../helperComponents';
+import { MediaContentProps, SectionColor } from '../../types';
+import styles from './styles.module.scss';
+
+export type SectionContentProps = WithSupportProps<
+  WithLayoutType<
+    {
+      /** id секции */
+      id?: string;
+      /** CSS-класс */
+      className?: string;
+      /** Заголовок */
+      title?: string;
+      /** Описание */
+      description?: string;
+      /** Кнопка действия */
+      button?: Omit<ButtonFilledProps, 'fullWidth' | 'size'>;
+      /** Цвет фона */
+      backgroundColor?: SectionColor;
+      /** Местоположение контента в секции */
+      contentPosition: 'left' | 'right';
+    } & MediaContentProps &
+      Pick<SectionTitleProps, 'titleTag'>
+  >
+>;
+
+export function SectionContent({
+  id,
+  title,
+  description,
+  button,
+  className,
+  layoutType,
+  backgroundColor = SECTION_COLORS.NeutralBackground1Level,
+  contentPosition = 'left',
+  image,
+  video,
+  onPlay,
+  titleTag,
+  'data-test-id': dataTestId = 'section-content',
+  ...rest
+}: SectionContentProps) {
+  const isDesktop = ['desktop', 'desktopSmall'].includes(layoutType);
+
+  return (
+    <Layout.SectionWrapper
+      id={id}
+      layoutType={layoutType}
+      className={cn(className, styles.wrapper)}
+      data-section-background={backgroundColor}
+      data-test-id={dataTestId}
+      {...extractSupportProps(rest)}
+    >
+      <div className={styles.sectionContent} data-layout-type={layoutType} data-content-position={contentPosition}>
+        {Boolean(title || description || button) && (
+          <div className={styles.content}>
+            {Boolean(title || description) && (
+              <SectionTitle
+                layoutType={layoutType}
+                title={title}
+                description={description}
+                titleSectionSize='m'
+                titleTag={titleTag}
+              />
+            )}
+
+            {Boolean(button) && (
+              <ButtonFilled {...button} fullWidth={!isDesktop} size='l' data-test-id={`${dataTestId}__button`} />
+            )}
+          </div>
+        )}
+
+        <div className={styles.mediaWrapper}>
+          {image && (
+            <img
+              className={styles.image}
+              src={image.src}
+              alt={image.alt || title || 'section-content-image'}
+              data-test-id={`${dataTestId}__image`}
+            />
+          )}
+
+          {video && (
+            <SiteVideo video={video} onPlay={onPlay} layoutType={layoutType} data-test-id={`${dataTestId}__video`} />
+          )}
+        </div>
+      </div>
+    </Layout.SectionWrapper>
+  );
+}

package/src/components/SectionContent/index.ts

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

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

@@ -0,0 +1,70 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.wrapper {
+  &[data-section-background='neutral-background1-level'] {
+    background-color: var.$sys-neutral-background1-level;
+  }
+
+  &[data-section-background='neutral-background'] {
+    background-color: var.$sys-neutral-background;
+  }
+}
+
+.sectionContent {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+
+  gap: var.$dimension-4m;
+  padding: var.$dimension-7m 0;
+
+  &[data-content-position='right'] {
+    flex-direction: row-reverse;
+  }
+
+  &[data-layout-type='tablet'] {
+    flex-direction: column;
+    padding: var.$dimension-5m 0;
+    align-items: center;
+  }
+
+  &[data-layout-type='mobile'] {
+    gap: var.$dimension-3m;
+    padding: var.$dimension-4m 0;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var.$dimension-4m;
+  width: 384px;
+  flex-shrink: 0;
+
+  [data-layout-type='tablet'] &,
+  [data-layout-type='mobile'] & {
+    width: 100%;
+  }
+}
+
+.mediaWrapper {
+  flex-grow: 1;
+
+  [data-layout-type='tablet'] & {
+    width: 100%;
+    max-width: 704px;
+  }
+
+  [data-layout-type='mobile'] & {
+    width: 100%;
+  }
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: top left;
+}

package/src/components/SectionContentList/SectionContentList.tsx

@@ -0,0 +1,99 @@
+import { SiteVideo } from '@cloud-ru/uikit-product-site-media';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+
+import { SectionTitle, SectionTitleProps } from '../../helperComponents';
+import { MediaContentProps, SectionColor } from '../../types';
+import { SectionBasic, SectionBasicProps } from '../SectionBasic';
+import styles from './styles.module.scss';
+
+type Item = {
+  title: string;
+  description: string;
+} & Pick<SectionTitleProps, 'titleLink'>;
+
+export type SectionContentListProps = WithSupportProps<
+  WithLayoutType<
+    {
+      /** id секции */
+      id?: string;
+      /** CSS-класс */
+      className?: string;
+      /** Заголовок */
+      title?: string;
+      /** Описание */
+      description?: string;
+      /** Список элементов */
+      items?: Item[];
+      /** Цвет фона */
+      backgroundColor?: SectionColor;
+      /** Местоположение контента в секции */
+      contentPosition: 'left' | 'right';
+    } & MediaContentProps &
+      Pick<SectionBasicProps, 'titleTag'>
+  >
+>;
+
+export function SectionContentList({
+  id,
+  title,
+  description,
+  items,
+  className,
+  layoutType,
+  backgroundColor,
+  contentPosition = 'left',
+  image,
+  video,
+  onPlay,
+  titleTag,
+  'data-test-id': dataTestId = 'section-content-list',
+  ...rest
+}: SectionContentListProps) {
+  return (
+    <SectionBasic
+      id={id}
+      layoutType={layoutType}
+      title={title}
+      description={description}
+      className={className}
+      backgroundColor={backgroundColor}
+      data-test-id={dataTestId}
+      titleTag={titleTag}
+      {...extractSupportProps(rest)}
+    >
+      <div className={styles.sectionContent} data-layout-type={layoutType} data-content-position={contentPosition}>
+        <div className={styles.mediaWrapper}>
+          {image && (
+            <img
+              className={styles.image}
+              src={image.src}
+              alt={image.alt || title || 'section-content-image'}
+              data-test-id={`${dataTestId}__image`}
+            />
+          )}
+
+          {video && (
+            <SiteVideo video={video} onPlay={onPlay} layoutType={layoutType} data-test-id={`${dataTestId}__video`} />
+          )}
+        </div>
+
+        {items && items.length > 0 && (
+          <ul className={styles.list}>
+            {items.map((item, index) => (
+              <li key={`${title}__${index}`} className={styles.item}>
+                <SectionTitle
+                  layoutType={layoutType}
+                  title={item.title}
+                  titleLink={item.titleLink}
+                  description={item.description}
+                  titleSectionSize='s'
+                  titleTag='h3'
+                />
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </SectionBasic>
+  );
+}

package/src/components/SectionContentList/index.ts

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

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

@@ -0,0 +1,56 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.sectionContent {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var.$dimension-4m;
+
+  &[data-content-position='left'] {
+    flex-direction: row-reverse;
+  }
+
+  &[data-layout-type='tablet'] {
+    flex-direction: column;
+  }
+
+  &[data-layout-type='mobile'] {
+    flex-direction: column;
+    gap: var.$dimension-3m;
+  }
+}
+
+.mediaWrapper {
+  width: 50%;
+
+  [data-layout-type='tablet'] &,
+  [data-layout-type='mobile'] & {
+    width: 100%;
+  }
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: top left;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin: 0;
+  padding: 0;
+  gap: var.$dimension-3m;
+  width: 50%;
+
+  [data-layout-type='tablet'] &,
+  [data-layout-type='mobile'] & {
+    width: 100%;
+  }
+}
+
+.item {
+  list-style: none;
+}

package/src/components/SectionContentTabs/SectionContentTabs.tsx

@@ -0,0 +1,156 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { SiteVideo } from '@cloud-ru/uikit-product-site-media';
+import { RichText } from '@cloud-ru/uikit-product-site-rich-text';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { ButtonFilled, ButtonFilledProps } from '@snack-uikit/button';
+import { Tabs } from '@snack-uikit/tabs';
+
+import { SectionTitle } from '../../helperComponents';
+import { MediaContentProps, SectionColor } from '../../types';
+import { SectionBasic, SectionBasicProps } from '../SectionBasic';
+import styles from './styles.module.scss';
+
+type TabItem = {
+  id: string;
+  title: string;
+  mediaTitle?: string;
+  mediaSubtitle?: string;
+  mediaDescription?: string;
+  onClick?: () => void;
+  href?: string;
+  disabled?: boolean;
+  icon?: string | ReactNode;
+} & MediaContentProps;
+
+export type SectionContentTabsProps = WithSupportProps<
+  WithLayoutType<
+    {
+      /** id секции */
+      id?: string;
+      /** CSS-класс */
+      className?: string;
+      /** Заголовок */
+      title?: string;
+      /** Список вкладок */
+      tabs: TabItem[];
+      /** Выбранная вкладок */
+      activeTab?: string;
+      /** колбэк на смену вкладки */
+      onActiveTabChange?: () => void;
+      /** Кнопка действия */
+      button?: Omit<ButtonFilledProps, 'fullWidth' | 'size'>;
+      /** Цвет фона */
+      backgroundColor?: SectionColor;
+    } & Pick<SectionBasicProps, 'titleTag'>
+  >
+>;
+
+function TabIcon({ icon }: Pick<TabItem, 'icon'>) {
+  if (icon && typeof icon === 'string') {
+    return <img src={icon} alt='' className={styles.tabIconImage} />;
+  }
+
+  return icon;
+}
+
+export function SectionContentTabs({
+  id,
+  title,
+  tabs,
+  activeTab: activeTabProp,
+  onActiveTabChange,
+  button,
+  className,
+  layoutType,
+  backgroundColor,
+  titleTag,
+  'data-test-id': dataTestId = 'section-content-tabs',
+  ...rest
+}: SectionContentTabsProps) {
+  const [activeTab, setActiveTab] = useUncontrolledProp(activeTabProp, tabs[0].id, onActiveTabChange);
+  const isDesktop = ['desktop', 'desktopSmall'].includes(layoutType);
+
+  return (
+    <SectionBasic
+      id={id}
+      layoutType={layoutType}
+      title={title}
+      className={className}
+      backgroundColor={backgroundColor}
+      data-test-id={dataTestId}
+      titleTag={titleTag}
+      {...extractSupportProps(rest)}
+    >
+      <Tabs value={activeTab} onChange={setActiveTab}>
+        <div className={styles.sectionContent} data-layout-type={layoutType}>
+          <div className={cn(styles.tabsWrapper, { [styles.desktopTabsWrapper]: isDesktop })}>
+            <Tabs.TabBar
+              orientation={isDesktop ? 'vertical' : 'horizontal'}
+              markerPosition={isDesktop ? 'before' : 'after'}
+              className={cn({ [styles.desktopTabs]: isDesktop })}
+            >
+              {tabs.map(({ id, title, disabled, icon }) => (
+                <Tabs.Tab
+                  key={id}
+                  value={id}
+                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                  // @ts-ignore
+                  label={
+                    <>
+                      <RichText richText={title} />
+                      <TabIcon icon={icon} />
+                    </>
+                  }
+                  disabled={disabled}
+                />
+              ))}
+            </Tabs.TabBar>
+
+            {Boolean(button) && (
+              <ButtonFilled {...button} fullWidth={!isDesktop} size='l' data-test-id={`${dataTestId}__button`} />
+            )}
+          </div>
+
+          {tabs.map(({ id, mediaTitle, mediaSubtitle, mediaDescription, image, video, onPlay }) => (
+            <Tabs.TabContent key={id} value={id} className={styles.mediaWrapper}>
+              {image && (
+                <div className={styles.imageWrapper}>
+                  <img
+                    className={styles.image}
+                    src={image.src}
+                    alt={image.alt || title || 'section-content-image'}
+                    data-test-id={`${dataTestId}__image`}
+                  />
+                </div>
+              )}
+
+              {video && (
+                <SiteVideo
+                  video={video}
+                  onPlay={onPlay}
+                  layoutType={layoutType}
+                  data-test-id={`${dataTestId}__video`}
+                />
+              )}
+
+              {/* TODO: избавиться от title/subtitle после обновления cms-ки */}
+              {(mediaTitle || mediaSubtitle) && (
+                <SectionTitle
+                  titleSectionSize='s'
+                  layoutType={layoutType}
+                  title={mediaTitle}
+                  description={mediaSubtitle}
+                />
+              )}
+
+              {mediaDescription && <SectionTitle layoutType={layoutType} description={mediaDescription} />}
+            </Tabs.TabContent>
+          ))}
+        </div>
+      </Tabs>
+    </SectionBasic>
+  );
+}

package/src/components/SectionContentTabs/index.ts

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

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

@@ -0,0 +1,85 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+$tabs-width: 280px;
+
+.sectionContent {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var.$dimension-4m;
+
+  &[data-layout-type='tablet'] {
+    flex-direction: column;
+  }
+
+  &[data-layout-type='mobile'] {
+    flex-direction: column;
+    gap: var.$dimension-3m;
+  }
+}
+
+.tabsWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var.$dimension-4m;
+  width: $tabs-width;
+  flex-shrink: 0;
+
+  [data-layout-type='tablet'] &,
+  [data-layout-type='mobile'] & {
+    width: 100%;
+  }
+}
+
+.desktopTabs button {
+  text-wrap: auto;
+  text-align: left;
+  box-sizing: border-box;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.desktopTabsWrapper,
+.desktopTabs,
+.desktopTabs button {
+  max-width: $tabs-width;
+  flex-shrink: 0;
+}
+
+.mediaWrapper {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: var.$dimension-4m;
+
+  [data-layout-type='tablet'] &,
+  [data-layout-type='mobile'] & {
+    width: 100%;
+  }
+}
+
+.imageWrapper {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding-bottom: 56.5%;
+  border: 0;
+}
+
+.image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  border: 0;
+  background-color: var.$sys-neutral-background;
+  object-fit: contain;
+}
+
+.tabIconImage {
+  width: 20px;
+  height: 20px;
+}

package/src/components/SectionExpertsCarousel/SectionExpertsCarousel.tsx

@@ -0,0 +1,18 @@
+import { Expert, LimitedSectionCarouselProps, SectionCarousel } from '../../helperComponents';
+import { EXPERT_MINIMAL_WIDTH, MAX_PER_PAGE } from './constants';
+import { ExpertDetails } from './types';
+
+export type SectionExpertsCarouselProps = Omit<
+  LimitedSectionCarouselProps<ExpertDetails>,
+  'description' | 'gap' | 'titleLink'
+>;
+
+export function SectionExpertsCarousel({ items, ...props }: SectionExpertsCarouselProps) {
+  return (
+    <SectionCarousel {...props} itemMinWidth={EXPERT_MINIMAL_WIDTH} maxItemsPerPage={MAX_PER_PAGE}>
+      {items.map(item => (
+        <Expert key={item.name} {...item} />
+      ))}
+    </SectionCarousel>
+  );
+}

package/src/components/SectionExpertsCarousel/constants.ts

@@ -0,0 +1,2 @@
+export const EXPERT_MINIMAL_WIDTH = 240;
+export const MAX_PER_PAGE = 4;

package/src/components/SectionExpertsCarousel/index.ts

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

package/src/components/SectionExpertsCarousel/types.ts

@@ -0,0 +1,6 @@
+export type ExpertDetails = {
+  image: string;
+  name: string;
+  surname: string;
+  jobTitle: string;
+};