@redneckz/wildless-cms-uni-blocks 0.3.15 → 0.3.18

package/mobile/lib/components/StepsBlock/StepsBlock.js

@@ -2,21 +2,43 @@ import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { Heading } from '../../ui-kit/Heading/Heading.js';
 import { Icon } from '../../ui-kit/Icon/Icon.js';
-export const StepsBlock = JSX(({ className, title, description, steps, size = 'normal' }) => {
-    return (_jsxs("section", { className: `box-border font-sans text-primary-text bg-white px-4 py-6 flex flex-col ${className || ''}`, children: [title && _jsx(Heading, { headingType: "h3", className: "text-center", title: title }), description && _jsx("p", { className: `text-m-md text-center ${title && 'mt-2'}`, children: description }), steps?.length ? (_jsx("div", { className: `box-border py-0.5 mb-0.5 mt-5`, children: _jsx("div", { className: "flex flex-col justify-between gap-x-[101px]", children: steps.map((step, i) => renderStepTitle({ step, size, i, length: steps.length })) }) })) : null] }));
+const STEPS_BLOCK_STYLE_MAPS = {
+    primary: {
+        background: 'bg-white',
+        title: 'text-primary-text',
+        description: 'text-secondary-text',
+        iconBackground: 'bg-secondary-light',
+        iconConnector: 'bg-secondary-light',
+    },
+    secondary: {
+        background: 'bg-primary-main',
+        title: 'text-white',
+        description: 'text-white/80',
+        iconBackground: 'bg-white/30',
+        iconConnector: 'bg-white',
+    },
+};
+const styleMaps = (version) => STEPS_BLOCK_STYLE_MAPS[version];
+export const StepsBlock = JSX(({ className, title, description, steps, size = 'normal', version = 'primary' }) => {
+    const style = styleMaps(version);
+    return (_jsxs("section", { className: `box-border font-sans bg-white px-4 py-6 flex flex-col
+        ${style.background} ${style.title} ${className || ''}`, children: [title && (_jsx(Heading, { headingType: "h3", className: `text-center ${style.title}`, title: title })), description && (_jsx("p", { className: `text-m-md text-center ${style.description} ${title && 'mt-2'}`, children: description })), steps?.length ? (_jsx("div", { className: `box-border py-0.5 mb-0.5 mt-5`, children: _jsx("div", { className: "flex flex-col justify-between gap-x-[101px]", children: steps.map((step, i) => renderStepTitle({ step, size, i, length: steps.length, version: version })) }) })) : null] }));
 });
 const renderStepTitle = (params) => {
-    const { step, size, i, length } = params;
+    const { step, size, i, length, version } = params;
     const isLastStep = length - 1 === i;
     const margin = size === 'normal' ? 'ml-[34px]' : 'ml-[24px]';
-    return (_jsx("div", { children: _jsxs("div", { className: "flex flex-row text-center relative", children: [_jsxs("div", { children: [renderIconArea(step, size, i), !isLastStep && _jsx("div", { className: `min-h-8 h-full w-[2px] bg-secondary-light ${margin}` })] }), _jsxs("div", { className: "flex flex-col justify-start relative", children: [step.label && (_jsx("div", { className: "font-medium text-m-title-xs m-0 text-left", children: step.label })), step.description && (_jsx("div", { className: `font-normal text-sm text-secondary-text text-left ${step.label ? 'mt-1' : ''}`, children: step.description }))] })] }, String(i)) }, String(i)));
+    const style = styleMaps(version);
+    return (_jsx("div", { children: _jsxs("div", { className: "flex flex-row text-center relative", children: [_jsxs("div", { className: "overflow-hidden", children: [renderIconArea(params), !isLastStep && (_jsx("div", { className: `min-h-8 h-full w-[2px] ${style.iconConnector} ${margin}` }))] }), _jsxs("div", { className: "flex flex-col justify-start relative", children: [step.label && (_jsx("div", { className: "font-medium text-m-title-xs m-0 text-left", children: step.label })), step.description && (_jsx("div", { className: `font-normal text-sm ${style.description} text-left ${step.label ? 'mt-1' : ''}`, children: step.description }))] })] }, String(i)) }, String(i)));
 };
-const renderIconArea = (step, size, i) => {
+const renderIconArea = (params) => {
+    const { step, size, i, version } = params;
+    const style = styleMaps(version);
     const iconAreaSize = size === 'normal'
         ? 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]'
         : 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]';
     const iconSize = size === 'normal' ? '38' : '27';
     const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
-    return (_jsx("div", { className: `${iconAreaSize} bg-secondary-light rounded-full z-10 mr-3 flex justify-center content-center`, children: _jsx("span", { className: `font-medium text-secondary-text self-center ${iconTextSize}`, children: (step.icon && _jsx(Icon, { name: step.icon, width: iconSize, height: iconSize })) || i + 1 }) }));
+    return (_jsx("div", { className: `${iconAreaSize} ${style.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`, children: _jsx("span", { className: `font-medium flex self-center ${style.title} ${iconTextSize}`, children: (step.icon && _jsx(Icon, { name: step.icon, width: iconSize, height: iconSize, asSVG: true })) || i + 1 }) }));
 };
 //# sourceMappingURL=StepsBlock.js.map

package/mobile/lib/components/StepsBlock/StepsBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepsBlock.js","sourceRoot":"","sources":["../../../src/components/StepsBlock/StepsBlock.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"StepsBlock.js","sourceRoot":"","sources":["../../../src/components/StepsBlock/StepsBlock.tsx"],"names":[],"mappings":"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"}

