@cloud-ru/uikit-product-site-header 0.4.8

package/src/components/HeaderItems/HeaderItem.tsx

@@ -0,0 +1,123 @@
+import cn from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+
+import { LinkItemHeader, MoreButton } from '../../helperComponents';
+import { useResizeObserver } from '../../hooks';
+import styles from './styles.module.scss';
+import { LinkItem } from './types';
+
+export type HeaderItemProps = {
+  /** Список элементов для пунктов меню хэдера */
+  linkItems?: LinkItem[];
+  /** Флаг является ли сейчас мобильная версия */
+  isMobileTabletView?: boolean;
+  /** Id активного элемента списка меню */
+  activeLinkItemId?: string;
+};
+
+const GAP_ITEMS = 22;
+
+const WIDTH_MORE_BUTTON = 24;
+
+export function HeaderItems({ linkItems, isMobileTabletView, activeLinkItemId }: HeaderItemProps) {
+  const [visibleItems, setVisibleItems] = useState<LinkItem[]>([]);
+  const [hiddenItems, setHiddenItems] = useState<LinkItem[]>([]);
+
+  const hiddenRowElementRef = useRef<HTMLDivElement>(null);
+
+  const [firstItemElement, setFirstItemElement] = useState<HTMLElement | null>(null);
+  const itemsMapRef = useRef(new Map<LinkItem, HTMLElement | null>());
+
+  const { width: maxWidth } = useResizeObserver(hiddenRowElementRef.current);
+  const { width: firstVisibleItemWidth } = useResizeObserver(firstItemElement);
+
+  function setItemElement(item: LinkItem, index: number) {
+    return (itemElement: HTMLElement | null) => {
+      if (index === 0 && itemElement) {
+        setFirstItemElement(itemElement);
+      }
+
+      if (itemElement === null) {
+        itemsMapRef.current.delete(item);
+      } else {
+        itemsMapRef.current.set(item, itemElement);
+      }
+    };
+  }
+
+  useEffect(() => {
+    if (maxWidth < 1) {
+      return;
+    }
+
+    const newVisibleItems: LinkItem[] = [];
+    const newHiddenItems: LinkItem[] = [];
+    let isHidden = false;
+    let indexElement = 0;
+
+    let currentRowWidth = 0;
+
+    const size = itemsMapRef.current.size;
+
+    itemsMapRef.current.forEach((itemElement, itemRowItem) => {
+      const itemWidth = itemElement?.offsetWidth || 0;
+      const isLastElement = indexElement + 1 === size;
+      const sumRowWidth = currentRowWidth + itemWidth + (isLastElement ? 0 : GAP_ITEMS);
+
+      if (isHidden) {
+        newHiddenItems.push(itemRowItem);
+      } else {
+        if (maxWidth > sumRowWidth + (isLastElement ? 0 : WIDTH_MORE_BUTTON)) {
+          newVisibleItems.push(itemRowItem);
+          currentRowWidth = sumRowWidth;
+        } else {
+          newHiddenItems.push(itemRowItem);
+          isHidden = true;
+        }
+      }
+      indexElement++;
+    });
+
+    setVisibleItems(newVisibleItems);
+    setHiddenItems(newHiddenItems);
+  }, [linkItems, maxWidth, firstVisibleItemWidth]);
+
+  if (!linkItems || isMobileTabletView) return null;
+
+  const isVisibleEmpty = visibleItems.length === 0;
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={cn(styles.linkItemsContainer, styles.hiddenRow)} ref={hiddenRowElementRef}>
+        {linkItems.map((linkItem, index) => (
+          <div key={linkItem.id} className={styles.lastItemContainer} ref={setItemElement(linkItem, index)}>
+            <LinkItemHeader
+              label={linkItem.label}
+              target={linkItem.target}
+              href={linkItem.href}
+              onClick={linkItem.onClick}
+            />
+          </div>
+        ))}
+      </div>
+      <div
+        className={cn(styles.linkItemsContainer, {
+          [styles.linkItemsFirstViewContainer]: isVisibleEmpty,
+        })}
+      >
+        {/*Добавлено для сайта, так как используется next и приходит html без расчета js*/}
+        {(isVisibleEmpty ? linkItems : visibleItems).map(linkItem => (
+          <div key={linkItem.id} className={styles.lastItemContainer}>
+            <LinkItemHeader
+              label={linkItem.label}
+              href={linkItem.href}
+              onClick={linkItem.onClick}
+              active={activeLinkItemId === linkItem.id}
+            />
+          </div>
+        ))}
+        {hiddenItems.length > 0 && <MoreButton linkItemsArray={hiddenItems} activeItemId={activeLinkItemId} />}
+      </div>
+    </div>
+  );
+}

