@gravity-ui/page-constructor 4.9.0 → 4.10.0

package/README.md

@@ -386,3 +386,7 @@ export const MyAppEditor = ({initialContent, onChange, transformContent}: MyAppE
   <Editor content={initialContent} onChange={onChange} transformContent={transformContent} />
 );
 ```
+
+## Tests
+
+Comprehensive documentation is available at the provided [link](./test-utils/docs/README.md).

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CardLayoutBlockProps as CardLayoutBlockParams, WithChildren } from '../../models';
-export type CardLayoutBlockProps = WithChildren<Omit<CardLayoutBlockParams, 'children'>>;
+import { CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps, WithChildren } from '../../models';
+export type CardLayoutBlockProps = WithChildren<Omit<CardLayoutBlockParams, 'children'>> & ClassNameProps;
 declare const CardLayout: React.FC<CardLayoutBlockProps>;
 export default CardLayout;

package/build/cjs/blocks/CardLayout/CardLayout.js

@@ -11,7 +11,7 @@ const DEFAULT_SIZES = {
     md: 4,
 };
 const b = (0, utils_1.block)('card-layout-block');
-const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, }) => (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
+const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, }) => (react_1.default.createElement(components_1.AnimateBlock, { className: b(null, className), animate: animated },
     (title || description) && react_1.default.createElement(components_1.Title, { title: title, subtitle: description }),
     react_1.default.createElement(grid_1.Row, null, react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(grid_1.Col, { key: index, sizes: colSizes, className: b('item') }, child))))));
 exports.default = CardLayout;

package/build/cjs/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.css

@@ -0,0 +1,38 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-constructor-block.pc-constructor-block_indentTop_0 {
+  margin-top: 0;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_xs {
+  margin-top: 16px;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_s {
+  margin-top: 24px;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_m {
+  margin-top: 32px;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_l {
+  margin-top: 48px;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_xl {
+  margin-top: 64px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_0 {
+  padding-bottom: 0;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_xs {
+  padding-bottom: 16px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_s {
+  padding-bottom: 24px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_m {
+  padding-bottom: 32px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_l {
+  padding-bottom: 48px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_xl {
+  padding-bottom: 64px;
+}

package/build/cjs/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.js

@@ -9,9 +9,10 @@ const BlockDecoration_1 = require("../../../../customization/BlockDecoration");
 const utils_1 = require("../../../../utils");
 const b = (0, utils_1.block)('constructor-block');
 const ConstructorBlock = ({ index = 0, data, children, }) => {
-    const { type } = data;
+    const { type, indent } = data;
     const blockBaseProps = (0, react_1.useMemo)(() => lodash_1.default.pick(data, ['anchor', 'visible', 'resetPaddings']), [data]);
+    const { top, bottom } = indent || { top: 'l', bottom: 'l' };
     return (react_1.default.createElement(BlockDecoration_1.BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
-        react_1.default.createElement(BlockBase_1.default, Object.assign({ className: b({ type }) }, blockBaseProps), children)));
+        react_1.default.createElement(BlockBase_1.default, Object.assign({ className: b({ type, indentTop: top, indentBottom: bottom }) }, blockBaseProps), children)));
 };
 exports.ConstructorBlock = ConstructorBlock;

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

@@ -32,6 +32,7 @@ export interface Childable {
 export interface BlockBaseProps {
     anchor?: AnchorProps;
     visible?: GridColumnSize;
+    /** @deprecated */
     resetPaddings?: boolean;
     qa?: string;
 }

package/build/cjs/models/constructor.d.ts

@@ -6,7 +6,12 @@ export interface PageData {
 export interface Menu {
     title: string;
 }
-export type ConstructorBlock = ConstructorItem | CustomBlock;
+export type ConstructorBlock = (ConstructorItem | CustomBlock) & {
+    indent?: {
+        top?: string;
+        bottom?: string;
+    };
+};
 export interface PageContent extends Animatable {
     blocks: ConstructorBlock[];
     menu?: Menu;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { CardLayoutBlockProps as CardLayoutBlockParams, WithChildren } from '../../models';
+import { CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps, WithChildren } from '../../models';
 import './CardLayout.css';
-export type CardLayoutBlockProps = WithChildren<Omit<CardLayoutBlockParams, 'children'>>;
+export type CardLayoutBlockProps = WithChildren<Omit<CardLayoutBlockParams, 'children'>> & ClassNameProps;
 declare const CardLayout: React.FC<CardLayoutBlockProps>;
 export default CardLayout;

package/build/esm/blocks/CardLayout/CardLayout.js

@@ -9,7 +9,7 @@ const DEFAULT_SIZES = {
     md: 4,
 };
 const b = block('card-layout-block');
-const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, }) => (React.createElement(AnimateBlock, { className: b(), animate: animated },
+const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, }) => (React.createElement(AnimateBlock, { className: b(null, className), animate: animated },
     (title || description) && React.createElement(Title, { title: title, subtitle: description }),
     React.createElement(Row, null, React.Children.map(children, (child, index) => (React.createElement(Col, { key: index, sizes: colSizes, className: b('item') }, child))))));
 export default CardLayout;

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.css

@@ -0,0 +1,38 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-constructor-block.pc-constructor-block_indentTop_0 {
+  margin-top: 0;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_xs {
+  margin-top: 16px;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_s {
+  margin-top: 24px;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_m {
+  margin-top: 32px;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_l {
+  margin-top: 48px;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_xl {
+  margin-top: 64px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_0 {
+  padding-bottom: 0;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_xs {
+  padding-bottom: 16px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_s {
+  padding-bottom: 24px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_m {
+  padding-bottom: 32px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_l {
+  padding-bottom: 48px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_xl {
+  padding-bottom: 64px;
+}

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BlockDecorationProps, ConstructorBlock as ConstructorBlockType, WithChildren } from '../../../../models';
+import './ConstructorBlock.css';
 interface ConstructorBlockProps extends Pick<BlockDecorationProps, 'index'> {
     data: ConstructorBlockType;
 }

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

@@ -3,10 +3,12 @@ import _ from 'lodash';
 import BlockBase from '../../../../components/BlockBase/BlockBase';
 import { BlockDecoration } from '../../../../customization/BlockDecoration';
 import { block } from '../../../../utils';
+import './ConstructorBlock.css';
 const b = block('constructor-block');
 export const ConstructorBlock = ({ index = 0, data, children, }) => {
-    const { type } = data;
+    const { type, indent } = data;
     const blockBaseProps = useMemo(() => _.pick(data, ['anchor', 'visible', 'resetPaddings']), [data]);
+    const { top, bottom } = indent || { top: 'l', bottom: 'l' };
     return (React.createElement(BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
-        React.createElement(BlockBase, Object.assign({ className: b({ type }) }, blockBaseProps), children)));
+        React.createElement(BlockBase, Object.assign({ className: b({ type, indentTop: top, indentBottom: bottom }) }, blockBaseProps), children)));
 };

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

@@ -32,6 +32,7 @@ export interface Childable {
 export interface BlockBaseProps {
     anchor?: AnchorProps;
     visible?: GridColumnSize;
+    /** @deprecated */
     resetPaddings?: boolean;
     qa?: string;
 }

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

@@ -6,7 +6,12 @@ export interface PageData {
 export interface Menu {
     title: string;
 }
-export type ConstructorBlock = ConstructorItem | CustomBlock;
+export type ConstructorBlock = (ConstructorItem | CustomBlock) & {
+    indent?: {
+        top?: string;
+        bottom?: string;
+    };
+};
 export interface PageContent extends Animatable {
     blocks: ConstructorBlock[];
     menu?: Menu;

package/package.json

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

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

@@ -32,6 +32,7 @@ export interface Childable {
 export interface BlockBaseProps {
     anchor?: AnchorProps;
     visible?: GridColumnSize;
+    /** @deprecated */
     resetPaddings?: boolean;
     qa?: string;
 }

package/server/models/constructor.d.ts

@@ -6,7 +6,12 @@ export interface PageData {
 export interface Menu {
     title: string;
 }
-export type ConstructorBlock = ConstructorItem | CustomBlock;
+export type ConstructorBlock = (ConstructorItem | CustomBlock) & {
+    indent?: {
+        top?: string;
+        bottom?: string;
+    };
+};
 export interface PageContent extends Animatable {
     blocks: ConstructorBlock[];
     menu?: Menu;

package/styles/mixins.scss

@@ -164,6 +164,7 @@
         padding: 0 0 $indentL;
 
         &:first-child {
+            // @deprecated
             margin-top: var(--pc-first-block-indent, #{$indentXXL});
         }
     }

package/styles/storybook/common.scss

@@ -29,7 +29,9 @@
 }
 
 .pc-page-constructor {
+    // @deprecated
     --pc-first-block-mobile-indent: 32px;
+    // @deprecated
     --pc-first-block-indent: 64px;
     margin-bottom: 120px;
 }