@redneckz/wildless-cms-uni-blocks 0.13.23 → 0.14.0

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -13,51 +13,53 @@ export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps
 
 export const CarouselLinks = JSX<CarouselLinksProps>(
   ({ className, additionalDescription, description, links, title, ...rest }) => (
-    <BlockWrapper
-      className={style('flex flex-col sm:flex-row w-full overflow-hidden', className)}
-      {...rest}
-    >
-      <div className="mr-xl flex-auto">
-        <Headline
-          isEmbedded={true}
-          title={title}
-          description={description}
-          as="h1"
-          align="text-left"
-        />
-        {additionalDescription ? (
+    <BlockWrapper className={style('overflow-hidden', className)} {...rest}>
+      <div className="flex flex-col @6xl:flex-row gap-m">
+        <div>
           <Headline
-            className="pt-m"
-            description={additionalDescription}
-            align="text-left"
             isEmbedded={true}
+            title={title}
+            description={description}
+            as="h1"
+            align="text-left"
           />
-        ) : null}
+          {additionalDescription ? (
+            <Headline
+              className="pt-m"
+              description={additionalDescription}
+              align="text-left"
+              isEmbedded={true}
+            />
+          ) : null}
+        </div>
+        {links?.length ? renderLinks(links, '@6xl:min-w-[672px] p-0 justify-self-end') : null}
       </div>
-      {links?.length ? renderLinks(links) : null}
     </BlockWrapper>
   ),
 );
 
