@cloud-ru/uikit-product-site-hero 0.5.40

package/src/components/HeroMain/HeroMain.tsx

@@ -0,0 +1,159 @@
+import cn from 'classnames';
+import { Fragment } from 'react';
+
+import { ButtonPromoOutline, ButtonPromoOutlineProps } from '@cloud-ru/uikit-product-button-predefined';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { Layout } from '@cloud-ru/uikit-product-site-layout';
+import { SiteVideo, SiteVideoProps } from '@cloud-ru/uikit-product-site-media';
+import { SiteNavbar, SiteNavbarProps } from '@cloud-ru/uikit-product-site-navbar';
+import { RichText } from '@cloud-ru/uikit-product-site-rich-text';
+import { TagSpecial, TagSpecialProps } from '@cloud-ru/uikit-product-site-tag';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Breadcrumbs, BreadcrumbsProps } from '@snack-uikit/breadcrumbs';
+import { ButtonFilled, ButtonFilledProps } from '@snack-uikit/button';
+import { Typography } from '@snack-uikit/typography';
+
+import { HeroColor } from '../../types';
+import { PlatformLink, PlatformLinkProps } from './components';
+import styles from './styles.module.scss';
+import { getTitleTypographyProps } from './utils';
+
+export type HeroMainProps = WithSupportProps<
+  WithLayoutType<{
+    /** Заголовок продукта */
+    title: string;
+    /** Описание продукта */
+    description: string;
+    /** Ссылка на изображение */
+    image?: string;
+    /** Видео */
+    video?: SiteVideoProps['video'];
+    /** Хлебные крошки для продукта */
+    breadcrumbs: BreadcrumbsProps['items'];
+    /** Тэги */
+    tags?: Pick<TagSpecialProps, 'text' | 'appearance' | 'tip'>[];
+    /** Платформы */
+    platforms?: Array<PlatformLinkProps['platform']>;
+    /** Обработка клика по платформе */
+    handlePlatformClick?: PlatformLinkProps['handlePlatformClick'];
+    /** Цвета фона */
+    backgroundColor?: HeroColor;
+    /** Массив с настройками кнопок ButtonFilled */
+    buttons?: [Omit<ButtonFilledProps, 'size' | 'appearance'>, Omit<ButtonPromoOutlineProps, 'size' | 'appearance'>?];
+    /** CSS - класснейм */
+    className?: string;
+    /** Navbar */
+    navbar?: Pick<SiteNavbarProps, 'items' | 'active' | 'onItemClick' | 'topPosition'>;
+  }>
+>;
+
+export function HeroMain({
+  title,
+  description,
+  image,
+  video,
+  breadcrumbs,
+  tags = [],
+  platforms = [],
+  handlePlatformClick,
+  backgroundColor = 'neutral-background1-level',
+  buttons,
+  navbar,
+  layoutType,
+  className,
+  ...rest
+}: HeroMainProps) {
+  const { t } = useLocale('SiteHero');
+
+  const isAdaptive = ['mobile', 'tablet'].includes(layoutType);
+
+  return (
+    <>
+      <Layout.SectionWrapper
+        layoutType={layoutType}
+        className={cn(className, styles.sectionWrapper)}
+        data-section-background={backgroundColor}
+      >
+        <div className={styles.contentWrapper} {...extractSupportProps(rest)} data-layout-type={layoutType}>
+          <div className={styles.content} data-layout-type={layoutType}>
+            <div className={styles.left} data-layout-type={layoutType}>
+              <div className={styles.leftContent} data-layout-type={layoutType}>
+                <Breadcrumbs size='xs' items={breadcrumbs} data-test-id='hero-main__breadcrumbs' />
+
+                {tags.length > 0 && (
+                  <div className={styles.tagRow} data-layout-type={layoutType}>
+                    {tags.map(({ text, tip, appearance }) => (
+                      <TagSpecial key={text} text={text} tip={tip} appearance={appearance} />
+                    ))}
+                  </div>
+                )}
+
+                <div className={styles.textWrapper}>
+                  <Typography tag='h1' family='sans' {...getTitleTypographyProps(layoutType)} className={styles.title}>
+                    <RichText richText={title} />
+                  </Typography>
+
+                  <Typography.SansBodyL tag='div' className={styles.description}>
+                    <RichText richText={description} />
+                  </Typography.SansBodyL>
+
+                  {platforms && platforms.length > 0 && handlePlatformClick && (
+                    <Typography.SansBodyL tag='p' className={styles.platforms}>
+                      {t('Main.platforms')}:{' '}
+                      {platforms.map((platform, index) => (
+                        <Fragment key={platform.id || platform.title}>
+                          <PlatformLink platform={platform} handlePlatformClick={handlePlatformClick} />
+                          {platforms.length - 1 !== index && ', '}
+                        </Fragment>
+                      ))}
+                    </Typography.SansBodyL>
+                  )}
+                </div>
+              </div>
+
+              {buttons && buttons.length > 0 && (
+                <div className={styles.buttons} data-layout-type={layoutType}>
+                  <ButtonFilled
+                    {...buttons[0]}
+                    data-layout-type={layoutType}
+                    size='l'
+                    appearance='primary'
+                    fullWidth={isAdaptive}
+                  />
+                  {buttons.length > 1 && (
+                    <ButtonPromoOutline
+                      {...buttons[1]}
+                      data-layout-type={layoutType}
+                      size='l'
+                      appearance='secondary'
+                      fullWidth={isAdaptive}
+                    />
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div className={styles.imageWrapper} data-layout-type={layoutType}>
+              <div className={styles.media} data-layout-type={layoutType}>
+                {image && <img alt='hero_img' src={image} />}
+
+                {!image && video && <SiteVideo className={styles.video} video={video} layoutType={layoutType} />}
+              </div>
+            </div>
+          </div>
+        </div>
+      </Layout.SectionWrapper>
+
+      {navbar && navbar.items.length > 0 && (
+        <Layout.SectionWrapper
+          layoutType={layoutType}
+          className={cn(styles.sectionWrapper, styles.navbarWrapper)}
+          data-sticky={true}
+          data-section-background={backgroundColor}
+        >
+          <SiteNavbar {...navbar} data-test-id='hero-main__navbar' />
+        </Layout.SectionWrapper>
+      )}
+    </>
+  );
+}

package/src/components/HeroMain/components/PlatformLink/PlatformLink.tsx

@@ -0,0 +1,31 @@
+import { MouseEvent } from 'react';
+
+import { Link } from '@snack-uikit/link';
+
+type Platform = {
+  id?: string;
+  title: string;
+  href: string;
+};
+
+export type PlatformLinkProps = {
+  platform: Platform;
+  handlePlatformClick(e: MouseEvent<HTMLAnchorElement>, platform: Platform): void;
+};
+
+export function PlatformLink({ platform, handlePlatformClick }: PlatformLinkProps) {
+  const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    handlePlatformClick(e, platform);
+  };
+
+  return (
+    <Link
+      text={platform.title}
+      href={platform.href}
+      onClick={handleClick}
+      size='l'
+      textMode='accent'
+      appearance='neutral'
+    />
+  );
+}

package/src/components/HeroMain/components/PlatformLink/index.ts

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

package/src/components/HeroMain/components/index.ts

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

package/src/components/HeroMain/index.ts

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

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

@@ -0,0 +1,154 @@
+@use '@sbercloud/figma-tokens-web/build/scss/styles-theme-variables' as ds;
+
+.sectionWrapper {
+  &[data-section-background='neutral-background1-level'] {
+    background-color: ds.$sys-neutral-background1-level;
+  }
+
+  &[data-section-background='neutral-background'] {
+    background-color: ds.$sys-neutral-background;
+  }
+
+  &[data-sticky] {
+    position: sticky;
+    top: 0;
+  }
+}
+
+.contentWrapper {
+  padding: ds.$dimension-5m 0;
+
+  &[data-layout-type='tablet'] {
+    padding: ds.$dimension-4m 0;
+  }
+
+  &[data-layout-type='mobile'] {
+    padding: ds.$dimension-3m 0;
+  }
+}
+
+.content {
+  display: flex;
+  align-items: stretch;
+
+  gap: ds.$dimension-4m;
+  flex-direction: row;
+
+  &[data-layout-type='tablet'] {
+    flex-direction: column;
+  }
+
+  &[data-layout-type='mobile'] {
+    flex-direction: column;
+    gap: ds.$dimension-2m;
+  }
+}
+
+.left {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-grow: 1;
+
+  gap: ds.$dimension-4m;
+
+  &[data-layout-type='mobile'] {
+    gap: ds.$dimension-3m;
+  }
+}
+
+.leftContent {
+  display: flex;
+  flex-direction: column;
+
+  gap: ds.$dimension-4m;
+
+  &[data-layout-type='mobile'] {
+    gap: ds.$dimension-3m;
+  }
+}
+
+.tagRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: ds.$dimension-050m;
+}
+
+.textWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: ds.$dimension-2m;
+}
+
+.title {
+  color: ds.$sys-neutral-text-main;
+  word-break: break-word;
+  white-space: pre-line;
+  max-width: 720px;
+}
+
+.description {
+  color: ds.$sys-neutral-text-support;
+  word-break: break-word;
+  max-width: 560px;
+}
+
+.platforms {
+  color: ds.$sys-neutral-text-main;
+}
+
+.imageWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  align-self: center;
+
+  &[data-layout-type='tablet'],
+  &[data-layout-type='mobile'] {
+    align-items: center;
+  }
+}
+
+.video {
+  height: 300px;
+  width: 300px;
+}
+
+.media {
+  img {
+    max-height: 300px;
+    max-width: 300px;
+  }
+
+  &[data-layout-type='mobile'] {
+    img {
+      max-width: 248px;
+      max-height: 248px;
+    }
+
+    .video {
+      width: 248px;
+      height: 248px;
+    }
+  }
+}
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  gap: ds.$dimension-2m;
+
+  &[data-layout-type='tablet'] {
+    flex-direction: column;
+  }
+
+  &[data-layout-type='mobile'] {
+    flex-direction: column;
+    gap: ds.$dimension-1m;
+  }
+}
+
+.navbarWrapper {
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 5;
+}

