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

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

@@ -0,0 +1,191 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-resources-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: 1200px;
+  width: 100%;
+  border-radius: var(--pc-border-radius, 24px);
+  scrollbar-width: none;
+}
+
+.pc-addons-resources-popup::-webkit-scrollbar {
+  display: none;
+}
+
+.pc-addons-resources-popup__container {
+  padding: 0;
+  display: flex;
+}
+
+.pc-addons-resources-popup__wrap {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.pc-addons-resources-popup__wrap > div + div {
+  border-top: 1px solid #e4ebf0;
+}
+
+.pc-addons-resources-popup__group {
+  padding: 32px 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.pc-addons-resources-popup__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));
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.pc-addons-resources-popup__subtitle {
+  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));
+  font-weight: 500;
+  color: #9fb1bd;
+}
+
+.pc-addons-resources-popup__events {
+  width: 300px;
+  flex-shrink: 0;
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  background-color: #f2f6f9;
+  gap: 8px;
+}
+
+.pc-addons-resources-popup__events-title {
+  font-size: var(--g-text-body-3-font-size, var(--pc-text-body-3-font-size));
+  line-height: var(--g-text-body-3-line-height, var(--pc-text-body-3-line-height));
+  font-weight: 500;
+  color: #9fb1bd;
+}
+
+.pc-addons-resources-popup__banner {
+  background-color: #f2f6f9;
+  border-radius: 16px;
+  display: flex;
+  padding: 16px;
+  gap: 24px;
+}
+
+.pc-addons-resources-popup__banner-container-image {
+  width: 263px;
+  height: 148px;
+}
+
+.pc-addons-resources-popup__banner-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.pc-addons-resources-popup__banner-container-icon {
+  height: 20px;
+}
+
+.pc-addons-resources-popup__banner-icon {
+  display: block;
+  height: 100%;
+  object-fit: contain;
+}
+
+.pc-addons-resources-popup__banner-wrap {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.pc-addons-resources-popup__banner-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.pc-addons-resources-popup__banner-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));
+  font-weight: 500;
+}
+
+.pc-addons-resources-popup__banner-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));
+  font-weight: 500;
+  color: #9fb1bd;
+}
+
+.pc-addons-resources-popup__event-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: 16px;
+  border: 1px solid #e4ebf0;
+}
+
+.pc-addons-resources-popup__event-card-tag {
+  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));
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background-color: #ffffff;
+}
+
+.pc-addons-resources-popup__event-card-container-image {
+  width: 100%;
+  height: 150px;
+}
+
+.pc-addons-resources-popup__event-card-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.pc-addons-resources-popup__event-card-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pc-addons-resources-popup__event-card-content {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 16px;
+}
+
+.pc-addons-resources-popup__event-card-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));
+  font-weight: 500;
+}
+
+.pc-addons-resources-popup__event-card-date {
+  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));
+  font-weight: 500;
+  color: #9fb1bd;
+}
+
+.pc-addons-resources-popup__event-card-location {
+  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));
+  font-weight: 500;
+  color: #9fb1bd;
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ResourcesPopupData } from '../../models';
+import './ResourcesPopup.css';
+export declare const ResourcesPopup: ({ groups, banner, events }: ResourcesPopupData) => React.JSX.Element;