-const renderLinks = (links: LinkProps[]) => {
+const renderLinks = (links: LinkProps[], className = '') => {
   const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
 
   return (
     <Carousel
-      className="@container-normal sm:w-2/3 w-full p-0 sm:p-xs"
+      className={className}
       version="secondary"
       itemCount={itemCount}
       arrowsPadded={false}
+      padding="p-0"
     >
       {new Array(itemCount).fill(null).map((_, groupIndex) => (
         <div
           key={String(groupIndex)}
-          className={style('flex flex-wrap self-start w-full sm:w-[672px]')}
+          className={style(
+            'flex flex-wrap gap-2xs self-start xl:justify-center @5xl:grid @5xl:grid-cols-2',
+          )}
         >
           {links
             .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)
             .map((link, index) => (
-              <CarouselLinkButton key={String(index)} className="sm:m-2xs" {...link} />
+              <CarouselLinkButton key={String(index)} {...link} />
             ))}
         </div>
       ))}

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -13,14 +13,14 @@ import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
-import { alignTextStyle } from './alignTextStyle';
+import { AlignStyles } from '../../model/AlignStyles';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
 
 export const CarouselProductCard = JSX<CarouselProductCardProps>(
   ({
     additionalDescription,
-    align = alignTextStyle,
+    align = AlignStyles,
     button = {},
     className = '',
     description,

package/src/components/CarouselProgramsCard/CarouselProgramsCard.fixture.tsx

@@ -29,7 +29,7 @@ export const BUSINESS_CARD: CarouselProgramsCardContent = {
   list,
 };
 
-const CAROUSEL_BUSINESS_CARD = <CarouselProgramsCard className="col-span-6" {...BUSINESS_CARD} />;
+const CAROUSEL_BUSINESS_CARD = <CarouselProgramsCard className="col-span-4" {...BUSINESS_CARD} />;
 
 export default {
   default: <div className="container grid grid-cols-12">{CAROUSEL_BUSINESS_CARD}</div>,

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -19,6 +19,7 @@
         "text": "Текст"
       }
     ],
-    "version": "primary"
+    "version": "primary",
+    "listItemSize": "S"
   }
 }

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

@@ -1,11 +1,9 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
+import type { SocialMediaLink } from '../Footer/FooterContent';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard';
-import type {
-  CarouselRecommendationCardContent,
-  RecommendationSocialMedia,
-} from './CarouselRecommendationCardContent';
+import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 
 const icon: Picture = {
   src: 'product-basket.png',
@@ -17,42 +15,30 @@ const icon: Picture = {
   title: 'product-basket',
 };
 
-const commonProps: RecommendationSocialMedia = {
-  target: '_blank',
-  version: 'gray',
-  rounded: false,
-};
-
-const socialMediaWithText: RecommendationSocialMedia[] = [
+const socialMediaWithText: SocialMediaLink[] = [
   {
     href: 'https://t.me',
     text: 'Telegram',
-    ...commonProps,
   },
   {
     href: 'https://vk.com',
     text: 'Telegram',
-    ...commonProps,
   },
   {
     href: 'https://ok.ru',
     text: 'Telegram',
-    ...commonProps,
   },
 ];
 
-const socialMediaWithoutText: RecommendationSocialMedia[] = [
+const socialMediaWithoutText: SocialMediaLink[] = [
   {
     href: 'https://t.me',
-    ...commonProps,
   },
   {
     href: 'https://vk.com',
-    ...commonProps,
   },
   {
     href: 'https://ok.ru',
-    ...commonProps,
   },
 ];
 

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx

@@ -1,11 +1,9 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
+import type { SocialMediaLink } from '../Footer/FooterContent';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard';
-import type {
-  CarouselRecommendationCardContent,
-  RecommendationSocialMedia,
-} from './CarouselRecommendationCardContent';
+import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 
 const icon: Picture = {
   src: 'product-basket.png',
@@ -17,42 +15,30 @@ const icon: Picture = {
   title: 'product-basket',
 };
 
-const commonProps: RecommendationSocialMedia = {
-  target: '_blank',
-  version: 'gray',
-  rounded: false,
-};
-
-const socialMediaWithText: RecommendationSocialMedia[] = [
+const socialMediaWithText: SocialMediaLink[] = [
   {
     href: 'https://t.me',
     text: 'Telegram',
-    ...commonProps,
   },
   {
     href: 'https://vk.com',
     text: 'Telegram',
-    ...commonProps,
   },
   {
     href: 'https://ok.ru',
     text: 'Telegram',
-    ...commonProps,
   },
 ];
 
-const socialMediaWithoutText: RecommendationSocialMedia[] = [
+const socialMediaWithoutText: SocialMediaLink[] = [
   {
     href: 'https://t.me',
-    ...commonProps,
   },
   {
     href: 'https://vk.com',
-    ...commonProps,
   },
   {
     href: 'https://ok.ru',
-    ...commonProps,
   },
 ];
 

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.mobile.tsx

@@ -1,4 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
@@ -7,8 +9,6 @@ import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -12,6 +12,7 @@ import type { CarouselRecommendationCardContent } from './CarouselRecommendation
 
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 
+//TODO: replace SocialMedia with renderButtonSection
 export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
   ({
     className,
@@ -20,6 +21,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     href,
     icon,
     items = [],
+    listItemSize = 'S',
     socialMedia = [],
     target,
     title,
@@ -51,7 +53,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
             backImage={icon?.icon || icon?.src ? <Img image={icon} /> : null}
             buttons={socialMedia.length ? <SocialMedia media={socialMedia} /> : null}
           >
-            {items.length ? <List items={items} listItemSize="S" /> : null}
+            {items.length ? <List items={items} listItemSize={listItemSize} /> : null}
           </BaseTile>
         </LinkWrapper>
       </BlockWrapper>

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -2,10 +2,8 @@ import type { AlignProps, HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import type { ListContent } from '../../ui-kit/List/ListContent';
-
-export type RecommendationSocialMedia = LinkCommonProps & IconProps & ButtonContent;
+import type { SocialMediaLink } from '../Footer/FooterContent';
 
 /**
  * @title Карточка рекомендаций
@@ -17,5 +15,5 @@ export type CarouselRecommendationCardContent = UniBlockContent &
   LinkCommonProps &
   AlignProps & {
     /** @title Соц сети */
-    socialMedia?: RecommendationSocialMedia[];
+    socialMedia?: SocialMediaLink[];
   };

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -7,7 +7,7 @@ import { style } from '../../utils/style';
 import { Text } from '../../ui-kit/Text/Text';
 import { ComparisonTableBody } from './ComparisonTableBody';
 import type { ComparisonTableContent } from './ComparisonTableContent';
-import { FIRST_CELL_CLASSES } from './constants';
+import { firstCellStyle } from './constants';
 
 export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
 
@@ -55,7 +55,7 @@ const renderShowMoreToggleButton = ({
 }) => (
   <div className="pr-6xl">
     <div className="flex gap-m w-full">
-      <div className={FIRST_CELL_CLASSES} />
+      <div className={firstCellStyle} />
       <button
         onClick={onClick}
         className="py-xs flex-1 border-gray border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"

package/src/components/ComparisonTable/ComparisonTableColumnHeaders.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ColumnHeader } from './ComparisonTableContent';
-import { COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
+import { COLUMN_WIDTH, firstCellStyle } from './constants';
 import { HeaderCell } from './HeaderCell';
 import { TableCarouselContainer } from './TableCarouselContainer';
 import { TableRowContainer } from './TableRowContainer';
@@ -13,7 +13,7 @@ interface ComparisonTableColumnHeadersProps {
 export const ComparisonTableColumnHeaders = JSX<ComparisonTableColumnHeadersProps>(
   ({ colHeaders, activeIndex }) => (
     <TableRowContainer>
-      <div className={FIRST_CELL_CLASSES} role="columnheader" />
+      <div className={firstCellStyle} role="columnheader" />
       <TableCarouselContainer activeIndex={activeIndex} columnWidth={COLUMN_WIDTH}>
         {colHeaders.map((header, i) => (
           <HeaderCell key={String(i)} {...header} />

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -4,7 +4,8 @@ import type { Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { BORDER_CLASSES, GRADIENT } from './constants';
+import { borderStyle, gradientStyle } from './constants';
+import { style } from '../../utils/style';
 
 export interface HeaderCellProps {
   icon?: Picture;
@@ -16,7 +17,11 @@ export interface HeaderCellProps {
 
 export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) => (
   <div
-    className={`w-80 box-border flex flex-col gap-m items-center rounded-t-md border-b-0 p-2xl ${BORDER_CLASSES} ${GRADIENT}`}
+    className={style(
+      'w-80 box-border flex flex-col gap-m items-center rounded-t-md border-b-0 p-2xl',
+      borderStyle,
+      gradientStyle,
+    )}
     role="columnheader"
   >
     {icon && !image?.src && (

package/src/components/ComparisonTable/TableCarouselContainer.tsx

@@ -9,7 +9,7 @@ export interface TableCarouselContainerProps {
 
 const carouselContainerClassesMap: Record<TableVersion, string> = {
   comparison: 'flex gap-m duration-1000',
-  tariff: 'flex flex-grow duration-1000',
+  tariff: 'flex gap-5xl flex-grow duration-1000',
 };
 
 export const TableCarouselContainer = JSX<TableCarouselContainerProps>(

package/src/components/ComparisonTable/TableCell.mobile.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { CellData } from './ComparisonTableContent';
-import { DIVIDER_CLASSES } from './constants';
+import { dividerStyle } from './constants';
+import { style } from '../../utils/style';
 
 export interface TableCellProps {
   cell: CellData[];
@@ -10,17 +11,15 @@ export interface TableCellProps {
   isFillGradient?: boolean;
 }
 
-export const TableCell = JSX<TableCellProps>(({ cell, rowHeader, isFillGradient = false }) => {
-  const cellWrapperClasses = `box-border flex flex-col`;
+const cellWrapperStyle = `box-border flex flex-col`;
 
-  const cellClasses = `h-full ${DIVIDER_CLASSES}`;
-
-  return (
-    <div className={cellWrapperClasses} role="cell">
-      <div className={cellClasses}>{cell.map(renderCellInner(isFillGradient, rowHeader))}</div>
+export const TableCell = JSX<TableCellProps>(({ cell, rowHeader, isFillGradient = false }) => (
+  <div className={cellWrapperStyle} role="cell">
+    <div className={style('h-full', dividerStyle)}>
+      {cell.map(renderCellInner(isFillGradient, rowHeader))}
     </div>
-  );
-});
+  </div>
+));
 
 const renderCellInner =
   (isFillGradient: boolean, rowHeader?: string) =>
@@ -32,11 +31,14 @@ const renderCellInner =
         </div>
         <div className="basis-1/2">
           {label ? (
-            <div className={`text-right ${isFillGradient ? 'text-white' : ''}`}>{label}</div>
+            <div className={style('text-right', isFillGradient ? 'text-white' : '')}>{label}</div>
           ) : null}
           {description ? (
             <div
-              className={`text-right ${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}
+              className={style(
+                'text-right',
+                isFillGradient ? 'text-white/80' : 'text-secondary-text',
+              )}
             >
               {description}
             </div>

package/src/components/ComparisonTable/TableCell.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { CellData } from './ComparisonTableContent';
-import { BORDER_CLASSES, DIVIDER_CLASSES, GRADIENT } from './constants';
+import { borderStyle, dividerStyle, gradientStyle } from './constants';
+import { style } from '../../utils/style';
 
 export interface TableCellProps {
   cell: CellData[];
@@ -11,17 +12,23 @@ export interface TableCellProps {
 }
 
 export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
-  const cellWrapperClasses = `w-80 box-border flex flex-col ${BORDER_CLASSES} ${
-    !isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'
-  } ${isFillGradient ? GRADIENT : ''}`;
+  const cellWrapperStyle = style(
+    'w-80 box-border flex flex-col',
+    borderStyle,
+    !isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md',
+    isFillGradient ? gradientStyle : '',
+  );
 
-  const cellClasses = `mx-2xl h-full ${DIVIDER_CLASSES} ${
-    isFillGradient && isFirstRow ? 'border-t' : ''
-  } ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
+  const cellStyle = style(
+    'mx-2xl h-full',
+    dividerStyle,
+    isFillGradient && isFirstRow ? 'border-t' : '',
+    !isLastRow ? 'border-solid' : 'border-b-0',
+  );
 
   return (
-    <div className={cellWrapperClasses} role="cell">
-      <div className={cellClasses}>
+    <div className={cellWrapperStyle} role="cell">
+      <div className={cellStyle}>
         {cell.map((item, i) => renderCellInner(item, i, isFillGradient))}
       </div>
     </div>

package/src/components/ComparisonTable/TableColumn.tsx

@@ -3,9 +3,10 @@ import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Button } from '../../ui-kit/Button/Button';
 import type { CellData, ColumnHeader } from './ComparisonTableContent';
-import { GRADIENT } from './constants';
+import { gradientStyle } from './constants';
 import { HeaderCell } from './HeaderCell';
 import { TableCell } from './TableCell';
+import { style } from '../../utils/style';
 
 export interface TableColumnData {
   rowHeader?: string;
@@ -24,11 +25,14 @@ export interface TableColumnProps extends UniBlockProps {
 export const TableColumn = JSX<TableColumnProps>(
   ({ header, columnData, visibleRowLength = 0, isFillGradient, showRow, onToggleColumn }) => {
     const columnDataView = columnData?.slice(0, showRow ? columnData.length : visibleRowLength);
-    const gradientClassName = isFillGradient ? GRADIENT : '';
+    const gradientColumnStyle = isFillGradient ? gradientStyle : '';
     const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
 
     return (
-      <div className={`border border-gray rounded-md p-m mb-m ${gradientClassName}`} role="row">
+      <div
+        className={style('border border-gray rounded-md p-m mb-m', gradientColumnStyle)}
+        role="row"
+      >
         <HeaderCell {...header} isFillGradient={isFillGradient} />
         {columnDataView?.length
           ? columnDataView.map(({ rowHeader, cell }, i) => (

package/src/components/ComparisonTable/TableRow.tsx

@@ -1,10 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { TitleProps } from '../../model/HeadlineType';
 import type { CellData } from './ComparisonTableContent';
-import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
+import { COLUMN_WIDTH, dividerStyle, firstCellStyle } from './constants';
 import { TableCarouselContainer } from './TableCarouselContainer';
 import { TableCell } from './TableCell';
 import { TableRowContainer } from './TableRowContainer';
+import { style } from '../../utils/style';
 
 export interface Row {
   header: TitleProps;
@@ -20,9 +21,7 @@ export interface TableRowProps {
 }
 
 const titleStyle = (isLastRow = false) =>
-  `text-s py-2xl ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
-    isLastRow ? 'border-b-0' : 'border-solid'
-  }`;
+  style('text-s py-2xl', dividerStyle, firstCellStyle, isLastRow ? 'border-b-0' : 'border-solid');
 
 export const TableRow = JSX<TableRowProps>(
   ({ row: { header, data }, activeIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (

package/src/components/ComparisonTable/constants.ts

@@ -1,6 +1,6 @@
-export const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
-export const BORDER_CLASSES = 'border-gray border-solid border';
-export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
-export const FIRST_CELL_CLASSES = 'w-52';
+export const gradientStyle = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
+export const borderStyle = 'border-gray border-solid border';
+export const dividerStyle = 'border-main-divider border-b';
+export const firstCellStyle = 'w-52';
 export const COLS_LENGTH_FOR_SCROLL = 3;
 export const COLUMN_WIDTH = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px

package/src/components/ContentPage/ContentPage.tsx

@@ -9,6 +9,7 @@ import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { useBlockRouterProvider } from '../../services/BlockRouter/useBlockRouterProvider';
 import { CookiePopup } from '../../ui-kit/CookiePopup/CookiePopup';
 import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { style } from '../../utils/style';
 import { LikeControl } from '../LikeControl/LikeControl';
 import { StickyBottomMenu } from '../StickyBottomMenu/StickyBottomMenu';
@@ -49,6 +50,7 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
         </section>
         <StickyBottomMenu />
         <DialogManager />
+        <PopupManager />
         <CookiePopup
           termLink={{ href: '/pd-policy#cookie', target: '_blank' }}
           personalDataPolicyLink={{ href: '/pd-policy', target: '_blank' }}

package/src/components/DepositFiltration/DepositFiltration.example.json

@@ -57,8 +57,12 @@
         }
       }
     },
-    "sumInput": { "title": "Сумма" },
-    "periodInput": { "title": "Срок, месяцев", "min": 3, "max": 36 },
+    "sumInput": {
+      "title": "Сумма"
+    },
+    "periodInput": {
+      "title": "Срок, месяцев"
+    },
     "resetButton": {
       "text": "Очистить фильтры",
       "version": "secondary"

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

@@ -129,69 +129,42 @@ export default {
           type: 'DepositFiltration',
           blocks: [
             generateBlock(
-              PRODUCT_TILE,
+              { ...PRODUCT_TILE, title: 'Карточка 1' },
               CURRENCY_RUB,
               OPTIONS_WITHDRAWAL,
               OPTIONS_PENSIONER,
               PERCENTS_IN_THE_END,
               {
-                sum: { min: 500, max: 5000 },
-                period: { min: 9, max: 38 },
+                sum: { min: 500, max: 500000 },
               },
-            ),
-            generateBlock(
-              PRODUCT_TILE,
-              CURRENCY_RUB,
-              OPTIONS_ADD,
-              OPTIONS_ONLINE,
-              PERCENTS_EACH_MONTH,
-              {
-                sum: { min: 500, max: 1000 },
-                period: { min: 9, max: 38 },
-              },
-            ),
-            generateBlock(
-              PRODUCT_TILE,
-              CURRENCY_USD,
-              OPTIONS_WITHDRAWAL,
-              OPTIONS_PENSIONER,
-              PERCENTS_EACH_MONTH,
               {
-                sum: { min: 500, max: 1500 },
-                period: { min: 9, max: 38 },
+                sourceBook: 'product-block-data',
               },
             ),
             generateBlock(
-              PRODUCT_TILE,
+              { ...PRODUCT_TILE, title: 'Карточка 2' },
               CURRENCY_USD,
               OPTIONS_ADD,
-              OPTIONS_PENSIONER,
+              OPTIONS_ONLINE,
               PERCENTS_EACH_MONTH,
               {
-                sum: { min: 500, max: 1000 },
-                period: { min: 9, max: 38 },
+                sum: { min: 500, max: 10000 },
               },
-            ),
-            generateBlock(
-              PRODUCT_TILE,
-              CURRENCY_RUB,
-              OPTIONS_ADD,
-              OPTIONS_ONLINE,
-              PERCENTS_IN_THE_END,
               {
-                sum: { min: 500, max: 1000 },
-                period: { min: 9, max: 38 },
+                sourceBook: 'product-block-2-data',
               },
             ),
             generateBlock(
-              PRODUCT_TILE,
+              { ...PRODUCT_TILE, title: 'Карточка 3' },
               CURRENCY_EUR,
               OPTIONS_ADD,
-              OPTIONS_PENSIONER,
+              OPTIONS_ONLINE,
               PERCENTS_EACH_MONTH,
               {
-                sum: { min: 500, max: 1000 },
-                period: { min: 9, max: 38 },
+                sum: { min: 1000, max: 100000 },
+              },
+              {
+                sourceBook: 'product-block-data',
               },
             ),
           ],