@redneckz/wildless-cms-uni-blocks 0.3.57 → 0.3.59

package/src/components/ContentPage/ContentPage.page.json

@@ -61,11 +61,12 @@
       "type": "ProductGallery",
       "style": ["col-span-12"],
       "content": {
+        "version": "secondary",
         "slides": [
           {
             "nav": {
               "title": "Деньги на любые цели",
-              "desc": "Ставка от 12,5% годовых на срок до 5 лет"
+              "description": "Ставка от 12,5% годовых на срок до 5 лет"
             },
             "productBlock": {
               "title": "Ставка от 12,5% годовых на срок до 5 лет!»",
@@ -79,7 +80,7 @@
                   "href": "https://rshb.ru",
                   "text": "Подробнее",
                   "target": "_blank",
-                  "version": "primary"
+                  "version": "secondary"
                 }
               ],
               "image": {
@@ -103,7 +104,7 @@
           {
             "nav": {
               "title": "Для людей в возрасте",
-              "desc": "Ставка от 12,5% годовых на срок до 3 лет"
+              "description": "Ставка от 12,5% годовых на срок до 3 лет"
             },
             "productBlock": {
               "title": "Ставка от 12,5% годовых на срок до 3 лет!»",
@@ -117,7 +118,7 @@
                   "href": "https://rshb.ru",
                   "text": "Подробнее",
                   "target": "_blank",
-                  "version": "primary"
+                  "version": "secondary"
                 }
               ],
               "image": {
@@ -141,7 +142,7 @@
           {
             "nav": {
               "title": "Выгодно покупать",
-              "desc": "Дополнительные бонусные баллы за покупки"
+              "description": "Дополнительные бонусные баллы за покупки"
             },
             "productBlock": {
               "title": "Дополнительные бонусные баллы за покупки!»",
@@ -150,7 +151,7 @@
                   "href": "https://rshb.ru",
                   "text": "Подробнее",
                   "target": "_blank",
-                  "version": "primary"
+                  "version": "secondary"
                 }
               ],
               "image": {
@@ -168,7 +169,7 @@
           {
             "nav": {
               "title": "Карты Unionpay",
-              "desc": "Кэшбэк до 20% у партнеров"
+              "description": "Кэшбэк до 20% у партнеров"
             },
             "productBlock": {
               "title": "Карты Unionpay»",
@@ -182,7 +183,7 @@
                   "href": "https://rshb.ru",
                   "text": "Подробнее",
                   "target": "_blank",
-                  "version": "primary"
+                  "version": "secondary"
                 }
               ],
               "image": {

package/src/components/ContentPage/ContentPage.tsx

@@ -19,8 +19,8 @@ export type BlockDecorator<VNode = any> = (
   index?: number | string,
 ) => any;
 
-export type JSXBlock = (
-  props: PropsWithChildren<UniBlockProps & BlockContent, any>,
+export type JSXBlock<BlockProps = BlockContent> = (
+  props: PropsWithChildren<UniBlockProps & BlockProps, any>,
   context?: any,
 ) => any;
 

package/src/components/Header/Header.fixture.tsx

@@ -4,4 +4,5 @@ import { Header } from './Header';
 export default {
   default: <Header context={context} defaultLocation="Москва" />,
   transparent: <Header context={context} defaultLocation="Москва" bgColor="transparent" />,
+  'no submenu': <Header context={context} defaultLocation="Москва" showSubMenu={false} />,
 };

package/src/components/Header/Header.tsx

@@ -22,6 +22,7 @@ export const Header = JSX<HeaderProps>(
   ({
     className = '',
     defaultLocation = 'Москва',
+    showSubMenu = true,
     bgColor = 'bg-white',
     context,
     topItems,
@@ -58,7 +59,9 @@ export const Header = JSX<HeaderProps>(
             />
           </div>
           <div className={`mt-6 h-[1px] ${BORDER_COLORS[bgColor]}`} />
-          <HeaderSubMenu context={context} subItems={activeTopItem?.items} bgColor={bgColor} />
+          {showSubMenu && activeTopItem?.items?.length ? (
+            <HeaderSubMenu context={context} subItems={activeTopItem.items} bgColor={bgColor} />
+          ) : null}
         </div>
       </header>
     );

package/src/components/Header/HeaderContent.ts

@@ -29,6 +29,12 @@ export interface HeaderContent extends SitemapProps {
    * @default Москва
    */
   defaultLocation?: string;
+  /**
+   * @title Показывать подменю
+   * @hidden
+   * @default true
+   */
+  showSubMenu?: boolean;
   /**
    * @title Фон элемента
    * @hidden

package/src/components/Header/HeaderSubMenu.tsx

@@ -8,6 +8,11 @@ import { isSSR } from '../../utils/isSSR';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { headerSubMenuObserver } from './HeaderSubMenuObserver';
 
+const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
+  'bg-white': 'bg-primary-text',
+  transparent: 'bg-white',
+};
+
 export interface HeaderSubMenuProps {
   context: ContentPageContext;
   subItems?: LinkProps[];
@@ -51,6 +56,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems, bgCol
         subMenuIsShow,
         toggleSubMenu,
         subItems,
+        bgColor,
         router,
         handlerDecorator,
       })}
@@ -63,6 +69,7 @@ const renderDotsSubMenu = ({
   subMenuIsShow,
   toggleSubMenu,
   subItems,
+  bgColor,
   router,
   handlerDecorator,
 }) => (
@@ -77,9 +84,7 @@ const renderDotsSubMenu = ({
       onClick={toggleSubMenu}
       aria-label={`${subMenuIsShow ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
     >
-      {Array(3)
-        .fill(0)
-        .map((_, i) => renderDot(i))}
+      {Array(3).fill(bgColor).map(renderDot)}
     </button>
     <div
       className={`flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`}
@@ -103,6 +108,6 @@ const renderDotsSubMenuItems = (subItems, router, handlerDecorator) =>
     </a>
   ));
 
-const renderDot = (i: number) => (
-  <div key={String(i)} className="w-[3px] h-[3px] rounded bg-black mr-1" />
+const renderDot = (bgColor: BgColorVersion, i: number) => (
+  <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />
 );

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

@@ -1,7 +1,7 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { ProductBlock } from './ProductBlock';
-import { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 const title = 'Кредит до 5 000 000 Р\nбез залога и поручителей';

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

@@ -10,14 +10,13 @@
         "image": {
           "format": "webp",
           "size": {
-            "width": 234,
-            "height": 234
+            "width": 608,
+            "height": 299
           }
         },
+        "version": "primary",
         "description": "Описание",
-        "isDotted": "true",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
-        "version": "primary"
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
       }
     },
     {
@@ -30,14 +29,13 @@
         "image": {
           "format": "webp",
           "size": {
-            "width": 234,
-            "height": 234
+            "width": 608,
+            "height": 299
           }
         },
+        "version": "primary",
         "description": "Описание",
-        "isDotted": "true",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
-        "version": "primary"
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
       }
     }
   ]

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

@@ -1,16 +1,16 @@
 import { context } from '../../setup-fixture';
 import { ProductGallery } from './ProductGallery';
 import type { Picture } from '../../model/Picture';
-import type { ProductSlide } from './ProductGalleryContent';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
-const moneyImage: Picture = {
-  src: 'money-1.png',
+const percentImage: Picture = {
+  src: '3-6-percent.png',
   format: 'webp',
   size: {
-    width: 234,
-    height: 234,
+    width: 338,
+    height: 420,
   },
-  alt: 'Варианты потребительского кредита',
+  alt: 'Ставка от 3,6% годовых',
 };
 
 const worker: Picture = {
@@ -31,113 +31,155 @@ 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,
-    },
-  },
+const items = [
+  'Потребительский кредит по специальной процентной ставке',
+  'Получите деньги без залога и поручительства',
+  'Кредитный лимит до 5 млн рублей',
+];
+const buttons: ButtonWithIconProps[] = [
   {
-    nav: {
-      title: 'Выгодно покупать',
-      description: 'Дополнительные бонусные баллы за покупки',
-    },
-    productBlock: {
-      title: 'Дополнительные бонусные баллы за покупки!',
-      headingType: 'h2',
-      items: [
-        'Потребительский кредит по специальной процентной ставке',
-        'Получите деньги без залога и поручительства',
-        'Кредитный лимит до 5 млн рублей',
-      ],
-      buttons: [
-        {
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'primary',
-        },
-      ],
-      version: 'primary',
-      image: creditCard,
-    },
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'primary',
   },
+];
+
+const buttonsSecondary: ButtonWithIconProps[] = [
   {
-    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,
-    },
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
   },
 ];
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <ProductGallery className="col-span-12" context={context} slides={slides} />
+      <ProductGallery
+        className="col-span-12"
+        context={context}
+        slides={[
+          {
+            nav: {
+              title: 'Кредит по одному документу',
+              description: 'Ставка от 5,5% годовых',
+            },
+            productBlock: {
+              title: 'Кредит по одному документу',
+              description: 'Ставка от 5,5% годовых',
+              headingType: 'h2',
+              items,
+              buttons,
+              image: percentImage,
+            },
+          },
+          {
+            nav: {
+              title: 'Для людей в возрасте',
+              description: 'Ставка до 7% годовых',
+            },
+            productBlock: {
+              title: 'Ставка от 12,5% годовых на срок до 3 лет!',
+              headingType: 'h2',
+              items,
+              buttons,
+              image: worker,
+            },
+          },
+          {
+            nav: {
+              title: 'Выгодно покупать',
+              description: 'Ставка от 5% годовых',
+            },
+            productBlock: {
+              title: 'Дополнительные бонусные баллы за покупки!',
+              headingType: 'h2',
+              items,
+              buttons,
+              image: creditCard,
+            },
+          },
+          {
+            nav: {
+              title: 'Карты Unionpay',
+              description: '120 дней льготный период',
+            },
+            productBlock: {
+              title: 'Карты Unionpay',
+              headingType: 'h2',
+              items,
+              buttons,
+              image: creditCard,
+            },
+          },
+        ]}
+      />
+    </div>
+  ),
+  primary: (
+    <div className="container grid grid-cols-12">
+      <ProductGallery
+        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/ProductGallery/ProductGallery.tsx

@@ -1,39 +1,60 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { ProductGalleryBlock } from './ProductGalleryBlock';
 import type { UniBlockProps } from '../../types';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 import type { ProductGalleryContent } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
+type StyleType = {
+  title: string;
+  text: string;
+};
+
+const productGalleryStyleMap: 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 ProductGallery = JSX<ProductGalleryProps>(
-  ({ className, context, duration = 0, slides = [], anchor = null }) => {
+  ({ className = '', context, slides = [], version = 'primary', 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={`font-sans bg-white overflow-hidden w-100 ${className || ''}`}
         id={anchor}
+        className={`box-border pt-[50px] overflow-hidden relative font-sans w-100 ${className}
+        ${productGalleryStyleMap[version]}`}
       >
         <div
-          className={`flex duration-1000`}
+          className="flex duration-1000 pb-14"
           style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
           role="list"
         >
-          {galleryBlocks.map((_, i) => (
-            <ProductGalleryBlock key={String(i)} context={context} block={_} />
-          ))}
+          {galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context))}
         </div>
 
-        <div className="flex">
+        <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),
-              duration,
+              version,
             }),
           )}
         </div>
@@ -42,30 +63,58 @@ export const ProductGallery = JSX<ProductGalleryProps>(
   },
 );
 
-function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
+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"
+      role="listitem"
+    >
+      <div className="flex grow">
+        <ProductBlockInner
+          className={`pl-[50px] z-[1] ${additionalClass}`}
+          context={context}
+          textBlockClassName="mb-[154px]"
+          {...block}
+        />
+      </div>
+    </section>
+  );
+}
+
+function renderNavButton({ slide, i, activeSlideIndex, onClick, version }) {
   const isActiveBtn = i === activeSlideIndex;
-  const progressBarClassName = isActiveBtn ? 'animate-slide' : '';
-  const btnTitleClassName = isActiveBtn ? 'text-primary-text' : 'text-secondary-text';
+
+  const btnClassName = isActiveBtn
+    ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-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 bg-white/10
+      ${productSlideStyleMap[version]}`;
+  const btnTitleClassName = isActiveBtn
+    ? 'text-primary-text text-title-2xs'
+    : `text-base ${productBlockStyleMap[version].title}`;
+  const btnDescClassName = isActiveBtn
+    ? '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' : 'border-black/50';
+
   return (
     <button
       type="button"
       key={String(i)}
       onClick={onClick}
       aria-label={slide?.title}
-      className={`font-sans group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 pt-4 pb-[23px] grow basis-0`}
+      className={`box-border font-sans relative overflow-hidden border-[1px] border-white/50 cursor-pointer text-left mx-1 grow basis-0
+        ${btnClassName} ${additionalBorder}
+      `}
     >
-      <div className="border-0 border-r border-solid border-main-divider px-6">
-        <div
-          className={`text-sm font-medium pb-[3px] group-hover:text-primary-text ${btnTitleClassName}`}
-        >
-          {slide?.title}
-        </div>
-        <div className="text-xs text-secondary-text">{slide.desc}</div>
+      <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/ProductGallery/ProductGalleryContent.ts

@@ -1,4 +1,5 @@
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 /** @title Кнопка под слайдом */
 interface ProductGalleryNav {
@@ -19,17 +20,13 @@ export interface ProductSlide {
 }
 
 /**
- * @title Продуктовая галерея (для мобильных горизонтальная прокрутка shift+mouseScroll)
+ * @title Продуктовая галерея
  */
 export interface ProductGalleryContent {
-  /**
-   * @title Задержка
-   * @hidden //! temporary not used
-   */
-  duration?: number;
   /**
    * @title Слайды
    * @minItems 2
    */
   slides?: ProductSlide[];
+  version?: BlockVersion;
 }