feat: add custom indent for all blocks, and add className prop for Ca…

…rdLayoutBlock (#492) * feat: add custom indent for all blocks, and add className prop for CardLayoutBlock * feat: refactor indents: divided the indents into top and bottom and also removed the extra sizes * feat: marked --pc-first-block-indent as deprecated * feat: add comment for --pc-first-mobile variable * feat: refactor indent props
gravity-ui · Sep 12, 2023 · 75a791a · 75a791a
1 parent ad5e125
commit 75a791a
Show file tree

Hide file tree

Showing 11 changed files with 161 additions and 8 deletions.
diff --git a/.storybook/stories/documentation/Blocks.mdx b/.storybook/stories/documentation/Blocks.mdx
@@ -14,7 +14,12 @@ Each block has the following common properties:
 
 `visible?: 'all' | 'sm' | 'md' | 'lg' | 'xl'` — Sets the screen size to start block display from
 
-`resetPaddings: boolean` — Allows resetting top and bottom margins standard for all blocks
+`resetPaddings: boolean` — Allows resetting top and bottom margins standard for all blocks. **Deprecated**, use `indent` instead
+
+`indent?: {
+  top?: string
+  bottom?: string
+}` - block indentation at the top and bottom, default size `l`, examples you can see [here](?path=/story/blocks-cardlayout--with-custom-indents)
 
 _[Common field types](?id=information--common-types&viewMode=docs)_
 

diff --git a/src/blocks/CardLayout/CardLayout.tsx b/src/blocks/CardLayout/CardLayout.tsx
@@ -2,7 +2,11 @@ import React from 'react';
 
 import {AnimateBlock, Title} from '../../components';
 import {Col, GridColumnSizesType, Row} from '../../grid';
-import {CardLayoutBlockProps as CardLayoutBlockParams, WithChildren} from '../../models';
+import {
+    CardLayoutBlockProps as CardLayoutBlockParams,
+    ClassNameProps,
+    WithChildren,
+} from '../../models';
 import {block} from '../../utils';
 
 import './CardLayout.scss';
@@ -12,7 +16,8 @@ const DEFAULT_SIZES: GridColumnSizesType = {
     sm: 6,
     md: 4,
 };
-export type CardLayoutBlockProps = WithChildren<Omit<CardLayoutBlockParams, 'children'>>;
+export type CardLayoutBlockProps = WithChildren<Omit<CardLayoutBlockParams, 'children'>> &
+    ClassNameProps;
 
 const b = block('card-layout-block');
 
@@ -22,8 +27,9 @@ const CardLayout: React.FC<CardLayoutBlockProps> = ({
     animated,
     colSizes = DEFAULT_SIZES,
     children,
+    className,
 }) => (
-    <AnimateBlock className={b()} animate={animated}>
+    <AnimateBlock className={b(null, className)} animate={animated}>
         {(title || description) && <Title title={title} subtitle={description} />}
         <Row>
             {React.Children.map(children, (child, index) => (

diff --git a/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx b/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx
@@ -50,8 +50,68 @@ const ColSizeTemplate: StoryFn<CardLayoutBlockModel> = (args) => (
     </Fragment>
 );
 
+const WithCustomIndentsTemplate: StoryFn<CardLayoutBlockModel> = ({title, ...restArgs}) => (
+    <Fragment>
+        <PageConstructor
+            content={{
+                blocks: [
+                    {
+                        ...restArgs,
+                        title: `${title} with zero indents at the top and bottom`,
+                        indent: {
+                            top: '0',
+                            bottom: '0',
+                        },
+                    },
+                    {
+                        ...restArgs,
+                        title: `${title} with XS indents at the top and bottom`,
+                        indent: {
+                            top: 'xs',
+                            bottom: 'xs',
+                        },
+                    },
+                    {
+                        ...restArgs,
+                        title: `${title} with S indents at the top and bottom`,
+                        indent: {
+                            top: 's',
+                            bottom: 's',
+                        },
+                    },
+                    {
+                        ...restArgs,
+                        title: `${title} with M indents at the top and bottom`,
+                        indent: {
+                            top: 'm',
+                            bottom: 'm',
+                        },
+                    },
+                    {
+                        ...restArgs,
+                        title: `${title} with L (default) indents at the top and bottom`,
+                        indent: {
+                            top: 'l',
+                            bottom: 'l',
+                        },
+                    },
+                    {
+                        ...restArgs,
+                        title: `${title} with XL indents at the top and bottom`,
+                        indent: {
+                            top: 'xl',
+                            bottom: 'xl',
+                        },
+                    },
+                ],
+            }}
+        />
+    </Fragment>
+);
+
 export const Default = DefaultTemplate.bind({});
 export const ColSize = ColSizeTemplate.bind({});
+export const WithCustomIndents = WithCustomIndentsTemplate.bind({});
 
 Default.args = {
     ...data.default.content,
@@ -62,3 +122,8 @@ ColSize.args = {
     ...data.default.content,
     children: createCardArray(8, data.colSizes.four.card),
 } as CardLayoutBlockProps;
+
+WithCustomIndents.args = {
+    ...data.default.content,
+    children: createCardArray(3, data.default.card),
+} as CardLayoutBlockProps;
diff --git a/src/blocks/FilterBlock/FilterBlock.scss b/src/blocks/FilterBlock/FilterBlock.scss
@@ -21,6 +21,7 @@ $innerBlock: '.#{$ns}block-base';
         margin: 0px;
     }
 
+    // @deprecated
     --pc-first-block-indent: 0;
     --pc-first-block-mobile-indent: 0;
 }
diff --git a/src/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.scss b/src/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.scss
@@ -0,0 +1,60 @@
+@import '../../../../../styles/variables';
+@import '../../../../../styles/mixins';
+
+$block: '.#{$ns}constructor-block';
+
+#{$block} {
+    @include add-specificity(&) {
+        &_indentTop {
+            &_0 {
+                margin-top: 0;
+            }
+
+            &_xs {
+                margin-top: $indentXS;
+            }
+
+            &_s {
+                margin-top: $indentSM;
+            }
+
+            &_m {
+                margin-top: $indentM;
+            }
+
+            &_l {
+                margin-top: $indentL;
+            }
+
+            &_xl {
+                margin-top: $indentXL;
+            }
+        }
+
+        &_indentBottom {
+            &_0 {
+                padding-bottom: 0;
+            }
+
+            &_xs {
+                padding-bottom: $indentXS;
+            }
+
+            &_s {
+                padding-bottom: $indentSM;
+            }
+
+            &_m {
+                padding-bottom: $indentM;
+            }
+
+            &_l {
+                padding-bottom: $indentL;
+            }
+
+            &_xl {
+                padding-bottom: $indentXL;
+            }
+        }
+    }
+}
diff --git a/src/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.tsx b/src/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.tsx
@@ -11,6 +11,8 @@ import {
 } from '../../../../models';
 import {block} from '../../../../utils';
 
+import './ConstructorBlock.scss';
+
 interface ConstructorBlockProps extends Pick<BlockDecorationProps, 'index'> {
     data: ConstructorBlockType;
 }
@@ -22,15 +24,20 @@ export const ConstructorBlock: React.FC<WithChildren<ConstructorBlockProps>> = (
     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 (
         <BlockDecoration type={type} index={index} {...blockBaseProps}>
-            <BlockBase className={b({type})} {...blockBaseProps}>
+            <BlockBase
+                className={b({type, indentTop: top, indentBottom: bottom})}
+                {...blockBaseProps}
+            >
                 {children}
             </BlockBase>
         </BlockDecoration>

diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts
@@ -65,6 +65,7 @@ export interface Childable {
 export interface BlockBaseProps {
     anchor?: AnchorProps;
     visible?: GridColumnSize;
+    /** @deprecated */
     resetPaddings?: boolean;
     qa?: string;
 }

diff --git a/src/models/constructor.ts b/src/models/constructor.ts
@@ -16,7 +16,12 @@ 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[];

diff --git a/src/text-transform/transformers.ts b/src/text-transform/transformers.ts
@@ -51,7 +51,7 @@ function transformBlock(lang: Lang, blocksConfig: BlocksConfig, block: Construct
                         if (parser) {
                             block[field] = parser(transformer, block[field]);
                         } else if (typeof block[field] === 'string') {
-                            block[field] = transformer(block[field]);
+                            block[field] = transformer(block[field] as string);
                         }
                     }
                 });

diff --git a/styles/mixins.scss b/styles/mixins.scss
@@ -164,6 +164,7 @@
         padding: 0 0 $indentL;
 
         &:first-child {
+            // @deprecated
             margin-top: var(--pc-first-block-indent, #{$indentXXL});
         }
     }

diff --git a/styles/storybook/common.scss b/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;
 }