@redneckz/wildless-cms-uni-blocks 0.2.88 → 0.2.92

package/src/Icons/VisaIcon.svg

@@ -0,0 +1,7 @@
+<svg id="icon" width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="56" height="56" fill="white"/>
+<path d="M20.3691 35.4068L22.9991 19.7295H27.2057L24.5738 35.4068H20.3691Z" fill="#0E4595"/>
+<path d="M39.7709 20.0671C38.9376 19.7495 37.6317 19.4087 36.0008 19.4087C31.8442 19.4087 28.9163 21.535 28.8913 24.5824C28.8679 26.835 30.9816 28.0917 32.5773 28.8416C34.2147 29.6101 34.7651 30.1002 34.7572 30.7862C34.7467 31.8372 33.4497 32.3171 32.2405 32.3171C30.5569 32.3171 29.6624 32.0795 28.2809 31.4943L27.7388 31.2451L27.1484 34.7546C28.131 35.1923 29.9478 35.5713 31.8343 35.591C36.2562 35.591 39.1268 33.489 39.1594 30.2348C39.1751 28.4513 38.0545 27.0942 35.6275 25.9753C34.1572 25.2501 33.2567 24.7662 33.2663 24.0318C33.2663 23.3802 34.0285 22.6834 35.6754 22.6834C37.0509 22.6617 38.0475 22.9664 38.8238 23.284L39.2008 23.4649L39.7709 20.0671Z" fill="#0E4595"/>
+<path d="M50.595 19.729H47.3446C46.3376 19.729 45.584 20.0082 45.1418 21.0291L38.8945 35.3961H43.3118C43.3118 35.3961 44.0339 33.4644 44.1973 33.0402C44.68 33.0402 48.9712 33.0469 49.5846 33.0469C49.7105 33.5958 50.0964 35.3961 50.0964 35.3961H53.9998L50.595 19.729ZM45.4378 29.8521C45.7858 28.9489 47.1138 25.4697 47.1138 25.4697C47.0891 25.5114 47.4592 24.562 47.6715 23.9734L47.9559 25.325C47.9559 25.325 48.7614 29.0672 48.9297 29.8519H45.4378V29.8521Z" fill="#0E4595"/>
+<path d="M2.05374 19.7295L2 20.0556C3.66289 20.4645 5.14809 21.0563 6.44839 21.7926L10.1809 35.3816L14.6316 35.3766L21.2542 19.7295H16.798L12.6797 30.4202L12.241 28.2475C12.2205 28.1804 12.1981 28.1132 12.1753 28.0458L10.7436 21.053C10.489 20.0603 9.75052 19.7641 8.83688 19.7295H2.05374Z" fill="#0E4595"/>
+</svg>

package/src/Icons/WalletIcon.svg

