@redneckz/wildless-cms-uni-blocks 0.2.91 → 0.2.94

package/src/components/TariffsTable/TariffsTable.example.json

@@ -0,0 +1,87 @@
+{
+  "title": "Заголовок",
+  "rowHeaders": [
+    {
+      "title": "Параметр 1",
+      "icon": "MoneyIcon"
+    },
+    {
+      "title": "Параметр 2",
+      "icon": "DollarIcon"
+    },
+    {
+      "title": "Параметр 3"
+    },
+    {
+      "title": "Параметр 4"
+    }
+  ],
+  "columns": [
+    {
+      "data": [
+        [
+          {
+            "label": "Ячейка 1"
+          }
+        ],
+        [
+          {
+            "label": "Ячейка 2-1",
+            "description": "Описание для ячейки 2-1"
+          },
+          {
+            "label": "Ячейка 2-2",
+            "description": "Описание для ячейки 2-2"
+          }
+        ],
+        [
+          {
+            "label": "Ячейка 3-1",
+            "description": "Описание для ячейки 3-1"
+          },
+          {
+            "label": "Ячейка 3-2",
+            "buttons": [
+              {
+                "icon": "AppleIcon",
+                "rounded": true,
+                "version": "secondary",
+                "href": "/_blank",
+                "target": "_blank"
+              },
+              {
+                "icon": "PlayMarketIcon",
+                "rounded": true,
+                "version": "secondary",
+                "href": "/secondary"
+              }
+            ]
+          }
+        ],
+        [
+          {
+            "image": {
+              "src": "payment-systems.png",
+              "format": "webp",
+              "size": {
+                "width": 288,
+                "height": 56
+              },
+              "alt": "Описание картинки",
+              "title": "Подсказка"
+            }
+          },
+          {
+            "list": {
+              "items": [
+                "item 1",
+                "item 2",
+                "item 3"
+              ]
+            }
+          }
+        ]
+      ]
+    }
+  ]
+}

package/src/components/TariffsTable/TariffsTable.fixture.tsx

@@ -0,0 +1,195 @@
+import { context } from '../../setup-fixture';
+import { TariffsTable } from './TariffsTable';
+import type { Picture } from '../../model/Picture';
+import type { TariffsTableColumn, TariffsTableRowHeader } from './TariffsTableContent';
+
+const image: Picture = {
+  src: 'payment-systems.png',
+  format: 'webp',
+  size: {
+    width: 288,
+    height: 56,
+  },
+  alt: 'Платёжные системы',
+  title: 'Платёжные системы',
+};
+
+const rowHeaders: TariffsTableRowHeader[] = [
+  { title: 'Начисление процентов на остаток по счету', icon: 'OkIcon' },
+  { title: 'Снятие наличных', icon: 'GlassIcon' },
+  { title: 'Оформление онлайн', icon: 'ShieldTickIcon' },
+  { title: 'Кэшбэк баллами' },
+  { title: 'Стоимость обслуживания' },
+  { title: 'Стоимость SMS-сервиса' },
+  { title: 'Дополнительная информация' },
+];
+
+const columns: TariffsTableColumn[] = [
+  {
+    data: [
+      [{ label: 'Нет' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
+        },
+        {
+          label: 'Бесплатно',
+          description: 'В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб',
+        },
+      ],
+      [{ label: 'Нет' }],
+      [{ label: 'Платёжные системы картинкой' }, { image: image }],
+      [
+        { 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,
+            },
+            alt: 'Деньги',
+          },
+        },
+      ],
+    ],
+  },
+  {
+    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: 'Для членов профсоюзных организаций' }],
+    ],
+  },
+];
+
+export default {
+  default: (
+    <div className="w-[1280px]">
+      <TariffsTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={Array(2).fill(columns).flat()}
+      />
+    </div>
+  ),
+  '1 column': (
+    <div className="w-[1280px]">
+      <TariffsTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={columns.slice(0, 1)}
+      />
+    </div>
+  ),
+  '2 columns': (
+    <div className="w-[1280px]">
+      <TariffsTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={columns.slice(0, 2)}
+      />
+    </div>
+  ),
+  '3 columns': (
+    <div className="w-[1280px]">
+      <TariffsTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={columns.slice(0, 3)}
+      />
+    </div>
+  ),
+};

package/src/components/TariffsTable/TariffsTable.tsx

