@gravity-ui/page-constructor 2.0.2 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.1.0](https://github.com/gravity-ui/page-constructor/compare/v2.0.3...v2.1.0) (2023-03-27)
+
+
+### Features
+
+* **Title:** add size xs ([#207](https://github.com/gravity-ui/page-constructor/issues/207)) ([1fd8cf7](https://github.com/gravity-ui/page-constructor/commit/1fd8cf7aeaf4a6a993a3ffcce576a41d61c3b66b))
+
+## [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/BlockHeader/BlockHeader.css

@@ -7,10 +7,10 @@ unpredictable css rules order in build */
   font-size: var(--yc-text-body-3-font-size);
   line-height: var(--yc-text-body-3-line-height);
 }
-.pc-block-header__description_titleSize_s {
+.pc-block-header__description_titleSize_s, .pc-block-header__description_titleSize_xs {
   margin-top: 8px;
 }
-.pc-block-header__description_titleSize_s .yfm {
+.pc-block-header__description_titleSize_s .yfm, .pc-block-header__description_titleSize_xs .yfm {
   font-size: var(--yc-text-body-2-font-size);
   line-height: var(--yc-text-body-2-line-height);
 }

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/components/Title/Title.css

@@ -1,4 +1,4 @@
-.pc-title-block_size_l, .pc-title-block_size_m, .pc-title-block_size_s {
+.pc-title-block_size_l, .pc-title-block_size_m, .pc-title-block_size_s, .pc-title-block_size_xs {
   margin: 0;
 }
 
@@ -10,6 +10,12 @@ unpredictable css rules order in build */
 .pc-title-block_justify_end {
   text-align: right;
 }
+.pc-title-block_size_xs {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+}
 .pc-title-block_size_s {
   font-size: var(--yc-text-header-1-font-size);
   line-height: var(--yc-text-header-1-line-height);
@@ -44,10 +50,13 @@ unpredictable css rules order in build */
   }
 }
 .pc-title-block__arrow {
-  margin: 8px 0 0 4px;
+  margin-top: 10px;
+}
+.pc-title-block__arrow_size_xs {
+  margin-top: 7px;
 }
 .pc-title-block__arrow_size_s {
-  margin: 4px 0 0 4px;
+  margin-top: 5px;
 }
 .pc-title-block__link {
   color: inherit;
@@ -62,7 +71,10 @@ unpredictable css rules order in build */
   cursor: pointer;
 }
 .pc-title-block__link:hover .pc-title-block__arrow {
-  margin-left: 12px;
+  margin-left: 10px;
+}
+.pc-title-block__link:hover .pc-title-block__arrow_size_xs {
+  margin-left: 6px;
 }
 .pc-title-block__link:hover .pc-title-block__arrow_size_s {
   margin-left: 8px;
@@ -90,7 +102,10 @@ unpredictable css rules order in build */
   margin-top: 0;
 }
 @media (max-width: 577px) {
-  .pc-title-block_size_l {
+  .pc-title-block_size_l:not(.pc-title-block_reset-margin) {
     margin-top: 48px;
   }
+  .pc-title-block__arrow_size_m, .pc-title-block__arrow_size_l {
+    margin-top: 9px;
+  }
 }

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

@@ -1,5 +1,5 @@
 import { TextSize, TitleProps } from '../../models';
-export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 20 | 24;
+export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 13 | 20 | 24 | 22 | 26 | 38;
 export interface TitleFullProps extends TitleProps {
     className?: string;
     onClick?: () => void;

package/build/cjs/components/Title/Title.js

@@ -11,12 +11,14 @@ const mobileContext_1 = require("../../context/mobileContext");
 const b = (0, utils_1.block)('title-block');
 function getArrowSize(size, isMobile) {
     switch (size) {
+        case 'xs':
+            return 13;
         case 's':
             return 16;
         case 'm':
-            return isMobile ? 20 : 24;
+            return isMobile ? 22 : 24;
         case 'l':
-            return isMobile ? 20 : 24;
+            return isMobile ? 26 : 38;
         default:
             return 20;
     }

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

@@ -38,7 +38,7 @@ export declare enum MediaVideoControlsType {
     Custom = "custom"
 }
 export type TextTheme = 'light' | 'dark';
-export type TextSize = 's' | 'm' | 'l';
+export type TextSize = 'xs' | 's' | 'm' | 'l';
 export type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 export type HeaderWidth = 's' | 'm' | 'l';
 export type HeaderImageSize = 's' | 'm';
@@ -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/cjs/utils/blocks.d.ts

@@ -1,6 +1,6 @@
 import { ConstructorBlock } from '../models/constructor';
 import { TextSize, CustomConfig, PCShareSocialNetwork } from '../models';
-export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4";
+export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
 export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
 export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {

package/build/cjs/utils/blocks.js

@@ -8,6 +8,8 @@ function getHeaderTag(size) {
             return 'h1';
         case 's':
             return 'h4';
+        case 'xs':
+            return 'h5';
         case 'm':
         default:
             return 'h2';

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/BlockHeader/BlockHeader.css

@@ -7,10 +7,10 @@ unpredictable css rules order in build */
   font-size: var(--yc-text-body-3-font-size);
   line-height: var(--yc-text-body-3-line-height);
 }
-.pc-block-header__description_titleSize_s {
+.pc-block-header__description_titleSize_s, .pc-block-header__description_titleSize_xs {
   margin-top: 8px;
 }
-.pc-block-header__description_titleSize_s .yfm {
+.pc-block-header__description_titleSize_s .yfm, .pc-block-header__description_titleSize_xs .yfm {
   font-size: var(--yc-text-body-2-font-size);
   line-height: var(--yc-text-body-2-line-height);
 }

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/components/Title/Title.css

@@ -1,4 +1,4 @@
-.pc-title-block_size_l, .pc-title-block_size_m, .pc-title-block_size_s {
+.pc-title-block_size_l, .pc-title-block_size_m, .pc-title-block_size_s, .pc-title-block_size_xs {
   margin: 0;
 }
 
@@ -10,6 +10,12 @@ unpredictable css rules order in build */
 .pc-title-block_justify_end {
   text-align: right;
 }
+.pc-title-block_size_xs {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+}
 .pc-title-block_size_s {
   font-size: var(--yc-text-header-1-font-size);
   line-height: var(--yc-text-header-1-line-height);
@@ -44,10 +50,13 @@ unpredictable css rules order in build */
   }
 }
 .pc-title-block__arrow {
-  margin: 8px 0 0 4px;
+  margin-top: 10px;
+}
+.pc-title-block__arrow_size_xs {
+  margin-top: 7px;
 }
 .pc-title-block__arrow_size_s {
-  margin: 4px 0 0 4px;
+  margin-top: 5px;
 }
 .pc-title-block__link {
   color: inherit;
@@ -62,7 +71,10 @@ unpredictable css rules order in build */
   cursor: pointer;
 }
 .pc-title-block__link:hover .pc-title-block__arrow {
-  margin-left: 12px;
+  margin-left: 10px;
+}
+.pc-title-block__link:hover .pc-title-block__arrow_size_xs {
+  margin-left: 6px;
 }
 .pc-title-block__link:hover .pc-title-block__arrow_size_s {
   margin-left: 8px;
@@ -90,7 +102,10 @@ unpredictable css rules order in build */
   margin-top: 0;
 }
 @media (max-width: 577px) {
-  .pc-title-block_size_l {
+  .pc-title-block_size_l:not(.pc-title-block_reset-margin) {
     margin-top: 48px;
   }
+  .pc-title-block__arrow_size_m, .pc-title-block__arrow_size_l {
+    margin-top: 9px;
+  }
 }

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

@@ -1,6 +1,6 @@
 import { TextSize, TitleProps } from '../../models';
 import './Title.css';
-export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 20 | 24;
+export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 13 | 20 | 24 | 22 | 26 | 38;
 export interface TitleFullProps extends TitleProps {
     className?: string;
     onClick?: () => void;

package/build/esm/components/Title/Title.js

@@ -8,12 +8,14 @@ import './Title.css';
 const b = block('title-block');
 export function getArrowSize(size, isMobile) {
     switch (size) {
+        case 'xs':
+            return 13;
         case 's':
             return 16;
         case 'm':
-            return isMobile ? 20 : 24;
+            return isMobile ? 22 : 24;
         case 'l':
-            return isMobile ? 20 : 24;
+            return isMobile ? 26 : 38;
         default:
             return 20;
     }

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

@@ -38,7 +38,7 @@ export declare enum MediaVideoControlsType {
     Custom = "custom"
 }
 export type TextTheme = 'light' | 'dark';
-export type TextSize = 's' | 'm' | 'l';
+export type TextSize = 'xs' | 's' | 'm' | 'l';
 export type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 export type HeaderWidth = 's' | 'm' | 'l';
 export type HeaderImageSize = 's' | 'm';
@@ -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/utils/blocks.d.ts

@@ -1,6 +1,6 @@
 import { ConstructorBlock } from '../models/constructor';
 import { TextSize, CustomConfig, PCShareSocialNetwork } from '../models';
-export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4";
+export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
 export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
 export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {

package/build/esm/utils/blocks.js

@@ -5,6 +5,8 @@ export function getHeaderTag(size) {
             return 'h1';
         case 's':
             return 'h4';
+        case 'xs':
+            return 'h5';
         case 'm':
         default:
             return 'h2';

package/package.json

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

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

@@ -38,7 +38,7 @@ export declare enum MediaVideoControlsType {
     Custom = "custom"
 }
 export type TextTheme = 'light' | 'dark';
-export type TextSize = 's' | 'm' | 'l';
+export type TextSize = 'xs' | 's' | 'm' | 'l';
 export type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 export type HeaderWidth = 's' | 'm' | 'l';
 export type HeaderImageSize = 's' | 'm';
@@ -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/server/utils/blocks.d.ts

@@ -1,6 +1,6 @@
 import { ConstructorBlock } from '../models/constructor';
 import { TextSize, CustomConfig, PCShareSocialNetwork } from '../models';
-export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4";
+export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
 export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
 export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {

package/server/utils/blocks.js

@@ -8,6 +8,8 @@ function getHeaderTag(size) {
             return 'h1';
         case 's':
             return 'h4';
+        case 'xs':
+            return 'h5';
         case 'm':
         default:
             return 'h2';

package/styles/mixins.scss

@@ -141,15 +141,17 @@
 }
 
 @mixin label($size: m) {
-    @include text-size(body-1);
+    @if $size == m {
+        @include text-size(body-1);
 
-    $label-height: 20px;
+        $label-height: 20px;
 
-    display: inline-block;
-    padding: 0 8px;
-    border-radius: 2px;
-    height: $label-height;
-    line-height: $label-height;
+        display: inline-block;
+        padding: 0 8px;
+        border-radius: 2px;
+        height: $label-height;
+        line-height: $label-height;
+    }
 
     @if $size == s {
         @include text-size(caption-2);
@@ -518,18 +520,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;