@gravity-ui/page-constructor 1.10.7-alpha.0 → 1.10.8

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ## [1.10.8](https://github.com/gravity-ui/page-constructor/compare/v1.10.7...v1.10.8) (2023-01-09)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * add arrow link top for different sizes ([2fe8038](https://github.com/gravity-ui/page-constructor/commit/2fe8038372299e1c1b82ae93402f8c0df3ef7c03))
9
+
3
10
  ## [1.10.7](https://github.com/gravity-ui/page-constructor/compare/v1.10.6...v1.10.7) (2022-12-23)
4
11
 
5
12
 
@@ -4,7 +4,7 @@ const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importDefault(require("react"));
5
5
  const react_2 = require("@testing-library/react");
6
6
  const Anchor_1 = tslib_1.__importDefault(require("../Anchor"));
7
- const testId = 'anc-hor';
7
+ const testId = 'anchor';
8
8
  const anchorId = 'anchorId';
9
9
  describe('Anchor', () => {
10
10
  test('Has id', async () => {
@@ -24,10 +24,17 @@ unpredictable css rules order in build */
24
24
  .pc-link-block__link_theme_dark:hover {
25
25
  color: var(--yc-color-text-light-secondary);
26
26
  }
27
+ .pc-link-block__link_has-arrow {
28
+ display: inherit;
29
+ white-space: nowrap;
30
+ }
27
31
  .pc-link-block__link_has-arrow:hover, .pc-link-block__link_has-arrow:active {
28
32
  --pc-text-header-color: inherit;
29
33
  color: var(--yc-color-text-link);
30
34
  }
35
+ .pc-link-block__link_has-arrow .pc-link-block__content {
36
+ white-space: normal;
37
+ }
31
38
  .pc-link-block__link:hover .pc-link-block__arrow {
32
39
  transform: translateX(5px) rotate(-90deg);
33
40
  }
@@ -36,7 +43,7 @@ unpredictable css rules order in build */
36
43
  }
37
44
  .pc-link-block__arrow {
38
45
  position: relative;
39
- margin-left: 2px;
46
+ top: 2px;
40
47
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
41
48
  transform: rotate(-90deg);
42
49
  }
@@ -48,6 +55,9 @@ unpredictable css rules order in build */
48
55
  font-size: var(--yc-text-body-2-font-size);
49
56
  line-height: var(--yc-text-body-2-line-height);
50
57
  }
58
+ .pc-link-block_size_m .pc-link-block__arrow {
59
+ top: 1px;
60
+ }
51
61
  .pc-link-block_size_s {
52
62
  font-size: var(--yc-text-body-1-font-size);
53
63
  line-height: var(--yc-text-body-1-line-height);
@@ -11,6 +11,7 @@ const localeContext_1 = require("../../context/localeContext/localeContext");
11
11
  const locationContext_1 = require("../../context/locationContext/locationContext");
12
12
  const useMetrika_1 = require("../../hooks/useMetrika");
13
13
  const b = (0, utils_1.block)('link-block');
14
+ const WORD_JOINER_SYM = '\u200b';
14
15
  function getArrowSize(size) {
15
16
  switch (size) {
16
17
  case 'l':
@@ -18,9 +19,9 @@ function getArrowSize(size) {
18
19
  case 'm':
19
20
  return 18;
20
21
  case 's':
21
- return 12;
22
+ return 14;
22
23
  default:
23
- return 12;
24
+ return 14;
24
25
  }
25
26
  }
26
27
  const LinkBlock = (props) => {
@@ -43,8 +44,10 @@ const LinkBlock = (props) => {
43
44
  case 'normal': {
44
45
  const linkProps = (0, utils_1.getLinkProps)(url, hostname, target);
45
46
  return (react_1.default.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick }, linkProps),
46
- children || text,
47
- arrow && (react_1.default.createElement(uikit_1.Icon, { className: b('arrow'), data: icons_1.Chevron, size: getArrowSize(textSize) }))));
47
+ react_1.default.createElement("span", { className: b('content') }, children || text),
48
+ arrow && (react_1.default.createElement(react_1.Fragment, null,
49
+ WORD_JOINER_SYM,
50
+ react_1.default.createElement(uikit_1.Icon, { className: b('arrow'), data: icons_1.Chevron, size: getArrowSize(textSize) })))));
48
51
  }
49
52
  default:
50
53
  return null;
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { render, screen } from '@testing-library/react';
3
3
  import Anchor from '../Anchor';
4
- const testId = 'anc-hor';
4
+ const testId = 'anchor';
5
5
  const anchorId = 'anchorId';
6
6
  describe('Anchor', () => {
7
7
  test('Has id', async () => {
@@ -24,10 +24,17 @@ unpredictable css rules order in build */
24
24
  .pc-link-block__link_theme_dark:hover {
25
25
  color: var(--yc-color-text-light-secondary);
26
26
  }
27
+ .pc-link-block__link_has-arrow {
28
+ display: inherit;
29
+ white-space: nowrap;
30
+ }
27
31
  .pc-link-block__link_has-arrow:hover, .pc-link-block__link_has-arrow:active {
28
32
  --pc-text-header-color: inherit;
29
33
  color: var(--yc-color-text-link);
30
34
  }
35
+ .pc-link-block__link_has-arrow .pc-link-block__content {
36
+ white-space: normal;
37
+ }
31
38
  .pc-link-block__link:hover .pc-link-block__arrow {
32
39
  transform: translateX(5px) rotate(-90deg);
33
40
  }
@@ -36,7 +43,7 @@ unpredictable css rules order in build */
36
43
  }
37
44
  .pc-link-block__arrow {
38
45
  position: relative;
39
- margin-left: 2px;
46
+ top: 2px;
40
47
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
41
48
  transform: rotate(-90deg);
42
49
  }
@@ -48,6 +55,9 @@ unpredictable css rules order in build */
48
55
  font-size: var(--yc-text-body-2-font-size);
49
56
  line-height: var(--yc-text-body-2-line-height);
50
57
  }
58
+ .pc-link-block_size_m .pc-link-block__arrow {
59
+ top: 1px;
60
+ }
51
61
  .pc-link-block_size_s {
52
62
  font-size: var(--yc-text-body-1-font-size);
53
63
  line-height: var(--yc-text-body-1-line-height);
@@ -1,4 +1,4 @@
1
- import React, { useContext } from 'react';
1
+ import React, { Fragment, useContext } from 'react';
2
2
  import { Icon } from '@gravity-ui/uikit';
3
3
  import { block, getLinkProps, setUrlTld } from '../../utils';
4
4
  import { Chevron } from '../../icons';
@@ -9,6 +9,7 @@ import { LocationContext } from '../../context/locationContext/locationContext';
9
9
  import { useMetrika } from '../../hooks/useMetrika';
10
10
  import './Link.css';
11
11
  const b = block('link-block');
12
+ const WORD_JOINER_SYM = '\u200b';
12
13
  function getArrowSize(size) {
13
14
  switch (size) {
14
15
  case 'l':
@@ -16,9 +17,9 @@ function getArrowSize(size) {
16
17
  case 'm':
17
18
  return 18;
18
19
  case 's':
19
- return 12;
20
+ return 14;
20
21
  default:
21
- return 12;
22
+ return 14;
22
23
  }
23
24
  }
24
25
  const LinkBlock = (props) => {
@@ -41,8 +42,10 @@ const LinkBlock = (props) => {
41
42
  case 'normal': {
42
43
  const linkProps = getLinkProps(url, hostname, target);
43
44
  return (React.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick }, linkProps),
44
- children || text,
45
- arrow && (React.createElement(Icon, { className: b('arrow'), data: Chevron, size: getArrowSize(textSize) }))));
45
+ React.createElement("span", { className: b('content') }, children || text),
46
+ arrow && (React.createElement(Fragment, null,
47
+ WORD_JOINER_SYM,
48
+ React.createElement(Icon, { className: b('arrow'), data: Chevron, size: getArrowSize(textSize) })))));
46
49
  }
47
50
  default:
48
51
  return null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "1.10.7-alpha.0",
3
+ "version": "1.10.8",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {