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

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>
   ),
 };

package/src/components/StepsBlock/StepsBlock.mobile.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/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
 }