package/src/components/HeroMain/utils.ts

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

package/src/components/HeroSlider/HeroSlider.tsx

@@ -0,0 +1,72 @@
+import cn from 'classnames';
+import { useState } from 'react';
+
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Carousel, CarouselProps } from '@snack-uikit/carousel';
+import { PaginationSlider } from '@snack-uikit/pagination';
+
+import { HeroSlide, HeroSlideProps } from './components';
+import styles from './styles.module.scss';
+
+export type HeroSliderProps = WithSupportProps<
+  WithLayoutType<
+    {
+      id?: string;
+      /** Слайды карусели */
+      items: HeroSlideProps[];
+      /** CSS-класс */
+      className?: string;
+      /** Использовать пагинацию для переключения страниц @default true */
+      pagination?: boolean;
+    } & Pick<CarouselProps, 'state' | 'autoSwipe'>
+  >
+>;
+
+export function HeroSlider({
+  id,
+  layoutType,
+  items,
+  autoSwipe,
+  pagination = true,
+  className,
+  ...rest
+}: HeroSliderProps) {
+  const [currentPage, setCurrentPage] = useState<number>(0);
+
+  const currentSlideAppearance = items[currentPage].appearance;
+
+  return (
+    <section className={cn(styles.root, className)} id={id}>
+      <Carousel
+        className={styles.heroCarousel}
+        arrows={false}
+        pagination={false}
+        infiniteScroll
+        autoSwipe={autoSwipe}
+        state={{
+          page: currentPage,
+          onChange: setCurrentPage,
+        }}
+        gap={'0'}
+        {...extractSupportProps(rest)}
+      >
+        {items.map((item, i) => (
+          <HeroSlide key={`${item.title}${i}`} {...item} layoutType={layoutType} />
+        ))}
+      </Carousel>
+
+      {pagination && (
+        <div className={styles.paginationWrapper} data-appearance={currentSlideAppearance}>
+          <PaginationSlider
+            data-test-id='hero-slider__pagination'
+            page={currentPage + 1}
+            onChange={(page: number) => {
+              setCurrentPage(page - 1);
+            }}
+            total={items.length}
+          />
+        </div>
+      )}
+    </section>
+  );
+}

