@cloud-ru/uikit-product-site-header 1.7.1 → 1.7.2-preview-59dede28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/components/SiteHeaderBasic/SiteHeaderBasic.d.ts +3 -1
  2. package/dist/cjs/components/SiteHeaderBasic/SiteHeaderBasic.js +2 -2
  3. package/dist/cjs/components/SiteHeaderBasic/styles.module.css +9 -0
  4. package/dist/esm/components/SiteHeaderBasic/SiteHeaderBasic.d.ts +3 -1
  5. package/dist/esm/components/SiteHeaderBasic/SiteHeaderBasic.js +2 -2
  6. package/dist/esm/components/SiteHeaderBasic/styles.module.css +9 -0
  7. package/package.json +2 -2
  8. package/src/components/SiteHeaderBasic/SiteHeaderBasic.tsx +4 -0
  9. package/src/components/SiteHeaderBasic/styles.module.scss +9 -0
package/dist/cjs/components/SiteHeaderBasic/SiteHeaderBasic.d.ts CHANGED
@@ -42,6 +42,8 @@ export type HeaderProps = WithSupportProps<WithLayoutType<{
42
42
  rightContent?: ReactNode;
43
43
  /** Контент сверху над хэдером, для инфостроки */
44
44
  subHeader?: ReactNode;
45
+ /** Контент снизу под хэдером */
46
+ afterHeaderContent?: ReactNode;
45
47
  /** Контент мобильной версии меню */
46
48
  mobileMenuContent?: ReactNode;
47
49
  /** Нижний контент кнопок мобильной версии меню */
@@ -49,4 +51,4 @@ export type HeaderProps = WithSupportProps<WithLayoutType<{
49
51
  /** className для левой части хедера */
50
52
  leftPartClassName?: string;
51
53
  }>>;
52
- export declare function SiteHeaderBasic({ className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance, logo, leftPartClassName, mobileModalBodyClassName, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
54
+ export declare function SiteHeaderBasic({ className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, afterHeaderContent, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance, logo, leftPartClassName, mobileModalBodyClassName, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
package/dist/cjs/components/SiteHeaderBasic/SiteHeaderBasic.js CHANGED
@@ -25,7 +25,7 @@ const hooks_1 = require("../../hooks");
25
25
  const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
26
26
  const HEIGHT_SUBHEADER = 25;
27
27
  function SiteHeaderBasic(_a) {
28
- var { className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance = 'none', logo, leftPartClassName, mobileModalBodyClassName } = _a, rest = __rest(_a, ["className", "maxWidth", "additionalLogoText", "middleContent", "rightContent", "mobileMenuContent", "subHeader", "fullWidthContent", "layoutType", "mobileConsultationButton", "mobileMenuOpen", "onSetMobileMenuOpen", "mainHeaderClassName", "appearance", "logo", "leftPartClassName", "mobileModalBodyClassName"]);
28
+ var { className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, afterHeaderContent, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance = 'none', logo, leftPartClassName, mobileModalBodyClassName } = _a, rest = __rest(_a, ["className", "maxWidth", "additionalLogoText", "middleContent", "rightContent", "mobileMenuContent", "subHeader", "afterHeaderContent", "fullWidthContent", "layoutType", "mobileConsultationButton", "mobileMenuOpen", "onSetMobileMenuOpen", "mainHeaderClassName", "appearance", "logo", "leftPartClassName", "mobileModalBodyClassName"]);
29
29
  const refHeader = (0, react_1.useRef)(null);
30
30
  const { showHeader, headerHeight } = (0, hooks_1.useHeaderPosition)(mobileMenuOpen, refHeader);
31
31
  const isMobileTabletView = layoutType === 'mobile' || layoutType === 'tablet';
@@ -34,5 +34,5 @@ function SiteHeaderBasic(_a) {
34
34
  transform: `translateY(-${!showHeader ? headerHeight + HEIGHT_SUBHEADER : 0}px)`,
35
35
  }, 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: {
36
36
  maxWidth,
37
- }, children: fullWidthContent !== null && fullWidthContent !== void 0 ? fullWidthContent : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.leftPart, leftPartClassName), "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, { mobileModalBodyClassName: mobileModalBodyClassName, mobileConsultationButton: mobileConsultationButton, mobileMenuContent: mobileMenuContent, mobileMenuOpen: mobileMenuOpen, onClickForCloseMobileMenu: () => onSetMobileMenuOpen(false) })] }))] })] })) }) })] })));
37
+ }, children: fullWidthContent !== null && fullWidthContent !== void 0 ? fullWidthContent : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.leftPart, leftPartClassName), "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, { mobileModalBodyClassName: mobileModalBodyClassName, mobileConsultationButton: mobileConsultationButton, mobileMenuContent: mobileMenuContent, mobileMenuOpen: mobileMenuOpen, onClickForCloseMobileMenu: () => onSetMobileMenuOpen(false) })] }))] })] })) }) }), afterHeaderContent && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.afterHeaderContentContainer, children: afterHeaderContent })] })));
38
38
  }
package/dist/cjs/components/SiteHeaderBasic/styles.module.css CHANGED
@@ -66,4 +66,13 @@
66
66
  box-sizing:border-box;
67
67
  margin:0 auto;
68
68
  overflow:hidden;
69
+ }
70
+
71
+ .afterHeaderContentContainer{
72
+ display:flex;
73
+ width:100%;
74
+ height:32px;
75
+ background:var(--sys-neutral-background1-level, #fdfdfd);
76
+ align-items:center;
77
+ padding:0 16px;
69
78
  }
package/dist/esm/components/SiteHeaderBasic/SiteHeaderBasic.d.ts CHANGED
@@ -42,6 +42,8 @@ export type HeaderProps = WithSupportProps<WithLayoutType<{
42
42
  rightContent?: ReactNode;
43
43
  /** Контент сверху над хэдером, для инфостроки */
44
44
  subHeader?: ReactNode;
45
+ /** Контент снизу под хэдером */
46
+ afterHeaderContent?: ReactNode;
45
47
  /** Контент мобильной версии меню */
46
48
  mobileMenuContent?: ReactNode;
47
49
  /** Нижний контент кнопок мобильной версии меню */
@@ -49,4 +51,4 @@ export type HeaderProps = WithSupportProps<WithLayoutType<{
49
51
  /** className для левой части хедера */
50
52
  leftPartClassName?: string;
51
53
  }>>;
52
- export declare function SiteHeaderBasic({ className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance, logo, leftPartClassName, mobileModalBodyClassName, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
54
+ export declare function SiteHeaderBasic({ className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, afterHeaderContent, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance, logo, leftPartClassName, mobileModalBodyClassName, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
package/dist/esm/components/SiteHeaderBasic/SiteHeaderBasic.js CHANGED
@@ -19,7 +19,7 @@ import { useHeaderPosition } from '../../hooks';
19
19
  import styles from './styles.module.css';
20
20
  const HEIGHT_SUBHEADER = 25;
21
21
  export function SiteHeaderBasic(_a) {
22
- var { className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance = 'none', logo, leftPartClassName, mobileModalBodyClassName } = _a, rest = __rest(_a, ["className", "maxWidth", "additionalLogoText", "middleContent", "rightContent", "mobileMenuContent", "subHeader", "fullWidthContent", "layoutType", "mobileConsultationButton", "mobileMenuOpen", "onSetMobileMenuOpen", "mainHeaderClassName", "appearance", "logo", "leftPartClassName", "mobileModalBodyClassName"]);
22
+ var { className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, afterHeaderContent, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance = 'none', logo, leftPartClassName, mobileModalBodyClassName } = _a, rest = __rest(_a, ["className", "maxWidth", "additionalLogoText", "middleContent", "rightContent", "mobileMenuContent", "subHeader", "afterHeaderContent", "fullWidthContent", "layoutType", "mobileConsultationButton", "mobileMenuOpen", "onSetMobileMenuOpen", "mainHeaderClassName", "appearance", "logo", "leftPartClassName", "mobileModalBodyClassName"]);
23
23
  const refHeader = useRef(null);
24
24
  const { showHeader, headerHeight } = useHeaderPosition(mobileMenuOpen, refHeader);
25
25
  const isMobileTabletView = layoutType === 'mobile' || layoutType === 'tablet';
@@ -28,5 +28,5 @@ export function SiteHeaderBasic(_a) {
28
28
  transform: `translateY(-${!showHeader ? headerHeight + HEIGHT_SUBHEADER : 0}px)`,
29
29
  }, 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: {
30
30
  maxWidth,
31
- }, children: fullWidthContent !== null && fullWidthContent !== void 0 ? fullWidthContent : (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(styles.leftPart, leftPartClassName), "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, { mobileModalBodyClassName: mobileModalBodyClassName, mobileConsultationButton: mobileConsultationButton, mobileMenuContent: mobileMenuContent, mobileMenuOpen: mobileMenuOpen, onClickForCloseMobileMenu: () => onSetMobileMenuOpen(false) })] }))] })] })) }) })] })));
31
+ }, children: fullWidthContent !== null && fullWidthContent !== void 0 ? fullWidthContent : (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(styles.leftPart, leftPartClassName), "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, { mobileModalBodyClassName: mobileModalBodyClassName, mobileConsultationButton: mobileConsultationButton, mobileMenuContent: mobileMenuContent, mobileMenuOpen: mobileMenuOpen, onClickForCloseMobileMenu: () => onSetMobileMenuOpen(false) })] }))] })] })) }) }), afterHeaderContent && _jsx("div", { className: styles.afterHeaderContentContainer, children: afterHeaderContent })] })));
32
32
  }
package/dist/esm/components/SiteHeaderBasic/styles.module.css CHANGED
@@ -66,4 +66,13 @@
66
66
  box-sizing:border-box;
67
67
  margin:0 auto;
68
68
  overflow:hidden;
69
+ }
70
+
71
+ .afterHeaderContentContainer{
72
+ display:flex;
73
+ width:100%;
74
+ height:32px;
75
+ background:var(--sys-neutral-background1-level, #fdfdfd);
76
+ align-items:center;
77
+ padding:0 16px;
69
78
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cloud-ru/uikit-product-site-header",
3
3
  "title": "Siteheader",
4
- "version": "1.7.1",
4
+ "version": "1.7.2-preview-59dede28.0",
5
5
  "sideEffects": [
6
6
  "*.css",
7
7
  "*.woff",
@@ -54,5 +54,5 @@
54
54
  "peerDependencies": {
55
55
  "@cloud-ru/figma-tokens-web": "*"
56
56
  },
57
- "gitHead": "4075376759ae1159670bc2dfd59aca3a9bf9de65"
57
+ "gitHead": "c0c7c019d99bcf42a3357be3de29eae86e0f132a"
58
58
  }
package/src/components/SiteHeaderBasic/SiteHeaderBasic.tsx CHANGED
@@ -54,6 +54,8 @@ export type HeaderProps = WithSupportProps<
54
54
  rightContent?: ReactNode;
55
55
  /** Контент сверху над хэдером, для инфостроки */
56
56
  subHeader?: ReactNode;
57
+ /** Контент снизу под хэдером */
58
+ afterHeaderContent?: ReactNode;
57
59
  /** Контент мобильной версии меню */
58
60
  mobileMenuContent?: ReactNode;
59
61
  /** Нижний контент кнопок мобильной версии меню */
@@ -73,6 +75,7 @@ export function SiteHeaderBasic({
73
75
  rightContent,
74
76
  mobileMenuContent,
75
77
  subHeader,
78
+ afterHeaderContent,
76
79
  fullWidthContent,
77
80
  layoutType,
78
81
  mobileConsultationButton,
@@ -141,6 +144,7 @@ export function SiteHeaderBasic({
141
144
  )}
142
145
  </div>
143
146
  </div>
147
+ {afterHeaderContent && <div className={styles.afterHeaderContentContainer}>{afterHeaderContent}</div>}
144
148
  </Layout.Header>
145
149
  );
146
150
  }
package/src/components/SiteHeaderBasic/styles.module.scss CHANGED
@@ -74,3 +74,12 @@
74
74
  margin: 0 auto;
75
75
  overflow: hidden;
76
76
  }
77
+
78
+ .afterHeaderContentContainer {
79
+ display: flex;
80
+ width: 100%;
81
+ height: 32px;
82
+ background: ste.$sys-neutral-background1-level;
83
+ align-items: center;
84
+ padding: 0 16px;
85
+ }