@redneckz/wildless-cms-uni-blocks 0.2.72 → 0.2.75

package/src/ComparisonTable/ComparisonTableContent.ts

@@ -0,0 +1,43 @@
+import type { LinkContent } from '../model/LinkContent';
+import type { Picture } from '../model/Picture';
+import type { ButtonProps } from '../ui-kit/ButtonProps';
+import type { IconName } from '../ui-kit/IconProps';
+
+export type Row = {
+  header: RowHeader;
+  data: CellData[][];
+};
+
+export type RowData = Row[] | undefined;
+
+export interface CellData {
+  label?: string;
+  description?: string;
+  icons?: IconName[];
+  image?: Picture;
+  buttons?: ButtonProps[];
+}
+
+export interface ColumnHeader {
+  title?: string;
+  icon?: IconName;
+  image?: Picture;
+  link?: LinkContent;
+}
+export interface Column {
+  header?: ColumnHeader;
+  data?: CellData[][];
+}
+
+export interface RowHeader {
+  title?: string;
+  icon?: IconName;
+}
+
+export interface ComparisonTableContent {
+  title?: string;
+  rowHeaders?: RowHeader[];
+  columns?: Column[];
+  visibleRowLength?: number;
+  isColoredFirstColumn?: boolean;
+}

package/src/ComparisonTable/HeaderCell.tsx

@@ -0,0 +1,50 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkContent } from '../model/LinkContent';
+import type { Picture } from '../model/Picture';
+import { Button } from '../ui-kit/Button';
+import { Icon } from '../ui-kit/Icon';
+import type { IconName } from '../ui-kit/IconProps';
+import { Img } from '../ui-kit/Img';
+import { Title } from '../ui-kit/Title';
+import { BORDER_CLASSES, GRADIENT } from './constants';
+
+export interface HeaderCellProps {
+  icon?: IconName;
+  image?: Picture;
+  title?: string;
+  link?: LinkContent;
+}
+
+export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) => (
+  <div
+    className={`w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-12 ${BORDER_CLASSES} ${GRADIENT}`}
+    role="columnheader"
+    scope="col"
+  >
+    {icon && !image?.src && (
+      <Icon
+        className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
+        name={icon}
+        width="63"
+        height="63"
+      />
+    )}
+    {image?.src && <Img className="mb-4" image={image} />}
+    {title && (
+      <Title size="S" className="font-medium m-0 text-center text-white">
+        {title}
+      </Title>
+    )}
+    {link?.text && (
+      <div className="mt-auto w-full">
+        <Button
+          href={link.href}
+          target={link.target}
+          className="mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active"
+        >
+          <div className="text-xs py-[11px]">{link.text}</div>
+        </Button>
+      </div>
+    )}
+  </div>
+));

package/src/ComparisonTable/TableCarouselContainer.tsx

@@ -0,0 +1,19 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { COLUMN_WIDTH } from './constants';
+
+export interface TableCarouselContainerProps {
+  activeCardIndex: number;
+}
+
+export const TableCarouselContainer = JSX<TableCarouselContainerProps>(
+  ({ children, activeCardIndex }) => (
+    <div className="flex flex-1 overflow-hidden">
+      <div
+        className="flex gap-4 duration-1000"
+        style={{ transform: `translateX(-${activeCardIndex * COLUMN_WIDTH}px)` }}
+      >
+        {children}
+      </div>
+    </div>
+  ),
+);

