@gravity-ui/blog-constructor 4.4.1 → 5.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (95) hide show
  1. package/build/cjs/blocks/Author/Author.css +2 -2
  2. package/build/cjs/blocks/Banner/schema.d.ts +11 -0
  3. package/build/cjs/blocks/CTA/CTA.css +1 -1
  4. package/build/cjs/blocks/CTA/CTA.js +1 -1
  5. package/build/cjs/blocks/CTA/schema.d.ts +11 -0
  6. package/build/cjs/blocks/ColoredText/schema.d.ts +11 -0
  7. package/build/cjs/blocks/Header/Header.js +1 -1
  8. package/build/cjs/blocks/Media/Media.css +1 -1
  9. package/build/cjs/blocks/Meta/Meta.js +2 -2
  10. package/build/cjs/components/ButtonWithIcon/ButtonWithIcon.css +6 -6
  11. package/build/cjs/components/FeedHeader/FeedHeader.css +3 -3
  12. package/build/cjs/components/FeedHeader/FeedHeader.js +1 -1
  13. package/build/cjs/components/FeedHeader/components/Controls/Controls.css +14 -12
  14. package/build/cjs/components/FeedHeader/components/CustomSelectOption/CustomSelectOption.css +2 -2
  15. package/build/cjs/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.css +9 -9
  16. package/build/cjs/components/Paginator/Paginator.css +6 -6
  17. package/build/cjs/components/PostCard/PostCard.css +15 -15
  18. package/build/cjs/components/PostCard/PostCard.js +1 -1
  19. package/build/cjs/components/PostInfo/PostInfo.css +20 -20
  20. package/build/cjs/components/PostInfo/PostInfo.d.ts +3 -4
  21. package/build/cjs/components/PostInfo/PostInfo.js +3 -3
  22. package/build/cjs/components/PostInfo/SuggestPostInfo.d.ts +3 -4
  23. package/build/cjs/components/PostInfo/SuggestPostInfo.js +3 -3
  24. package/build/cjs/components/PostInfo/components/Save.d.ts +3 -3
  25. package/build/cjs/components/PostInfo/components/Save.js +3 -3
  26. package/build/cjs/components/PostInfo/components/Sharing.js +2 -2
  27. package/build/cjs/components/Posts/Posts.css +1 -1
  28. package/build/cjs/components/PostsEmpty/PostsEmpty.css +5 -5
  29. package/build/cjs/components/PostsError/PostError.css +5 -5
  30. package/build/cjs/components/Prompt/Prompt.css +2 -2
  31. package/build/cjs/components/Search/Search.css +4 -4
  32. package/build/cjs/components/Wrapper/Wrapper.d.ts +2 -3
  33. package/build/cjs/components/Wrapper/Wrapper.js +2 -2
  34. package/build/cjs/constants.d.ts +2 -0
  35. package/build/cjs/constants.js +3 -1
  36. package/build/cjs/containers/BlogPage/BlogPage.css +8 -8
  37. package/build/cjs/containers/BlogPostPage/BlogPostPage.css +49 -49
  38. package/build/cjs/containers/BlogPostPage/BlogPostPage.d.ts +1 -1
  39. package/build/cjs/contexts/PostPageContext.d.ts +1 -1
  40. package/build/cjs/contexts/theme/ThemeProvider.js +4 -4
  41. package/build/cjs/models/common.d.ts +3 -0
  42. package/build/cjs/schema/index.d.ts +33 -0
  43. package/build/cjs/utils/common.d.ts +1 -0
  44. package/build/esm/blocks/Author/Author.css +2 -2
  45. package/build/esm/blocks/Banner/schema.d.ts +11 -0
  46. package/build/esm/blocks/CTA/CTA.css +1 -1
  47. package/build/esm/blocks/CTA/CTA.js +1 -1
  48. package/build/esm/blocks/CTA/schema.d.ts +11 -0
  49. package/build/esm/blocks/ColoredText/schema.d.ts +11 -0
  50. package/build/esm/blocks/Header/Header.js +1 -1
  51. package/build/esm/blocks/Media/Media.css +1 -1
  52. package/build/esm/blocks/Meta/Meta.js +2 -2
  53. package/build/esm/components/ButtonWithIcon/ButtonWithIcon.css +6 -6
  54. package/build/esm/components/FeedHeader/FeedHeader.css +3 -3
  55. package/build/esm/components/FeedHeader/FeedHeader.js +1 -1
  56. package/build/esm/components/FeedHeader/components/Controls/Controls.css +14 -12
  57. package/build/esm/components/FeedHeader/components/CustomSelectOption/CustomSelectOption.css +2 -2
  58. package/build/esm/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.css +9 -9
  59. package/build/esm/components/Paginator/Paginator.css +6 -6
  60. package/build/esm/components/PostCard/PostCard.css +15 -15
  61. package/build/esm/components/PostCard/PostCard.js +1 -1
  62. package/build/esm/components/PostInfo/PostInfo.css +20 -20
  63. package/build/esm/components/PostInfo/PostInfo.d.ts +3 -4
  64. package/build/esm/components/PostInfo/PostInfo.js +3 -3
  65. package/build/esm/components/PostInfo/SuggestPostInfo.d.ts +3 -4
  66. package/build/esm/components/PostInfo/SuggestPostInfo.js +3 -3
  67. package/build/esm/components/PostInfo/components/Save.d.ts +3 -3
  68. package/build/esm/components/PostInfo/components/Save.js +3 -3
  69. package/build/esm/components/PostInfo/components/Sharing.js +2 -2
  70. package/build/esm/components/Posts/Posts.css +1 -1
  71. package/build/esm/components/PostsEmpty/PostsEmpty.css +5 -5
  72. package/build/esm/components/PostsError/PostError.css +5 -5
  73. package/build/esm/components/Prompt/Prompt.css +2 -2
  74. package/build/esm/components/Search/Search.css +4 -4
  75. package/build/esm/components/Wrapper/Wrapper.d.ts +2 -3
  76. package/build/esm/components/Wrapper/Wrapper.js +2 -2
  77. package/build/esm/constants.d.ts +2 -0
  78. package/build/esm/constants.js +2 -0
  79. package/build/esm/containers/BlogPage/BlogPage.css +8 -8
  80. package/build/esm/containers/BlogPostPage/BlogPostPage.css +49 -49
  81. package/build/esm/containers/BlogPostPage/BlogPostPage.d.ts +1 -1
  82. package/build/esm/contexts/PostPageContext.d.ts +1 -1
  83. package/build/esm/contexts/theme/ThemeProvider.js +5 -5
  84. package/build/esm/models/common.d.ts +3 -0
  85. package/build/esm/schema/index.d.ts +33 -0
  86. package/build/esm/utils/common.d.ts +1 -0
  87. package/package.json +8 -7
  88. package/server/models/common.d.ts +3 -0
  89. package/styles/root.css +8 -8
  90. package/styles/root.scss +8 -8
  91. package/styles/storybook/common.scss +12 -6
  92. package/styles/storybook/palette.scss +6 -6
  93. package/styles/storybook/typography.scss +46 -46
  94. package/styles/yfm.css +26 -26
  95. package/styles/yfm.scss +14 -14
