@doyourjob/gravity-ui-page-constructor 5.31.54 → 5.31.56

package/build/cjs/blocks/HighlightTable/HighlightTable.css

@@ -5,14 +5,25 @@ unpredictable css rules order in build */
   column-gap: 28px;
   align-items: center;
   justify-content: center;
+  padding: 0 20px;
+  border: 1px solid transparent;
+}
+.pc-highlight-table-block__legend_left {
+  justify-content: flex-start;
+}
+.pc-highlight-table-block__legend_right {
+  justify-content: flex-end;
+}
+.pc-highlight-table-block__legend_position-top {
   margin-top: 16px;
   margin-bottom: 12px;
 }
+.pc-highlight-table-block__legend_position-bottom {
+  margin-top: 12px;
+}
 .pc-highlight-table-block__legend-item {
   display: flex;
   align-items: center;
-  font-size: 15px;
-  line-height: 20px;
 }
 .pc-highlight-table-block__legend-item img {
   display: inline-block;

package/build/cjs/blocks/HighlightTable/HighlightTable.d.ts

@@ -1,3 +1,3 @@
 import { HighlightTableBlockProps } from '../../models';
-export declare const HighlightTableBlock: (props: HighlightTableBlockProps) => JSX.Element;
+export declare const HighlightTableBlock: ({ title, description, table, legend, contentSize, legendPosition, legendAlign, }: HighlightTableBlockProps) => JSX.Element;
 export default HighlightTableBlock;

package/build/cjs/blocks/HighlightTable/HighlightTable.js

@@ -3,12 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HighlightTableBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const components_1 = require("../../components");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('highlight-table-block');
-const HighlightTableBlock = (props) => {
-    const { title, description, table, legend } = props;
+const getTextStyles = (contentSize) => {
+    switch (contentSize) {
+        case 'l':
+            return 'body-2';
+        default:
+            return 'body-1';
+    }
+};
+const HighlightTableBlock = ({ title, description, table, legend, contentSize = 's', legendPosition = 'top', legendAlign = 'center', }) => {
     const firstRow = table.content[0] || [];
     const otherRows = table.content.slice(1);
     const customColumnWidth = table.customColumnWidth || [];
@@ -22,6 +30,7 @@ const HighlightTableBlock = (props) => {
     const tableContentRef = (0, react_1.useRef)(null);
     const scrollBarRef = (0, react_1.useRef)(null);
     const scrollThumbRef = (0, react_1.useRef)(null);
+    const textStyles = (0, uikit_1.text)({ variant: getTextStyles(contentSize) });
     (0, react_1.useEffect)(() => {
         const blockElem = blockRef.current;
         const tableContentElem = tableContentRef.current;
@@ -68,15 +77,22 @@ const HighlightTableBlock = (props) => {
                 react_1.default.createElement(components_1.HTML, null, cell)));
         })));
     }, [table.customColumnWidth, table.highlighter, table.justify]);
+    const renderLegend = (0, react_1.useMemo)(() => (legend === null || legend === void 0 ? void 0 : legend.length) && (react_1.default.createElement("div", { className: `${b('legend', {
+            left: legendAlign === 'left',
+            right: legendAlign === 'right',
+            'position-top': legendPosition === 'top',
+            'position-bottom': legendPosition === 'bottom',
+        })} ${textStyles}` }, legend.map((item, index) => (react_1.default.createElement(components_1.HTML, { className: b('legend-item'), block: true, key: String(index) }, item))))), [legend, legendAlign, legendPosition, textStyles]);
     return (react_1.default.createElement("div", { ref: blockRef, className: b() },
         (title || description) && react_1.default.createElement(components_1.Title, { title: title, subtitle: description }),
-        (legend === null || legend === void 0 ? void 0 : legend.length) && (react_1.default.createElement("div", { className: b('legend') }, legend.map((item, index) => (react_1.default.createElement(components_1.HTML, { className: b('legend-item'), block: true, key: String(index) }, item))))),
-        react_1.default.createElement("div", { ref: tableRef, className: b('table') },
+        legendPosition === 'top' && renderLegend,
+        react_1.default.createElement("div", { ref: tableRef, className: `${b('table')} ${textStyles}` },
             react_1.default.createElement("div", { ref: tableContentRef, className: b('content') },
                 react_1.default.createElement("div", { className: b('head') }, renderRow(firstRow, 0)),
                 react_1.default.createElement("div", { className: b('body') }, otherRows.map(renderRow)))),
         react_1.default.createElement("div", { ref: scrollBarRef, className: b('scrollbar') },
-            react_1.default.createElement("div", { ref: scrollThumbRef }))));
+            react_1.default.createElement("div", { ref: scrollThumbRef })),
+        legendPosition === 'bottom' && renderLegend));
 };
 exports.HighlightTableBlock = HighlightTableBlock;
 exports.default = exports.HighlightTableBlock;

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

@@ -15,6 +15,18 @@ export declare const HighlightTableBlock: {
                     type: string;
                 };
             };
+            legendPosition: {
+                type: string;
+                enum: string[];
+            };
+            legendAlign: {
+                type: string;
+                enum: string[];
+            };
+            contentSize: {
+                type: string;
+                enum: string[];
+            };
             table: {
                 additionalProperties: boolean;
                 required: string[];

package/build/cjs/blocks/HighlightTable/schema.js

@@ -15,6 +15,15 @@ exports.HighlightTableBlock = {
                 items: {
                     type: 'string',
                 },
+            }, legendPosition: {
+                type: 'string',
+                enum: ['top', 'bottom'],
+            }, legendAlign: {
+                type: 'string',
+                enum: ['left', 'center', 'right'],
+            }, contentSize: {
+                type: 'string',
+                enum: common_1.contentSizes,
             }, table: {
                 additionalProperties: false,
                 required: ['content'],

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

@@ -24,7 +24,7 @@ export declare const blockMap: {
     "blog-feed-block": ({ image, title }: import("./models").BlogFeedBlockProps) => JSX.Element;
     "relevant-posts-block": ({ title, description, slider, date, dateStart, dateEnd, tags, services, pinnedPost, }: import("./models").RelevantPostsBlockProps) => JSX.Element;
     "press-releases-block": ({ title }: import("./models").PressReleasesBlockProps) => JSX.Element;
-    "highlight-table-block": (props: import("./models").HighlightTableBlockProps) => JSX.Element;
+    "highlight-table-block": ({ title, description, table, legend, contentSize, legendPosition, legendAlign, }: import("./models").HighlightTableBlockProps) => JSX.Element;
     "link-table-block": ({ title, items }: import("./models").LinkTableBlockProps) => JSX.Element;
     "services-block": ({ title, serviceLinkType }: import("./models").ServicesBlockProps) => JSX.Element;
     "quotes-block": ({ theme: localTheme, items, background, backgroundColor, }: import("./models").QuotesBlockProps) => JSX.Element;

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

@@ -303,6 +303,9 @@ export interface HighlightTableBlockProps {
     description?: string;
     table: HighlightTableData;
     legend?: string[];
+    legendPosition?: 'top' | 'bottom';
+    legendAlign?: 'left' | 'center' | 'right';
+    contentSize?: ContentSize;
 }
 export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'>, WithBorder {
     tabName: string;

package/build/esm/blocks/HighlightTable/HighlightTable.css

@@ -5,14 +5,25 @@ unpredictable css rules order in build */
   column-gap: 28px;
   align-items: center;
   justify-content: center;
+  padding: 0 20px;
+  border: 1px solid transparent;
+}
+.pc-highlight-table-block__legend_left {
+  justify-content: flex-start;
+}
+.pc-highlight-table-block__legend_right {
+  justify-content: flex-end;
+}
+.pc-highlight-table-block__legend_position-top {
   margin-top: 16px;
   margin-bottom: 12px;
 }
+.pc-highlight-table-block__legend_position-bottom {
+  margin-top: 12px;
+}
 .pc-highlight-table-block__legend-item {
   display: flex;
   align-items: center;
-  font-size: 15px;
-  line-height: 20px;
 }
 .pc-highlight-table-block__legend-item img {
   display: inline-block;

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

@@ -1,4 +1,4 @@
 import { HighlightTableBlockProps } from '../../models';
 import './HighlightTable.css';
-export declare const HighlightTableBlock: (props: HighlightTableBlockProps) => JSX.Element;
+export declare const HighlightTableBlock: ({ title, description, table, legend, contentSize, legendPosition, legendAlign, }: HighlightTableBlockProps) => JSX.Element;
 export default HighlightTableBlock;

package/build/esm/blocks/HighlightTable/HighlightTable.js

@@ -1,11 +1,19 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { text } from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
 import { HTML, Title } from '../../components';
 import { block } from '../../utils';
 import './HighlightTable.css';
 const b = block('highlight-table-block');
-export const HighlightTableBlock = (props) => {
-    const { title, description, table, legend } = props;
+const getTextStyles = (contentSize) => {
+    switch (contentSize) {
+        case 'l':
+            return 'body-2';
+        default:
+            return 'body-1';
+    }
+};
+export const HighlightTableBlock = ({ title, description, table, legend, contentSize = 's', legendPosition = 'top', legendAlign = 'center', }) => {
     const firstRow = table.content[0] || [];
     const otherRows = table.content.slice(1);
     const customColumnWidth = table.customColumnWidth || [];
@@ -19,6 +27,7 @@ export const HighlightTableBlock = (props) => {
     const tableContentRef = useRef(null);
     const scrollBarRef = useRef(null);
     const scrollThumbRef = useRef(null);
+    const textStyles = text({ variant: getTextStyles(contentSize) });
     useEffect(() => {
         const blockElem = blockRef.current;
         const tableContentElem = tableContentRef.current;
@@ -65,14 +74,21 @@ export const HighlightTableBlock = (props) => {
                 React.createElement(HTML, null, cell)));
         })));
     }, [table.customColumnWidth, table.highlighter, table.justify]);
+    const renderLegend = useMemo(() => (legend === null || legend === void 0 ? void 0 : legend.length) && (React.createElement("div", { className: `${b('legend', {
+            left: legendAlign === 'left',
+            right: legendAlign === 'right',
+            'position-top': legendPosition === 'top',
+            'position-bottom': legendPosition === 'bottom',
+        })} ${textStyles}` }, legend.map((item, index) => (React.createElement(HTML, { className: b('legend-item'), block: true, key: String(index) }, item))))), [legend, legendAlign, legendPosition, textStyles]);
     return (React.createElement("div", { ref: blockRef, className: b() },
         (title || description) && React.createElement(Title, { title: title, subtitle: description }),
-        (legend === null || legend === void 0 ? void 0 : legend.length) && (React.createElement("div", { className: b('legend') }, legend.map((item, index) => (React.createElement(HTML, { className: b('legend-item'), block: true, key: String(index) }, item))))),
-        React.createElement("div", { ref: tableRef, className: b('table') },
+        legendPosition === 'top' && renderLegend,
+        React.createElement("div", { ref: tableRef, className: `${b('table')} ${textStyles}` },
             React.createElement("div", { ref: tableContentRef, className: b('content') },
                 React.createElement("div", { className: b('head') }, renderRow(firstRow, 0)),
                 React.createElement("div", { className: b('body') }, otherRows.map(renderRow)))),
         React.createElement("div", { ref: scrollBarRef, className: b('scrollbar') },
-            React.createElement("div", { ref: scrollThumbRef }))));
+            React.createElement("div", { ref: scrollThumbRef })),
+        legendPosition === 'bottom' && renderLegend));
 };
 export default HighlightTableBlock;

