@cloud-ru/uikit-product-site-header 0.5.5 → 0.6.1

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.6.1 (2025-12-04)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-site-layout@0.4.0](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-layout/CHANGELOG.md)
+
+
+
+
+
+# 0.6.0 (2025-12-03)
+
+
+### Features
+
+* **SITE-10319:** add new props appearance to site-header ([6e459d6](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/6e459d6f692bb50fe17fa6686ef3a6aeec039490))
+
+
+
+
+
 ## 0.5.5 (2025-12-03)
 
 ### Only dependencies have been changed

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

@@ -1,5 +1,6 @@
 import { MouseEvent, ReactNode } from 'react';
 import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+export type Appearance = 'neutral' | 'none';
 export type AdditionalLogoText = {
     /** Дополнительный текст Логотипа */
     text?: string;
@@ -25,6 +26,8 @@ export type HeaderProps = WithSupportProps<WithLayoutType<{
     maxWidth?: number;
     /** Флаг открытия мобильного меню */
     mobileMenuOpen: boolean;
+    /** Внешний вид */
+    appearance?: Appearance;
     /** Настройки Логотипа */
     logo: Logo;
     /** Функция изменения флаг открытия мобильного меню */
@@ -42,4 +45,4 @@ export type HeaderProps = WithSupportProps<WithLayoutType<{
     /** Нижний контент кнопок мобильной версии меню */
     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;
+export declare function SiteHeaderBasic({ className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance, logo, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/SiteHeaderBasic/SiteHeaderBasic.js

@@ -25,14 +25,14 @@ const hooks_1 = require("../../hooks");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const HEIGHT_SUBHEADER = 25;
 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"]);
+    var { className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance = 'none', logo } = _a, rest = __rest(_a, ["className", "maxWidth", "additionalLogoText", "middleContent", "rightContent", "mobileMenuContent", "subHeader", "fullWidthContent", "layoutType", "mobileConsultationButton", "mobileMenuOpen", "onSetMobileMenuOpen", "mainHeaderClassName", "appearance", "logo"]);
     const refHeader = (0, react_1.useRef)(null);
     const { showHeader, headerHeight } = (0, hooks_1.useHeaderPosition)(mobileMenuOpen, refHeader);
     const isMobileTabletView = layoutType === 'mobile' || layoutType === 'tablet';
     const isMobile = layoutType === 'mobile';
     return ((0, jsx_runtime_1.jsxs)(uikit_product_site_layout_1.Layout.Header, Object.assign({ style: {
             transform: `translateY(-${!showHeader ? headerHeight + HEIGHT_SUBHEADER : 0}px)`,
-        }, className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-attr": 'layout-header' }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [subHeader, (0, jsx_runtime_1.jsx)("div", { ref: refHeader, className: (0, classnames_1.default)(styles_module_scss_1.default.headerMaster, styles_module_scss_1.default.dividerHeader, mainHeaderClassName), "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headerPartsContainer, style: {
+        }, className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-attr": 'layout-header' }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [subHeader, (0, jsx_runtime_1.jsx)("div", { ref: refHeader, className: (0, classnames_1.default)(styles_module_scss_1.default.headerMaster, styles_module_scss_1.default.dividerHeader, mainHeaderClassName), "data-layout-type": layoutType, "data-appearance": appearance, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headerPartsContainer, style: {
                         maxWidth,
-                    }, children: fullWidthContent !== null && fullWidthContent !== void 0 ? fullWidthContent : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftPart, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(helperComponents_1.LogoContent, { additionalLogoText: additionalLogoText, isMobile: isMobile, logo: logo }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.middlePart, children: middleContent }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.rightPart, children: [rightContent, mobileMenuContent && isMobileTabletView && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(helperComponents_1.ButtonBurger, { mobileMenuOpen: mobileMenuOpen, onClick: () => onSetMobileMenuOpen(!mobileMenuOpen) }), (0, jsx_runtime_1.jsx)(helperComponents_1.MobileMenu, { mobileConsultationButton: mobileConsultationButton, mobileMenuContent: mobileMenuContent, mobileMenuOpen: mobileMenuOpen, onClickForCloseMobileMenu: () => onSetMobileMenuOpen(false) })] }))] })] })) }) })] })));
+                    }, children: fullWidthContent !== null && fullWidthContent !== void 0 ? fullWidthContent : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftPart, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(helperComponents_1.LogoContent, { additionalLogoText: additionalLogoText, isMobile: isMobile, logo: logo }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.middlePart, children: middleContent }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.rightPart, children: [rightContent, mobileMenuContent && isMobileTabletView && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(helperComponents_1.ButtonBurger, { appearance: appearance, mobileMenuOpen: mobileMenuOpen, onClick: () => onSetMobileMenuOpen(!mobileMenuOpen) }), (0, jsx_runtime_1.jsx)(helperComponents_1.MobileMenu, { mobileConsultationButton: mobileConsultationButton, mobileMenuContent: mobileMenuContent, mobileMenuOpen: mobileMenuOpen, onClickForCloseMobileMenu: () => onSetMobileMenuOpen(false) })] }))] })] })) }) })] })));
 }

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

