@redneckz/wildless-cms-uni-blocks 0.3.92 → 0.3.93

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

@@ -1,4 +1,4 @@
-const STEPS_BLOCK_STYLE_MAPS = {
+export const STEPS_BLOCK_STYLE_MAPS = {
     primary: {
         background: 'bg-white',
         title: 'text-primary-text',
@@ -16,5 +16,4 @@ const STEPS_BLOCK_STYLE_MAPS = {
         iconConnector: 'bg-white',
     },
 };
-export const getStyleMap = (version) => STEPS_BLOCK_STYLE_MAPS[version];
 //# sourceMappingURL=StepsBlockStyleMaps.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepsBlockStyleMaps.js","sourceRoot":"","sources":["../../../src/components/StepsBlock/StepsBlockStyleMaps.ts"],"names":[],"mappings":"AAWA,MAAM,sBAAsB,GAAoC;IAC9D,OAAO,EAAE;QACP,UAAU,EAAE,UAAU;QACtB,KAAK,EAAE,mBAAmB;QAC1B,WAAW,EAAE,qBAAqB;QAClC,QAAQ,EAAE,qBAAqB;QAC/B,cAAc,EAAE,iBAAiB;QACjC,aAAa,EAAE,oBAAoB;KACpC;IACD,SAAS,EAAE;QACT,UAAU,EAAE,iBAAiB;QAC7B,KAAK,EAAE,YAAY;QACnB,WAAW,EAAE,eAAe;QAC5B,QAAQ,EAAE,YAAY;QACtB,cAAc,EAAE,aAAa;QAC7B,aAAa,EAAE,UAAU;KAC1B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAqB,EAAa,EAAE,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC"}
+{"version":3,"file":"StepsBlockStyleMaps.js","sourceRoot":"","sources":["../../../src/components/StepsBlock/StepsBlockStyleMaps.ts"],"names":[],"mappings":"AAWA,MAAM,CAAC,MAAM,sBAAsB,GAAoC;IACrE,OAAO,EAAE;QACP,UAAU,EAAE,UAAU;QACtB,KAAK,EAAE,mBAAmB;QAC1B,WAAW,EAAE,qBAAqB;QAClC,QAAQ,EAAE,qBAAqB;QAC/B,cAAc,EAAE,iBAAiB;QACjC,aAAa,EAAE,oBAAoB;KACpC;IACD,SAAS,EAAE;QACT,UAAU,EAAE,iBAAiB;QAC7B,KAAK,EAAE,YAAY;QACnB,WAAW,EAAE,eAAe;QAC5B,QAAQ,EAAE,YAAY;QACtB,cAAc,EAAE,aAAa;QAC7B,aAAa,EAAE,UAAU;KAC1B;CACF,CAAC"}

package/mobile/src/components/ExchangeRateTile/renderButton.tsx

@@ -0,0 +1,10 @@
+import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+export function renderButton(button: ButtonProps) {
+  return (
+    <Button className="py-4 mr-1" version={button?.version} href={button?.href} target="_blank">
+      {button?.text}
+    </Button>
+  );
+}

package/mobile/src/components/StepsBlock/StepsBlock.example.json

@@ -14,6 +14,11 @@
           "height": 48
         },
         "format": "webp"
+      },
+      "button": {
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary"
       }
     },
     {
@@ -25,6 +30,11 @@
           "height": 48
         },
         "format": "webp"
+      },
+      "button": {
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary"
       }
     },
     {
@@ -36,6 +46,11 @@
           "height": 48
         },
         "format": "webp"
+      },
+      "button": {
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary"
       }
     }
   ],

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

