@redneckz/wildless-cms-uni-blocks 0.3.19 → 0.3.22

package/src/components/Accordion/AccordionContent.ts

@@ -1,109 +1,4 @@
-import type { GalleryContent } from '../Gallery/GalleryContent';
-import type { HeadlineContent } from '../Headline/HeadlineContent';
-import type { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
-import type { MiniGalleryContent } from '../MiniGallery/MiniGalleryContent';
-import type { PictureTextContent } from '../PictureText/PictureTextContent';
-import type { ProductBlockContent } from '../ProductBlock/ProductBlockContent';
-import type { ProductTileContent } from '../ProductTile/ProductTileContent';
-import type { TextBlockContent } from '../TextBlock/TextBlockContent';
-import type { TileContent } from '../Tile/TileContent';
-import type { LinkListContent } from '../LinkList/LinkListContent';
-
-/**
- * @title Тип блока
- */
-export type AccordionBlockType =
-  | 'Headline'
-  | 'LinkDocs'
-  | 'TextBlock'
-  | 'PictureText'
-  | 'Tile'
-  | 'ProductTile'
-  | 'ProductBlock'
-  | 'Gallery'
-  | 'MiniGallery'
-  | 'LinkList';
-
-interface AccordionBlockDef {
-  accordionBlockType: AccordionBlockType;
-}
-
-/**
- * @title Заголовок
- */
-export type HeadlineAccordionBlockDef = HeadlineContent & AccordionBlockDef;
-
-/**
- * @title Список документов
- */
-export type LinkDocsAccordionBlockDef = LinkDocsContent & AccordionBlockDef;
-
-/**
- * @title Текстовый блок
- */
-export type TextBlockAccordionBlockDef = TextBlockContent & AccordionBlockDef;
-
-/**
- * @title Картинка с текстом
- */
-export type PictureTextAccordionBlockDef = PictureTextContent & AccordionBlockDef;
-
-/**
- * @title Продуктовый блок
- */
-export type ProductBlockAccordionBlockDef = ProductBlockContent & AccordionBlockDef;
-
-/**
- * @title Плитка
- */
-export type TileAccordionBlockDef = TileContent & AccordionBlockDef;
-
-/**
- * @title Продуктовая плитка
- */
-export type ProductTileAccordionBlockDef = ProductTileContent & AccordionBlockDef;
-
-/**
- * @title Галлерея
- */
-export type GalleryAccordionBlockDef = GalleryContent & AccordionBlockDef;
-
-/**
- * @title Мини-галлерея
- */
-export type MiniGalleryAccordionBlockDef = MiniGalleryContent & AccordionBlockDef;
-
-/**
- * @title Список ссылок
- */
-export type LinkListAccordionBlockDef = LinkListContent & AccordionBlockDef;
-
-/**
- * @title Выберите блок
- */
-export type EmptyOption = null;
-
-/**
- * @title Содержимое аккордеона
- */
-export type AccordionBlockProps =
-  | EmptyOption
-  | HeadlineAccordionBlockDef
-  | LinkDocsAccordionBlockDef
-  | TextBlockAccordionBlockDef
-  | PictureTextAccordionBlockDef
-  | ProductBlockAccordionBlockDef
-  | TileAccordionBlockDef
-  | ProductTileAccordionBlockDef
-  | GalleryAccordionBlockDef
-  | MiniGalleryAccordionBlockDef
-  | LinkListAccordionBlockDef;
-
-/**
- * @title Количество колонок
- * @enumNames ["1 колонка", "2 колонки"]
- */
-export type ColumnsCount = 1 | 2;
+import type { BlockDef, ColumnsCount } from '../../ui-kit/BlocksList/BlocksListProps';
 
 /**
  * @title Элемент списка
@@ -115,13 +10,12 @@ export interface AccordionItemCommonProps {
    */
   label?: string;
   /** @title Блоки */
-  blocks?: AccordionBlockProps[];
+  blocks?: BlockDef[];
   /**
    * @title Отображать/скрывать обводку элемента
    * @default false
    */
   bordered?: boolean; // TODO: только для мобильной версии
-
   columns?: ColumnsCount;
 }
 
