@gravity-ui/page-constructor 1.20.5 → 1.22.0-alpha.0

package/build/esm/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.js

@@ -5,13 +5,12 @@ import { InnerContext } from '../../../../context/innerContext';
 import { ConstructorLoadable } from '../ConstructorLoadable';
 import { ConstructorItem } from '../ConstructorItem';
 import { ConstructorBlock } from '../ConstructorBlock/ConstructorBlock';
-export const ConstructorBlocks = ({ items, shouldRenderBlock }) => {
-    const { blockTypes, loadables, itemMap } = useContext(InnerContext);
+export const ConstructorBlocks = ({ items }) => {
+    const { blockTypes, loadables, itemMap, shouldRenderBlock } = useContext(InnerContext);
     const renderer = (parentId = '', item, index) => {
         if (!itemMap[item.type]) {
             return null;
         }
-        let children;
         let itemElement;
         const key = getBlockKey(item, index);
         const blockId = parentId ? `${parentId}_${key}` : key;
@@ -27,12 +26,13 @@ export const ConstructorBlocks = ({ items, shouldRenderBlock }) => {
             itemElement = (React.createElement(ConstructorLoadable, { block: item, key: blockId, blockKey: blockId, config: config, serviceId: serviceId, params: params }));
         }
         else {
+            let children;
             if ('children' in item && item.children) {
                 children = item.children.map(renderer.bind(null, blockId));
             }
             itemElement = (React.createElement(ConstructorItem, { data: item, key: blockId, blockKey: blockId }, children));
         }
-        return blockTypes.includes(item.type) ? (React.createElement(ConstructorBlock, { data: item, key: blockId, Component: itemElement })) : (itemElement);
+        return blockTypes.includes(item.type) ? (React.createElement(ConstructorBlock, { data: item, key: blockId }, itemElement)) : (itemElement);
     };
     return React.createElement(Fragment, null, items.map(renderer.bind(null, '')));
 };

package/build/esm/context/innerContext/InnerContext.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import { ItemMap } from '../../containers/PageConstructor/PageConstructor';
-import { LoadableConfig } from '../../models';
+import { LoadableConfig, ShouldRenderBlock } from '../../models';
 export interface InnerContextType {
     blockTypes: string[];
+    subBlockTypes: string[];
+    headerBlockTypes: string[];
     itemMap: ItemMap;
     loadables?: LoadableConfig;
+    shouldRenderBlock?: ShouldRenderBlock;
 }
 export declare const InnerContext: React.Context<InnerContextType>;

package/build/esm/context/innerContext/InnerContext.js

@@ -1,5 +1,7 @@
 import React from 'react';
 export const InnerContext = React.createContext({
     blockTypes: [],
+    subBlockTypes: [],
+    headerBlockTypes: [],
     itemMap: {},
 });

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+import { ButtonSize } from '@gravity-ui/uikit';
 import { BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, Justify, LinkProps, LinkTheme, MediaDirection, MediaProps, MapProps, PreviewItemProps, PreviewRatioMediaContent, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleProps, LegendTableMarkerType, AnchorProps, TitleBaseProps, Animatable, BlockHeaderProps, ImageDeviceProps } from './common';
 import { ThemeSupporting } from '../../utils';
 import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
-import { BannerCardProps, SubBlock } from './sub-blocks';
+import { BannerCardProps, SubBlock, SubBlockModels } from './sub-blocks';
 export declare enum BlockType {
     PromoFeaturesBlock = "promo-features-block",
     ExtendedFeaturesBlock = "extended-features-block",
@@ -26,7 +27,8 @@ export declare enum BlockType {
     CardLayoutBlock = "card-layout-block",
     ContentLayoutBlock = "content-layout-block",
     ShareBlock = "share-block",
-    MapBlock = "map-block"
+    MapBlock = "map-block",
+    FilterBlock = "filter-block"
 }
 export declare const BlockTypes: BlockType[];
 export declare const HeaderBlockTypes: BlockType[];
@@ -251,6 +253,24 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi
     description?: string;
     colSizes?: GridColumnSizesType;
 }
+export type FilterTag = {
+    id: string;
+    label: string;
+};
+export type FilterItem = {
+    tags: string[];
+    card: SubBlockModels;
+};
+export interface FilterBlockProps extends Animatable, LoadableChildren {
+    title?: TitleProps | string;
+    description?: string;
+    tags: FilterTag[];
+    items: FilterItem[];
+    tagButtonSize?: ButtonSize;
+    allTag?: boolean | string;
+    colSizes?: GridColumnSizesType;
+    centered?: boolean;
+}
 export interface IconsBlockProps {
     title?: string;
     size?: 's' | 'm' | 'l';
@@ -350,6 +370,9 @@ export type LinkTableBlockModel = {
 export type CardLayoutBlockModel = {
     type: BlockType.CardLayoutBlock;
 } & CardLayoutBlockProps;
+export type FilterBlockModel = {
+    type: BlockType.FilterBlock;
+} & FilterBlockProps;
 export type IconsBlockModel = {
     type: BlockType.IconsBlock;
 } & IconsBlockProps;
@@ -362,6 +385,6 @@ export type ContentLayoutBlockModel = {
 export type ShareBLockModel = {
     type: BlockType.ShareBlock;
 } & ShareBlockProps;
-type BlockModels = SliderBlockModel | ServiceDemoBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | CalculatorBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | SecurityBlockModel | TableBlockModel | TabsBlockModel | SimpleBlockModel | LinkTableBlockModel | HeaderBlockModel | PreviewBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel;
+type BlockModels = SliderBlockModel | ServiceDemoBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | CalculatorBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | SecurityBlockModel | TableBlockModel | TabsBlockModel | SimpleBlockModel | LinkTableBlockModel | HeaderBlockModel | PreviewBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel;
 export type Block = BlockModels & BlockBaseProps;
 export {};

package/build/esm/models/constructor-items/blocks.js

@@ -23,6 +23,7 @@ export var BlockType;
     BlockType["ContentLayoutBlock"] = "content-layout-block";
     BlockType["ShareBlock"] = "share-block";
     BlockType["MapBlock"] = "map-block";
+    BlockType["FilterBlock"] = "filter-block";
 })(BlockType || (BlockType = {}));
 export const BlockTypes = Object.values(BlockType);
 export const HeaderBlockTypes = [BlockType.HeaderBlock, BlockType.HeaderSliderBlock];

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';

package/build/esm/models/navigation.d.ts

@@ -4,13 +4,33 @@ export declare enum NavigationItemType {
     Link = "link",
     Dropdown = "dropdown",
     Button = "button",
-    Social = "social"
+    Social = "social",
+    GithubButton = "github-button"
 }
 export interface NavigationItemBase {
     text: string;
     icon?: ImageProps;
     url?: string;
 }
+export declare enum NavigationGithubButtonIcon {
+    heart = "octicon-heart",
+    eye = "octicon-eye",
+    star = "octicon-star",
+    fork = "octicon-repo-forked",
+    issue = "octicon-issue-opened",
+    comment = "octicon-comment-discussion",
+    download = "octicon-download",
+    package = "octicon-package",
+    template = "octicon-repo-template",
+    play = "octicon-play"
+}
+export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
+    type: NavigationItemType.GithubButton;
+    url: string;
+    label?: string;
+    icon?: keyof typeof NavigationGithubButtonIcon;
+    size?: string;
+}
 export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
     type: NavigationItemType.Link;
     url: string;

package/build/esm/models/navigation.js

@@ -4,4 +4,18 @@ export var NavigationItemType;
     NavigationItemType["Dropdown"] = "dropdown";
     NavigationItemType["Button"] = "button";
     NavigationItemType["Social"] = "social";
+    NavigationItemType["GithubButton"] = "github-button";
 })(NavigationItemType || (NavigationItemType = {}));
