@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.
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 +11 -9
  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 +8 -8
  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 +11 -9
  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 +8 -8
  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
@@ -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, dataQa: "blog-header-meta-container" }))));
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(--yc-color-line-generic);
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
- }, dataQa: "blog-meta-content" },
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, dataQa: "blog-meta-block" }))));
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(--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
  }
@@ -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 = 'default', verticalOffset = 'l', className, queryParams, }) => {
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(--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
  }
@@ -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(--yc-color-base-background);
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(--yc-text-body-3-line-height) - 12px);
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(--yc-text-body-2-font-size);
68
- line-height: var(--yc-text-body-2-line-height);
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(--yc-color-base-background);
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(--yc-my-color-brand-normal);
110
+ color: var(--g-color-base-brand);
109
111
  }
110
112
  .bc-feed-controls__icon_savedOnly {
111
- color: var(--yc-color-base-background);
113
+ color: var(--g-color-base-background);
112
114
  }
@@ -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 {
@@ -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, dataQa: "blog-suggest-block" }))));
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(--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,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 dataQa - test-attr
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 dataQa - test-attr
18
+ * @param qa - test-attr
19
19
  *
20
20
  * @returns jsx
21
21
  */
22
- export const PostInfo = ({ date, readingTime, postId, theme = 'light', metrikaGoals, dataQa, }) => {
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, dataQa: dataQa }))));
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 dataQa - test-attr
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 dataQa - test-attr
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', dataQa, }) => {
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, dataQa: dataQa }))));
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 dataQa - test-attr
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 dataQa - test-attr
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, dataQa, }) => {
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": `${dataQa ? dataQa + '-' : ''}save` },
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: 'column', buttonTitle: i18(Keyset.ActionShare), customIcon: ShareArrowUp, placement: "bottom", openByHover: false, shareOptions: shareOptions, handleMetrika: handleAnalytics }))));
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(--yc-color-promo-base-tomato);
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(--yc-text-display-2-font-size);
18
- line-height: var(--yc-text-display-2-line-height);
19
- font-weight: var(--yc-text-accent-font-weight);
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(--yc-text-body-3-font-size);
24
- line-height: var(--yc-text-body-3-line-height);
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(--yc-text-display-2-font-size);
20
- line-height: var(--yc-text-display-2-line-height);
21
- font-weight: var(--yc-text-accent-font-weight);
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(--yc-text-body-3-font-size);
26
- line-height: var(--yc-text-body-3-line-height);
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(--yc-color-base-float);
47
- font-size: var(--yc-text-body-2-font-size);
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;