package/src/components/HeroSlider/components/HeroSlide/HeroSlide.tsx

@@ -0,0 +1,70 @@
+import cn from 'classnames';
+
+import { ButtonPromo } from '@cloud-ru/uikit-product-button-predefined';
+import { Layout } from '@cloud-ru/uikit-product-site-layout';
+import { RichText } from '@cloud-ru/uikit-product-site-rich-text';
+import { Erid } from '@cloud-ru/uikit-product-site-tag';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { Typography } from '@snack-uikit/typography';
+
+import { HeroSlideMedia } from '../HeroSlideMedia';
+import styles from './styles.module.scss';
+import { HeroSlideProps } from './types';
+import { getSliderContentWrapperImageType, getTitleProps } from './util';
+
+type Props = WithLayoutType<HeroSlideProps>;
+
+export function HeroSlide({
+  layoutType,
+  id,
+  title,
+  description,
+  media,
+  button,
+  color,
+  appearance,
+  erid,
+  className,
+}: Props) {
+  return (
+    <div
+      id={id}
+      data-layout-type={layoutType}
+      data-appearance={appearance}
+      data-color={color}
+      className={cn(styles.wrapper, className)}
+    >
+      <Layout.SectionWrapper layoutType={layoutType} className={styles.sectionWrapper}>
+        {erid && <Erid className={styles.erid} tip={erid.tip} appearance={erid.appearance} />}
+        <div
+          className={styles.slideContentWrapper}
+          data-layout-type={layoutType}
+          data-image-format={getSliderContentWrapperImageType(media)}
+        >
+          <div
+            className={styles.content}
+            data-layout-type={layoutType}
+            data-image-format={getSliderContentWrapperImageType(media)}
+          >
+            <div className={styles.text} data-layout-type={layoutType}>
+              <Typography family='sans' {...getTitleProps(layoutType)} tag='div'>
+                <RichText richText={title} />
+              </Typography>
+              {description && (
+                <Typography.SansBodyL tag='div'>
+                  <RichText richText={description} />
+                </Typography.SansBodyL>
+              )}
+            </div>
+
+            <div className={styles.buttonWrapper} data-layout-type={layoutType}>
+              <ButtonPromo target='_self' {...button} size='l' appearance='tertiary' className={styles.button} />
+            </div>
+          </div>
+
+          <HeroSlideMedia {...media} layoutType={layoutType} />
+        </div>
+      </Layout.SectionWrapper>
+    </div>
+  );
+}

