@redneckz/wildless-cms-uni-blocks 0.6.33 → 0.6.35

package/src/components/Accordion/Accordion.fixture.mobile.tsx

@@ -1,70 +1,55 @@
-import { DEFAULT_SLOT_NAME } from '../../model/BlockDecorator';
-import type { BlockDef, ContentPageDef } from '../../model/ContentPageDef';
-import '../../react/setup-fixture';
-import { AccordionItem } from '../AccordionItem/AccordionItem';
-import { Headline } from '../Headline/Headline';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import type { BlockDef } from '../../model/ContentPageDef';
+import '../../setup-fixture';
+import { Blocks } from '../Blocks';
 import { HEADLINE } from '../Headline/Headline.fixture';
-import { LinkDocs } from '../LinkDocs/LinkDocs';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
-import { TextBlock } from '../TextBlock/TextBlock';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
-import type { AccordionProps } from './Accordion';
 import { Accordion } from './Accordion';
 
-const page = {} as ContentPageDef;
-
-const TEXT_BLOCK_ACCORDION_BLOCK = <TextBlock {...TEXT_BLOCK} />;
-
-const HEADLINE_ACCORDION_BLOCK = <Headline {...HEADLINE} />;
-
-const LINK_DOCS_ACCORDION_BLOCK = <LinkDocs {...linkDocsContentExample} title="" />;
-
-const ACCORDION_BLOCK_DEF: BlockDef = {
-  type: 'Accordion',
+export const ACCORDION_ITEM: BlockDef = {
+  type: 'AccordionItem',
   content: {
-    title: 'Accordion title',
-    description: 'Accordion description 2',
-    bordered: true,
-  } as AccordionProps,
+    label: 'Accordion label 1',
+    labelIcon: { icon: 'CardIcon' },
+    isExpanded: true,
+  },
+  blocks: [
+    { type: 'TextBlock', content: TEXT_BLOCK },
+    { type: 'TextBlock', content: TEXT_BLOCK },
+  ],
 };
 
