@doyourjob/gravity-ui-page-constructor 5.31.142-dev.1 → 5.31.142-dev.3

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 (71) hide show
  1. package/build/cjs/blocks/Benefits/Benefits.css +76 -0
  2. package/build/cjs/blocks/Benefits/Benefits.d.ts +3 -0
  3. package/build/cjs/blocks/Benefits/Benefits.js +49 -0
  4. package/build/cjs/blocks/Benefits/BenefitsCard/BenefitsCard.css +31 -0
  5. package/build/cjs/blocks/Benefits/BenefitsCard/BenefitsCard.d.ts +3 -0
  6. package/build/cjs/blocks/Benefits/BenefitsCard/BenefitsCard.js +17 -0
  7. package/build/cjs/blocks/Benefits/BenefitsLabel/BenefitsLabel.css +30 -0
  8. package/build/cjs/blocks/Benefits/BenefitsLabel/BenefitsLabel.d.ts +6 -0
  9. package/build/cjs/blocks/Benefits/BenefitsLabel/BenefitsLabel.js +15 -0
  10. package/build/cjs/blocks/Benefits/schema.d.ts +95 -0
  11. package/build/cjs/blocks/Benefits/schema.js +51 -0
  12. package/build/cjs/blocks/Scroller/Scroller.css +40 -0
  13. package/build/cjs/blocks/Scroller/Scroller.d.ts +4 -0
  14. package/build/cjs/blocks/Scroller/Scroller.js +34 -0
  15. package/build/cjs/blocks/Scroller/schema.d.ts +33 -0
  16. package/build/cjs/blocks/Scroller/schema.js +22 -0
  17. package/build/cjs/blocks/index.d.ts +2 -0
  18. package/build/cjs/blocks/index.js +5 -1
  19. package/build/cjs/blocks/validators.d.ts +2 -0
  20. package/build/cjs/blocks/validators.js +2 -0
  21. package/build/cjs/components/CardBase/CardBase.css +2 -2
  22. package/build/cjs/constructor-items.d.ts +2 -0
  23. package/build/cjs/constructor-items.js +2 -0
  24. package/build/cjs/models/constructor-items/blocks.d.ts +44 -1
  25. package/build/cjs/models/constructor-items/blocks.js +2 -0
  26. package/build/cjs/schema/constants.d.ts +1 -1
  27. package/build/cjs/schema/constants.js +3 -1
  28. package/build/cjs/schema/validators/blocks.d.ts +2 -0
  29. package/build/cjs/schema/validators/blocks.js +2 -0
  30. package/build/cjs/sub-blocks/ImageCard/ImageCard.css +2 -2
  31. package/build/cjs/sub-blocks/Quote/Quote.css +1 -1
  32. package/build/cjs/text-transform/config.js +4 -0
  33. package/build/esm/blocks/Benefits/Benefits.css +76 -0
  34. package/build/esm/blocks/Benefits/Benefits.d.ts +4 -0
  35. package/build/esm/blocks/Benefits/Benefits.js +45 -0
  36. package/build/esm/blocks/Benefits/BenefitsCard/BenefitsCard.css +31 -0
  37. package/build/esm/blocks/Benefits/BenefitsCard/BenefitsCard.d.ts +4 -0
  38. package/build/esm/blocks/Benefits/BenefitsCard/BenefitsCard.js +13 -0
  39. package/build/esm/blocks/Benefits/BenefitsLabel/BenefitsLabel.css +30 -0
  40. package/build/esm/blocks/Benefits/BenefitsLabel/BenefitsLabel.d.ts +7 -0
  41. package/build/esm/blocks/Benefits/BenefitsLabel/BenefitsLabel.js +11 -0
  42. package/build/esm/blocks/Benefits/schema.d.ts +95 -0
  43. package/build/esm/blocks/Benefits/schema.js +48 -0
  44. package/build/esm/blocks/Scroller/Scroller.css +40 -0
  45. package/build/esm/blocks/Scroller/Scroller.d.ts +5 -0
  46. package/build/esm/blocks/Scroller/Scroller.js +30 -0
  47. package/build/esm/blocks/Scroller/schema.d.ts +33 -0
  48. package/build/esm/blocks/Scroller/schema.js +19 -0
  49. package/build/esm/blocks/index.d.ts +2 -0
  50. package/build/esm/blocks/index.js +2 -0
  51. package/build/esm/blocks/validators.d.ts +2 -0
  52. package/build/esm/blocks/validators.js +2 -0
  53. package/build/esm/components/CardBase/CardBase.css +2 -2
  54. package/build/esm/constructor-items.d.ts +2 -0
  55. package/build/esm/constructor-items.js +3 -1
  56. package/build/esm/models/constructor-items/blocks.d.ts +44 -1
  57. package/build/esm/models/constructor-items/blocks.js +2 -0
  58. package/build/esm/schema/constants.d.ts +1 -1
  59. package/build/esm/schema/constants.js +4 -2
  60. package/build/esm/schema/validators/blocks.d.ts +2 -0
  61. package/build/esm/schema/validators/blocks.js +2 -0
  62. package/build/esm/sub-blocks/ImageCard/ImageCard.css +2 -2
  63. package/build/esm/sub-blocks/Quote/Quote.css +1 -1
  64. package/build/esm/text-transform/config.js +4 -0
  65. package/package.json +1 -1
  66. package/schema/index.js +1 -1
  67. package/server/models/constructor-items/blocks.d.ts +44 -1
  68. package/server/models/constructor-items/blocks.js +2 -0
  69. package/server/text-transform/config.js +4 -0
  70. package/styles/mixins.scss +1 -1
  71. package/widget/index.js +1 -1