package/build/esm/components/NewHeader/components/ResourcesPopup/ResourcesPopup.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Col, Grid, GridColumnSize, Image, Row, getLinkProps, } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../utils/cn';
+import { PopupItem } from '../PopupItem/PopupItem';
+import './ResourcesPopup.css';
+const b = block('resources-popup');
+const EventCard = ({ tag, image, date, title, location }) => {
+    return (React.createElement("div", { className: b('event-card') },
+        React.createElement("div", { className: b('event-card-tag') }, tag),
+        React.createElement(Image, { className: b('event-card-image'), containerClassName: b('event-card-container-image'), src: image }),
+        React.createElement("div", { className: b('event-card-content') },
+            React.createElement("div", { className: b('event-card-wrap') },
+                React.createElement("div", { className: b('event-card-date') }, date),
+                React.createElement("div", { className: b('event-card-title') }, title)),
+            React.createElement("div", { className: b('event-card-location') }, location))));
+};
+export const ResourcesPopup = ({ groups, banner, events }) => (React.createElement(Grid, { className: b(), containerClass: b('container') },
+    React.createElement("div", { className: b('wrap') },
+        groups.map((group) => (React.createElement("div", { className: b('group'), key: group.title },
+            React.createElement(Row, null,
+                React.createElement(Col, { sizes: { [GridColumnSize.Md]: 8, [GridColumnSize.All]: 12 } },
+                    React.createElement("a", Object.assign({ href: group.url, className: b('title') }, getLinkProps(group.url)), group.title),
+                    React.createElement("div", { className: b('subtitle') }, group.subtitle)),
+                React.createElement(Col, { sizes: { [GridColumnSize.Md]: 4, [GridColumnSize.All]: 12 } })),
+            React.createElement(Row, null, group.items.map((item) => (React.createElement(PopupItem, Object.assign({ key: item.title }, item)))))))),
+        banner && (React.createElement("div", { className: b('group') },
+            React.createElement(Row, null,
+                React.createElement(Col, null,
+                    React.createElement("a", Object.assign({ href: banner.url, className: b('banner') }, getLinkProps(banner.url)),
+                        React.createElement(Image, { className: b('banner-image'), containerClassName: b('banner-container-image'), src: banner.image }),
+                        React.createElement("div", { className: b('banner-wrap') },
+                            React.createElement(Image, { className: b('banner-icon'), containerClassName: b('banner-container-icon'), src: banner.icon }),
+                            React.createElement("div", { className: b('banner-content') },
+                                React.createElement("div", { className: b('banner-title') }, banner.title),
+                                React.createElement("div", { className: b('banner-description') }, banner.description))))))))),
+    events && (React.createElement("div", { className: b('events') },
+        React.createElement("div", { className: b('events-title') }, events.title),
+        events.items.map((event) => (React.createElement(EventCard, Object.assign({ key: event.title }, event))))))));

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

@@ -0,0 +1,49 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-solutions-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: 1200px;
+  width: 100%;
+  border-radius: var(--pc-border-radius, 24px);
+  scrollbar-width: none;
+}
+
+.pc-addons-solutions-popup::-webkit-scrollbar {
+  display: none;
+}
+
+.pc-addons-solutions-popup__container {
+  padding: 0;
+}
+
+.pc-addons-solutions-popup > div + div {
+  border-top: 1px solid #e4ebf0;
+}
+
+.pc-addons-solutions-popup__wrap {
+  padding: 24px;
+  gap: 24px;
+  display: flex;
+  flex-direction: column;
+}
+
+.pc-addons-solutions-popup__head {
+  display: flex;
+  gap: 24px;
+}
+
+.pc-addons-solutions-popup__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));
+  font-weight: 600;
+}
+
+.pc-addons-solutions-popup__subtitle {
+  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));
+  font-weight: 700;
+  color: #e0e0e0;
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SolutionsPopupData } from '../../models';
+import './SolutionsPopup.css';
+export declare const SolutionsPopup: ({ sections }: SolutionsPopupData) => React.JSX.Element;

