@doyourjob/gravity-ui-page-constructor-addons 2.1.24 → 2.1.25-dev.0

package/build/cjs/components/NewHeader/components/Tag/Tag.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ClassNameProps } from '@doyourjob/gravity-ui-page-constructor';
+import { NavigationTag as NavigationTagModel } from '../../models';
+export interface NavigationTagProps extends NavigationTagModel, ClassNameProps {
+}
+export declare const NavigationTag: ({ text, color, textColor, className, size, }: NavigationTagProps) => React.JSX.Element;

package/build/cjs/components/NewHeader/components/Tag/Tag.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationTag = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const cn_1 = require("../../../../utils/cn");
+const models_1 = require("../../models");
+const b = (0, cn_1.block)('navigation-tag');
+const getColor = (color) => {
+    switch (color) {
+        case models_1.NavigationTagColor.Yellow:
+            return 'var(--pc-addons-navigation-color-tag-yellow)';
+        case models_1.NavigationTagColor.Blue:
+            return 'var(--pc-addons-navigation-color-tag-blue)';
+        case models_1.NavigationTagColor.Green:
+            return 'var(--pc-addons-navigation-color-tag-green)';
+        default:
+            return color;
+    }
+};
+const NavigationTag = ({ text, color = models_1.NavigationTagColor.Yellow, textColor, className, size = 'm', }) => (react_1.default.createElement("div", { className: b({ size }, className), style: { backgroundColor: getColor(color), color: textColor } }, text));
+exports.NavigationTag = NavigationTag;

package/build/cjs/components/NewHeader/components/WhyPopup/WhyPopup.css

@@ -0,0 +1,81 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-why-popup {
+  background: var(--g-color-base-float);
+  box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
+  max-height: calc(100vh - 64px - 64px);
+  overflow: auto;
+  max-width: 900px;
+  width: 100%;
+  border-radius: var(--pc-border-radius, 24px);
+  scrollbar-width: none;
+}
+
+.pc-addons-why-popup::-webkit-scrollbar {
+  display: none;
+}
+
+.pc-addons-why-popup__container {
+  padding: 0;
+  display: flex;
+}
+
+.pc-addons-why-popup__wrap {
+  padding: 20px;
+  display: flex;
+  gap: 16px;
+  flex: 1;
+}
+
+.pc-addons-why-popup__group {
+  flex: 1;
+}
+
+.pc-addons-why-popup__title {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  padding: 12px;
+  font-weight: 500;
+  color: #9fb1bd;
+}
+
+.pc-addons-why-popup__card {
+  font-weight: 500;
+  width: 300px;
+  flex-shrink: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: #f2f6f9;
+}
+
+.pc-addons-why-popup__card-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 24px;
+  gap: 20px;
+}
+
+.pc-addons-why-popup__card-title {
+  font-size: var(--g-text-header-1-font-size, var(--pc-text-header-1-font-size));
+  line-height: var(--g-text-header-1-line-height, var(--pc-text-header-1-line-height));
+  color: #9fb1bd;
+}
+
+.pc-addons-why-popup__card-description {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  color: #9fb1bd;
+}
+
+.pc-addons-why-popup__card-container-image {
+  width: 100%;
+}
+
+.pc-addons-why-popup__card-image {
+  width: 100%;
+  aspect-ratio: 300/244;
+  background-color: #99a5ae;
+  display: block;
+}

package/build/cjs/components/NewHeader/components/WhyPopup/WhyPopup.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WhyPopupData } from '../../models';
+export declare const WhyPopup: ({ groups, card }: WhyPopupData) => React.JSX.Element;

package/build/cjs/components/NewHeader/components/WhyPopup/WhyPopup.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WhyPopup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const cn_1 = require("../../../../utils/cn");
+const PopupItem_1 = require("../PopupItem/PopupItem");
+const b = (0, cn_1.block)('why-popup');
+const WhyPopup = ({ groups, card }) => (react_1.default.createElement(gravity_ui_page_constructor_1.Grid, { className: b(), containerClass: b('container') },
+    react_1.default.createElement("div", { className: b('wrap') }, groups.map((group) => (react_1.default.createElement("div", { className: b('group'), key: group.title },
+        react_1.default.createElement(gravity_ui_page_constructor_1.Row, null,
+            react_1.default.createElement(gravity_ui_page_constructor_1.Col, null,
+                react_1.default.createElement("div", { className: b('title') }, group.title))),
+        react_1.default.createElement(gravity_ui_page_constructor_1.Row, null, group.items.map((item) => (react_1.default.createElement(PopupItem_1.PopupItem, Object.assign({ key: item.title }, item, { sizes: { [gravity_ui_page_constructor_1.GridColumnSize.All]: 12 } }))))))))),
+    card && (react_1.default.createElement("div", { className: b('card') },
+        react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('card-image'), containerClassName: b('card-container-image'), src: card.image }),
+        react_1.default.createElement("div", { className: b('card-wrap') },
+            react_1.default.createElement("div", { className: b('card-title') }, card.title),
+            react_1.default.createElement("div", { className: b('card-description') }, card.description))))));
+exports.WhyPopup = WhyPopup;

