@redneckz/wildless-cms-uni-blocks 0.3.31 → 0.3.34

package/src/components/PictureText/PictureText.tsx

@@ -2,25 +2,40 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import type { PictureTextContent } from './PictureTextContent';
 
+import { BlockVersion } from '../../model/BlockVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
+const pictureTextStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
 export const PictureText = JSX<PictureTextProps>(
-  ({ className = '', title, image, benefits, anchor = null }) => {
+  ({
+    className = '',
+    title,
+    image,
+    benefits,
+    version = 'primary',
+    directionRight = false,
+    anchor = null,
+  }) => {
     return (
       <section
-        className={`relative font-sans text-primary-text bg-white p-14 ${className}`}
+        className={`relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`}
         id={anchor}
       >
         <Heading headingType="h2" className="text-center" title={title} />
         <div className={'flex justify-center mt-9'}>
-          {image?.src && <Img className="mr-6" image={image} />}
+          {image?.src && <Img className={directionRight ? 'order-2 ml-6' : 'mr-6'} image={image} />}
           {benefits?.length ? (
-            <div className="flex flex-col">{benefits.map(renderBenefit)}</div>
+            <div className="flex flex-col">
+              {benefits.map((_, i) => renderBenefit(_, i, version))}
+            </div>
           ) : null}
         </div>
       </section>
@@ -28,24 +43,34 @@ export const PictureText = JSX<PictureTextProps>(
   },
 );
 
-function renderBenefit(benefit: Benefit, i: number) {
+function renderBenefit(benefit: Benefit, i: number, version: string) {
   return (
     <div key={String(i)} className="flex flex-row mb-8">
-      {benefit.icon && (
-        <Icon
+      {benefit.icon ? (
+        <Img
           className="w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]"
-          name={benefit.icon}
+          image={benefit.icon}
           width="48"
           height="48"
           asSVG
         />
-      )}
+      ) : null}
       <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
         {benefit.label && (
-          <div className="font-medium text-primary-text text-xl m-0">{benefit.label}</div>
+          <div
+            className={`font-medium text-xl m-0 ${
+              version === 'primary' ? 'text-primary-text' : ''
+            }`}
+          >
+            {benefit.label}
+          </div>
         )}
         {benefit.description && (
-          <div className="font-normal text-sm text-secondary-text">{benefit.description}</div>
+          <div
+            className={`font-normal text-sm ${version === 'primary' ? 'text-secondary-text' : ''}`}
+          >
+            {benefit.description}
+          </div>
         )}
       </div>
     </div>

package/src/components/PictureText/PictureTextContent.ts

@@ -1,3 +1,4 @@
+import { BlockVersion } from '../../model/BlockVersion';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
@@ -8,6 +9,12 @@ export type TitleWithImageContent = HeadingContent & ImageContent;
  * @title Картинка с текстом
  */
 export interface PictureTextContent extends TitleWithImageContent {
+  version?: BlockVersion;
   /** @title Список преимуществ */
   benefits?: Benefit[];
+  /**
+   * @title Картинка справа/текст слева
+   * @default false
+   */
+  directionRight?: boolean;
 }

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' : '';