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

package/dist/esm/components/HeaderItems/HeaderItem.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import { LinkItemHeader, MoreButton } from '../../helperComponents';
+import { useResizeObserver } from '../../hooks';
+import styles from './styles.module.css';
+const GAP_ITEMS = 22;
+const WIDTH_MORE_BUTTON = 24;
+export function HeaderItems({ linkItems, isMobileTabletView, activeLinkItemId }) {
+    const [visibleItems, setVisibleItems] = useState([]);
+    const [hiddenItems, setHiddenItems] = useState([]);
+    const hiddenRowElementRef = useRef(null);
+    const [firstItemElement, setFirstItemElement] = useState(null);
+    const itemsMapRef = useRef(new Map());
+    const { width: maxWidth } = useResizeObserver(hiddenRowElementRef.current);
+    const { width: firstVisibleItemWidth } = useResizeObserver(firstItemElement);
+    function setItemElement(item, index) {
+        return (itemElement) => {
+            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 = [];
+        const newHiddenItems = [];
+        let isHidden = false;
+        let indexElement = 0;
+        let currentRowWidth = 0;
+        const size = itemsMapRef.current.size;
+        itemsMapRef.current.forEach((itemElement, itemRowItem) => {
+            const itemWidth = (itemElement === null || itemElement === void 0 ? void 0 : 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 (_jsxs("div", { className: styles.wrapper, children: [_jsx("div", { className: cn(styles.linkItemsContainer, styles.hiddenRow), ref: hiddenRowElementRef, children: linkItems.map((linkItem, index) => (_jsx("div", { className: styles.lastItemContainer, ref: setItemElement(linkItem, index), children: _jsx(LinkItemHeader, { label: linkItem.label, target: linkItem.target, href: linkItem.href, onClick: linkItem.onClick }) }, linkItem.id))) }), _jsxs("div", { className: cn(styles.linkItemsContainer, {
+                    [styles.linkItemsFirstViewContainer]: isVisibleEmpty,
+                }), children: [(isVisibleEmpty ? linkItems : visibleItems).map(linkItem => (_jsx("div", { className: styles.lastItemContainer, children: _jsx(LinkItemHeader, { label: linkItem.label, href: linkItem.href, onClick: linkItem.onClick, active: activeLinkItemId === linkItem.id }) }, linkItem.id))), hiddenItems.length > 0 && _jsx(MoreButton, { linkItemsArray: hiddenItems, activeItemId: activeLinkItemId })] })] }));
+}

package/dist/esm/components/HeaderItems/index.d.ts

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

package/dist/esm/components/HeaderItems/index.js

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

package/dist/esm/components/HeaderItems/styles.module.css

@@ -0,0 +1,44 @@
+.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/dist/esm/components/HeaderItems/types.d.ts

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

package/dist/esm/components/HeaderItems/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/SiteHeaderBasic/SiteHeaderBasic.d.ts

@@ -0,0 +1,45 @@
+import { MouseEvent, ReactNode } from 'react';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+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;
+}>>;
+export declare function SiteHeaderBasic({ className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, logo, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SiteHeaderBasic/SiteHeaderBasic.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useRef } from 'react';
+import { Layout } from '@sbercloud/uikit-product-site-layout';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { ButtonBurger, LogoContent, MobileMenu } from '../../helperComponents';
+import { useHeaderPosition } from '../../hooks';
+import styles from './styles.module.css';
+const HEIGHT_SUBHEADER = 25;
+export function SiteHeaderBasic(_a) {
+    var { className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, logo } = _a, rest = __rest(_a, ["className", "maxWidth", "additionalLogoText", "middleContent", "rightContent", "mobileMenuContent", "subHeader", "fullWidthContent", "layoutType", "mobileConsultationButton", "mobileMenuOpen", "onSetMobileMenuOpen", "mainHeaderClassName", "logo"]);
+    const refHeader = useRef(null);
+    const { showHeader, headerHeight } = useHeaderPosition(mobileMenuOpen, refHeader);
+    const isMobileTabletView = layoutType === 'mobile' || layoutType === 'tablet';
+    const isMobile = layoutType === 'mobile';
+    return (_jsxs(Layout.Header, Object.assign({ style: {
+            transform: `translateY(-${!showHeader ? headerHeight + HEIGHT_SUBHEADER : 0}px)`,
+        }, className: cn(styles.root, className), "data-attr": 'layout-header' }, extractSupportProps(rest), { children: [subHeader, _jsx("div", { ref: refHeader, className: cn(styles.headerMaster, styles.dividerHeader, mainHeaderClassName), "data-layout-type": layoutType, children: _jsx("div", { className: styles.headerPartsContainer, style: {
+                        maxWidth,
+                    }, children: fullWidthContent !== null && fullWidthContent !== void 0 ? fullWidthContent : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.leftPart, "data-layout-type": layoutType, children: _jsx(LogoContent, { additionalLogoText: additionalLogoText, isMobile: isMobile, logo: logo }) }), _jsx("div", { className: styles.middlePart, children: middleContent }), _jsxs("div", { className: styles.rightPart, children: [rightContent, mobileMenuContent && isMobileTabletView && (_jsxs(_Fragment, { children: [_jsx(ButtonBurger, { mobileMenuOpen: mobileMenuOpen, onClick: () => onSetMobileMenuOpen(!mobileMenuOpen) }), _jsx(MobileMenu, { mobileConsultationButton: mobileConsultationButton, mobileMenuContent: mobileMenuContent, mobileMenuOpen: mobileMenuOpen, onClickForCloseMobileMenu: () => onSetMobileMenuOpen(false) })] }))] })] })) }) })] })));
+}

