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

package/src/components/ProductBlock/ProductBlock.example.json

@@ -8,7 +8,11 @@
       "height": 234
     }
   },
-  "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+  "items": [
+    "Элемент списка 1",
+    "Элемент списка 2",
+    "Элемент списка 3"
+  ],
   "isDotted": true,
   "buttons": [
     {
@@ -20,11 +24,15 @@
   "benefits": [
     {
       "label": "Преимущество №1",
-      "icon": "ClockIcon"
+      "icon": {
+        "icon": "ClockIcon"
+      }
     },
     {
       "label": "Преимущество №2",
-      "icon": "SignDocsIcon"
+      "icon": {
+        "icon": "SignDocsIcon"
+      }
     }
   ]
 }

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

@@ -29,17 +29,17 @@ const benefits: Benefit[] = [
   {
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
-    icon: 'EmptyWalletIcon',
+    icon: { icon: 'EmptyWalletIcon' },
   },
   {
     label: 'От 16,9%',
     description: 'Ставка по кредиту',
-    icon: 'PercentageSquareIcon',
+    icon: { icon: 'PercentageSquareIcon' },
   },
   {
     label: 'До 5 лет',
     description: 'Срок кредитования',
-    icon: 'CalendarIcon',
+    icon: { icon: 'CalendarIcon' },
   },
 ];
 

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -29,21 +29,21 @@ const breadcrumbs = [
   },
 ];
 
-const benefits = [
+const benefits: Benefit[] = [
   {
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
-    icon: 'EmptyWalletIcon',
+    icon: { icon: 'EmptyWalletIcon' },
   },
   {
     label: 'От 16,9%',
     description: 'Ставка по кредиту',
-    icon: 'PercentageSquareIcon',
+    icon: { icon: 'PercentageSquareIcon' },
   },
   {
     label: 'До 5 лет',
     description: 'Срок кредитования',
-    icon: 'CalendarIcon',
+    icon: { icon: 'CalendarIcon' },
   },
 ];
 
@@ -85,7 +85,7 @@ export default {
         headingType="h2"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         breadcrumbs={breadcrumbs}
-        benefits={benefits as Benefit[]}
+        benefits={benefits}
         buttons={buttons}
         image={image}
       />
@@ -101,8 +101,8 @@ export default {
         version={'secondary'}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         breadcrumbs={breadcrumbs}
-        benefits={benefits as Benefit[]}
-        buttons={buttons as ButtonWithIconProps[]}
+        benefits={benefits}
+        buttons={buttons}
         image={image}
       />
     </div>

package/src/components/ProductBlock/ProductBlock.tsx

@@ -22,7 +22,7 @@ const breadcrumbsStyleMap: Record<BlockVersion, string> = {
 export const ProductBlock = JSX<ProductBlockProps>((props) => {
   const {
     context,
-    className,
+    className = '',
     breadcrumbs,
     version = 'primary',
     anchor = null,
@@ -33,9 +33,7 @@ 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}
     >
       {breadcrumbs?.length ? (

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -20,7 +20,10 @@ export type ProductBlockInnerContent = HeadingContent &
      */
     benefits?: Benefit[];
     version?: BlockVersion;
-    /** @title Буллиты */
+    /**
+     *  @title Буллиты
+     *  @default true
+     */
     isDotted?: boolean;
     /** @title Лейбл (моб.) */
     label?: string;
@@ -29,8 +32,6 @@ export type ProductBlockInnerContent = HeadingContent &
      * @hidden
      */
     textBlockClassName?: string;
-    /** @title Фоновый текст под иллюстрацией */
-    backgroundText?: string;
   };
 
 /**

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -2,7 +2,6 @@ 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 { BaseTile } from '../BaseTile/BaseTile';
@@ -26,7 +25,7 @@ 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}`}>
@@ -36,7 +35,10 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             buttons={getButtons(context, buttons)}
           >
             {description && (
-              <Description className="mt-4 max-w-[600px]" description={description} />
+              <Description
+                className={`mt-[18px] max-w-[600px] text-title-new-sm font-light ${textColor}`}
+                description={description}
+              />
             )}
             {benefits?.filter((items) => items.label)?.length ? (
               <div className="flex gap-6 mt-6">
@@ -45,7 +47,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             ) : null}
             {items?.length ? (
               <List
-                className="mt-5 text-m-base"
+                className="mt-5 text-title-new-sm font-light"
                 items={items}
                 itemClassName="mb-[10px]"
                 version={version}
@@ -61,14 +63,9 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
 );
 
 const getTitle = (title, headingType, textColor) => {
+  const Tag = headingType;
   return (
-    title && (
-      <Heading
-        headingType={headingType}
-        title={title}
-        className={`whitespace-pre-wrap max-w-[600px] ${textColor}`}
-      />
-    )
+    title && <Tag className={`font-sans font-medium m-0 text-title-xl ${textColor}`}>{title}</Tag>
   );
 };
 

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,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 benefitIconBgStyleMap: Record<BlockVersion, string> = {
@@ -18,15 +18,15 @@ 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
+      {benefit.icon ? (
+        <Img
           className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${benefitIconBgStyleMap[version]}`}
-          name={benefit.icon}
+          image={benefit.icon}
           width="24"
           height="24"
           asSVG
         />
-      )}
+      ) : null}
       <div className="flex gap-1 flex-col h-full max-w-[149px]">
         <div className={`font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`}>
           {benefit.label}

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',
             },
           },
           {