@gravity-ui/blog-constructor 4.4.2 → 5.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/build/cjs/blocks/Author/Author.css +2 -2
- package/build/cjs/blocks/Banner/schema.d.ts +11 -0
- package/build/cjs/blocks/CTA/CTA.css +1 -1
- package/build/cjs/blocks/CTA/CTA.js +1 -1
- package/build/cjs/blocks/CTA/schema.d.ts +11 -0
- package/build/cjs/blocks/ColoredText/schema.d.ts +11 -0
- package/build/cjs/blocks/Header/Header.js +1 -1
- package/build/cjs/blocks/Media/Media.css +1 -1
- package/build/cjs/blocks/Meta/Meta.js +2 -2
- package/build/cjs/components/ButtonWithIcon/ButtonWithIcon.css +6 -6
- package/build/cjs/components/FeedHeader/FeedHeader.css +3 -3
- package/build/cjs/components/FeedHeader/FeedHeader.js +1 -1
- package/build/cjs/components/FeedHeader/components/Controls/Controls.css +11 -9
- package/build/cjs/components/FeedHeader/components/CustomSelectOption/CustomSelectOption.css +2 -2
- package/build/cjs/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.css +9 -9
- package/build/cjs/components/Paginator/Paginator.css +6 -6
- package/build/cjs/components/PostCard/PostCard.css +15 -15
- package/build/cjs/components/PostCard/PostCard.js +1 -1
- package/build/cjs/components/PostInfo/PostInfo.css +20 -20
- package/build/cjs/components/PostInfo/PostInfo.d.ts +3 -4
- package/build/cjs/components/PostInfo/PostInfo.js +3 -3
- package/build/cjs/components/PostInfo/SuggestPostInfo.d.ts +3 -4
- package/build/cjs/components/PostInfo/SuggestPostInfo.js +3 -3
- package/build/cjs/components/PostInfo/components/Save.d.ts +3 -3
- package/build/cjs/components/PostInfo/components/Save.js +3 -3
- package/build/cjs/components/PostInfo/components/Sharing.js +2 -2
- package/build/cjs/components/Posts/Posts.css +1 -1
- package/build/cjs/components/PostsEmpty/PostsEmpty.css +5 -5
- package/build/cjs/components/PostsError/PostError.css +5 -5
- package/build/cjs/components/Prompt/Prompt.css +2 -2
- package/build/cjs/components/Search/Search.css +8 -8
- package/build/cjs/components/Wrapper/Wrapper.d.ts +2 -3
- package/build/cjs/components/Wrapper/Wrapper.js +2 -2
- package/build/cjs/constants.d.ts +2 -0
- package/build/cjs/constants.js +3 -1
- package/build/cjs/containers/BlogPage/BlogPage.css +8 -8
- package/build/cjs/containers/BlogPostPage/BlogPostPage.css +49 -49
- package/build/cjs/containers/BlogPostPage/BlogPostPage.d.ts +1 -1
- package/build/cjs/contexts/PostPageContext.d.ts +1 -1
- package/build/cjs/contexts/theme/ThemeProvider.js +4 -4
- package/build/cjs/models/common.d.ts +3 -0
- package/build/cjs/schema/index.d.ts +33 -0
- package/build/cjs/utils/common.d.ts +1 -0
- package/build/esm/blocks/Author/Author.css +2 -2
- package/build/esm/blocks/Banner/schema.d.ts +11 -0
- package/build/esm/blocks/CTA/CTA.css +1 -1
- package/build/esm/blocks/CTA/CTA.js +1 -1
- package/build/esm/blocks/CTA/schema.d.ts +11 -0
- package/build/esm/blocks/ColoredText/schema.d.ts +11 -0
- package/build/esm/blocks/Header/Header.js +1 -1
- package/build/esm/blocks/Media/Media.css +1 -1
- package/build/esm/blocks/Meta/Meta.js +2 -2
- package/build/esm/components/ButtonWithIcon/ButtonWithIcon.css +6 -6
- package/build/esm/components/FeedHeader/FeedHeader.css +3 -3
- package/build/esm/components/FeedHeader/FeedHeader.js +1 -1
- package/build/esm/components/FeedHeader/components/Controls/Controls.css +11 -9
- package/build/esm/components/FeedHeader/components/CustomSelectOption/CustomSelectOption.css +2 -2
- package/build/esm/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.css +9 -9
- package/build/esm/components/Paginator/Paginator.css +6 -6
- package/build/esm/components/PostCard/PostCard.css +15 -15
- package/build/esm/components/PostCard/PostCard.js +1 -1
- package/build/esm/components/PostInfo/PostInfo.css +20 -20
- package/build/esm/components/PostInfo/PostInfo.d.ts +3 -4
- package/build/esm/components/PostInfo/PostInfo.js +3 -3
- package/build/esm/components/PostInfo/SuggestPostInfo.d.ts +3 -4
- package/build/esm/components/PostInfo/SuggestPostInfo.js +3 -3
- package/build/esm/components/PostInfo/components/Save.d.ts +3 -3
- package/build/esm/components/PostInfo/components/Save.js +3 -3
- package/build/esm/components/PostInfo/components/Sharing.js +2 -2
- package/build/esm/components/Posts/Posts.css +1 -1
- package/build/esm/components/PostsEmpty/PostsEmpty.css +5 -5
- package/build/esm/components/PostsError/PostError.css +5 -5
- package/build/esm/components/Prompt/Prompt.css +2 -2
- package/build/esm/components/Search/Search.css +8 -8
- package/build/esm/components/Wrapper/Wrapper.d.ts +2 -3
- package/build/esm/components/Wrapper/Wrapper.js +2 -2
- package/build/esm/constants.d.ts +2 -0
- package/build/esm/constants.js +2 -0
- package/build/esm/containers/BlogPage/BlogPage.css +8 -8
- package/build/esm/containers/BlogPostPage/BlogPostPage.css +49 -49
- package/build/esm/containers/BlogPostPage/BlogPostPage.d.ts +1 -1
- package/build/esm/contexts/PostPageContext.d.ts +1 -1
- package/build/esm/contexts/theme/ThemeProvider.js +5 -5
- package/build/esm/models/common.d.ts +3 -0
- package/build/esm/schema/index.d.ts +33 -0
- package/build/esm/utils/common.d.ts +1 -0
- package/package.json +8 -7
- package/server/models/common.d.ts +3 -0
- package/styles/root.css +8 -8
- package/styles/root.scss +8 -8
- package/styles/storybook/common.scss +12 -6
- package/styles/storybook/palette.scss +6 -6
- package/styles/storybook/typography.scss +46 -46
- package/styles/yfm.css +26 -26
- package/styles/yfm.scss +14 -14
@@ -35,5 +35,5 @@ export const Header = (props) => {
|
|
35
35
|
[PaddingsDirections.bottom]: paddingBottom,
|
36
36
|
} },
|
37
37
|
React.createElement(HeaderBlock, Object.assign({}, props, { title: title, description: description, breadcrumbs: breadcrumbs }),
|
38
|
-
React.createElement(PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, theme: theme,
|
38
|
+
React.createElement(PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, theme: theme, qa: "blog-header-meta-container" }))));
|
39
39
|
};
|
@@ -12,7 +12,7 @@ unpredictable css rules order in build */
|
|
12
12
|
height: 100%;
|
13
13
|
width: 100%;
|
14
14
|
border-radius: calc(var(--bc-border-radius) + 1px);
|
15
|
-
border: 1px solid var(--
|
15
|
+
border: 1px solid var(--g-color-line-generic);
|
16
16
|
overflow: hidden;
|
17
17
|
}
|
18
18
|
.bc-media__content {
|
@@ -33,11 +33,11 @@ export const Meta = (props) => {
|
|
33
33
|
return (React.createElement(Wrapper, { paddings: {
|
34
34
|
[PaddingsDirections.top]: paddingTop,
|
35
35
|
[PaddingsDirections.bottom]: paddingBottom,
|
36
|
-
},
|
36
|
+
}, qa: "blog-meta-content" },
|
37
37
|
breadcrumbs && (React.createElement(HeaderBreadcrumbs, { items: breadcrumbs.items, className: b('breadcrumbs'), theme: theme, metrikaGoals: breadcrumbs.metrikaGoals })),
|
38
38
|
title && (React.createElement(YFMWrapper, { content: title, modifiers: {
|
39
39
|
blogBreadcrumbs: true,
|
40
40
|
resetPaddings: true,
|
41
41
|
} })),
|
42
|
-
post && (React.createElement(PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals,
|
42
|
+
post && (React.createElement(PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, qa: "blog-meta-block" }))));
|
43
43
|
};
|
@@ -40,10 +40,10 @@ unpredictable css rules order in build */
|
|
40
40
|
transition: color 0.2s;
|
41
41
|
}
|
42
42
|
.bc-button-with-icon_theme_primary:hover {
|
43
|
-
color: var(--
|
43
|
+
color: var(--g-color-text-primary);
|
44
44
|
}
|
45
45
|
.bc-button-with-icon_theme_secondary {
|
46
|
-
color: var(--
|
46
|
+
color: var(--g-color-text-secondary);
|
47
47
|
transition: color 0.2s;
|
48
48
|
}
|
49
49
|
.bc-button-with-icon_theme_secondary:hover {
|
@@ -54,10 +54,10 @@ unpredictable css rules order in build */
|
|
54
54
|
transition: color 0.2s;
|
55
55
|
}
|
56
56
|
.bc-button-with-icon_theme_link:hover {
|
57
|
-
color: var(--
|
57
|
+
color: var(--g-color-text-link-hover);
|
58
58
|
}
|
59
59
|
.bc-button-with-icon_theme_accent {
|
60
|
-
color: var(--
|
60
|
+
color: var(--g-color-base-danger-heavy);
|
61
61
|
transition: opacity 0.2s;
|
62
62
|
opacity: 0.7;
|
63
63
|
}
|
@@ -66,10 +66,10 @@ unpredictable css rules order in build */
|
|
66
66
|
}
|
67
67
|
.bc-button-with-icon_disabled {
|
68
68
|
cursor: default;
|
69
|
-
color: var(--
|
69
|
+
color: var(--g-color-text-secondary);
|
70
70
|
}
|
71
71
|
.bc-button-with-icon_disabled:hover {
|
72
|
-
color: var(--
|
72
|
+
color: var(--g-color-text-secondary);
|
73
73
|
}
|
74
74
|
.mobile .bc-button-with-icon:hover {
|
75
75
|
color: inherit;
|
@@ -17,7 +17,7 @@ unpredictable css rules order in build */
|
|
17
17
|
}
|
18
18
|
.bc-feed-header__content_theme_dark.bc-feed-header__content_theme_dark .bc-feed-header__title,
|
19
19
|
.bc-feed-header__content_theme_dark.bc-feed-header__content_theme_dark .bc-feed-header__description * {
|
20
|
-
color: var(--
|
20
|
+
color: var(--g-color-text-light-primary);
|
21
21
|
}
|
22
22
|
|
23
23
|
.bc-feed-header_has-background {
|
@@ -49,6 +49,6 @@ unpredictable css rules order in build */
|
|
49
49
|
}
|
50
50
|
}
|
51
51
|
.mobile .bc-feed-header_has-background .bc-feed-header__title {
|
52
|
-
font-size: var(--
|
53
|
-
line-height: var(--
|
52
|
+
font-size: var(--g-text-display-2-font-size);
|
53
|
+
line-height: var(--g-text-display-2-line-height);
|
54
54
|
}
|
@@ -4,7 +4,7 @@ import { block } from '../../utils/cn';
|
|
4
4
|
import { Controls } from './components/Controls/Controls';
|
5
5
|
import './FeedHeader.css';
|
6
6
|
const b = block('feed-header');
|
7
|
-
export const FeedHeader = ({ tags, services, handleLoadData, offset = 'default', background, theme = '
|
7
|
+
export const FeedHeader = ({ tags, services, handleLoadData, offset = 'default', background, theme = 'light', verticalOffset = 'l', className, queryParams, }) => {
|
8
8
|
const backgroundThemed = background && getThemedValue(background, theme);
|
9
9
|
return (React.createElement("header", { className: b('header', { ['has-background']: Boolean(background) }, className) },
|
10
10
|
(backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color) ? (React.createElement(FullWidthBackground, { style: { backgroundColor: backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color }, theme: "rounded" })) : null,
|
@@ -14,8 +14,8 @@ unpredictable css rules order in build */
|
|
14
14
|
flex-wrap: wrap;
|
15
15
|
}
|
16
16
|
.bc-feed-controls__header-item_title {
|
17
|
-
font-size: var(--
|
18
|
-
line-height: var(--
|
17
|
+
font-size: var(--g-text-display-4-font-size);
|
18
|
+
line-height: var(--g-text-display-4-line-height);
|
19
19
|
padding-top: 112px;
|
20
20
|
padding-bottom: 96px;
|
21
21
|
}
|
@@ -24,7 +24,7 @@ unpredictable css rules order in build */
|
|
24
24
|
max-width: 100%;
|
25
25
|
}
|
26
26
|
.bc-feed-controls__search .yc-text-input_view_normal .yc-text-input__control {
|
27
|
-
border-color: var(--
|
27
|
+
border-color: var(--g-color-base-background);
|
28
28
|
}
|
29
29
|
.bc-feed-controls__select {
|
30
30
|
width: 100%;
|
@@ -43,7 +43,7 @@ unpredictable css rules order in build */
|
|
43
43
|
display: none;
|
44
44
|
}
|
45
45
|
.bc-feed-controls__popup.bc-feed-controls__popup .g-select-list .yc-list {
|
46
|
-
max-height: calc(500px - var(--
|
46
|
+
max-height: calc(500px - var(--g-text-body-3-line-height) - 12px);
|
47
47
|
}
|
48
48
|
.bc-feed-controls__popup.bc-feed-controls__popup .yc-list__item {
|
49
49
|
margin: 4px;
|
@@ -64,8 +64,8 @@ unpredictable css rules order in build */
|
|
64
64
|
}
|
65
65
|
|
66
66
|
.bc-feed-controls__popup-filter .yc-text-input__control {
|
67
|
-
font-size: var(--
|
68
|
-
line-height: var(--
|
67
|
+
font-size: var(--g-text-body-2-font-size);
|
68
|
+
line-height: var(--g-text-body-2-line-height);
|
69
69
|
border: none;
|
70
70
|
}
|
71
71
|
.bc-feed-controls__popup-filter .yc-text-input__control:hover, .bc-feed-controls__popup-filter .yc-text-input__control:focus {
|
@@ -75,6 +75,8 @@ unpredictable css rules order in build */
|
|
75
75
|
width: 100%;
|
76
76
|
}
|
77
77
|
.bc-feed-controls__saved-only-button_savedOnly {
|
78
|
+
--g-button-background-color: var(--pc-monochrome-button-background-color);
|
79
|
+
--g-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
|
78
80
|
--yc-button-background-color: var(--pc-monochrome-button-background-color);
|
79
81
|
--yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
|
80
82
|
}
|
@@ -85,7 +87,7 @@ unpredictable css rules order in build */
|
|
85
87
|
color: var(--pc-monochrome-button-color);
|
86
88
|
}
|
87
89
|
.bc-feed-controls__saved-only-button_savedOnly:focus {
|
88
|
-
color: var(--
|
90
|
+
color: var(--g-color-base-background);
|
89
91
|
}
|
90
92
|
.bc-feed-controls__filter-item {
|
91
93
|
margin-right: 8px;
|
@@ -105,8 +107,8 @@ unpredictable css rules order in build */
|
|
105
107
|
flex-grow: 0;
|
106
108
|
}
|
107
109
|
.bc-feed-controls__icon {
|
108
|
-
color: var(--
|
110
|
+
color: var(--g-color-base-brand);
|
109
111
|
}
|
110
112
|
.bc-feed-controls__icon_savedOnly {
|
111
|
-
color: var(--
|
113
|
+
color: var(--g-color-base-background);
|
112
114
|
}
|
package/build/esm/components/FeedHeader/components/CustomSelectOption/CustomSelectOption.css
CHANGED
@@ -1,8 +1,8 @@
|
|
1
1
|
/* use this for style redefinitions to awoid problems with
|
2
2
|
unpredictable css rules order in build */
|
3
3
|
.bc-feed-custom-select-option {
|
4
|
-
font-size: var(--
|
5
|
-
line-height: var(--
|
4
|
+
font-size: var(--g-text-body-2-font-size);
|
5
|
+
line-height: var(--g-text-body-2-line-height);
|
6
6
|
display: flex;
|
7
7
|
}
|
8
8
|
.bc-feed-custom-select-option__icon {
|
@@ -1,25 +1,25 @@
|
|
1
1
|
/* use this for style redefinitions to awoid problems with
|
2
2
|
unpredictable css rules order in build */
|
3
3
|
.bc-feed-custom-switcher__custom-switcher {
|
4
|
-
font-size: var(--
|
5
|
-
line-height: var(--
|
4
|
+
font-size: var(--g-text-body-2-font-size);
|
5
|
+
line-height: var(--g-text-body-2-line-height);
|
6
6
|
position: relative;
|
7
7
|
display: flex;
|
8
8
|
flex-direction: row;
|
9
9
|
align-items: center;
|
10
|
-
background-color: var(--
|
11
|
-
border: 1px solid var(--
|
10
|
+
background-color: var(--g-color-base-background);
|
11
|
+
border: 1px solid var(--g-color-base-background);
|
12
12
|
border-radius: 10px;
|
13
13
|
width: 100%;
|
14
14
|
line-height: 42px;
|
15
15
|
}
|
16
|
-
.bc-feed-custom-switcher__custom-switcher + .yc-popup
|
16
|
+
.bc-feed-custom-switcher__custom-switcher + .yc-popup.yc-popup_open {
|
17
17
|
position: absolute !important;
|
18
18
|
inset: auto !important;
|
19
19
|
transform: translate3d(0, 4px, 0) !important;
|
20
20
|
}
|
21
21
|
.bc-feed-custom-switcher__custom-switcher:hover {
|
22
|
-
border-color: var(--
|
22
|
+
border-color: var(--g-color-base-generic-hover);
|
23
23
|
cursor: pointer;
|
24
24
|
}
|
25
25
|
.bc-feed-custom-switcher__custom-switcher-element_content {
|
@@ -34,11 +34,11 @@ unpredictable css rules order in build */
|
|
34
34
|
align-items: center;
|
35
35
|
height: 20px;
|
36
36
|
padding: 0 6px;
|
37
|
-
background-color: var(--
|
37
|
+
background-color: var(--g-color-base-selection);
|
38
38
|
border-radius: 4px;
|
39
39
|
transition: backgound-color 0.1s linear;
|
40
|
-
font-size: var(--
|
41
|
-
line-height: var(--
|
40
|
+
font-size: var(--g-text-body-1-font-size);
|
41
|
+
line-height: var(--g-text-body-1-line-height);
|
42
42
|
}
|
43
43
|
.bc-feed-custom-switcher__custom-switcher-element_arrow {
|
44
44
|
display: flex;
|
@@ -9,7 +9,7 @@ unpredictable css rules order in build */
|
|
9
9
|
}
|
10
10
|
.bc-paginator__link {
|
11
11
|
text-decoration: none;
|
12
|
-
color: var(--
|
12
|
+
color: var(--g-color-text-primary);
|
13
13
|
}
|
14
14
|
.bc-paginator__item {
|
15
15
|
display: inline-flex;
|
@@ -19,9 +19,9 @@ unpredictable css rules order in build */
|
|
19
19
|
min-height: 44px;
|
20
20
|
margin-left: 4px;
|
21
21
|
padding: 12px 0px;
|
22
|
-
color: var(--
|
23
|
-
font-size: var(--
|
24
|
-
line-height: var(--
|
22
|
+
color: var(--g-color-text-primary);
|
23
|
+
font-size: var(--g-text-body-2-font-size);
|
24
|
+
line-height: var(--g-text-body-2-line-height);
|
25
25
|
}
|
26
26
|
.bc-paginator__item_type_page {
|
27
27
|
--bc-border-radius: 10px;
|
@@ -31,10 +31,10 @@ unpredictable css rules order in build */
|
|
31
31
|
border-radius: var(--bc-border-radius);
|
32
32
|
}
|
33
33
|
.bc-paginator__item_type_page:hover {
|
34
|
-
background: var(--
|
34
|
+
background: var(--g-color-base-simple-hover);
|
35
35
|
}
|
36
36
|
.bc-paginator__item_type_page.bc-paginator__item_active {
|
37
|
-
background: var(--
|
37
|
+
background: var(--g-color-base-simple-hover);
|
38
38
|
cursor: default;
|
39
39
|
}
|
40
40
|
.bc-paginator__pagination {
|
@@ -32,38 +32,38 @@ unpredictable css rules order in build */
|
|
32
32
|
margin-bottom: 8px;
|
33
33
|
}
|
34
34
|
.bc-post-card__title_size_s {
|
35
|
-
font-size: var(--
|
36
|
-
line-height: var(--
|
35
|
+
font-size: var(--g-text-header-1-font-size);
|
36
|
+
line-height: var(--g-text-header-1-line-height);
|
37
37
|
color: var(--pc-text-header-color);
|
38
|
-
font-weight: var(--
|
38
|
+
font-weight: var(--g-text-accent-font-weight);
|
39
39
|
}
|
40
40
|
.bc-post-card__title_size_m {
|
41
|
-
font-size: var(--
|
42
|
-
line-height: var(--
|
41
|
+
font-size: var(--g-text-display-2-font-size);
|
42
|
+
line-height: var(--g-text-display-2-line-height);
|
43
43
|
color: var(--pc-text-header-color);
|
44
|
-
font-weight: var(--
|
44
|
+
font-weight: var(--g-text-accent-font-weight);
|
45
45
|
}
|
46
46
|
@media (max-width: 576px) {
|
47
47
|
.bc-post-card__title_size_m {
|
48
|
-
font-size: var(--
|
49
|
-
line-height: var(--
|
48
|
+
font-size: var(--g-text-display-1-font-size);
|
49
|
+
line-height: var(--g-text-display-1-line-height);
|
50
50
|
}
|
51
51
|
}
|
52
52
|
.bc-post-card__image-container {
|
53
53
|
height: 156px;
|
54
54
|
}
|
55
55
|
.bc-post-card__tag {
|
56
|
-
color: var(--
|
57
|
-
font-weight: var(--
|
56
|
+
color: var(--g-color-text-secondary);
|
57
|
+
font-weight: var(--g-text-accent-font-weight);
|
58
58
|
}
|
59
59
|
.bc-post-card__tag_size_s {
|
60
|
-
font-size: var(--
|
61
|
-
line-height: var(--
|
60
|
+
font-size: var(--g-text-body-2-font-size);
|
61
|
+
line-height: var(--g-text-body-2-line-height);
|
62
62
|
padding-bottom: 4px;
|
63
63
|
}
|
64
64
|
.bc-post-card__tag_size_m {
|
65
|
-
font-size: var(--
|
66
|
-
line-height: var(--
|
65
|
+
font-size: var(--g-text-body-3-font-size);
|
66
|
+
line-height: var(--g-text-body-3-line-height);
|
67
67
|
padding-bottom: 8px;
|
68
68
|
}
|
69
69
|
.bc-post-card__description {
|
@@ -72,7 +72,7 @@ unpredictable css rules order in build */
|
|
72
72
|
text-overflow: ellipsis;
|
73
73
|
max-height: 96px;
|
74
74
|
white-space: initial;
|
75
|
-
color: var(--
|
75
|
+
color: var(--g-color-text-primary);
|
76
76
|
}
|
77
77
|
@supports (-webkit-line-clamp: 5) {
|
78
78
|
.bc-post-card__description {
|
@@ -30,5 +30,5 @@ export const PostCard = ({ post, metrikaGoals, fullWidth = false, size = 's', sh
|
|
30
30
|
blogCard: true,
|
31
31
|
} }))),
|
32
32
|
React.createElement(CardBase.Footer, null,
|
33
|
-
React.createElement(SuggestPostInfo, { postId: blogPostId || id, date: date, readingTime: readingTime, hasUserLike: hasUserLike, likes: likesProps, size: size,
|
33
|
+
React.createElement(SuggestPostInfo, { postId: blogPostId || id, date: date, readingTime: readingTime, hasUserLike: hasUserLike, likes: likesProps, size: size, qa: "blog-suggest-block" }))));
|
34
34
|
};
|
@@ -1,8 +1,8 @@
|
|
1
1
|
/* use this for style redefinitions to awoid problems with
|
2
2
|
unpredictable css rules order in build */
|
3
3
|
.bc-post-info__item {
|
4
|
-
font-size: var(--
|
5
|
-
line-height: var(--
|
4
|
+
font-size: var(--g-text-body-2-font-size);
|
5
|
+
line-height: var(--g-text-body-2-line-height);
|
6
6
|
display: flex;
|
7
7
|
padding-right: 24px;
|
8
8
|
padding-top: 12px;
|
@@ -10,16 +10,16 @@ unpredictable css rules order in build */
|
|
10
10
|
align-items: center;
|
11
11
|
}
|
12
12
|
.bc-post-info__item_size_s {
|
13
|
-
font-size: var(--
|
14
|
-
line-height: var(--
|
13
|
+
font-size: var(--g-text-body-2-font-size);
|
14
|
+
line-height: var(--g-text-body-2-line-height);
|
15
15
|
}
|
16
16
|
.bc-post-info__item_size_m {
|
17
|
-
font-size: var(--
|
18
|
-
line-height: var(--
|
17
|
+
font-size: var(--g-text-body-3-font-size);
|
18
|
+
line-height: var(--g-text-body-3-line-height);
|
19
19
|
}
|
20
20
|
.bc-post-info__item:last-child {
|
21
|
-
font-size: var(--
|
22
|
-
line-height: var(--
|
21
|
+
font-size: var(--g-text-body-2-font-size);
|
22
|
+
line-height: var(--g-text-body-2-line-height);
|
23
23
|
display: flex;
|
24
24
|
padding-right: 0px;
|
25
25
|
padding-top: 12px;
|
@@ -27,32 +27,32 @@ unpredictable css rules order in build */
|
|
27
27
|
align-items: center;
|
28
28
|
}
|
29
29
|
.bc-post-info__switcher {
|
30
|
-
color: var(--
|
30
|
+
color: var(--g-color-text-secondary);
|
31
31
|
}
|
32
32
|
.bc-post-info__switcher:hover {
|
33
|
-
color: var(--
|
33
|
+
color: var(--g-color-text-primary);
|
34
34
|
}
|
35
35
|
.bc-post-info__switcher_theme_dark {
|
36
|
-
color: var(--
|
36
|
+
color: var(--g-color-text-light-secondary);
|
37
37
|
}
|
38
|
-
.bc-post-info__switcher_theme_dark.
|
39
|
-
color: var(--
|
38
|
+
.bc-post-info__switcher_theme_dark.gc-share-tooltip__container, .bc-post-info__switcher_theme_dark.gc-share-popover__container {
|
39
|
+
color: var(--g-color-text-light-secondary);
|
40
40
|
}
|
41
41
|
.bc-post-info__switcher_theme_dark:hover {
|
42
|
-
color: var(--
|
42
|
+
color: var(--g-color-text-light-primary);
|
43
43
|
}
|
44
|
-
.bc-post-info__switcher_theme_dark:hover.
|
45
|
-
color: var(--
|
44
|
+
.bc-post-info__switcher_theme_dark:hover.gc-share-tooltip__container, .bc-post-info__switcher_theme_dark:hover.gc-share-popover__container {
|
45
|
+
color: var(--g-color-text-light-primary);
|
46
46
|
}
|
47
47
|
.bc-post-info__container {
|
48
48
|
display: flex;
|
49
49
|
align-items: flex-start;
|
50
50
|
flex-wrap: wrap;
|
51
51
|
padding-top: 12px;
|
52
|
-
color: var(--
|
52
|
+
color: var(--g-color-text-secondary);
|
53
53
|
}
|
54
54
|
.bc-post-info__container_theme_dark {
|
55
|
-
color: var(--
|
55
|
+
color: var(--g-color-text-light-secondary);
|
56
56
|
}
|
57
57
|
.bc-post-info__icon {
|
58
58
|
margin-right: 6px;
|
@@ -73,10 +73,10 @@ unpredictable css rules order in build */
|
|
73
73
|
cursor: pointer;
|
74
74
|
}
|
75
75
|
.bc-post-info__content_cursor:hover {
|
76
|
-
color: var(--
|
76
|
+
color: var(--g-color-text-primary);
|
77
77
|
}
|
78
78
|
.bc-post-info__content_cursor.bc-post-info__content_theme_dark:hover {
|
79
|
-
color: var(--
|
79
|
+
color: var(--g-color-text-light-primary);
|
80
80
|
}
|
81
81
|
.bc-post-info__likes {
|
82
82
|
display: flex;
|
@@ -1,11 +1,11 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import { PostData } from '../../models/common';
|
2
|
+
import { PostData, QAProps } from '../../models/common';
|
3
3
|
import './PostInfo.css';
|
4
4
|
export type BlogMetrikaGoals = {
|
5
5
|
sharing?: string;
|
6
6
|
save?: string;
|
7
7
|
};
|
8
|
-
type PostInfoProps = {
|
8
|
+
type PostInfoProps = QAProps & {
|
9
9
|
postId: PostData['id'];
|
10
10
|
readingTime: PostData['readingTime'];
|
11
11
|
date: PostData['date'];
|
@@ -14,7 +14,6 @@ type PostInfoProps = {
|
|
14
14
|
* @deprecated Metrika will be deleted after launch of analyticsEvents
|
15
15
|
*/
|
16
16
|
metrikaGoals?: BlogMetrikaGoals;
|
17
|
-
dataQa?: string;
|
18
17
|
};
|
19
18
|
/**
|
20
19
|
* Blog post info panel component
|
@@ -24,7 +23,7 @@ type PostInfoProps = {
|
|
24
23
|
* @param date - post create date
|
25
24
|
* @param theme - theme name
|
26
25
|
* @param metrikaGoals - metrika goals name
|
27
|
-
* @param
|
26
|
+
* @param qa - test-attr
|
28
27
|
*
|
29
28
|
* @returns jsx
|
30
29
|
*/
|
@@ -15,15 +15,15 @@ const b = block('post-info');
|
|
15
15
|
* @param date - post create date
|
16
16
|
* @param theme - theme name
|
17
17
|
* @param metrikaGoals - metrika goals name
|
18
|
-
* @param
|
18
|
+
* @param qa - test-attr
|
19
19
|
*
|
20
20
|
* @returns jsx
|
21
21
|
*/
|
22
|
-
export const PostInfo = ({ date, readingTime, postId, theme = 'light', metrikaGoals,
|
22
|
+
export const PostInfo = ({ date, readingTime, postId, theme = 'light', metrikaGoals, qa, }) => {
|
23
23
|
const { likes } = useContext(PostPageContext);
|
24
24
|
return (React.createElement("div", { className: b('container', { theme }) },
|
25
25
|
date && React.createElement(Date, { date: date }),
|
26
26
|
readingTime && React.createElement(ReadingTime, { readingTime: readingTime }),
|
27
27
|
React.createElement(Sharing, { metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.sharing, theme: theme }),
|
28
|
-
likes && (React.createElement(Save, { postId: postId, title: likes.likesCount, hasUserLike: likes.hasUserLike, handleUserLike: likes.handleUserLike, metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.save, theme: theme,
|
28
|
+
likes && (React.createElement(Save, { postId: postId, title: likes.likesCount, hasUserLike: likes.hasUserLike, handleUserLike: likes.handleUserLike, metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.save, theme: theme, qa: qa }))));
|
29
29
|
};
|
@@ -1,10 +1,9 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import { PostData, ToggleLikeCallbackType } from '../../models/common';
|
2
|
+
import { PostData, QAProps, ToggleLikeCallbackType } from '../../models/common';
|
3
3
|
import './PostInfo.css';
|
4
|
-
export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTime' | 'hasUserLike'
|
4
|
+
export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTime' | 'hasUserLike'>, QAProps {
|
5
5
|
postId: PostData['blogPostId'];
|
6
6
|
size?: 's' | 'm';
|
7
|
-
dataQa?: string;
|
8
7
|
likes?: {
|
9
8
|
likesCount?: number;
|
10
9
|
hasUserLike?: boolean;
|
@@ -19,7 +18,7 @@ export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTi
|
|
19
18
|
* @param readingTime - post reading time
|
20
19
|
* @param hasUserLike - flag that the user liked the post
|
21
20
|
* @param likes - likes count
|
22
|
-
* @param
|
21
|
+
* @param qa - test-attr
|
23
22
|
* @param size - text size
|
24
23
|
* @param isModernIcon - flag what we need render 'bookmark' icon
|
25
24
|
*
|
@@ -14,13 +14,13 @@ const b = block('post-info');
|
|
14
14
|
* @param readingTime - post reading time
|
15
15
|
* @param hasUserLike - flag that the user liked the post
|
16
16
|
* @param likes - likes count
|
17
|
-
* @param
|
17
|
+
* @param qa - test-attr
|
18
18
|
* @param size - text size
|
19
19
|
* @param isModernIcon - flag what we need render 'bookmark' icon
|
20
20
|
*
|
21
21
|
* @returns jsx
|
22
22
|
*/
|
23
|
-
export const SuggestPostInfo = ({ postId, date, readingTime, likes, size = 's',
|
23
|
+
export const SuggestPostInfo = ({ postId, date, readingTime, likes, size = 's', qa, }) => {
|
24
24
|
const { hasUserLike, likesCount, handleLike } = useLikes({
|
25
25
|
hasLike: likes === null || likes === void 0 ? void 0 : likes.hasUserLike,
|
26
26
|
count: likes === null || likes === void 0 ? void 0 : likes.likesCount,
|
@@ -31,5 +31,5 @@ export const SuggestPostInfo = ({ postId, date, readingTime, likes, size = 's',
|
|
31
31
|
React.createElement("div", { className: b('suggest-container') },
|
32
32
|
date && React.createElement(Date, { date: date, size: size }),
|
33
33
|
readingTime && React.createElement(ReadingTime, { readingTime: readingTime, size: size })),
|
34
|
-
likes && postId && (React.createElement(Save, { postId: postId, title: likesCount, hasUserLike: hasUserLike, handleUserLike: handleLike, size: size,
|
34
|
+
likes && postId && (React.createElement(Save, { postId: postId, title: likesCount, hasUserLike: hasUserLike, handleUserLike: handleLike, size: size, qa: qa }))));
|
35
35
|
};
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React from 'react';
|
2
|
+
import { QAProps } from '../../../models/common';
|
2
3
|
import '../PostInfo.css';
|
3
|
-
type SaveProps = {
|
4
|
+
type SaveProps = QAProps & {
|
4
5
|
title: string | number;
|
5
6
|
postId: number;
|
6
7
|
hasUserLike: boolean;
|
@@ -10,7 +11,6 @@ type SaveProps = {
|
|
10
11
|
* @deprecated Metrika will be deleted after launch of analyticsEvents
|
11
12
|
*/
|
12
13
|
metrikaGoal?: string;
|
13
|
-
dataQa?: string;
|
14
14
|
size?: 's' | 'm';
|
15
15
|
};
|
16
16
|
/**
|
@@ -20,7 +20,7 @@ type SaveProps = {
|
|
20
20
|
* @param postId - post id
|
21
21
|
* @param hasUserLike - flag what blog has like from current user
|
22
22
|
* @param metrikaGoal - metrika goal name
|
23
|
-
* @param
|
23
|
+
* @param qa - test-attr
|
24
24
|
* @param size - text size
|
25
25
|
*
|
26
26
|
* @returns jsx
|
@@ -19,12 +19,12 @@ const b = block('post-info');
|
|
19
19
|
* @param postId - post id
|
20
20
|
* @param hasUserLike - flag what blog has like from current user
|
21
21
|
* @param metrikaGoal - metrika goal name
|
22
|
-
* @param
|
22
|
+
* @param qa - test-attr
|
23
23
|
* @param size - text size
|
24
24
|
*
|
25
25
|
* @returns jsx
|
26
26
|
*/
|
27
|
-
export const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, theme,
|
27
|
+
export const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, theme, qa, }) => {
|
28
28
|
const { toggleLike, isSignedInUser, requireSignIn } = useContext(LikesContext);
|
29
29
|
const handleAnalytics = useAnalytics(DefaultEventNames.SaveButton);
|
30
30
|
const isLikeable = Boolean(toggleLike);
|
@@ -45,7 +45,7 @@ export const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal,
|
|
45
45
|
handleUserLike();
|
46
46
|
metrika.reachGoal(MetrikaCounter.CrossSite, metrikaGoal);
|
47
47
|
handleAnalytics();
|
48
|
-
}, "data-qa": `${
|
48
|
+
}, "data-qa": `${qa ? qa + '-' : ''}save` },
|
49
49
|
React.createElement("div", { className: b('content', { cursor: isLikeable, theme }) },
|
50
50
|
React.createElement("span", { className: b('icon') },
|
51
51
|
React.createElement(Icon, { data: hasUserLike ? SaveFilled : SaveIcon, size: ICON_SIZE, className: b({ filled: Boolean(hasUserLike) }) })),
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { useCallback, useContext } from 'react';
|
2
|
+
import { ShareLayoutDirection, SharePopover } from '@gravity-ui/components';
|
2
3
|
import { useAnalytics } from '@gravity-ui/page-constructor';
|
3
|
-
import { SharePopover } from '@gravity-ui/uikit';
|
4
4
|
import { MobileContext } from '../../../contexts/MobileContext';
|
5
5
|
import { PostPageContext } from '../../../contexts/PostPageContext';
|
6
6
|
import { RouterContext } from '../../../contexts/RouterContext';
|
@@ -27,5 +27,5 @@ export const Sharing = ({ theme, metrikaGoal }) => {
|
|
27
27
|
}, [handleAnalyticsGlobal, handleMetrika]);
|
28
28
|
return (React.createElement("div", { className: b('item') },
|
29
29
|
React.createElement("div", { className: b('icon') },
|
30
|
-
React.createElement(SharePopover, { url: getAbsolutePath(router), className: b('share'), iconClass: b('share-icon'), switcherClassName: b('switcher', { theme }), tooltipClassName: b('popup'), useWebShareApi: isMobile, direction:
|
30
|
+
React.createElement(SharePopover, { url: getAbsolutePath(router), className: b('share'), iconClass: b('share-icon'), switcherClassName: b('switcher', { theme }), tooltipClassName: b('popup'), useWebShareApi: isMobile, direction: ShareLayoutDirection.Column, buttonTitle: i18(Keyset.ActionShare), customIcon: ShareArrowUp, placement: "bottom", openByHover: false, shareOptions: shareOptions, onClick: handleAnalytics }))));
|
31
31
|
};
|
@@ -26,7 +26,7 @@ unpredictable css rules order in build */
|
|
26
26
|
flex-direction: column;
|
27
27
|
align-items: center;
|
28
28
|
justify-content: center;
|
29
|
-
color: var(--
|
29
|
+
color: var(--g-color-base-danger-medium);
|
30
30
|
padding-bottom: 12px;
|
31
31
|
}
|
32
32
|
.bc-posts__paginator {
|
@@ -14,12 +14,12 @@ unpredictable css rules order in build */
|
|
14
14
|
}
|
15
15
|
.bc-posts-empty__title {
|
16
16
|
margin-top: 24px;
|
17
|
-
font-size: var(--
|
18
|
-
line-height: var(--
|
19
|
-
font-weight: var(--
|
17
|
+
font-size: var(--g-text-display-2-font-size);
|
18
|
+
line-height: var(--g-text-display-2-line-height);
|
19
|
+
font-weight: var(--g-text-accent-font-weight);
|
20
20
|
}
|
21
21
|
.bc-posts-empty__subtitle {
|
22
22
|
margin-top: 16px;
|
23
|
-
font-size: var(--
|
24
|
-
line-height: var(--
|
23
|
+
font-size: var(--g-text-body-3-font-size);
|
24
|
+
line-height: var(--g-text-body-3-line-height);
|
25
25
|
}
|
@@ -16,14 +16,14 @@ unpredictable css rules order in build */
|
|
16
16
|
}
|
17
17
|
.bc-posts-error__title {
|
18
18
|
margin-top: 24px;
|
19
|
-
font-size: var(--
|
20
|
-
line-height: var(--
|
21
|
-
font-weight: var(--
|
19
|
+
font-size: var(--g-text-display-2-font-size);
|
20
|
+
line-height: var(--g-text-display-2-line-height);
|
21
|
+
font-weight: var(--g-text-accent-font-weight);
|
22
22
|
}
|
23
23
|
.bc-posts-error__subtitle {
|
24
24
|
margin-top: 16px;
|
25
|
-
font-size: var(--
|
26
|
-
line-height: var(--
|
25
|
+
font-size: var(--g-text-body-3-font-size);
|
26
|
+
line-height: var(--g-text-body-3-line-height);
|
27
27
|
}
|
28
28
|
.bc-posts-error__button {
|
29
29
|
padding: 24px 0 48px;
|
@@ -43,8 +43,8 @@ unpredictable css rules order in build */
|
|
43
43
|
margin: 24px;
|
44
44
|
padding: 16px 20px;
|
45
45
|
border-radius: calc(var(--pc-border-radius) / 2);
|
46
|
-
background-color: var(--
|
47
|
-
font-size: var(--
|
46
|
+
background-color: var(--g-color-base-float);
|
47
|
+
font-size: var(--g-text-body-2-font-size);
|
48
48
|
}
|
49
49
|
.bc-prompt_close {
|
50
50
|
pointer-events: none;
|