@@ -7,6 +7,8 @@ import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, CardBorder,
7
7
  import { BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels } from './sub-blocks';
8
8
  export declare enum BlockType {
9
9
  AdvantagesBlock = "advantages-block",
10
+ BenefitsBlock = "benefits-block",
11
+ ScrollerBlock = "scroller-block",
10
12
  PromoFeaturesBlock = "promo-features-block",
11
13
  ExtendedFeaturesBlock = "extended-features-block",
12
14
  SliderBlock = "slider-block",
@@ -290,6 +292,41 @@ export interface AdvantagesBlockProps {
290
292
  url: string;
291
293
  }[];
292
294
  }
295
+ export interface BenefitsBlockCard {
296
+ icon?: string;
297
+ title?: string;
298
+ text?: string;
299
+ }
300
+ export interface BenefitsBlockItemLabel {
301
+ title?: string;
302
+ text?: string;
303
+ }
304
+ export interface BenefitsBlockItemData {
305
+ images: string[];
306
+ columns: number[];
307
+ rows: number[];
308
+ }
309
+ export interface BenefitsBlockItem extends BenefitsBlockItemLabel, BenefitsBlockItemData {
310
+ }
311
+ export interface BenefitsBlockProps extends Themable {
312
+ titleOne?: string;
313
+ postTitleOne?: string;
314
+ textOne?: string;
315
+ titleTwo?: string;
316
+ postTitleTwo?: string;
317
+ textTwo?: string;
318
+ background?: string;
319
+ cards?: BenefitsBlockCard[];
320
+ items?: BenefitsBlockItem[];
321
+ accentColor?: string;
322
+ time?: number;
323
+ }
324
+ export interface ScrollerBlockProps extends Childable {
325
+ title?: string;
326
+ text?: string;
327
+ widths?: string[];
328
+ gapLong?: boolean;
329
+ }
293
330
  export interface CompaniesBlockProps extends Animatable {
294
331
  title: string;
295
332
  description?: string;
@@ -708,6 +745,12 @@ export type LogoRotatorBlockModel = {
708
745
  export type AdvantagesBlockModel = {
709
746
  type: BlockType.AdvantagesBlock;
710
747
  } & AdvantagesBlockProps;
748
+ export type BenefitsBlockModel = {
749
+ type: BlockType.BenefitsBlock;
750
+ } & BenefitsBlockProps;
751
+ export type ScrollerBlockModel = {
752
+ type: BlockType.ScrollerBlock;
753
+ } & ScrollerBlockProps;
711
754
  export type CompaniesBlockModel = {
712
755
  type: BlockType.CompaniesBlock;
713
756
  } & CompaniesBlockProps;
@@ -819,6 +862,6 @@ export type FormWallBlockModel = {
819
862
  export type SliderNewBlockModel = {
820
863
  type: BlockType.SliderNewBlock;
821
864
  } & SliderNewProps;
822
- type BlockModels = SliderBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | BannerBlockModel | LogoRotatorBlockModel | AdvantagesBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | TableBlockModel | HighlightTableBlockModel | MiniCaseBlockModel | TabsBlockModel | TabsHighlightTableBlockModel | TabLinksBlockModel | HeaderBlockModel | HeaderMinifyBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | BannerMinifyBlockModel | ShareBLockModel | FilterBlockModel | FilterCardLayoutBlockModel | FormBlockModel | MarqueeLinksBlockModel | SolutionsBlockModel | ServicesBlockModel | QuotesBlockModel | ReportsBlockModel | ReportsCardsBlockModel | ReportsSectionsBlockModel | LinkTableBlockModel | EventsFeedBlockModel | BenchmarkBlockModel | EventsSectionBlockModel | BlogFeedBlockModel | RelevantPostsBlockModel | RelevantReportsCardsBlockModel | RelevantReportsBlockModel | PressReleasesBlockModel | FormWallBlockModel | SliderNewBlockModel;
865
+ type BlockModels = SliderBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | BannerBlockModel | LogoRotatorBlockModel | AdvantagesBlockModel | BenefitsBlockModel | ScrollerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | TableBlockModel | HighlightTableBlockModel | MiniCaseBlockModel | TabsBlockModel | TabsHighlightTableBlockModel | TabLinksBlockModel | HeaderBlockModel | HeaderMinifyBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | BannerMinifyBlockModel | ShareBLockModel | FilterBlockModel | FilterCardLayoutBlockModel | FormBlockModel | MarqueeLinksBlockModel | SolutionsBlockModel | ServicesBlockModel | QuotesBlockModel | ReportsBlockModel | ReportsCardsBlockModel | ReportsSectionsBlockModel | LinkTableBlockModel | EventsFeedBlockModel | BenchmarkBlockModel | EventsSectionBlockModel | BlogFeedBlockModel | RelevantPostsBlockModel | RelevantReportsCardsBlockModel | RelevantReportsBlockModel | PressReleasesBlockModel | FormWallBlockModel | SliderNewBlockModel;
823
866
  export type Block = BlockModels & BlockBaseProps;
824
867
  export {};
@@ -4,6 +4,8 @@ exports.FormBlockDirection = exports.FormBlockDataTypes = exports.PCShareSocialN
4
4
  var BlockType;
5
5
  (function (BlockType) {
6
6
  BlockType["AdvantagesBlock"] = "advantages-block";
7
+ BlockType["BenefitsBlock"] = "benefits-block";
8
+ BlockType["ScrollerBlock"] = "scroller-block";
7
9
  BlockType["PromoFeaturesBlock"] = "promo-features-block";
8
10
  BlockType["ExtendedFeaturesBlock"] = "extended-features-block";
9
11
  BlockType["SliderBlock"] = "slider-block";
@@ -3721,7 +3721,7 @@ export declare const cardSchemas: {
3721
3721
  additionalProperties: boolean;
3722
3722
  properties: {
3723
3723
  type: {
3724
- type: string; /** @deprecated */
3724
+ type: string;
3725
3725
  enum: import("../models").CustomControlsType[];
3726
3726
  };
3727
3727
  muteButtonShown: {
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.constructorCardSchemaNames = exports.constructorBlockSchemaNames = exports.cardSchemas = exports.blockSchemas = void 0;
4
4
  const blocks_1 = require("./validators/blocks");
5
5
  const sub_blocks_1 = require("./validators/sub-blocks");
6
- exports.blockSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.Divider), blocks_1.ExtendedFeaturesBlock), blocks_1.PromoFeaturesBlock), blocks_1.AdvantagesBlock), blocks_1.SliderBlock), blocks_1.QuestionsBlock), blocks_1.HeaderBlock), blocks_1.HeaderMinifyBlock), blocks_1.BannerBlock), blocks_1.LogoRotatorBlock), blocks_1.CompaniesBlock), blocks_1.MediaBlock), blocks_1.MapBlock), blocks_1.InfoBlock), blocks_1.TableBlock), blocks_1.HighlightTableBlock), blocks_1.MiniCaseBlock), blocks_1.TabsBlock), blocks_1.TabsHighlightTableBlock), blocks_1.TabLinksBlock), blocks_1.HeaderSliderBlock), blocks_1.IconsBlock), blocks_1.CardLayoutBlock), blocks_1.ContentLayoutBlock), blocks_1.BannerMinifyBlock), blocks_1.ShareBlock), blocks_1.FilterBlock), blocks_1.FilterCardLayoutBlock), blocks_1.FormBlock), blocks_1.SliderNewBlock), blocks_1.MarqueeLinksBlock), blocks_1.SolutionsBlock), blocks_1.ServicesBlock), blocks_1.QuotesBlock), blocks_1.ReportsBlock), blocks_1.ReportsCardsBlock), blocks_1.ReportsSectionsBlock), blocks_1.LinkTableBlock), blocks_1.EventsFeedBlock), blocks_1.BenchmarkBlock), blocks_1.EventsSectionBlock), blocks_1.BlogFeedBlock), blocks_1.RelevantPostsBlock), blocks_1.RelevantReportsCardsBlock), blocks_1.RelevantReportsBlock), blocks_1.PressReleasesBlock), blocks_1.FormWallBlock);
6
+ exports.blockSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.Divider), blocks_1.ExtendedFeaturesBlock), blocks_1.PromoFeaturesBlock), blocks_1.AdvantagesBlock), blocks_1.BenefitsBlock), blocks_1.ScrollerBlock), blocks_1.SliderBlock), blocks_1.QuestionsBlock), blocks_1.HeaderBlock), blocks_1.HeaderMinifyBlock), blocks_1.BannerBlock), blocks_1.LogoRotatorBlock), blocks_1.CompaniesBlock), blocks_1.MediaBlock), blocks_1.MapBlock), blocks_1.InfoBlock), blocks_1.TableBlock), blocks_1.HighlightTableBlock), blocks_1.MiniCaseBlock), blocks_1.TabsBlock), blocks_1.TabsHighlightTableBlock), blocks_1.TabLinksBlock), blocks_1.HeaderSliderBlock), blocks_1.IconsBlock), blocks_1.CardLayoutBlock), blocks_1.ContentLayoutBlock), blocks_1.BannerMinifyBlock), blocks_1.ShareBlock), blocks_1.FilterBlock), blocks_1.FilterCardLayoutBlock), blocks_1.FormBlock), blocks_1.SliderNewBlock), blocks_1.MarqueeLinksBlock), blocks_1.SolutionsBlock), blocks_1.ServicesBlock), blocks_1.QuotesBlock), blocks_1.ReportsBlock), blocks_1.ReportsCardsBlock), blocks_1.ReportsSectionsBlock), blocks_1.LinkTableBlock), blocks_1.EventsFeedBlock), blocks_1.BenchmarkBlock), blocks_1.EventsSectionBlock), blocks_1.BlogFeedBlock), blocks_1.RelevantPostsBlock), blocks_1.RelevantReportsCardsBlock), blocks_1.RelevantReportsBlock), blocks_1.PressReleasesBlock), blocks_1.FormWallBlock);
7
7
  exports.cardSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.MediaCardBlock), blocks_1.BannerCard), sub_blocks_1.PriceDetailedBlock), sub_blocks_1.BackgroundCard), sub_blocks_1.Quote), sub_blocks_1.BasicCard), sub_blocks_1.PriceCardBlock), sub_blocks_1.ImageCard), sub_blocks_1.ContentLayoutCard), sub_blocks_1.Card), sub_blocks_1.PostCard), sub_blocks_1.FeedCard), sub_blocks_1.EventPersonCard), sub_blocks_1.AttachmentCard), sub_blocks_1.CaseStudyCard), sub_blocks_1.StoryCard);
