@redneckz/wildless-cms-uni-blocks 0.3.18 → 0.3.21

package/src/components/Accordion/AccordionItemInner.tsx

@@ -1,33 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { JSXBlock } from '../ContentPage/ContentPage';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
-import { AccordionBlocks } from './AccordionBlocks';
-import type { AccordionBlockProps } from './AccordionContent';
 import type { AccordionItemProps } from './AccordionItem';
+import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
 
 export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, columns = 1, context }) => {
+  const className = 'mb-5 last:mb-0 pb-5';
   return (
-    <div
-      className={
-        'transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0 flex flex-wrap'
-      }
-    >
-      {blocks?.length ? blocks.map(renderBlock(context, columns)) : null}
+    <div className="transition-all duration-300 max-h-0 overflow-hidden">
+      {renderBlocksList({ context, className, columns, blocks })}
     </div>
   );
 });
-
-const renderBlock =
-  (context: ContentPageContext, columns: number) => (block: AccordionBlockProps, i: number) => {
-    const type = block?.accordionBlockType;
-    if (!type || !(type in AccordionBlocks)) {
-      return null;
-    }
-    const columnsCountClass = columns === 2 ? 'w-1/2' : '';
-    const AccordionBlock: JSXBlock = AccordionBlocks[type];
-    return (
-      <div className={`mb-5 last:mb-0 pb-5 ${columnsCountClass}`} key={`block_${i}`}>
-        <AccordionBlock context={context} {...block} className="!p-0" />
-      </div>
-    );
-  };

package/src/components/Accordion/utils/{isActiveHandler.ts → useActiveHandler.ts}

@@ -1,6 +1,6 @@
 import type { IconName } from '../../../icons/IconName';
 