@@ -0,0 +1,19 @@
+<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.7496 16.8599V18.8899C10.7496 20.6099 9.14963 21.9999 7.17963 21.9999C5.20963 21.9999 3.59961 20.6099 3.59961 18.8899V16.8599C3.59961 18.5799 5.19963 19.7999 7.17963 19.7999C9.14963 19.7999 10.7496 18.5699 10.7496 16.8599Z"
+    stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M10.7498 14.1097C10.7498 14.6097 10.6098 15.0697 10.3698 15.4697C9.77981 16.4397 8.5698 17.0497 7.1698 17.0497C5.7698 17.0497 4.55979 16.4297 3.96979 15.4697C3.72979 15.0697 3.58984 14.6097 3.58984 14.1097C3.58984 13.2497 3.98982 12.4797 4.62982 11.9197C5.27982 11.3497 6.16979 11.0098 7.15979 11.0098C8.14979 11.0098 9.03982 11.3597 9.68982 11.9197C10.3498 12.4697 10.7498 13.2497 10.7498 14.1097Z"
+    stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M10.7496 14.11V16.86C10.7496 18.58 9.14963 19.8 7.17963 19.8C5.20963 19.8 3.59961 18.57 3.59961 16.86V14.11C3.59961 12.39 5.19963 11 7.17963 11C8.16963 11 9.05966 11.35 9.70966 11.91C10.3497 12.47 10.7496 13.25 10.7496 14.11Z"
+    stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M22.0002 10.9702V13.0302C22.0002 13.5802 21.5602 14.0302 21.0002 14.0502H19.0402C17.9602 14.0502 16.9702 13.2602 16.8802 12.1802C16.8202 11.5502 17.0602 10.9602 17.4802 10.5502C17.8502 10.1702 18.3602 9.9502 18.9202 9.9502H21.0002C21.5602 9.9702 22.0002 10.4202 22.0002 10.9702Z"
+    stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M16 3.5C16.26 3.5 16.51 3.50999 16.75 3.54999C19.33 3.84999 21 5.76 21 8.5V9.95001H18.92C18.36 9.95001 17.85 10.17 17.48 10.55C17.06 10.96 16.82 11.55 16.88 12.18C16.97 13.26 17.96 14.05 19.04 14.05H21V15.5C21 18.5 19 20.5 16 20.5H13.5"
+    stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M2 10.5V8.5C2 5.78 3.64 3.88 6.19 3.56C6.45 3.52 6.72 3.5 7 3.5H12" stroke="#1C1C1C" stroke-width="2"
+        stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/BaseTile/BaseTile.tsx