package/build/esm/blocks/HighlightTable/schema.d.ts

@@ -15,6 +15,18 @@ export declare const HighlightTableBlock: {
                     type: string;
                 };
             };
+            legendPosition: {
+                type: string;
+                enum: string[];
+            };
+            legendAlign: {
+                type: string;
+                enum: string[];
+            };
+            contentSize: {
+                type: string;
+                enum: string[];
+            };
             table: {
                 additionalProperties: boolean;
                 required: string[];

package/build/esm/blocks/HighlightTable/schema.js

@@ -1,4 +1,4 @@
-import { BaseProps, BlockBaseProps } from '../../schema/validators/common';
+import { BaseProps, BlockBaseProps, contentSizes } from '../../schema/validators/common';
 export const HighlightTableBlock = {
     'highlight-table-block': {
         additionalProperties: false,
@@ -12,6 +12,15 @@ export const HighlightTableBlock = {
                 items: {
                     type: 'string',
                 },
+            }, legendPosition: {
+                type: 'string',
+                enum: ['top', 'bottom'],
+            }, legendAlign: {
+                type: 'string',
+                enum: ['left', 'center', 'right'],
+            }, contentSize: {
+                type: 'string',
+                enum: contentSizes,
             }, table: {
                 additionalProperties: false,
                 required: ['content'],

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

@@ -24,7 +24,7 @@ export declare const blockMap: {
     "blog-feed-block": ({ image, title }: import("./models").BlogFeedBlockProps) => JSX.Element;
     "relevant-posts-block": ({ title, description, slider, date, dateStart, dateEnd, tags, services, pinnedPost, }: import("./models").RelevantPostsBlockProps) => JSX.Element;
     "press-releases-block": ({ title }: import("./models").PressReleasesBlockProps) => JSX.Element;
-    "highlight-table-block": (props: import("./models").HighlightTableBlockProps) => JSX.Element;
+    "highlight-table-block": ({ title, description, table, legend, contentSize, legendPosition, legendAlign, }: import("./models").HighlightTableBlockProps) => JSX.Element;
     "link-table-block": ({ title, items }: import("./models").LinkTableBlockProps) => JSX.Element;
     "services-block": ({ title, serviceLinkType }: import("./models").ServicesBlockProps) => JSX.Element;
     "quotes-block": ({ theme: localTheme, items, background, backgroundColor, }: import("./models").QuotesBlockProps) => JSX.Element;

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

@@ -303,6 +303,9 @@ export interface HighlightTableBlockProps {
     description?: string;
     table: HighlightTableData;
     legend?: string[];
+    legendPosition?: 'top' | 'bottom';
+    legendAlign?: 'left' | 'center' | 'right';
+    contentSize?: ContentSize;
 }
 export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'>, WithBorder {
     tabName: string;

package/package.json

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