@gravity-ui/blog-constructor 3.2.1 → 3.3.0

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 (6) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/build/cjs/blocks/CTA/CTA.css +14 -36
  3. package/build/cjs/blocks/CTA/CTA.js +3 -14
  4. package/build/esm/blocks/CTA/CTA.css +14 -36
  5. package/build/esm/blocks/CTA/CTA.js +3 -14
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ## [3.3.0](https://github.com/gravity-ui/blog-constructor/compare/v3.2.1...v3.3.0) (2023-05-16)
4
+
5
+
6
+ ### Features
7
+
8
+ * add md breackpoint to cta-block ([#45](https://github.com/gravity-ui/blog-constructor/issues/45)) ([e859b0b](https://github.com/gravity-ui/blog-constructor/commit/e859b0b02e80b20eb0b4496e2c4834fb2de74922))
9
+
3
10
  ## [3.2.1](https://github.com/gravity-ui/blog-constructor/compare/v3.2.0...v3.2.1) (2023-05-16)
4
11
 
5
12
 
package/build/cjs/blocks/CTA/CTA.css CHANGED
@@ -8,49 +8,27 @@
8
8
  flex-direction: column;
9
9
  flex-grow: 1;
10
10
  padding: 32px;
11
- }
12
- .bc-cta__button {
13
- display: flex;
14
- padding-bottom: 16px;
11
+ width: calc(33.3333333333% - (32px / 2));
15
12
  }
16
13
  .bc-cta__content {
17
14
  display: flex;
18
- flex-direction: column;
15
+ flex-flow: row wrap;
16
+ gap: 16px;
19
17
  }
20
- @media (min-width: 577px) {
18
+ @media (max-width: 769px) {
21
19
  .bc-cta__content {
22
- display: flex;
23
- flex-direction: row;
24
- }
25
- .bc-cta__button {
26
- padding-bottom: 0px;
27
- }
28
- .bc-cta__button_layout {
29
- width: 100%;
30
- max-width: 100%;
31
- margin-right: 0px;
20
+ flex-wrap: wrap;
32
21
  }
33
- .bc-cta__button_layout_2 {
34
- width: calc(50% - (16px / 2));
35
- max-width: 50%;
36
- margin-right: 16px;
22
+ .bc-cta__card {
23
+ width: calc((100% / 2) - 16px);
24
+ flex-grow: 1;
37
25
  }
38
- .bc-cta__button_layout_2:nth-child(2n) {
39
- margin-right: 0px;
40
- }
41
- .bc-cta__button_layout_3 {
42
- width: calc(33.3333333333% - (32px / 3));
43
- margin-right: 16px;
44
- }
45
- .bc-cta__button_layout_3:nth-child(3n) {
46
- margin-right: 0px;
47
- }
48
- .bc-cta__button_layout_4 {
49
- width: calc(25% - (48px / 4));
50
- max-width: 50%;
51
- margin-right: 16px;
26
+ }
27
+ @media (max-width: 577px) {
28
+ .bc-cta__content {
29
+ flex-direction: column;
52
30
  }
53
- .bc-cta__button_layout_4:nth-child(4n) {
54
- margin-right: 0px;
31
+ .bc-cta__card {
32
+ width: 100%;
55
33
  }
56
34
  }
package/build/cjs/blocks/CTA/CTA.js CHANGED
@@ -12,15 +12,7 @@ const paddings_1 = require("../../models/paddings");
12
12
  const cn_1 = require("../../utils/cn");
13
13
  const common_1 = require("../../utils/common");
14
14
  const b = (0, cn_1.block)('cta');
15
- const MAX_COLUMN_COUNT = 4, MIN_COLUMN_COUNT = 2, DEFAULT_COLUMN_COUNT = 3;
16
15
  const CTA = ({ items, paddingTop, paddingBottom }) => {
17
- let count = items ? items.length : DEFAULT_COLUMN_COUNT;
18
- if (count < MIN_COLUMN_COUNT) {
19
- count = MIN_COLUMN_COUNT;
20
- }
21
- else if (count > MAX_COLUMN_COUNT) {
22
- count = MAX_COLUMN_COUNT;
23
- }
24
16
  /**
25
17
  * @deprecated Metrika will be deleted after launch of analyticsEvents
26
18
  */
@@ -31,18 +23,15 @@ const CTA = ({ items, paddingTop, paddingBottom }) => {
31
23
  return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
32
24
  [paddings_1.PaddingsDirections.top]: paddingTop,
33
25
  [paddings_1.PaddingsDirections.bottom]: paddingBottom,
34
- }, className: b('content'), dataQa: "blog-cta-content" }, items.slice(0, count).map((content, index) => {
26
+ }, className: b('content'), dataQa: "blog-cta-content" }, items.map((content, index) => {
35
27
  var _a;
36
28
  const contentData = (0, common_1.updateContentSizes)(content);
37
29
  (_a = contentData.links) === null || _a === void 0 ? void 0 : _a.forEach((link) => {
38
30
  // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign
39
31
  link.metrikaGoals = (0, common_1.getBlogElementMetrika)(metrikaGoal, link.metrikaGoals);
40
32
  });
41
- return (react_1.default.createElement("div", { key: index, className: b('button', {
42
- ['layout']: count,
43
- }), "data-qa": "blog-cta-card" },
44
- react_1.default.createElement("div", { className: b('card') },
45
- react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData)))));
33
+ return (react_1.default.createElement("div", { key: index, className: b('card'), "data-qa": "blog-cta-card" },
34
+ react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData))));
46
35
  })));
