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

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

@@ -0,0 +1,39 @@
+import { ButtonPromoProps } from '@cloud-ru/uikit-product-button-predefined';
+import { EridProps } from '@cloud-ru/uikit-product-site-tag';
+import { ValueOf } from '@snack-uikit/utils';
+
+import { HeroSlideMediaProps } from '../HeroSlideMedia';
+import { Appearance, Color } from './constants';
+
+type ColorType = ValueOf<typeof Color>;
+
+type AppearanceType = ValueOf<typeof Appearance>;
+
+export type HeroSlideBaseProps = {
+  /** id компонента */
+  id?: string;
+  /** Заголовок*/
+  title: string;
+  /** Описание */
+  description?: string;
+  /** Медиа-контент */
+  media: HeroSlideMediaProps;
+  /** Кнопка ButtonPromo */
+  button: Omit<ButtonPromoProps, 'size' | 'appearance' | 'className'>;
+  /** Плашка рекламы с tooltip */
+  erid?: Pick<EridProps, 'tip' | 'appearance'>;
+  /** CSS-класс */
+  className?: string;
+};
+
+type HeroSlideWithColor = HeroSlideBaseProps & {
+  appearance: Exclude<AppearanceType, 'brand' | 'graphite'>;
+  color: ColorType;
+};
+
+type HeroSlideWithoutColor = HeroSlideBaseProps & {
+  appearance: Exclude<AppearanceType, 'decor'>;
+  color?: never;
+};
+
+export type HeroSlideProps = HeroSlideWithColor | HeroSlideWithoutColor;

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

@@ -0,0 +1,35 @@
+import { LayoutType } from '@cloud-ru/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+
+import { HeroSlideImageProps } from '../HeroSlideImage';
+import { HeroSlideBaseProps } from './types';
+
+export const getTitleProps = (layoutType: LayoutType): Pick<TypographyProps, 'purpose' | 'size'> => {
+  switch (layoutType) {
+    case 'mobile':
+    case 'tablet':
+      return {
+        purpose: 'headline',
+        size: 'l',
+      };
+    default:
+      return {
+        purpose: 'display',
+        size: 'm',
+      };
+  }
+};
+
+export const getSliderContentWrapperImageType = (
+  media: HeroSlideBaseProps['media'],
+): HeroSlideImageProps['format'] | undefined => {
+  switch (media.type) {
+    case 'image':
+      return media.format;
+
+    case 'imageBg':
+    case 'videoBg':
+    default:
+      return undefined;
+  }
+};

package/src/components/HeroSlider/components/HeroSlideImage/HeroSlideImage.tsx

@@ -0,0 +1,29 @@
+import { CSS_BREAKPOINTS, WithLayoutType } from '@cloud-ru/uikit-product-utils';
+
+import styles from './styles.module.scss';
+
+export type HeroSlideImageProps = {
+  /** Ссылки на картинку */
+  source: {
+    desktop: string;
+    tablet?: string;
+  };
+  /** Форма картинки */
+  format: 'rectangle' | 'square' | 'custom';
+};
+
+export function HeroSlideImage({ source, format, layoutType }: WithLayoutType<HeroSlideImageProps>) {
+  const { tablet, desktop } = source;
+
+  if (layoutType === 'mobile') {
+    return null;
+  }
+
+  return (
+    <picture className={styles.imageWrapper} data-image-format={format} data-layout-type={layoutType}>
+      {tablet && <source srcSet={tablet} media={CSS_BREAKPOINTS.tablet} />}
+      <source srcSet={desktop} media={CSS_BREAKPOINTS.large} />
+      <img src={desktop} className={styles.image} data-image-format={format} loading='lazy' alt='main slide' />
+    </picture>
+  );
+}

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

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

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

@@ -0,0 +1,31 @@
+$rectangle: 'rectangle';
+$square: 'square';
+
+.imageWrapper {
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  &[data-image-format='#{$rectangle}'] {
+    &[data-layout-type='desktop'] {
+      flex-shrink: 0;
+    }
+  }
+}
+
+.image {
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+
+  pointer-events: none;
+
+  &[data-image-format='#{$rectangle}'] {
+    width: auto;
+    max-height: 328px;
+  }
+
+  &[data-image-format='#{$square}'] {
+    max-height: 368px;
+  }
+}

