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

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.example.json

@@ -10,7 +10,8 @@
         "image": {
           "format": "webp",
           "size": {
-            "width": 280
+            "width": 608,
+            "height": 299
           }
         },
         "version": "primary",

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

@@ -38,6 +38,15 @@ const items = [
   'Кредитный лимит до 5 млн рублей',
 ];
 const buttons: ButtonWithIconProps[] = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'primary',
+  },
+];
+
+const buttonsSecondary: ButtonWithIconProps[] = [
   {
     href: 'https://rshb.ru',
     text: 'Подробнее',
@@ -60,12 +69,11 @@ export default {
             },
             productBlock: {
               title: 'Кредит по одному документу',
-              // description: 'Кредит наличными без залога и поручительства, только по паспорту',
+              description: 'Ставка от 5,5% годовых',
               headingType: 'h2',
               items,
               buttons,
               image: percentImage,
-              backgroundText: '3,6',
             },
           },
           {
@@ -111,4 +119,68 @@ export default {
       />
     </div>
   ),
+  primary: (
+    <div className="container grid grid-cols-12">
+      <ProductGalleryGreen
+        className="col-span-12"
+        context={context}
+        version={'secondary'}
+        slides={[
+          {
+            nav: {
+              title: 'Кредит по одному документу',
+              description: 'Ставка от 5,5% годовых',
+            },
+            productBlock: {
+              title: 'Кредит по одному документу',
+              description: 'Кредит наличными без залога и поручительства, только по паспорту',
+              headingType: 'h2',
+              items,
+              buttons: buttonsSecondary,
+              image: percentImage,
+            },
+          },
+          {
+            nav: {
+              title: 'Для людей в возрасте',
+              description: 'Ставка до 7% годовых',
+            },
+            productBlock: {
+              title: 'Ставка от 12,5% годовых на срок до 3 лет!',
+              headingType: 'h2',
+              items,
+              buttons: buttonsSecondary,
+              image: worker,
+            },
+          },
+          {
+            nav: {
+              title: 'Выгодно покупать',
+              description: 'Ставка от 5% годовых',
+            },
+            productBlock: {
+              title: 'Дополнительные бонусные баллы за покупки!',
+              headingType: 'h2',
+              items,
+              buttons: buttonsSecondary,
+              image: creditCard,
+            },
+          },
+          {
+            nav: {
+              title: 'Карты Unionpay',
+              description: '120 дней льготный период',
+            },
+            productBlock: {
+              title: 'Карты Unionpay',
+              headingType: 'h2',
+              items,
+              buttons: buttonsSecondary,
+              image: creditCard,
+            },
+          },
+        ]}
+      />
+    </div>
+  ),
 };

package/src/components/ProductGalleryGreen/ProductGalleryGreen.tsx

@@ -1,38 +1,61 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 import type { ProductGalleryGreenContent } from './ProductGalleryGreenContent';
 
 export interface ProductGalleryProps extends ProductGalleryGreenContent, UniBlockProps {}
 
+type StyleType = {
+  title: string;
+  text: string;
+};
+
+const productGalleryGreenStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
+const productBlockStyleMap: Record<BlockVersion, StyleType> = {
+  primary: { title: 'text-secondary-text', text: 'text-secondary-text' },
+  secondary: { title: 'text-white', text: 'text-white/80' },
+};
+
+const productSlideStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
 export const ProductGalleryGreen = JSX<ProductGalleryProps>(
-  ({ className = '', context, slides = [], anchor = null }) => {
+  ({ className = '', context, slides = [], version = 'primary', duration = 0, anchor = null }) => {
     const galleryNav = slides.map((s) => s.nav);
     const galleryBlocks = slides.map((s) => s.productBlock);
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
 
     return (
       <section
-        className={`box-border pt-[70px] relative font-sans overflow-hidden bg-primary-main w-100 ${className}`}
         id={anchor}
+        className={`box-border pt-[50px] overflow-hidden relative font-sans w-100 ${className}
+        ${productGalleryGreenStyleMap[version]}`}
       >
         <div
           className="flex duration-1000 pb-14"
           style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
           role="list"
         >
-          {galleryBlocks.map((_, i) => renderProductBlock(_, i, context))}
+          {galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context))}
         </div>
 
-        <div className="flex items-center absolute bottom-6 left-0 right-0 px-9 box-border">
+        <div className="flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border">
           {galleryNav.map((slide, i) =>
             renderNavButton({
               slide,
               i,
               activeSlideIndex,
               onClick: () => setActiveSlideIndex(i),
+              version,
+              duration,
             }),
           )}
         </div>
@@ -42,47 +65,43 @@ export const ProductGalleryGreen = JSX<ProductGalleryProps>(
 );
 
 function renderProductBlock(block: ProductBlockInnerContent, i: number, context) {
+  const { version } = block;
+  const additionalClass = version ? productBlockStyleMap[version].title : '';
+
   return (
     <section
       key={String(i)}
-      className="box-border relative flex grow-0 shrink-0 basis-full px-9"
+      className="box-border relative flex grow-0 shrink-0 basis-full"
       role="listitem"
     >
       <div className="flex grow">
-        {block.backgroundText ? (
-          <div className="absolute text-[454px] font-bold text-white tracking-[-10px] leading-[299px] opacity-[.1] right-12 top-20 z-0">
-            {block.backgroundText}
-          </div>
-        ) : null}
         <ProductBlockInner
-          className="pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem] z-[1]"
+          className={`pl-[50px] pr-2 z-[1] ${additionalClass}`}
           context={context}
           textBlockClassName="mb-[154px]"
-          version="secondary"
           {...block}
         />
-        <Icon
-          className="absolute right-[460px] top-[200px] z-0 mb-4"
-          name="ArrowsRewindRight"
-          width="230"
-          height="187"
-        />
       </div>
     </section>
   );
 }
 
-function renderNavButton({ slide, i, activeSlideIndex, onClick }) {
+function renderNavButton({ slide, i, activeSlideIndex, onClick, version, duration }) {
   const isActiveBtn = i === activeSlideIndex;
+
   const btnClassName = isActiveBtn
-    ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] max-w-[354px] p-0'
-    : 'bg-white/10 min-w-[277px] px-0 pt-4 pb-[23px] hover:pt-[21px] hover:pb-7 ease-in duration-300';
+    ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] max-w-[354px] p-0 border-none'
+    : `min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300
+      ${productSlideStyleMap[version]}`;
   const btnTitleClassName = isActiveBtn
-    ? 'text-[18px] text-primary-text pb-[10px]'
-    : 'text-m-base text-white pb-[3px]';
+    ? 'text-primary-text text-title-2xs'
+    : `text-base ${productBlockStyleMap[version].title}`;
   const btnDescClassName = isActiveBtn
-    ? 'text-[18px] text-secondary-text'
-    : 'text-m-base text-white';
+    ? 'text-secondary-text text-m-title-xs mt-2.5'
+    : `text-m-md mt-1.5 ${productBlockStyleMap[version].text}`;
+
+  const additionalBorder = version === 'secondary' ? 'border-white/50' : '';
+  const progressBarClassName = isActiveBtn ? 'animate-slide' : '';
 
   return (
     <button
@@ -90,14 +109,18 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick }) {
       key={String(i)}
       onClick={onClick}
       aria-label={slide?.title}
-      className={`box-border font-sans group relative overflow-hidden border-white/50 border-[1px] cursor-pointer text-left mb-6a mx-1 grow basis-0 backdrop-blur-sm
-        ${btnClassName}
+      className={`box-border font-sans group relative overflow-hidden border-[1px] cursor-pointer text-left mx-1 grow basis-0 backdrop-blur-sm
+      ${btnClassName} ${additionalBorder}
       `}
     >
       <div className="border-0 px-6">
         <div className={`font-medium ${btnTitleClassName}`}>{slide?.title}</div>
         <div className={`text-secondary-text ${btnDescClassName}`}>{slide.description}</div>
       </div>
+      <div
+        className={`absolute bottom-0 left-0 w-full h-[3px] bg-primary-main -translate-x-full ${progressBarClassName}`}
+        style={{ animationDuration: `${duration}s`, animationFillMode: 'forwards' }}
+      ></div>
     </button>
   );
 }

package/src/components/ProductGalleryGreen/ProductGalleryGreenContent.ts

@@ -1,4 +1,5 @@
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 /** @title Кнопка под слайдом */
 interface ProductGalleryNav {
@@ -29,4 +30,5 @@ export interface ProductGalleryGreenContent {
   duration?: number;
   /** @title Слайды */
   slides?: ProductSlide[];
+  version?: BlockVersion;
 }

package/src/components/Recommendation/Recommendation.example.json

@@ -10,7 +10,12 @@
         }
       },
       "title": "Заголовок 1",
-      "description": "Описание 1"
+      "description": "Описание 1",
+      "socialMedia": [
+        { "href":  "https://t.me" },
+        { "href":  "https://vk.com" },
+        { "href":  "https://ok.ru" }
+      ]
     },
     {
       "image": {
@@ -21,7 +26,12 @@
         }
       },
       "title": "Заголовок 2",
-      "description": "Описание 2"
+      "description": "Описание 2",
+      "socialMedia": [
+        { "href":  "https://t.me" },
+        { "href":  "https://vk.com" },
+        { "href":  "https://ok.ru" }
+      ]
     },
     {
       "image": {
@@ -32,7 +42,12 @@
         }
       },
       "title": "Заголовок 3",
-      "description": "Описание 3"
+      "description": "Описание 3",
+      "socialMedia": [
+        { "href":  "https://t.me" },
+        { "href":  "https://vk.com" },
+        { "href":  "https://ok.ru" }
+      ]
     }
   ]
 }