-export const isActiveHandler = ({ context, blocks }) => {
+export const useActiveHandler = ({ context, blocks }) => {
   const [isActive, setIsActive] = context.useState(false);
   const hasContent = blocks?.length;
   const icon: IconName = isActive ? 'MinusIcon' : 'PlusIcon';

package/src/components/BaseTile/BaseTile.tsx

@@ -12,7 +12,7 @@ export const BaseTile = JSX<BaseTileProps>(
         <div className="flex grow w-full justify-between">
           <div className="flex flex-col justify-between w-full">
             <div>{children}</div>
-            {buttons?.length ? <div>{buttons}</div> : null}
+            {buttons ? <div>{buttons}</div> : null}
           </div>
           {image}
         </div>

package/src/components/Blocks.ts

@@ -15,8 +15,10 @@ import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
+import { ProductGalleryGreen } from './ProductGalleryGreen/ProductGalleryGreen';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
+import { OtherProducts } from './OtherProducts/OtherProducts';
 import { Recommendation } from './Recommendation/Recommendation';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TariffsTable } from './TariffsTable/TariffsTable';
@@ -39,8 +41,10 @@ export const Blocks = {
   PictureText,
   ProductBlock,
   ProductGallery,
+  ProductGalleryGreen,
   ProductTile,
   PromoTile,
+  OtherProducts,
   Recommendation,
   StepsBlock,
   TariffsTable,

package/src/components/OtherProducts/OtherProducts.example.json

@@ -0,0 +1,50 @@
+{
+  "title": "Другие продукты",
+  "blockItems": [
+    {
+      "label": "Другие продукты 1",
+      "blocks": [
+        {
+          "blockListType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
+        },
+        {
+          "blockListType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
+        }
+      ]
+    },
+    {
+      "label": "Другие продукты 2",
+      "blocks": [
+        {
+          "blockListType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
+        },
+        {
+          "blockListType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
+        }
+      ]
+    },
+    {
+      "label": "Другие продукты 3",
+      "blocks": [
+        {
+          "blockListType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
+        },
+        {
+          "blockListType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
+        }
+      ]
+    }
+  ]
+}

package/src/components/OtherProducts/OtherProducts.fixture.tsx

@@ -0,0 +1,137 @@
+import { context } from '../../setup-fixture';
+import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
+import { PRODUCT_TILE, PRODUCT_PENSION_TILE } from '../ProductTile/ProductTile.fixture';
+import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
+import { TILE, TILE_PREMIUM } from '../Tile/Tile.fixture';
+import type { OtherProductsProps } from './OtherProducts';
+import { OtherProducts } from './OtherProducts';
+import type {
+  ProductBlockBlockListDef,
+  ProductTileBlockListDef,
+  TextBlockBlockListDef,
+  TileBlockListDef,
+} from '../../ui-kit/BlocksList/BlocksListProps';
+
+const TEXT_BLOCK_OTHER_BLOCK: TextBlockBlockListDef = {
+  blockListType: 'TextBlock',
+  ...TEXT_BLOCK,
+};
+
+const PRODUCT_BLOCK_OTHER_BLOCK: ProductBlockBlockListDef = {
+  blockListType: 'ProductBlock',
+  ...PRODUCT_BLOCK,
+};
+
+const TILES_OTHER_BLOCK: TileBlockListDef = {
+  blockListType: 'Tile',
+  ...TILE,
+};
+
+const TILES_PREMIUM_OTHER_BLOCK: TileBlockListDef = {
+  blockListType: 'Tile',
+  ...TILE_PREMIUM,
+};
+
+const PRODUCT_TILES_OTHER_BLOCK: ProductTileBlockListDef = {
+  blockListType: 'ProductTile',
+  ...PRODUCT_TILE,
+};
+
+const PRODUCT_PENSION_TILES__OTHER_BLOCK: ProductTileBlockListDef = {
+  blockListType: 'ProductTile',
+  ...PRODUCT_PENSION_TILE,
+};
+
+const propsBlock: OtherProductsProps = {
+  context,
+  blockItems: [
+    {
+      label: 'Другие кредитные карты Россельхозбанка 1',
+      blocks: [
+        TILES_PREMIUM_OTHER_BLOCK,
+        TILES_PREMIUM_OTHER_BLOCK,
+        TILES_OTHER_BLOCK,
+        TILES_OTHER_BLOCK,
+      ],
+    },
+    {
+      label: 'Другие кредитные карты Россельхозбанка 2',
+      blocks: [
+        PRODUCT_TILES_OTHER_BLOCK,
+        PRODUCT_TILES_OTHER_BLOCK,
+        PRODUCT_PENSION_TILES__OTHER_BLOCK,
+        PRODUCT_PENSION_TILES__OTHER_BLOCK,
+      ],
+    },
+    {
+      label: 'Другие кредитные карты Россельхозбанка 3',
+      blocks: [PRODUCT_BLOCK_OTHER_BLOCK, PRODUCT_BLOCK_OTHER_BLOCK],
+    },
+
+    {
+      label: 'Другие кредитные карты Россельхозбанка 4',
+      blocks: [
+        TEXT_BLOCK_OTHER_BLOCK,
+        TEXT_BLOCK_OTHER_BLOCK,
+        TEXT_BLOCK_OTHER_BLOCK,
+        TEXT_BLOCK_OTHER_BLOCK,
+      ],
+    },
+  ],
+};
+
+const propsTwoColumns: OtherProductsProps = {
+  context,
+  blockItems: [
+    {
+      label: 'Другие кредитные карты Россельхозбанка 1',
+      blocks: [
+        TILES_PREMIUM_OTHER_BLOCK,
+        TILES_PREMIUM_OTHER_BLOCK,
+        TILES_OTHER_BLOCK,
+        TILES_OTHER_BLOCK,
+      ],
+      columns: 2,
+    },
+    {
+      label: 'Другие кредитные карты Россельхозбанка 2',
+      blocks: [
+        PRODUCT_TILES_OTHER_BLOCK,
+        PRODUCT_TILES_OTHER_BLOCK,
+        PRODUCT_PENSION_TILES__OTHER_BLOCK,
+        PRODUCT_PENSION_TILES__OTHER_BLOCK,
+      ],
+      columns: 2,
+    },
+    {
+      label: 'Другие кредитные карты Россельхозбанка 3',
+      blocks: [PRODUCT_BLOCK_OTHER_BLOCK, PRODUCT_BLOCK_OTHER_BLOCK],
+      columns: 2,
+    },
+
+    {
+      label: 'Другие кредитные карты Россельхозбанка 4',
+      blocks: [
+        TEXT_BLOCK_OTHER_BLOCK,
+        TEXT_BLOCK_OTHER_BLOCK,
+        TEXT_BLOCK_OTHER_BLOCK,
+        TEXT_BLOCK_OTHER_BLOCK,
+      ],
+      columns: 2,
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <OtherProducts className="col-span-12" {...propsBlock} />
+    </div>
+  ),
+
+  'two columns': (
+    <div className="container grid grid-cols-12">
+      <OtherProducts className="col-span-12" {...propsTwoColumns} />
+    </div>
+  ),
+};

package/src/components/OtherProducts/OtherProducts.tsx

@@ -0,0 +1,20 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { OtherProductsContent } from './OtherProductsContent';
+import { OtherProductsItem } from './OtherProductsItem';
+
+export interface OtherProductsProps extends OtherProductsContent, UniBlockProps {}
+
+export const OtherProducts = JSX<OtherProductsProps>(({ blockItems, context, className }) => {
+  return (
+    <section className={`font-sans bg-white text-primary-text ${className || ''}`}>
+      {blockItems?.length ? (
+        <div className="list-none m-0 p-0">
+          {blockItems.map((item, i) => (
+            <OtherProductsItem key={`BlockItem${i}`} {...item} context={context} />
+          ))}
+        </div>
+      ) : null}
+    </section>
+  );
+});

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -0,0 +1,38 @@
+import type { BlockDef, ColumnsCount } from '../../ui-kit/BlocksList/BlocksListProps';
+
+/**
+ * @title Элемент списка
+ */
+export interface blockItemCommonProps {
+  /**
+   * @title Название
+   * @default Список
+   */
+  label?: string;
+  /** @title Блоки */
+  blocks?: BlockDef[];
+  /**
+   * @title Отображать/скрывать обводку элемента
+   * @default false
+   */
+  bordered?: boolean; // TODO: только для мобильной версии
+  columns?: ColumnsCount;
+  isActive?: boolean;
+}
+
+/**
+ * @title Другие продукты
+ */
+export interface OtherProductsContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Список */
+  blockItems?: blockItemCommonProps[];
+  /** @title Подзаголовок */
+  description?: string; // TODO: только для мобильной версии
+  /**
+   * @title Отображать/скрывать обводку у элемента списка
+   * @default false
+   */
+  bordered?: boolean; // TODO: только для мобильной версии
+}

package/src/components/OtherProducts/OtherProductsItem.tsx

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useActiveHandler } from './utils/useActiveHandler';
+import type { UniBlockProps } from '../../types';
+import type { blockItemCommonProps } from './OtherProductsContent';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { OtherProductsItemInner } from './OtherProductsItemInner';
+
+export interface BlockItemProps extends blockItemCommonProps, UniBlockProps {}
+
+export const OtherProductsItem = JSX<BlockItemProps>(({ label, blocks, columns, context }) => {
+  const { hasContent, icon, handleToggle, isActive } = useActiveHandler({
+    context,
+    blocks,
+  });
+
+  return (
+    <div className="border-0 border-b border-solid border-main-divider">
+      {hasContent ? (
+        <OtherProductsItemInner
+          columns={columns}
+          blocks={blocks}
+          context={context}
+          isActive={isActive}
+        />
+      ) : null}
+      <button
+        className={`border-none bg-primary-main px-0 py-[25px] text-center w-full font-sans text-white text-base
+        ${hasContent ? 'group cursor-pointer' : ''}`}
+        onClick={handleToggle}
+      >
+        <span className="pr-3">{isActive ? 'Скрыть' : label}</span>
+        {hasContent ? <Icon name={icon} width="20" height="20" asSVG /> : null}
+      </button>
+    </div>
+  );
+});

package/src/components/OtherProducts/OtherProductsItemInner.tsx

@@ -0,0 +1,14 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockItemProps } from './OtherProductsItem';
+import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+
+export const OtherProductsItemInner = JSX<BlockItemProps>(({ blocks, columns = 1, context }) => {
+  const className = 'box-border p-5';
+  return (
+    <div className="transition-all duration-300 max-h-0 overflow-hidden">
+      <div className={`box-border w-full p-9 ${columns > 1 ? 'flex flex-wrap' : ''}`}>
+        {renderBlocksList({ context, className, columns, blocks })}
+      </div>
+    </div>
+  );
+});

package/src/components/OtherProducts/utils/useActiveHandler.ts

@@ -0,0 +1,23 @@
+import type { IconName } from '../../../icons/IconName';
+
+export const useActiveHandler = ({ context, blocks }) => {
+  const [isActive, setIsActive] = context.useState(false);
+  const hasContent = blocks?.length;
+  const icon: IconName = isActive ? 'ArrowUpIcon' : 'ArrowDownIcon';
+
+  const getContentBlock = ({ currentTarget }) => currentTarget.previousSibling;
+
+  const handleToggle = (e: MouseEvent) => {
+    if (!hasContent) {
+      return;
+    }
+
+    setIsActive(!isActive);
+    const contentBlock = getContentBlock(e);
+    contentBlock.style.maxHeight = contentBlock.style.maxHeight
+      ? null
+      : `${contentBlock.scrollHeight}px`;
+  };
+
+  return { isActive, hasContent, icon, handleToggle };
+};

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -20,7 +20,13 @@ export type ProductBlockInnerContent = HeadingContent &
      */
     benefits?: Benefit[];
     version?: BlockVersion;
-    buttons?: ButtonContent[];
+    /**
+     * @title Стиль для текстовой части
+     * @hidden
+     */
+    textBlockClassName?: string;
+    /** @title Фоновый текст под иллюстрацией */
+    backgroundText?: string;
   };
 
 /**

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -23,26 +23,16 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     image,
     items,
     version = 'primary',
+    textBlockClassName = '',
   }) => {
+    const textColor = version === 'secondary' ? 'text-white' : '';
     return (
       <div className={`flex grow justify-between items-stretch ${className}`}>
-        <div className={'flex flex-col'}>
+        <div className={`flex flex-col ${textBlockClassName}`}>
           <BaseTile
             context={context}
-            title={
-              title && (
-                <Heading
-                  headingType={headingType}
-                  title={title}
-                  className="whitespace-pre-wrap max-w-[600px]"
-                />
-              )
-            }
-            buttons={
-              buttons?.length ? (
-                <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
-              ) : null
-            }
+            title={getTitle(title, headingType, textColor)}
+            buttons={getButtons(context, buttons)}
           >
             {description && (
               <Description className="mt-4 max-w-[600px]" description={description} />
@@ -62,3 +52,21 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     );
   },
 );
+
+const getTitle = (title, headingType, textColor) => {
+  return (
+    title && (
+      <Heading
+        headingType={headingType}
+        title={title}
+        className={`whitespace-pre-wrap max-w-[600px] ${textColor}`}
+      />
+    )
+  );
+};
+
+const getButtons = (context, buttons) => {
+  return buttons?.length ? (
+    <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+  ) : null;
+};

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

@@ -93,7 +93,7 @@ export default {
             {
               nav: {
                 title: 'Выгодно покупать',
-                desc: 'Дополнительные бонусные баллы за покупки',
+                description: 'Дополнительные бонусные баллы за покупки',
               },
               productBlock: {
                 title: 'Дополнительные бонусные баллы за покупки!',
@@ -187,7 +187,7 @@ export default {
             {
               nav: {
                 title: 'Выгодно покупать',
-                desc: 'Дополнительные бонусные баллы за покупки',
+                description: 'Дополнительные бонусные баллы за покупки',
               },
               productBlock: {
                 title: 'Дополнительные бонусные баллы за покупки!',

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

@@ -41,7 +41,7 @@ export default {
           {
             nav: {
               title: 'Деньги на любые цели',
-              desc: 'Ставка от 12,5% годовых на срок до 5 лет',
+              description: 'Ставка от 12,5% годовых на срок до 5 лет',
             },
             productBlock: {
               title: 'Ставка от 12,5% годовых на срок до 5 лет!',
@@ -65,7 +65,7 @@ export default {
           {
             nav: {
               title: 'Для людей в возрасте',
-              desc: 'Ставка от 12,5% годовых на срок до 3 лет',
+              description: 'Ставка от 12,5% годовых на срок до 3 лет',
             },
             productBlock: {
               title: 'Ставка от 12,5% годовых на срок до 3 лет!',
@@ -89,7 +89,7 @@ export default {
           {
             nav: {
               title: 'Выгодно покупать',
-              desc: 'Дополнительные бонусные баллы за покупки',
+              description: 'Дополнительные бонусные баллы за покупки',
             },
             productBlock: {
               title: 'Дополнительные бонусные баллы за покупки!',
@@ -113,7 +113,7 @@ export default {
           {
             nav: {
               title: 'Карты Unionpay',
-              desc: 'Кэшбэк до 20% у партнеров',
+              description: 'Кэшбэк до 20% у партнеров',
             },
             productBlock: {
               title: 'Карты Unionpay',

package/src/components/ProductGallery/ProductGalleryContent.ts

@@ -5,7 +5,7 @@ interface ProductGalleryNav {
   /** @title Заголовок */
   title: string;
   /** @title Описание */
-  desc: string;
+  description: string;
 }
 
 /**

package/src/components/ProductGalleryGreen/ProductGalleryGreen.example.json

@@ -0,0 +1,22 @@
+{
+  "slides": [
+    {
+      "nav": {
+        "title": "Заголовок",
+        "description": "Описание"
+      },
+      "productBlock": {
+        "title": "Продуктовая галерея",
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 280
+          }
+        },
+        "version": "primary",
+        "description": "Описание",
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      }
+    }
+  ]
+}

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

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