package/src/components/HeroSlider/components/HeroSlideImageBg/HeroSlideImageBg.tsx

@@ -0,0 +1,31 @@
+import { CSS_BREAKPOINTS, WithLayoutType } from '@cloud-ru/uikit-product-utils';
+
+import styles from './styles.module.scss';
+
+export type HeroSlideImageBgProps = {
+  /** Ссылки на картинку-фон */
+  source: {
+    desktopLg?: string;
+    desktop: string;
+    tablet: string;
+    mobile: string;
+  };
+};
+
+export function HeroSlideImageBg({ source }: WithLayoutType<HeroSlideImageBgProps>) {
+  return (
+    <picture className={styles.backgroundImageWrapper}>
+      <source srcSet={source.mobile} media={CSS_BREAKPOINTS.mobile} />
+      <source srcSet={source.tablet} media={CSS_BREAKPOINTS.tablet} />
+      {source.desktopLg ? (
+        <>
+          <source srcSet={source.desktop} media={CSS_BREAKPOINTS.desktop} />
+          <source srcSet={source.desktopLg} />
+        </>
+      ) : (
+        <source srcSet={source.desktop} />
+      )}
+      <img loading='lazy' src={source.desktop} className={styles.backgroundImage} alt='background' />
+    </picture>
+  );
+}

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

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

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

@@ -0,0 +1,20 @@
+.backgroundImageWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 2;
+
+  padding: 0;
+  display: block;
+  line-height: 0;
+}
+
+.backgroundImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center 0;
+}

package/src/components/HeroSlider/components/HeroSlideMedia/HeroSlideMedia.tsx

@@ -0,0 +1,22 @@
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+
+import { HeroSlideImage } from '../HeroSlideImage';
+import { HeroSlideImageBg } from '../HeroSlideImageBg';
+import { HeroSlideVideoBg } from '../HeroSlideVideoBg';
+import { HeroSlideMediaProps } from './types';
+
+export function HeroSlideMedia(props: WithLayoutType<HeroSlideMediaProps>) {
+  switch (props.type) {
+    case 'image':
+      return <HeroSlideImage {...props} />;
+
+    case 'imageBg':
+      return <HeroSlideImageBg {...props} />;
+
+    case 'videoBg':
+      return <HeroSlideVideoBg {...props} />;
+
+    default:
+      return null;
+  }
+}

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

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

package/src/components/HeroSlider/components/HeroSlideMedia/types.ts

@@ -0,0 +1,17 @@
+import { HeroSlideImageProps } from '../HeroSlideImage';
+import { HeroSlideImageBgProps } from '../HeroSlideImageBg';
+import { HeroSlideVideoBgProps } from '../HeroSlideVideoBg';
+
+type HeroImageProps = HeroSlideImageProps & {
+  type: 'image';
+};
+
+type HeroImageBgProps = HeroSlideImageBgProps & {
+  type: 'imageBg';
+};
+
+type HeroVideoBgProps = HeroSlideVideoBgProps & {
+  type: 'videoBg';
+};
+
+export type HeroSlideMediaProps = HeroImageProps | HeroImageBgProps | HeroVideoBgProps;

package/src/components/HeroSlider/components/HeroSlideVideoBg/HTMLComment.tsx

@@ -0,0 +1,36 @@
+import { createRef, RefObject, useEffect } from 'react';
+
+type Props = {
+  text: string;
+};
+
+export function HTMLComment({ text }: Props) {
+  const ref: RefObject<HTMLSpanElement> = createRef();
+
+  useEffect(() => {
+    let el: HTMLSpanElement | null = null;
+    let parent: ParentNode | null = null;
+    let comm: Comment | null = null;
+
+    if (ref.current) {
+      el = ref.current;
+      parent = el.parentNode;
+      comm = document.createComment(` ${text.trim()} `);
+
+      try {
+        if (parent && parent.contains(el)) {
+          parent.replaceChild(comm, el);
+        }
+        // eslint-disable-next-line
+      } catch {}
+    }
+
+    return () => {
+      if (parent && el && comm) {
+        parent.replaceChild(el, comm);
+      }
+    };
+  }, [ref, text]);
+
+  return <span ref={ref} style={{ display: 'none' }} />;
+}

