@cloud-ru/uikit-product-site-header 1.7.1 → 1.7.2-preview-62eec7d2.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 +6 -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 +6 -0
  7. package/package.json +2 -2
  8. package/src/components/SiteHeaderBasic/SiteHeaderBasic.tsx +4 -0
  9. package/src/components/SiteHeaderBasic/styles.module.scss +6 -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,10 @@
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;
69
75
  }
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,10 @@
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;
69
75
  }
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-62eec7d2.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": "6a3f2d69e783850eacb38981133531afdfa94b3b"
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,9 @@
74
74
  margin: 0 auto;
75
75
  overflow: hidden;
76
76
  }
77
+
78
+ .afterHeaderContentContainer {
79
+ display: flex;
80
+ width: 100%;
81
+ height: 32px;
82
+ }