@@ -133,7 +27,7 @@ export interface AccordionContent {
   title?: string;
   /** @title Список */
   accordionItems?: AccordionItemCommonProps[];
-  /** @title Подзаголовок */
+  /** @title Описание */
   description?: string; // TODO: только для мобильной версии
   /**
    * @title Отображать/скрывать обводку у элемента списка

package/src/components/Accordion/AccordionItem.mobile.tsx

@@ -3,12 +3,12 @@ import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { AccordionItemCommonProps } from './AccordionContent';
 import { AccordionItemInner } from './AccordionItemInner';
-import { isActiveHandler } from './utils/isActiveHandler';
+import { useActiveHandler } from './utils/useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
 export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, bordered, context }) => {
-  const { hasContent, icon, handleToggle } = isActiveHandler({
+  const { hasContent, icon, handleToggle } = useActiveHandler({
     context,
     blocks,
   });

package/src/components/Accordion/AccordionItem.tsx

@@ -3,12 +3,12 @@ import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { AccordionItemCommonProps } from './AccordionContent';
 import { AccordionItemInner } from './AccordionItemInner';
-import { isActiveHandler } from './utils/isActiveHandler';
+import { useActiveHandler } from './utils/useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
 export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, columns, context }) => {
-  const { hasContent, icon, handleToggle } = isActiveHandler({
+  const { hasContent, icon, handleToggle } = useActiveHandler({
     context,
     blocks,
   });

package/src/components/Accordion/AccordionItemInner.mobile.tsx

@@ -1,28 +1,13 @@
 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, context }) => {
+  const className = 'mb-5 last:mb-0 first:mt-2';
+  const columns = 1;
   return (
     <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
-      {blocks?.length ? blocks.map(renderBlock(context)) : null}
+      {renderBlocksList({ context, className, columns, blocks })}
     </div>
   );
 });
-
-const renderBlock = (context: ContentPageContext) => (block: AccordionBlockProps, i: number) => {
-  const type = block?.accordionBlockType;
-  if (!type || !(type in AccordionBlocks)) {
-    return null;
-  }
-
-  const AccordionBlock: JSXBlock = AccordionBlocks[type];
-  return (
-    <div className="mb-5 last:mb-0 first:mt-2" key={`block_${i}`}>
-      <AccordionBlock context={context} {...block} className="!p-0" />
-    </div>
-  );
-};

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/Blocks.ts

@@ -18,6 +18,7 @@ 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';
@@ -43,6 +44,7 @@ export const Blocks = {
   ProductGalleryGreen,
   ProductTile,
   PromoTile,
+  OtherProducts,
   Recommendation,
   StepsBlock,
   TariffsTable,

package/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -49,6 +49,24 @@ export interface RowHeader {
   /** @title Заголовок */
   title?: string;
 }
+
+/**
+ * @title Ячейка
+ */
+export interface TableColumnData {
+  rowHeader?: string;
+  cell: CellData[];
+}
+
+/**
+ * @title Параметр
+ */
+export interface TableColumnHeader {
+  /** @title Заголовок */
+  title?: string;
+  icon?: IconName;
+}
+
 /**
  * @title Сравнительная таблица
  */

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -13,6 +13,7 @@ export interface HeaderCellProps {
   image?: Picture;
   title?: string;
   link?: LinkProps;
+  isFillGradient?: boolean;
 }
 
 export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) => (

package/src/components/ComparisonTable/TableColumn.tsx

@@ -5,10 +5,11 @@ import { Button } from '../../ui-kit/Button/Button';
 import { GRADIENT } from './constants';
 import { HeaderCell } from './HeaderCell';
 import { TableCell } from './TableCell';
+import type { TableColumnData, TableColumnHeader } from './ComparisonTableContent';
 
 export interface TableColumnProps extends UniBlockProps {
-  header: any;
-  columnData: any;
+  header: TableColumnHeader;
+  columnData: TableColumnData[];
   visibleRowLength: number;
   isFillGradient: boolean;
   showRow: boolean;

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

@@ -1394,7 +1394,7 @@
         "title": "Своя кредитная карта",
         "description": "Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.",
         "align": "center",
-        "bgColor": "transparent"
+        "bgColorHeadline": "transparent"
       }
     },
     {

package/src/components/Gallery/Gallery.example.json

@@ -6,8 +6,8 @@
       "image": {
         "format": "webp",
         "size": {
-          "width": 140,
-          "height": 140
+          "width": 150,
+          "height": 150
         }
       },
       "title": "Заголовок 1",
@@ -55,24 +55,6 @@
         {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
         {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
       ]
-    },
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 140,
-          "height": 140
-        }
-      },
-      "title": "Заголовок 4",
-      "description": "Описание 4",
-      "href": "/credit-cards",
-      "version": "primary",
-      "items": [
-        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
-        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
-        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
-      ]
     }
   ]
 }