@@ -9,6 +9,9 @@
   background:var(--sys-neutral-background1-level, #fdfdfd);
   padding:0 32px;
 }
+.headerMaster[data-appearance=neutral]{
+  background:var(--sys-neutral-background, #eeeff3);
+}
 .headerMaster[data-layout-type=mobile]{
   padding:0 16px;
 }

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

@@ -1,6 +1,8 @@
+import { Appearance } from '../../components/SiteHeaderBasic';
 type ButtonBurgerProps = {
+    appearance?: Appearance;
     mobileMenuOpen: boolean;
     onClick: () => void;
 };
-export declare function ButtonBurger({ mobileMenuOpen, onClick }: ButtonBurgerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonBurger({ mobileMenuOpen, onClick, appearance }: ButtonBurgerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/helperComponents/ButtonBurger/ButtonBurger.js

@@ -5,8 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonBurger = ButtonBurger;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_button_predefined_1 = require("@cloud-ru/uikit-product-button-predefined");
 const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function ButtonBurger({ mobileMenuOpen, onClick }) {
-    return ((0, jsx_runtime_1.jsx)("button", { className: styles_module_scss_1.default.buttonBurger, onClick: onClick, children: mobileMenuOpen ? (0, jsx_runtime_1.jsx)(uikit_product_icons_1.CloseSVG, {}) : (0, jsx_runtime_1.jsx)(uikit_product_icons_1.BurgerSVG, {}) }));
+function ButtonBurger({ mobileMenuOpen, onClick, appearance }) {
+    const icon = mobileMenuOpen ? (0, jsx_runtime_1.jsx)(uikit_product_icons_1.CloseSVG, {}) : (0, jsx_runtime_1.jsx)(uikit_product_icons_1.BurgerSVG, {});
+    if (appearance === 'neutral') {
+        return (0, jsx_runtime_1.jsx)(uikit_product_button_predefined_1.ButtonPromoOutline, { icon: icon, size: 's', appearance: 'secondary' });
+    }
+    return ((0, jsx_runtime_1.jsx)("button", { className: styles_module_scss_1.default.buttonBurger, onClick: onClick, children: icon }));
 }

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

@@ -1,4 +1,4 @@
-import { AdditionalLogoText, Logo } from '../../components/SiteHeaderBasic/SiteHeaderBasic';
+import { AdditionalLogoText, Logo } from '../../components/SiteHeaderBasic';
 export type LogoContentProps = {
     additionalLogoText?: AdditionalLogoText;
     logo: Logo;

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

@@ -1,5 +1,6 @@
 import { MouseEvent, ReactNode } from 'react';
 import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+export type Appearance = 'neutral' | 'none';
 export type AdditionalLogoText = {
     /** Дополнительный текст Логотипа */
     text?: string;
@@ -25,6 +26,8 @@ export type HeaderProps = WithSupportProps<WithLayoutType<{
     maxWidth?: number;
     /** Флаг открытия мобильного меню */
     mobileMenuOpen: boolean;
+    /** Внешний вид */
+    appearance?: Appearance;
     /** Настройки Логотипа */
     logo: Logo;
     /** Функция изменения флаг открытия мобильного меню */
@@ -42,4 +45,4 @@ export type HeaderProps = WithSupportProps<WithLayoutType<{
     /** Нижний контент кнопок мобильной версии меню */
     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;
+export declare function SiteHeaderBasic({ className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance, logo, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -19,14 +19,14 @@ 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"]);
+    var { className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance = 'none', logo } = _a, rest = __rest(_a, ["className", "maxWidth", "additionalLogoText", "middleContent", "rightContent", "mobileMenuContent", "subHeader", "fullWidthContent", "layoutType", "mobileConsultationButton", "mobileMenuOpen", "onSetMobileMenuOpen", "mainHeaderClassName", "appearance", "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: {
+        }, 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, "data-appearance": appearance, 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) })] }))] })] })) }) })] })));
+                    }, 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, { appearance: appearance, mobileMenuOpen: mobileMenuOpen, onClick: () => onSetMobileMenuOpen(!mobileMenuOpen) }), _jsx(MobileMenu, { mobileConsultationButton: mobileConsultationButton, mobileMenuContent: mobileMenuContent, mobileMenuOpen: mobileMenuOpen, onClickForCloseMobileMenu: () => onSetMobileMenuOpen(false) })] }))] })] })) }) })] })));
 }

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