-export const ACCORDION_ITEM = (
-  <AccordionItem
-    ancestors={[
-      [page, DEFAULT_SLOT_NAME],
-      [ACCORDION_BLOCK_DEF, DEFAULT_SLOT_NAME],
-    ]}
-    label="Accordion label 1"
-    labelIcon={{ icon: 'CardIcon' }}
-  >
-    {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-  </AccordionItem>
-);
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Accordion className="col-span-12" {...ACCORDION_BLOCK_DEF.content}>
-        {ACCORDION_ITEM}
-        <AccordionItem
-          ancestors={[
-            [page, DEFAULT_SLOT_NAME],
-            [ACCORDION_BLOCK_DEF, DEFAULT_SLOT_NAME],
-          ]}
-          label="Accordion label 2"
-        >
-          {[HEADLINE_ACCORDION_BLOCK]}
-        </AccordionItem>
-        <AccordionItem
-          ancestors={[
-            [page, DEFAULT_SLOT_NAME],
-            [ACCORDION_BLOCK_DEF, DEFAULT_SLOT_NAME],
-          ]}
-          label="Accordion label 3"
-        >
-          {[LINK_DOCS_ACCORDION_BLOCK]}
-        </AccordionItem>
-      </Accordion>
+      <Accordion
+        className="col-span-12"
+        title="Accordion title"
+        description="Accordion description 2"
+        bordered={true}
+        block={{
+          type: 'Accordion',
+          blocks: [
+            ACCORDION_ITEM,
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 2', isExpanded: true },
+              blocks: [{ type: 'Headline', content: HEADLINE }],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 3', isExpanded: true },
+              blocks: [{ type: 'LinkDocs', content: { ...linkDocsContentExample, title: '' } }],
+            },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
 };

package/src/components/Accordion/Accordion.fixture.tsx

@@ -1,46 +1,29 @@
-import '../../react/setup-fixture';
-import { AccordionItem } from '../AccordionItem/AccordionItem';
-import { Gallery } from '../Gallery/Gallery';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import type { BlockDef } from '../../model/ContentPageDef';
+import '../../setup-fixture';
+import { Blocks } from '../Blocks';
 import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
-import { Headline } from '../Headline/Headline';
 import { HEADLINE } from '../Headline/Headline.fixture';
-import { LinkDocs } from '../LinkDocs/LinkDocs';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
-import { MiniGallery } from '../MiniGallery/MiniGallery';
 import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
-import { PictureText } from '../PictureText/PictureText';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
-import { ProductTile } from '../ProductTile/ProductTile';
 import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
-import { TextBlock } from '../TextBlock/TextBlock';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
-import { Tile } from '../Tile/Tile';
 import { TILE } from '../Tile/Tile.fixture';
 import { Accordion } from './Accordion';
 
-const TEXT_BLOCK_ACCORDION_BLOCK = <TextBlock className="col-span-12" {...TEXT_BLOCK} />;
-
-const HEADLINE_ACCORDION_BLOCK = <Headline className="col-span-12" {...HEADLINE} />;
-
-const PICTURE_TEXT_ACCORDION_BLOCK = <PictureText className="col-span-12" {...PICTURE_TEXT} />;
-
-const LINK_DOCS_ACCORDION_BLOCK = (
-  <LinkDocs className="col-span-12" {...linkDocsContentExample} title="" />
-);
-
-const TILES_ACCORDION_BLOCK = <Tile className="col-span-6" {...TILE} />;
-
-const PRODUCT_TILES_ACCORDION_BLOCK = <ProductTile className="col-span-6" {...PRODUCT_TILE} />;
-
-const GALLERY_ACCORDION_BLOCK = <Gallery className="col-span-12" {...GALLERY} />;
-
-const MINI_GALLERY_ACCORDION_BLOCK = <MiniGallery className="col-span-12" {...MINI_GALLERY} />;
+export const ACCORDION_ITEM: BlockDef = {
+  type: 'AccordionItem',
+  content: { label: 'Accordion label 1', isExpanded: true },
+  blocks: [
+    { type: 'TextBlock', content: TEXT_BLOCK },
+    { type: 'TextBlock', content: TEXT_BLOCK },
+  ],
+};
 
-export const ACCORDION_ITEM = (
-  <AccordionItem label="Accordion label 1">
-    {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-  </AccordionItem>
-);
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
   default: (
@@ -49,20 +32,55 @@ export default {
         className="col-span-12"
         title="Accordion title"
         description="Accordion description"
-      >
-        {ACCORDION_ITEM}
-        <AccordionItem label="Accordion label 2">{[PICTURE_TEXT_ACCORDION_BLOCK]}</AccordionItem>
-        <AccordionItem label="Accordion label 3">{[HEADLINE_ACCORDION_BLOCK]}</AccordionItem>
-        <AccordionItem label="Accordion label 4">{[LINK_DOCS_ACCORDION_BLOCK]}</AccordionItem>
-        <AccordionItem label="Accordion label 5">
-          {[TILES_ACCORDION_BLOCK, TILES_ACCORDION_BLOCK]}
-        </AccordionItem>
-        <AccordionItem label="Accordion label 6">
-          {[PRODUCT_TILES_ACCORDION_BLOCK, PRODUCT_TILES_ACCORDION_BLOCK]}
-        </AccordionItem>
-        <AccordionItem label="Accordion label 7">{[GALLERY_ACCORDION_BLOCK]}</AccordionItem>
-        <AccordionItem label="Accordion label 8">{[MINI_GALLERY_ACCORDION_BLOCK]}</AccordionItem>
-      </Accordion>
+        block={{
+          type: 'Accordion',
+          blocks: [
+            ACCORDION_ITEM,
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 2', isExpanded: true },
+              blocks: [{ type: 'PictureText', content: PICTURE_TEXT }],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 3', isExpanded: true },
+              blocks: [{ type: 'Headline', content: HEADLINE }],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 4' },
+              blocks: [{ type: 'LinkDocs', content: { ...linkDocsContentExample, title: '' } }],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 5' },
+              blocks: [
+                { type: 'Tile', content: TILE, style: ['col-span-6'] },
+                { type: 'Tile', content: TILE, style: ['col-span-6'] },
+              ],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 6' },
+              blocks: [
+                { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+                { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+              ],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 7' },
+              blocks: [{ type: 'Gallery', content: GALLERY }],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 8' },
+              blocks: [{ type: 'MiniGallery', content: MINI_GALLERY }],
+            },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
   'right-align-title': (
@@ -72,12 +90,21 @@ export default {
         title="Accordion title"
         accordionAlignTitle="right"
         description="Accordion description"
-      >
-        <AccordionItem label="Accordion label 1">
-          {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-        </AccordionItem>
-        <AccordionItem label="Accordion label 2">{[PICTURE_TEXT_ACCORDION_BLOCK]}</AccordionItem>
-      </Accordion>
+        block={{
+          type: 'Accordion',
+          blocks: [
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 1', isExpanded: true },
+              blocks: [
+                { type: 'TextBlock', content: TEXT_BLOCK },
+                { type: 'TextBlock', content: TEXT_BLOCK },
+              ],
+            },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
 };

package/src/components/Accordion/Accordion.mobile.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -9,7 +10,7 @@ import { AccordionItemsList } from './AccordionItemsList';
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
 export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
-  ({ title, description, className = '', children, ...rest }) => (
+  ({ title, description, className = '', ...rest }) => (
     <BlockWrapper className={`py-6 px-4 bg-white text-primary-text ${className}`} {...rest}>
       {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
       {description ? (
@@ -19,7 +20,7 @@ export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
           </Paragraph>
         </div>
       ) : null}
-      <AccordionItemsList>{children}</AccordionItemsList>
+      <AccordionItemsList>{renderChildren(rest)}</AccordionItemsList>
     </BlockWrapper>
   ),
 );

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { AlignText } from '../../model/AlignText';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -10,7 +11,7 @@ import { AccordionItemsList } from './AccordionItemsList';
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
 export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
-  ({ className = '', title, accordionAlignTitle = 'center', description, children, ...rest }) => (
+  ({ className = '', title, accordionAlignTitle = 'center', description, ...rest }) => (
     <BlockWrapper
       className={`p-[50px] mb-1 last:mb-0 bg-white text-primary-text ${className}`}
       {...rest}
@@ -28,7 +29,7 @@ export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
           <Paragraph size="text-l">{description}</Paragraph>
         </div>
       ) : null}
-      <AccordionItemsList>{children}</AccordionItemsList>
+      <AccordionItemsList>{renderChildren(rest)}</AccordionItemsList>
     </BlockWrapper>
   ),
 );

package/src/components/AccordionItem/AccordionItem.fixture.mobile.tsx

@@ -1,6 +1,17 @@
-import { ACCORDION_ITEM } from '../Accordion/Accordion.fixture.mobile';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { ACCORDION_ITEM } from '../Accordion/Accordion.fixture';
 import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+import { Blocks } from '../Blocks';
+import { AccordionItem } from './AccordionItem';
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
-  default: <AccordionItemsList>{ACCORDION_ITEM}</AccordionItemsList>,
+  default: (
+    <AccordionItemsList>
+      <AccordionItem {...ACCORDION_ITEM.content} block={ACCORDION_ITEM} options={options} />
+    </AccordionItemsList>
+  ),
 };

package/src/components/AccordionItem/AccordionItem.fixture.tsx

@@ -1,6 +1,17 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { ACCORDION_ITEM } from '../Accordion/Accordion.fixture';
 import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+import { Blocks } from '../Blocks';
+import { AccordionItem } from './AccordionItem';
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
-  default: <AccordionItemsList>{ACCORDION_ITEM}</AccordionItemsList>,
+  default: (
+    <AccordionItemsList>
+      <AccordionItem {...ACCORDION_ITEM.content} block={ACCORDION_ITEM} options={options} />
+    </AccordionItemsList>
+  ),
 };

package/src/components/AccordionItem/AccordionItem.mobile.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { getParentBlockContent } from '../../model/getParentBlockContent';
+import { getParentBlockContent } from '../../BlockRenderer/getParentBlockContent';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
@@ -14,8 +15,8 @@ import type { AccordionItemProps } from './AccordionItemProps';
 const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
 
 export const AccordionItem: JSXBlock<AccordionItemProps> = JSX<AccordionItemProps>(
-  ({ className = '', ancestors, label = '', labelIcon, isExpanded, children }) => {
-    const { bordered } = getParentBlockContent(ancestors, {} as AccordionContent);
+  ({ className = '', label = '', labelIcon, isExpanded, ...rest }) => {
+    const { bordered } = getParentBlockContent(rest.options, {} as AccordionContent);
 
     return (
       <li
@@ -31,7 +32,7 @@ export const AccordionItem: JSXBlock<AccordionItemProps> = JSX<AccordionItemProp
               className="flex flex-wrap group-last:last:pb-0 gap-5 [&>*]:p-0"
               isUnfolded={isUnfolded}
             >
-              {children}
+              {renderChildren(rest)}
             </FoldableSection>
           )}
           renderFoldButton={({ isUnfolded, onToggle }) => (

package/src/components/AccordionItem/AccordionItem.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock } from '../../model/JSXBlock';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
@@ -10,7 +11,7 @@ import type { AccordionItemProps } from './AccordionItemProps';
 const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
 
 export const AccordionItem: JSXBlock<AccordionItemProps> = JSX<AccordionItemProps>(
-  ({ className = '', label = '', isExpanded, children }) => (
+  ({ className = '', label = '', isExpanded, ...rest }) => (
     <li
       className={`border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`}
     >
@@ -19,7 +20,7 @@ export const AccordionItem: JSXBlock<AccordionItemProps> = JSX<AccordionItemProp
         unfoldedByDefault={isExpanded}
         renderFoldableSection={({ isUnfolded }) => (
           <FoldableSection className="grid grid-cols-12 gap-5 [&>*]:p-0" isUnfolded={isUnfolded}>
-            {children}
+            {renderChildren(rest)}
           </FoldableSection>
         )}
         renderFoldButton={({ isUnfolded, onToggle }) => (

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
 import { BenefitsBlock } from './BenefitsBlock';

package/src/components/Blocks.ts

@@ -1,7 +1,6 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
 import { Accordion } from './Accordion/Accordion';
 import { AccordionItem } from './AccordionItem/AccordionItem';
-import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
@@ -10,6 +9,7 @@ import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
 import { CarouselCard } from './CarouselCard/CarouselCard';
+import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { Catalog } from './Catalog/Catalog';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
@@ -46,6 +46,7 @@ import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
+import { Video } from './Video/Video';
 
 export const Blocks: BlocksRegistry = {
   Accordion,
@@ -95,4 +96,5 @@ export const Blocks: BlocksRegistry = {
   TextBlock,
   Tile,
   VerticalLayout,
+  Video,
 };

package/src/components/Bonus/Bonus.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Bonus } from './Bonus';
 import type { BonusContent } from './BonusContent';

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.example.json

@@ -3,6 +3,7 @@
     "title": "Вы можете оплатить бонусными баллами",
     "subtitle": "Удобный каталог с большим ассортиментом товаров и сервисов",
     "columnsCount": "4",
+    "cardTextAlign": "center",
     "bonusBenefits": [
       {
         "label": "Более 5000 товаров",

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 
 import { BonusBenefitsBlock } from './BonusBenefitsBlock';
 import { BonusBenefit } from './BonusBenefitsBlockContent';
@@ -60,4 +60,15 @@ export default {
       />
     </div>
   ),
+  '3-cols': (
+    <div className="container grid grid-cols-12">
+      <BonusBenefitsBlock
+        className="col-span-12"
+        title="Преимущества кредита"
+        subtitle="Удобный каталог с большим ассортиментом товаров и сервисов"
+        bonusBenefits={bonusBenefits}
+        columnsCount="3"
+      />
+    </div>
+  ),
 };

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
@@ -12,13 +13,21 @@ import type {
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
 export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', title, subtitle, bonusBenefits, columnsCount = '4', ...rest }) => (
+  ({
+    bonusBenefits,
+    cardTextAlign = 'center',
+    className = '',
+    columnsCount = '4',
+    subtitle,
+    title,
+    ...rest
+  }) => (
     <BlockWrapper
       className={`font-sans text-primary-text bg-white p-[50px] flex flex-col text-center ${className}`}
       {...rest}
     >
       <Headline
-        className="!p-0"
+        className="!p-0 mb-8"
         title={title}
         description={subtitle}
         headlineVersion="M"
@@ -26,7 +35,9 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
         {...rest}
       />
       {bonusBenefits?.length ? (
-        <div className={`grid gap-1 mt-8 ${getElementsColsValue(columnsCount)}`}>
+        <div
+          className={`grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`}
+        >
           {bonusBenefits.map(renderBonusBenefit)}
         </div>
       ) : null}
@@ -34,23 +45,25 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
   ),
 );
 
-const renderBonusBenefit = (bonusBenefit: BonusBenefit, i: number) => {
+const renderBonusBenefit = ({ icon, label, description }: BonusBenefit, i: number) => {
   return (
-    <div key={String(i)} className="flex flex-col items-center max-w-[292px]">
-      {bonusBenefit?.icon ? (
-        <Img
-          className="h-[160px] w-[180px] min-w-[180px] min-h-[160px]"
-          image={bonusBenefit.icon}
-          width="180"
-          height="160"
-        />
-      ) : null}
-      <div>
-        {bonusBenefit?.label ? <span className="text-h6 m-0">{bonusBenefit.label}</span> : null}
-      </div>
+    <div key={String(i)} className="flex flex-col items-center text-h6">
+      {description ? <span>{description}</span> : null}
+      {icon ? <Img image={icon} height="180" width="auto" className="h-[180px] w-auto" /> : null}
+      <div>{label ? <span>{label}</span> : null}</div>
     </div>
   );
 };
 
-const getElementsColsValue = (colValue: ColumnsCount) =>
-  colValue === '4' ? 'grid-cols-4' : 'grid-cols-5';
+const getElementsColsValue = (colValue: ColumnsCount) => {
+  switch (colValue) {
+    case '3':
+      return 'grid-cols-3';
+    case '4':
+      return 'grid-cols-4';
+    case '5':
+      return 'grid-cols-5';
+    default:
+      return 'grid-cols-5';
+  }
+};

package/src/components/BonusBenefitsBlock/BonusBenefitsBlockContent.ts

@@ -1,18 +1,20 @@
-import type { LabelProps, TitleProps } from '../../model/HeadlineType';
+import type { AlignType } from '../../model/AlignType';
+import type { DescriptionProps, LabelProps, TitleProps } from '../../model/HeadlineType';
 import type { IconProps } from '../../model/Picture';
 /**
  * @title Количество элементов в строке
  * @enumNames [
+ *   "Три колонки",
  *   "Четыре колонки",
  *   "Пять колонок",
  *  ]
  */
-export type ColumnsCount = '4' | '5';
+export type ColumnsCount = '3' | '4' | '5';
 
 /**
  * @title Бонус и преимущество
  */
-export type BonusBenefit = LabelProps & IconProps;
+export type BonusBenefit = LabelProps & IconProps & DescriptionProps;
 
 /**
  * @title Блок бонусов и преимуществ
@@ -23,4 +25,5 @@ export type BonusBenefitsBlockContent = TitleProps & {
   /** @title Список бонусов */
   bonusBenefits?: BonusBenefit[];
   columnsCount?: ColumnsCount;
+  cardTextAlign?: AlignType;
 };

package/src/components/BusinessBlock/BusinessBlock.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { BusinessBlock } from './BusinessBlock';
 import type {

package/src/components/Calculator/Calculator.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { Calculator } from './Calculator';
 
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
@@ -34,11 +34,6 @@ const CREDIT_CALCULATOR_BLOCK: CreditCalculatorParamsDef = {
 
 const DEPOSIT_CALCULATOR_BLOCK: DepositCalculatorParamsDef = {
   calcType: 'DepositCalculatorForm',
-  minSum: 50000,
-  maxSum: 5000000,
-  minMonths: 2,
-  maxMonths: 120,
-  rate: 5.9,
   buttons: buttons,
   footnote,
 };