@@ -17,7 +17,7 @@ unpredictable css rules order in build */
17
17
  }
18
18
  }
19
19
  .bc-author__description {
20
- color: var(--yc-color-text-primary);
20
+ color: var(--g-color-text-primary);
21
21
  }
22
22
  .bc-author__content {
23
23
  display: flex;
@@ -27,5 +27,5 @@ unpredictable css rules order in build */
27
27
  position: relative;
28
28
  }
29
29
  .bc-author__container {
30
- background-color: var(--yc-color-promo-base-silver);
30
+ background-color: var(--pc-color-base-silver);
31
31
  }
@@ -82,6 +82,17 @@ export declare const Banner: {
82
82
  type: string;
83
83
  enum: string[];
84
84
  };
85
+ list: {
86
+ type: string;
87
+ items: {
88
+ type: string;
89
+ properties: {
90
+ when: {
91
+ type: string;
92
+ };
93
+ };
94
+ };
95
+ };
85
96
  paddingTop: {
86
97
  type: string;
87
98
  enum: string[];
@@ -1,6 +1,6 @@
1
1
  .bc-cta__card {
2
2
  display: flex;
3
- background-color: var(--yc-color-base-float);
3
+ background-color: var(--g-color-base-float);
4
4
  border-radius: var(--bc-border-radius);
5
5
  min-height: 80px;
6
6
  align-content: center;
@@ -21,7 +21,7 @@ const CTA = ({ items, paddingTop, paddingBottom }) => {
21
21
  return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
22
22
  [paddings_1.PaddingsDirections.top]: paddingTop,
23
23
  [paddings_1.PaddingsDirections.bottom]: paddingBottom,
24
- }, className: b('content'), dataQa: "blog-cta-content" }, items.map((content, index) => {
24
+ }, className: b('content'), qa: "blog-cta-content" }, items.map((content, index) => {
25
25
  var _a;
26
26
  const contentData = (0, common_1.updateContentSizes)(content);
27
27
  (_a = contentData.links) === null || _a === void 0 ? void 0 : _a.forEach((link) => {
@@ -79,6 +79,17 @@ export declare const CTA: {
79
79
  type: string;
80
80
  enum: string[];
81
81
  };
82
+ list: {
83
+ type: string;
84
+ items: {
85
+ type: string;
86
+ properties: {
87
+ when: {
88
+ type: string;
89
+ };
90
+ };
91
+ };
92
+ };
82
93
  };
83
94
  };
84
95
  };
@@ -99,6 +99,17 @@ export declare const ColoredText: {
99
99
  type: string;
100
100
  enum: string[];
101
101
  };
102
+ list: {
103
+ type: string;
104
+ items: {
105
+ type: string;
106
+ properties: {
107
+ when: {
108
+ type: string;
109
+ };
110
+ };
111
+ };
112
+ };
102
113
  paddingTop: {
103
114
  type: string;
104
115
  enum: string[];
@@ -39,6 +39,6 @@ const Header = (props) => {
39
39
  [paddings_1.PaddingsDirections.bottom]: paddingBottom,
40
40
  } },
41
41
  react_1.default.createElement(page_constructor_1.HeaderBlock, Object.assign({}, props, { title: title, description: description, breadcrumbs: breadcrumbs }),
42
- react_1.default.createElement(PostInfo_1.PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, theme: theme, dataQa: "blog-header-meta-container" }))));
42
+ react_1.default.createElement(PostInfo_1.PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, theme: theme, qa: "blog-header-meta-container" }))));
43
43
  };