package/dist/esm/components/SiteHeaderBasic/index.d.ts

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

package/dist/esm/components/SiteHeaderBasic/index.js

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

package/dist/esm/components/SiteHeaderBasic/styles.module.css

@@ -0,0 +1,66 @@
+.root{
+  position:sticky;
+  top:0;
+  transition:box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+
+.headerMaster{
+  width:100%;
+  background:var(--sys-neutral-background1-level, #fdfdfd);
+  padding:0 32px;
+}
+.headerMaster[data-layout-type=mobile]{
+  padding:0 16px;
+}
+
+.dividerHeader{
+  box-sizing:border-box;
+  border-bottom:1px solid var(--sys-neutral-decor-default, #dde0ea);
+}
+
+.leftPart{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  margin-right:40px;
+}
+.leftPart[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/dist/esm/components/SubHeader/SubHeader.d.ts

@@ -0,0 +1,17 @@
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+type BannerInfo = {
+    /** Цвет фона SubHeader */
+    color: 'yellow' | 'blue' | 'green';
+    /** Ссылка на текст SubHeader */
+    link?: string;
+    /** Текст SubHeader, может передаваться без ссылки */
+    title: string;
+};
+type SubHeaderProps = WithLayoutType<{
+    /** Объект для отображения данных на баннере */
+    bannerInfo: BannerInfo;
+    /** Функция закрытия SubHeader */
+    onCloseSubHeader?(): void;
+}>;
+export declare function SubHeader({ bannerInfo, onCloseSubHeader, layoutType }: SubHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/SubHeader/SubHeader.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { AlertTop } from '@snack-uikit/alert';
+import styles from './styles.module.css';
+const APPEARANCE_ALERT = {
+    green: 'success',
+    yellow: 'warning',
+    blue: 'info',
+};
+export function SubHeader({ bannerInfo, onCloseSubHeader, layoutType }) {
+    return (_jsx("div", { className: cn(styles.root, styles[bannerInfo.color]), "data-layout-type": layoutType, children: _jsx(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 }) }));
+}

package/dist/esm/components/SubHeader/index.d.ts

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

package/dist/esm/components/SubHeader/index.js

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

package/dist/esm/components/SubHeader/styles.module.css

@@ -0,0 +1,34 @@
+.root{
+  background:var(--sys-neutral-background1-level, #fdfdfd);
+  padding:0 16px;
+}
+.root[data-layout-type=mobile]{
+  padding:0;
+}
+
+.subHeaderContainer{
+  max-width:1248px;
+  margin:0 auto;
+  height:36px;
+}
+
+.closeIcon{
+  cursor:pointer;
+}
+
+.green{
+  background-color:var(--sys-green-accent-default, #67b963);
+}
+
+.yellow{
+  background-color:var(--sys-yellow-accent-default, #f0d559);
+}
+
+.blue{
+  background-color:var(--sys-blue-accent-default, #0063ff);
+}
+
+.link{
+  text-decoration:underline;
+  color:var(--sys-graphite-text-main, #222222);
+}

package/dist/esm/components/UserDetailsDropdown/UserDetailsDropdown.d.ts

@@ -0,0 +1,7 @@
+export type UserDetailsDropdownProps = {
+    userName: string;
+    lastName: string;
+    onClickExit: () => void;
+    onClickDropdownContent?: () => void;
+};
+export declare function UserDetailsDropdown({ userName, lastName, onClickExit, onClickDropdownContent, }: UserDetailsDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/UserDetailsDropdown/UserDetailsDropdown.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar } from '@snack-uikit/avatar';
+import { Dropdown } from '@snack-uikit/dropdown';
+import { UserDetailsInline } from '../UserDetailsInline';
+import styles from './styles.module.css';
+export function UserDetailsDropdown({ userName, lastName, onClickExit, onClickDropdownContent, }) {
+    return (_jsx(Dropdown, { offset: 8, placement: 'bottom-end', onOpenChange: onClickDropdownContent, content: _jsx("div", { className: styles.wrapper, children: _jsx(UserDetailsInline, { className: styles.container, userName: userName, lastName: lastName, onClickExit: onClickExit, withDivider: true }) }), children: _jsx(Avatar, { name: `${userName} ${lastName}`, size: 's', showTwoSymbols: true, className: styles.authAvatar, appearance: 'green' }) }));
+}

package/dist/esm/components/UserDetailsDropdown/index.d.ts

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

package/dist/esm/components/UserDetailsDropdown/index.js

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

package/dist/esm/components/UserDetailsDropdown/styles.module.css

@@ -0,0 +1,13 @@
+.authAvatar{
+  cursor:pointer;
+}
+
+.wrapper{
+  min-width:240px;
+  padding:4px 8px;
+  z-index:5;
+}
+
+.container{
+  gap:4px;
+}

package/dist/esm/components/UserDetailsInline/UserDetailsInline.d.ts

@@ -0,0 +1,8 @@
+export type UserDetailsInlineProps = {
+    userName: string;
+    lastName: string;
+    className?: string;
+    onClickExit: () => void;
+    withDivider?: boolean;
+};
+export declare function UserDetailsInline({ userName, lastName, onClickExit, withDivider, className }: UserDetailsInlineProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/UserDetailsInline/UserDetailsInline.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { ExitSVG } from '@sbercloud/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.css';
+export function UserDetailsInline({ userName, lastName, onClickExit, withDivider, className }) {
+    return (_jsxs("div", { className: cn(styles.userAuthContent, className), children: [_jsx(UserInfo, { userName: userName, lastName: lastName }), withDivider && _jsx(Divider, {}), _jsx(ButtonFunction, { label: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u0430\u043A\u043A\u0430\u0443\u043D\u0442\u0430', size: 'xs', appearance: 'neutral', icon: _jsx(ExitSVG, { size: 24 }), iconPosition: 'before', className: styles.buttonExit, onClick: onClickExit })] }));
+}

package/dist/esm/components/UserDetailsInline/index.d.ts

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

package/dist/esm/components/UserDetailsInline/index.js

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

package/dist/esm/components/UserDetailsInline/styles.module.css

@@ -0,0 +1,6 @@
+.userAuthContent{
+  display:flex;
+  align-items:start;
+  flex-direction:column;
+  gap:8px;
+}

package/dist/esm/components/index.d.ts

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

package/dist/esm/components/index.js

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

package/dist/esm/helperComponents/ButtonBurger/ButtonBurger.d.ts

@@ -0,0 +1,6 @@
+type ButtonBurgerProps = {
+    mobileMenuOpen: boolean;
+    onClick: () => void;
+};
+export declare function ButtonBurger({ mobileMenuOpen, onClick }: ButtonBurgerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/ButtonBurger/ButtonBurger.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BurgerSVG, CloseSVG } from '@sbercloud/uikit-product-icons';
+import styles from './styles.module.css';
+export function ButtonBurger({ mobileMenuOpen, onClick }) {
+    return (_jsx("button", { className: styles.buttonBurger, onClick: onClick, children: mobileMenuOpen ? _jsx(CloseSVG, {}) : _jsx(BurgerSVG, {}) }));
+}

package/dist/esm/helperComponents/ButtonBurger/index.d.ts

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

package/dist/esm/helperComponents/ButtonBurger/index.js

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

package/dist/esm/helperComponents/ButtonBurger/styles.module.css

@@ -0,0 +1,17 @@
+.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 var(--sys-graphite-decor-default, #ececec);
+  color:var(--sys-graphite-accent-default, #222222);
+}
+.buttonBurger:active, .buttonBurger:focus{
+  outline:none;
+}

package/dist/esm/helperComponents/LinkItemHeader/LinkItemHeader.d.ts

@@ -0,0 +1,10 @@
+type LinkItemHeaderProps = {
+    href?: string;
+    target?: string;
+    label: string;
+    withoutHover?: boolean;
+    active?: boolean;
+    onClick?: () => void;
+};
+export declare function LinkItemHeader({ href, label, onClick, withoutHover, target, active }: LinkItemHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/LinkItemHeader/LinkItemHeader.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+export function LinkItemHeader({ href, label, onClick, withoutHover, target, active }) {
+    if (href) {
+        return (_jsx("a", { href: href, target: target, onClick: onClick, className: styles.item, children: _jsx(Typography.SansTitleS, { children: label }) }));
+    }
+    return (_jsx("button", { onClick: onClick, className: cn(styles.item, styles.button, {
+            [styles.active]: active,
+            [styles.hovered]: !withoutHover && !active,
+        }), children: _jsx(Typography.SansTitleS, { children: label }) }));
+}

package/dist/esm/helperComponents/LinkItemHeader/index.d.ts

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

package/dist/esm/helperComponents/LinkItemHeader/index.js

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

package/dist/esm/helperComponents/LinkItemHeader/styles.module.css

@@ -0,0 +1,46 @@
+.button{
+  background-color:transparent;
+  border:none;
+  box-shadow:none;
+  padding:0;
+}
+.button:active, .button:focus{
+  outline:none;
+}
+
+.item{
+  position:relative;
+  text-decoration:none;
+  color:var(--sys-graphite-accent-default, #222222);
+  transition:color 0.3s ease-in-out;
+  cursor:pointer;
+}
+.item:hover{
+  color:var(--sys-graphite-accent-hovered, #383838);
+}
+
+.hovered::after{
+  content:"";
+  position:absolute;
+  bottom:-20px;
+  left:0;
+  width:100%;
+  height:2px;
+  opacity:0;
+  background:var(--sys-primary-accent-default, #26d07c);
+  transition:opacity 0.3s ease-in-out;
+}
+.hovered:hover::after{
+  opacity:1;
+}
+
+.active::after{
+  content:"";
+  position:absolute;
+  bottom:-20px;
+  left:0;
+  width:100%;
+  height:2px;
+  opacity:1;
+  background:var(--sys-primary-accent-default, #26d07c);
+}

package/dist/esm/helperComponents/LogoContent/LogoContent.d.ts

@@ -0,0 +1,7 @@
+import { AdditionalLogoText, Logo } from '../../components/SiteHeaderBasic/SiteHeaderBasic';
+export type LogoContentProps = {
+    additionalLogoText?: AdditionalLogoText;
+    logo: Logo;
+    isMobile?: boolean;
+};
+export declare function LogoContent({ additionalLogoText, isMobile, logo }: LogoContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/LogoContent/LogoContent.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloudFullLogoSVG } from '@sbercloud/uikit-product-icons';
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+export function LogoContent({ additionalLogoText, isMobile, logo }) {
+    const heightIconSizeProp = isMobile ? 102 : 130;
+    return (_jsxs("div", { className: styles.logoContentContainer, children: [_jsx("a", { href: logo.logoLink, onClick: logo.onClick, className: styles.logoLink, children: _jsx(CloudFullLogoSVG, { size: heightIconSizeProp, width: '60px' }) }), additionalLogoText && (_jsxs("div", { className: styles.subLogo, children: [_jsx(Typography, { className: styles.slash, size: 'm', purpose: 'title', family: 'sans', children: "/" }), _jsx("a", { href: additionalLogoText.link, onClick: additionalLogoText.onClick, className: styles.link, children: _jsx(Typography, { size: 'm', purpose: 'title', family: 'sans', children: additionalLogoText.text }) })] }))] }));
+}

package/dist/esm/helperComponents/LogoContent/index.d.ts

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

package/dist/esm/helperComponents/LogoContent/index.js

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

package/dist/esm/helperComponents/LogoContent/styles.module.css

@@ -0,0 +1,35 @@
+.logoContentContainer{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  gap:10px;
+}
+
+.link{
+  text-decoration:none;
+  display:flex;
+  align-items:center;
+  color:var(--sys-graphite-accent-default, #222222);
+}
+.link:hover{
+  color:var(--sys-primary-accent-hovered, #12bf6a);
+}
+.link:active{
+  color:var(--sys-primary-accent-pressed, #0ea55b);
+}
+
+.slash{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+
+.logoLink{
+  display:flex;
+  align-items:center;
+}
+
+.subLogo{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  gap:8px;
+}