@gravity-ui/page-constructor 4.13.2-alpha.0 → 4.14.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 (9) hide show
  1. package/build/cjs/components/BalancedMasonry/BalancedMasonry.d.ts +2 -2
  2. package/build/cjs/components/BalancedMasonry/BalancedMasonry.js +4 -3
  3. package/build/cjs/components/Button/Button.css +8 -6
  4. package/build/esm/components/BalancedMasonry/BalancedMasonry.d.ts +2 -2
  5. package/build/esm/components/BalancedMasonry/BalancedMasonry.js +5 -4
  6. package/build/esm/components/Button/Button.css +8 -6
  7. package/package.json +1 -1
  8. package/styles/mixins.scss +7 -5
  9. package/widget/index.js +1 -1
package/build/cjs/components/BalancedMasonry/BalancedMasonry.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
- import { WithChildren } from '../../models';
3
- export interface BalancedMasonryProps {
2
+ import { QAProps, WithChildren } from '../../models';
3
+ export interface BalancedMasonryProps extends QAProps {
4
4
  className: string;
5
5
  columnClassName: string;
6
6
  children: ReactNode[];
package/build/cjs/components/BalancedMasonry/BalancedMasonry.js CHANGED
@@ -7,7 +7,8 @@ const ssrContext_1 = require("../../context/ssrContext");
7
7
  const utils_1 = require("../../utils");
8
8
  const b = (0, utils_1.block)('BalancedMasonry');
9
9
  const BalancedMasonry = (props) => {
10
- const { className, columnClassName, children = [], breakpointCols } = props;
10
+ const { className, columnClassName, children = [], breakpointCols, qa } = props;
11
+ const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'column');
11
12
  const { isServer } = (0, react_1.useContext)(ssrContext_1.SSRContext);
12
13
  const getCurrentColumnsCount = (0, react_1.useCallback)(() => {
13
14
  const breakpoints = Object.entries(breakpointCols).sort(([firstBreakpoint], [secondBreakpoint]) => {
@@ -76,9 +77,9 @@ const BalancedMasonry = (props) => {
76
77
  }
77
78
  return () => observer.disconnect();
78
79
  }, [balanceColumns, children]);
79
- return (react_1.default.createElement("div", { className: b(null, className) },
80
+ return (react_1.default.createElement("div", { className: b(null, className), "data-qa": qa },
80
81
  react_1.default.createElement("div", { className: b('hidden-container'), style: { width: `${100 / columnCount}%` } },
81
82
  react_1.default.createElement("div", { ref: containerRef, className: b('hidden-list') }, children)),
82
- columns.map((columnElements, index) => (react_1.default.createElement("div", { key: index, className: columnClassName, style: { width: `${100 / columnCount}%` } }, columnElements)))));
83
+ columns.map((columnElements, index) => (react_1.default.createElement("div", { key: index, className: columnClassName, style: { width: `${100 / columnCount}%` }, "data-qa": qaAttributes.column }, columnElements)))));
83
84
  };
84
85
  exports.default = BalancedMasonry;
package/build/cjs/components/Button/Button.css CHANGED
@@ -11,33 +11,35 @@ unpredictable css rules order in build */
11
11
  .pc-button-block__image + .pc-button-block__text, .pc-button-block__text + .pc-button-block__image {
12
12
  margin-left: var(--btn-image-margin);
13
13
  }
14
- .pc-button-block_theme_github.pc-button-block_theme_github {
14
+ .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github {
15
15
  --g-button-background-color: var(--pc-monochrome-button-background-color);
16
16
  --g-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
17
17
  --yc-button-background-color: var(--pc-monochrome-button-background-color);
18
18
  --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
19
19
  }
20
- .pc-button-block_theme_github.pc-button-block_theme_github, .pc-button-block_theme_github.pc-button-block_theme_github:link, .pc-button-block_theme_github.pc-button-block_theme_github:visited, .pc-button-block_theme_github.pc-button-block_theme_github:active, .pc-button-block_theme_github.pc-button-block_theme_github:focus {
20
+ .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:link, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:visited, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:active, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:focus {
21
21
  color: var(--pc-monochrome-button-color);
22
22
  }
23
- .pc-button-block_theme_github.pc-button-block_theme_github:hover {
23
+ .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:hover {
24
24
  color: var(--pc-monochrome-button-color);
25
25
  }
26
+
26
27
  .pc-button-block_theme_scale::before, .pc-button-block_theme_scale::after {
27
28
  border-radius: 300px;
28
29
  }
29
- .pc-button-block_theme_monochrome {
30
+ .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome {
30
31
  --g-button-background-color: var(--pc-monochrome-button-background-color);
31
32
  --g-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
32
33
  --yc-button-background-color: var(--pc-monochrome-button-background-color);
33
34
  --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
34
35
  }
35
- .pc-button-block_theme_monochrome, .pc-button-block_theme_monochrome:link, .pc-button-block_theme_monochrome:visited, .pc-button-block_theme_monochrome:active, .pc-button-block_theme_monochrome:focus {
36
+ .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:link, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:visited, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:active, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:focus {
36
37
  color: var(--pc-monochrome-button-color);
37
38
  }
38
- .pc-button-block_theme_monochrome:hover {
39
+ .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:hover {
39
40
  color: var(--pc-monochrome-button-color);
40
41
  }
42
+
41
43
  .pc-button-block_size_s {
42
44
  --btn-image-margin: 10px;
43
45
  }
package/build/esm/components/BalancedMasonry/BalancedMasonry.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ReactNode } from 'react';
2
- import { WithChildren } from '../../models';
2
+ import { QAProps, WithChildren } from '../../models';
3
3
  import './BalancedMasonry.css';
4
- export interface BalancedMasonryProps {
4
+ export interface BalancedMasonryProps extends QAProps {
5
5
  className: string;
6
6
  columnClassName: string;
7
7
  children: ReactNode[];
package/build/esm/components/BalancedMasonry/BalancedMasonry.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
2
2
  import _ from 'lodash';
3
3
  import { SSRContext } from '../../context/ssrContext';
4
- import { block } from '../../utils';
4
+ import { block, getQaAttrubutes } from '../../utils';
5
5
  import './BalancedMasonry.css';
6
6
  const b = block('BalancedMasonry');
7
7
  const BalancedMasonry = (props) => {
8
- const { className, columnClassName, children = [], breakpointCols } = props;
8
+ const { className, columnClassName, children = [], breakpointCols, qa } = props;
9
+ const qaAttributes = getQaAttrubutes(qa, 'column');
9
10
  const { isServer } = useContext(SSRContext);
10
11
  const getCurrentColumnsCount = useCallback(() => {
11
12
  const breakpoints = Object.entries(breakpointCols).sort(([firstBreakpoint], [secondBreakpoint]) => {
@@ -74,9 +75,9 @@ const BalancedMasonry = (props) => {
74
75
  }
75
76
  return () => observer.disconnect();
76
77
  }, [balanceColumns, children]);
77
- return (React.createElement("div", { className: b(null, className) },
78
+ return (React.createElement("div", { className: b(null, className), "data-qa": qa },
78
79
  React.createElement("div", { className: b('hidden-container'), style: { width: `${100 / columnCount}%` } },
79
80
  React.createElement("div", { ref: containerRef, className: b('hidden-list') }, children)),
80
- columns.map((columnElements, index) => (React.createElement("div", { key: index, className: columnClassName, style: { width: `${100 / columnCount}%` } }, columnElements)))));
81
+ columns.map((columnElements, index) => (React.createElement("div", { key: index, className: columnClassName, style: { width: `${100 / columnCount}%` }, "data-qa": qaAttributes.column }, columnElements)))));
81
82
  };
82
83
  export default BalancedMasonry;
package/build/esm/components/Button/Button.css CHANGED
@@ -11,33 +11,35 @@ unpredictable css rules order in build */
11
11
  .pc-button-block__image + .pc-button-block__text, .pc-button-block__text + .pc-button-block__image {
12
12
  margin-left: var(--btn-image-margin);
13
13
  }
14
- .pc-button-block_theme_github.pc-button-block_theme_github {
14
+ .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github {
15
15
  --g-button-background-color: var(--pc-monochrome-button-background-color);
16
16
  --g-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
17
17
  --yc-button-background-color: var(--pc-monochrome-button-background-color);
18
18
  --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
19
19
  }
20
- .pc-button-block_theme_github.pc-button-block_theme_github, .pc-button-block_theme_github.pc-button-block_theme_github:link, .pc-button-block_theme_github.pc-button-block_theme_github:visited, .pc-button-block_theme_github.pc-button-block_theme_github:active, .pc-button-block_theme_github.pc-button-block_theme_github:focus {
20
+ .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:link, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:visited, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:active, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:focus {
21
21
  color: var(--pc-monochrome-button-color);
22
22
  }
23
- .pc-button-block_theme_github.pc-button-block_theme_github:hover {
23
+ .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:hover {
24
24
  color: var(--pc-monochrome-button-color);
25
25
  }
26
+
26
27
  .pc-button-block_theme_scale::before, .pc-button-block_theme_scale::after {
27
28
  border-radius: 300px;
28
29
  }
29
- .pc-button-block_theme_monochrome {
30
+ .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome {
30
31
  --g-button-background-color: var(--pc-monochrome-button-background-color);
31
32
  --g-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
32
33
  --yc-button-background-color: var(--pc-monochrome-button-background-color);
33
34
  --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
34
35
  }
35
- .pc-button-block_theme_monochrome, .pc-button-block_theme_monochrome:link, .pc-button-block_theme_monochrome:visited, .pc-button-block_theme_monochrome:active, .pc-button-block_theme_monochrome:focus {
36
+ .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:link, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:visited, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:active, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:focus {
36
37
  color: var(--pc-monochrome-button-color);
37
38
  }
38
- .pc-button-block_theme_monochrome:hover {
39
+ .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:hover {
39
40
  color: var(--pc-monochrome-button-color);
40
41
  }
42
+
41
43
  .pc-button-block_size_s {
42
44
  --btn-image-margin: 10px;
43
45
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "4.13.2-alpha.0",
3
+ "version": "4.14.0",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
package/styles/mixins.scss CHANGED
@@ -491,11 +491,13 @@ unpredictable css rules order in build */
491
491
  }
492
492
 
493
493
  @mixin monochrome-button() {
494
- @include button(
495
- var(--pc-monochrome-button-color),
496
- var(--pc-monochrome-button-background-color),
497
- $hoverBackgroundColor: var(--pc-monochrome-button-background-color-hover)
498
- );
494
+ @include add-specificity(&) {
495
+ @include button(
496
+ var(--pc-monochrome-button-color),
497
+ var(--pc-monochrome-button-background-color),
498
+ $hoverBackgroundColor: var(--pc-monochrome-button-background-color-hover)
499
+ );
500
+ }
499
501
  }
500
502
 
501
503
  @mixin centerable-title() {