44
44
  exports.Header = Header;
@@ -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(--yc-color-line-generic);
15
+ border: 1px solid var(--g-color-line-generic);
16
16
  overflow: hidden;
17
17
  }
18
18
  .bc-media__content {
@@ -36,12 +36,12 @@ const Meta = (props) => {
36
36
  return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
37
37
  [paddings_1.PaddingsDirections.top]: paddingTop,
38
38
  [paddings_1.PaddingsDirections.bottom]: paddingBottom,
39
- }, dataQa: "blog-meta-content" },
39
+ }, qa: "blog-meta-content" },
40
40
  breadcrumbs && (react_1.default.createElement(page_constructor_1.HeaderBreadcrumbs, { items: breadcrumbs.items, className: b('breadcrumbs'), theme: theme, metrikaGoals: breadcrumbs.metrikaGoals })),
41
41
  title && (react_1.default.createElement(page_constructor_1.YFMWrapper, { content: title, modifiers: {
42
42
  blogBreadcrumbs: true,
43
43
  resetPaddings: true,
44
44
  } })),
45
- post && (react_1.default.createElement(PostInfo_1.PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, dataQa: "blog-meta-block" }))));
45
+ post && (react_1.default.createElement(PostInfo_1.PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, qa: "blog-meta-block" }))));
46
46
  };
47
47
  exports.Meta = Meta;
@@ -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(--yc-color-text-primary);
43
+ color: var(--g-color-text-primary);
44
44
  }
45
45
  .bc-button-with-icon_theme_secondary {
46
- color: var(--yc-color-text-secondary);
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(--yc-color-text-link-hover);
57
+ color: var(--g-color-text-link-hover);
58
58
  }
59
59
  .bc-button-with-icon_theme_accent {
60
- color: var(--yc-color-text-yandex-red);
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(--yc-color-text-secondary);
69
+ color: var(--g-color-text-secondary);
70
70
  }
71
71
  .bc-button-with-icon_disabled:hover {
72
- color: var(--yc-color-text-secondary);
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(--yc-color-text-light-primary);
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(--yc-text-display-2-font-size);
53
- line-height: var(--yc-text-display-2-line-height);
52
+ font-size: var(--g-text-display-2-font-size);
53
+ line-height: var(--g-text-display-2-line-height);
54
54
  }
@@ -7,7 +7,7 @@ const page_constructor_1 = require("@gravity-ui/page-constructor");
7
7
  const cn_1 = require("../../utils/cn");
8
8
  const Controls_1 = require("./components/Controls/Controls");
9
9
  const b = (0, cn_1.block)('feed-header');
10
- const FeedHeader = ({ tags, services, handleLoadData, offset = 'default', background, theme = 'default', verticalOffset = 'l', className, queryParams, }) => {
10
+ const FeedHeader = ({ tags, services, handleLoadData, offset = 'default', background, theme = 'light', verticalOffset = 'l', className, queryParams, }) => {
11
11
  const backgroundThemed = background && (0, page_constructor_1.getThemedValue)(background, theme);
12
12
  return (react_1.default.createElement("header", { className: b('header', { ['has-background']: Boolean(background) }, className) },
13
13
  (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color) ? (react_1.default.createElement(page_constructor_1.FullWidthBackground, { style: { backgroundColor: backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color }, theme: "rounded" })) : null,
@@ -14,22 +14,22 @@ 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(--yc-text-display-4-font-size);
18
- line-height: var(--yc-text-display-4-line-height);
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
  }
22
22
  .bc-feed-controls__search {
23
- background-color: var(--yc-color-base-background);
23
+ background-color: var(--g-color-base-background);
24
24
  border-radius: 10px;
25
25
  width: 100%;
26
26
  max-width: 100%;
27
27
  }
28
28
  .bc-feed-controls__search .yc-text-input_view_normal .yc-text-input__control {
29
- border-color: var(--yc-color-base-background);
29
+ border-color: var(--g-color-base-background);
30
30
  }
31
31
  .bc-feed-controls__select {
32
- background-color: var(--yc-color-base-background);
32
+ background-color: var(--g-color-base-background);
33
33
  border-radius: 10px;
34
34
  width: 100%;
35
35
  }
@@ -47,7 +47,7 @@ unpredictable css rules order in build */
47
47
  display: none;
48
48
  }
49
49
  .bc-feed-controls__popup.bc-feed-controls__popup .g-select-list .yc-list {
50
- max-height: calc(500px - var(--yc-text-body-3-line-height) - 12px);
50
+ max-height: calc(500px - var(--g-text-body-3-line-height) - 12px);
51
51
  }
52
52
  .bc-feed-controls__popup.bc-feed-controls__popup .yc-list__item {
53
53
  margin: 4px;
@@ -68,21 +68,23 @@ unpredictable css rules order in build */
68
68
  }
69
69
 
70
70
  .bc-feed-controls__popup-filter .yc-text-input__control {
71
- font-size: var(--yc-text-body-2-font-size);
72
- line-height: var(--yc-text-body-2-line-height);
71
+ font-size: var(--g-text-body-2-font-size);
72
+ line-height: var(--g-text-body-2-line-height);
73
73
  border: none;
74
74
  }
75
75
  .bc-feed-controls__popup-filter .yc-text-input__control:hover, .bc-feed-controls__popup-filter .yc-text-input__control:focus {
76
76
  border: none;
77
77
  }
78
78
  .bc-feed-controls__select:hover {
79
- background-color: var(--yc-color-base-background);
79
+ background-color: var(--g-color-base-background);
80
80
  width: 100%;
81
81
  }
82
82
  .bc-feed-controls__saved-only-button {
83
83
  border-radius: 10px;
84
84
  }
85
85
  .bc-feed-controls__saved-only-button_savedOnly {
86
+ --g-button-background-color: var(--pc-monochrome-button-background-color);
87
+ --g-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
86
88
  --yc-button-background-color: var(--pc-monochrome-button-background-color);
87
89
  --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
88
90
  }
@@ -93,7 +95,7 @@ unpredictable css rules order in build */
93
95
  color: var(--pc-monochrome-button-color);
94
96
  }
95
97
  .bc-feed-controls__saved-only-button_savedOnly:focus {
96
- color: var(--yc-color-base-background);
98
+ color: var(--g-color-base-background);
97
99
  }
98
100
  .bc-feed-controls__filter-item {
99
101
  margin-right: 8px;
@@ -113,8 +115,8 @@ unpredictable css rules order in build */
113
115
  flex-grow: 0;
114
116
  }
115
117
  .bc-feed-controls__icon {
116
- color: var(--yc-my-color-brand-normal);
118
+ color: var(--g-color-base-brand);
117
119
  }
118
120
  .bc-feed-controls__icon_savedOnly {
119
- color: var(--yc-color-base-background);
121
+ color: var(--g-color-base-background);
120
122
  }
@@ -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(--yc-text-body-2-font-size);
5
- line-height: var(--yc-text-body-2-line-height);
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(--yc-text-body-2-font-size);
5
- line-height: var(--yc-text-body-2-line-height);
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(--yc-color-base-background);
11
- border: 1px solid var(--yc-color-base-background);
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-wrapper.yc-popup-wrapper_open {
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(--yc-color-base-generic-hover);
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(--yc-color-base-selection);
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(--yc-text-body-1-font-size);
41
- line-height: var(--yc-text-body-1-line-height);
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(--yc-color-text-primary);
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(--yc-color-text-primary);
23
- font-size: var(--yc-text-body-2-font-size);
24
- line-height: var(--yc-text-body-2-line-height);
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(--yc-color-base-simple-hover);
34
+ background: var(--g-color-base-simple-hover);
35
35
  }
36
36
  .bc-paginator__item_type_page.bc-paginator__item_active {
37
- background: var(--yc-color-base-simple-hover);
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(--yc-text-header-1-font-size);
36
- line-height: var(--yc-text-header-1-line-height);
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(--yc-text-accent-font-weight);
38
+ font-weight: var(--g-text-accent-font-weight);
39
39
  }
40
40
  .bc-post-card__title_size_m {
41
- font-size: var(--yc-text-display-2-font-size);
42
- line-height: var(--yc-text-display-2-line-height);
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(--yc-text-accent-font-weight);
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(--yc-text-display-1-font-size);
49
- line-height: var(--yc-text-display-1-line-height);
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(--yc-color-text-secondary);
57
- font-weight: var(--yc-text-accent-font-weight);
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(--yc-text-body-2-font-size);
61
- line-height: var(--yc-text-body-2-line-height);
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(--yc-text-body-3-font-size);
66
- line-height: var(--yc-text-body-3-line-height);
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(--yc-color-text-primary);
75
+ color: var(--g-color-text-primary);
76
76
  }
77
77
  @supports (-webkit-line-clamp: 5) {
78
78
  .bc-post-card__description {
@@ -33,6 +33,6 @@ const PostCard = ({ post, metrikaGoals, fullWidth = false, size = 's', showTag =
33
33
  blogCard: true,
34
34
  } }))),
35
35
  react_1.default.createElement(page_constructor_1.CardBase.Footer, null,
36
- react_1.default.createElement(SuggestPostInfo_1.SuggestPostInfo, { postId: blogPostId || id, date: date, readingTime: readingTime, hasUserLike: hasUserLike, likes: likesProps, size: size, dataQa: "blog-suggest-block" }))));
36
+ react_1.default.createElement(SuggestPostInfo_1.SuggestPostInfo, { postId: blogPostId || id, date: date, readingTime: readingTime, hasUserLike: hasUserLike, likes: likesProps, size: size, qa: "blog-suggest-block" }))));
37
37
  };
38
38
  exports.PostCard = PostCard;
@@ -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(--yc-text-body-2-font-size);
5
- line-height: var(--yc-text-body-2-line-height);
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(--yc-text-body-2-font-size);
14
- line-height: var(--yc-text-body-2-line-height);
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(--yc-text-body-3-font-size);
18
- line-height: var(--yc-text-body-3-line-height);
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(--yc-text-body-2-font-size);
22
- line-height: var(--yc-text-body-2-line-height);
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(--yc-color-text-secondary);
30
+ color: var(--g-color-text-secondary);
31
31
  }
32
32
  .bc-post-info__switcher:hover {
33
- color: var(--yc-color-text-primary);
33
+ color: var(--g-color-text-primary);
34
34
  }