@@ -0,0 +1,74 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
+import type { UniBlockProps } from '../../types';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import { Title } from '../../ui-kit/Title/Title';
+import { COLS_LENGTH_FOR_SCROLL } from './constants';
+import type { TariffsTableContent } from './TariffsTableContent';
+import { TariffsTableRow } from './TariffsTableRow';
+
+export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
+
+export const TariffsTable = JSX<TariffsTableProps>(
+  ({ className, context, title, rowHeaders, columns }) => {
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+
+    const colData = columns?.map(({ data }) => data) || [];
+    const rowData = rowHeaders?.map((header, i) => ({
+      header,
+      data: colData.map((col) => col?.[i] || [{}]),
+    }));
+
+    const { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton } =
+      useComparisonTableScroll({
+        colData,
+        colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
+        activeCardIndex,
+        setActiveCardIndex,
+      });
+
+    return (
+      <section
+        className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${
+          className || ''
+        }`}
+      >
+        <Title className="font-medium m-0 max-w-[47rem] text-center mb-9 mx-auto">{title}</Title>
+        <div role="table">
+          {rowData?.length ? (
+            <div className="relative">
+              {rowData.map((row, i, { length }) => (
+                <TariffsTableRow
+                  key={String(i)}
+                  row={row}
+                  isLastRow={i + 1 === length}
+                  activeCardIndex={activeCardIndex}
+                />
+              ))}
+              {isScrollAvailable ? (
+                <div>
+                  <div className="absolute top-7 right-7 z-10">
+                    <ArrowButton
+                      onClick={nextClick}
+                      disabled={!showNextButton}
+                      ariaLabel="Пролистать вправо"
+                    />
+                    <ArrowButton
+                      className="mt-4 rotate-180"
+                      onClick={prevClick}
+                      disabled={!showPrevButton}
+                      ariaLabel="Пролистать влево"
+                    />
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+          {isScrollAvailable ? (
+            <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+          ) : null}
+        </div>
+      </section>
+    );
+  },
+);

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -0,0 +1,64 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DIVIDER_CLASSES } from './constants';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+import { Img } from '../../ui-kit/Img';
+import { Button } from '../../ui-kit/Button/Button';
+import type { TariffsTableCellData } from './TariffsTableContent';
+import { Icon } from '../../ui-kit/Icon/Icon';
+
+export interface TariffsTableCellProps {
+  cell: TariffsTableCellData[];
+  isLastRow: boolean;
+}
+
+export const TariffsTableCell = JSX<TariffsTableCellProps>(({ cell, isLastRow }) => {
+  const cellWrapperClasses = `first:pl-0 pl-10 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0 ${
+    isLastRow ? 'border-t-0 rounded-b-md' : ''
+  }`;
+
+  const cellClasses = `h-full ${DIVIDER_CLASSES}`;
+
+  return (
+    <div className={cellWrapperClasses} role="cell">
+      <div className={cellClasses}>{cell.map((item, i) => renderCellInner(item, i))}</div>
+    </div>
+  );
+});
+
+const renderCellInner = (
+  { label, description, list, image, buttons }: TariffsTableCellData,
+  i: number,
+) => (
+  <div key={String(i)} className="first:pt-5 last:pb-5">
+    {i > 0 && (
+      <div className="border-main-divider border border-solid border-t-0 border-x-0 my-4" />
+    )}
+    {label && <div className="text-xl font-medium m-0">{label}</div>}
+    {description && <div className="text-sm text-secondary-text">{description}</div>}
+    {list?.items?.length ? (
+      <div className="flex flex-col justify-between items-start">
+        <div role="list">
+          {list.items.map((text, idx) => (
+            <BlockItem
+              key={String(idx)}
+              text={text}
+              version={list.version ?? 'secondary'}
+              isDotted={list.isDotted ?? true}
+            />
+          ))}
+        </div>
+      </div>
+    ) : null}
+    {image && <Img image={image} />}
+    {buttons?.length
+      ? buttons.map(({ icon, ...buttonProps }, idx) => (
+          <Button
+            className={`${idx > 0 ? 'ml-3' : ''} w-12 h-12`}
+            key={String(idx)}
+            appendLeft={icon && <Icon name={icon} width="24px" height="24px" />}
+            {...buttonProps}
+          />
+        ))
+      : null}
+  </div>
+);

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -0,0 +1,61 @@
+import type { CellData, RowHeader } from '../ComparisonTable/ComparisonTableContent';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { Picture } from '../../model/Picture';
+import type { BlockItemVersion } from '../../ui-kit/BlockItem/BlockItemProps';
+import type { BaseTileIconButton } from '../BaseTile/BaseTileProps';
+
+/**
+ * @title Ряд
+ */
+export type TariffsTableRowData = {
+  header: TariffsTableRowHeader;
+  data: TariffsTableCellData[][];
+};
+
+/**
+ * @title Колонка
+ */
+export interface TariffsTableColumn {
+  /** @title Данные */
+  data?: TariffsTableCellData[][];
+}
+
+/**
+ * @title Список
+ */
+export interface TariffsTableList {
+  version?: BlockItemVersion;
+  /** @title Маркеры */
+  isDotted?: boolean;
+  /** @title Элементы списка */
+  items?: string[];
+}
+
+/**
+ * @title Ячейка
+ */
+export interface TariffsTableCellData extends CellData {
+  list?: TariffsTableList;
+  image?: Picture;
+  /** @title Кнопки */
+  buttons?: BaseTileIconButton[];
+}
+
+/**
+ * @title Параметр
+ */
+export interface TariffsTableRowHeader extends RowHeader {
+  icon?: IconName;
+}
+
+/**
+ * @title Таблица тарифов
+ */
+export interface TariffsTableContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Колонки */
+  columns?: TariffsTableColumn[];
+  /** @title Параметры */
+  rowHeaders?: TariffsTableRowHeader[];
+}

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -0,0 +1,46 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { TariffsTableCell } from './TariffsTableCell';
+import { TableRowContainer } from '../ComparisonTable/TableRowContainer';
+import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
+import type { TariffsTableRowData } from './TariffsTableContent';
+
+export interface TariffsTableRowProps {
+  className?: string;
+  row: TariffsTableRowData;
+  activeCardIndex: number;
+  isLastRow: boolean;
+}
+
+export const TariffsTableRow = JSX<TariffsTableRowProps>(
+  ({ row: { header, data }, activeCardIndex, isLastRow }) => {
+    return (
+      <TableRowContainer>
+        <div
+          className={`text-sm py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${
+            !isLastRow ? 'border-solid' : ''
+          }`}
+        >
+          <div className="flex items-center text-primary-text">
+            {header?.icon && (
+              <Icon className="pr-[14px]" name={header.icon} width="24px" height="24px" />
+            )}
+            {header?.title}
+          </div>
+        </div>
+        {data?.length ? (
+          <TableCarouselContainer
+            activeCardIndex={activeCardIndex}
+            columnWidth={COLUMN_WIDTH}
+            version="tariff"
+          >
+            {data.map((cell, i) => (
+              <TariffsTableCell key={String(i)} cell={cell} isLastRow={isLastRow} />
+            ))}
+          </TableCarouselContainer>
+        ) : null}
+      </TableRowContainer>
+    );
+  },
+);

package/src/components/TariffsTable/constants.ts

@@ -0,0 +1,4 @@
+export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
+export const FIRST_CELL_CLASSES = 'w-[354px] flex-shrink-0';
+export const COLS_LENGTH_FOR_SCROLL = 2;
+export const COLUMN_WIDTH = 4 * 80 + 40; // w-80 + pl-10 = 360px

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

@@ -1,6 +1,13 @@
 {
-  "title": "Заголовок",
+  "title": "Текстовый блок",
   "description": "Описание",
   "blockVersion": "primary",
-  "iconVersion": "small"
+  "iconVersion": "small",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 48,
+      "height": 48
+    }
+  }
 }

package/src/components/TextBlock/TextBlock.fixture.tsx

@@ -1,6 +1,7 @@
+import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { TextBlock } from './TextBlock';
-import type { Picture } from '../../model/Picture';
+import { TextBlockContent } from './TextBlockContent';
 
 const image: Picture = {
   src: 'bank-card.png',
@@ -11,50 +12,31 @@ const image: Picture = {
   },
 };
 
+export const TEXT_BLOCK: TextBlockContent = {
+  title: 'Все карты Россельхозбанка работают',
+  description:
+    "Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка",
+};
+
 export default (
   <div className="font-sans overflow-hidden">
     <div>
       <p>Private clients</p>
       <div className="flex flex-col gap-6" data-theme="pc">
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
         <TextBlock
           context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="primary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          {...TEXT_BLOCK}
           blockVersion="primary"
           iconVersion="big"
           image={image}
         />
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="none" />
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
         <TextBlock
           context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="primary"
-          iconVersion="none"
-        />
-        <TextBlock
-          context={context}
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="primary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="secondary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          {...TEXT_BLOCK}
           blockVersion="secondary-light"
           iconVersion="small"
         />
@@ -63,24 +45,11 @@ export default (
     <div>
       <p>Business clients</p>
       <div className="flex flex-col gap-6" data-theme="bc">
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
         <TextBlock
           context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="primary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="secondary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          {...TEXT_BLOCK}
           blockVersion="secondary-light"
           iconVersion="small"
         />
@@ -89,24 +58,11 @@ export default (
     <div>
       <p>Ecosystem own</p>
       <div className="flex flex-col gap-6" data-theme="eo">
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
         <TextBlock
           context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="primary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="secondary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          {...TEXT_BLOCK}
           blockVersion="secondary-light"
           iconVersion="small"
         />