8
8
  exports.constructorBlockSchemaNames = [
9
9
  'divider',
@@ -55,6 +55,8 @@ exports.constructorBlockSchemaNames = [
55
55
  'press-releases-block',
56
56
  'mini-case-block',
57
57
  'advantages-block',
58
+ 'benefits-block',
59
+ 'scroller-block',
58
60
  'benchmark-block',
59
61
  'banner-minify-block',
60
62
  ];
@@ -3,6 +3,8 @@ export * from '../../blocks/Companies/schema';
3
3
  export * from '../../blocks/ExtendedFeatures/schema';
4
4
  export * from '../../blocks/PromoFeaturesBlock/schema';
5
5
  export * from '../../blocks/Advantages/schema';
6
+ export * from '../../blocks/Benefits/schema';
7
+ export * from '../../blocks/Scroller/schema';
6
8
  export * from '../../blocks/Header/schema';
7
9
  export * from '../../blocks/Info/schema';
8
10
  export * from '../../blocks/Media/schema';
@@ -6,6 +6,8 @@ tslib_1.__exportStar(require("../../blocks/Companies/schema"), exports);
6
6
  tslib_1.__exportStar(require("../../blocks/ExtendedFeatures/schema"), exports);
7
7
  tslib_1.__exportStar(require("../../blocks/PromoFeaturesBlock/schema"), exports);
8
8
  tslib_1.__exportStar(require("../../blocks/Advantages/schema"), exports);
9
+ tslib_1.__exportStar(require("../../blocks/Benefits/schema"), exports);
10
+ tslib_1.__exportStar(require("../../blocks/Scroller/schema"), exports);
9
11
  tslib_1.__exportStar(require("../../blocks/Header/schema"), exports);
10
12
  tslib_1.__exportStar(require("../../blocks/Info/schema"), exports);
11
13
  tslib_1.__exportStar(require("../../blocks/Media/schema"), exports);
@@ -5,7 +5,7 @@ a.pc-image-card_border_shadow, .pc-image-card_border_shadow {
5
5
  /* use this for style redefinitions to awoid problems with
6
6
  unpredictable css rules order in build */
7
7
  .pc-image-card {
8
- min-height: 248px;
8
+ min-height: 240px;
9
9
  height: 100%;
10
10
  overflow-x: hidden;
11
11
  border-radius: var(--pc-border-radius);
@@ -84,7 +84,7 @@ unpredictable css rules order in build */
84
84
  a.pc-image-card {
85
85
  color: inherit;
86
86
  text-decoration: none;
87
- min-height: 248px;
87
+ min-height: 240px;
88
88
  height: 100%;
89
89
  overflow-x: hidden;
90
90
  border-radius: var(--pc-border-radius);
@@ -6,7 +6,7 @@
6
6
  /* use this for style redefinitions to awoid problems with
7
7
  unpredictable css rules order in build */
8
8
  .pc-quote {
9
- min-height: 248px;
9
+ min-height: 240px;
10
10
  height: 100%;
11
11
  overflow-x: hidden;
12
12
  border-radius: var(--pc-border-radius);
@@ -493,4 +493,8 @@ exports.config = {
493
493
  fields: ['title'],
494
494
  transformer: common_1.yfmTransformer,
495
495
  },
496
+ [models_1.BlockType.BenefitsBlock]: {
497
+ fields: ['textOne', 'textTwo'],
498
+ transformer: common_1.yfmTransformer,
499
+ },
496
500
  };
@@ -0,0 +1,76 @@
1
+ /* use this for style redefinitions to awoid problems with
2
+ unpredictable css rules order in build */
3
+ .pc-benefits-block {
4
+ position: relative;
5
+ z-index: 0;
6
+ --local-base-color: #001a2b;
7
+ --local-bg-color: #ffffff;
8
+ }
9
+ .pc-benefits-block_theme_dark {
10
+ --local-base-color: #ffffff;
11
+ --local-bg-color: #001a2b;
12
+ }
13
+ .pc-benefits-block__background {
14
+ position: absolute;
15
+ top: 0;
16
+ left: -27px;
17
+ right: -27px;
18
+ bottom: 0;
19
+ z-index: -1;
20
+ border-radius: 40px;
21
+ }
22
+ .pc-benefits-block__header {
23
+ padding-top: 48px;
24
+ margin-bottom: 32px;
25
+ display: flex;
26
+ flex-direction: column;
27
+ gap: 16px;
28
+ }
29
+ .pc-benefits-block__title {
30
+ color: var(--local-base-color);
31
+ font-size: 48px;
32
+ line-height: 52px;
33
+ font-weight: 600;
34
+ text-align: center;
35
+ }
36
+ .pc-benefits-block__title > span {
37
+ color: var(--local-accent-color);
38
+ }
39
+ .pc-benefits-block__text {
40
+ color: var(--local-base-color);
41
+ font-size: 24px;
42
+ line-height: 28px;
43
+ text-align: center;
44
+ opacity: 0.6;
45
+ }
46
+ .pc-benefits-block__text p {
47
+ margin: 0;
48
+ }
49
+ .pc-benefits-block__cards {
50
+ display: flex;
51
+ flex-wrap: wrap;
52
+ gap: 16px;
53
+ padding-bottom: 64px;
54
+ }
55
+ .pc-benefits-block__labels {
56
+ display: flex;
57
+ flex-wrap: wrap;
58
+ gap: 16px;
59
+ padding-top: 16px;
60
+ padding-bottom: 16px;
61
+ }
62
+ .pc-benefits-block__images {
63
+ display: grid;
64
+ grid-template-columns: repeat(12, 1fr);
65
+ grid-auto-rows: 300px;
66
+ gap: 12px;
67
+ padding-top: 12px;
68
+ padding-bottom: 27px;
69
+ }
70
+ .pc-benefits-block__image {
71
+ display: block;
72
+ width: 100%;
73
+ height: 100%;
74
+ object-fit: cover;
75
+ border-radius: 24px;
76
+ }
@@ -0,0 +1,4 @@
1
+ import { BenefitsBlockProps } from '../../models';
2
+ import './Benefits.css';
3
+ export declare const BenefitsBlock: (props: BenefitsBlockProps) => JSX.Element;
4
+ export default BenefitsBlock;
@@ -0,0 +1,45 @@
1
+ import React, { useEffect, useMemo, useState } from 'react';
2
+ import { HTML, ImageBase } from '../../components';
3
+ import { block } from '../../utils';
4
+ import BenefitsCard from './BenefitsCard/BenefitsCard';
5
+ import BenefitsLabel from './BenefitsLabel/BenefitsLabel';
6
+ import './Benefits.css';
7
+ const b = block('benefits-block');
8
+ export const BenefitsBlock = (props) => {
9
+ const { titleOne, postTitleOne, textOne, titleTwo, postTitleTwo, textTwo, background, cards, items, theme, accentColor, time, } = props;
10
+ const [activeIndex, setActiveIndex] = useState(0);
11
+ const data = items === null || items === void 0 ? void 0 : items[activeIndex];
12
+ useEffect(() => {
13
+ const interval = setInterval(() => {
14
+ if (items === null || items === void 0 ? void 0 : items.length) {
15
+ setActiveIndex((prev) => (prev + 1) % items.length);
16
+ }
17
+ }, time || 2000);
18
+ return () => clearInterval(interval);
19
+ }, [items === null || items === void 0 ? void 0 : items.length, time]);
20
+ const styles = useMemo(() => accentColor
21
+ ? {
22
+ ['--local-accent-color']: accentColor,
23
+ }
24
+ : {}, [accentColor]);
25
+ return (React.createElement("div", { className: b({ theme }), style: styles },
26
+ React.createElement("div", { className: b('background'), style: { background } }),
27
+ (titleOne || postTitleOne || textOne) && (React.createElement("div", { className: b('header') },
28
+ (titleOne || postTitleOne) && (React.createElement("div", { className: b('title') },
29
+ titleOne,
30
+ React.createElement("span", null, postTitleOne))),
31
+ textOne && React.createElement(HTML, { className: b('text') }, textOne))),
32
+ Boolean(cards === null || cards === void 0 ? void 0 : cards.length) && (React.createElement("div", { className: b('cards') }, cards === null || cards === void 0 ? void 0 : cards.map((card, index) => (React.createElement(BenefitsCard, Object.assign({ key: index }, card)))))),
33
+ (titleTwo || postTitleTwo || textTwo) && (React.createElement("div", { className: b('header') },
34
+ (titleTwo || postTitleTwo) && (React.createElement("div", { className: b('title') },
35
+ titleTwo,
36
+ React.createElement("span", null, postTitleTwo))),
37
+ textTwo && React.createElement(HTML, { className: b('text') }, textTwo))),
38
+ Boolean(items === null || items === void 0 ? void 0 : items.length) && (React.createElement("div", { className: b('labels') }, items === null || items === void 0 ? void 0 : items.map((item, index) => (React.createElement(BenefitsLabel, Object.assign({ key: index }, item, { active: index === activeIndex })))))),
39
+ data && (React.createElement("div", { className: b('images') }, data.images.map((image, index) => (React.createElement("div", { key: index, style: {
40
+ gridColumn: `span ${data.columns[index]}`,
41
+ gridRow: `span ${data.rows[index]}`,
42
+ } },
43
+ React.createElement(ImageBase, { className: b('image'), src: image }))))))));
44
+ };
45
+ export default BenefitsBlock;
@@ -0,0 +1,31 @@
1
+ /* use this for style redefinitions to awoid problems with
2
+ unpredictable css rules order in build */
3
+ .pc-benefits-card {
4
+ background-color: rgba(31, 47, 61, 0.3);
5
+ display: flex;
6
+ flex-direction: column;
7
+ gap: 8px;
8
+ padding: 32px;
9
+ min-height: 360px;
10
+ min-width: 270px;
11
+ border-radius: 24px;
12
+ flex: 1;
13
+ }
14
+ .pc-benefits-card__icon {
15
+ display: block;
16
+ width: 64px;
17
+ height: 64px;
18
+ object-fit: contain;
19
+ margin-bottom: 24px;
20
+ }
21
+ .pc-benefits-card__title {
22
+ font-size: var(--g-text-header-2-font-size, var(--pc-text-header-2-font-size));
23
+ line-height: var(--g-text-header-2-line-height, var(--pc-text-header-2-line-height));
24
+ color: var(--local-accent-color);
25
+ }
26
+ .pc-benefits-card__text {
27
+ font-size: var(--g-text-body-3-font-size, var(--pc-text-body-3-font-size));
28
+ line-height: var(--g-text-body-3-line-height, var(--pc-text-body-3-line-height));
29
+ color: var(--local-base-color);
30
+ opacity: 0.8;
31
+ }
@@ -0,0 +1,4 @@
1
+ import { BenefitsBlockCard } from '../../../models';
2
+ import './BenefitsCard.css';
3
+ export declare const BenefitsCard: (props: BenefitsBlockCard) => JSX.Element;
4
+ export default BenefitsCard;
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import { ImageBase } from '../../../components';
3
+ import { block } from '../../../utils';
4
+ import './BenefitsCard.css';
5
+ const b = block('benefits-card');
6
+ export const BenefitsCard = (props) => {
7
+ const { icon, title, text } = props;
8
+ return (React.createElement("div", { className: b() },
9
+ React.createElement(ImageBase, { className: b('icon'), src: icon }),
10
+ React.createElement("div", { className: b('title') }, title),
11
+ React.createElement("div", { className: b('text') }, text)));
12
+ };
13
+ export default BenefitsCard;
@@ -0,0 +1,30 @@
1
+ /* use this for style redefinitions to awoid problems with
2
+ unpredictable css rules order in build */
3
+ .pc-benefits-label {
4
+ background-color: rgba(31, 47, 61, 0.3);
5
+ display: flex;
6
+ flex-direction: column;
7
+ gap: 8px;
8
+ padding: 32px;
9
+ min-height: 158px;
10
+ min-width: 270px;
11
+ border-radius: 24px;
12
+ flex: 1;
13
+ border: 1px solid transparent;
14
+ }
15
+ .pc-benefits-label_active {
16
+ border: 1px solid var(--local-accent-color);
17
+ }
18
+ .pc-benefits-label__title {
19
+ font-size: var(--g-text-display-2-font-size, var(--pc-text-display-2-font-size));
20
+ line-height: var(--g-text-display-2-line-height, var(--pc-text-display-2-line-height));
21
+ color: var(--local-accent-color);
22
+ text-align: center;
23
+ }
24
+ .pc-benefits-label__text {
25
+ font-size: var(--g-text-body-3-font-size, var(--pc-text-body-3-font-size));
26
+ line-height: var(--g-text-body-3-line-height, var(--pc-text-body-3-line-height));
27
+ color: var(--local-base-color);
28
+ opacity: 0.8;
29
+ text-align: center;
30
+ }
@@ -0,0 +1,7 @@
1
+ import { BenefitsBlockItemLabel } from '../../../models';
2
+ import './BenefitsLabel.css';
3
+ type BenefitsLabelProps = BenefitsBlockItemLabel & {
4
+ active?: boolean;
5
+ };
6
+ export declare const BenefitsLabel: (props: BenefitsLabelProps) => JSX.Element;
7
+ export default BenefitsLabel;
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import { block } from '../../../utils';
3
+ import './BenefitsLabel.css';
4
+ const b = block('benefits-label');
5
+ export const BenefitsLabel = (props) => {
6
+ const { title, text, active } = props;
7
+ return (React.createElement("div", { className: b({ active }) },
8
+ React.createElement("div", { className: b('title') }, title),
9
+ React.createElement("div", { className: b('text') }, text)));
10
+ };
11
+ export default BenefitsLabel;
@@ -0,0 +1,95 @@
1
+ export declare const BenefitsBlock: {
2
+ 'benefits-block': {
3
+ additionalProperties: boolean;
4
+ required: boolean;
5
+ properties: {
6
+ titleOne: {
7
+ type: string;
8
+ };
9
+ postTitleOne: {
10
+ type: string;
11
+ };
12
+ textOne: {
13
+ type: string;
14
+ };
15
+ titleTwo: {
16
+ type: string;
17
+ };
18
+ postTitleTwo: {
19
+ type: string;
20
+ };
21
+ textTwo: {
22
+ type: string;
23
+ };
24
+ background: {
25
+ type: string;
26
+ };
27
+ cards: {
28
+ type: string;
29
+ items: {
30
+ additionalProperties: boolean;
31
+ required: string[];
32
+ properties: {
33
+ icon: {
34
+ type: string;
35
+ };
36
+ title: {
37
+ type: string;
38
+ };
39
+ text: {
40
+ type: string;
41
+ };
42
+ };
43
+ };
44
+ };
45
+ items: {
46
+ type: string;
47
+ items: {
48
+ type: string;
49
+ additionalProperties: boolean;
50
+ required: string[];
51
+ properties: {
52
+ title: {
53
+ type: string;
54
+ };
55
+ text: {
56
+ type: string;
57
+ };
58
+ images: {
59
+ type: string;
60
+ items: {
61
+ type: string;
62
+ };
63
+ };
64
+ columns: {
65
+ type: string;
66
+ items: {
67
+ type: string;
68
+ };
69
+ };
70
+ rows: {
71
+ type: string;
72
+ items: {
73
+ type: string;
74
+ };
75
+ };
76
+ };
77
+ };
78
+ };
79
+ theme: {
80
+ type: string;
81
+ enum: string[];
82
+ };
83
+ accentColor: {
84
+ type: string;
85
+ };
86
+ time: {
87
+ type: string;
88
+ };
89
+ type: {};
90
+ when: {
91
+ type: string;
92
+ };
93
+ };
94
+ };
95
+ };
@@ -0,0 +1,48 @@
1
+ import { BaseProps, ThemeProps } from '../../schema/validators/common';
2
+ export const BenefitsBlock = {
3
+ 'benefits-block': {
4
+ additionalProperties: false,
5
+ required: false,
6
+ properties: Object.assign(Object.assign({}, BaseProps), { titleOne: { type: 'string' }, postTitleOne: { type: 'string' }, textOne: { type: 'string' }, titleTwo: { type: 'string' }, postTitleTwo: { type: 'string' }, textTwo: { type: 'string' }, background: { type: 'string' }, cards: {
7
+ type: 'array',
8
+ items: {
9
+ additionalProperties: false,
10
+ required: ['icon', 'title', 'text'],
11
+ properties: {
12
+ icon: { type: 'string' },
13
+ title: { type: 'string' },
14
+ text: { type: 'string' },
15
+ },
16
+ },
17
+ }, items: {
18
+ type: 'array',
19
+ items: {
20
+ type: 'object',
21
+ additionalProperties: false,
22
+ required: ['title', 'text'],
23
+ properties: {
24
+ title: { type: 'string' },
25
+ text: { type: 'string' },
26
+ images: {
27
+ type: 'array',
28
+ items: {
29
+ type: 'string',
30
+ },
31
+ },
32
+ columns: {
33
+ type: 'array',
34
+ items: {
35
+ type: 'number',
36
+ },
37
+ },
38
+ rows: {
39
+ type: 'array',
40
+ items: {
41
+ type: 'number',
42
+ },
43
+ },
44
+ },
45
+ },
46
+ }, theme: ThemeProps, accentColor: { type: 'string' }, time: { type: 'number' } }),
47
+ },
48
+ };
@@ -0,0 +1,40 @@
1
+ /* use this for style redefinitions to awoid problems with
2
+ unpredictable css rules order in build */
3
+ .pc-scroller-block__header {
4
+ margin-bottom: 72px;
5
+ }
6
+ .pc-scroller-block__title {
7
+ color: #001a2b;
8
+ font-size: 48px;
9
+ line-height: 52px;
10
+ font-weight: 600;
11
+ text-align: center;
12
+ }
13
+ .pc-scroller-block__text {
14
+ color: #001a2b;
15
+ margin-top: 16px;
16
+ font-size: 24px;
17
+ line-height: 28px;
18
+ text-align: center;
19
+ }
20
+ .pc-scroller-block__content {
21
+ position: relative;
22
+ gap: 16px;
23
+ display: flex;
24
+ flex-wrap: nowrap;
25
+ width: 100vw;
26
+ overflow: scroll;
27
+ -webkit-overflow-scrolling: touch;
28
+ scrollbar-width: none;
29
+ }
30
+ .pc-scroller-block__content::-webkit-scrollbar {
31
+ display: none;
32
+ }
33
+ .pc-scroller-block__content_gapLong {
34
+ gap: 48px;
35
+ }
36
+ .pc-scroller-block__item {
37
+ position: relative;
38
+ z-index: 1;
39
+ flex: none;
40
+ }
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import { ScrollerBlockProps } from '../../models';
3
+ import './Scroller.css';
4
+ export declare const ScrollerBlock: (props: React.PropsWithChildren<Omit<ScrollerBlockProps, 'children'>>) => JSX.Element;
5
+ export default ScrollerBlock;
@@ -0,0 +1,30 @@
1
+ import React, { useEffect, useRef } from 'react';
2
+ import { block } from '../../utils';
3
+ import './Scroller.css';
4
+ const b = block('scroller-block');
5
+ export const ScrollerBlock = (props) => {
6
+ const { title, text, widths, gapLong, children } = props;
7
+ const rootRef = useRef(null);
8
+ const contentRef = useRef(null);
9
+ useEffect(() => {
10
+ const updateSize = () => {
11
+ if (contentRef.current && rootRef.current) {
12
+ const space = (window.innerWidth - rootRef.current.clientWidth) / 2;
13
+ contentRef.current.style.setProperty('padding-left', `${space}px`);
14
+ contentRef.current.style.setProperty('padding-right', `${space}px`);
15
+ contentRef.current.style.setProperty('left', `${-space}px`);
16
+ }
17
+ };
18
+ updateSize();
19
+ window.addEventListener('resize', updateSize, { passive: true });
20
+ return () => {
21
+ window.removeEventListener('resize', updateSize);
22
+ };
23
+ }, []);
24
+ return (React.createElement("div", { className: b(), ref: rootRef },
25
+ (title || text) && (React.createElement("div", { className: b('header') },
26
+ title && React.createElement("div", { className: b('title') }, title),
27
+ text && React.createElement("div", { className: b('text') }, text))),
28
+ React.createElement("div", { className: b('content', { gapLong }), ref: contentRef }, React.Children.map(children, (child, index) => (React.createElement("div", { key: index, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || '100%' } }, child))))));
29
+ };
30
+ export default ScrollerBlock;