diff --git a/.storybook/stories/documentation/Blocks.mdx b/.storybook/stories/documentation/Blocks.mdx index 4e716e20a..7ef4809f6 100644 --- 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 index 00ef97fb7..b9b1e5280 100644 --- 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>; +export type CardLayoutBlockProps = WithChildren> & + ClassNameProps; const b = block('card-layout-block'); @@ -22,8 +27,9 @@ const CardLayout: React.FC = ({ animated, colSizes = DEFAULT_SIZES, children, + className, }) => ( - + {(title || 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 index a54f03edf..e7571db01 100644 --- 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 index 716b86029..4613a4e96 100644 --- 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 new file mode 100644 index 000000000..665884387 --- /dev/null +++ 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 index 6d500a85b..5340dbf26 100644 --- 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 index fbb53ce9d..64197f25e 100644 --- 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 index b38649f4a..7c1ef8a20 100644 --- 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 index 42657ee7a..f694e2b85 100644 --- 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 index a33d66334..2a56c6662 100644 --- 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 index 57edbcc66..eeba3ca54 100644 --- 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; }