feat: added col size for header in icons block (#715)

* feat: added col size for header in icons block

* fix: revert block file

* fix: use PageConstructor instead of DefaultTemplate for storyBook with colSizes

Author: VitaliiDC8

src/blocks/Icons/Icons.scss

@@ -32,6 +32,11 @@ $block: '.#{$ns}icons-block';
         width: 100%;
         padding-bottom: $indentSM;
         text-align: center;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: max-content;
     }
 
     &__text {

src/blocks/Icons/Icons.tsx

@@ -17,7 +17,7 @@ const getItemContent = (item: IconsBlockProps['items'][number]) => (
     </Fragment>
 );
 
-const Icons = ({title, description, size = 's', items}: IconsBlockProps) => {
+const Icons = ({title, description, size = 's', colSizes = {all: 12}, items}: IconsBlockProps) => {
     const {hostname} = useContext(LocationContext);
     const handleAnalytics = useAnalytics();
 
@@ -35,7 +35,7 @@ const Icons = ({title, description, size = 's', items}: IconsBlockProps) => {
                     className={b('header')}
                     title={title}
                     subtitle={description}
-                    colSizes={{all: 12}}
+                    colSizes={colSizes}
                 />
             )}
             {items.map((item) => {

src/blocks/Icons/__stories__/Icons.stories.tsx

@@ -30,9 +30,35 @@ const SizeTemplate: StoryFn<IconsBlockModel> = (args) => (
     </Fragment>
 );
 
+const ColSizeTemplate: StoryFn<IconsBlockModel> = (args) => (
+    <Fragment>
+        <PageConstructor
+            content={{
+                blocks: [
+                    {
+                        ...args,
+                        title: 'ColSize 12',
+                    },
+                    {
+                        ...args,
+                        title: 'ColSize 8',
+                        colSizes: {all: 8},
+                    },
+                    {
+                        ...args,
+                        title: 'ColSize 4',
+                        colSizes: {all: 4},
+                    },
+                ],
+            }}
+        />
+    </Fragment>
+);
+
 export const Default = DefaultTemplate.bind([]);
 export const Size = SizeTemplate.bind([]);
 export const WithText = WithDescriptionTemplate.bind({});
+export const HeaderColSize = ColSizeTemplate.bind({});
 
 const transformedText = yfmTransform(data.withDescription.content.description);
 
@@ -42,3 +68,7 @@ WithText.args = {
     ...data.withDescription.content,
     description: transformedText,
 } as IconsBlockProps;
+HeaderColSize.args = {
+    ...data.withDescription.content,
+    description: transformedText,
+} as IconsBlockProps;

src/models/constructor-items/blocks.ts

@@ -334,6 +334,7 @@ export interface IconsBlockProps {
     description?: string;
     size?: 's' | 'm' | 'l';
     items: IconsBlockItemProps[];
+    colSizes?: GridColumnSizesType;
 }
 
 interface ContentLayoutBlockParams {