package/build/cjs/components/NewHeader/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const SWITCH_MENU_TAB_TIMEOUT = 200;
+export declare const NO_MENU_TAB_SELECTED = -1;
+export declare const DefaultCategorizedItemSizes: {
+    lg: number;
+    sm: number;
+    all: number;
+};

package/build/cjs/components/NewHeader/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultCategorizedItemSizes = exports.NO_MENU_TAB_SELECTED = exports.SWITCH_MENU_TAB_TIMEOUT = void 0;
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+exports.SWITCH_MENU_TAB_TIMEOUT = 200;
+exports.NO_MENU_TAB_SELECTED = -1;
+exports.DefaultCategorizedItemSizes = {
+    [gravity_ui_page_constructor_1.GridColumnSize.Lg]: 4,
+    [gravity_ui_page_constructor_1.GridColumnSize.Sm]: 6,
+    [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
+};

package/build/cjs/components/NewHeader/contexts/route-change.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export type RouteChangeHandlerContextProps = (handler: () => void) => void;
+export declare const RouteChangeHandlerContext: React.Context<RouteChangeHandlerContextProps | undefined>;

package/build/cjs/components/NewHeader/contexts/route-change.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouteChangeHandlerContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+exports.RouteChangeHandlerContext = react_1.default.createContext(undefined);

package/build/cjs/components/NewHeader/models.d.ts

@@ -0,0 +1,199 @@
+import type { ButtonProps, LinkProps } from '@doyourjob/gravity-ui-page-constructor';
+export declare enum NavigationItemType {
+    MediumPopup = "medium-popup",
+    ProductsPopup = "products-popup",
+    SolutionsPopup = "solutions-popup",
+    WhyPopup = "why-popup",
+    ResourcesPopup = "resources-popup",
+    CompanyPopup = "company-popup",
+    InvestorPopup = "investor-popup",
+    Link = "link"
+}
+export declare enum NavigationTagColor {
+    Green = "green",
+    Yellow = "yellow",
+    Blue = "blue"
+}
+export interface LogoData {
+    href?: string;
+    src?: string;
+    alt?: string;
+}
+export interface NavigationTag {
+    text: string;
+    color?: string;
+    textColor?: string;
+    size?: 's' | 'm';
+}
+export interface PopupItemData {
+    title: string;
+    url: string;
+    slug?: string;
+    description?: string;
+    icon?: string;
+    image?: string | null;
+    tag?: NavigationTag;
+}
+export interface CategoryGroupData {
+    title?: string;
+    items: PopupItemData[];
+    imageSize?: 's' | 'xm' | 'm';
+    url?: string;
+}
+export interface MediumPopupData {
+    groups: CategoryGroupData[];
+}
+export interface SpecialCardData {
+    title: string;
+    description: string;
+    image: string;
+}
+export interface RunCardData {
+    title: string;
+    description: string;
+    image: string;
+    border?: boolean;
+}
+export interface ProductsPopupSection {
+    title: string;
+    subtitle: string;
+    items?: PopupItemData[];
+    runCards?: RunCardData[];
+}
+export interface ProductsPopupData {
+    sections: ProductsPopupSection[];
+    poweredCard: SpecialCardData;
+}
+export interface SolutionsPopupSection {
+    title: string;
+    subtitle: string;
+    items: PopupItemData[];
+}
+export interface SolutionsPopupData {
+    sections: SolutionsPopupSection[];
+}
+export interface WhyPopupGroup {
+    title: string;
+    items: PopupItemData[];
+}
+export interface WhyPopupData {
+    groups: WhyPopupGroup[];
+    card: SpecialCardData;
+}
+export interface BannerData {
+    title: string;
+    description: string;
+    image: string;
+    icon: string;
+    url: string;
+}
+export interface EventCardData {
+    tag: string;
+    title: string;
+    date: string;
+    image: string;
+    location: string;
+}
+export interface ResourcesPopupGroup {
+    title: string;
+    subtitle: string;
+    url: string;
+    items: PopupItemData[];
+}
+export interface ResourcesPopupData {
+    groups: ResourcesPopupGroup[];
+    banner: BannerData;
+    events: {
+        title: string;
+        items: EventCardData[];
+    };
+}
+export interface CompanyPopupSection {
+    title: string;
+    items: PopupItemData[];
+}
+export interface CompanyPopupData {
+    sections: CompanyPopupSection[];
+}
+export interface StockData {
+    title: string;
+    price: string;
+    date: string;
+}
+export interface InvestorPopupData {
+    title: string;
+    subtitle: string;
+    url: string;
+    items: PopupItemData[];
+    stock: StockData;
+}
+export interface LoginItemData {
+    title: string;
+    subtitle: string;
+    url?: string;
+}
+export interface LoginPopupData {
+    text: string;
+    items: LoginItemData[];
+}
+export interface NavigationDefaultData {
+    title: string;
+}
+export interface NavigationLinkData extends NavigationDefaultData {
+    type: NavigationItemType.Link;
+    data: LinkProps;
+}
+export interface NavigationMediumPopupData extends NavigationDefaultData {
+    type: NavigationItemType.MediumPopup;
+    data: MediumPopupData;
+}
+export interface NavigationProductsPopupData extends NavigationDefaultData {
+    type: NavigationItemType.ProductsPopup;
+    data: ProductsPopupData;
+}
+export interface NavigationSolutionsPopupData extends NavigationDefaultData {
+    type: NavigationItemType.SolutionsPopup;
+    data: SolutionsPopupData;
+}
+export interface NavigationWhyPopupData extends NavigationDefaultData {
+    type: NavigationItemType.WhyPopup;
+    data: WhyPopupData;
+}
+export interface NavigationResourcesPopupData extends NavigationDefaultData {
+    type: NavigationItemType.ResourcesPopup;
+    data: ResourcesPopupData;
+}
+export interface NavigationCompanyPopupData extends NavigationDefaultData {
+    type: NavigationItemType.CompanyPopup;
+    data: CompanyPopupData;
+}
+export interface NavigationInvestorPopupData extends NavigationDefaultData {
+    type: NavigationItemType.InvestorPopup;
+    data: InvestorPopupData;
+}
+export type NavigationItemData = NavigationLinkData | NavigationMediumPopupData | NavigationProductsPopupData | NavigationSolutionsPopupData | NavigationWhyPopupData | NavigationResourcesPopupData | NavigationCompanyPopupData | NavigationInvestorPopupData;
+export interface MobileNavigationDefaultData {
+    title: string;
+}
+export interface MobileNavigationLinkData extends MobileNavigationDefaultData {
+    link: LinkProps;
+}
+export interface MobileNavigationGroupData extends MobileNavigationDefaultData {
+    data: {
+        title?: string;
+        items: {
+            title: string;
+            url: string;
+        }[];
+    }[];
+}
+export type MobileNavigationItemData = MobileNavigationLinkData | MobileNavigationGroupData;
+export interface NavigationData {
+    left: NavigationItemData[];
+    right: NavigationItemData[];
+    mobile: MobileNavigationItemData[];
+    login: LoginPopupData;
+    logo: LogoData;
+    buttons: ButtonProps[];
+}
+export type SetupRouteChangeHandler = (handler: () => void) => void;

package/build/cjs/components/NewHeader/models.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationTagColor = exports.NavigationItemType = void 0;
+var NavigationItemType;
+(function (NavigationItemType) {
+    NavigationItemType["MediumPopup"] = "medium-popup";
+    NavigationItemType["ProductsPopup"] = "products-popup";
+    NavigationItemType["SolutionsPopup"] = "solutions-popup";
+    NavigationItemType["WhyPopup"] = "why-popup";
+    NavigationItemType["ResourcesPopup"] = "resources-popup";
+    NavigationItemType["CompanyPopup"] = "company-popup";
+    NavigationItemType["InvestorPopup"] = "investor-popup";
+    NavigationItemType["Link"] = "link";
+})(NavigationItemType = exports.NavigationItemType || (exports.NavigationItemType = {}));
+var NavigationTagColor;
+(function (NavigationTagColor) {
+    NavigationTagColor["Green"] = "green";
+    NavigationTagColor["Yellow"] = "yellow";
+    NavigationTagColor["Blue"] = "blue";
+})(NavigationTagColor = exports.NavigationTagColor || (exports.NavigationTagColor = {}));

package/build/cjs/components/NewHeader/styles/variables.css

@@ -0,0 +1,5 @@
+.g-root {
+  --pc-addons-navigation-color-tag-yellow: var(--g-color-base-warning-light);
+  --pc-addons-navigation-color-tag-green: var(--g-color-base-positive-light);
+  --pc-addons-navigation-color-tag-blue: var(--g-color-base-info-light);
+}

package/build/cjs/components/index.d.ts

@@ -1,3 +1,4 @@
 export * from './EnrichedLink/EnrichedLink';
 export * from './Navigation';
 export * from './HeaderStripe/HeaderStripe';
+export * from './NewHeader/NewHeader';

package/build/cjs/components/index.js

@@ -4,3 +4,4 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./EnrichedLink/EnrichedLink"), exports);
 tslib_1.__exportStar(require("./Navigation"), exports);
 tslib_1.__exportStar(require("./HeaderStripe/HeaderStripe"), exports);
+tslib_1.__exportStar(require("./NewHeader/NewHeader"), exports);

package/build/esm/components/Navigation/components/Navigation/Navigation.d.ts

@@ -5,8 +5,8 @@ import './Navigation.css';
 interface NavigationProps {
     data: NavigationSectionData[];
     withBackground: boolean;
-    handleOpenPopup: () => void;
-    handleClosePopup: () => void;
+    handleOpenPopup?: () => void;
+    handleClosePopup?: () => void;
     headerRef?: RefObject<HTMLDivElement>;
     setupRouteChangeHandler?: SetupRouteChangeHandler;
 }

package/build/esm/components/Navigation/components/Navigation/NavigationItem/NavigationItem.d.ts

@@ -5,8 +5,8 @@ interface NavigationItemOwnProps {
     index: number;
     item: NavigationSectionData;
     isActive: boolean;
-    handleOpenPopup: () => void;
-    handleClosePopup: () => void;
+    handleOpenPopup?: () => void;
+    handleClosePopup?: () => void;
     handleActiveTab: (currentIndex: number) => void;
     children?: ReactNode;
     tooltipId?: string;

package/build/esm/components/Navigation/components/Navigation/NavigationItem/NavigationItem.js

@@ -21,12 +21,12 @@ export const NavigationItem = ({ item, isActive, handleActiveTab, handleOpenPopu
     const handleMouseEnter = useCallback(() => {
         handleActiveTab(index);
         if (isPopupExist) {
-            handleOpenPopup();
+            handleOpenPopup === null || handleOpenPopup === void 0 ? void 0 : handleOpenPopup();
         }
     }, [handleActiveTab, handleOpenPopup, index, isPopupExist]);
     const handleMouseLeave = useCallback(() => {
         if (isPopupExist) {
-            handleClosePopup();
+            handleClosePopup === null || handleClosePopup === void 0 ? void 0 : handleClosePopup();
         }
         handleActiveTab(NO_MENU_TAB_SELECTED);
     }, [handleActiveTab, handleClosePopup, isPopupExist]);

package/build/esm/components/Navigation/components/Navigation/NavigationItemsList/NavigationItemsList.js

@@ -2,5 +2,5 @@ import React from 'react';
 import { Row } from '@doyourjob/gravity-ui-page-constructor';
 import { NavigationPopupItem } from '../NavigationPopupItem/NavigationPopupItem';
 export const NavigationItemsList = ({ items, itemClassName, className, sizes, }) => {
-    return (React.createElement(Row, { className: className }, items.map((item, index) => (React.createElement(NavigationPopupItem, Object.assign({}, item, { sizes: sizes, className: itemClassName, key: item.slug + index, hover: true }))))));
+    return (React.createElement(Row, { className: className }, items.map((item, index) => (React.createElement(NavigationPopupItem, Object.assign({}, item, { sizes: sizes, className: itemClassName, key: `${item.slug}-${index}`, hover: true }))))));
 };

package/build/esm/components/NewHeader/NewHeader.css

@@ -0,0 +1,162 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-new-header {
+  --g-scrollbar-width: 8px;
+  --g-color-scroll-handle: var(--g-color-base-generic);
+  --g-color-scroll-handle-hover: var(--g-color-line-generic);
+  position: relative;
+  max-width: 1328px;
+  margin: 0 auto;
+  width: 100%;
+  z-index: 100;
+}
+
+.pc-addons-new-header__container {
+  width: 100%;
+  padding: 0 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64px;
+  background: var(--pc-transparent);
+  border-radius: var(--pc-border-radius, 24px);
+}
+
+.pc-addons-new-header__container_with-background {
+  background: var(--g-color-base-background);
+  box-shadow: 0 4px 24px var(--g-color-base-generic);
+}
+
+.pc-addons-new-header__left, .pc-addons-new-header__right {
+  display: flex;
+  align-items: center;
+}
+
+.pc-addons-new-header__left {
+  margin-right: 32px;
+}
+
+.pc-addons-new-header__right {
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.pc-addons-new-header__icons-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.pc-addons-new-header__buttons {
+  display: flex;
+  margin-left: 8px;
+}
+
+.pc-addons-new-header__icon {
+  color: var(--g-color-text-hint);
+  transition: color 0.2s;
+}
+
+.pc-addons-new-header__user {
+  margin-left: 12px;
+}
+
+@media (max-width: 768px) {
+  .pc-addons-new-header__user {
+    display: none;
+  }
+}
+.pc-addons-new-header__back {
+  position: relative;
+  left: 2px;
+}
+
+.pc-addons-new-header__back-icon {
+  color: var(--g-color-text-hint);
+}
+
+.pc-addons-new-header__back {
+  display: none;
+}
+
+.pc-addons-new-header__back:hover:before {
+  background: none;
+}
+
+.pc-addons-new-header__back:hover .pc-addons-new-header__icon {
+  color: var(--g-color-text-complementary);
+}
+
+@media (max-width: 768px) {
+  .pc-addons-new-header__navigation {
+    display: none;
+  }
+}
+.pc-addons-new-header__popup {
+  --yc-popup-border-width: 0;
+  --yc-popup-border-color: none;
+  border-radius: var(--pc-border-radius, 24px);
+  box-shadow: 0 3px 10px var(--g-color-base-generic-hover);
+  --yc-popover-max-width: 1296px;
+  --yc-popover-padding: 20px;
+  width: var(--yc-popover-max-width);
+  left: 0;
+  box-shadow: 0 4px 24px var(--g-color-base-generic-hover), 0 2px 8px var(--g-color-base-generic-hover);
+}
+
+.pc-addons-new-header__popup_with-background {
+  border-radius: 0 0 var(--pc-border-radius, 24px) var(--pc-border-radius, 24px);
+}
+
+.pc-addons-new-header__scroll-arrow {
+  height: 20px;
+  color: var(--g-color-text-hint);
+}
+
+.pc-addons-new-header__user-popup {
+  --yc-popup-border-width: 0;
+  --yc-popup-border-color: none;
+  border-radius: var(--g-border-radius-m);
+  box-shadow: 0 3px 10px var(--g-color-base-generic-hover);
+}
+
+@media (max-width: 1081px) {
+  .pc-addons-new-header__left {
+    margin-right: 0;
+  }
+}
+@media (min-width: 769px) {
+  .pc-addons-new-header__logo-img {
+    height: 30px;
+  }
+}
+@media (max-width: 768px) {
+  .pc-addons-new-header {
+    max-width: 100%;
+    padding: 16px 40px 16px 48px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .pc-addons-new-header__left {
+    margin-right: 12px;
+  }
+  .pc-addons-new-header__icons-container {
+    flex-direction: row-reverse;
+    justify-content: flex-start;
+  }
+  .pc-addons-new-header_search .pc-addons-new-header__logo {
+    display: none;
+  }
+  .pc-addons-new-header_search .pc-addons-new-header__back {
+    display: block;
+  }
+}
+@media (max-width: 576px) {
+  .pc-addons-new-header {
+    padding-left: 24px;
+    padding-right: 16px;
+  }
+  .pc-addons-new-header__container {
+    height: 64px;
+  }
+}

package/build/esm/components/NewHeader/NewHeader.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { ClassNameProps } from '@doyourjob/gravity-ui-page-constructor';
+import { NavigationData, SetupRouteChangeHandler } from './models';
+import './NewHeader.css';
+export declare const MOBILE_ICON_SIZE = 24;
+export interface NewHeaderProps extends ClassNameProps {
+    data: NavigationData;
+    renderSearch?: (props: {
+        onActiveToggle: (isActive: boolean) => void;
+    }) => ReactNode;
+    setupRouteChangeHandler?: SetupRouteChangeHandler;
+    scrollOffset?: number;
+}
+export declare const NewHeader: ({ data, setupRouteChangeHandler, renderSearch, className, scrollOffset, }: NewHeaderProps) => React.JSX.Element;