@@ -98,14 +98,9 @@ function renderItems(items: string[] = [], version?: BlockVersion) {
 function renderButton({ icon, ...button }: BaseTileIconButton, i: number) {
   if (!button?.text) return;
 
-  if (icon)
-    return (
-      <Button
-        key={String(i)}
-        appendLeft={<Icon name={icon} width="24" height="24" />}
-        {...button}
-      />
-    );
-
-  return <Button key={String(i)} {...button} />;
+  return icon ? (
+    <Button key={String(i)} appendLeft={<Icon name={icon} width="24" height="24" />} {...button} />
+  ) : (
+    <Button key={String(i)} {...button} />
+  );
 }

package/src/components/BlockContent.ts

@@ -15,6 +15,7 @@ import type { PromoTileContent } from './PromoTile/PromoTileContent';
 import type { StepsBlockContent } from './StepsBlock/StepsBlockContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
+import { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 
 /**
  * @hidden
@@ -35,5 +36,6 @@ export type BlockContent =
   | ProductTileContent
   | PromoTileContent
   | StepsBlockContent
+  | TariffsTableContent
   | TextBlockContent
   | TileContent;

package/src/components/Blocks.ts

@@ -19,6 +19,7 @@ import { PromoTile } from './PromoTile/PromoTile';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
+import { TariffsTable } from './TariffsTable/TariffsTable';
 
 export const Blocks = {
   Accordion,
@@ -40,6 +41,7 @@ export const Blocks = {
   ProductTile,
   PromoTile,
   StepsBlock,
+  TariffsTable,
   TextBlock,
   Tile,
 };

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -5,10 +5,11 @@ import { Title } from '../../ui-kit/Title/Title';
 import { TableRowContainer } from './TableRowContainer';
 import { TableCarouselContainer } from './TableCarouselContainer';
 import { useLink } from '../../hooks/useLink';
-import type { ComparisonTableContent, RowData } from './ComparisonTableContent';
+import type { ComparisonTableContent } from './ComparisonTableContent';
 import { HeaderCell } from './HeaderCell';
 import { TableRow } from './TableRow';
-import { COLS_LENGTH_FOR_SCROLL, FIRST_CELL_CLASSES } from './constants';
+import { COLS_LENGTH_FOR_SCROLL, COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
+import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
 
 export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
 
@@ -24,26 +25,28 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
   }) => {
     const router = context.useRouter();
     const { handlerDecorator } = context;
+
     const [activeCardIndex, setActiveCardIndex] = context.useState(0);
     const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
 
     const colHeaders = columns?.map(({ header }) => header || {});
     const colData = columns?.map(({ data }) => data) || [];
-    const rowData: RowData = rowHeaders
+    const rowData = rowHeaders
       ?.map((header, i) => ({
         header,
         data: colData.map((col) => col?.[i] || [{}]),
       }))
       .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
 
-    const nextClick = () => setActiveCardIndex(activeCardIndex + 1);
-    const prevClick = () => setActiveCardIndex(activeCardIndex - 1);
-    const showToggle = () => setIsShowAllRow(!isShowAllRow);
+    const { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton } =
+      useComparisonTableScroll(
+        colData,
+        COLS_LENGTH_FOR_SCROLL,
+        activeCardIndex,
+        setActiveCardIndex,
+      );
 
-    const isScrollAvailable = colData?.length && colData.length > COLS_LENGTH_FOR_SCROLL;
-    const showNextButton =
-      isScrollAvailable && colData?.length - activeCardIndex > COLS_LENGTH_FOR_SCROLL;
-    const showPrevButton = isScrollAvailable && activeCardIndex > 0;
+    const showToggle = () => setIsShowAllRow(!isShowAllRow);
 
     return (
       <section
@@ -56,7 +59,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
           {colHeaders?.length ? (
             <TableRowContainer>
               <div className={FIRST_CELL_CLASSES} role="columnheader" scope="col" />
-              <TableCarouselContainer activeCardIndex={activeCardIndex}>
+              <TableCarouselContainer activeCardIndex={activeCardIndex} columnWidth={COLUMN_WIDTH}>
                 {colHeaders.map((header, i) => (
                   <HeaderCell
                     key={String(i)}

package/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -1,6 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 
 /**
@@ -11,11 +10,6 @@ export type Row = {
   data: CellData[][];
 };
 
-/**
- * @hidden
- */
-export type RowData = Row[] | undefined;
-
 /**
  * @title Ячейка
  */
@@ -24,18 +18,6 @@ export interface CellData {
   label?: string;
   /** @title Описание */
   description?: string;
-  /**
-   *  @title Иконки
-   *  @hidden
-   */
-  icons?: IconName[];
-  /** @hidden */
-  image?: Picture;
-  /**
-   * @title Кнопки
-   * @hidden
-   */
-  buttons?: ButtonProps[];
 }
 
 /**
@@ -44,11 +26,9 @@ export interface CellData {
 export interface ColumnHeader {
   /** @title Заголовок */
   title?: string;
-  /** @hidden */
   icon?: IconName;
   /** @hidden */
   image?: Picture;
-  /** @hidden */
   link?: LinkProps;
 }
 
@@ -67,7 +47,6 @@ export interface Column {
 export interface RowHeader {
   /** @title Заголовок */
   title?: string;
-  icon?: IconName;
 }
 /**
  * @title Сравнительная таблица

package/src/components/ComparisonTable/TableCarouselContainer.tsx

@@ -1,16 +1,23 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { COLUMN_WIDTH } from './constants';
+import { TableVersion } from '../../model/TableVersion';
 
 export interface TableCarouselContainerProps {
   activeCardIndex: number;
+  columnWidth: number;
+  version?: TableVersion;
 }
 
+const carouselContainerClassesMap: Record<TableVersion, string> = {
+  comparison: 'flex gap-4 duration-1000',
+  tariff: 'flex flex-grow duration-1000',
+};
+
 export const TableCarouselContainer = JSX<TableCarouselContainerProps>(
-  ({ children, activeCardIndex }) => (
+  ({ children, activeCardIndex, columnWidth, version = 'comparison' }) => (
     <div className="flex flex-1 overflow-hidden">
       <div
-        className="flex gap-4 duration-1000"
-        style={{ transform: `translateX(-${activeCardIndex * COLUMN_WIDTH}px)` }}
+        className={carouselContainerClassesMap[version]}
+        style={{ transform: `translateX(-${activeCardIndex * columnWidth}px)` }}
       >
         {children}
       </div>

package/src/components/ComparisonTable/TableRow.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { Row } from './ComparisonTableContent';
-import { DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
+import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
 import { TableCarouselContainer } from './TableCarouselContainer';
 import { TableCell } from './TableCell';
 import { TableRowContainer } from './TableRowContainer';
@@ -27,7 +27,7 @@ export const TableRow = JSX<TableRowProps>(
         </div>
       ) : null}
       {data?.length ? (
-        <TableCarouselContainer activeCardIndex={activeCardIndex}>
+        <TableCarouselContainer activeCardIndex={activeCardIndex} columnWidth={COLUMN_WIDTH}>
           {data.map((cell, i) => (
             <TableCell
               key={String(i)}

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

@@ -1425,6 +1425,421 @@
         ]
       }
     },
+    {
+      "type": "TariffsTable",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Другие дебетовые карты Россельхозбанка",
+        "rowHeaders": [
+          {
+            "title": "Начисление процентов на остаток по счету",
+            "icon": "OkIcon"
+          },
+          {
+            "title": "Снятие наличных",
+            "icon": "GlassIcon"
+          },
+          {
+            "title": "Оформление онлайн",
+            "icon": "ShieldTickIcon"
+          },
+          {
+            "title": "Кэшбэк баллами"
+          },
+          {
+            "title": "Стоимость обслуживания"
+          },
+          {
+            "title": "Стоимость SMS-сервиса"
+          },
+          {
+            "title": "Дополнительная информация"
+          }
+        ],
+        "columns": [
+          {
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "В банкоматах и кассах Россельхозбанка и банков-партнеров"
+                },
+                {
+                  "label": "Бесплатно",
+                  "description": "В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб"
+                }
+              ],
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Платёжные системы картинкой"
+                },
+                {
+                  "image": {
+                    "src": "payment-systems.png",
+                    "format": "webp",
+                    "size": {
+                      "width": 288,
+                      "height": 56
+                    }
+                  }
+                }
+              ],
+              [
+                {
+                  "label": "Кнопки-иконки"
+                },
+                {
+                  "buttons": [
+                    {
+                      "icon": "AppleIcon",
+                      "rounded": true,
+                      "version": "secondary",
+                      "href": "/_blank",
+                      "target": "_blank"
+                    },
+                    {
+                      "icon": "PlayMarketIcon",
+                      "rounded": true,
+                      "version": "secondary",
+                      "href": "/secondary"
+                    }
+                  ]
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "list": {
+                    "items": [
+                      "item 1",
+                      "item 2",
+                      "item 3"
+                    ]
+                  }
+                }
+              ],
+              [
+                {
+                  "image": {
+                    "src": "money-1.png",
+                    "format": "webp",
+                    "size": {
+                      "width": 140,
+                      "height": 140
+                    }
+                  }
+                }
+              ]
+            ]
+          },
+          {
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "В банкоматах и кассах Россельхозбанка и банков-партнеров"
+                },
+                {
+                  "label": "1%",
+                  "description": "В сторонних банкоматах, минимум 150 руб"
+                }
+              ],
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "До 20%"
+                },
+                {
+                  "list": {
+                    "isDotted": false,
+                    "items": [
+                      "item 1",
+                      "item 2",
+                      "item 3"
+                    ]
+                  }
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "При обороте по карте от 10000 ₽ в месяц"
+                }
+              ],
+              [
+                {
+                  "label": "69 рублей в месяц"
+                },
+                {
+                  "list": {
+                    "version": "primary",
+                    "items": [
+                      "item 1",
+                      "item 2",
+                      "item 3"
+                    ]
+                  }
+                }
+              ],
+              [
+                {
+                  "description": "Копите баллы каждый день и обменивайте их на скидки на электронику и бытовую технику Panasonic"
+                }
+              ]
+            ]
+          },
+          {
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно"
+                }
+              ],
+              [
+                {
+                  "label": "Есть"
+                }
+              ],
+              [
+                {
+                  "label": "До 20%"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "При обороте по карте от 10000 ₽ в месяц"
+                }
+              ],
+              [
+                {
+                  "label": "69 рублей в месяц"
+                }
+              ],
+              [
+                {
+                  "description": "Для членов профсоюзных организаций"
+                }
+              ]
+            ]
+          },
+          {
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "В банкоматах и кассах Россельхозбанка и банков-партнеров"
+                },
+                {
+                  "label": "Бесплатно",
+                  "description": "В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб"
+                }
+              ],
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Платёжные системы картинкой"
+                },
+                {
+                  "image": {
+                    "src": "payment-systems.png",
+                    "format": "webp",
+                    "size": {
+                      "width": 288,
+                      "height": 56
+                    }
+                  }
+                }
+              ],
+              [
+                {
+                  "label": "Кнопки-иконки"
+                },
+                {
+                  "buttons": [
+                    {
+                      "icon": "AppleIcon",
+                      "rounded": true,
+                      "version": "secondary",
+                      "href": "/_blank",
+                      "target": "_blank"
+                    },
+                    {
+                      "icon": "PlayMarketIcon",
+                      "rounded": true,
+                      "version": "secondary",
+                      "href": "/secondary"
+                    }
+                  ]
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "list": {
+                    "items": [
+                      "item 1",
+                      "item 2",
+                      "item 3"
+                    ]
+                  }
+                }
+              ],
+              [
+                {
+                  "image": {
+                    "src": "money-1.png",
+                    "format": "webp",
+                    "size": {
+                      "width": 140,
+                      "height": 140
+                    }
+                  }
+                }
+              ]
+            ]
+          },
+          {
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "В банкоматах и кассах Россельхозбанка и банков-партнеров"
+                },
+                {
+                  "label": "1%",
+                  "description": "В сторонних банкоматах, минимум 150 руб"
+                }
+              ],
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "До 20%"
+                },
+                {
+                  "list": {
+                    "isDotted": false,
+                    "items": [
+                      "item 1",
+                      "item 2",
+                      "item 3"
+                    ]
+                  }
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "При обороте по карте от 10000 ₽ в месяц"
+                }
+              ],
+              [
+                {
+                  "label": "69 рублей в месяц"
+                },
+                {
+                  "list": {
+                    "version": "primary",
+                    "items": [
+                      "item 1",
+                      "item 2",
+                      "item 3"
+                    ]
+                  }
+                }
+              ],
+              [
+                {
+                  "description": "Копите баллы каждый день и обменивайте их на скидки на электронику и бытовую технику Panasonic"
+                }
+              ]
+            ]
+          },
+          {
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно"
+                }
+              ],
+              [
+                {
+                  "label": "Есть"
+                }
+              ],
+              [
+                {
+                  "label": "До 20%"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "При обороте по карте от 10000 ₽ в месяц"
+                }
+              ],
+              [
+                {
+                  "label": "69 рублей в месяц"
+                }
+              ],
+              [
+                {
+                  "description": "Для членов профсоюзных организаций"
+                }
+              ]
+            ]
+          }
+        ]
+      }
+    },
     {
       "type": "PictureText",
       "style": ["col-span-12"],

package/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -13,8 +13,6 @@ export interface QRCode {
 /**
  * @title Мобильное приложение
  */
-export interface MobileAppTileContent extends BaseTileCommonProps {
-  /** @title Заголовок */
-  title?: string;
+export interface MobileAppTileContent extends Pick<BaseTileCommonProps, 'title' | 'buttons'> {
   qr?: QRCode;
 }