@gravity-ui/page-constructor 3.0.0-alpha.0 → 3.0.0-alpha.2

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 (89) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/build/cjs/blocks/ExtendedFeatures/ExtendedFeatures.js +1 -1
  3. package/build/cjs/blocks/PromoFeaturesBlock/PromoFeaturesBlock.js +2 -2
  4. package/build/cjs/blocks/Slider/Slider.js +2 -2
  5. package/build/cjs/blocks/Tabs/Tabs.js +2 -2
  6. package/build/cjs/components/Anchor/Anchor.d.ts +2 -2
  7. package/build/cjs/components/Anchor/Anchor.js +1 -1
  8. package/build/cjs/components/MediaBase/MediaBase.js +2 -2
  9. package/build/cjs/components/Title/Title.css +8 -103
  10. package/build/cjs/components/Title/Title.d.ts +5 -8
  11. package/build/cjs/components/Title/Title.js +15 -50
  12. package/build/cjs/components/Title/TitleItem.css +111 -0
  13. package/build/cjs/components/Title/TitleItem.d.ts +10 -0
  14. package/build/cjs/components/Title/TitleItem.js +57 -0
  15. package/build/cjs/components/index.d.ts +1 -1
  16. package/build/cjs/components/index.js +4 -4
  17. package/build/cjs/grid/Col/Col.d.ts +1 -1
  18. package/build/cjs/internal-typings/global.d.ts +18 -16
  19. package/build/cjs/models/constructor-items/blocks.d.ts +8 -8
  20. package/build/cjs/models/constructor-items/common.d.ts +4 -4
  21. package/build/cjs/sub-blocks/Content/Content.js +3 -3
  22. package/build/cjs/sub-blocks/HubspotForm/HubspotFormContainer.d.ts +2 -1
  23. package/build/cjs/sub-blocks/HubspotForm/HubspotFormContainer.js +5 -2
  24. package/build/cjs/sub-blocks/HubspotForm/index.d.ts +1 -1
  25. package/build/cjs/sub-blocks/HubspotForm/index.js +6 -5
  26. package/build/cjs/text-transform/config.d.ts +2 -2
  27. package/build/esm/blocks/ExtendedFeatures/ExtendedFeatures.js +2 -2
  28. package/build/esm/blocks/PromoFeaturesBlock/PromoFeaturesBlock.js +2 -2
  29. package/build/esm/blocks/Slider/Slider.js +2 -2
  30. package/build/esm/blocks/Tabs/Tabs.js +2 -2
  31. package/build/esm/components/Anchor/Anchor.d.ts +2 -2
  32. package/build/esm/components/Anchor/Anchor.js +1 -1
  33. package/build/esm/components/MediaBase/MediaBase.js +2 -2
  34. package/build/esm/components/Title/Title.css +8 -103
  35. package/build/esm/components/Title/Title.d.ts +5 -8
  36. package/build/esm/components/Title/Title.js +17 -49
  37. package/build/esm/components/Title/TitleItem.css +111 -0
  38. package/build/esm/components/Title/TitleItem.d.ts +11 -0
  39. package/build/esm/components/Title/TitleItem.js +53 -0
  40. package/build/esm/components/index.d.ts +1 -1
  41. package/build/esm/components/index.js +1 -1
  42. package/build/esm/grid/Col/Col.d.ts +1 -1
  43. package/build/esm/internal-typings/global.d.ts +18 -16
  44. package/build/esm/models/constructor-items/blocks.d.ts +8 -8
  45. package/build/esm/models/constructor-items/common.d.ts +4 -4
  46. package/build/esm/sub-blocks/Content/Content.js +3 -3
  47. package/build/esm/sub-blocks/HubspotForm/HubspotFormContainer.d.ts +2 -1
  48. package/build/esm/sub-blocks/HubspotForm/HubspotFormContainer.js +6 -3
  49. package/build/esm/sub-blocks/HubspotForm/index.d.ts +1 -1
  50. package/build/esm/sub-blocks/HubspotForm/index.js +7 -6
  51. package/build/esm/text-transform/config.d.ts +2 -2
  52. package/package.json +1 -1
  53. package/server/models/constructor-items/blocks.d.ts +8 -8
  54. package/server/models/constructor-items/common.d.ts +4 -4
  55. package/server/text-transform/config.d.ts +2 -2
  56. package/build/cjs/components/Anchor/__tests__/Anchor.test.d.ts +0 -1
  57. package/build/cjs/components/Anchor/__tests__/Anchor.test.js +0 -21
  58. package/build/cjs/components/AnimateBlock/__tests__/AnimateBlock.test.d.ts +0 -1
  59. package/build/cjs/components/AnimateBlock/__tests__/AnimateBlock.test.js +0 -36
  60. package/build/cjs/components/Author/__tests__/Author.test.d.ts +0 -1
  61. package/build/cjs/components/Author/__tests__/Author.test.js +0 -49
  62. package/build/cjs/components/BackLink/__tests__/BackLink.test.d.ts +0 -1
  63. package/build/cjs/components/BackLink/__tests__/BackLink.test.js +0 -63
  64. package/build/cjs/components/BlockBase/__tests__/BlockBase.test.d.ts +0 -1
  65. package/build/cjs/components/BlockBase/__tests__/BlockBase.test.js +0 -44
  66. package/build/cjs/components/BlockHeader/BlockHeader.css +0 -16
  67. package/build/cjs/components/BlockHeader/BlockHeader.d.ts +0 -7
  68. package/build/cjs/components/BlockHeader/BlockHeader.js +0 -22
  69. package/build/cjs/components/Button/__tests__/Button.test.d.ts +0 -1
  70. package/build/cjs/components/Button/__tests__/Button.test.js +0 -91
  71. package/build/cjs/components/ButtonTabs/__tests__/ButtonTabs.test.d.ts +0 -1
  72. package/build/cjs/components/ButtonTabs/__tests__/ButtonTabs.test.js +0 -58
  73. package/build/esm/components/Anchor/__tests__/Anchor.test.d.ts +0 -1
  74. package/build/esm/components/Anchor/__tests__/Anchor.test.js +0 -18
  75. package/build/esm/components/AnimateBlock/__tests__/AnimateBlock.test.d.ts +0 -1
  76. package/build/esm/components/AnimateBlock/__tests__/AnimateBlock.test.js +0 -33
  77. package/build/esm/components/Author/__tests__/Author.test.d.ts +0 -1
  78. package/build/esm/components/Author/__tests__/Author.test.js +0 -46
  79. package/build/esm/components/BackLink/__tests__/BackLink.test.d.ts +0 -1
  80. package/build/esm/components/BackLink/__tests__/BackLink.test.js +0 -60
  81. package/build/esm/components/BlockBase/__tests__/BlockBase.test.d.ts +0 -1
  82. package/build/esm/components/BlockBase/__tests__/BlockBase.test.js +0 -41
  83. package/build/esm/components/BlockHeader/BlockHeader.css +0 -16
  84. package/build/esm/components/BlockHeader/BlockHeader.d.ts +0 -8
  85. package/build/esm/components/BlockHeader/BlockHeader.js +0 -21
  86. package/build/esm/components/Button/__tests__/Button.test.d.ts +0 -1
  87. package/build/esm/components/Button/__tests__/Button.test.js +0 -88
  88. package/build/esm/components/ButtonTabs/__tests__/ButtonTabs.test.d.ts +0 -1
  89. package/build/esm/components/ButtonTabs/__tests__/ButtonTabs.test.js +0 -55
@@ -1,44 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const react_1 = tslib_1.__importDefault(require("react"));
5
- const react_2 = require("@testing-library/react");
6
- const Anchor_1 = require("../../../components/Anchor/Anchor");
7
- const grid_1 = require("../../../grid");
8
- const BlockBase_1 = tslib_1.__importDefault(require("../BlockBase"));
9
- const qaId = 'block-base-component';
10
- describe('BlockBase', () => {
11
- test('render component by default', async () => {
12
- (0, react_2.render)(react_1.default.createElement(BlockBase_1.default, { qa: qaId }));
13
- const component = react_2.screen.getByTestId(qaId);
14
- expect(component).toBeInTheDocument();
15
- expect(component).toBeVisible();
16
- expect(component).not.toBeDisabled();
17
- });
18
- test('add className', () => {
19
- const className = 'my-class';
20
- (0, react_2.render)(react_1.default.createElement(BlockBase_1.default, { qa: qaId, className: className }));
21
- const component = react_2.screen.getByTestId(qaId);
22
- expect(component).toHaveClass(className);
23
- });
24
- test('should reset paddings', () => {
25
- (0, react_2.render)(react_1.default.createElement(BlockBase_1.default, { qa: qaId, resetPaddings: true }));
26
- const component = react_2.screen.getByTestId(qaId);
27
- expect(component).toHaveClass('pc-block-base_reset-paddings');
28
- });
29
- test.each(new Array(...Object.values(grid_1.GridColumnSize)))('render with given "%s" size', (size) => {
30
- (0, react_2.render)(react_1.default.createElement(BlockBase_1.default, { qa: qaId, visible: size }));
31
- const component = react_2.screen.getByTestId(qaId);
32
- expect(component).toHaveClass(`d-${size}-block`);
33
- });
34
- test('should have anchor', () => {
35
- const anchor = {
36
- text: 'anchor',
37
- url: 'https://github.com/gravity-ui/',
38
- };
39
- (0, react_2.render)(react_1.default.createElement(BlockBase_1.default, { anchor: anchor }));
40
- const component = react_2.screen.getByTestId(Anchor_1.qaIdByDefault);
41
- expect(component).toBeInTheDocument();
42
- expect(component).toHaveAttribute('id', anchor.url);
43
- });
44
- });
@@ -1,16 +0,0 @@
1
- /* use this for style redefinitions to awoid problems with
2
- unpredictable css rules order in build */
3
- .pc-block-header__description {
4
- margin-top: 12px;
5
- }
6
- .pc-block-header__description .yfm {
7
- font-size: var(--yc-text-body-3-font-size);
8
- line-height: var(--yc-text-body-3-line-height);
9
- }
10
- .pc-block-header__description_titleSize_s, .pc-block-header__description_titleSize_xs {
11
- margin-top: 8px;
12
- }
13
- .pc-block-header__description_titleSize_s .yfm, .pc-block-header__description_titleSize_xs .yfm {
14
- font-size: var(--yc-text-body-2-font-size);
15
- line-height: var(--yc-text-body-2-line-height);
16
- }
@@ -1,7 +0,0 @@
1
- import { GridColumnSizesType } from '../../grid';
2
- import { BlockHeaderProps as BlockHeaderParams, ClassNameProps } from '../../models';
3
- export interface BlockHeaderProps extends BlockHeaderParams {
4
- colSizes?: GridColumnSizesType;
5
- }
6
- declare const BlockHeader: ({ title, description, className, colSizes, }: BlockHeaderProps & ClassNameProps) => JSX.Element | null;
7
- export default BlockHeader;
@@ -1,22 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const react_1 = tslib_1.__importDefault(require("react"));
5
- const __1 = require("../");
6
- const grid_1 = require("../../grid");
7
- const utils_1 = require("../../utils");
8
- const YFMWrapper_1 = tslib_1.__importDefault(require("../YFMWrapper/YFMWrapper"));
9
- const b = (0, utils_1.block)('block-header');
10
- const BlockHeader = ({ title, description, className, colSizes = { all: 12, sm: 8 }, }) => {
11
- if (!title && !description) {
12
- return null;
13
- }
14
- const _a = !title || typeof title === 'string' ? { text: title } : title, { text } = _a, titleProps = tslib_1.__rest(_a, ["text"]);
15
- return (react_1.default.createElement("div", { className: b(null, className) },
16
- text && (react_1.default.createElement(grid_1.Col, { reset: true, sizes: colSizes },
17
- react_1.default.createElement(__1.Title, Object.assign({ text: text }, titleProps)))),
18
- description && (react_1.default.createElement(grid_1.Col, { reset: true, sizes: colSizes },
19
- react_1.default.createElement("div", { className: b('description', { titleSize: titleProps === null || titleProps === void 0 ? void 0 : titleProps.textSize }) },
20
- react_1.default.createElement(YFMWrapper_1.default, { content: description, modifiers: { constructor: true } }))))));
21
- };
22
- exports.default = BlockHeader;
@@ -1,91 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const react_1 = tslib_1.__importDefault(require("react"));
5
- const react_2 = require("@testing-library/react");
6
- const user_event_1 = tslib_1.__importDefault(require("@testing-library/user-event"));
7
- const Button_1 = tslib_1.__importDefault(require("../Button"));
8
- const utils_1 = require("../utils");
9
- const qaId = 'button-component';
10
- const buttonProps = {
11
- text: 'Button Text',
12
- url: 'https://github.com/gravity-ui/',
13
- target: '_blank',
14
- img: {
15
- url: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg',
16
- position: 'left',
17
- alt: 'alt-text',
18
- },
19
- };
20
- const buttonViews = [
21
- 'normal',
22
- 'action',
23
- 'outlined',
24
- 'outlined-info',
25
- 'outlined-danger',
26
- 'raised',
27
- 'flat',
28
- 'flat-info',
29
- 'flat-danger',
30
- 'flat-secondary',
31
- 'normal-contrast',
32
- 'outlined-contrast',
33
- 'flat-contrast',
34
- 'github',
35
- 'scale',
36
- 'monochrome',
37
- ];
38
- describe('Button', () => {
39
- test('render button by default', async () => {
40
- (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text }));
41
- const button = react_2.screen.getByRole('button');
42
- expect(button).toBeInTheDocument();
43
- expect(button).toBeVisible();
44
- expect(button).not.toBeDisabled();
45
- });
46
- test('should render <a /> tag', async () => {
47
- (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, url: buttonProps.url, target: buttonProps.target }));
48
- const button = react_2.screen.getByRole('link');
49
- expect(button).toBeVisible();
50
- expect(button).toHaveAttribute('href', buttonProps.url);
51
- expect(button).toHaveAttribute('target', buttonProps.target);
52
- });
53
- test('call onClick', async () => {
54
- const user = user_event_1.default.setup();
55
- const handleOnClick = jest.fn();
56
- (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, onClick: handleOnClick }));
57
- const button = react_2.screen.getByRole('button');
58
- await user.click(button);
59
- expect(handleOnClick).toHaveBeenCalledTimes(1);
60
- });
61
- test.each(new Array('s', 'm', 'l', 'xl'))('render with given "%s" size', (size) => {
62
- (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, size: size, qa: qaId }));
63
- const button = react_2.screen.getByTestId(qaId);
64
- expect(button).toHaveClass(`pc-button-block_size_${size}`);
65
- });
66
- test.each(new Array(...buttonViews))('render with given "%s" view', (theme) => {
67
- (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, theme: theme, qa: qaId }));
68
- const button = react_2.screen.getByTestId(qaId);
69
- expect(button).toHaveClass(`pc-button-block_theme_${theme}`);
70
- });
71
- test('add className', () => {
72
- const className = 'my-class';
73
- (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, className: className, qa: qaId }));
74
- const button = react_2.screen.getByTestId(qaId);
75
- expect(button).toHaveClass(className);
76
- });
77
- test('should render icon', () => {
78
- (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, img: buttonProps.img }));
79
- const button = react_2.screen.getByRole('button');
80
- const iconComponent = react_2.screen.getByRole('img');
81
- expect(iconComponent).toBeVisible();
82
- expect(button).toContainElement(iconComponent);
83
- });
84
- test('should render github icon', () => {
85
- (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, img: buttonProps.img, theme: "github" }));
86
- const button = react_2.screen.getByRole('button');
87
- const iconComponent = react_2.screen.getByTestId(utils_1.ICON_QA);
88
- expect(iconComponent).toBeVisible();
89
- expect(button).toContainElement(iconComponent);
90
- });
91
- });
@@ -1,58 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const react_1 = tslib_1.__importDefault(require("react"));
5
- const react_2 = require("@testing-library/react");
6
- const user_event_1 = tslib_1.__importDefault(require("@testing-library/user-event"));
7
- const ButtonTabs_1 = tslib_1.__importDefault(require("../ButtonTabs"));
8
- const qaId = 'button-tabs-component';
9
- const items = [
10
- {
11
- id: '0',
12
- title: 'tab-1',
13
- },
14
- {
15
- id: '1',
16
- title: 'tab-2',
17
- },
18
- {
19
- id: '2',
20
- title: 'tab-3',
21
- },
22
- ];
23
- describe('ButtonTabs', () => {
24
- test('render ButtonTabs by default', async () => {
25
- (0, react_2.render)(react_1.default.createElement(ButtonTabs_1.default, { items: items, qa: qaId }));
26
- const buttonTabs = react_2.screen.getByTestId(qaId);
27
- expect(buttonTabs).toBeInTheDocument();
28
- expect(buttonTabs).toBeVisible();
29
- expect(buttonTabs).not.toBeDisabled();
30
- });
31
- test('has active tab', async () => {
32
- const activeTabId = 1;
33
- (0, react_2.render)(react_1.default.createElement(ButtonTabs_1.default, { items: items, qa: qaId, activeTab: String(activeTabId) }));
34
- const buttons = react_2.screen.getAllByRole('button');
35
- buttons.forEach((button, index) => {
36
- if (index === activeTabId) {
37
- expect(button).toHaveClass('pc-button-tabs__item_active');
38
- }
39
- expect(button).toHaveClass('pc-button-block_theme_normal');
40
- });
41
- });
42
- test('add className', () => {
43
- const className = 'my-class';
44
- (0, react_2.render)(react_1.default.createElement(ButtonTabs_1.default, { items: items, qa: qaId, className: className }));
45
- const buttonTabs = react_2.screen.getByTestId(qaId);
46
- expect(buttonTabs).toHaveClass(className);
47
- });
48
- test('call onSelectTab', async () => {
49
- const user = user_event_1.default.setup();
50
- const handleOnClick = jest.fn();
51
- (0, react_2.render)(react_1.default.createElement(ButtonTabs_1.default, { items: items, qa: qaId, onSelectTab: handleOnClick }));
52
- const buttons = react_2.screen.getAllByRole('button');
53
- buttons.forEach(async (button, i) => {
54
- await user.click(button);
55
- expect(handleOnClick).toHaveBeenCalledTimes(i + 1);
56
- });
57
- });
58
- });
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
- import { render, screen } from '@testing-library/react';
3
- import Anchor from '../Anchor';
4
- const testId = 'anchor';
5
- const anchorId = 'anchorId';
6
- describe('Anchor', () => {
7
- test('Has id', async () => {
8
- render(React.createElement(Anchor, { id: anchorId, dataQa: testId }));
9
- const anchor = screen.getByTestId(testId);
10
- expect(anchor).toHaveAttribute('id', anchorId);
11
- });
12
- test('Has custom class', async () => {
13
- const className = 'custom-anchor-class';
14
- render(React.createElement(Anchor, { id: anchorId, className: className, dataQa: testId }));
15
- const anchor = screen.getByTestId(testId);
16
- expect(anchor).toHaveClass(className);
17
- });
18
- });
@@ -1,33 +0,0 @@
1
- import React from 'react';
2
- import { render, screen } from '@testing-library/react';
3
- import userEvent from '@testing-library/user-event';
4
- import AnimateBlock from '../AnimateBlock';
5
- const qaId = 'animate-block';
6
- describe('AnimateBlock', () => {
7
- test('render AnimateBlock by default', async () => {
8
- render(React.createElement(AnimateBlock, { qa: qaId }));
9
- const component = screen.getByTestId(qaId);
10
- expect(component).toBeInTheDocument();
11
- });
12
- test('add className', () => {
13
- const className = 'my-class';
14
- render(React.createElement(AnimateBlock, { qa: qaId, className: className }));
15
- const component = screen.getByTestId(qaId);
16
- expect(component).toHaveClass(className);
17
- });
18
- test('use passed style', () => {
19
- const style = { color: 'red' };
20
- render(React.createElement(AnimateBlock, { style: style, qa: qaId }));
21
- const component = screen.getByTestId(qaId);
22
- expect(component).toHaveStyle(style);
23
- });
24
- test('call onScroll', async () => {
25
- const onScroll = jest.fn();
26
- const user = userEvent.setup();
27
- render(React.createElement("div", { style: { paddingTop: 100000 } },
28
- React.createElement(AnimateBlock, { onScroll: onScroll, qa: qaId })));
29
- const component = screen.getByTestId(qaId);
30
- await user.hover(component);
31
- expect(onScroll).toHaveBeenCalledTimes(1);
32
- });
33
- });
@@ -1,46 +0,0 @@
1
- import React from 'react';
2
- import { render, screen } from '@testing-library/react';
3
- import { AuthorType } from '../../../models';
4
- import Author from '../Author';
5
- const testId = 'author';
6
- const author = {
7
- firstName: 'John',
8
- secondName: 'Doe',
9
- description: 'Web designer',
10
- avatar: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png',
11
- };
12
- describe('Author', () => {
13
- test('Render author by default', async () => {
14
- render(React.createElement(Author, { author: author, dataQa: testId }));
15
- const object = screen.getByTestId(testId);
16
- expect(object).toBeInTheDocument();
17
- });
18
- test('Has full name', async () => {
19
- const name = `${author.firstName} ${author.secondName}`;
20
- render(React.createElement(Author, { author: author, dataQa: testId }));
21
- const object = screen.getByText(name);
22
- expect(object).toBeInTheDocument();
23
- });
24
- test('Has first name only', async () => {
25
- const name = author.firstName;
26
- render(React.createElement(Author, { author: Object.assign(Object.assign({}, author), { secondName: '' }), dataQa: testId }));
27
- const object = screen.getByText(name);
28
- expect(object).toBeInTheDocument();
29
- });
30
- test('Has avatar', async () => {
31
- render(React.createElement(Author, { author: author, dataQa: testId }));
32
- const avatar = screen.getByRole('img');
33
- expect(avatar).toBeInTheDocument();
34
- expect(avatar).toHaveAttribute('src', author.avatar);
35
- });
36
- test('Has description', async () => {
37
- render(React.createElement(Author, { author: author, dataQa: testId }));
38
- const object = screen.getByText(author.description);
39
- expect(object).toBeInTheDocument();
40
- });
41
- test.each(new Array(AuthorType.Column, AuthorType.Line))('Render with given "%s" type', (type) => {
42
- render(React.createElement(Author, { author: author, dataQa: testId, type: type }));
43
- const object = screen.getByTestId(testId);
44
- expect(object).toHaveClass(`pc-author_type_${type}`);
45
- });
46
- });
@@ -1,60 +0,0 @@
1
- import React from 'react';
2
- import { render, screen } from '@testing-library/react';
3
- import userEvent from '@testing-library/user-event';
4
- import { LocationContext } from '../../../context/locationContext';
5
- import BackLink from '../BackLink';
6
- const backLinkProps = {
7
- url: '#',
8
- title: 'Button Title',
9
- theme: 'default',
10
- size: 's',
11
- className: 'customClassName',
12
- shouldHandleBackAction: true,
13
- onClick: () => { },
14
- };
15
- describe('BackLink', () => {
16
- test('Default render', async () => {
17
- render(React.createElement(BackLink, Object.assign({}, backLinkProps)));
18
- const backLink = screen.getByRole('button');
19
- expect(backLink).toBeInTheDocument();
20
- });
21
- test('Has custom class', async () => {
22
- render(React.createElement(BackLink, Object.assign({}, backLinkProps)));
23
- const backLink = screen.getByRole('button');
24
- expect(backLink).toHaveClass(backLinkProps.className);
25
- });
26
- test('Should render <a /> tag', async () => {
27
- render(React.createElement(BackLink, Object.assign({}, backLinkProps, { shouldHandleBackAction: false })));
28
- const backLink = screen.getByRole('link');
29
- expect(backLink).toBeVisible();
30
- expect(backLink).toHaveAttribute('href', backLinkProps.url);
31
- });
32
- test('Should render title', async () => {
33
- render(React.createElement(BackLink, Object.assign({}, backLinkProps)));
34
- const backLink = screen.getByText(backLinkProps.title);
35
- expect(backLink).toBeInTheDocument();
36
- });
37
- test('Call onClick', async () => {
38
- const user = userEvent.setup();
39
- const handleClick = jest.fn();
40
- render(React.createElement(LocationContext.Provider, { value: { history: { push: jest.fn() } } },
41
- React.createElement(BackLink, Object.assign({}, backLinkProps, { onClick: handleClick }))));
42
- const backLink = screen.getByRole('button');
43
- await user.click(backLink);
44
- expect(handleClick).toHaveBeenCalledTimes(1);
45
- });
46
- test.each(new Array('s', 'm', 'l', 'xl'))('Render with given "%s" size', (size) => {
47
- render(React.createElement(BackLink, Object.assign({}, backLinkProps, { size: size })));
48
- const backLink = screen.getByRole('button');
49
- expect(backLink).toHaveClass(`yc-button_size_${size}`);
50
- });
51
- test.each(new Array('default', 'special'))('Render with given "%s" theme', (theme) => {
52
- const matchView = {
53
- default: 'flat-secondary',
54
- special: 'flat-contrast',
55
- };
56
- render(React.createElement(BackLink, Object.assign({}, backLinkProps, { theme: theme })));
57
- const backLink = screen.getByRole('button');
58
- expect(backLink).toHaveClass(`yc-button_view_${matchView[theme]}`);
59
- });
60
- });
@@ -1,41 +0,0 @@
1
- import React from 'react';
2
- import { render, screen } from '@testing-library/react';
3
- import { qaIdByDefault } from '../../../components/Anchor/Anchor';
4
- import { GridColumnSize } from '../../../grid';
5
- import BlockBase from '../BlockBase';
6
- const qaId = 'block-base-component';
7
- describe('BlockBase', () => {
8
- test('render component by default', async () => {
9
- render(React.createElement(BlockBase, { qa: qaId }));
10
- const component = screen.getByTestId(qaId);
11
- expect(component).toBeInTheDocument();
12
- expect(component).toBeVisible();
13
- expect(component).not.toBeDisabled();
14
- });
15
- test('add className', () => {
16
- const className = 'my-class';
17
- render(React.createElement(BlockBase, { qa: qaId, className: className }));
18
- const component = screen.getByTestId(qaId);
19
- expect(component).toHaveClass(className);
20
- });
21
- test('should reset paddings', () => {
22
- render(React.createElement(BlockBase, { qa: qaId, resetPaddings: true }));
23
- const component = screen.getByTestId(qaId);
24
- expect(component).toHaveClass('pc-block-base_reset-paddings');
25
- });
26
- test.each(new Array(...Object.values(GridColumnSize)))('render with given "%s" size', (size) => {
27
- render(React.createElement(BlockBase, { qa: qaId, visible: size }));
28
- const component = screen.getByTestId(qaId);
29
- expect(component).toHaveClass(`d-${size}-block`);
30
- });
31
- test('should have anchor', () => {
32
- const anchor = {
33
- text: 'anchor',
34
- url: 'https://github.com/gravity-ui/',
35
- };
36
- render(React.createElement(BlockBase, { anchor: anchor }));
37
- const component = screen.getByTestId(qaIdByDefault);
38
- expect(component).toBeInTheDocument();
39
- expect(component).toHaveAttribute('id', anchor.url);
40
- });
41
- });
@@ -1,16 +0,0 @@
1
- /* use this for style redefinitions to awoid problems with
2
- unpredictable css rules order in build */
3
- .pc-block-header__description {
4
- margin-top: 12px;
5
- }
6
- .pc-block-header__description .yfm {
7
- font-size: var(--yc-text-body-3-font-size);
8
- line-height: var(--yc-text-body-3-line-height);
9
- }
10
- .pc-block-header__description_titleSize_s, .pc-block-header__description_titleSize_xs {
11
- margin-top: 8px;
12
- }
13
- .pc-block-header__description_titleSize_s .yfm, .pc-block-header__description_titleSize_xs .yfm {
14
- font-size: var(--yc-text-body-2-font-size);
15
- line-height: var(--yc-text-body-2-line-height);
16
- }
@@ -1,8 +0,0 @@
1
- import { GridColumnSizesType } from '../../grid';
2
- import { BlockHeaderProps as BlockHeaderParams, ClassNameProps } from '../../models';
3
- import './BlockHeader.css';
4
- export interface BlockHeaderProps extends BlockHeaderParams {
5
- colSizes?: GridColumnSizesType;
6
- }
7
- declare const BlockHeader: ({ title, description, className, colSizes, }: BlockHeaderProps & ClassNameProps) => JSX.Element | null;
8
- export default BlockHeader;
@@ -1,21 +0,0 @@
1
- import { __rest } from "tslib";
2
- import React from 'react';
3
- import { Title } from '../';
4
- import { Col } from '../../grid';
5
- import { block } from '../../utils';
6
- import YFMWrapper from '../YFMWrapper/YFMWrapper';
7
- import './BlockHeader.css';
8
- const b = block('block-header');
9
- const BlockHeader = ({ title, description, className, colSizes = { all: 12, sm: 8 }, }) => {
10
- if (!title && !description) {
11
- return null;
12
- }
13
- const _a = !title || typeof title === 'string' ? { text: title } : title, { text } = _a, titleProps = __rest(_a, ["text"]);
14
- return (React.createElement("div", { className: b(null, className) },
15
- text && (React.createElement(Col, { reset: true, sizes: colSizes },
16
- React.createElement(Title, Object.assign({ text: text }, titleProps)))),
17
- description && (React.createElement(Col, { reset: true, sizes: colSizes },
18
- React.createElement("div", { className: b('description', { titleSize: titleProps === null || titleProps === void 0 ? void 0 : titleProps.textSize }) },
19
- React.createElement(YFMWrapper, { content: description, modifiers: { constructor: true } }))))));
20
- };
21
- export default BlockHeader;
@@ -1,88 +0,0 @@
1
- import React from 'react';
2
- import { render, screen } from '@testing-library/react';
3
- import userEvent from '@testing-library/user-event';
4
- import Button from '../Button';
5
- import { ICON_QA } from '../utils';
6
- const qaId = 'button-component';
7
- const buttonProps = {
8
- text: 'Button Text',
9
- url: 'https://github.com/gravity-ui/',
10
- target: '_blank',
11
- img: {
12
- url: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg',
13
- position: 'left',
14
- alt: 'alt-text',
15
- },
16
- };
17
- const buttonViews = [
18
- 'normal',
19
- 'action',
20
- 'outlined',
21
- 'outlined-info',
22
- 'outlined-danger',
23
- 'raised',
24
- 'flat',
25
- 'flat-info',
26
- 'flat-danger',
27
- 'flat-secondary',
28
- 'normal-contrast',
29
- 'outlined-contrast',
30
- 'flat-contrast',
31
- 'github',
32
- 'scale',
33
- 'monochrome',
34
- ];
35
- describe('Button', () => {
36
- test('render button by default', async () => {
37
- render(React.createElement(Button, { text: buttonProps.text }));
38
- const button = screen.getByRole('button');
39
- expect(button).toBeInTheDocument();
40
- expect(button).toBeVisible();
41
- expect(button).not.toBeDisabled();
42
- });
43
- test('should render <a /> tag', async () => {
44
- render(React.createElement(Button, { text: buttonProps.text, url: buttonProps.url, target: buttonProps.target }));
45
- const button = screen.getByRole('link');
46
- expect(button).toBeVisible();
47
- expect(button).toHaveAttribute('href', buttonProps.url);
48
- expect(button).toHaveAttribute('target', buttonProps.target);
49
- });
50
- test('call onClick', async () => {
51
- const user = userEvent.setup();
52
- const handleOnClick = jest.fn();
53
- render(React.createElement(Button, { text: buttonProps.text, onClick: handleOnClick }));
54
- const button = screen.getByRole('button');
55
- await user.click(button);
56
- expect(handleOnClick).toHaveBeenCalledTimes(1);
57
- });
58
- test.each(new Array('s', 'm', 'l', 'xl'))('render with given "%s" size', (size) => {
59
- render(React.createElement(Button, { text: buttonProps.text, size: size, qa: qaId }));
60
- const button = screen.getByTestId(qaId);
61
- expect(button).toHaveClass(`pc-button-block_size_${size}`);
62
- });
63
- test.each(new Array(...buttonViews))('render with given "%s" view', (theme) => {
64
- render(React.createElement(Button, { text: buttonProps.text, theme: theme, qa: qaId }));
65
- const button = screen.getByTestId(qaId);
66
- expect(button).toHaveClass(`pc-button-block_theme_${theme}`);
67
- });
68
- test('add className', () => {
69
- const className = 'my-class';
70
- render(React.createElement(Button, { text: buttonProps.text, className: className, qa: qaId }));
71
- const button = screen.getByTestId(qaId);
72
- expect(button).toHaveClass(className);
73
- });
74
- test('should render icon', () => {
75
- render(React.createElement(Button, { text: buttonProps.text, img: buttonProps.img }));
76
- const button = screen.getByRole('button');
77
- const iconComponent = screen.getByRole('img');
78
- expect(iconComponent).toBeVisible();
79
- expect(button).toContainElement(iconComponent);
80
- });
81
- test('should render github icon', () => {
82
- render(React.createElement(Button, { text: buttonProps.text, img: buttonProps.img, theme: "github" }));
83
- const button = screen.getByRole('button');
84
- const iconComponent = screen.getByTestId(ICON_QA);
85
- expect(iconComponent).toBeVisible();
86
- expect(button).toContainElement(iconComponent);
87
- });
88
- });