@redneckz/wildless-cms-uni-blocks 0.3.32 → 0.3.35

package/src/components/ProductBlock/ProductBlock.tsx

@@ -6,6 +6,7 @@ import { Breadcrumb } from '../../ui-kit/Breadcrumb';
 import { joinList } from '../../utils/joinList';
 import type { ProductBlockContent } from './ProductBlockContent';
 import { ProductBlockInner } from './ProductBlockInner';
+import { renderBackwardButton } from './renderBackwardButton';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
@@ -22,7 +23,7 @@ const breadcrumbsStyleMap: Record<BlockVersion, string> = {
 export const ProductBlock = JSX<ProductBlockProps>((props) => {
   const {
     context,
-    className,
+    className = '',
     breadcrumbs,
     version = 'primary',
     anchor = null,
@@ -33,11 +34,10 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
 
   return (
     <section
-      className={`font-sans pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${
-        className || ''
-      } ${productBlockStyleMap[version]}`}
+      className={`font-sans pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap[version]} ${className}`}
       id={anchor}
     >
+      {renderBackwardButton('Все дебетовые карты', version, 'mb-10')}
       {breadcrumbs?.length ? (
         <div className="text-xs mb-6">
           {joinList(<span className={`mx-2 ${breadcrumbsStyleMap[version]}`}>/</span>)(

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,6 +1,6 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonContent, ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -20,7 +20,10 @@ export type ProductBlockInnerContent = HeadingContent &
      */
     benefits?: Benefit[];
     version?: BlockVersion;
-    /** @title Буллиты */
+    /**
+     *  @title Буллиты
+     *  @default true
+     */
     isDotted?: boolean;
     /** @title Лейбл (моб.) */
     label?: string;
@@ -29,8 +32,8 @@ export type ProductBlockInnerContent = HeadingContent &
      * @hidden
      */
     textBlockClassName?: string;
-    /** @title Фоновый текст под иллюстрацией */
-    backgroundText?: string;
+    /** @title Текст кнопки возврата */
+    backwardButton?: ButtonProps;
   };
 
 /**

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -2,9 +2,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Description } from '../../ui-kit/Description/Description';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTile } from '../BaseTile/BaseTile';
 import type { ProductBlockInnerContent } from './ProductBlockContent';
 import { renderBenefit } from './renderBenefit';
@@ -26,17 +26,20 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     isDotted = true,
     textBlockClassName = '',
   }) => {
-    const textColor = version === 'secondary' ? 'text-white' : '';
+    const textColor = version === 'secondary' ? 'text-white' : 'text-primary-text';
     return (
       <div className={`flex grow justify-between items-stretch ${className}`}>
         <div className={`flex flex-col ${textBlockClassName}`}>
           <BaseTile
             context={context}
-            title={getTitle(title, headingType, textColor)}
+            title={getTitle(title, headingType)}
             buttons={getButtons(context, buttons)}
           >
             {description && (
-              <Description className="mt-4 max-w-[600px]" description={description} />
+              <Description
+                className={`mt-4 max-w-[600px] text-md font-light ${textColor}`}
+                description={description}
+              />
             )}
             {benefits?.filter((items) => items.label)?.length ? (
               <div className="flex gap-6 mt-6">
@@ -45,9 +48,9 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             ) : null}
             {items?.length ? (
               <List
-                className="mt-5 text-m-base"
+                className="mt-5 text-title-2xs font-light"
                 items={items}
-                itemClassName="mb-[10px]"
+                itemClassName="mb-[7px]"
                 version={version}
                 isDotted={isDotted}
               />
@@ -60,13 +63,13 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   },
 );
 
-const getTitle = (title, headingType, textColor) => {
+const getTitle = (title, headingType) => {
   return (
     title && (
       <Heading
         headingType={headingType}
         title={title}
-        className={`whitespace-pre-wrap max-w-[600px] ${textColor}`}
+        className="whitespace-pre-wrap max-w-[600px]"
       />
     )
   );
@@ -74,6 +77,6 @@ const getTitle = (title, headingType, textColor) => {
 
 const getButtons = (context, buttons) => {
   return buttons?.length ? (
-    <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+    <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-4" />
   ) : null;
 };

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -0,0 +1,34 @@
+import { Img } from '../../ui-kit/Img/Img';
+import { Button } from '../../ui-kit/Button/Button';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+const backwardBgStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-primary-main',
+  secondary: 'bg-white',
+};
+
+const backwardIconStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-white',
+  secondary: 'text-primary-text',
+};
+
+export function renderBackwardButton(text: string, version: BlockVersion, className: string) {
+  return (
+    <div className={`flex items-center ${className}`}>
+      <Button
+        rounded
+        className={`w-12 h-12 min-h-12 max-h-12 flex items-center justify-center mr-3 ${backwardBgStyleMap[version]}`}
+      >
+        <Img
+          className={`w-4 h-4 min-w-4 min-h-4 rounded-full box-border ${backwardIconStyleMap[version]}`}
+          image={{ icon: 'ArrowLeftIcon' }}
+          color="none"
+          width="24"
+          height="24"
+          asSVG
+        />
+      </Button>
+      {text ? <span className="text-m-md">{text}</span> : null}
+    </div>
+  );
+}

package/src/components/ProductBlock/renderBenefit.mobile.tsx

@@ -1,5 +1,5 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 const benefitTitleStyleMap: Record<BlockVersion, string> = {
@@ -14,16 +14,16 @@ const benefitDescStyleMap: Record<BlockVersion, string> = {
 export function renderBenefit(benefit: Benefit, i: number, version: BlockVersion) {
   return (
     <div key={String(i)} className="flex gap-3 items-center mb-2.5 last:mb-0">
-      {benefit.icon && (
-        <Icon
+      {benefit.icon ? (
+        <Img
           className="w-6 h-6 rounded-full box-border"
-          name={benefit.icon}
+          image={benefit.icon}
           width="24"
           height="24"
           asSVG
           color={version}
         />
-      )}
+      ) : null}
       <div className={`font-medium text-m-title-xs m-0 ${benefitTitleStyleMap[version]}`}>
         {benefit.label}
       </div>

package/src/components/ProductBlock/renderBenefit.tsx

@@ -1,9 +1,9 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 const benefitIconBgStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-main',
+  primary: 'bg-primary-main',
   secondary: 'bg-white/30',
 };
 const benefitTitleStyleMap: Record<BlockVersion, string> = {
@@ -18,21 +18,21 @@ const benefitDescStyleMap: Record<BlockVersion, string> = {
 export function renderBenefit(benefit: Benefit, i: number, version: string) {
   return (
     <div key={String(i)} className="flex gap-4 items-center">
-      {benefit.icon && (
-        <Icon
-          className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${benefitIconBgStyleMap[version]}`}
-          name={benefit.icon}
+      {benefit.icon ? (
+        <Img
+          className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border text-white ${benefitIconBgStyleMap[version]}`}
+          image={benefit.icon}
           width="24"
           height="24"
           asSVG
         />
-      )}
-      <div className="flex gap-1 flex-col h-full max-w-[149px]">
+      ) : null}
+      <div className="flex gap-0.5 flex-col h-full max-w-[149px]">
         <div className={`font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`}>
           {benefit.label}
         </div>
         {benefit.description && (
-          <div className={`font-normal text-sm ${benefitDescStyleMap[version]}`}>
+          <div className={`font-normal text-m-md ${benefitDescStyleMap[version]}`}>
             {benefit.description}
           </div>
         )}

package/src/components/ProductGallery/ProductGallery.example.json

@@ -3,7 +3,7 @@
     {
       "nav": {
         "title": "Заголовок",
-        "desc": "Описание"
+        "description": "Описание"
       },
       "productBlock": {
         "title": "Продуктовая галерея",
@@ -15,6 +15,27 @@
           }
         },
         "description": "Описание",
+        "isDotted": "true",
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+        "version": "primary"
+      }
+    },
+    {
+      "nav": {
+        "title": "Заголовок",
+        "description": "Описание"
+      },
+      "productBlock": {
+        "title": "Продуктовая галерея",
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 234,
+            "height": 234
+          }
+        },
+        "description": "Описание",
+        "isDotted": "true",
         "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
         "version": "primary"
       }

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -1,7 +1,7 @@
 import { context } from '../../setup-fixture';
-
-import type { Picture } from '../../model/Picture';
 import { ProductGallery } from './ProductGallery';
+import type { Picture } from '../../model/Picture';
+import type { ProductSlide } from './ProductGalleryContent';
 
 const moneyImage: Picture = {
   src: 'money-1.png',
@@ -31,111 +31,113 @@ const creditCard: Picture = {
   },
 };
 
+const slides: ProductSlide[] = [
+  {
+    nav: {
+      title: 'Деньги на любые цели',
+      description: 'Ставка от 12,5% годовых на срок до 5 лет',
+    },
+    productBlock: {
+      title: 'Ставка от 12,5% годовых на срок до 5 лет!',
+      headingType: 'h2',
+      items: [
+        'Потребительский кредит по специальной процентной ставке',
+        'Получите деньги без залога и поручительства',
+        'Кредитный лимит до 5 млн рублей',
+      ],
+      buttons: [
+        {
+          href: 'https://rshb.ru',
+          text: 'Подробнее',
+          target: '_blank',
+          version: 'primary',
+        },
+      ],
+      version: 'primary',
+      image: moneyImage,
+    },
+  },
+  {
+    nav: {
+      title: 'Для людей в возрасте',
+      description: 'Ставка от 12,5% годовых на срок до 3 лет',
+    },
+    productBlock: {
+      title: 'Ставка от 12,5% годовых на срок до 3 лет!',
+      headingType: 'h2',
+      items: [
+        'Потребительский кредит по специальной процентной ставке',
+        'Получите деньги без залога и поручительства',
+        'Кредитный лимит до 5 млн рублей',
+      ],
+      buttons: [
+        {
+          href: 'https://rshb.ru',
+          text: 'Подробнее',
+          target: '_blank',
+          version: 'primary',
+        },
+      ],
+      version: 'secondary',
+      image: worker,
+    },
+  },
+  {
+    nav: {
+      title: 'Выгодно покупать',
+      description: 'Дополнительные бонусные баллы за покупки',
+    },
+    productBlock: {
+      title: 'Дополнительные бонусные баллы за покупки!',
+      headingType: 'h2',
+      items: [
+        'Потребительский кредит по специальной процентной ставке',
+        'Получите деньги без залога и поручительства',
+        'Кредитный лимит до 5 млн рублей',
+      ],
+      buttons: [
+        {
+          href: 'https://rshb.ru',
+          text: 'Подробнее',
+          target: '_blank',
+          version: 'primary',
+        },
+      ],
+      version: 'primary',
+      image: creditCard,
+    },
+  },
+  {
+    nav: {
+      title: 'Карты Unionpay',
+      description: 'Кэшбэк до 20% у партнеров',
+    },
+    productBlock: {
+      title: 'Карты Unionpay',
+      headingType: 'h2',
+      items: [
+        'Потребительский кредит по специальной процентной ставке',
+        'Получите деньги без залога и поручительства',
+        'Кредитный лимит до 5 млн рублей',
+      ],
+      buttons: [
+        {
+          href: 'https://rshb.ru',
+          text: 'Подробнее',
+          target: '_blank',
+          version: 'primary',
+        },
+      ],
+      version: 'secondary',
+      image: creditCard,
+    },
+  },
+];
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <ProductGallery
-        className="col-span-12"
-        context={context}
-        slides={[
-          {
-            nav: {
-              title: 'Деньги на любые цели',
-              description: 'Ставка от 12,5% годовых на срок до 5 лет',
-            },
-            productBlock: {
-              title: 'Ставка от 12,5% годовых на срок до 5 лет!',
-              headingType: 'h2',
-              items: [
-                'Потребительский кредит по специальной процентной ставке',
-                'Получите деньги без залога и поручительства',
-                'Кредитный лимит до 5 млн рублей',
-              ],
-              buttons: [
-                {
-                  href: 'https://rshb.ru',
-                  text: 'Подробнее',
-                  target: '_blank',
-                  version: 'primary',
-                },
-              ],
-              image: moneyImage,
-            },
-          },
-          {
-            nav: {
-              title: 'Для людей в возрасте',
-              description: 'Ставка от 12,5% годовых на срок до 3 лет',
-            },
-            productBlock: {
-              title: 'Ставка от 12,5% годовых на срок до 3 лет!',
-              headingType: 'h2',
-              items: [
-                'Потребительский кредит по специальной процентной ставке',
-                'Получите деньги без залога и поручительства',
-                'Кредитный лимит до 5 млн рублей',
-              ],
-              buttons: [
-                {
-                  href: 'https://rshb.ru',
-                  text: 'Подробнее',
-                  target: '_blank',
-                  version: 'primary',
-                },
-              ],
-              image: worker,
-            },
-          },
-          {
-            nav: {
-              title: 'Выгодно покупать',
-              description: 'Дополнительные бонусные баллы за покупки',
-            },
-            productBlock: {
-              title: 'Дополнительные бонусные баллы за покупки!',
-              headingType: 'h2',
-              items: [
-                'Потребительский кредит по специальной процентной ставке',
-                'Получите деньги без залога и поручительства',
-                'Кредитный лимит до 5 млн рублей',
-              ],
-              buttons: [
-                {
-                  href: 'https://rshb.ru',
-                  text: 'Подробнее',
-                  target: '_blank',
-                  version: 'primary',
-                },
-              ],
-              image: creditCard,
-            },
-          },
-          {
-            nav: {
-              title: 'Карты Unionpay',
-              description: 'Кэшбэк до 20% у партнеров',
-            },
-            productBlock: {
-              title: 'Карты Unionpay',
-              headingType: 'h2',
-              items: [
-                'Потребительский кредит по специальной процентной ставке',
-                'Получите деньги без залога и поручительства',
-                'Кредитный лимит до 5 млн рублей',
-              ],
-              buttons: [
-                {
-                  href: 'https://rshb.ru',
-                  text: 'Подробнее',
-                  target: '_blank',
-                  version: 'primary',
-                },
-              ],
-              image: creditCard,
-            },
-          },
-        ]}
-      />
+      <ProductGallery className="col-span-12" context={context} slides={slides} />
     </div>
   ),
 };

package/src/components/ProductGallery/ProductGallery.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { ProductGalleryBlock } from './ProductGalleryBlock';
 import type { UniBlockProps } from '../../types';
-import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
-import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 import type { ProductGalleryContent } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
@@ -22,7 +21,9 @@ export const ProductGallery = JSX<ProductGalleryProps>(
           style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
           role="list"
         >
-          {galleryBlocks.map((_, i) => renderProductBlock(_, i, context))}
+          {galleryBlocks.map((_, i) => (
+            <ProductGalleryBlock key={String(i)} context={context} block={_} />
+          ))}
         </div>
 
         <div className="flex">
@@ -41,20 +42,6 @@ export const ProductGallery = JSX<ProductGalleryProps>(
   },
 );
 
-function renderProductBlock(block: ProductBlockInnerContent, i: number, context) {
-  return (
-    <section key={String(i)} className="flex grow-0 shrink-0 basis-full" role="listitem">
-      <div className="p-10 flex grow">
-        <ProductBlockInner
-          className="pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem]"
-          context={context}
-          {...block}
-        />
-      </div>
-    </section>
-  );
-}
-
 function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
   const isActiveBtn = i === activeSlideIndex;
   const progressBarClassName = isActiveBtn ? 'animate-slide' : '';

package/src/components/ProductGallery/ProductGalleryBlock.mobile.tsx

@@ -1,8 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
 import { HeadingType } from '../../ui-kit/Heading/HeadingContent';
-import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import type { UniBlockProps } from '../../types';
+
+const productGalleryStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
 
 export interface ProductGalleryBlockProps extends UniBlockProps {
   headingType?: HeadingType;
@@ -10,9 +16,13 @@ export interface ProductGalleryBlockProps extends UniBlockProps {
 }
 
 export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
-  ({ block, headingType, context }) => {
+  ({ block, headingType, context, className = '' }) => {
+    const version = block?.version ?? 'primary';
+
     return (
-      <section className="flex grow-0 shrink-0 basis-full px-4 pt-6">
+      <section
+        className={`flex grow-0 shrink-0 basis-full px-4 pt-6 ${productGalleryStyleMap[version]} ${className}`}
+      >
         <div className="flex grow">
           <ProductBlockInner context={context} headingType={headingType || 'h2'} {...block} />
         </div>

package/src/components/ProductGallery/ProductGalleryBlock.tsx

@@ -1,8 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
 import { HeadingType } from '../../ui-kit/Heading/HeadingContent';
-import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import type { UniBlockProps } from '../../types';
+
+const productGalleryStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
 
 export interface ProductGalleryBlockProps extends UniBlockProps {
   headingType?: HeadingType;
@@ -10,9 +16,14 @@ export interface ProductGalleryBlockProps extends UniBlockProps {
 }
 
 export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
-  ({ block, headingType, context }) => {
+  ({ block, headingType, context, className = '' }) => {
+    const version = block?.version ?? 'primary';
+
     return (
-      <section className="flex grow-0 shrink-0 basis-full" role="listitem">
+      <section
+        className={`flex grow-0 shrink-0 basis-full ${productGalleryStyleMap[version]} ${className}`}
+        role="listitem"
+      >
         <div className="p-10 flex grow">
           <ProductBlockInner
             className="pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem]"

package/src/components/ProductGalleryGreen/ProductGalleryGreen.fixture.tsx

@@ -69,11 +69,11 @@ export default {
             },
             productBlock: {
               title: 'Кредит по одному документу',
+              description: 'Ставка от 5,5% годовых',
               headingType: 'h2',
               items,
               buttons,
               image: percentImage,
-              backgroundText: '3,6',
             },
           },
           {
@@ -133,12 +133,11 @@ export default {
             },
             productBlock: {
               title: 'Кредит по одному документу',
-              // description: 'Кредит наличными без залога и поручительства, только по паспорту',
+              description: 'Кредит наличными без залога и поручительства, только по паспорту',
               headingType: 'h2',
               items,
               buttons: buttonsSecondary,
               image: percentImage,
-              backgroundText: '3,6',
             },
           },
           {