47
36
  };
48
37
  exports.CTA = CTA;
package/build/esm/blocks/CTA/CTA.css CHANGED
@@ -8,49 +8,27 @@
8
8
  flex-direction: column;
9
9
  flex-grow: 1;
10
10
  padding: 32px;
11
- }
12
- .bc-cta__button {
13
- display: flex;
14
- padding-bottom: 16px;
11
+ width: calc(33.3333333333% - (32px / 2));
15
12
  }
16
13
  .bc-cta__content {
17
14
  display: flex;
18
- flex-direction: column;
15
+ flex-flow: row wrap;
16
+ gap: 16px;
19
17
  }
20
- @media (min-width: 577px) {
18
+ @media (max-width: 769px) {
21
19
  .bc-cta__content {
22
- display: flex;
23
- flex-direction: row;
24
- }
25
- .bc-cta__button {
26
- padding-bottom: 0px;
27
- }
28
- .bc-cta__button_layout {
29
- width: 100%;
30
- max-width: 100%;
31
- margin-right: 0px;
20
+ flex-wrap: wrap;
32
21
  }
33
- .bc-cta__button_layout_2 {
34
- width: calc(50% - (16px / 2));
35
- max-width: 50%;
36
- margin-right: 16px;
22
+ .bc-cta__card {
23
+ width: calc((100% / 2) - 16px);
24
+ flex-grow: 1;
37
25
  }
38
- .bc-cta__button_layout_2:nth-child(2n) {
39
- margin-right: 0px;
40
- }
41
- .bc-cta__button_layout_3 {
42
- width: calc(33.3333333333% - (32px / 3));
43
- margin-right: 16px;
44
- }
45
- .bc-cta__button_layout_3:nth-child(3n) {
46
- margin-right: 0px;
47
- }
48
- .bc-cta__button_layout_4 {
49
- width: calc(25% - (48px / 4));
50
- max-width: 50%;
51
- margin-right: 16px;
26
+ }
27
+ @media (max-width: 577px) {
28
+ .bc-cta__content {
29
+ flex-direction: column;
52
30
  }
53
- .bc-cta__button_layout_4:nth-child(4n) {
54
- margin-right: 0px;
31
+ .bc-cta__card {
32
+ width: 100%;
55
33
  }
56
34
  }
package/build/esm/blocks/CTA/CTA.js CHANGED
@@ -7,15 +7,7 @@ import { block } from '../../utils/cn';
7
7
  import { getBlogElementMetrika, updateContentSizes } from '../../utils/common';
8
8
  import './CTA.css';
9
9
  const b = block('cta');
10
- const MAX_COLUMN_COUNT = 4, MIN_COLUMN_COUNT = 2, DEFAULT_COLUMN_COUNT = 3;
11
10
  export const CTA = ({ items, paddingTop, paddingBottom }) => {
12
- let count = items ? items.length : DEFAULT_COLUMN_COUNT;
13
- if (count < MIN_COLUMN_COUNT) {
14
- count = MIN_COLUMN_COUNT;
15
- }
16
- else if (count > MAX_COLUMN_COUNT) {
17
- count = MAX_COLUMN_COUNT;
18
- }
19
11
  /**
20
12
  * @deprecated Metrika will be deleted after launch of analyticsEvents
21
13
  */
@@ -26,17 +18,14 @@ export const CTA = ({ items, paddingTop, paddingBottom }) => {
26
18
  return (React.createElement(Wrapper, { paddings: {
27
19
  [PaddingsDirections.top]: paddingTop,
28
20
  [PaddingsDirections.bottom]: paddingBottom,
29
- }, className: b('content'), dataQa: "blog-cta-content" }, items.slice(0, count).map((content, index) => {
21
+ }, className: b('content'), dataQa: "blog-cta-content" }, items.map((content, index) => {
30
22
  var _a;
31
23
  const contentData = updateContentSizes(content);
32
24
  (_a = contentData.links) === null || _a === void 0 ? void 0 : _a.forEach((link) => {
33
25
  // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign
34
26
  link.metrikaGoals = getBlogElementMetrika(metrikaGoal, link.metrikaGoals);
35
27
  });
36
- return (React.createElement("div", { key: index, className: b('button', {
37
- ['layout']: count,
38
- }), "data-qa": "blog-cta-card" },
39
- React.createElement("div", { className: b('card') },
40
- React.createElement(Content, Object.assign({}, contentData)))));
28
+ return (React.createElement("div", { key: index, className: b('card'), "data-qa": "blog-cta-card" },
29
+ React.createElement(Content, Object.assign({}, contentData))));
41
30
  })));
42
31
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/blog-constructor",
3
- "version": "3.2.1",
3
+ "version": "3.3.0",
4
4
  "description": "Gravity UI Blog Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {