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

package/mobile/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/mobile/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, bordered, context }) => {
-  const { hasContent, icon, handleToggle } = isActiveHandler({
+  const { hasContent, icon, handleToggle } = useActiveHandler({
     context,
     blocks,
   });

package/mobile/src/components/Accordion/AccordionItemInner.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/mobile/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/mobile/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/mobile/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/mobile/src/components/ContentPage/ContentPage.page.json

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

package/mobile/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/mobile/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/mobile/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/mobile/src/components/LinkDocs/LinkDocs.example.json

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

package/mobile/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/mobile/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/mobile/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/mobile/src/components/MiniGallery/MiniGalleryContent.ts

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

package/mobile/src/components/MobileAppTile/MobileAppTile.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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/components/ProductBlock/ProductBlock.example.json

@@ -4,7 +4,8 @@
   "image": {
     "format": "webp",
     "size": {
-      "width": 300
+      "width": 234,
+      "height": 234
     }
   },
   "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],

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

@@ -10,7 +10,8 @@
         "image": {
           "format": "webp",
           "size": {
-            "width": 280
+            "width": 234,
+            "height": 234
           }
         },
         "description": "Описание",

package/mobile/src/components/StepsBlock/StepsBlock.example.json

@@ -1,4 +1,5 @@
 {
+  "version": "primary",
   "title": "Шаги",
   "description": "Описание",
   "showLines": true,

package/mobile/src/components/TextBlock/TextBlock.example.json

@@ -6,8 +6,8 @@
   "image": {
     "format": "webp",
     "size": {
-      "width": 48,
-      "height": 48
+      "width": 43,
+      "height": 43
     }
   }
 }

package/mobile/src/components/TextBlock/TextBlockContent.ts

@@ -1,7 +1,7 @@
 import type { Picture } from '../../model/Picture';
 
 /**
- * @title Цвет плитки
+ * @title Цвет блока
  * @enumNames ["Основная", "Второстепенная", "Второстепенная прозрачная"]
  */
 export type TextBlockVersion = 'primary' | 'secondary' | 'secondary-light';

package/mobile/src/components/Tile/Tile.example.json

@@ -6,9 +6,7 @@
     "format": "webp",
     "size": {
       "width": 300
-    },
-    "alt": "Описание картинки",
-    "title": "Подсказка"
+    }
   },
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "buttons": [

package/mobile/src/icons/ArrowDownIcon.svg

@@ -0,0 +1,4 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.8416 10.709L11.6582 12.8923C11.0166 13.534 9.96657 13.534 9.3249 12.8923L3.8999 7.45898" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.1001 7.45898L16.2334 8.32565" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/mobile/src/icons/ArrowUpIcon.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3416 9.29163L11.1582 7.10829C10.5166 6.46662 9.46657 6.46662 8.8249 7.10829L3.3999 12.5416" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.6001 12.5416L15.7334 11.675" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>