+export var NavigationGithubButtonIcon;
+(function (NavigationGithubButtonIcon) {
+    NavigationGithubButtonIcon["heart"] = "octicon-heart";
+    NavigationGithubButtonIcon["eye"] = "octicon-eye";
+    NavigationGithubButtonIcon["star"] = "octicon-star";
+    NavigationGithubButtonIcon["fork"] = "octicon-repo-forked";
+    NavigationGithubButtonIcon["issue"] = "octicon-issue-opened";
+    NavigationGithubButtonIcon["comment"] = "octicon-comment-discussion";
+    NavigationGithubButtonIcon["download"] = "octicon-download";
+    NavigationGithubButtonIcon["package"] = "octicon-package";
+    NavigationGithubButtonIcon["template"] = "octicon-repo-template";
+    NavigationGithubButtonIcon["play"] = "octicon-play";
+})(NavigationGithubButtonIcon || (NavigationGithubButtonIcon = {}));

package/build/esm/navigation/components/NavigationItem/NavigationItem.js

@@ -6,6 +6,7 @@ import { BlockIdContext } from '../../../context/blockIdContext';
 import { NavigationButton } from './components/NavigationButton/NavigationButton';
 import { NavigationDropdown } from './components/NavigationDropdown/NavigationDropdown';
 import { NavigationLink } from './components/NavigationLink/NavigationLink';
