@redneckz/wildless-cms-uni-blocks 0.3.10 → 0.3.13

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -1,8 +1,9 @@
 import { context } from '../../setup-fixture';
 
-import type { Picture } from '../../model/Picture';
 import { ProductTile } from './ProductTile';
-import { ProductTileContent } from './ProductTileContent';
+import type { Picture } from '../../model/Picture';
+import type { ProductTileContent } from './ProductTileContent';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 const cardWithMoney: Picture = {
   src: 'card-with-diamond.png',
@@ -22,64 +23,56 @@ const building: Picture = {
   format: 'webp',
 };
 
+const benefits = [
+  {
+    label: 'до 5 млн Р',
+    description: 'Кредитный лимит',
+  },
+  {
+    label: 'от 12,5%',
+    description: 'Процентная ставка',
+  },
+  {
+    label: 'до 5 лет',
+    description: 'Срок кредитования',
+  },
+];
+
+const buttons: ButtonProps[] = [
+  {
+    text: 'Подробнее',
+    href: '/credit-cards',
+    version: 'secondary',
+  },
+];
+
+const buttonsSecondary: ButtonProps[] = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
+  },
+];
+
 export const PRODUCT_TILE: ProductTileContent = {
   title: 'Акция! “Кредит На все, что хочется!”',
   description: 'Потребительский кредит на любые цели, без залога и поручительства',
-  benefits: [
-    {
-      label: 'до 5 млн Р',
-      description: 'Кредитный лимит',
-    },
-    {
-      label: 'от 12,5%',
-      description: 'Процентная ставка',
-    },
-    {
-      label: 'до 5 лет',
-      description: 'Срок кредитования',
-    },
-  ],
-  buttons: [
-    {
-      text: 'Подробнее',
-      href: '/credit-cards',
-      version: 'secondary',
-    },
-  ],
+  benefits,
+  buttons: buttons,
   image: cardWithMoney,
 };
+export const PRODUCT_PENSION_TILE: ProductTileContent = {
+  title: 'Кредит пенсионный',
+  description: 'Для людей в возрасте до 75 лет',
+  benefits,
+  buttons: buttonsSecondary,
+};
 
 export default {
   credit: (
     <div className="container grid grid-cols-12">
-      <ProductTile
-        context={context}
-        className="col-span-6"
-        title="Акция! “Кредит На все, что хочется!”"
-        description="Потребительский кредит на любые цели, без залога и поручительства"
-        benefits={[
-          {
-            label: 'до 5 млн Р',
-            description: 'Кредитный лимит',
-          },
-          {
-            label: 'от 12,5%',
-            description: 'Процентная ставка',
-          },
-          {
-            label: 'до 5 лет',
-            description: 'Срок кредитования',
-          },
-        ]}
-        buttons={[
-          {
-            text: 'Подробнее',
-            href: '/credit-cards',
-            version: 'secondary',
-          },
-        ]}
-        image={cardWithMoney}
-      />
+      <ProductTile context={context} className="col-span-6" {...PRODUCT_TILE} />
     </div>
   ),
   pension: (
@@ -89,28 +82,8 @@ export default {
         className="col-span-6"
         title="Акция! “Пенсионный кредит”"
         description={'Потребительский кредит на любые цели, без залога и поручительства'}
-        benefits={[
-          {
-            label: 'до 3 млн Р',
-            description: 'Кредитный лимит',
-          },
-          {
-            label: 'от 12,5%',
-            description: 'Процентная ставка',
-          },
-          {
-            label: 'до 3 лет',
-            description: 'Срок кредитования',
-          },
-        ]}
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'secondary',
-          },
-        ]}
+        benefits={benefits}
+        buttons={buttonsSecondary}
         image={letterWithMoney}
       />
     </div>
@@ -122,28 +95,8 @@ export default {
         className="col-span-8"
         title="Кредит под залог недвижимости"
         description={'Без переоформления залогой недвижимости на банк'}
-        benefits={[
-          {
-            label: 'до 10 млн Р',
-            description: 'Кредитный лимит',
-          },
-          {
-            label: 'от 21,5%',
-            description: 'Процентная ставка',
-          },
-          {
-            label: 'до 10 лет',
-            description: 'Срок кредитования',
-          },
-        ]}
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'secondary',
-          },
-        ]}
+        benefits={benefits}
+        buttons={buttonsSecondary}
         image={building}
       />
     </div>
