@gravity-ui/blog-constructor 6.5.0 → 7.0.0-alpha.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -34,6 +34,6 @@ const Suggest = ({ paddingTop = 'l', paddingBottom = 'l' }) => {
34
34
  [paddings_1.PaddingsDirections.top]: paddingTop,
35
35
  [paddings_1.PaddingsDirections.bottom]: paddingBottom,
36
36
  } },
37
- react_1.default.createElement(page_constructor_1.SliderBlock, { slidesToShow: { xl: 3, lg: 2, sm: 1 }, title: { text: (0, i18n_1.i18n)(i18n_1.Keyset.TitleSuggest) }, lazyLoad: false }, suggestedPosts.map((post) => (react_1.default.createElement(PostCard_1.PostCard, { key: post.id, analyticsEvents: suggestGoals, post: post }))))));
37
+ react_1.default.createElement(page_constructor_1.SliderBlock, { slidesToShow: { xl: 3, lg: 2, sm: 1 }, title: { text: (0, i18n_1.i18n)(i18n_1.Keyset.TitleSuggest) } }, suggestedPosts.map((post) => (react_1.default.createElement(PostCard_1.PostCard, { key: post.id, analyticsEvents: suggestGoals, post: post }))))));
38
38
  };
39
39
  exports.Suggest = Suggest;
@@ -19,6 +19,6 @@ const YFM = (props) => {
19
19
  react_1.default.createElement(page_constructor_1.YFMWrapper, { content: text, modifiers: {
20
20
  blog: true,
21
21
  resetPaddings: true,
22
- }, className: b({ 'no-list-reset': true }) })));
22
+ }, contentClassName: b({ 'no-list-reset': true }) })));
23
23
  };
24
24
  exports.YFM = YFM;
@@ -1,4 +1,4 @@
1
- .bc-post-card__title_size_m, .bc-post-card__title_size_s {
1
+ .bc-post-card__title_size_m.bc-post-card__title_size_m, .bc-post-card__title_size_s.bc-post-card__title_size_s {
2
2
  margin: 0;
3
3
  }
4
4
 
@@ -27,27 +27,28 @@ unpredictable css rules order in build */
27
27
  min-height: 480px;
28
28
  }
29
29
  }