package/src/components/HeaderItems/index.ts

@@ -0,0 +1,2 @@
+export * from './HeaderItem';
+export * from './types';

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

@@ -0,0 +1,46 @@
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  gap: 22px;
+  flex-wrap: nowrap;
+  min-height: 24px;
+}
+
+.linkItemsContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 22px;
+}
+
+.lastItemContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 22px;
+}
+
+.hiddenRow {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  display: flex;
+  width: 100%;
+
+  visibility: hidden;
+}
+
+.linkItemsFirstViewContainer {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  height: 24px;
+  flex-grow: 1;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 22px;
+}

package/src/components/HeaderItems/types.ts

@@ -0,0 +1,12 @@
+export type LinkItem = {
+  /** id Элемента */
+  id: string;
+  /** Текст элемента */
+  label: string;
+  /** Хэндлер клика элемента */
+  onClick?: () => void;
+  /** Ссылка элемента */
+  href?: string;
+  /** target для ссылки элемента */
+  target?: string;
+};

package/src/components/SiteHeaderBasic/SiteHeaderBasic.tsx

@@ -0,0 +1,133 @@
+import cn from 'classnames';
+import { MouseEvent, ReactNode, useRef } from 'react';
+
+import { Layout } from '@cloud-ru/uikit-product-site-layout';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+
+import { ButtonBurger, LogoContent, MobileMenu } from '../../helperComponents';
+import { useHeaderPosition } from '../../hooks';
+import styles from './styles.module.scss';
+
+export type AdditionalLogoText = {
+  /** Дополнительный текст Логотипа */
+  text?: string;
+  /** Переход по ссылке по дополнительному тексту Логотипа */
+  link?: string;
+  /** Коллбэк по клику на дополнительный текс Логотипа */
+  onClick?(event?: MouseEvent<HTMLAnchorElement>): void;
+};
+
+export type Logo = {
+  /** Переход по ссылке Логотипа */
+  logoLink: string;
+  /** Коллбэк по клику на Логотип */
+  onClick?(event?: MouseEvent<HTMLAnchorElement>): void;
+};
+
+export type HeaderProps = WithSupportProps<
+  WithLayoutType<{
+    /** Настройки текста справа Логотипа */
+    additionalLogoText?: AdditionalLogoText;
+    /** className root блока */
+    className?: string;
+    /** className основного хедера */
+    mainHeaderClassName?: string;
+    /** максимальная ширина контейнера */
+    maxWidth?: number;
+    /** Флаг открытия мобильного меню */
+    mobileMenuOpen: boolean;
+    /** Настройки Логотипа */
+    logo: Logo;
+    /** Функция изменения флаг открытия мобильного меню */
+    onSetMobileMenuOpen(open: boolean): void;
+    /** Контент посередине (между логотипом и правым блоком) */
+    middleContent?: ReactNode;
+    /** Контент занимающий всю возможную ширину хэдера */
+    fullWidthContent?: ReactNode;
+    /** Контент справа (левее бургера) */
+    rightContent?: ReactNode;
+    /** Контент сверху над хэдером, для инфостроки */
+    subHeader?: ReactNode;
+    /** Контент мобильной версии меню */
+    mobileMenuContent?: ReactNode;
+    /** Нижний контент кнопок мобильной версии меню */
+    mobileConsultationButton?: ReactNode;
+  }>
+>;
+
+const HEIGHT_SUBHEADER = 25;
+
+export function SiteHeaderBasic({
+  className,
+  maxWidth,
+  additionalLogoText,
+  middleContent,
+  rightContent,
+  mobileMenuContent,
+  subHeader,
+  fullWidthContent,
+  layoutType,
+  mobileConsultationButton,
+  mobileMenuOpen,
+  onSetMobileMenuOpen,
+  mainHeaderClassName,
+  logo,
+  ...rest
+}: HeaderProps) {
+  const refHeader = useRef<HTMLDivElement>(null);
+  const { showHeader, headerHeight } = useHeaderPosition(mobileMenuOpen, refHeader);
+
+  const isMobileTabletView = layoutType === 'mobile' || layoutType === 'tablet';
+  const isMobile = layoutType === 'mobile';
+
+  return (
+    <Layout.Header
+      style={{
+        transform: `translateY(-${!showHeader ? headerHeight + HEIGHT_SUBHEADER : 0}px)`,
+      }}
+      className={cn(styles.root, className)}
+      data-attr='layout-header'
+      {...extractSupportProps(rest)}
+    >
+      {subHeader}
+      <div
+        ref={refHeader}
+        className={cn(styles.headerMaster, styles.dividerHeader, mainHeaderClassName)}
+        data-layout-type={layoutType}
+      >
+        <div
+          className={styles.headerPartsContainer}
+          style={{
+            maxWidth,
+          }}
+        >
+          {fullWidthContent ?? (
+            <>
+              <div className={styles.leftPart} data-layout-type={layoutType}>
+                <LogoContent additionalLogoText={additionalLogoText} isMobile={isMobile} logo={logo} />
+              </div>
+              <div className={styles.middlePart}>{middleContent}</div>
+              <div className={styles.rightPart}>
+                {rightContent}
+                {mobileMenuContent && isMobileTabletView && (
+                  <>
+                    <ButtonBurger
+                      mobileMenuOpen={mobileMenuOpen}
+                      onClick={() => onSetMobileMenuOpen(!mobileMenuOpen)}
+                    />
+                    <MobileMenu
+                      mobileConsultationButton={mobileConsultationButton}
+                      mobileMenuContent={mobileMenuContent}
+                      mobileMenuOpen={mobileMenuOpen}
+                      onClickForCloseMobileMenu={() => onSetMobileMenuOpen(false)}
+                    />
+                  </>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </Layout.Header>
+  );
+}

package/src/components/SiteHeaderBasic/index.ts

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

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

@@ -0,0 +1,72 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ste;
+
+.root {
+  position: sticky;
+  top: 0;
+  transition:
+  box-shadow 0.3s ease-in-out,
+  transform 0.3s ease-in-out;
+}
+
+.headerMaster {
+  width: 100%;
+  background: ste.$sys-neutral-background1-level;
+  padding: 0 32px;
+
+  &[data-layout-type='mobile'] {
+    padding: 0 16px;
+  }
+}
+
+.dividerHeader {
+  box-sizing: border-box;
+  border-bottom: 1px solid ste.$sys-neutral-decor-default;
+}
+
+.leftPart {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 40px;
+
+  &[data-layout-type='mobile'] {
+    margin-right: 0;
+  }
+}
+
+.middlePart {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-grow: 1;
+  justify-content: start;
+  gap: 40px;
+}
+
+.linkItemsContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 20px;
+}
+
+.rightPart {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.headerPartsContainer {
+  max-width: 1216px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 60px;
+  box-sizing: border-box;
+  margin: 0 auto;
+  overflow: hidden;
+}

package/src/components/SubHeader/SubHeader.tsx

@@ -0,0 +1,51 @@
+import cn from 'classnames';
+
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { AlertTop, AlertTopProps } from '@snack-uikit/alert';
+
+import styles from './styles.module.scss';
+
+type BannerInfo = {
+  /** Цвет фона SubHeader */
+  color: 'yellow' | 'blue' | 'green';
+  /** Ссылка на текст SubHeader */
+  link?: string;
+  /** Текст SubHeader, может передаваться без ссылки */
+  title: string;
+};
+
+const APPEARANCE_ALERT: Record<BannerInfo['color'], AlertTopProps['appearance']> = {
+  green: 'success',
+  yellow: 'warning',
+  blue: 'info',
+};
+
+type SubHeaderProps = WithLayoutType<{
+  /** Объект для отображения данных на баннере */
+  bannerInfo: BannerInfo;
+  /** Функция закрытия SubHeader */
+  onCloseSubHeader?(): void;
+}>;
+
+export function SubHeader({ bannerInfo, onCloseSubHeader, layoutType }: SubHeaderProps) {
+  return (
+    <div className={cn(styles.root, styles[bannerInfo.color])} data-layout-type={layoutType}>
+      <AlertTop
+        className={styles.subHeaderContainer}
+        title={!bannerInfo.link ? bannerInfo.title : undefined}
+        link={
+          bannerInfo.link
+            ? {
+                text: bannerInfo.title,
+                href: bannerInfo.link,
+              }
+            : undefined
+        }
+        description=''
+        icon={false}
+        appearance={APPEARANCE_ALERT[bannerInfo.color]}
+        onClose={onCloseSubHeader}
+      />
+    </div>
+  );
+}

package/src/components/SubHeader/index.ts

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

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

@@ -0,0 +1,37 @@
+@use '@sbercloud/figma-tokens-web/build/scss/styles-theme-variables' as ste;
+
+.root {
+  background: ste.$sys-neutral-background1-level;
+  padding: 0 16px;
+
+  &[data-layout-type='mobile'] {
+    padding: 0;
+  }
+}
+
+.subHeaderContainer {
+  max-width: 1248px;
+  margin: 0 auto;
+  height: 36px;
+}
+
+.closeIcon {
+  cursor: pointer;
+}
+
+.green {
+  background-color: ste.$sys-green-accent-default;
+}
+
+.yellow {
+  background-color: ste.$sys-yellow-accent-default;
+}
+
+.blue {
+  background-color: ste.$sys-blue-accent-default;
+}
+
+.link {
+  text-decoration: underline;
+  color: ste.$sys-graphite-text-main;
+}

package/src/components/UserDetailsDropdown/UserDetailsDropdown.tsx

@@ -0,0 +1,46 @@
+import { Avatar } from '@snack-uikit/avatar';
+import { Dropdown } from '@snack-uikit/dropdown';
+
+import { UserDetailsInline } from '../UserDetailsInline';
+import styles from './styles.module.scss';
+
+export type UserDetailsDropdownProps = {
+  userName: string;
+  lastName: string;
+  onClickExit: () => void;
+  onClickDropdownContent?: () => void;
+};
+
+export function UserDetailsDropdown({
+  userName,
+  lastName,
+  onClickExit,
+  onClickDropdownContent,
+}: UserDetailsDropdownProps) {
+  return (
+    <Dropdown
+      offset={8}
+      placement='bottom-end'
+      onOpenChange={onClickDropdownContent}
+      content={
+        <div className={styles.wrapper}>
+          <UserDetailsInline
+            className={styles.container}
+            userName={userName}
+            lastName={lastName}
+            onClickExit={onClickExit}
+            withDivider
+          />
+        </div>
+      }
+    >
+      <Avatar
+        name={`${userName} ${lastName}`}
+        size='s'
+        showTwoSymbols
+        className={styles.authAvatar}
+        appearance='green'
+      />
+    </Dropdown>
+  );
+}

package/src/components/UserDetailsDropdown/index.ts

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

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

@@ -0,0 +1,14 @@
+.authAvatar {
+  cursor: pointer;
+}
+
+.wrapper {
+  min-width: 240px;
+  padding: 4px 8px;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 5;
+}
+
+.container {
+  gap: 4px;
+}

package/src/components/UserDetailsInline/UserDetailsInline.tsx

@@ -0,0 +1,34 @@
+import cn from 'classnames';
+
+import { ExitSVG } from '@cloud-ru/uikit-product-icons';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Divider } from '@snack-uikit/divider';
+
+import { UserInfo } from '../../helperComponents/UserInfo';
+import styles from './styles.module.scss';
+
+export type UserDetailsInlineProps = {
+  userName: string;
+  lastName: string;
+  className?: string;
+  onClickExit: () => void;
+  withDivider?: boolean;
+};
+
+export function UserDetailsInline({ userName, lastName, onClickExit, withDivider, className }: UserDetailsInlineProps) {
+  return (
+    <div className={cn(styles.userAuthContent, className)}>
+      <UserInfo userName={userName} lastName={lastName} />
+      {withDivider && <Divider />}
+      <ButtonFunction
+        label='Выйти из аккаунта'
+        size='xs'
+        appearance='neutral'
+        icon={<ExitSVG size={24} />}
+        iconPosition='before'
+        className={styles.buttonExit}
+        onClick={onClickExit}
+      />
+    </div>
+  );
+}

package/src/components/UserDetailsInline/index.ts

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

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

@@ -0,0 +1,9 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element'
+  as ste;
+
+.userAuthContent {
+  display: flex;
+  align-items: start;
+  flex-direction: column;
+  gap: 8px;
+}

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from './SiteHeaderBasic';
+export * from './HeaderItems';
+export * from './SubHeader';
+export * from './UserDetailsInline';
+export * from './UserDetailsDropdown';

package/src/helperComponents/ButtonBurger/ButtonBurger.tsx

@@ -0,0 +1,16 @@
+import { BurgerSVG, CloseSVG } from '@cloud-ru/uikit-product-icons';
+
+import styles from './styles.module.scss';
+
+type ButtonBurgerProps = {
+  mobileMenuOpen: boolean;
+  onClick: () => void;
+};
+
+export function ButtonBurger({ mobileMenuOpen, onClick }: ButtonBurgerProps) {
+  return (
+    <button className={styles.buttonBurger} onClick={onClick}>
+      {mobileMenuOpen ? <CloseSVG /> : <BurgerSVG />}
+    </button>
+  );
+}

package/src/helperComponents/ButtonBurger/index.ts

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

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

@@ -0,0 +1,21 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element' as ste;
+
+.buttonBurger {
+  background-color: transparent;
+  cursor: pointer;
+  box-shadow: none;
+  padding: 0;
+  height: 32px;
+  width: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: 2px solid ste.$sys-graphite-decor-default;
+  color: ste.$sys-graphite-accent-default;
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}

package/src/helperComponents/LinkItemHeader/LinkItemHeader.tsx

@@ -0,0 +1,36 @@
+import cn from 'classnames';
+
+import { Typography } from '@snack-uikit/typography';
+
+import styles from './styles.module.scss';
+
+type LinkItemHeaderProps = {
+  href?: string;
+  target?: string;
+  label: string;
+  withoutHover?: boolean;
+  active?: boolean;
+  onClick?: () => void;
+};
+
+export function LinkItemHeader({ href, label, onClick, withoutHover, target, active }: LinkItemHeaderProps) {
+  if (href) {
+    return (
+      <a href={href} target={target} onClick={onClick} className={styles.item}>
+        <Typography.SansTitleS>{label}</Typography.SansTitleS>
+      </a>
+    );
+  }
+
+  return (
+    <button
+      onClick={onClick}
+      className={cn(styles.item, styles.button, {
+        [styles.active]: active,
+        [styles.hovered]: !withoutHover && !active,
+      })}
+    >
+      <Typography.SansTitleS>{label}</Typography.SansTitleS>
+    </button>
+  );
+}