@@ -9,6 +9,9 @@
   background:var(--sys-neutral-background1-level, #fdfdfd);
   padding:0 32px;
 }
+.headerMaster[data-appearance=neutral]{
+  background:var(--sys-neutral-background, #eeeff3);
+}
 .headerMaster[data-layout-type=mobile]{
   padding:0 16px;
 }

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

@@ -1,6 +1,8 @@
+import { Appearance } from '../../components/SiteHeaderBasic';
 type ButtonBurgerProps = {
+    appearance?: Appearance;
     mobileMenuOpen: boolean;
     onClick: () => void;
 };
-export declare function ButtonBurger({ mobileMenuOpen, onClick }: ButtonBurgerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonBurger({ mobileMenuOpen, onClick, appearance }: ButtonBurgerProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ButtonPromoOutline } from '@cloud-ru/uikit-product-button-predefined';
 import { BurgerSVG, CloseSVG } from '@cloud-ru/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, {}) }));
+export function ButtonBurger({ mobileMenuOpen, onClick, appearance }) {
+    const icon = mobileMenuOpen ? _jsx(CloseSVG, {}) : _jsx(BurgerSVG, {});
+    if (appearance === 'neutral') {
+        return _jsx(ButtonPromoOutline, { icon: icon, size: 's', appearance: 'secondary' });
+    }
+    return (_jsx("button", { className: styles.buttonBurger, onClick: onClick, children: icon }));
 }

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

@@ -1,4 +1,4 @@
-import { AdditionalLogoText, Logo } from '../../components/SiteHeaderBasic/SiteHeaderBasic';
+import { AdditionalLogoText, Logo } from '../../components/SiteHeaderBasic';
 export type LogoContentProps = {
     additionalLogoText?: AdditionalLogoText;
     logo: Logo;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-header",
   "title": "Siteheader",
-  "version": "0.5.5",
+  "version": "0.6.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,9 +36,10 @@
   },
   "scripts": {},
   "dependencies": {
+    "@cloud-ru/uikit-product-button-predefined": "0.7.10",
     "@cloud-ru/uikit-product-icons": "16.0.0",
     "@cloud-ru/uikit-product-mobile-modal": "0.9.25",
-    "@cloud-ru/uikit-product-site-layout": "0.3.0",
+    "@cloud-ru/uikit-product-site-layout": "0.4.0",
     "@cloud-ru/uikit-product-utils": "8.0.1",
     "@snack-uikit/alert": "0.16.17",
     "@snack-uikit/avatar": "0.8.15",
@@ -51,5 +52,5 @@
   "peerDependencies": {
     "@sbercloud/figma-tokens-web": "*"
   },
-  "gitHead": "97f32de112901b4523a7bf7a87bc64aaf21f6c67"
+  "gitHead": "14f18bff39619ba8f885fff42922458e7e0ee62c"
 }

package/src/components/SiteHeaderBasic/SiteHeaderBasic.tsx

@@ -8,6 +8,8 @@ import { ButtonBurger, LogoContent, MobileMenu } from '../../helperComponents';
 import { useHeaderPosition } from '../../hooks';
 import styles from './styles.module.scss';
 
+export type Appearance = 'neutral' | 'none';
+
 export type AdditionalLogoText = {
   /** Дополнительный текст Логотипа */
   text?: string;
@@ -36,6 +38,8 @@ export type HeaderProps = WithSupportProps<
     maxWidth?: number;
     /** Флаг открытия мобильного меню */
     mobileMenuOpen: boolean;
+    /** Внешний вид */
+    appearance?: Appearance;
     /** Настройки Логотипа */
     logo: Logo;
     /** Функция изменения флаг открытия мобильного меню */
@@ -71,6 +75,7 @@ export function SiteHeaderBasic({
   mobileMenuOpen,
   onSetMobileMenuOpen,
   mainHeaderClassName,
+  appearance = 'none',
   logo,
   ...rest
 }: HeaderProps) {
@@ -94,6 +99,7 @@ export function SiteHeaderBasic({
         ref={refHeader}
         className={cn(styles.headerMaster, styles.dividerHeader, mainHeaderClassName)}
         data-layout-type={layoutType}
+        data-appearance={appearance}
       >
         <div
           className={styles.headerPartsContainer}
@@ -112,6 +118,7 @@ export function SiteHeaderBasic({
                 {mobileMenuContent && isMobileTabletView && (
                   <>
                     <ButtonBurger
+                      appearance={appearance}
                       mobileMenuOpen={mobileMenuOpen}
                       onClick={() => onSetMobileMenuOpen(!mobileMenuOpen)}
                     />

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

@@ -13,6 +13,10 @@
   background: ste.$sys-neutral-background1-level;
   padding: 0 32px;
 
+  &[data-appearance='neutral'] {
+    background: ste.$sys-neutral-background;
+  }
+
   &[data-layout-type='mobile'] {
     padding: 0 16px;
   }

package/src/helperComponents/ButtonBurger/ButtonBurger.tsx

@@ -1,16 +1,25 @@
+import { ButtonPromoOutline } from '@cloud-ru/uikit-product-button-predefined';
 import { BurgerSVG, CloseSVG } from '@cloud-ru/uikit-product-icons';
 
+import { Appearance } from '../../components/SiteHeaderBasic';
 import styles from './styles.module.scss';
 
 type ButtonBurgerProps = {
+  appearance?: Appearance;
   mobileMenuOpen: boolean;
   onClick: () => void;
 };
 
-export function ButtonBurger({ mobileMenuOpen, onClick }: ButtonBurgerProps) {
+export function ButtonBurger({ mobileMenuOpen, onClick, appearance }: ButtonBurgerProps) {
+  const icon = mobileMenuOpen ? <CloseSVG /> : <BurgerSVG />;
+
+  if (appearance === 'neutral') {
+    return <ButtonPromoOutline icon={icon} size='s' appearance='secondary' />;
+  }
+
   return (
     <button className={styles.buttonBurger} onClick={onClick}>
-      {mobileMenuOpen ? <CloseSVG /> : <BurgerSVG />}
+      {icon}
     </button>
   );
 }

package/src/helperComponents/LogoContent/LogoContent.tsx

@@ -1,7 +1,7 @@
 import { CloudFullLogoSVG } from '@cloud-ru/uikit-product-icons';
 import { Typography } from '@snack-uikit/typography';
 
-import { AdditionalLogoText, Logo } from '../../components/SiteHeaderBasic/SiteHeaderBasic';
+import { AdditionalLogoText, Logo } from '../../components/SiteHeaderBasic';
 import styles from './styles.module.scss';
 
 export type LogoContentProps = {