package/mobile/lib/components/StepsBlock/StepsBlockContent.d.ts

@@ -1,5 +1,6 @@
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { SizeVersion } from '../../model/SizeVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 /**
  * @title Шаг
  */
@@ -27,4 +28,5 @@ export interface StepsBlockContent {
      */
     steps?: Step[];
     size?: SizeVersion;
+    version?: BlockVersion;
 }

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

@@ -17,7 +17,7 @@ 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 columnDataView = columnData?.slice(0, showRow ? columnData.length : visibleRowLength);
     const gradientClassName = isFillGradient ? GRADIENT : '';
     const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
     return (

package/mobile/src/components/Headline/Headline.tsx

@@ -3,7 +3,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { ALIGN_TEXT, BACKGROUND_COLOR } from './constants';
+import { ALIGN_TEXT, HEADLINE_BLOCK_STYLE_MAPS } from './constants';
 import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
@@ -17,17 +17,22 @@ export const Headline = JSX<HeadlineProps>(
     image,
     align = 'left',
   }) => {
+    const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
     return (
-      <section className={`px-4 py-6 ${BACKGROUND_COLOR[bgColorHeadline]} ${className}`}>
+      <section className={`px-4 py-6 ${STYLE_MAPS.background} ${className}`}>
         {title && (
           <Heading
             headingType="h2"
-            className={`text-primary-text ${ALIGN_TEXT[align]}`}
+            className={`${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}
             title={title}
           />
         )}
         {description && (
-          <p className={`font-normal text-m-md ${ALIGN_TEXT[align]} ${title ? 'mt-2.5' : ''}`}>
+          <p
+            className={`font-normal text-m-md ${STYLE_MAPS.description} ${ALIGN_TEXT[align]} ${
+              title ? 'mt-2.5' : ''
+            }`}
+          >
             {description}
           </p>
         )}

package/mobile/src/components/Headline/constants.ts

@@ -7,8 +7,26 @@ export const ALIGN_TEXT: Record<AlignType, string> = {
   right: 'text-right',
 };
 
-export const BACKGROUND_COLOR: Record<BlockVersionWithTransparent, string> = {
-  transparent: 'bg-transparent',
-  primary: 'bg-white',
-  secondary: 'bg-primary-main',
+type StyleType = {
+  background: string;
+  text: string;
+  description: string;
+};
+
+export const HEADLINE_BLOCK_STYLE_MAPS: Record<BlockVersionWithTransparent, StyleType> = {
+  transparent: {
+    background: 'bg-transparent',
+    text: 'text-primary-text',
+    description: 'text-primary-text',
+  },
+  primary: {
+    background: 'bg-white',
+    text: 'text-primary-text',
+    description: 'text-primary-text',
+  },
+  secondary: {
+    background: 'bg-primary-main',
+    text: 'text-white',
+    description: 'text-white/80',
+  },
 };

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -1,26 +1,62 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { SizeVersion } from '../../model/SizeVersion';
-import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import type { SizeVersion } from '../../model/SizeVersion';
+import type { UniBlockProps } from '../../types';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
+type StyleType = {
+  background: string;
+  title: string;
+  description: string;
+  iconBackground: string;
+  iconConnector: string;
+};
+
+const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
+  primary: {
+    background: 'bg-white',
+    title: 'text-primary-text',
+    description: 'text-secondary-text',
+    iconBackground: 'bg-secondary-light',
+    iconConnector: 'bg-secondary-light',
+  },
+  secondary: {
+    background: 'bg-primary-main',
+    title: 'text-white',
+    description: 'text-white/80',
+    iconBackground: 'bg-white/30',
+    iconConnector: 'bg-white',
+  },
+};
+
+const styleMaps = (version: BlockVersion): StyleType => STEPS_BLOCK_STYLE_MAPS[version];
+
 export const StepsBlock = JSX<StepsBlockProps>(
-  ({ className, title, description, steps, size = 'normal' }) => {
+  ({ className, title, description, steps, size = 'normal', version = 'primary' }) => {
+    const style = styleMaps(version);
     return (
       <section
-        className={`box-border font-sans text-primary-text bg-white px-4 py-6 flex flex-col ${
-          className || ''
-        }`}
+        className={`box-border font-sans bg-white px-4 py-6 flex flex-col
+        ${style.background} ${style.title} ${className || ''}`}
       >
-        {title && <Heading headingType="h3" className="text-center" title={title} />}
-        {description && <p className={`text-m-md text-center ${title && 'mt-2'}`}>{description}</p>}
+        {title && (
+          <Heading headingType="h3" className={`text-center ${style.title}`} title={title} />
+        )}
+        {description && (
+          <p className={`text-m-md text-center ${style.description} ${title && 'mt-2'}`}>
+            {description}
+          </p>
+        )}
         {steps?.length ? (
           <div className={`box-border py-0.5 mb-0.5 mt-5`}>
             <div className="flex flex-col justify-between gap-x-[101px]">
-              {steps.map((step, i) => renderStepTitle({ step, size, i, length: steps.length }))}
+              {steps.map((step, i) =>
+                renderStepTitle({ step, size, i, length: steps.length, version: version }),
+              )}
             </div>
           </div>
         ) : null}
@@ -34,20 +70,23 @@ interface RenderStepTitleParams {
   size: SizeVersion;
   i: number;
   length: number;
+  version: BlockVersion;
 }
 
 const renderStepTitle = (params: RenderStepTitleParams) => {
-  const { step, size, i, length } = params;
-
+  const { step, size, i, length, version } = params;
   const isLastStep = length - 1 === i;
   const margin = size === 'normal' ? 'ml-[34px]' : 'ml-[24px]';
+  const style = styleMaps(version);
 
   return (
     <div key={String(i)}>
       <div key={String(i)} className="flex flex-row text-center relative">
-        <div>
-          {renderIconArea(step, size, i)}
-          {!isLastStep && <div className={`min-h-8 h-full w-[2px] bg-secondary-light ${margin}`} />}
+        <div className="overflow-hidden">
+          {renderIconArea(params)}
+          {!isLastStep && (
+            <div className={`min-h-8 h-full w-[2px] ${style.iconConnector} ${margin}`} />
+          )}
         </div>
         <div className="flex flex-col justify-start relative">
           {step.label && (
@@ -55,7 +94,7 @@ const renderStepTitle = (params: RenderStepTitleParams) => {
           )}
           {step.description && (
             <div
-              className={`font-normal text-sm text-secondary-text text-left ${
+              className={`font-normal text-sm ${style.description} text-left ${
                 step.label ? 'mt-1' : ''
               }`}
             >
@@ -68,7 +107,9 @@ const renderStepTitle = (params: RenderStepTitleParams) => {
   );
 };
 
-const renderIconArea = (step: Step, size: SizeVersion, i: number) => {
+const renderIconArea = (params: RenderStepTitleParams) => {
+  const { step, size, i, version } = params;
+  const style = styleMaps(version);
   const iconAreaSize =
     size === 'normal'
       ? 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]'
@@ -79,10 +120,10 @@ const renderIconArea = (step: Step, size: SizeVersion, i: number) => {
 
   return (
     <div
-      className={`${iconAreaSize} bg-secondary-light rounded-full z-10 mr-3 flex justify-center content-center`}
+      className={`${iconAreaSize} ${style.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
     >
-      <span className={`font-medium text-secondary-text self-center ${iconTextSize}`}>
-        {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} />) || i + 1}
+      <span className={`font-medium flex self-center ${style.title} ${iconTextSize}`}>
+        {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} asSVG />) || i + 1}
       </span>
     </div>
   );

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,6 +1,6 @@
 import type { IconName } from '../../ui-kit/Icon/IconProps';
-
 import type { SizeVersion } from '../../model/SizeVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 /**
  * @title Шаг
@@ -30,4 +30,5 @@ export interface StepsBlockContent {
    */
   steps?: Step[];
   size?: SizeVersion; // TODO: mobile content
+  version?: BlockVersion; // TODO: mobile content
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.15",
+  "version": "0.3.18",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/ComparisonTable/TableColumn.tsx

@@ -17,7 +17,7 @@ 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 columnDataView = columnData?.slice(0, showRow ? columnData.length : visibleRowLength);
     const gradientClassName = isFillGradient ? GRADIENT : '';
     const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
     return (

package/src/components/Headline/Headline.mobile.tsx

@@ -3,7 +3,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { ALIGN_TEXT, BACKGROUND_COLOR } from './constants';
+import { ALIGN_TEXT, HEADLINE_BLOCK_STYLE_MAPS } from './constants';
 import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
@@ -17,17 +17,22 @@ export const Headline = JSX<HeadlineProps>(
     image,
     align = 'left',
   }) => {
+    const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
     return (
-      <section className={`px-4 py-6 ${BACKGROUND_COLOR[bgColorHeadline]} ${className}`}>
+      <section className={`px-4 py-6 ${STYLE_MAPS.background} ${className}`}>
         {title && (
           <Heading
             headingType="h2"
-            className={`text-primary-text ${ALIGN_TEXT[align]}`}
+            className={`${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}
             title={title}
           />
         )}
         {description && (
-          <p className={`font-normal text-m-md ${ALIGN_TEXT[align]} ${title ? 'mt-2.5' : ''}`}>
+          <p
+            className={`font-normal text-m-md ${STYLE_MAPS.description} ${ALIGN_TEXT[align]} ${
+              title ? 'mt-2.5' : ''
+            }`}
+          >
             {description}
           </p>
         )}

package/src/components/Headline/Headline.tsx

@@ -2,15 +2,16 @@ import { JSX } from '@redneckz/uni-jsx';
 
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { ALIGN_TEXT, BACKGROUND_COLOR } from './constants';
+import { ALIGN_TEXT, HEADLINE_BLOCK_STYLE_MAPS } from './constants';
 import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
   ({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description }) => {
+    const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
     return (
-      <section className={`p-[50px] ${BACKGROUND_COLOR[bgColorHeadline]} ${className}`}>
+      <section className={`p-[50px] ${STYLE_MAPS.background} ${className}`}>
         {title && (
           <Heading
             headingType="h2"

package/src/components/Headline/constants.ts

@@ -7,8 +7,26 @@ export const ALIGN_TEXT: Record<AlignType, string> = {
   right: 'text-right',
 };
 
-export const BACKGROUND_COLOR: Record<BlockVersionWithTransparent, string> = {
-  transparent: 'bg-transparent',
-  primary: 'bg-white',
-  secondary: 'bg-primary-main',
+type StyleType = {
+  background: string;
+  text: string;
+  description: string;
+};
+
+export const HEADLINE_BLOCK_STYLE_MAPS: Record<BlockVersionWithTransparent, StyleType> = {
+  transparent: {
+    background: 'bg-transparent',
+    text: 'text-primary-text',
+    description: 'text-primary-text',
+  },
+  primary: {
+    background: 'bg-white',
+    text: 'text-primary-text',
+    description: 'text-primary-text',
+  },
+  secondary: {
+    background: 'bg-primary-main',
+    text: 'text-white',
+    description: 'text-white/80',
+  },
 };

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

@@ -18,79 +18,134 @@ const steps = [
 
 export default {
   default: (
-    <StepsBlock
-      context={context}
-      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-      description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
-      size="normal"
-      steps={steps}
-    />
-  ),
-  'only desc': (
-    <StepsBlock
-      context={context}
-      description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
-      size="normal"
-      steps={steps}
-    />
-  ),
-
-  small: (
-    <StepsBlock
-      context={context}
-      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-      size="small"
-      steps={steps}
-    />
-  ),
-
-  'small multi-options': (
-    <StepsBlock
-      context={context}
-      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-      description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
-      size="small"
-      steps={[
-        {
-          description: 'Оставьте онлайн-заявку на потребительский кредит',
-          icon: 'ClockIcon',
-        },
-        {
-          label: 'В случае одобрения',
-          icon: 'SignDocsIcon',
-        },
-        {
-          label: 'Заявка на кредит',
-          description: 'Оставьте онлайн-заявку на потребительский кредит',
-          icon: 'ComfortableCompIcon',
-        },
-        {
-          label: 'Получение наличных',
-          icon: 'ClockIcon',
-        },
-      ]}
-    />
+    <div className="container grid grid-cols-12">
+      <div className="col-span-12">
+        <StepsBlock
+          context={context}
+          title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+          description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
+          size="normal"
+          steps={steps}
+        />
+        <StepsBlock
+          context={context}
+          title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+          size="small"
+          steps={steps}
+        />
+        <StepsBlock
+          context={context}
+          title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+          description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
+          size="small"
+          steps={[
+            {
+              description: 'Оставьте онлайн-заявку на потребительский кредит',
+              icon: 'ClockIcon',
+            },
+            {
+              label: 'В случае одобрения',
+              icon: 'SignDocsIcon',
+            },
+            {
+              label: 'Заявка на кредит',
+              description: 'Оставьте онлайн-заявку на потребительский кредит',
+              icon: 'ComfortableCompIcon',
+            },
+            {
+              label: 'Получение наличных',
+              icon: 'ClockIcon',
+            },
+          ]}
+        />
+        <StepsBlock
+          context={context}
+          title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+          size="small"
+          steps={[
+            {
+              label: 'Заявка на кредит',
+              icon: 'EmptyWalletIcon',
+            },
+            {
+              label: 'В случае одобрения',
+              icon: 'PercentageSquareIcon',
+            },
+            {
+              label: 'Получение наличных',
+              icon: 'CalendarIcon',
+            },
+          ]}
+        />
+      </div>
+    </div>
   ),
 
-  'small icons': (
-    <StepsBlock
-      context={context}
-      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-      size="small"
-      steps={[
-        {
-          label: 'Заявка на кредит',
-          icon: 'EmptyWalletIcon',
-        },
-        {
-          label: 'В случае одобрения',
-          icon: 'PercentageSquareIcon',
-        },
-        {
-          label: 'Получение наличных',
-          icon: 'CalendarIcon',
-        },
-      ]}
-    />
+  secondary: (
+    <div className="container grid grid-cols-12">
+      <div className="col-span-12">
+        <StepsBlock
+          context={context}
+          title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+          description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
+          size="normal"
+          steps={steps}
+          version="secondary"
+        />
+        <StepsBlock
+          context={context}
+          title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+          size="small"
+          steps={steps}
+          version="secondary"
+        />
+        <StepsBlock
+          context={context}
+          title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+          description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
+          size="small"
+          steps={[
+            {
+              description: 'Оставьте онлайн-заявку на потребительский кредит',
+              icon: 'ClockIcon',
+            },
+            {
+              label: 'В случае одобрения',
+              icon: 'SignDocsIcon',
+            },
+            {
+              label: 'Заявка на кредит',
+              description: 'Оставьте онлайн-заявку на потребительский кредит',
+              icon: 'ComfortableCompIcon',
+            },
+            {
+              label: 'Получение наличных',
+              icon: 'ClockIcon',
+            },
+          ]}
+          version="secondary"
+        />
+        <StepsBlock
+          context={context}
+          title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+          size="small"
+          steps={[
+            {
+              label: 'Заявка на кредит',
+              icon: 'EmptyWalletIcon',
+            },
+            {
+              label: 'В случае одобрения',
+              icon: 'PercentageSquareIcon',
+            },
+            {
+              label: 'Получение наличных',
+              icon: 'CalendarIcon',
+            },
+          ]}
+          version="secondary"
+        />
+      </div>
+    </div>
   ),
 };