@@ -6,7 +6,7 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
-import { getStyleMap } from './StepsBlockStyleMaps';
+import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
@@ -30,7 +30,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
     size = 'normal',
     version = 'primary',
   }) => {
-    const styleMap = getStyleMap(version);
+    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
 
     return (
       <section
@@ -62,7 +62,7 @@ const renderStepTitle =
   (step: Step, i: number, steps: Step[]) => {
     const isLastStep = steps.length - 1 === i;
     const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
-    const styleMap = getStyleMap(version);
+    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
 
     return (
       <div key={String(i)}>
@@ -93,7 +93,7 @@ const renderStepTitle =
   };
 
 const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step, i: number) => {
-  const styleMap = getStyleMap(version);
+  const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
   const iconAreaSize = STEPS_SIZE_MAP[size];
 
   const iconSize = size === 'normal' ? '38' : '27';

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

@@ -1,7 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import type { SizeVersion } from '../../model/SizeVersion';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
  * @title Шаг
@@ -23,7 +23,8 @@ export interface Step {
    * }
    */
   icon?: Picture;
-  button?: ButtonProps;
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
 }
 
 /**
@@ -45,7 +46,8 @@ export interface StepsBlockContent {
    * @maxItems 4
    */
   steps?: Step[];
-  button?: ButtonProps;
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
   /**
    * @title Размер шагов (моб.)
    * @default normal

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

@@ -9,7 +9,7 @@ export type StyleType = {
   iconConnector: string;
 };
 
-const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
+export const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
   primary: {
     background: 'bg-white',
     title: 'text-primary-text',
@@ -27,5 +27,3 @@ const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
     iconConnector: 'bg-white',
   },
 };
-
-export const getStyleMap = (version: BlockVersion): StyleType => STEPS_BLOCK_STYLE_MAPS[version];

package/mobile/src/components/__snapshots__/Blocks.spec.tsx.snap

@@ -693,7 +693,7 @@ exports[`Blocks Placeholder should render block "Placeholder" without content 1`
 
 exports[`Blocks ProductBlock should render block "ProductBlock" without content 1`] = `
 <section
-  class="font-sans overflow-hidden p-[50px] box-border min-h-[528px] bg-white text-primary-text "
+  class="font-sans overflow-hidden p-[50px] flex flex-col box-border min-h-[528px] bg-white text-primary-text "
 >
   <div
     class="flex grow justify-between items-stretch h-full "

package/package.json

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

package/src/components/ExchangeRateTile/renderButton.tsx

@@ -0,0 +1,10 @@
+import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+export function renderButton(button: ButtonProps) {
+  return (
+    <Button className="py-4 mr-1" version={button?.version} href={button?.href} target="_blank">
+      {button?.text}
+    </Button>
+  );
+}

package/src/components/ProductBlock/ProductBlock.tsx

@@ -36,7 +36,7 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
   return (
     <BlockWrapper
       context={context}
-      className={`font-sans overflow-hidden p-[50px] box-border min-h-[528px] ${productBlockStyleMap[version]} ${className}`}
+      className={`font-sans overflow-hidden p-[50px] flex flex-col box-border min-h-[528px] ${productBlockStyleMap[version]} ${className}`}
       {...otherProps}
     >
       {backwardButton?.text

package/src/components/StepsBlock/StepsBlock.example.json

@@ -14,6 +14,11 @@
           "height": 48
         },
         "format": "webp"
+      },
+      "button": {
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary"
       }
     },
     {
@@ -25,6 +30,11 @@
           "height": 48
         },
         "format": "webp"
+      },
+      "button": {
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary"
       }
     },
     {
@@ -36,6 +46,11 @@
           "height": 48
         },
         "format": "webp"
+      },
+      "button": {
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary"
       }
     }
   ],

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

@@ -28,6 +28,7 @@ export default {
         context={context}
         title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
         steps={steps.slice(0, 3)}
+        version="secondary"
       />
     </div>
   ),
@@ -43,19 +44,19 @@ export default {
             label: 'В мобильном приложении или интернет-банке',
             description: 'Для всех клиентов Россельхозбанка',
             icon: { icon: 'SignDocsIcon' },
-            button: { text: 'Войти в интернет-банк', href: 'https://www.rshb.ru/' },
+            button: { text: 'Войти в интернет-банк' },
           },
           {
             label: 'Через Госуслуги',
             description: 'При наличии данных в Единой биометрической системе',
             icon: { icon: 'ClockIcon' },
-            button: { text: 'Оформить', href: 'https://www.rshb.ru/' },
+            button: { text: 'Оформить' },
           },
           {
             label: 'В офисах Россельхозбанка',
             description: 'Откройте вклад',
             icon: { icon: 'ComfortableCompIcon' },
-            button: { text: 'Офисы на карте', href: 'https://www.rshb.ru/' },
+            button: { text: 'Офисы на карте' },
           },
         ]}
       />

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

@@ -6,7 +6,7 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
-import { getStyleMap } from './StepsBlockStyleMaps';
+import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
@@ -30,7 +30,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
     size = 'normal',
     version = 'primary',
   }) => {
-    const styleMap = getStyleMap(version);
+    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
 
     return (
       <section
@@ -62,7 +62,7 @@ const renderStepTitle =
   (step: Step, i: number, steps: Step[]) => {
     const isLastStep = steps.length - 1 === i;
     const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
-    const styleMap = getStyleMap(version);
+    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
 
     return (
       <div key={String(i)}>
@@ -93,7 +93,7 @@ const renderStepTitle =
   };
 
 const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step, i: number) => {
-  const styleMap = getStyleMap(version);
+  const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
   const iconAreaSize = STEPS_SIZE_MAP[size];
 
   const iconSize = size === 'normal' ? '38' : '27';

package/src/components/StepsBlock/StepsBlock.tsx

@@ -1,5 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../types';
+import type { HandlerDecorator, Router } from '../ContentPage/ContentPageContext';
+import type { BlockVersion } from '../../model/BlockVersion';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
@@ -7,26 +10,32 @@ import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
 import { joinList } from '../../utils/joinList';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 import type { StyleType } from './StepsBlockStyleMaps';
-import { getStyleMap } from './StepsBlockStyleMaps';
+import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
 
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
+const getLineOpacity = (showLines: boolean) => (showLines ? '' : 'opacity-0');
+
 export const StepsBlock = JSX<StepsBlockProps>(
   ({
     className = '',
-    title,
     showLines = true,
     steps = [],
     button,
     version = 'primary',
+    context,
     ...rest
   }) => {
-    const styleMap = getStyleMap(version);
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
+
+    const { title } = rest;
+    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
     const shortGaps = steps.length > 3;
-    const stepGap = shortGaps ? 'gap-x-3' : 'gap-x-[101px]';
-    const lineOpacity = showLines ? '' : 'opacity-0';
+    const lineOpacity = getLineOpacity(showLines);
+    const titleMargin = title ? 'mt-9' : '';
 
     return (
       <BlockWrapper
@@ -38,30 +47,38 @@ export const StepsBlock = JSX<StepsBlockProps>(
           styleMap.title,
           className,
         ].join(' ')}
+        context={context}
         {...rest}
       >
         {title ? (
-          <Heading
-            headingType="h3"
-            as="h2"
-            className="max-w-[47rem] text-center mb-9"
-            title={title}
-          />
+          <Heading headingType="h2" className="max-w-[752px] text-center" title={title} />
         ) : null}
         {steps?.length ? (
-          <div className="box-border">
+          <div className={`box-border ${titleMargin}`}>
             <div className="flex items-center px-[88px]">
               {joinList(<div className={`h-0.5 w-full bg-secondary-light ${lineOpacity}`} />)(
                 steps.map(renderStepIcon(styleMap)),
               )}
             </div>
-            <div className={`flex justify-between whitespace-pre-line ${stepGap}`}>
-              {steps.map(renderStepTitle(styleMap, Boolean(button?.text)))}
+            <div className={`flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`}>
+              {steps.map(
+                renderStepTitle({
+                  styleMap,
+                  isMainButton: Boolean(button?.text),
+                  version,
+                  router,
+                  handlerDecorator,
+                }),
+              )}
             </div>
           </div>
         ) : null}
         {button?.text ? (
-          <Button className="mt-8 w-full max-w-[240px]" version="primary" {...button} />
+          <Button
+            className="mt-8 w-full max-w-[240px]"
+            version="primary"
+            {...useLink({ router, handlerDecorator }, button)}
+          />
         ) : null}
       </BlockWrapper>
     );
@@ -74,7 +91,8 @@ const renderStepIcon =
     return (
       <div key={String(i)} className="flex flex-col items-center text-center">
         <div
-          className={`h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center ${styleMap.iconBackground}`}
+          className={`h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 
+            ${styleMap.iconBackground} ${styleMap.title}`}
         >
           {checkIsIconRenderable(icon) ? (
             <Img image={icon} width="48" height="48" asSVG />
@@ -86,29 +104,46 @@ const renderStepIcon =
     );
   };
 
-const renderStepTitle = (styleMap: StyleType, isMainButton: boolean) => (step: Step, i: number) => {
-  return (
-    <div
-      key={String(i)}
-      className="flex flex-col items-center justify-between text-center w-[276px] overflow-hidden"
-    >
-      <div>
-        {step.label ? <div className="text-xl m-0 mt-4">{step.label}</div> : null}
-        {step.description ? (
-          <div className={`text-l ${styleMap.description} ${step.label ? 'mt-2' : 'mt-4'}`}>
+const renderStepTitle =
+  ({
+    styleMap,
+    isMainButton,
+    version,
+    router,
+    handlerDecorator,
+  }: {
+    styleMap: StyleType;
+    isMainButton: boolean;
+    version: BlockVersion;
+    router: Router;
+    handlerDecorator?: HandlerDecorator;
+  }) =>
+  (step: Step, i: number) => {
+    const additionalMarginClass = step?.label ? 'mt-2' : 'mt-4';
+
+    return (
+      <div
+        key={String(i)}
+        className="flex flex-col items-center justify-between text-center relative w-[276px] 
+        whitespace-pre-line overflow-hidden"
+      >
+        {step?.label ? (
+          <div className="font-normal text-xl-light m-0 mt-4">{step.label}</div>
+        ) : null}
+        {step?.description ? (
+          <div className={`font-light text-base ${styleMap.description} ${additionalMarginClass}`}>
             {step.description}
           </div>
         ) : null}
+        {step.button?.text && !isMainButton ? (
+          <Button
+            className="box-border mt-8 py-3 h-12 w-full max-w-[240px]"
+            {...useLink({ router, handlerDecorator }, step.button)}
+            version={version}
+          >
+            {step.button.text}
+          </Button>
+        ) : null}
       </div>
-      {step?.button?.text && !isMainButton ? (
-        <Button
-          className="mt-8 py-4 w-full max-w-[240px]"
-          version="primary"
-          href={step?.button?.href}
-        >
-          {step.button.text}
-        </Button>
-      ) : null}
-    </div>
-  );
-};
+    );
+  };

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,7 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import type { SizeVersion } from '../../model/SizeVersion';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
  * @title Шаг
@@ -23,7 +23,8 @@ export interface Step {
    * }
    */
   icon?: Picture;
-  button?: ButtonProps;
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
 }
 
 /**
@@ -45,7 +46,8 @@ export interface StepsBlockContent {
    * @maxItems 4
    */
   steps?: Step[];
-  button?: ButtonProps;
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
   /**
    * @title Размер шагов (моб.)
    * @default normal

package/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -9,7 +9,7 @@ export type StyleType = {
   iconConnector: string;
 };
 
-const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
+export const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
   primary: {
     background: 'bg-white',
     title: 'text-primary-text',
@@ -27,5 +27,3 @@ const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
     iconConnector: 'bg-white',
   },
 };
-
-export const getStyleMap = (version: BlockVersion): StyleType => STEPS_BLOCK_STYLE_MAPS[version];

package/src/components/__snapshots__/Blocks.spec.tsx.snap

@@ -693,7 +693,7 @@ exports[`Blocks Placeholder should render block "Placeholder" without content 1`
 
 exports[`Blocks ProductBlock should render block "ProductBlock" without content 1`] = `
 <section
-  class="font-sans overflow-hidden p-[50px] box-border min-h-[528px] bg-white text-primary-text "
+  class="font-sans overflow-hidden p-[50px] flex flex-col box-border min-h-[528px] bg-white text-primary-text "
 >
   <div
     class="flex grow justify-between items-stretch h-full "