@@ -155,28 +108,8 @@ export default {
         className="col-span-4"
         title="Кредит пенсионный"
         description={'Для людей в возрасте до 75 лет'}
-        benefits={[
-          {
-            label: 'до 3 млн Р',
-            description: 'Кредитный лимит',
-          },
-          {
-            label: 'от 16,8%',
-            description: 'Процентная ставка',
-          },
-          {
-            label: 'до 5 лет',
-            description: 'Срок кредитования',
-          },
-        ]}
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'secondary',
-          },
-        ]}
+        benefits={benefits}
+        buttons={buttonsSecondary}
       />
     </div>
   ),

package/src/components/TariffsTable/TableTileHeader.tsx

@@ -0,0 +1,15 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { TariffsTableRowHeader } from './TariffsTableContent';
+
+export const TableTileHeader = JSX<TariffsTableRowHeader>(({ title, icon }) => {
+  return (
+    <div className="flex gap-2.5 mb-2">
+      {title ? <Heading headingType="h3" className="font-medium" title={title} /> : null}
+      {icon ? (
+        <Icon className="ml-auto max-w-6 max-h-6" name={icon} width="24px" height="24px" />
+      ) : null}
+    </div>
+  );
+});

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

@@ -1,5 +1,7 @@
 {
   "title": "Заголовок",
+  "description": "Описание",
+  "orientation": "vertical",
   "rowHeaders": [
     {
       "title": "Параметр 1",
@@ -73,7 +75,11 @@
           },
           {
             "list": {
-              "items": ["item 1", "item 2", "item 3"]
+              "items": [
+                "item 1",
+                "item 2",
+                "item 3"
+              ]
             }
           }
         ]

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

@@ -0,0 +1,164 @@
+import { mobileContext } from '../../setup-fixture';
+import { TariffsTable } from './TariffsTable';
+import type {
+  TariffsTableColumn,
+  TariffsTableRowHeader,
+} from '../TariffsTable/TariffsTableContent';
+import type { Picture } from '../../model/Picture';
+
+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: 'Дополнительная информация' },
+  { title: 'Описание и кнопка' },
+  { title: 'Описание и кнопка' },
+  { title: 'Описание и ссылка' },
+  { title: 'Описание и список' },
+];
+
+const columns: TariffsTableColumn[] = [
+  {
+    data: [
+      [{ label: 'Нет' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
+        },
+        {
+          label: 'Бесплатно',
+          description: 'В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб',
+        },
+      ],
+      [{ label: 'Нет' }],
+      [{ label: 'Платёжные системы картинкой' }, { image: image }],
+      [
+        {
+          buttons: [
+            {
+              icon: 'AppleIcon',
+              rounded: true,
+              version: 'secondary',
+              href: '/',
+              target: '_blank',
+            },
+            {
+              icon: 'PlayMarketIcon',
+              rounded: true,
+              version: 'secondary',
+              href: '/',
+              target: '_blank',
+            },
+          ],
+        },
+      ],
+      [
+        {
+          label: 'Бесплатно',
+        },
+      ],
+      [
+        {
+          image: {
+            src: 'money-1.png',
+            format: 'webp',
+            size: {
+              width: 140,
+              height: 140,
+            },
+            alt: 'Деньги',
+          },
+        },
+      ],
+      [
+        {
+          label: '30 тыс - 5 млн рублей',
+          buttons: [
+            {
+              text: 'Подробнее',
+              href: '/',
+              target: '_blank',
+            },
+          ],
+        },
+      ],
+      [
+        {
+          label: '30 тыс - 5 млн рублей',
+          buttons: [
+            {
+              text: 'Подробнее',
+              version: 'secondary',
+              href: '/',
+              target: '_blank',
+            },
+          ],
+        },
+      ],
+      [
+        {
+          label: '30 тыс - 5 млн рублей',
+          buttons: [
+            {
+              text: 'Подробнее',
+              href: '/',
+              target: '_blank',
+              version: 'link',
+            },
+          ],
+        },
+      ],
+      [
+        {
+          label: '30 тыс - 5 млн рублей',
+          list: {
+            items: ['item 1', 'item 2', 'item 3'],
+          },
+        },
+      ],
+    ],
+  },
+];
+
+export default {
+  'default (vertical)': (
+    <div className="container grid grid-cols-12">
+      <TariffsTable
+        className="col-span-12"
+        context={mobileContext}
+        title="Заголовок"
+        description="Описание предоставляемого продукта"
+        rowHeaders={rowHeaders}
+        columns={columns.slice(0, 1)}
+      />
+    </div>
+  ),
+  horizontal: (
+    <div className="container grid grid-cols-12">
+      <TariffsTable
+        className="col-span-12"
+        context={mobileContext}
+        title="Заголовок"
+        description="Описание предоставляемого продукта"
+        rowHeaders={rowHeaders}
+        columns={columns}
+        orientation="horizontal"
+      />
+    </div>
+  ),
+};

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