package/src/ComparisonTable/TableCell.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { CellData } from './ComparisonTableContent';
+import { BORDER_CLASSES, DIVIDER_CLASSES, GRADIENT } from './constants';
+
+export interface TableCellProps {
+  cell: CellData[];
+  isLastRow: boolean;
+  isFirstRow: boolean;
+  isFillGradient: boolean;
+}
+
+export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
+  const cellWrapperClasses = `w-80 box-border flex flex-col ${BORDER_CLASSES} ${
+    !isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'
+  } ${isFillGradient ? GRADIENT : ''}`;
+
+  const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES} ${
+    isFillGradient && isFirstRow ? 'border-t' : ''
+  } ${!isLastRow ? 'border-solid' : ''}`;
+
+  return (
+    <div className={cellWrapperClasses} role="cell">
+      <div className={cellClasses}>
+        {cell.map((item, i) => renderCellInner(item, i, isFillGradient))}
+      </div>
+    </div>
+  );
+});
+
+const renderCellInner = ({ label, description }: CellData, i: number, isFillGradient: boolean) => (
+  <div key={String(i)} className="first:pt-7 pt-6 last:pb-7">
+    {label && (
+      <h5 className={`text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`}>{label}</h5>
+    )}
+    {description && (
+      <div
+        className={`text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`}
+      >
+        {description}
+      </div>
+    )}
+  </div>
+);

package/src/ComparisonTable/TableRow.tsx

@@ -0,0 +1,44 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { Row } from './ComparisonTableContent';
+import { DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
+import { TableCarouselContainer } from './TableCarouselContainer';
+import { TableCell } from './TableCell';
+import { TableRowContainer } from './TableRowContainer';
+
+export interface TableRowProps {
+  className?: string;
+  row: Row;
+  activeCardIndex: number;
+  isColoredFirstColumn: boolean;
+  isFirstRow: boolean;
+  isLastRow: boolean;
+}
+
+export const TableRow = JSX<TableRowProps>(
+  ({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (
+    <TableRowContainer>
+      {header?.title ? (
+        <div
+          className={`text-sm py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
+            !isLastRow ? 'border-solid' : ''
+          }`}
+        >
+          {header.title}
+        </div>
+      ) : null}
+      {data?.length ? (
+        <TableCarouselContainer activeCardIndex={activeCardIndex}>
+          {data.map((cell, i) => (
+            <TableCell
+              key={String(i)}
+              cell={cell}
+              isFirstRow={isFirstRow}
+              isLastRow={isLastRow}
+              isFillGradient={isColoredFirstColumn && i === 0}
+            />
+          ))}
+        </TableCarouselContainer>
+      ) : null}
+    </TableRowContainer>
+  ),
+);

package/src/ComparisonTable/TableRowContainer.tsx

@@ -0,0 +1,7 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export const TableRowContainer = JSX(({ children }) => (
+  <div className="self-start flex flex-col" role="row">
+    <div className="flex">{children}</div>
+  </div>
+));

package/src/ComparisonTable/constants.ts

@@ -0,0 +1,6 @@
+export const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
+export const BORDER_CLASSES = 'border-main-stroke border-solid border';
+export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
+export const FIRST_CELL_CLASSES = 'w-[200px] mr-6';
+export const COLS_LENGTH_FOR_SCROLL = 2;
+export const COLUMN_WIDTH = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px

package/src/ComparisonTable/index.ts

@@ -0,0 +1,3 @@
+export { ComparisonTable } from './ComparisonTable';
+export type { ComparisonTableProps } from './ComparisonTable';
+export type { ComparisonTableContent } from './ComparisonTableContent';

package/src/ContentPage.page.json

@@ -819,7 +819,469 @@
         ]
       }
     },
-
+    {
+      "type": "MiniGallery",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Вы можете оплатить бонусными баллами",
+        "description": "Удобный каталог с большим ассортиментом товаров и сервисов",
+        "cards": [
+          {
+            "image": {
+              "src": "domovoj-kupon.png",
+              "title": "Деньги",
+              "format": "webp",
+              "size": {
+                "width": 120,
+                "height": 70
+              }
+            },
+            "title": "Более 5000 товаров",
+            "description": "Время копить: ставка растет в зависимости от срока нахождения средств на Счете!"
+          },
+          {
+            "image": {
+              "src": "domovoj-kupon.png",
+              "title": "Деньги",
+              "format": "webp",
+              "size": {
+                "width": 120,
+                "height": 70
+              }
+            },
+            "title": "Более 1000 развлечений",
+            "description": "Порядок и условия предоставления в соответствии с 106 ФЗ"
+          },
+          {
+            "image": {
+              "src": "domovoj-kupon.png",
+              "title": "Деньги",
+              "format": "webp",
+              "size": {
+                "width": 120,
+                "height": 70
+              }
+            },
+            "title": "Фермерские продукты",
+            "description": "Высокий процент даже при небольшой сумме денежных средств"
+          },
+          {
+            "image": {
+              "src": "domovoj-kupon.png",
+              "title": "Деньги",
+              "format": "webp",
+              "size": {
+                "width": 120,
+                "height": 70
+              }
+            },
+            "title": "«Моя выгода»",
+            "description": "Время копить: ставка растет в зависимости от срока нахождения средств на Счете!"
+          },
+          {
+            "image": {
+              "src": "domovoj-kupon.png",
+              "title": "Деньги",
+              "format": "webp",
+              "size": {
+                "width": 120,
+                "height": 70
+              }
+            },
+            "title": "Фермерские продукты",
+            "description": "Высокий процент даже при небольшой сумме денежных средств"
+          }
+        ]
+      }
+    },
+    {
+      "type": "ComparisonTable",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Другие вклады и сбережения",
+        "rowHeaders": [
+          {
+            "title": "Начисление процентов на остаток по счету"
+          },
+          {
+            "title": "Снятие наличных"
+          },
+          {
+            "title": "Оформление онлайн"
+          },
+          {
+            "title": "Кэшбэк баллами"
+          },
+          {
+            "title": "Стоимость обслуживания"
+          },
+          {
+            "title": "Стоимость SMS-сервиса"
+          },
+          {
+            "title": "Дополнительная информация"
+          }
+        ],
+        "columns": [
+          {
+            "header": {
+              "title": "Россельхоз-Росснефть",
+              "image": {
+                "alt": "card-1",
+                "src": "card-1.png",
+                "format": "webp",
+                "size": {
+                  "width": 100,
+                  "height": 63
+                }
+              },
+              "link": {
+                "text": "Подробнее",
+                "href": "/credits"
+              }
+            },
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "В банкоматах и кассах Россельхозбанка и банков-партнеров"
+                },
+                {
+                  "label": "Бесплатно",
+                  "description": "В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб"
+                }
+              ],
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "До 7%"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "При обороте по карте от 10000 ₽ в месяц"
+                }
+              ],
+              [
+                {
+                  "label": "69 рублей в месяц"
+                }
+              ],
+              [
+                {
+                  "description": "Оплачивайте покупки картой и заправляйтесь за баллы в сети АЗС Роснефть"
+                }
+              ]
+            ]
+          },
+          {
+            "header": {
+              "title": "Panasonic",
+              "image": {
+                "alt": "card-2",
+                "src": "card-2.png",
+                "format": "webp",
+                "size": {
+                  "width": 100,
+                  "height": 63
+                }
+              },
+              "link": {
+                "text": "Подробнее",
+                "href": "/credits"
+              }
+            },
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "В банкоматах и кассах Россельхозбанка и банков-партнеров"
+                },
+                {
+                  "label": "1%",
+                  "description": "В сторонних банкоматах, минимум 150 руб"
+                }
+              ],
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "До 20%"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "При обороте по карте от 10000 ₽ в месяц"
+                }
+              ],
+              [
+                {
+                  "label": "69 рублей в месяц"
+                }
+              ],
+              [
+                {
+                  "description": "Копите баллы каждый день и обменивайте их на скидки на электронику и бытовую технику Panasonic"
+                }
+              ]
+            ]
+          },
+          {
+            "header": {
+              "title": "Профсоюзная",
+              "image": {
+                "alt": "card-3",
+                "src": "card-3.png",
+                "format": "webp",
+                "size": {
+                  "width": 100,
+                  "height": 63
+                }
+              },
+              "link": {
+                "text": "Подробнее",
+                "href": "/credits"
+              }
+            },
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно"
+                }
+              ],
+              [
+                {
+                  "label": "Есть"
+                }
+              ],
+              [
+                {
+                  "label": "До 20%"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "При обороте по карте от 10000 ₽ в месяц"
+                }
+              ],
+              [
+                {
+                  "label": "69 рублей в месяц"
+                }
+              ],
+              [
+                {
+                  "description": "Для членов профсоюзных организаций"
+                }
+              ]
+            ]
+          },
+          {
+            "header": {
+              "title": "Россельхоз-Росснефть",
+              "image": {
+                "alt": "card-1",
+                "src": "card-1.png",
+                "format": "webp",
+                "size": {
+                  "width": 100,
+                  "height": 63
+                }
+              },
+              "link": {
+                "text": "Подробнее",
+                "href": "/credits"
+              }
+            },
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "В банкоматах и кассах Россельхозбанка и банков-партнеров"
+                },
+                {
+                  "label": "Бесплатно",
+                  "description": "В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб"
+                }
+              ],
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "До 7%"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "При обороте по карте от 10000 ₽ в месяц"
+                }
+              ],
+              [
+                {
+                  "label": "69 рублей в месяц"
+                }
+              ],
+              [
+                {
+                  "description": "Оплачивайте покупки картой и заправляйтесь за баллы в сети АЗС Роснефть"
+                }
+              ]
+            ]
+          },
+          {
+            "header": {
+              "title": "Panasonic",
+              "image": {
+                "alt": "card-2",
+                "src": "card-2.png",
+                "format": "webp",
+                "size": {
+                  "width": 100,
+                  "height": 63
+                }
+              },
+              "link": {
+                "text": "Подробнее",
+                "href": "/credits"
+              }
+            },
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "В банкоматах и кассах Россельхозбанка и банков-партнеров"
+                },
+                {
+                  "label": "1%",
+                  "description": "В сторонних банкоматах, минимум 150 руб"
+                }
+              ],
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "До 20%"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "При обороте по карте от 10000 ₽ в месяц"
+                }
+              ],
+              [
+                {
+                  "label": "69 рублей в месяц"
+                }
+              ],
+              [
+                {
+                  "description": "Копите баллы каждый день и обменивайте их на скидки на электронику и бытовую технику Panasonic"
+                }
+              ]
+            ]
+          },
+          {
+            "header": {
+              "title": "Профсоюзная",
+              "image": {
+                "alt": "card-3",
+                "src": "card-3.png",
+                "format": "webp",
+                "size": {
+                  "width": 100,
+                  "height": 63
+                }
+              },
+              "link": {
+                "text": "Подробнее",
+                "href": "/credits"
+              }
+            },
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно"
+                }
+              ],
+              [
+                {
+                  "label": "Есть"
+                }
+              ],
+              [
+                {
+                  "label": "До 20%"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "При обороте по карте от 10000 ₽ в месяц"
+                }
+              ],
+              [
+                {
+                  "label": "69 рублей в месяц"
+                }
+              ],
+              [
+                {
+                  "description": "Для членов профсоюзных организаций"
+                }
+              ]
+            ]
+          }
+        ]
+      }
+    },
     {
       "type": "Footer",
       "style": ["col-span-12"],