35
35
  .bc-post-info__switcher_theme_dark {
36
- color: var(--yc-color-text-light-secondary);
36
+ color: var(--g-color-text-light-secondary);
37
37
  }
38
- .bc-post-info__switcher_theme_dark.yc-share-tooltip__container, .bc-post-info__switcher_theme_dark.yc-share-popover__container {
39
- color: var(--yc-color-text-light-secondary);
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(--yc-color-text-light-primary);
42
+ color: var(--g-color-text-light-primary);
43
43
  }
44
- .bc-post-info__switcher_theme_dark:hover.yc-share-tooltip__container, .bc-post-info__switcher_theme_dark:hover.yc-share-popover__container {
45
- color: var(--yc-color-text-light-primary);
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(--yc-color-text-secondary);
52
+ color: var(--g-color-text-secondary);
53
53
  }
54
54
  .bc-post-info__container_theme_dark {
55
- color: var(--yc-color-text-light-secondary);
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(--yc-color-text-primary);
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(--yc-color-text-light-primary);
79
+ color: var(--g-color-text-light-primary);
80
80
  }
81
81
  .bc-post-info__likes {
82
82
  display: flex;
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
- import { PostData } from '../../models/common';
2
+ import { PostData, QAProps } from '../../models/common';
3
3
  export type BlogMetrikaGoals = {
4
4
  sharing?: string;
5
5
  save?: string;
6
6
  };
7
- type PostInfoProps = {
7
+ type PostInfoProps = QAProps & {
8
8
  postId: PostData['id'];
9
9
  readingTime: PostData['readingTime'];
10
10
  date: PostData['date'];
@@ -13,7 +13,6 @@ type PostInfoProps = {
13
13
  * @deprecated Metrika will be deleted after launch of analyticsEvents
14
14
  */
15
15
  metrikaGoals?: BlogMetrikaGoals;
16
- dataQa?: string;
17
16
  };
18
17
  /**
19
18
  * Blog post info panel component
@@ -23,7 +22,7 @@ type PostInfoProps = {
23
22
  * @param date - post create date
24
23
  * @param theme - theme name
25
24
  * @param metrikaGoals - metrika goals name
26
- * @param dataQa - test-attr
25
+ * @param qa - test-attr
27
26
  *
28
27
  * @returns jsx
29
28
  */
@@ -18,16 +18,16 @@ const b = (0, cn_1.block)('post-info');
18
18
  * @param date - post create date
19
19
  * @param theme - theme name
20
20
  * @param metrikaGoals - metrika goals name
21
- * @param dataQa - test-attr
21
+ * @param qa - test-attr
22
22
  *
23
23
  * @returns jsx
24
24
  */
25
- const PostInfo = ({ date, readingTime, postId, theme = 'light', metrikaGoals, dataQa, }) => {
25
+ const PostInfo = ({ date, readingTime, postId, theme = 'light', metrikaGoals, qa, }) => {
26
26
  const { likes } = (0, react_1.useContext)(PostPageContext_1.PostPageContext);
27
27
  return (react_1.default.createElement("div", { className: b('container', { theme }) },
28
28
  date && react_1.default.createElement(Date_1.Date, { date: date }),
29
29
  readingTime && react_1.default.createElement(ReadingTime_1.ReadingTime, { readingTime: readingTime }),
30
30
  react_1.default.createElement(Sharing_1.Sharing, { metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.sharing, theme: theme }),
31
- likes && (react_1.default.createElement(Save_1.Save, { postId: postId, title: likes.likesCount, hasUserLike: likes.hasUserLike, handleUserLike: likes.handleUserLike, metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.save, theme: theme, dataQa: dataQa }))));
31
+ likes && (react_1.default.createElement(Save_1.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 }))));
32
32
  };
33
33
  exports.PostInfo = PostInfo;
@@ -1,9 +1,8 @@
1
1
  import React from 'react';
2
- import { PostData, ToggleLikeCallbackType } from '../../models/common';
3
- export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTime' | 'hasUserLike'> {
2
+ import { PostData, QAProps, ToggleLikeCallbackType } from '../../models/common';
3
+ export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTime' | 'hasUserLike'>, QAProps {
4
4
  postId: PostData['blogPostId'];
5
5
  size?: 's' | 'm';
6
- dataQa?: string;
7
6
  likes?: {
8
7
  likesCount?: number;
9
8
  hasUserLike?: boolean;
@@ -18,7 +17,7 @@ export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTi
18
17
  * @param readingTime - post reading time
19
18
  * @param hasUserLike - flag that the user liked the post
20
19
  * @param likes - likes count
21
- * @param dataQa - test-attr
20
+ * @param qa - test-attr
22
21
  * @param size - text size
23
22
  * @param isModernIcon - flag what we need render 'bookmark' icon
24
23
  *
@@ -17,13 +17,13 @@ const b = (0, cn_1.block)('post-info');
17
17
  * @param readingTime - post reading time
18
18
  * @param hasUserLike - flag that the user liked the post
19
19
  * @param likes - likes count
20
- * @param dataQa - test-attr
20
+ * @param qa - test-attr
21
21
  * @param size - text size
22
22
  * @param isModernIcon - flag what we need render 'bookmark' icon
23
23
  *
24
24
  * @returns jsx
25
25
  */
26
- const SuggestPostInfo = ({ postId, date, readingTime, likes, size = 's', dataQa, }) => {
26
+ const SuggestPostInfo = ({ postId, date, readingTime, likes, size = 's', qa, }) => {
27
27
  const { hasUserLike, likesCount, handleLike } = (0, useLikes_1.useLikes)({
28
28
  hasLike: likes === null || likes === void 0 ? void 0 : likes.hasUserLike,
29
29
  count: likes === null || likes === void 0 ? void 0 : likes.likesCount,
@@ -34,6 +34,6 @@ const SuggestPostInfo = ({ postId, date, readingTime, likes, size = 's', dataQa,
34
34
  react_1.default.createElement("div", { className: b('suggest-container') },
35
35
  date && react_1.default.createElement(Date_1.Date, { date: date, size: size }),
36
36
  readingTime && react_1.default.createElement(ReadingTime_1.ReadingTime, { readingTime: readingTime, size: size })),
37
- likes && postId && (react_1.default.createElement(Save_1.Save, { postId: postId, title: likesCount, hasUserLike: hasUserLike, handleUserLike: handleLike, size: size, dataQa: dataQa }))));
37
+ likes && postId && (react_1.default.createElement(Save_1.Save, { postId: postId, title: likesCount, hasUserLike: hasUserLike, handleUserLike: handleLike, size: size, qa: qa }))));
38
38
  };
39
39
  exports.SuggestPostInfo = SuggestPostInfo;