package/build/esm/components/NewHeader/components/SolutionsPopup/SolutionsPopup.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Col, Grid, GridColumnSize, Row } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../utils/cn';
+import { PopupItem } from '../PopupItem/PopupItem';
+import './SolutionsPopup.css';
+const b = block('solutions-popup');
+export const SolutionsPopup = ({ sections }) => (React.createElement(Grid, { className: b(), containerClass: b('container') }, sections.map((section) => (React.createElement(Row, { key: section.title },
+    React.createElement(Col, { className: b('wrap') },
+        React.createElement(Row, null,
+            React.createElement(Col, { className: b('head') },
+                React.createElement("div", { className: b('title') }, section.title),
+                React.createElement("div", { className: b('subtitle') }, section.subtitle))),
+        React.createElement(Row, null, section.items.map((item) => (React.createElement(PopupItem, Object.assign({ key: item.title }, item, { hover: true, sizes: {
+                [GridColumnSize.Md]: 4,
+                [GridColumnSize.All]: 12,
+            } })))))))))));

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

@@ -0,0 +1,21 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-navigation-tag {
+  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
+  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
+  display: inline-block;
+  padding: 0 8px;
+  border-radius: 2px;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 4px;
+  text-transform: capitalize;
+}
+
+.pc-addons-navigation-tag_size_s {
+  font-size: var(--g-text-caption-2-font-size, var(--pc-text-caption-2-font-size));
+  line-height: var(--g-text-caption-2-line-height, var(--pc-text-caption-2-line-height));
+  padding: 0 4px;
+  height: 16px;
+  line-height: 16px;
+}

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

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

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { block } from '../../../../utils/cn';
+import { NavigationTagColor } from '../../models';
+import './Tag.css';
+const b = block('navigation-tag');
+const getColor = (color) => {
+    switch (color) {
+        case NavigationTagColor.Yellow:
+            return 'var(--pc-addons-navigation-color-tag-yellow)';
+        case NavigationTagColor.Blue:
+            return 'var(--pc-addons-navigation-color-tag-blue)';
+        case NavigationTagColor.Green:
+            return 'var(--pc-addons-navigation-color-tag-green)';
+        default:
+            return color;
+    }
+};
+export const NavigationTag = ({ text, color = NavigationTagColor.Yellow, textColor, className, size = 'm', }) => (React.createElement("div", { className: b({ size }, className), style: { backgroundColor: getColor(color), color: textColor } }, text));

package/build/esm/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/esm/components/NewHeader/components/WhyPopup/WhyPopup.d.ts

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

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Col, Grid, GridColumnSize, Image, Row } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../utils/cn';
+import { PopupItem } from '../PopupItem/PopupItem';
+import './WhyPopup.css';
+const b = block('why-popup');
+export const WhyPopup = ({ groups, card }) => (React.createElement(Grid, { className: b(), containerClass: b('container') },
+    React.createElement("div", { className: b('wrap') }, groups.map((group) => (React.createElement("div", { className: b('group'), key: group.title },
+        React.createElement(Row, null,
+            React.createElement(Col, null,
+                React.createElement("div", { className: b('title') }, group.title))),
+        React.createElement(Row, null, group.items.map((item) => (React.createElement(PopupItem, Object.assign({ key: item.title }, item, { sizes: { [GridColumnSize.All]: 12 } }))))))))),
+    card && (React.createElement("div", { className: b('card') },
+        React.createElement(Image, { className: b('card-image'), containerClassName: b('card-container-image'), src: card.image }),
+        React.createElement("div", { className: b('card-wrap') },
+            React.createElement("div", { className: b('card-title') }, card.title),
+            React.createElement("div", { className: b('card-description') }, card.description))))));

package/build/esm/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/esm/components/NewHeader/constants.js

@@ -0,0 +1,8 @@
+import { GridColumnSize } from '@doyourjob/gravity-ui-page-constructor';
+export const SWITCH_MENU_TAB_TIMEOUT = 200;
+export const NO_MENU_TAB_SELECTED = -1;
+export const DefaultCategorizedItemSizes = {
+    [GridColumnSize.Lg]: 4,
+    [GridColumnSize.Sm]: 6,
+    [GridColumnSize.All]: 12,
+};

package/build/esm/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/esm/components/NewHeader/contexts/route-change.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const RouteChangeHandlerContext = React.createContext(undefined);