@doyourjob/gravity-ui-page-constructor 5.31.215 → 5.31.216

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.
@@ -4,22 +4,22 @@ unpredictable css rules order in build */
4
4
  display: flex;
5
5
  align-items: center;
6
6
  justify-content: center;
7
- padding: 16px 28px;
7
+ padding: 0 28px;
8
8
  border-radius: 16px;
9
9
  background: #001a2b;
10
10
  color: #ffffff;
11
11
  height: 61px;
12
- font-size: 24px;
13
- line-height: 24px;
12
+ font-size: var(--g-text-header-2-font-size, var(--pc-text-header-2-font-size));
13
+ line-height: var(--g-text-header-2-line-height, var(--pc-text-header-2-line-height));
14
14
  font-weight: 500;
15
- letter-spacing: 0.03em;
15
+ letter-spacing: 1%;
16
16
  text-decoration: none;
17
17
  transition: opacity 0.3s ease;
18
18
  }
19
- .pc-header-minify-button__icon {
20
- width: 24px;
21
- height: 24px;
22
- margin-right: 8px;
19
+ .pc-header-minify-button_outline {
20
+ background: transparent;
21
+ border: 2px solid #001a2b;
22
+ color: #001a2b;
23
23
  }
24
24
  @media (hover: hover) and (pointer: fine) {
25
25
  .pc-header-minify-button:hover {
@@ -7,11 +7,9 @@ const components_1 = require("../../../components");
7
7
  const utils_1 = require("../../../utils");
8
8
  const b = (0, utils_1.block)('header-minify-button');
9
9
  const Button = (props) => {
10
- const { url, icon, text } = props;
10
+ const { url, text, outline } = props;
11
11
  return (react_1.default.createElement(components_1.RouterLink, { href: url },
12
- react_1.default.createElement("a", { href: url, className: b('') },
13
- icon ? (react_1.default.createElement(components_1.ImageBase, { className: b('icon'), src: icon, alt: "", "aria-hidden": "true" })) : null,
14
- text)));
12
+ react_1.default.createElement("a", { href: url, className: b({ outline }) }, text)));
15
13
  };
16
14
  exports.Button = Button;
17
15
  exports.default = exports.Button;
@@ -1,45 +1,52 @@
1
1
  /* use this for style redefinitions to awoid problems with
2
2
  unpredictable css rules order in build */
3
3
  .pc-header-minify-block {
4
- display: flex;
5
- flex-direction: column;
6
- align-items: center;
7
4
  position: relative;
8
5
  z-index: 1;
9
6
  color: #001a2b;
10
- padding-top: 186px;
11
- padding-bottom: 186px;
12
- text-align: center;
7
+ }
8
+ .pc-header-minify-block_header-space {
9
+ padding-top: var(--header-height);
10
+ margin-top: calc(var(--header-height) * -1);
11
+ }
12
+ .pc-header-minify-block__video {
13
+ position: absolute;
14
+ inset: 0;
15
+ z-index: -1;
16
+ object-fit: cover;
17
+ width: 100%;
18
+ height: 100%;
19
+ }
20
+ .pc-header-minify-block__container {
21
+ padding-top: 256px;
22
+ padding-bottom: 155px;
13
23
  }
14
24
  .pc-header-minify-block__title {
15
- font-size: 128px;
16
- font-weight: 700;
17
- line-height: 102px;
25
+ font-size: var(--g-text-display-4-font-size, var(--pc-text-display-4-font-size));
26
+ line-height: var(--g-text-display-4-line-height, var(--pc-text-display-4-line-height));
18
27
  margin: 0;
19
28
  position: relative;
29
+ margin-bottom: 24px;
20
30
  }
21
- .pc-header-minify-block__title.pc-header-minify-block__title {
22
- letter-spacing: -0.014em;
23
- }
24
-
25
- @media (max-width: 769px) {
31
+ @media (max-width: 577px) {
26
32
  .pc-header-minify-block__title {
27
- font-size: 48px;
28
- line-height: 52px;
33
+ font-size: var(--g-text-display-2-font-size, var(--pc-text-display-2-font-size));
34
+ line-height: var(--g-text-display-2-line-height, var(--pc-text-display-2-line-height));
29
35
  }
30
36
  }
31
37
  .pc-header-minify-block__description {
32
- margin-top: 24px;
33
38
  position: relative;
39
+ margin-bottom: 32px;
34
40
  opacity: 0.8;
35
- max-width: 1024px;
36
41
  }
37
42
  .pc-header-minify-block__description .yfm {
38
43
  font-size: var(--g-text-header-2-font-size, var(--pc-text-header-2-font-size));
39
44
  line-height: var(--g-text-header-2-line-height, var(--pc-text-header-2-line-height));
40
- font-weight: 600;
45
+ font-weight: 500;
41
46
  }
42
47
  .pc-header-minify-block__buttons {
48
+ display: flex;
49
+ gap: 8px;
43
50
  position: relative;
44
- margin-top: 48px;
51
+ flex-wrap: wrap;
45
52
  }
@@ -2,24 +2,33 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.HeaderMinifyBlock = void 0;
4
4
  const tslib_1 = require("tslib");
5
- const react_1 = tslib_1.__importStar(require("react"));
5
+ const react_1 = tslib_1.__importDefault(require("react"));
6
6
  const components_1 = require("../../components");
7
- const utils_1 = require("../../utils");
7
+ const utils_1 = require("../../components/Media/Video/utils");
8
+ const grid_1 = require("../../grid");
9
+ const utils_2 = require("../../utils");
8
10
  const Button_1 = tslib_1.__importDefault(require("./Button/Button"));
9
- const b = (0, utils_1.block)('header-minify-block');
11
+ const b = (0, utils_2.block)('header-minify-block');
12
+ const colSizes = { all: 12, md: 8 };
10
13
  const modifiers = {
11
14
  constructor: true,
12
15
  };
13
16
  const HeaderMinifyBlock = (props) => {
14
- const { title, description, button, backgroundEffect } = props;
15
- const headerRef = (0, react_1.useRef)(null);
16
- return (react_1.default.createElement("header", { ref: headerRef, className: b() },
17
- backgroundEffect && backgroundEffect.firstSrc && backgroundEffect.secondSrc && (react_1.default.createElement(components_1.BackgroundEffect, Object.assign({}, backgroundEffect, { attachRef: headerRef }))),
18
- react_1.default.createElement("h1", { className: b('title') },
19
- react_1.default.createElement(components_1.HTML, null, title)),
20
- description && (react_1.default.createElement("div", { className: b('description') },
21
- react_1.default.createElement(components_1.YFMWrapper, { content: description, modifiers: modifiers }))),
22
- react_1.default.createElement("div", { className: b('buttons') }, button && react_1.default.createElement(Button_1.default, Object.assign({}, button)))));
17
+ const { title, description, buttons, video, headerSpace } = props;
18
+ return (react_1.default.createElement("header", { className: b({ ['header-space']: headerSpace }) },
19
+ video && (react_1.default.createElement("video", { disablePictureInPicture: true, playsInline: true,
20
+ // @ts-ignore
21
+ // eslint-disable-next-line react/no-unknown-property
22
+ pip: "false", autoPlay: true, loop: true, preload: "auto", muted: true, className: b('video') },
23
+ react_1.default.createElement("source", { src: video, type: (0, utils_1.parseVideoType)(video) }))),
24
+ react_1.default.createElement(grid_1.Grid, null,
25
+ react_1.default.createElement(grid_1.Row, { className: b('container') },
26
+ react_1.default.createElement(grid_1.Col, { sizes: colSizes },
27
+ react_1.default.createElement("h1", { className: b('title') },
28
+ react_1.default.createElement(components_1.HTML, null, title)),
29
+ description && (react_1.default.createElement("div", { className: b('description') },
30
+ react_1.default.createElement(components_1.YFMWrapper, { content: description, modifiers: modifiers }))),
31
+ (buttons === null || buttons === void 0 ? void 0 : buttons.length) ? (react_1.default.createElement("div", { className: b('buttons') }, buttons.map((button, index) => (react_1.default.createElement(Button_1.default, Object.assign({ key: index }, button)))))) : null)))));
23
32
  };
24
33
  exports.HeaderMinifyBlock = HeaderMinifyBlock;
25
34
  exports.default = exports.HeaderMinifyBlock;
@@ -8,34 +8,30 @@ export declare const HeaderMinifyProperties: {
8
8
  contentType: string;
9
9
  inputType: string;
10
10
  };
11
- button: {
11
+ buttons: {
12
12
  type: string;
13
- additionalProperties: boolean;
14
- required: string[];
15
- properties: {
16
- icon: {
17
- type: string;
18
- };
19
- text: {
20
- type: string;
21
- };
22
- url: {
23
- type: string;
13
+ items: {
14
+ type: string;
15
+ additionalProperties: boolean;
16
+ required: string[];
17
+ properties: {
18
+ text: {
19
+ type: string;
20
+ };
21
+ url: {
22
+ type: string;
23
+ };
24
+ outline: {
25
+ type: string;
26
+ };
24
27
  };
25
28
  };
26
29
  };
27
- backgroundEffect: {
30
+ video: {
31
+ type: string;
32
+ };
33
+ headerSpace: {
28
34
  type: string;
29
- additionalProperties: boolean;
30
- required: string[];
31
- properties: {
32
- firstSrc: {
33
- type: string;
34
- };
35
- secondSrc: {
36
- type: string;
37
- };
38
- };
39
35
  };
40
36
  };
41
37
  export declare const HeaderMinifyBlock: {
@@ -52,34 +48,30 @@ export declare const HeaderMinifyBlock: {
52
48
  contentType: string;
53
49
  inputType: string;
54
50
  };
55
- button: {
51
+ buttons: {
56
52
  type: string;
57
- additionalProperties: boolean;
58
- required: string[];
59
- properties: {
60
- icon: {
61
- type: string;
62
- };
63
- text: {
64
- type: string;
65
- };
66
- url: {
67
- type: string;
53
+ items: {
54
+ type: string;
55
+ additionalProperties: boolean;
56
+ required: string[];
57
+ properties: {
58
+ text: {
59
+ type: string;
60
+ };
61
+ url: {
62
+ type: string;
63
+ };
64
+ outline: {
65
+ type: string;
66
+ };
68
67
  };
69
68
  };
70
69
  };
71
- backgroundEffect: {
70
+ video: {
71
+ type: string;
72
+ };
73
+ headerSpace: {
72
74
  type: string;
73
- additionalProperties: boolean;
74
- required: string[];
75
- properties: {
76
- firstSrc: {
77
- type: string;
78
- };
79
- secondSrc: {
80
- type: string;
81
- };
82
- };
83
75
  };
84
76
  anchor: {
85
77
  type: string;
@@ -12,24 +12,24 @@ exports.HeaderMinifyProperties = {
12
12
  contentType: 'yfm',
13
13
  inputType: 'textarea',
14
14
  },
15
- button: {
16
- type: 'object',
17
- additionalProperties: false,
18
- required: ['text', 'url'],
19
- properties: {
20
- icon: { type: 'string' },
21
- text: { type: 'string' },
22
- url: { type: 'string' },
15
+ buttons: {
16
+ type: 'array',
17
+ items: {
18
+ type: 'object',
19
+ additionalProperties: false,
20
+ required: ['text', 'url'],
21
+ properties: {
22
+ text: { type: 'string' },
23
+ url: { type: 'string' },
24
+ outline: { type: 'boolean' },
25
+ },
23
26
  },
24
27
  },
25
- backgroundEffect: {
26
- type: 'object',
27
- additionalProperties: false,
28
- required: ['firstSrc', 'secondSrc'],
29
- properties: {
30
- firstSrc: { type: 'string' },
31
- secondSrc: { type: 'string' },
32
- },
28
+ video: {
29
+ type: 'string',
30
+ },
31
+ headerSpace: {
32
+ type: 'boolean',
33
33
  },
34
34
  };
35
35
  exports.HeaderMinifyBlock = {
@@ -241,17 +241,15 @@ export interface HeaderBlockProps {
241
241
  }
242
242
  export interface HeaderMinifyButtonProps {
243
243
  url: string;
244
- icon?: string;
245
244
  text: string;
245
+ outline?: boolean;
246
246
  }
247
247
  export interface HeaderMinifyBlockProps {
248
248
  title: string;
249
249
  description?: string;
250
- button?: HeaderMinifyButtonProps;
251
- backgroundEffect?: {
252
- firstSrc: string;
253
- secondSrc: string;
254
- };
250
+ buttons?: HeaderMinifyButtonProps[];
251
+ video?: string;
252
+ headerSpace?: boolean;
255
253
  }
256
254
  export interface ExtendedFeaturesItem extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title'> {
257
255
  title: Pick<TitleItemProps, 'text' | 'textSize'> | string;
@@ -4,22 +4,22 @@ unpredictable css rules order in build */
4
4
  display: flex;
5
5
  align-items: center;
6
6
  justify-content: center;
7
- padding: 16px 28px;
7
+ padding: 0 28px;
8
8
  border-radius: 16px;
9
9
  background: #001a2b;
10
10
  color: #ffffff;
11
11
  height: 61px;
12
- font-size: 24px;
13
- line-height: 24px;
12
+ font-size: var(--g-text-header-2-font-size, var(--pc-text-header-2-font-size));
13
+ line-height: var(--g-text-header-2-line-height, var(--pc-text-header-2-line-height));
14
14
  font-weight: 500;
15
- letter-spacing: 0.03em;
15
+ letter-spacing: 1%;
16
16
  text-decoration: none;
17
17
  transition: opacity 0.3s ease;
18
18
  }
19
- .pc-header-minify-button__icon {
20
- width: 24px;
21
- height: 24px;
22
- margin-right: 8px;
19
+ .pc-header-minify-button_outline {
20
+ background: transparent;
21
+ border: 2px solid #001a2b;
22
+ color: #001a2b;
23
23
  }
24
24
  @media (hover: hover) and (pointer: fine) {
25
25
  .pc-header-minify-button:hover {
@@ -1,13 +1,11 @@
1
1
  import React from 'react';
2
- import { ImageBase, RouterLink } from '../../../components';
2
+ import { RouterLink } from '../../../components';
3
3
  import { block } from '../../../utils';
4
4
  import './Button.css';
5
5
  const b = block('header-minify-button');
6
6
  export const Button = (props) => {
7
- const { url, icon, text } = props;
7
+ const { url, text, outline } = props;
8
8
  return (React.createElement(RouterLink, { href: url },
9
- React.createElement("a", { href: url, className: b('') },
10
- icon ? (React.createElement(ImageBase, { className: b('icon'), src: icon, alt: "", "aria-hidden": "true" })) : null,
11
- text)));
9
+ React.createElement("a", { href: url, className: b({ outline }) }, text)));
12
10
  };
13
11
  export default Button;
@@ -1,45 +1,52 @@
1
1
  /* use this for style redefinitions to awoid problems with
2
2
  unpredictable css rules order in build */
3
3
  .pc-header-minify-block {
4
- display: flex;
5
- flex-direction: column;
6
- align-items: center;
7
4
  position: relative;
8
5
  z-index: 1;
9
6
  color: #001a2b;
10
- padding-top: 186px;
11
- padding-bottom: 186px;
12
- text-align: center;
7
+ }
8
+ .pc-header-minify-block_header-space {
9
+ padding-top: var(--header-height);
10
+ margin-top: calc(var(--header-height) * -1);
11
+ }
12
+ .pc-header-minify-block__video {
13
+ position: absolute;
14
+ inset: 0;
15
+ z-index: -1;
16
+ object-fit: cover;
17
+ width: 100%;
18
+ height: 100%;
19
+ }
20
+ .pc-header-minify-block__container {
21
+ padding-top: 256px;
22
+ padding-bottom: 155px;
13
23
  }
14
24
  .pc-header-minify-block__title {
15
- font-size: 128px;
16
- font-weight: 700;
17
- line-height: 102px;
25
+ font-size: var(--g-text-display-4-font-size, var(--pc-text-display-4-font-size));
26
+ line-height: var(--g-text-display-4-line-height, var(--pc-text-display-4-line-height));
18
27
  margin: 0;
19
28
  position: relative;
29
+ margin-bottom: 24px;
20
30
  }
21
- .pc-header-minify-block__title.pc-header-minify-block__title {
22
- letter-spacing: -0.014em;
23
- }
24
-
25
- @media (max-width: 769px) {
31
+ @media (max-width: 577px) {
26
32
  .pc-header-minify-block__title {
27
- font-size: 48px;
28
- line-height: 52px;
33
+ font-size: var(--g-text-display-2-font-size, var(--pc-text-display-2-font-size));
34
+ line-height: var(--g-text-display-2-line-height, var(--pc-text-display-2-line-height));
29
35
  }
30
36
  }
31
37
  .pc-header-minify-block__description {
32
- margin-top: 24px;
33
38
  position: relative;
39
+ margin-bottom: 32px;
34
40
  opacity: 0.8;
35
- max-width: 1024px;
36
41
  }
37
42
  .pc-header-minify-block__description .yfm {
38
43
  font-size: var(--g-text-header-2-font-size, var(--pc-text-header-2-font-size));
39
44
  line-height: var(--g-text-header-2-line-height, var(--pc-text-header-2-line-height));
40
- font-weight: 600;
45
+ font-weight: 500;
41
46
  }
42
47
  .pc-header-minify-block__buttons {
48
+ display: flex;
49
+ gap: 8px;
43
50
  position: relative;
44
- margin-top: 48px;
51
+ flex-wrap: wrap;
45
52
  }
@@ -1,21 +1,30 @@
1
- import React, { useRef } from 'react';
2
- import { BackgroundEffect, HTML, YFMWrapper } from '../../components';
1
+ import React from 'react';
2
+ import { HTML, YFMWrapper } from '../../components';
3
+ import { parseVideoType } from '../../components/Media/Video/utils';
4
+ import { Col, Grid, Row } from '../../grid';
3
5
  import { block } from '../../utils';
4
6
  import Button from './Button/Button';
5
7
  import './HeaderMinify.css';
6
8
  const b = block('header-minify-block');
9
+ const colSizes = { all: 12, md: 8 };
7
10
  const modifiers = {
8
11
  constructor: true,
9
12
  };
10
13
  export const HeaderMinifyBlock = (props) => {
11
- const { title, description, button, backgroundEffect } = props;
12
- const headerRef = useRef(null);
13
- return (React.createElement("header", { ref: headerRef, className: b() },
14
- backgroundEffect && backgroundEffect.firstSrc && backgroundEffect.secondSrc && (React.createElement(BackgroundEffect, Object.assign({}, backgroundEffect, { attachRef: headerRef }))),
15
- React.createElement("h1", { className: b('title') },
16
- React.createElement(HTML, null, title)),
17
- description && (React.createElement("div", { className: b('description') },
18
- React.createElement(YFMWrapper, { content: description, modifiers: modifiers }))),
19
- React.createElement("div", { className: b('buttons') }, button && React.createElement(Button, Object.assign({}, button)))));
14
+ const { title, description, buttons, video, headerSpace } = props;
15
+ return (React.createElement("header", { className: b({ ['header-space']: headerSpace }) },
16
+ video && (React.createElement("video", { disablePictureInPicture: true, playsInline: true,
17
+ // @ts-ignore
18
+ // eslint-disable-next-line react/no-unknown-property
19
+ pip: "false", autoPlay: true, loop: true, preload: "auto", muted: true, className: b('video') },
20
+ React.createElement("source", { src: video, type: parseVideoType(video) }))),
21
+ React.createElement(Grid, null,
22
+ React.createElement(Row, { className: b('container') },
23
+ React.createElement(Col, { sizes: colSizes },
24
+ React.createElement("h1", { className: b('title') },
25
+ React.createElement(HTML, null, title)),
26
+ description && (React.createElement("div", { className: b('description') },
27
+ React.createElement(YFMWrapper, { content: description, modifiers: modifiers }))),
28
+ (buttons === null || buttons === void 0 ? void 0 : buttons.length) ? (React.createElement("div", { className: b('buttons') }, buttons.map((button, index) => (React.createElement(Button, Object.assign({ key: index }, button)))))) : null)))));
20
29
  };
21
30
  export default HeaderMinifyBlock;
@@ -8,34 +8,30 @@ export declare const HeaderMinifyProperties: {
8
8
  contentType: string;
9
9
  inputType: string;
10
10
  };
11
- button: {
11
+ buttons: {
12
12
  type: string;
13
- additionalProperties: boolean;
14
- required: string[];
15
- properties: {
16
- icon: {
17
- type: string;
18
- };
19
- text: {
20
- type: string;
21
- };
22
- url: {
23
- type: string;
13
+ items: {
14
+ type: string;
15
+ additionalProperties: boolean;
16
+ required: string[];
17
+ properties: {
18
+ text: {
19
+ type: string;
20
+ };
21
+ url: {
22
+ type: string;
23
+ };
24
+ outline: {
25
+ type: string;
26
+ };
24
27
  };
25
28
  };
26
29
  };
27
- backgroundEffect: {
30
+ video: {
31
+ type: string;
32
+ };
33
+ headerSpace: {
28
34
  type: string;
29
- additionalProperties: boolean;
30
- required: string[];
31
- properties: {
32
- firstSrc: {
33
- type: string;
34
- };
35
- secondSrc: {
36
- type: string;
37
- };
38
- };
39
35
  };
40
36
  };
41
37
  export declare const HeaderMinifyBlock: {
@@ -52,34 +48,30 @@ export declare const HeaderMinifyBlock: {
52
48
  contentType: string;
53
49
  inputType: string;
54
50
  };
55
- button: {
51
+ buttons: {
56
52
  type: string;
57
- additionalProperties: boolean;
58
- required: string[];
59
- properties: {
60
- icon: {
61
- type: string;
62
- };
63
- text: {
64
- type: string;
65
- };
66
- url: {
67
- type: string;
53
+ items: {
54
+ type: string;
55
+ additionalProperties: boolean;
56
+ required: string[];
57
+ properties: {
58
+ text: {
59
+ type: string;
60
+ };
61
+ url: {
62
+ type: string;
63
+ };
64
+ outline: {
65
+ type: string;
66
+ };
68
67
  };
69
68
  };
70
69
  };
71
- backgroundEffect: {
70
+ video: {
71
+ type: string;
72
+ };
73
+ headerSpace: {
72
74
  type: string;
73
- additionalProperties: boolean;
74
- required: string[];
75
- properties: {
76
- firstSrc: {
77
- type: string;
78
- };
79
- secondSrc: {
80
- type: string;
81
- };
82
- };
83
75
  };
84
76
  anchor: {
85
77
  type: string;
@@ -9,24 +9,24 @@ export const HeaderMinifyProperties = {
9
9
  contentType: 'yfm',
10
10
  inputType: 'textarea',
11
11
  },
12
- button: {
13
- type: 'object',
14
- additionalProperties: false,
15
- required: ['text', 'url'],
16
- properties: {
17
- icon: { type: 'string' },
18
- text: { type: 'string' },
19
- url: { type: 'string' },
12
+ buttons: {
13
+ type: 'array',
14
+ items: {
15
+ type: 'object',
16
+ additionalProperties: false,
17
+ required: ['text', 'url'],
18
+ properties: {
19
+ text: { type: 'string' },
20
+ url: { type: 'string' },
21
+ outline: { type: 'boolean' },
22
+ },
20
23
  },
21
24
  },
22
- backgroundEffect: {
23
- type: 'object',
24
- additionalProperties: false,
25
- required: ['firstSrc', 'secondSrc'],
26
- properties: {
27
- firstSrc: { type: 'string' },
28
- secondSrc: { type: 'string' },
29
- },
25
+ video: {
26
+ type: 'string',
27
+ },
28
+ headerSpace: {
29
+ type: 'boolean',
30
30
  },
31
31
  };
32
32
  export const HeaderMinifyBlock = {