@@ -1,6 +1,6 @@
-import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { TariffsTable } from './TariffsTable';
+import type { Picture } from '../../model/Picture';
 import type { TariffsTableColumn, TariffsTableRowHeader } from './TariffsTableContent';
 
 const image: Picture = {
@@ -142,6 +142,7 @@ export default {
       <TariffsTable
         className="col-span-12"
         title="Другие дебетовые карты Россельхозбанка"
+        description="Описание предоставляемого продукта"
         context={context}
         rowHeaders={rowHeaders}
         columns={Array(2).fill(columns).flat()}
@@ -153,6 +154,7 @@ export default {
       <TariffsTable
         className="col-span-12"
         title="Другие дебетовые карты Россельхозбанка"
+        description="Описание предоставляемого продукта"
         context={context}
         rowHeaders={rowHeaders}
         columns={columns.slice(0, 1)}
@@ -164,6 +166,7 @@ export default {
       <TariffsTable
         className="col-span-12"
         title="Другие дебетовые карты Россельхозбанка"
+        description="Описание предоставляемого продукта"
         context={context}
         rowHeaders={rowHeaders}
         columns={columns.slice(0, 2)}
@@ -175,6 +178,7 @@ export default {
       <TariffsTable
         className="col-span-12"
         title="Другие дебетовые карты Россельхозбанка"
+        description="Описание предоставляемого продукта"
         context={context}
         rowHeaders={rowHeaders}
         columns={columns.slice(0, 3)}

package/src/components/TariffsTable/TariffsTable.mobile.tsx

@@ -0,0 +1,54 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type {
+  TariffsTableCellData,
+  TariffsTableColumn,
+  TariffsTableContent,
+  TariffsTableRowHeader,
+} from './TariffsTableContent';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { TariffsTableVertical } from './TariffsTableVertical';
+import { TariffsTableHorizontal } from './TariffsTableHorizontal';
+
+export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
+
+export const TariffsTable = JSX<TariffsTableProps>(
+  ({ className, context, title, description, columns, rowHeaders, orientation = 'vertical' }) => {
+    const colData = getColData(columns);
+    const tiles = getTiles(rowHeaders, colData);
+
+    return (
+      <section className={`px-4 py-6 bg-white font-sans text-primary-text ${className}`}>
+        {title ? (
+          <Heading
+            headingType="h2"
+            className={`text-center ${description ? 'mb-2' : 'mb-5'}`}
+            title={title}
+          />
+        ) : null}
+        {description ? <div className="mb-5 text-center text-m-md">{description}</div> : null}
+        {tiles?.length ? renderOrientationTable(orientation, tiles, context) : null}
+      </section>
+    );
+  },
+);
+
+function renderOrientationTable(orientation, tiles, context) {
+  return orientation === 'vertical' ? (
+    <TariffsTableVertical tiles={tiles} />
+  ) : (
+    <TariffsTableHorizontal context={context} tiles={tiles} />
+  );
+}
+
+const getColData = (columns: TariffsTableColumn[] | undefined) =>
+  columns?.[0].data ? columns[0].data : [];
+
+const getTiles = (
+  rowHeaders: TariffsTableRowHeader[] | undefined,
+  colData: TariffsTableCellData[][],
+) =>
+  rowHeaders?.map((header, i) => ({
+    header,
+    data: colData?.[i] || [{}],
+  }));

package/src/components/TariffsTable/TariffsTable.tsx

@@ -1,31 +1,33 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
-import type { UniBlockProps } from '../../types';
-import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { COLS_LENGTH_FOR_SCROLL } from './constants';
-import type { TariffsTableContent } from './TariffsTableContent';
 import { TariffsTableRow } from './TariffsTableRow';
+import { TableArrowScrollControl } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControl';
+import type { UniBlockProps } from '../../types';
+import type {
+  TariffsTableCellData,
+  TariffsTableColumn,
+  TariffsTableContent,
+  TariffsTableRowHeader,
+} from './TariffsTableContent';
+import { useTableArrowScrollControl } from '../../hooks/useTableArrowScrollControl';
 
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
 export const TariffsTable = JSX<TariffsTableProps>(
-  ({ className, context, title, rowHeaders, columns }) => {
+  ({ className, context, title, description, 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 colData = getColData(columns);
+    const rowData = getRowData(rowHeaders, colData);
 
-    const { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton } =
-      useComparisonTableScroll({
-        colData,
-        colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
-        activeCardIndex,
-        setActiveCardIndex,
-      });
+    const tableArrowScrollControlProps = useTableArrowScrollControl({
+      columnsLength: colData.length,
+      colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
+      activeCardIndex,
+      setActiveCardIndex,
+    });
+    const { isScrollAvailable } = tableArrowScrollControlProps;
 
     return (
       <section
@@ -33,15 +35,18 @@ export const TariffsTable = JSX<TariffsTableProps>(
           className || ''
         }`}
       >
-        <Heading
-          headingType="h2"
-          className="max-w-[47rem] text-center mb-9 mx-auto"
-          title={title}
-        />
-        <div role="table">
-          {rowData?.length ? (
+        {title ? (
+          <Heading
+            headingType="h2"
+            className={`text-center ${description ? 'mb-2.5' : 'mb-9'}`}
+            title={title}
+          />
+        ) : null}
+        {description ? <div className="mb-9 text-center text-m-base">{description}</div> : null}
+        {rowData?.length ? (
+          <div role="table">
             <div className="relative">
-              {rowData.map((row, i, { length }) => (
+              {rowData.map((row, i) => (
                 <TariffsTableRow
                   key={String(i)}
                   row={row}
@@ -49,30 +54,29 @@ export const TariffsTable = JSX<TariffsTableProps>(
                   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}
+              <TableArrowScrollControl {...tableArrowScrollControlProps} />
             </div>
-          ) : null}
-          {isScrollAvailable ? (
-            <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
-          ) : null}
-        </div>
+            {isScrollAvailable ? (
+              <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+            ) : null}
+          </div>
+        ) : null}
       </section>
     );
   },
 );
+
+type ColDataType = (TariffsTableCellData[][] | undefined)[];
+type RowDataType = { header: TariffsTableRowHeader; data: any }[] | undefined;
+
+const getColData = (columns: TariffsTableColumn[] | undefined): ColDataType =>
+  columns?.map(({ data }) => data) || [];
+
+const getRowData = (
+  rowHeaders: TariffsTableRowHeader[] | undefined,
+  colData: ColDataType,
+): RowDataType =>
+  rowHeaders?.map((header, i) => ({
+    header,
+    data: colData.map((col) => col?.[i] || [{}]),
+  }));

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -17,7 +17,7 @@ export const TariffsTableCell = JSX<TariffsTableCellProps>(({ cell, isLastRow })
 
   return (
     <div className={cellWrapperClasses} role="cell">
-      <div>{cell.map((item, i) => renderCellInner(item, i))}</div>
+      <div>{cell.map(renderCellInner)}</div>
     </div>
   );
 });
@@ -30,8 +30,8 @@ const renderCellInner = (
     {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>}
+    {label ? <div className="text-xl font-medium m-0">{label}</div> : null}
+    {description ? <div className="text-sm text-secondary-text">{description}</div> : null}
     {list?.items?.length ? (
       <div className="flex flex-col justify-between items-start">
         <div role="list">