30
- .bc-post-card__title {
31
- margin-bottom: 8px;
32
- }
33
- .bc-post-card__title_size_s {
30
+ .bc-post-card__title_size_s.bc-post-card__title_size_s {
34
31
  font-size: var(--g-text-header-1-font-size);
35
32
  line-height: var(--g-text-header-1-line-height);
36
33
  color: var(--pc-text-header-color);
37
34
  font-weight: var(--g-text-accent-font-weight);
35
+ margin-bottom: 8px;
38
36
  }
39
- .bc-post-card__title_size_m {
37
+
38
+ .bc-post-card__title_size_m.bc-post-card__title_size_m {
40
39
  font-size: var(--g-text-display-2-font-size);
41
40
  line-height: var(--g-text-display-2-line-height);
42
41
  color: var(--pc-text-header-color);
43
42
  font-weight: var(--g-text-accent-font-weight);
43
+ margin-bottom: 8px;
44
44
  }
45
45
  @media (max-width: 576px) {
46
- .bc-post-card__title_size_m {
46
+ .bc-post-card__title_size_m.bc-post-card__title_size_m {
47
47
  font-size: var(--g-text-display-1-font-size);
48
48
  line-height: var(--g-text-display-1-line-height);
49
49
  }
50
50
  }
51
+
51
52
  .bc-post-card__image-container {
52
53
  height: 156px;
53
54
  }
@@ -42,10 +42,11 @@ const PostCard = ({ post, fullWidth = false, size = common_1.PostCardSize.SMALL,
42
42
  react_1.default.createElement("div", { className: b('image-container'), "data-qa": "blog-suggest-header" })),
43
43
  react_1.default.createElement(page_constructor_1.CardBase.Content, null,
44
44
  isTagVisible && (react_1.default.createElement("div", { id: tagId, className: b('tag', { size }) }, tags[0].name)),
45
- title &&
46
- react_1.default.createElement(titleHeadingLevel, { className: b('title', { size }) }, react_1.default.createElement("span", null,
47
- react_1.default.createElement(page_constructor_1.HTML, { id: titleId }, title))),
48
- description && (react_1.default.createElement(page_constructor_1.YFMWrapper, { className: b('description'), content: description, modifiers: {
45
+ title && (react_1.default.createElement(page_constructor_1.YFMWrapper, { contentClassName: b('title', { size }), content: title, modifiers: {
46
+ blog: true,
47
+ blogCard: true,
48
+ }, id: titleId, tagName: titleHeadingLevel })),
49
+ description && (react_1.default.createElement(page_constructor_1.YFMWrapper, { contentClassName: b('description'), content: description, modifiers: {
49
50
  blog: size === 'm',
50
51
  blogCard: true,
51
52
  }, id: descriptionId }))),
@@ -135,6 +135,14 @@ unpredictable css rules order in build */
135
135
  .yfm_blog .yfm-clipboard {
136
136
  margin: 32px 0;
137
137
  }
138
+ .yfm_blog .yfm_reset_paddings > h1,
139
+ .yfm_blog .yfm_reset_paddings > h2,
140
+ .yfm_blog .yfm_reset_paddings > h3,
141
+ .yfm_blog .yfm_reset_paddings > h4,
142
+ .yfm_blog .yfm_reset_paddings > h5,
143
+ .yfm_blog .yfm_reset_paddings > h6 {
144
+ margin-top: 0;
145
+ }
138
146
 
139
147
  .yfm_blog_card p {
140
148
  color: var(--pc-text-header-color);
@@ -30,5 +30,5 @@ export const Suggest = ({ paddingTop = 'l', paddingBottom = 'l' }) => {
30
30
  [PaddingsDirections.top]: paddingTop,
31
31
  [PaddingsDirections.bottom]: paddingBottom,
32
32
  } },
33
- React.createElement(SliderBlock, { slidesToShow: { xl: 3, lg: 2, sm: 1 }, title: { text: i18n(Keyset.TitleSuggest) }, lazyLoad: false }, suggestedPosts.map((post) => (React.createElement(PostCard, { key: post.id, analyticsEvents: suggestGoals, post: post }))))));
33
+ React.createElement(SliderBlock, { slidesToShow: { xl: 3, lg: 2, sm: 1 }, title: { text: i18n(Keyset.TitleSuggest) } }, suggestedPosts.map((post) => (React.createElement(PostCard, { key: post.id, analyticsEvents: suggestGoals, post: post }))))));
34
34
  };
@@ -15,5 +15,5 @@ export const YFM = (props) => {
15
15
  React.createElement(YFMWrapper, { content: text, modifiers: {
16
16
  blog: true,
17
17
  resetPaddings: true,
18
- }, className: b({ 'no-list-reset': true }) })));
18
+ }, contentClassName: b({ 'no-list-reset': true }) })));
19
19
  };
@@ -1,4 +1,4 @@
1
- .bc-post-card__title_size_m, .bc-post-card__title_size_s {
1
+ .bc-post-card__title_size_m.bc-post-card__title_size_m, .bc-post-card__title_size_s.bc-post-card__title_size_s {
2
2
  margin: 0;
3
3
  }
4
4
 
@@ -27,27 +27,28 @@ unpredictable css rules order in build */
27
27
  min-height: 480px;
28
28
  }
29
29
  }