package/src/components/Gallery/GalleryContent.ts

@@ -38,7 +38,7 @@ export interface GalleryContent {
   description?: string;
   /**
    * @title Карточки
-   * @minItems 4
+   * @minItems 3
    */
   cards?: GalleryCard[];
   /** @title Горизонтальная прокрутка (для мобильных прокрутка shift+mouseScroll) */

package/src/components/Headline/Headline.example.json

@@ -2,5 +2,12 @@
   "title": "Заголовок",
   "description": "Описание",
   "align": "center",
-  "bgColorHeadline": "transparent"
+  "bgColorHeadline": "transparent",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 180,
+      "height": 180
+    }
+  }
 }

package/src/components/Headline/Headline.tsx

@@ -15,12 +15,14 @@ export const Headline = JSX<HeadlineProps>(
         {title && (
           <Heading
             headingType="h2"
-            className={`text-primary-text ${ALIGN_TEXT[align]}`}
+            className={`text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}
             title={title}
           />
         )}
         {description && (
-          <p className={`font-normal text-base mt-4 ${ALIGN_TEXT[align]}`}>{description}</p>
+          <p className={`font-normal text-base mt-4 ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}>
+            {description}
+          </p>
         )}
       </section>
     );

package/src/components/LinkDocs/LinkDocs.example.json

@@ -1,6 +1,6 @@
 {
-  "title": "Дополнительные документы",
-  "subtitle": "Ответы на часто задаваемые вопросы",
+  "title": "Список документов",
+  "subtitle": "Описание",
   "icon": "DocIcon",
   "documents": [
     {

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -34,7 +34,7 @@ export interface LinkDocsItem extends LinkProps {
 export interface LinkDocsContent {
   /** @title Заголовок */
   title?: string;
-  /** @title Подзаголовок */
+  /** @title Описание */
   subtitle?: string;
   /** @title Название иконки */
   icon?: IconName;

package/src/components/LinkDocs/LinkDocsHorizontalList.tsx

@@ -16,7 +16,7 @@ export const LinkDocsHorizontalList = JSX<LinkDocsHorizontalListProps>(
           ? documents.map((doc, i) => (
               <LinkDocsListItem
                 key={String(i)}
-                className={hasBorder ? 'rounded-md border-main-stroke border p-4' : ''}
+                className={hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : ''}
                 doc={doc}
                 icon={icon}
               />

package/src/components/LinkDocs/LinkDocsVerticalList.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { IconName } from '../../icons/IconName';
 import type { LinkDocsItem } from './LinkDocsContent';
 import { LinkDocsListItem } from './LinkDocsListItem';
 
@@ -20,7 +20,9 @@ export const LinkDocsVerticalList = JSX<LinkDocsVerticalListProps>(
           ? documents.map((doc, i) => (
               <div key={String(i)} role="listitem">
                 <LinkDocsListItem
-                  className={hasBorder ? 'rounded-md border-main-stroke border p-4' : ''}
+                  className={
+                    hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : ''
+                  }
                   doc={doc}
                   icon={icon}
                 />

package/src/components/MiniGallery/MiniGalleryContent.ts

@@ -2,5 +2,6 @@ import type { GalleryContent } from '../Gallery/GalleryContent';
 
 /**
  * @title Мини-галерея
+ * @minItems 3
  */
 export type MiniGalleryContent = GalleryContent;

package/src/components/MobileAppTile/MobileAppTile.mobile.tsx

@@ -19,7 +19,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
             <div className="flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]">
               <Logo className="w-[33px]" bgColor="transparent" hideTitle />
             </div>
-            <a href={href} target="_blank" className="flex flex-col justify-center pl-3">
+            <a href={href} target="_blank" className="flex flex-col justify-center pl-3 font-sans">
               <div className="text-m-button font-medium mb-[3px]">{title}</div>
               <div className="text-m-button text-secondary-text">{description}</div>
             </a>

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>
+  ),
+};