@gravity-ui/page-constructor 2.0.2 → 2.0.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.0.3](https://github.com/gravity-ui/page-constructor/compare/v2.0.2...v2.0.3) (2023-03-27)
+
+
+### Bug Fixes
+
+* **Tabs:** wrap tabs on desktop ([#237](https://github.com/gravity-ui/page-constructor/issues/237)) ([68dd965](https://github.com/gravity-ui/page-constructor/commit/68dd965b8d5ad9439f8c59211232911695c30fd3))
+
 ## [2.0.2](https://github.com/gravity-ui/page-constructor/compare/v2.0.1...v2.0.2) (2023-03-24)
 
 

package/build/cjs/blocks/FilterBlock/FilterBlock.css

@@ -16,18 +16,14 @@ unpredictable css rules order in build */
 .pc-filter-block__tabs {
   margin-bottom: 0;
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   justify-content: flex-start;
-  overflow: auto;
 }
 .pc-filter-block__tabs_centered {
-  display: flex;
   justify-content: center;
-  flex-wrap: wrap;
 }
 @media (max-width: 769px) {
   .pc-filter-block__tabs {
-    display: flex;
     flex-wrap: nowrap;
     justify-content: flex-start;
     overflow: auto;

package/build/cjs/blocks/Tabs/Tabs.css

@@ -16,18 +16,14 @@ unpredictable css rules order in build */
 .pc-tabs-block__tabs {
   margin-bottom: 20px;
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   justify-content: flex-start;
-  overflow: auto;
 }
 .pc-tabs-block__tabs_centered {
-  display: flex;
   justify-content: center;
-  flex-wrap: wrap;
 }
 @media (max-width: 769px) {
   .pc-tabs-block__tabs {
-    display: flex;
     flex-wrap: nowrap;
     justify-content: flex-start;
     overflow: auto;

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

@@ -3,6 +3,7 @@ export interface ButtonProps extends Omit<ButtonParams, 'url'> {
     className?: string;
     url?: string;
     onClick?: () => void;
+    qa?: string;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;
 export default Button;

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

@@ -38,7 +38,7 @@ const Button = (props) => {
     let icon;
     let image = img && react_1.default.createElement("img", { className: b('image'), src: buttonImg.url, alt: buttonImg.alt });
     if (theme === 'github') {
-        icon = react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.Github, size: 24 });
+        icon = react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.Github, size: 24, qa: utils_2.ICON_QA });
         image = undefined;
     }
     const buttonTheme = theme === 'scale' ? 'accent' : theme;

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 utils_1 = require("../utils");
+const Button_1 = tslib_1.__importDefault(require("../Button"));
+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/Button/utils.d.ts

@@ -1,4 +1,5 @@
 import { ButtonSize, ButtonView } from '@gravity-ui/uikit';
+export declare const ICON_QA = "button-icon";
 export type OldButtonTheme = 'normal' | 'action' | 'flat' | 'light' | 'clear' | 'raised' | 'pseudo' | 'link' | 'accent' | 'websearch' | 'flat-special' | 'normal-special' | 'normal-dark' | 'pseudo-special';
 export type OldButtonSize = 'xs' | 'ns' | 's' | 'm' | 'l' | 'n' | 'head' | 'promo';
 export declare const toCommonView: (theme: OldButtonTheme) => ButtonView;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toCommonSize = exports.toCommonView = void 0;
+exports.toCommonSize = exports.toCommonView = exports.ICON_QA = void 0;
+exports.ICON_QA = 'button-icon';
 const themeMap = {
     normal: 'normal',
     action: 'action',

package/build/cjs/models/constructor-items/common.d.ts

@@ -130,20 +130,22 @@ export interface FileLinkProps extends ClassNameProps {
     theme?: ContentTheme;
     onClick?: () => void;
 }
+export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
 export interface ButtonProps extends AnalyticsEventsBase {
     text: string;
     url: string;
     primary?: boolean;
     size?: ButtonSize;
-    theme?: ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
+    theme?: ButtonTheme;
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
     target?: string;
 }
+export type ButtonImagePosition = 'left' | 'right';
 export interface ButtonImageProps {
     url: string;
-    position?: 'left' | 'right';
+    position?: ButtonImagePosition;
     alt?: string;
 }
 export interface PlayButtonProps extends ClassNameProps {

package/build/esm/blocks/FilterBlock/FilterBlock.css

@@ -16,18 +16,14 @@ unpredictable css rules order in build */
 .pc-filter-block__tabs {
   margin-bottom: 0;
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   justify-content: flex-start;
-  overflow: auto;
 }
 .pc-filter-block__tabs_centered {
-  display: flex;
   justify-content: center;
-  flex-wrap: wrap;
 }
 @media (max-width: 769px) {
   .pc-filter-block__tabs {
-    display: flex;
     flex-wrap: nowrap;
     justify-content: flex-start;
     overflow: auto;

package/build/esm/blocks/Tabs/Tabs.css

@@ -16,18 +16,14 @@ unpredictable css rules order in build */
 .pc-tabs-block__tabs {
   margin-bottom: 20px;
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   justify-content: flex-start;
-  overflow: auto;
 }
 .pc-tabs-block__tabs_centered {
-  display: flex;
   justify-content: center;
-  flex-wrap: wrap;
 }
 @media (max-width: 769px) {
   .pc-tabs-block__tabs {
-    display: flex;
     flex-wrap: nowrap;
     justify-content: flex-start;
     overflow: auto;

package/build/esm/components/Button/Button.d.ts

@@ -4,6 +4,7 @@ export interface ButtonProps extends Omit<ButtonParams, 'url'> {
     className?: string;
     url?: string;
     onClick?: () => void;
+    qa?: string;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;
 export default Button;

package/build/esm/components/Button/Button.js

@@ -3,7 +3,7 @@ import React, { useCallback, useContext } from 'react';
 import { Platform, Button as CommonButton, Icon, StoreBadge } from '@gravity-ui/uikit';
 import { block, setUrlTld } from '../../utils';
 import { DefaultEventNames } from '../../models';
-import { toCommonSize, toCommonView } from './utils';
+import { toCommonSize, toCommonView, ICON_QA } from './utils';
 import { LocaleContext } from '../../context/localeContext/localeContext';
 import { useMetrika } from '../../hooks/useMetrika';
 import { useAnalytics } from '../../hooks';
@@ -37,7 +37,7 @@ const Button = (props) => {
     let icon;
     let image = img && React.createElement("img", { className: b('image'), src: buttonImg.url, alt: buttonImg.alt });
     if (theme === 'github') {
-        icon = React.createElement(Icon, { className: b('icon'), data: Github, size: 24 });
+        icon = React.createElement(Icon, { className: b('icon'), data: Github, size: 24, qa: ICON_QA });
         image = undefined;
     }
     const buttonTheme = theme === 'scale' ? 'accent' : theme;

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

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

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ICON_QA } from '../utils';
+import Button from '../Button';
+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 () => {
+        render(React.createElement(Button, { text: buttonProps.text }));
+        const button = screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+        expect(button).toBeVisible();
+        expect(button).not.toBeDisabled();
+    });
+    test('should render <a /> tag', async () => {
+        render(React.createElement(Button, { text: buttonProps.text, url: buttonProps.url, target: buttonProps.target }));
+        const button = screen.getByRole('link');
+        expect(button).toBeVisible();
+        expect(button).toHaveAttribute('href', buttonProps.url);
+        expect(button).toHaveAttribute('target', buttonProps.target);
+    });
+    test('call onClick', async () => {
+        const user = userEvent.setup();
+        const handleOnClick = jest.fn();
+        render(React.createElement(Button, { text: buttonProps.text, onClick: handleOnClick }));
+        const button = 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) => {
+        render(React.createElement(Button, { text: buttonProps.text, size: size, qa: qaId }));
+        const button = screen.getByTestId(qaId);
+        expect(button).toHaveClass(`pc-button-block_size_${size}`);
+    });
+    test.each(new Array(...buttonViews))('render with given "%s" view', (theme) => {
+        render(React.createElement(Button, { text: buttonProps.text, theme: theme, qa: qaId }));
+        const button = screen.getByTestId(qaId);
+        expect(button).toHaveClass(`pc-button-block_theme_${theme}`);
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        render(React.createElement(Button, { text: buttonProps.text, className: className, qa: qaId }));
+        const button = screen.getByTestId(qaId);
+        expect(button).toHaveClass(className);
+    });
+    test('should render icon', () => {
+        render(React.createElement(Button, { text: buttonProps.text, img: buttonProps.img }));
+        const button = screen.getByRole('button');
+        const iconComponent = screen.getByRole('img');
+        expect(iconComponent).toBeVisible();
+        expect(button).toContainElement(iconComponent);
+    });
+    test('should render github icon', () => {
+        render(React.createElement(Button, { text: buttonProps.text, img: buttonProps.img, theme: "github" }));
+        const button = screen.getByRole('button');
+        const iconComponent = screen.getByTestId(ICON_QA);
+        expect(iconComponent).toBeVisible();
+        expect(button).toContainElement(iconComponent);
+    });
+});

package/build/esm/components/Button/utils.d.ts

@@ -1,4 +1,5 @@
 import { ButtonSize, ButtonView } from '@gravity-ui/uikit';
+export declare const ICON_QA = "button-icon";
 export type OldButtonTheme = 'normal' | 'action' | 'flat' | 'light' | 'clear' | 'raised' | 'pseudo' | 'link' | 'accent' | 'websearch' | 'flat-special' | 'normal-special' | 'normal-dark' | 'pseudo-special';
 export type OldButtonSize = 'xs' | 'ns' | 's' | 'm' | 'l' | 'n' | 'head' | 'promo';
 export declare const toCommonView: (theme: OldButtonTheme) => ButtonView;

package/build/esm/components/Button/utils.js

@@ -1,3 +1,4 @@
+export const ICON_QA = 'button-icon';
 const themeMap = {
     normal: 'normal',
     action: 'action',

package/build/esm/models/constructor-items/common.d.ts

@@ -130,20 +130,22 @@ export interface FileLinkProps extends ClassNameProps {
     theme?: ContentTheme;
     onClick?: () => void;
 }
+export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
 export interface ButtonProps extends AnalyticsEventsBase {
     text: string;
     url: string;
     primary?: boolean;
     size?: ButtonSize;
-    theme?: ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
+    theme?: ButtonTheme;
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
     target?: string;
 }
+export type ButtonImagePosition = 'left' | 'right';
 export interface ButtonImageProps {
     url: string;
-    position?: 'left' | 'right';
+    position?: ButtonImagePosition;
     alt?: string;
 }
 export interface PlayButtonProps extends ClassNameProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/constructor-items/common.d.ts

@@ -130,20 +130,22 @@ export interface FileLinkProps extends ClassNameProps {
     theme?: ContentTheme;
     onClick?: () => void;
 }
+export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
 export interface ButtonProps extends AnalyticsEventsBase {
     text: string;
     url: string;
     primary?: boolean;
     size?: ButtonSize;
-    theme?: ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
+    theme?: ButtonTheme;
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
     target?: string;
 }
+export type ButtonImagePosition = 'left' | 'right';
 export interface ButtonImageProps {
     url: string;
-    position?: 'left' | 'right';
+    position?: ButtonImagePosition;
     alt?: string;
 }
 export interface PlayButtonProps extends ClassNameProps {

package/styles/mixins.scss

@@ -518,18 +518,14 @@ unpredictable css rules order in build */
 
 @mixin tab-panel() {
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     justify-content: flex-start;
-    overflow: auto;
 
     &_centered {
-        display: flex;
         justify-content: center;
-        flex-wrap: wrap;
     }
 
     @media (max-width: map-get($gridBreakpoints, 'md')) {
-        display: flex;
         flex-wrap: nowrap;
         justify-content: flex-start;
         overflow: auto;