+import { GithubButton } from './components/GithubButton/GithubButton';
 const ANALYTICS_ID = 'navigation';
 //todo: add types support form component in map
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -14,6 +15,7 @@ const NavigationItemsMap = {
     [NavigationItemType.Social]: SocialIcon,
     [NavigationItemType.Dropdown]: NavigationDropdown,
     [NavigationItemType.Link]: NavigationLink,
+    [NavigationItemType.GithubButton]: GithubButton,
 };
 const NavigationItem = (_a) => {
     var { data, className } = _a, props = __rest(_a, ["data", "className"]);

package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.css

@@ -0,0 +1,14 @@
+.pc-github-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.pc-github-button span {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.d.ts

@@ -0,0 +1,6 @@
+import { NavigationItemProps } from '../../NavigationItem';
+import { NavigationGithubButton } from '../../../../../models';
+import './GithubButton.css';
+type NavigationGithubButtonProps = NavigationItemProps & NavigationGithubButton;
+export declare const GithubButton: ({ text, url, className, label, size, icon, }: NavigationGithubButtonProps) => JSX.Element;
+export {};

package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.js

@@ -0,0 +1,43 @@
+import React, { useRef, useEffect } from 'react';
+import { block } from '../../../../../utils';
+import { NavigationGithubButtonIcon } from '../../../../../models';
+import './GithubButton.css';
+const b = block('github-button');
+const DEFAULT_LABEL = 'Stars on GitHub';
+/* More information about github-buttons in https://buttons.github.io/ */
+export const GithubButton = ({ text, url, className, label, size, icon, }) => {
+    const containerRef = useRef(null);
+    const linkRef = useRef(null);
+    useEffect(() => {
+        const paint = () => {
+            if (containerRef.current) {
+                const githubButton = containerRef.current.appendChild(document.createElement('span'));
+                import(/* webpackMode: "eager" */ 'github-buttons').then(({ render }) => {
+                    if (linkRef.current !== null) {
+                        render(githubButton.appendChild(linkRef.current), (el) => {
+                            try {
+                                if (githubButton.parentNode) {
+                                    githubButton.parentNode.replaceChild(el, githubButton);
+                                }
+                            }
+                            catch (_) { }
+                        });
+                    }
+                });
+            }
+        };
+        const reset = () => {
+            var _a;
+            if (((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.lastChild) && linkRef.current) {
+                containerRef.current.replaceChild(linkRef.current, containerRef.current.lastChild);
+            }
+        };
+        paint();
+        return () => {
+            reset();
+        };
+    }, []);
+    return (React.createElement("div", { className: b(null, className) },
+        React.createElement("span", { ref: containerRef },
+            React.createElement("a", Object.assign({ href: url, ref: linkRef, "data-show-count": "true", "aria-label": label || DEFAULT_LABEL }, (icon && { 'data-icon': NavigationGithubButtonIcon[icon] }), (size && { 'data-size': size })), text))));
+};

package/build/esm/utils/blocks.d.ts

@@ -1,10 +1,11 @@
 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) => {
     [x: string]: any;
 };
+export declare const getCustomSubBlockTypes: (customBlocks?: CustomConfig) => string[];
 export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => string[];
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;

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';
@@ -18,6 +20,10 @@ export const getCustomBlockTypes = ({ blocks = {}, headers = {} } = {}) => [
     ...Object.keys(headers),
 ];
 export const getCustomItems = ({ blocks = {}, headers = {}, subBlocks = {} } = {}) => (Object.assign(Object.assign(Object.assign({}, blocks), headers), subBlocks));
+export const getCustomSubBlockTypes = (customBlocks = {}) => {
+    const { subBlocks = {} } = customBlocks;
+    return Object.keys(subBlocks);
+};
 export const getCustomHeaderTypes = (customBlocks = {}) => {
     const { headers = {} } = customBlocks;
     return Object.keys(headers);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.20.5",
+  "version": "1.22.0-alpha.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -48,6 +48,7 @@
   "dependencies": {
     "@gravity-ui/i18n": "^1.0.0",
     "bem-cn-lite": "^4.0.0",
+    "github-buttons": "2.23.0",
     "lodash": "^4.17.21",
     "react-player": "^2.9.0",
     "react-slick": "^0.28.1",
@@ -135,5 +136,8 @@
     "*.{json,yaml,yml,md}": [
       "prettier --write"
     ]
+  },
+  "publishConfig": {
+    "tag": "alpha"
   }
 }

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+import { ButtonSize } from '@gravity-ui/uikit';
 import { BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, Justify, LinkProps, LinkTheme, MediaDirection, MediaProps, MapProps, PreviewItemProps, PreviewRatioMediaContent, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleProps, LegendTableMarkerType, AnchorProps, TitleBaseProps, Animatable, BlockHeaderProps, ImageDeviceProps } from './common';
 import { ThemeSupporting } from '../../utils';
 import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
-import { BannerCardProps, SubBlock } from './sub-blocks';
+import { BannerCardProps, SubBlock, SubBlockModels } from './sub-blocks';
 export declare enum BlockType {
     PromoFeaturesBlock = "promo-features-block",
     ExtendedFeaturesBlock = "extended-features-block",
@@ -26,7 +27,8 @@ export declare enum BlockType {
     CardLayoutBlock = "card-layout-block",
     ContentLayoutBlock = "content-layout-block",
     ShareBlock = "share-block",
-    MapBlock = "map-block"
+    MapBlock = "map-block",
+    FilterBlock = "filter-block"
 }
 export declare const BlockTypes: BlockType[];
 export declare const HeaderBlockTypes: BlockType[];
@@ -251,6 +253,24 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi
     description?: string;
     colSizes?: GridColumnSizesType;
 }
+export type FilterTag = {
+    id: string;
+    label: string;
+};
+export type FilterItem = {
+    tags: string[];
+    card: SubBlockModels;
+};
+export interface FilterBlockProps extends Animatable, LoadableChildren {
+    title?: TitleProps | string;
+    description?: string;
+    tags: FilterTag[];
+    items: FilterItem[];
+    tagButtonSize?: ButtonSize;
+    allTag?: boolean | string;
+    colSizes?: GridColumnSizesType;
+    centered?: boolean;
+}
 export interface IconsBlockProps {
     title?: string;
     size?: 's' | 'm' | 'l';
@@ -350,6 +370,9 @@ export type LinkTableBlockModel = {
 export type CardLayoutBlockModel = {
     type: BlockType.CardLayoutBlock;
 } & CardLayoutBlockProps;
+export type FilterBlockModel = {
+    type: BlockType.FilterBlock;
+} & FilterBlockProps;
 export type IconsBlockModel = {
     type: BlockType.IconsBlock;
 } & IconsBlockProps;
@@ -362,6 +385,6 @@ export type ContentLayoutBlockModel = {
 export type ShareBLockModel = {
     type: BlockType.ShareBlock;
 } & ShareBlockProps;
-type BlockModels = SliderBlockModel | ServiceDemoBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | CalculatorBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | SecurityBlockModel | TableBlockModel | TabsBlockModel | SimpleBlockModel | LinkTableBlockModel | HeaderBlockModel | PreviewBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel;
+type BlockModels = SliderBlockModel | ServiceDemoBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | CalculatorBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | SecurityBlockModel | TableBlockModel | TabsBlockModel | SimpleBlockModel | LinkTableBlockModel | HeaderBlockModel | PreviewBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel;
 export type Block = BlockModels & BlockBaseProps;
 export {};

package/server/models/constructor-items/blocks.js

@@ -26,6 +26,7 @@ var BlockType;
     BlockType["ContentLayoutBlock"] = "content-layout-block";
     BlockType["ShareBlock"] = "share-block";
     BlockType["MapBlock"] = "map-block";
+    BlockType["FilterBlock"] = "filter-block";
 })(BlockType = exports.BlockType || (exports.BlockType = {}));
 exports.BlockTypes = Object.values(BlockType);
 exports.HeaderBlockTypes = [BlockType.HeaderBlock, BlockType.HeaderSliderBlock];

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';

package/server/models/navigation.d.ts

@@ -4,13 +4,33 @@ export declare enum NavigationItemType {
     Link = "link",
     Dropdown = "dropdown",
     Button = "button",
-    Social = "social"
+    Social = "social",
+    GithubButton = "github-button"
 }
 export interface NavigationItemBase {
     text: string;
     icon?: ImageProps;
     url?: string;
 }
+export declare enum NavigationGithubButtonIcon {
+    heart = "octicon-heart",
+    eye = "octicon-eye",
+    star = "octicon-star",
+    fork = "octicon-repo-forked",
+    issue = "octicon-issue-opened",
+    comment = "octicon-comment-discussion",
+    download = "octicon-download",
+    package = "octicon-package",
+    template = "octicon-repo-template",
+    play = "octicon-play"
+}
+export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
+    type: NavigationItemType.GithubButton;
+    url: string;
+    label?: string;
+    icon?: keyof typeof NavigationGithubButtonIcon;
+    size?: string;
+}
 export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
     type: NavigationItemType.Link;
     url: string;

package/server/models/navigation.js

@@ -1,10 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationItemType = void 0;
+exports.NavigationGithubButtonIcon = exports.NavigationItemType = void 0;
 var NavigationItemType;
 (function (NavigationItemType) {
     NavigationItemType["Link"] = "link";
     NavigationItemType["Dropdown"] = "dropdown";
     NavigationItemType["Button"] = "button";
     NavigationItemType["Social"] = "social";
+    NavigationItemType["GithubButton"] = "github-button";
 })(NavigationItemType = exports.NavigationItemType || (exports.NavigationItemType = {}));
+var NavigationGithubButtonIcon;
+(function (NavigationGithubButtonIcon) {
+    NavigationGithubButtonIcon["heart"] = "octicon-heart";
+    NavigationGithubButtonIcon["eye"] = "octicon-eye";
+    NavigationGithubButtonIcon["star"] = "octicon-star";
+    NavigationGithubButtonIcon["fork"] = "octicon-repo-forked";
+    NavigationGithubButtonIcon["issue"] = "octicon-issue-opened";
+    NavigationGithubButtonIcon["comment"] = "octicon-comment-discussion";
+    NavigationGithubButtonIcon["download"] = "octicon-download";
+    NavigationGithubButtonIcon["package"] = "octicon-package";
+    NavigationGithubButtonIcon["template"] = "octicon-repo-template";
+    NavigationGithubButtonIcon["play"] = "octicon-play";
+})(NavigationGithubButtonIcon = exports.NavigationGithubButtonIcon || (exports.NavigationGithubButtonIcon = {}));

package/server/utils/blocks.d.ts

@@ -1,10 +1,11 @@
 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) => {
     [x: string]: any;
 };
+export declare const getCustomSubBlockTypes: (customBlocks?: CustomConfig) => string[];
 export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => string[];
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;

package/server/utils/blocks.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getShareLink = exports.getCustomHeaderTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
+exports.getShareLink = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
 const models_1 = require("../models");
 function getHeaderTag(size) {
     switch (size) {
@@ -8,6 +8,8 @@ function getHeaderTag(size) {
             return 'h1';
         case 's':
             return 'h4';
+        case 'xs':
+            return 'h5';
         case 'm':
         default:
             return 'h2';
@@ -25,6 +27,11 @@ const getCustomBlockTypes = ({ blocks = {}, headers = {} } = {}) => [
 exports.getCustomBlockTypes = getCustomBlockTypes;
 const getCustomItems = ({ blocks = {}, headers = {}, subBlocks = {} } = {}) => (Object.assign(Object.assign(Object.assign({}, blocks), headers), subBlocks));
 exports.getCustomItems = getCustomItems;
+const getCustomSubBlockTypes = (customBlocks = {}) => {
+    const { subBlocks = {} } = customBlocks;
+    return Object.keys(subBlocks);
+};
+exports.getCustomSubBlockTypes = getCustomSubBlockTypes;
 const getCustomHeaderTypes = (customBlocks = {}) => {
     const { headers = {} } = customBlocks;
     return Object.keys(headers);

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);
@@ -481,12 +483,69 @@ unpredictable css rules order in build */
     }
 }
 
-@mixin monochromeButton() {
-    --yc-button-background-color: var(--pc-monochrome-button-background-color);
-    --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
-    color: var(--pc-monochrome-button-color);
+@mixin button($color, $backgroundColor, $hoverColor: $color, $hoverBackgroundColor) {
+    --yc-button-background-color: #{$backgroundColor};
+    --yc-button-background-color-hover: #{$hoverBackgroundColor};
+
+    &,
+    &:link,
+    &:visited,
+    &:active,
+    &:focus {
+        color: $color;
+    }
 
     &:hover {
-        color: var(--pc-monochrome-button-color);
+        color: $hoverColor;
+    }
+}
+
+@mixin monochrome-button() {
+    @include button(
+        var(--pc-monochrome-button-color),
+        var(--pc-monochrome-button-background-color),
+        $hoverBackgroundColor: var(--pc-monochrome-button-background-color-hover)
+    );
+}
+
+@mixin centerable-title() {
+    &_centered {
+        text-align: center;
+
+        & > * {
+            margin: 0 auto;
+        }
+    }
+}
+
+@mixin tab-panel() {
+    display: flex;
+    flex-wrap: nowrap;
+    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;
+
+        margin-left: -$indentL;
+        margin-right: -$indentL;
+        padding-left: $indentL;
+        padding-right: $indentL - $indentXXXS;
+    }
+
+    @media (max-width: map-get($gridBreakpoints, 'sm')) {
+        margin-left: -$indentSM;
+        margin-right: -$indentSM;
+        padding-left: $indentSM;
+        padding-right: $indentXS;
     }
 }

package/styles/root.scss

@@ -19,6 +19,16 @@
     --pc-text-header-color: var(--yc-color-text-primary);
     --pc-media-card-meta-info-color: var(--yc-color-text-secondary);
 
+    --pc-tab-item-color: var(--yc-color-text-primary);
+    --pc-tab-item-background-color: var(--yc-color-base-generic);
+    --pc-tab-item-background-color-hover: var(--yc-color-base-generic-hover);
+
+    --pc-selected-tab-item-color: var(--pc-monochrome-button-color);
+    --pc-selected-tab-item-background-color: var(--pc-monochrome-button-background-color);
+    --pc-selected-tab-item-background-color-hover: var(
+        --pc-monochrome-button-background-color-hover
+    );
+
     &.yc-root_theme_dark {
         --pc-color-sfx-shadow: var(--yc-color-sfx-shadow);
         --pc-color-line-generic-active-solid: #6c6c70;