@gravity-ui/blog-constructor 4.4.2 → 5.0.1
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/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;
|