30
- .bc-post-card__title {
31
- margin-bottom: 8px;
32
- }
33
- .bc-post-card__title_size_s {
30
+ .bc-post-card__title_size_s.bc-post-card__title_size_s {
34
31
  font-size: var(--g-text-header-1-font-size);
35
32
  line-height: var(--g-text-header-1-line-height);
36
33
  color: var(--pc-text-header-color);
37
34
  font-weight: var(--g-text-accent-font-weight);
35
+ margin-bottom: 8px;
38
36
  }
39
- .bc-post-card__title_size_m {
37
+
38
+ .bc-post-card__title_size_m.bc-post-card__title_size_m {
40
39
  font-size: var(--g-text-display-2-font-size);
41
40
  line-height: var(--g-text-display-2-line-height);
42
41
  color: var(--pc-text-header-color);
43
42
  font-weight: var(--g-text-accent-font-weight);
43
+ margin-bottom: 8px;
44
44
  }
45
45
  @media (max-width: 576px) {
46
- .bc-post-card__title_size_m {
46
+ .bc-post-card__title_size_m.bc-post-card__title_size_m {
47
47
  font-size: var(--g-text-display-1-font-size);
48
48
  line-height: var(--g-text-display-1-line-height);
49
49
  }
50
50
  }
51
+
51
52
  .bc-post-card__image-container {
52
53
  height: 156px;
53
54
  }
@@ -1,5 +1,5 @@
1
1
  import React, { useContext, useMemo } from 'react';
2
- import { CardBase, HTML, YFMWrapper } from '@gravity-ui/page-constructor';
2
+ import { CardBase, YFMWrapper } from '@gravity-ui/page-constructor';
3
3
  import { useUniqId } from '@gravity-ui/uikit';
4
4
  import { LikesContext } from '../../contexts/LikesContext';
5
5
  import { PostCardSize, PostCardTitleHeadingLevel } from '../../models/common';
@@ -39,10 +39,11 @@ export const PostCard = ({ post, fullWidth = false, size = PostCardSize.SMALL, s
39
39
  React.createElement("div", { className: b('image-container'), "data-qa": "blog-suggest-header" })),
40
40
  React.createElement(CardBase.Content, null,
41
41
  isTagVisible && (React.createElement("div", { id: tagId, className: b('tag', { size }) }, tags[0].name)),
42
- title &&
43
- React.createElement(titleHeadingLevel, { className: b('title', { size }) }, React.createElement("span", null,
44
- React.createElement(HTML, { id: titleId }, title))),
45
- description && (React.createElement(YFMWrapper, { className: b('description'), content: description, modifiers: {
42
+ title && (React.createElement(YFMWrapper, { contentClassName: b('title', { size }), content: title, modifiers: {
43
+ blog: true,
44
+ blogCard: true,
45
+ }, id: titleId, tagName: titleHeadingLevel })),
46
+ description && (React.createElement(YFMWrapper, { contentClassName: b('description'), content: description, modifiers: {
46
47
  blog: size === 'm',
47
48
  blogCard: true,
48
49
  }, id: descriptionId }))),
@@ -135,6 +135,14 @@ unpredictable css rules order in build */
135
135
  .yfm_blog .yfm-clipboard {
136
136
  margin: 32px 0;
137
137
  }
138
+ .yfm_blog .yfm_reset_paddings > h1,
139
+ .yfm_blog .yfm_reset_paddings > h2,
140
+ .yfm_blog .yfm_reset_paddings > h3,
141
+ .yfm_blog .yfm_reset_paddings > h4,
142
+ .yfm_blog .yfm_reset_paddings > h5,
143
+ .yfm_blog .yfm_reset_paddings > h6 {
144
+ margin-top: 0;
145
+ }
138
146
 
139
147
  .yfm_blog_card p {
140
148
  color: var(--pc-text-header-color);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/blog-constructor",
3
- "version": "6.5.0",
3
+ "version": "7.0.0-alpha.1",
4
4
  "description": "Gravity UI Blog Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -78,7 +78,7 @@
78
78
  },
79
79
  "peerDependencies": {
80
80
  "@diplodoc/transform": "^4.10.7",
81
- "@gravity-ui/page-constructor": "^5.0.0",
81
+ "@gravity-ui/page-constructor": "^6.0.0-alpha.2",
82
82
  "@gravity-ui/uikit": "^6.26.0",
83
83
  "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
84
84
  },
@@ -89,7 +89,7 @@
89
89
  "@commitlint/config-conventional": "^17.4.3",
90
90
  "@diplodoc/transform": "^4.10.8",
91
91
  "@gravity-ui/eslint-config": "^3.1.1",
92
- "@gravity-ui/page-constructor": "^5.27.0",
92
+ "@gravity-ui/page-constructor": "^6.0.0-alpha.2",
93
93
  "@gravity-ui/prettier-config": "^1.1.0",
94
94
  "@gravity-ui/stylelint-config": "^4.0.1",
95
95
  "@gravity-ui/tsconfig": "^1.0.0",
@@ -19,7 +19,6 @@ const transformPost = ({ postData, lang, options: { plugins } = {} }) => {
19
19
  return {};
20
20
  }
21
21
  const { tags, title, metaTitle, description } = postData, post = tslib_1.__rest(postData, ["tags", "title", "metaTitle", "description"]);
22
- return Object.assign(Object.assign({}, post), { title,
23
- tags, textTitle: (0, server_1.typografToText)(title, lang), htmlTitle: (0, server_1.typografToHTML)(title, lang), metaTitle: metaTitle || title, description: (0, server_1.yfmTransformer)(lang, description, { plugins }) });
22
+ return Object.assign(Object.assign({}, post), { title: (0, server_1.yfmTransformer)(lang, title, { plugins }), tags, textTitle: (0, server_1.typografToText)(title, lang), htmlTitle: (0, server_1.typografToHTML)(title, lang), metaTitle: metaTitle || title, description: (0, server_1.yfmTransformer)(lang, description, { plugins }) });
24
23
  };
25
24
  exports.transformPost = transformPost;
package/styles/styles.css CHANGED
@@ -112,6 +112,14 @@ unpredictable css rules order in build */
112
112
  .yfm_blog .yfm-clipboard {
113
113
  margin: 32px 0;
114
114
  }
115
+ .yfm_blog .yfm_reset_paddings > h1,
116
+ .yfm_blog .yfm_reset_paddings > h2,
117
+ .yfm_blog .yfm_reset_paddings > h3,
118
+ .yfm_blog .yfm_reset_paddings > h4,
119
+ .yfm_blog .yfm_reset_paddings > h5,
120
+ .yfm_blog .yfm_reset_paddings > h6 {
121
+ margin-top: 0;
122
+ }
115
123
 
116
124
  .yfm_blog_card p {
117
125
  color: var(--pc-text-header-color);
package/styles/yfm.css CHANGED
@@ -111,6 +111,14 @@ unpredictable css rules order in build */
111
111
  .yfm_blog .yfm-clipboard {
112
112
  margin: 32px 0;
113
113
  }
114
+ .yfm_blog .yfm_reset_paddings > h1,
115
+ .yfm_blog .yfm_reset_paddings > h2,
116
+ .yfm_blog .yfm_reset_paddings > h3,
117
+ .yfm_blog .yfm_reset_paddings > h4,
118
+ .yfm_blog .yfm_reset_paddings > h5,
119
+ .yfm_blog .yfm_reset_paddings > h6 {
120
+ margin-top: 0;
121
+ }
114
122
 
115
123
  .yfm_blog_card p {
116
124
  color: var(--pc-text-header-color);
package/styles/yfm.scss CHANGED
@@ -130,6 +130,15 @@
130
130
  .yfm-clipboard {
131
131
  margin: $indentM 0;
132
132
  }
133
+
134
+ .yfm_reset_paddings > h1,
135
+ .yfm_reset_paddings > h2,
136
+ .yfm_reset_paddings > h3,
137
+ .yfm_reset_paddings > h4,
138
+ .yfm_reset_paddings > h5,
139
+ .yfm_reset_paddings > h6 {
140
+ margin-top: 0;
141
+ }
133
142
  }
134
143
 
135
144
  .yfm_blog_card {