package/src/components/HeroSlider/components/HeroSlideVideoBg/HeroSlideVideoBg.tsx

@@ -0,0 +1,30 @@
+import { SiteVideo } from '@cloud-ru/uikit-product-site-media';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+
+import { HTMLComment } from './HTMLComment';
+
+export type HeroSlideVideoBgProps = {
+  /** Ссылка на видео */
+  link: string;
+  /** Картинка-предпросмотр видео */
+  previewImage: string;
+};
+
+export function HeroSlideVideoBg({ link, previewImage, layoutType }: WithLayoutType<HeroSlideVideoBgProps>) {
+  return (
+    <>
+      <HTMLComment text='noindex' />
+      <SiteVideo
+        layoutType={layoutType}
+        video={{
+          src: link,
+          poster: previewImage,
+          muted: true,
+          loop: true,
+          autoPlay: true,
+        }}
+      />
+      <HTMLComment text='/noindex' />
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,5 @@
+export * from './HeroSlide';
+export * from './HeroSlideImage';
+export * from './HeroSlideImageBg';
+export * from './HeroSlideMedia';
+export * from './HeroSlideVideoBg';

package/src/components/HeroSlider/index.ts

@@ -0,0 +1,2 @@
+export * from './HeroSlider';
+export * from './components/HeroSlide/types';

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

@@ -0,0 +1,41 @@
+@use '@sbercloud/figma-tokens-web/build/scss/styles-theme-variables' as var;
+
+$decor: 'decor';
+$graphite: 'graphite';
+$brand: 'brand';
+
+.root {
+  position: relative;
+  touch-action: none;
+}
+
+.heroCarousel {
+ & > div > div {
+   padding: 0;
+   margin: 0;
+ }
+}
+
+.paginationWrapper {
+  position: absolute;
+  bottom: 24px;
+  left: 0;
+  right: 0;
+
+  display: flex;
+  justify-content: center;
+
+  &[data-appearance='#{$brand}'] {
+    button[data-activated="true"] > div {
+      /* stylelint-disable-next-line declaration-no-important */
+      background-color: var.$sys-neutral-accent-default !important;
+
+      &:hover,
+      &:focus-visible,
+      &:active {
+        /* stylelint-disable-next-line declaration-no-important */
+        background-color: var.$sys-neutral-accent-hovered !important;
+      }
+    }
+  }
+}

package/src/components/HeroZero/HeroZero.tsx

@@ -0,0 +1,84 @@
+import cn from 'classnames';
+
+import { Layout } from '@cloud-ru/uikit-product-site-layout';
+import { RichText } from '@cloud-ru/uikit-product-site-rich-text';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Breadcrumbs, Item } from '@snack-uikit/breadcrumbs';
+import { ButtonFilled, ButtonFilledProps } from '@snack-uikit/button';
+import { Typography } from '@snack-uikit/typography';
+
+import { HERO_COLORS } from '../../constants';
+import { HeroColor } from '../../types';
+import styles from './styles.module.scss';
+import { getTitleTypographyProps } from './utils';
+
+export type HeroZeroProps = WithSupportProps<
+  WithLayoutType<{
+    /** Хлебные крошки */
+    breadcrumbs: Item[];
+    /** Название секции */
+    title: string;
+    /** Описание секции */
+    description?: string;
+    /** Массив с настройками кнопок ButtonFilled */
+    buttons?: [ButtonFilledProps, ButtonFilledProps?];
+    /** Наличие нижнего паддинга */
+    showBottomPadding?: boolean;
+    /** Цвет фона */
+    backgroundColor?: HeroColor;
+    /** Выравнивание текста */
+    contentAlign?: 'left' | 'center';
+    /** CSS - класснейм */
+    className?: string;
+  }>
+>;
+
+export function HeroZero({
+  breadcrumbs,
+  title,
+  description,
+  layoutType,
+  buttons,
+  className,
+  backgroundColor = HERO_COLORS.NeutralBackground,
+  showBottomPadding = true,
+  contentAlign = 'left',
+  ...rest
+}: HeroZeroProps) {
+  return (
+    <Layout.SectionWrapper
+      layoutType={layoutType}
+      className={cn(className, styles.sectionWrapper)}
+      data-section-background={backgroundColor}
+      {...extractSupportProps(rest)}
+    >
+      <div className={cn(styles.heroZero, { [styles.withBottomPadding]: showBottomPadding })}>
+        <div className={styles.contentLayout} data-layout-type={layoutType}>
+          <div className={styles.contentText} data-layout-type={layoutType}>
+            <Breadcrumbs items={breadcrumbs} size='xs' />
+
+            <div className={styles.text} data-layout-type={layoutType} data-align={contentAlign}>
+              <Typography family='sans' tag='h1' className={styles.title} {...getTitleTypographyProps(layoutType)}>
+                {title}
+              </Typography>
+
+              {description && (
+                <Typography.SansBodyL tag='div' className={styles.description}>
+                  <RichText richText={description} />
+                </Typography.SansBodyL>
+              )}
+            </div>
+          </div>
+
+          {buttons && buttons.length > 0 && (
+            <div className={styles.buttons} data-layout-type={layoutType} data-align={contentAlign}>
+              {buttons.map((props, index) => (
+                <ButtonFilled key={index} className={styles.button} {...props} data-layout-type={layoutType} />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </Layout.SectionWrapper>
+  );
+}

package/src/components/HeroZero/index.ts

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

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

@@ -0,0 +1,111 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.heroZero {
+  position: relative;
+  padding: var.$dimension-5m 0 0;
+
+  &[data-layout-type='tablet'] {
+    padding: var.$dimension-4m 0 0;
+  }
+
+  &[data-layout-type='mobile'] {
+    padding: var.$dimension-3m 0 0;
+  }
+}
+
+.sectionWrapper {
+  &[data-section-background='neutral-background1-level'] {
+    background-color: var.$sys-neutral-background1-level;
+  }
+
+  &[data-section-background='neutral-background'] {
+    background-color: var.$sys-neutral-background;
+  }
+}
+
+.withBottomPadding {
+  padding-bottom: var.$dimension-5m;
+
+  &[data-layout-type='tablet'] {
+    padding-bottom: var.$dimension-4m;
+  }
+
+  &[data-layout-type='mobile'] {
+    padding-bottom: var.$dimension-3m;
+  }
+}
+
+.contentLayout {
+  display: flex;
+  flex-direction: column;
+  gap: var.$dimension-6m;
+
+  &[data-layout-type='tablet'] {
+    gap: var.$dimension-4m;
+  }
+
+  &[data-layout-type='mobile'] {
+    gap: var.$dimension-3m;
+  }
+}
+
+.contentText {
+  display: flex;
+  flex-direction: column;
+  gap: var.$dimension-4m;
+
+  &[data-layout-type='tablet'],
+  &[data-layout-type='mobile']{
+    gap: var.$dimension-3m;
+  }
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: calc(#{var.$dimension-1m + var.$dimension-050m});
+  max-width: 800px;
+  text-align: left;
+
+  &[data-layout-type='tablet'],
+  &[data-layout-type='mobile']{
+    gap: var.$dimension-1m;
+    max-width: unset;
+  }
+
+  &[data-align='center'] {
+    text-align: center;
+    align-self: center;
+  }
+}
+
+.title {
+  color: var.$sys-neutral-text-main;
+}
+
+.description {
+  color: var.$sys-neutral-text-support;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  gap: var.$dimension-2m;
+
+  &[data-layout-type='tablet'],
+  &[data-layout-type='mobile'] {
+    flex-direction: column;
+    gap: var.$dimension-1m;
+  }
+
+  &[data-align='center'] {
+    justify-content: center;
+  }
+}
+
+.button{
+  &[data-layout-type='tablet'],
+  &[data-layout-type='mobile'] {
+    width: 100%;
+  }
+}

package/src/components/HeroZero/utils.ts

@@ -0,0 +1,15 @@
+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 'tablet':
+    case 'mobile':
+      return { purpose: 'headline', size: 'l' };
+
+    case 'desktop':
+    case 'desktopSmall':
+    default:
+      return { purpose: 'display', size: 'm' };
+  }
+};

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './HeroEvent';
+export * from './HeroZero';
+export * from './HeroMain';
+export * from './HeroSlider';

package/src/constants.ts

@@ -0,0 +1,12 @@
+export const HERO_EVENT_BUTTONS = {
+  Registration: 'registration',
+  RegistrationClosed: 'registration-closed',
+  Watch: 'watch',
+  WatchLater: 'watch-later',
+  AdditionalMaterials: 'additional-materials',
+} as const;
+
+export const HERO_COLORS = {
+  NeutralBackground1Level: 'neutral-background1-level',
+  NeutralBackground: 'neutral-background',
+} as const;

package/src/helperComponents/HeroEventButton/HeroEventButton.tsx

@@ -0,0 +1,32 @@
+import { MouseEventHandler } from 'react';
+
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { ButtonFilled, ButtonFilledProps } from '@snack-uikit/button';
+
+import { HERO_BUTTON_META } from './constants';
+import { HeroButtonType } from './types';
+
+export type HeroButtonProps = Pick<ButtonFilledProps, 'label' | 'href' | 'disabled' | 'icon'> & {
+  type?: HeroButtonType;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+};
+
+type HeroButtonPropsInternal = WithLayoutType<HeroButtonProps>;
+
+export function HeroEventButton({ href, label, disabled, icon, onClick, type, layoutType }: HeroButtonPropsInternal) {
+  const meta = type ? HERO_BUTTON_META[type] : undefined;
+  const Icon = meta?.icon;
+
+  return (
+    <ButtonFilled
+      size='l'
+      onClick={onClick}
+      href={href}
+      target='_blank'
+      disabled={meta?.disabled ?? disabled}
+      label={meta?.label ?? label}
+      icon={(Icon && <Icon />) ?? icon}
+      fullWidth={['mobile', 'tablet'].includes(layoutType)}
+    />
+  );
+}

package/src/helperComponents/HeroEventButton/constants.ts

@@ -0,0 +1,21 @@
+import { JSXElementConstructor } from 'react';
+
+import { DownloadSVG, PlaySVG } from '@cloud-ru/uikit-product-icons';
+
+import { HERO_EVENT_BUTTONS } from '../../constants';
+import { HeroButtonType } from './types';
+
+export const HERO_BUTTON_META: Record<
+  HeroButtonType,
+  {
+    label: string;
+    icon?: JSXElementConstructor<{ size?: number }>;
+    disabled?: boolean;
+  }
+> = {
+  [HERO_EVENT_BUTTONS.Watch]: { label: 'Смотреть запись', icon: PlaySVG },
+  [HERO_EVENT_BUTTONS.WatchLater]: { label: 'Запись скоро будет', icon: PlaySVG, disabled: true },
+  [HERO_EVENT_BUTTONS.AdditionalMaterials]: { label: 'Получить материал', icon: DownloadSVG },
+  [HERO_EVENT_BUTTONS.Registration]: { label: 'Регистрация' },
+  [HERO_EVENT_BUTTONS.RegistrationClosed]: { label: 'Регистрация закрыта', disabled: true },
+};

package/src/helperComponents/HeroEventButton/index.ts

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

package/src/helperComponents/HeroEventButton/types.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { HERO_EVENT_BUTTONS } from '../../constants';
+
+export type HeroButtonType = ValueOf<typeof HERO_EVENT_BUTTONS>;