package/src/components/HeroSlider/components/HeroSlide/constants.ts

@@ -0,0 +1,12 @@
+export const Appearance = {
+  Decor: 'decor',
+  Brand: 'brand',
+  Graphite: 'graphite',
+} as const;
+
+export const Color = {
+  Neutral: 'neutral',
+  White: 'white',
+  Violet: 'violet',
+  Blue: 'blue',
+} as const;

package/src/components/HeroSlider/components/HeroSlide/index.ts

@@ -0,0 +1,2 @@
+export * from './HeroSlide';
+export { type HeroSlideProps } from './types';

package/src/components/HeroSlider/components/HeroSlide/styles.module.scss

@@ -0,0 +1,164 @@
+@use '@sbercloud/figma-tokens-web/build/scss/styles-theme-variables' as var;
+
+$colors: (
+  neutral: var.$sys-neutral-background,
+  white: var.$sys-neutral-background1-level,
+  violet: var.$sys-violet-decor-default,
+  blue: var.$sys-blue-decor-default,
+);
+
+$decor: 'decor';
+$graphite: 'graphite';
+$brand: 'brand';
+
+$rectangle: 'rectangle';
+$square: 'square';
+
+@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: var.$sys-graphite-accent-default;
+
+    .text {
+      color: var.$sys-invert-neutral-text-main;
+    }
+  }
+
+  &[data-appearance='#{$brand}'] {
+    background-color: var.$sys-primary-accent-default;
+
+    .text {
+      color: var.$sys-graphite-text-main;
+    }
+  }
+
+  &[data-appearance='#{$decor}'] {
+    .text {
+      color: var.$sys-graphite-text-main;
+    }
+  }
+}
+
+.wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  background-color: var.$sys-neutral-background;
+
+  height: 368px;
+
+  @include decor-background-colors;
+  @include appearance;
+}
+
+.sectionWrapper {
+  height: 100%;
+
+  & > div[data-layout-type='tablet'] {
+    padding-right: 0;
+  }
+}
+
+.erid {
+  position: absolute;
+  right: var.$dimension-025m;
+  top: var.$dimension-025m;
+}
+
+.slideContentWrapper {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  justify-content: space-between;
+
+  &[data-layout-type='mobile'] {
+    justify-content: center;
+  }
+
+  &[data-image-format='#{$rectangle}'] {
+    &[data-layout-type='desktop'] {
+      gap: var.$dimension-4m;
+    }
+
+    &[data-layout-type='desktopSmall'] {
+      gap: var.$dimension-3m;
+    }
+  }
+
+  &[data-image-format='#{$square}'] {
+    gap: var.$dimension-2m;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  padding: var.$dimension-7m 0;
+
+  &[data-layout-type='tablet'] {
+    max-width: unset;
+    padding: var.$dimension-4m 0 var.$dimension-7m;
+  }
+
+  &[data-layout-type='mobile'] {
+    max-width: unset;
+    padding: var.$dimension-3m 0 var.$dimension-7m;
+
+    width: 100%;
+  }
+
+  &[data-image-format='#{$rectangle}'] {
+    &[data-layout-type='desktopSmall'] {
+      max-width: 650px;
+      flex-shrink: 0;
+    }
+
+    &[data-layout-type='tablet'] {
+      max-width: 388px;
+    }
+  }
+
+  &[data-image-format='#{$square}'] {
+    max-width: 800px;
+    flex-shrink: 0;
+
+    &[data-layout-type='tablet'],
+    &[data-layout-type='mobile'] {
+      max-width: unset;
+      flex: initial;
+    }
+  }
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+
+  gap: var.$dimension-2m;
+
+  &[data-layout-type='mobile'] {
+    br {
+      display: none;
+    }
+  }
+}
+
+.buttonWrapper {
+  &[data-layout-type='mobile'] {
+    .button {
+      width: 100%;
+    }
+  }
+}
+
+