@gravity-ui/page-constructor 2.21.0 → 2.22.0-alpha

package/CHANGELOG.md

@@ -1,58 +1,5 @@
 # Changelog
 
-## [2.21.0](https://github.com/gravity-ui/page-constructor/compare/v2.20.1...v2.21.0) (2023-05-29)
-
-
-### Features
-
-* remove metrika goals from pixel events ([#355](https://github.com/gravity-ui/page-constructor/issues/355)) ([1a0ddae](https://github.com/gravity-ui/page-constructor/commit/1a0ddae92e4862665c64652c0da27cee9085d286))
-
-## [2.20.1](https://github.com/gravity-ui/page-constructor/compare/v2.20.0...v2.20.1) (2023-05-29)
-
-
-### Bug Fixes
-
-* editor scroll ([#352](https://github.com/gravity-ui/page-constructor/issues/352)) ([9fbbefe](https://github.com/gravity-ui/page-constructor/commit/9fbbefec311a0017eab7533b0b26bbddf97ff453))
-
-## [2.20.0](https://github.com/gravity-ui/page-constructor/compare/v2.19.0...v2.20.0) (2023-05-25)
-
-
-### Features
-
-* add page structure editor ([8d1dafe](https://github.com/gravity-ui/page-constructor/commit/8d1dafe964a9af3c7f5ad0e6039cccf2d24da64f))
-* Edit mode ([#347](https://github.com/gravity-ui/page-constructor/issues/347)) ([8d1dafe](https://github.com/gravity-ui/page-constructor/commit/8d1dafe964a9af3c7f5ad0e6039cccf2d24da64f))
-
-
-### Bug Fixes
-
-* customization types import fix ([#350](https://github.com/gravity-ui/page-constructor/issues/350)) ([206306f](https://github.com/gravity-ui/page-constructor/commit/206306f95d87ae428538b27dca08f78cb4de9430))
-
-## [2.19.0](https://github.com/gravity-ui/page-constructor/compare/v2.18.0...v2.19.0) (2023-05-23)
-
-
-### Features
-
-* **Button:** add prop width ([#346](https://github.com/gravity-ui/page-constructor/issues/346)) ([f4b1ba8](https://github.com/gravity-ui/page-constructor/commit/f4b1ba85f56ef2de435bd91ae1fc35fbea0a177b))
-
-## [2.18.0](https://github.com/gravity-ui/page-constructor/compare/v2.18.0...v2.18.0) (2023-05-15)
-
-
-### Features
-
-* **HubspotForm:** add ref forwarding for HS form ([#332](https://github.com/gravity-ui/page-constructor/issues/332)) ([37b75d3](https://github.com/gravity-ui/page-constructor/commit/37b75d31c09e8dc061d718828bcccc72b037e106))
-
-
-### Bug Fixes
-
-* config gulpfile for tests ([a5cb59d](https://github.com/gravity-ui/page-constructor/commit/a5cb59d0bc1e3a8c09babed0c5ace9a2253416c3))
-
-## [2.17.0](https://github.com/gravity-ui/page-constructor/compare/v2.16.0...v2.17.0) (2023-05-12)
-
-
-### Features
-
-* drop rules overriding ([#303](https://github.com/gravity-ui/page-constructor/issues/303)) ([0c13398](https://github.com/gravity-ui/page-constructor/commit/0c1339885ce3b930ab9428b585aa6dd020b0d298))
-
 ## [2.16.0](https://github.com/gravity-ui/page-constructor/compare/v2.15.0...v2.16.0) (2023-05-11)
 
 

package/README.md

@@ -184,7 +184,7 @@ Sub-blocks are components that can be used in the block `children` property. In
    - Add it to `enum` or `selectCases` in the `schema/index.ts` file.
 
 6. In the block directory, add the `README.md` file with a description of input parameters.
-7. In the block directory add storybook demo in `__stories__` folder. (All demo content for story should be placed in `data.json` at story dir)
+7. In the block directory add storybook demo in `__stories__` folder. All demo content for story should be placed in `data.json` at story dir. The generic `Story` must accept the type of block props, otherwise incorrect block props will be displayed in Storybook.
 
 ### Themes
 

package/build/cjs/blocks/Header/schema.d.ts

@@ -137,6 +137,12 @@ export declare const HeaderBackgroundProps: {
                 type: string;
             })[];
         };
+        fullScreen: {
+            type: string;
+        };
+        fullscreen: {
+            type: string;
+        };
     };
 };
 export declare const HeaderProperties: {
@@ -424,6 +430,12 @@ export declare const HeaderProperties: {
                         type: string;
                     })[];
                 };
+                fullScreen: {
+                    type: string;
+                };
+                fullscreen: {
+                    type: string;
+                };
             };
         } | {
             type: string;
@@ -757,6 +769,12 @@ export declare const HeaderBlock: {
                                 type: string;
                             })[];
                         };
+                        fullScreen: {
+                            type: string;
+                        };
+                        fullscreen: {
+                            type: string;
+                        };
                     };
                 } | {
                     type: string;

package/build/cjs/blocks/HeaderSlider/schema.d.ts

@@ -294,6 +294,12 @@ export declare const HeaderSliderBlock: {
                                             type: string;
                                         })[];
                                     };
+                                    fullScreen: {
+                                        type: string;
+                                    };
+                                    fullscreen: {
+                                        type: string;
+                                    };
                                 };
                             } | {
                                 type: string;

package/build/cjs/blocks/Media/schema.d.ts

@@ -131,6 +131,12 @@ export declare const Media: {
                 type: string;
             })[];
         };
+        fullScreen: {
+            type: string;
+        };
+        fullscreen: {
+            type: string;
+        };
     };
 };
 export declare const MediaBlockBaseProps: {
@@ -608,6 +614,12 @@ export declare const MediaBlock: {
                             type: string;
                         })[];
                     };
+                    fullScreen: {
+                        type: string;
+                    };
+                    fullscreen: {
+                        type: string;
+                    };
                 };
             };
             description: {

package/build/cjs/blocks/PromoFeaturesBlock/schema.d.ts

@@ -146,6 +146,12 @@ export declare const PromoFeaturesItem: {
                         type: string;
                     })[];
                 };
