@gravity-ui/page-constructor 6.0.0-alpha.0 → 6.0.0-alpha.2
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.
- package/build/cjs/components/ContentList/ContentList.css +26 -9
- package/build/cjs/components/ContentList/ContentList.js +1 -1
- package/build/cjs/components/FullscreenMedia/FullscreenMedia.css +6 -2
- package/build/cjs/sub-blocks/PriceCard/PriceCard.js +1 -1
- package/build/esm/components/ContentList/ContentList.css +26 -9
- package/build/esm/components/ContentList/ContentList.js +1 -1
- package/build/esm/components/FullscreenMedia/FullscreenMedia.css +6 -2
- package/build/esm/sub-blocks/PriceCard/PriceCard.js +1 -1
- package/package.json +1 -1
- package/widget/index.js +1 -1
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
/* use this for style redefinitions to awoid problems with
|
|
2
2
|
unpredictable css rules order in build */
|
|
3
|
+
.pc-content-list_size_l {
|
|
4
|
+
max-width: 480px;
|
|
5
|
+
}
|
|
3
6
|
.pc-content-list_size_l .pc-content-list__title {
|
|
4
7
|
font-size: var(--g-text-header-1-font-size);
|
|
5
8
|
line-height: var(--g-text-header-1-line-height);
|
|
@@ -21,10 +24,21 @@ unpredictable css rules order in build */
|
|
|
21
24
|
.pc-content-list_size_l .pc-content-list__item_without-title .pc-content-list__icon {
|
|
22
25
|
width: 20px;
|
|
23
26
|
height: 20px;
|
|
24
|
-
margin-top:
|
|
25
|
-
margin-bottom:
|
|
27
|
+
margin-top: 2px;
|
|
28
|
+
margin-bottom: 2px;
|
|
26
29
|
margin-right: 8px;
|
|
27
30
|
}
|
|
31
|
+
.pc-content-list_size_l .pc-content-list__text {
|
|
32
|
+
font-size: var(--g-text-subheader-2-font-size);
|
|
33
|
+
line-height: var(--g-text-subheader-2-line-height);
|
|
34
|
+
}
|
|
35
|
+
.pc-content-list_size_l .pc-content-list__text_without-title {
|
|
36
|
+
font-size: var(--g-text-subheader-3-font-size);
|
|
37
|
+
line-height: var(--g-text-subheader-3-line-height);
|
|
38
|
+
}
|
|
39
|
+
.pc-content-list_size_s {
|
|
40
|
+
max-width: 440px;
|
|
41
|
+
}
|
|
28
42
|
.pc-content-list_size_s .pc-content-list__title {
|
|
29
43
|
font-size: var(--g-text-subheader-3-font-size);
|
|
30
44
|
line-height: var(--g-text-subheader-3-line-height);
|
|
@@ -46,8 +60,16 @@ unpredictable css rules order in build */
|
|
|
46
60
|
.pc-content-list_size_s .pc-content-list__item_without-title .pc-content-list__icon {
|
|
47
61
|
width: 18px;
|
|
48
62
|
height: 18px;
|
|
49
|
-
margin-top:
|
|
50
|
-
margin-bottom:
|
|
63
|
+
margin-top: 1px;
|
|
64
|
+
margin-bottom: 1px;
|
|
65
|
+
}
|
|
66
|
+
.pc-content-list_size_s .pc-content-list__text {
|
|
67
|
+
font-size: var(--g-text-body-1-font-size);
|
|
68
|
+
line-height: var(--g-text-body-1-line-height);
|
|
69
|
+
}
|
|
70
|
+
.pc-content-list_size_s .pc-content-list__text_without-title {
|
|
71
|
+
font-size: var(--g-text-subheader-2-font-size);
|
|
72
|
+
line-height: var(--g-text-subheader-2-line-height);
|
|
51
73
|
}
|
|
52
74
|
.pc-content-list_theme_light .pc-content-list__item *,
|
|
53
75
|
.pc-content-list_theme_light .pc-content-list__item .yfm,
|
|
@@ -73,11 +95,6 @@ unpredictable css rules order in build */
|
|
|
73
95
|
.pc-content-list_theme_dark .pc-content-list__item .yfm a:hover {
|
|
74
96
|
color: var(--g-color-text-light-secondary);
|
|
75
97
|
}
|
|
76
|
-
.pc-content-list_size_s.pc-content-list_size_s .pc-content-list__text {
|
|
77
|
-
font-size: var(--g-text-body-1-font-size);
|
|
78
|
-
line-height: var(--g-text-body-1-line-height);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
98
|
.pc-content-list__icon {
|
|
82
99
|
display: block;
|
|
83
100
|
}
|
|
@@ -26,7 +26,7 @@ const ContentList = ({ list, size = 'l', qa, theme }) => {
|
|
|
26
26
|
react_1.default.createElement("div", null,
|
|
27
27
|
title &&
|
|
28
28
|
react_1.default.createElement(getHeadingLevel(size), { className: b('title'), 'data-qa': qaAttributes.title }, react_1.default.createElement(YFMWrapper_1.default, { content: title, modifiers: { constructor: true } })),
|
|
29
|
-
text && (react_1.default.createElement(YFMWrapper_1.default, { contentClassName: b('text'), content: text, modifiers: { constructor: true }, qa: qaAttributes.text })))));
|
|
29
|
+
text && (react_1.default.createElement(YFMWrapper_1.default, { contentClassName: b('text', { 'without-title': !title }), content: text, modifiers: { constructor: true }, qa: qaAttributes.text })))));
|
|
30
30
|
})));
|
|
31
31
|
};
|
|
32
32
|
exports.default = ContentList;
|
|
@@ -26,8 +26,12 @@ unpredictable css rules order in build */
|
|
|
26
26
|
border-radius: var(--pc-border-radius);
|
|
27
27
|
}
|
|
28
28
|
.pc-full-screen-media__modal-media_type_youtube {
|
|
29
|
-
width: min(65vw, 1232px);
|
|
30
|
-
|
|
29
|
+
max-width: min(65vw, 1232px);
|
|
30
|
+
width: 100%;
|
|
31
|
+
aspect-ratio: 16/9;
|
|
32
|
+
height: calc(
|
|
33
|
+
min(65vw, 1232px) * 9 / 16
|
|
34
|
+
) !important; /* stylelint-disable-line declaration-no-important */
|
|
31
35
|
}
|
|
32
36
|
.pc-full-screen-media__modal .g-modal__content, .pc-full-screen-media__modal-image {
|
|
33
37
|
border-radius: var(--pc-border-radius);
|
|
@@ -26,7 +26,7 @@ const PriceCard = (props) => {
|
|
|
26
26
|
react_1.default.createElement(components_1.ContentList, { list: list.map((item) => ({
|
|
27
27
|
icon: Check_1.default,
|
|
28
28
|
text: item,
|
|
29
|
-
})), size: "
|
|
29
|
+
})), size: "s" }))) : null),
|
|
30
30
|
react_1.default.createElement(components_1.Buttons, { className: b('buttons'), buttons: buttons, size: "s" }),
|
|
31
31
|
react_1.default.createElement(components_1.Links, { className: b('links'), links: links, size: "s" })))));
|
|
32
32
|
};
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
/* use this for style redefinitions to awoid problems with
|
|
2
2
|
unpredictable css rules order in build */
|
|
3
|
+
.pc-content-list_size_l {
|
|
4
|
+
max-width: 480px;
|
|
5
|
+
}
|
|
3
6
|
.pc-content-list_size_l .pc-content-list__title {
|
|
4
7
|
font-size: var(--g-text-header-1-font-size);
|
|
5
8
|
line-height: var(--g-text-header-1-line-height);
|
|
@@ -21,10 +24,21 @@ unpredictable css rules order in build */
|
|
|
21
24
|
.pc-content-list_size_l .pc-content-list__item_without-title .pc-content-list__icon {
|
|
22
25
|
width: 20px;
|
|
23
26
|
height: 20px;
|
|
24
|
-
margin-top:
|
|
25
|
-
margin-bottom:
|
|
27
|
+
margin-top: 2px;
|
|
28
|
+
margin-bottom: 2px;
|
|
26
29
|
margin-right: 8px;
|
|
27
30
|
}
|
|
31
|
+
.pc-content-list_size_l .pc-content-list__text {
|
|
32
|
+
font-size: var(--g-text-subheader-2-font-size);
|
|
33
|
+
line-height: var(--g-text-subheader-2-line-height);
|
|
34
|
+
}
|
|
35
|
+
.pc-content-list_size_l .pc-content-list__text_without-title {
|
|
36
|
+
font-size: var(--g-text-subheader-3-font-size);
|
|
37
|
+
line-height: var(--g-text-subheader-3-line-height);
|
|
38
|
+
}
|
|
39
|
+
.pc-content-list_size_s {
|
|
40
|
+
max-width: 440px;
|
|
41
|
+
}
|
|
28
42
|
.pc-content-list_size_s .pc-content-list__title {
|
|
29
43
|
font-size: var(--g-text-subheader-3-font-size);
|
|
30
44
|
line-height: var(--g-text-subheader-3-line-height);
|
|
@@ -46,8 +60,16 @@ unpredictable css rules order in build */
|
|
|
46
60
|
.pc-content-list_size_s .pc-content-list__item_without-title .pc-content-list__icon {
|
|
47
61
|
width: 18px;
|
|
48
62
|
height: 18px;
|
|
49
|
-
margin-top:
|
|
50
|
-
margin-bottom:
|
|
63
|
+
margin-top: 1px;
|
|
64
|
+
margin-bottom: 1px;
|
|
65
|
+
}
|
|
66
|
+
.pc-content-list_size_s .pc-content-list__text {
|
|
67
|
+
font-size: var(--g-text-body-1-font-size);
|
|
68
|
+
line-height: var(--g-text-body-1-line-height);
|
|
69
|
+
}
|
|
70
|
+
.pc-content-list_size_s .pc-content-list__text_without-title {
|
|
71
|
+
font-size: var(--g-text-subheader-2-font-size);
|
|
72
|
+
line-height: var(--g-text-subheader-2-line-height);
|
|
51
73
|
}
|
|
52
74
|
.pc-content-list_theme_light .pc-content-list__item *,
|
|
53
75
|
.pc-content-list_theme_light .pc-content-list__item .yfm,
|
|
@@ -73,11 +95,6 @@ unpredictable css rules order in build */
|
|
|
73
95
|
.pc-content-list_theme_dark .pc-content-list__item .yfm a:hover {
|
|
74
96
|
color: var(--g-color-text-light-secondary);
|
|
75
97
|
}
|
|
76
|
-
.pc-content-list_size_s.pc-content-list_size_s .pc-content-list__text {
|
|
77
|
-
font-size: var(--g-text-body-1-font-size);
|
|
78
|
-
line-height: var(--g-text-body-1-line-height);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
98
|
.pc-content-list__icon {
|
|
82
99
|
display: block;
|
|
83
100
|
}
|
|
@@ -24,7 +24,7 @@ const ContentList = ({ list, size = 'l', qa, theme }) => {
|
|
|
24
24
|
React.createElement("div", null,
|
|
25
25
|
title &&
|
|
26
26
|
React.createElement(getHeadingLevel(size), { className: b('title'), 'data-qa': qaAttributes.title }, React.createElement(YFMWrapper, { content: title, modifiers: { constructor: true } })),
|
|
27
|
-
text && (React.createElement(YFMWrapper, { contentClassName: b('text'), content: text, modifiers: { constructor: true }, qa: qaAttributes.text })))));
|
|
27
|
+
text && (React.createElement(YFMWrapper, { contentClassName: b('text', { 'without-title': !title }), content: text, modifiers: { constructor: true }, qa: qaAttributes.text })))));
|
|
28
28
|
})));
|
|
29
29
|
};
|
|
30
30
|
export default ContentList;
|
|
@@ -26,8 +26,12 @@ unpredictable css rules order in build */
|
|
|
26
26
|
border-radius: var(--pc-border-radius);
|
|
27
27
|
}
|
|
28
28
|
.pc-full-screen-media__modal-media_type_youtube {
|
|
29
|
-
width: min(65vw, 1232px);
|
|
30
|
-
|
|
29
|
+
max-width: min(65vw, 1232px);
|
|
30
|
+
width: 100%;
|
|
31
|
+
aspect-ratio: 16/9;
|
|
32
|
+
height: calc(
|
|
33
|
+
min(65vw, 1232px) * 9 / 16
|
|
34
|
+
) !important; /* stylelint-disable-line declaration-no-important */
|
|
31
35
|
}
|
|
32
36
|
.pc-full-screen-media__modal .g-modal__content, .pc-full-screen-media__modal-image {
|
|
33
37
|
border-radius: var(--pc-border-radius);
|
|
@@ -24,7 +24,7 @@ const PriceCard = (props) => {
|
|
|
24
24
|
React.createElement(ContentList, { list: list.map((item) => ({
|
|
25
25
|
icon: Check,
|
|
26
26
|
text: item,
|
|
27
|
-
})), size: "
|
|
27
|
+
})), size: "s" }))) : null),
|
|
28
28
|
React.createElement(Buttons, { className: b('buttons'), buttons: buttons, size: "s" }),
|
|
29
29
|
React.createElement(Links, { className: b('links'), links: links, size: "s" })))));
|
|
30
30
|
};
|