+                fullScreen: {
+                    type: string;
+                };
+                fullscreen: {
+                    type: string;
+                };
             };
         };
     };

package/build/cjs/blocks/Security/schema.d.ts

@@ -147,6 +147,12 @@ export declare const SecurityBlock: {
                             type: string;
                         })[];
                     };
+                    fullScreen: {
+                        type: string;
+                    };
+                    fullscreen: {
+                        type: string;
+                    };
                 };
             };
             points: {

package/build/cjs/blocks/Tabs/schema.d.ts

@@ -142,6 +142,12 @@ export declare const tabsItem: {
                             type: string;
                         })[];
                     };
+                    fullScreen: {
+                        type: string;
+                    };
+                    fullscreen: {
+                        type: string;
+                    };
                 };
             } | {
                 type: string;

package/build/cjs/components/Anchor/Anchor.d.ts

@@ -2,7 +2,7 @@ import { ClassNameProps } from '../../models';
 export declare const qaIdByDefault = "qa-anchor";
 export interface AnchorProps extends ClassNameProps {
     id: string;
-    qa?: string;
+    dataQa?: string;
 }
-declare const Anchor: ({ id, className, qa }: AnchorProps) => JSX.Element;
+declare const Anchor: ({ id, className, dataQa }: AnchorProps) => JSX.Element;
 export default Anchor;

package/build/cjs/components/Anchor/Anchor.js

@@ -7,5 +7,5 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('Anchor');
 exports.qaIdByDefault = 'qa-anchor';
-const Anchor = ({ id, className, qa }) => (react_1.default.createElement("div", { id: id, className: b(null, className), "data-qa": qa || exports.qaIdByDefault }));
+const Anchor = ({ id, className, dataQa }) => (react_1.default.createElement("div", { id: id, className: b(null, className), "data-qa": dataQa || exports.qaIdByDefault }));
 exports.default = Anchor;

package/build/cjs/components/Anchor/__tests__/Anchor.test.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Anchor_1 = tslib_1.__importDefault(require("../Anchor"));
+const testId = 'anchor';
+const anchorId = 'anchorId';
+describe('Anchor', () => {
+    test('Has id', async () => {
+        (0, react_2.render)(react_1.default.createElement(Anchor_1.default, { id: anchorId, dataQa: testId }));
+        const anchor = react_2.screen.getByTestId(testId);
+        expect(anchor).toHaveAttribute('id', anchorId);
+    });
+    test('Has custom class', async () => {
+        const className = 'custom-anchor-class';
+        (0, react_2.render)(react_1.default.createElement(Anchor_1.default, { id: anchorId, className: className, dataQa: testId }));
+        const anchor = react_2.screen.getByTestId(testId);
+        expect(anchor).toHaveClass(className);
+    });
+});

package/build/cjs/components/AnimateBlock/__tests__/AnimateBlock.test.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const user_event_1 = tslib_1.__importDefault(require("@testing-library/user-event"));
+const AnimateBlock_1 = tslib_1.__importDefault(require("../AnimateBlock"));
+const qaId = 'animate-block';
+describe('AnimateBlock', () => {
+    test('render AnimateBlock by default', async () => {
+        (0, react_2.render)(react_1.default.createElement(AnimateBlock_1.default, { qa: qaId }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toBeInTheDocument();
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        (0, react_2.render)(react_1.default.createElement(AnimateBlock_1.default, { qa: qaId, className: className }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toHaveClass(className);
+    });
+    test('use passed style', () => {
+        const style = { color: 'red' };
+        (0, react_2.render)(react_1.default.createElement(AnimateBlock_1.default, { style: style, qa: qaId }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toHaveStyle(style);
+    });
+    test('call onScroll', async () => {
+        const onScroll = jest.fn();
+        const user = user_event_1.default.setup();
+        (0, react_2.render)(react_1.default.createElement("div", { style: { paddingTop: 100000 } },
+            react_1.default.createElement(AnimateBlock_1.default, { onScroll: onScroll, qa: qaId })));
+        const component = react_2.screen.getByTestId(qaId);
+        await user.hover(component);
+        expect(onScroll).toHaveBeenCalledTimes(1);
+    });
+});

package/build/cjs/components/Author/__tests__/Author.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/cjs/components/Author/__tests__/Author.test.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const models_1 = require("../../../models");
+const Author_1 = tslib_1.__importDefault(require("../Author"));
+const testId = 'author';
+const author = {
+    firstName: 'John',
+    secondName: 'Doe',
+    description: 'Web designer',
+    avatar: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png',
+};
+describe('Author', () => {
+    test('Render author by default', async () => {
+        (0, react_2.render)(react_1.default.createElement(Author_1.default, { author: author, dataQa: testId }));
+        const object = react_2.screen.getByTestId(testId);
+        expect(object).toBeInTheDocument();
+    });
+    test('Has full name', async () => {
+        const name = `${author.firstName} ${author.secondName}`;
+        (0, react_2.render)(react_1.default.createElement(Author_1.default, { author: author, dataQa: testId }));
+        const object = react_2.screen.getByText(name);
+        expect(object).toBeInTheDocument();
+    });
+    test('Has first name only', async () => {
+        const name = author.firstName;
+        (0, react_2.render)(react_1.default.createElement(Author_1.default, { author: Object.assign(Object.assign({}, author), { secondName: '' }), dataQa: testId }));
+        const object = react_2.screen.getByText(name);
+        expect(object).toBeInTheDocument();
+    });
+    test('Has avatar', async () => {
+        (0, react_2.render)(react_1.default.createElement(Author_1.default, { author: author, dataQa: testId }));
+        const avatar = react_2.screen.getByRole('img');
+        expect(avatar).toBeInTheDocument();
+        expect(avatar).toHaveAttribute('src', author.avatar);
+    });
+    test('Has description', async () => {
+        (0, react_2.render)(react_1.default.createElement(Author_1.default, { author: author, dataQa: testId }));
+        const object = react_2.screen.getByText(author.description);
+        expect(object).toBeInTheDocument();
+    });
+    test.each(new Array(models_1.AuthorType.Column, models_1.AuthorType.Line))('Render with given "%s" type', (type) => {
+        (0, react_2.render)(react_1.default.createElement(Author_1.default, { author: author, dataQa: testId, type: type }));
+        const object = react_2.screen.getByTestId(testId);
+        expect(object).toHaveClass(`pc-author_type_${type}`);
+    });
+});

package/build/cjs/components/BackLink/__tests__/BackLink.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/cjs/components/BackLink/__tests__/BackLink.test.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const user_event_1 = tslib_1.__importDefault(require("@testing-library/user-event"));
+const locationContext_1 = require("../../../context/locationContext");
+const BackLink_1 = tslib_1.__importDefault(require("../BackLink"));
+const backLinkProps = {
+    url: '#',
+    title: 'Button Title',
+    theme: 'default',
+    size: 's',
+    className: 'customClassName',
+    shouldHandleBackAction: true,
+    onClick: () => { },
+};
+describe('BackLink', () => {
+    test('Default render', async () => {
+        (0, react_2.render)(react_1.default.createElement(BackLink_1.default, Object.assign({}, backLinkProps)));
+        const backLink = react_2.screen.getByRole('button');
+        expect(backLink).toBeInTheDocument();
+    });
+    test('Has custom class', async () => {
+        (0, react_2.render)(react_1.default.createElement(BackLink_1.default, Object.assign({}, backLinkProps)));
+        const backLink = react_2.screen.getByRole('button');
+        expect(backLink).toHaveClass(backLinkProps.className);
+    });
+    test('Should render <a /> tag', async () => {
+        (0, react_2.render)(react_1.default.createElement(BackLink_1.default, Object.assign({}, backLinkProps, { shouldHandleBackAction: false })));
+        const backLink = react_2.screen.getByRole('link');
+        expect(backLink).toBeVisible();
+        expect(backLink).toHaveAttribute('href', backLinkProps.url);
+    });
+    test('Should render title', async () => {
+        (0, react_2.render)(react_1.default.createElement(BackLink_1.default, Object.assign({}, backLinkProps)));
+        const backLink = react_2.screen.getByText(backLinkProps.title);
+        expect(backLink).toBeInTheDocument();
+    });
+    test('Call onClick', async () => {
+        const user = user_event_1.default.setup();
+        const handleClick = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(locationContext_1.LocationContext.Provider, { value: { history: { push: jest.fn() } } },
+            react_1.default.createElement(BackLink_1.default, Object.assign({}, backLinkProps, { onClick: handleClick }))));
+        const backLink = react_2.screen.getByRole('button');
+        await user.click(backLink);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    test.each(new Array('s', 'm', 'l', 'xl'))('Render with given "%s" size', (size) => {
+        (0, react_2.render)(react_1.default.createElement(BackLink_1.default, Object.assign({}, backLinkProps, { size: size })));
+        const backLink = react_2.screen.getByRole('button');
+        expect(backLink).toHaveClass(`yc-button_size_${size}`);
+    });
+    test.each(new Array('default', 'special'))('Render with given "%s" theme', (theme) => {
+        const matchView = {
+            default: 'flat-secondary',
+            special: 'flat-contrast',
+        };
+        (0, react_2.render)(react_1.default.createElement(BackLink_1.default, Object.assign({}, backLinkProps, { theme: theme })));
+        const backLink = react_2.screen.getByRole('button');
+        expect(backLink).toHaveClass(`yc-button_view_${matchView[theme]}`);
+    });
+});

package/build/cjs/components/BackgroundImage/BackgroundImage.js

@@ -6,8 +6,8 @@ const utils_1 = require("../../utils");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
 const b = (0, utils_1.block)('storage-background-image');
 const BackgroundImage = (props) => {
-    const { children, src, desktop, className, imageClassName, style, hide, qa } = props;
-    return (react_1.default.createElement("div", { className: b(null, className), style: style, "data-qa": qa },
+    const { children, src, desktop, className, imageClassName, style, hide } = props;
+    return (react_1.default.createElement("div", { className: b(null, className), style: style },
         (src || desktop) && !hide && react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('img', imageClassName) })),
         children && react_1.default.createElement("div", { className: b('container') }, children)));
 };

package/build/cjs/components/BlockBase/BlockBase.d.ts

@@ -1,4 +1,3 @@
-import { PropsWithChildren } from 'react';
-import { BlockBaseProps, ClassNameProps } from '../../models';
-declare const BlockBase: (props: PropsWithChildren<BlockBaseProps & ClassNameProps>) => JSX.Element;
+import { BlockBaseProps, ClassNameProps, WithChildren } from '../../models';
+declare const BlockBase: (props: WithChildren<BlockBaseProps & ClassNameProps>) => JSX.Element;
 export default BlockBase;

package/build/cjs/components/BlockBase/BlockBase.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const BlockDecoration_1 = require("../../customization/BlockDecoration");
 const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
 const Anchor_1 = tslib_1.__importDefault(require("../Anchor/Anchor"));
@@ -10,8 +9,7 @@ const b = (0, utils_1.block)('block-base');
 const BlockBase = (props) => {
     const { anchor, visible, children, className, resetPaddings, qa } = props;
     return (react_1.default.createElement(grid_1.Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true, dataQa: qa },
-        react_1.default.createElement(BlockDecoration_1.BlockDecoration, null,
-            anchor && react_1.default.createElement(Anchor_1.default, { id: anchor.url, className: b('anchor') }),
-            children)));
+        anchor && react_1.default.createElement(Anchor_1.default, { id: anchor.url, className: b('anchor') }),
+        children));
 };
 exports.default = BlockBase;

package/build/cjs/components/BlockBase/__tests__/BlockBase.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/cjs/components/BlockBase/__tests__/BlockBase.test.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Anchor_1 = require("../../../components/Anchor/Anchor");
+const grid_1 = require("../../../grid");
+const BlockBase_1 = tslib_1.__importDefault(require("../BlockBase"));
+const qaId = 'block-base-component';
+describe('BlockBase', () => {
+    test('render component by default', async () => {
+        (0, react_2.render)(react_1.default.createElement(BlockBase_1.default, { qa: qaId }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+        expect(component).not.toBeDisabled();
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        (0, react_2.render)(react_1.default.createElement(BlockBase_1.default, { qa: qaId, className: className }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toHaveClass(className);
+    });
+    test('should reset paddings', () => {
+        (0, react_2.render)(react_1.default.createElement(BlockBase_1.default, { qa: qaId, resetPaddings: true }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toHaveClass('pc-block-base_reset-paddings');
+    });
+    test.each(new Array(...Object.values(grid_1.GridColumnSize)))('render with given "%s" size', (size) => {
+        (0, react_2.render)(react_1.default.createElement(BlockBase_1.default, { qa: qaId, visible: size }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toHaveClass(`d-${size}-block`);
+    });
+    test('should have anchor', () => {
+        const anchor = {
+            text: 'anchor',
+            url: 'https://github.com/gravity-ui/',
+        };
+        (0, react_2.render)(react_1.default.createElement(BlockBase_1.default, { anchor: anchor }));
+        const component = react_2.screen.getByTestId(Anchor_1.qaIdByDefault);
+        expect(component).toBeInTheDocument();
+        expect(component).toHaveAttribute('id', anchor.url);
+    });
+});

package/build/cjs/components/Button/Button.css

@@ -45,7 +45,4 @@ unpredictable css rules order in build */
 }
 .pc-button-block_size_xl {
   --btn-image-margin: 25px;
-}
-.pc-button-block_width_max .pc-button-block__text {
-  width: 100%;
 }

package/build/cjs/components/Button/Button.js

@@ -15,7 +15,7 @@ const b = (0, utils_1.block)('button-block');
 const Button = (props) => {
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const { lang, tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);
-    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text, width } = props, rest = tslib_1.__rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text", "width"]);
+    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = tslib_1.__rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text"]);
     const defaultImgPosition = 'left';
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.Button, url);
     const onClick = (0, react_1.useCallback)((e) => {
@@ -25,13 +25,12 @@ const Button = (props) => {
             onClickOrigin(e);
         }
     }, [handleMetrika, metrikaGoals, pixelEvents, handleAnalytics, analyticsEvents, onClickOrigin]);
-    const buttonModifiers = { size, theme, width };
     const buttonImg = img instanceof Object
         ? { url: img.url, position: img.position || defaultImgPosition, alt: img.alt }
         : { url: img, position: defaultImgPosition };
     const buttonClass = img
-        ? b(Object.assign({ position: buttonImg.position }, buttonModifiers), className)
-        : b(Object.assign({}, buttonModifiers), className);
+        ? b({ position: buttonImg.position, size, theme }, className)
+        : b({ size, theme }, className);
     const buttonProps = Object.assign(Object.assign({}, rest), { onClick });
     if (theme === 'app-store' || theme === 'google-play') {
         const platform = theme === 'app-store' ? uikit_1.Platform.IOS : uikit_1.Platform.ANDROID;
@@ -44,7 +43,7 @@ const Button = (props) => {
         image = undefined;
     }
     const buttonTheme = theme === 'scale' ? 'accent' : theme;
-    return (react_1.default.createElement(uikit_1.Button, Object.assign({ className: buttonClass, view: (0, utils_2.toCommonView)(buttonTheme), size: (0, utils_2.toCommonSize)(size), href: url ? (0, utils_1.setUrlTld)(url, tld) : undefined, width: width }, buttonProps),
+    return (react_1.default.createElement(uikit_1.Button, Object.assign({ className: buttonClass, view: (0, utils_2.toCommonView)(buttonTheme), size: (0, utils_2.toCommonSize)(size), href: url ? (0, utils_1.setUrlTld)(url, tld) : undefined }, buttonProps),
         icon && buttonImg.position === 'left' ? icon : null,
         react_1.default.createElement("span", { className: b('content') },
             image && buttonImg.position === 'left' ? image : null,

package/build/cjs/components/Button/__tests__/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/cjs/components/Button/__tests__/Button.test.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const user_event_1 = tslib_1.__importDefault(require("@testing-library/user-event"));
+const Button_1 = tslib_1.__importDefault(require("../Button"));
+const utils_1 = require("../utils");
+const qaId = 'button-component';
+const buttonProps = {
+    text: 'Button Text',
+    url: 'https://github.com/gravity-ui/',
+    target: '_blank',
+    img: {
+        url: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg',
+        position: 'left',
+        alt: 'alt-text',
+    },
+};
+const buttonViews = [
+    'normal',
+    'action',
+    'outlined',
+    'outlined-info',
+    'outlined-danger',
+    'raised',
+    'flat',
+    'flat-info',
+    'flat-danger',
+    'flat-secondary',
+    'normal-contrast',
+    'outlined-contrast',
+    'flat-contrast',
+    'github',
+    'scale',
+    'monochrome',
+];
+describe('Button', () => {
+    test('render button by default', async () => {
+        (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text }));
+        const button = react_2.screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+        expect(button).toBeVisible();
+        expect(button).not.toBeDisabled();
+    });
+    test('should render <a /> tag', async () => {
+        (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, url: buttonProps.url, target: buttonProps.target }));
+        const button = react_2.screen.getByRole('link');
+        expect(button).toBeVisible();
+        expect(button).toHaveAttribute('href', buttonProps.url);
+        expect(button).toHaveAttribute('target', buttonProps.target);
+    });
+    test('call onClick', async () => {
+        const user = user_event_1.default.setup();
+        const handleOnClick = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, onClick: handleOnClick }));
+        const button = react_2.screen.getByRole('button');
+        await user.click(button);
+        expect(handleOnClick).toHaveBeenCalledTimes(1);
+    });
+    test.each(new Array('s', 'm', 'l', 'xl'))('render with given "%s" size', (size) => {
+        (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, size: size, qa: qaId }));
+        const button = react_2.screen.getByTestId(qaId);
+        expect(button).toHaveClass(`pc-button-block_size_${size}`);
+    });
+    test.each(new Array(...buttonViews))('render with given "%s" view', (theme) => {
+        (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, theme: theme, qa: qaId }));
+        const button = react_2.screen.getByTestId(qaId);
+        expect(button).toHaveClass(`pc-button-block_theme_${theme}`);
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, className: className, qa: qaId }));
+        const button = react_2.screen.getByTestId(qaId);
+        expect(button).toHaveClass(className);
+    });
+    test('should render icon', () => {
+        (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, img: buttonProps.img }));
+        const button = react_2.screen.getByRole('button');
+        const iconComponent = react_2.screen.getByRole('img');
+        expect(iconComponent).toBeVisible();
+        expect(button).toContainElement(iconComponent);
+    });
+    test('should render github icon', () => {
+        (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, img: buttonProps.img, theme: "github" }));
+        const button = react_2.screen.getByRole('button');
+        const iconComponent = react_2.screen.getByTestId(utils_1.ICON_QA);
+        expect(iconComponent).toBeVisible();
+        expect(button).toContainElement(iconComponent);
+    });
+});

package/build/cjs/components/ButtonTabs/__tests__/ButtonTabs.test.d.ts

@@ -0,0 +1 @@
+export {};