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

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -7,17 +7,18 @@ const moneyImage: Picture = {
   src: 'money-1.png',
   format: 'webp',
   size: {
-    width: 300,
-    height: 300,
+    width: 280,
+    height: 280,
   },
+  alt: 'Варианты потребительского кредита',
 };
 
 const worker: Picture = {
   src: 'worker.png',
   format: 'webp',
   size: {
-    width: 300,
-    height: 300,
+    width: 280,
+    height: 280,
   },
 };
 
@@ -25,114 +26,110 @@ const creditCard: Picture = {
   src: 'credit-card-1.png',
   format: 'webp',
   size: {
-    width: 300,
-    height: 300,
+    width: 280,
+    height: 280,
   },
 };
 
 export default (
-  <ProductGallery
-    context={context}
-    slides={[
-      {
-        nav: {
-          title: 'Деньги на любые цели',
-          desc: 'Ставка от 12,5% годовых на срок до 5 лет',
+  <div className="container grid grid-cols-12">
+    <ProductGallery
+      className="col-span-12"
+      context={context}
+      slides={[
+        {
+          nav: {
+            title: 'Деньги на любые цели',
+            desc: 'Ставка от 12,5% годовых на срок до 5 лет',
+          },
+          productBlock: {
+            title: 'Ставка от 12,5% годовых на срок до 5 лет!»',
+            items: [
+              'Потребительский кредит по специальной процентной ставке',
+              'Получите деньги без залога и поручительства',
+              'Кредитный лимит до 5 млн рублей',
+            ],
+            buttons: [
+              {
+                href: 'https://rshb.ru',
+                text: 'Подробнее',
+                target: '_blank',
+                version: 'primary',
+              },
+            ],
+            image: moneyImage,
+          },
         },
-        productBlock: {
-          title: 'Ставка от 12,5% годовых на срок до 5 лет!»',
-          description:
-            'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
-          items: [
-            'Потребительский кредит по специальной процентной ставке',
-            'Получите деньги без залога и поручительства',
-            'Кредитный лимит до 5 млн рублей',
-          ],
-          buttons: [
-            {
-              href: 'https://rshb.ru',
-              text: 'Подробнее',
-              target: '_blank',
-              version: 'primary',
-            },
-          ],
-          image: moneyImage,
+        {
+          nav: {
+            title: 'Для людей в возрасте',
+            desc: 'Ставка от 12,5% годовых на срок до 3 лет',
+          },
+          productBlock: {
+            title: 'Ставка от 12,5% годовых на срок до 3 лет!»',
+            items: [
+              'Потребительский кредит по специальной процентной ставке',
+              'Получите деньги без залога и поручительства',
+              'Кредитный лимит до 5 млн рублей',
+            ],
+            buttons: [
+              {
+                href: 'https://rshb.ru',
+                text: 'Подробнее',
+                target: '_blank',
+                version: 'primary',
+              },
+            ],
+            image: worker,
+          },
         },
-      },
-      {
-        nav: {
-          title: 'Для людей в возрасте',
-          desc: 'Ставка от 12,5% годовых на срок до 3 лет',
+        {
+          nav: {
+            title: 'Выгодно покупать',
+            desc: 'Дополнительные бонусные баллы за покупки',
+          },
+          productBlock: {
+            title: 'Дополнительные бонусные баллы за покупки!»',
+            items: [
+              'Потребительский кредит по специальной процентной ставке',
+              'Получите деньги без залога и поручительства',
+              'Кредитный лимит до 5 млн рублей',
+            ],
+            buttons: [
+              {
+                href: 'https://rshb.ru',
+                text: 'Подробнее',
+                target: '_blank',
+                version: 'primary',
+              },
+            ],
+            image: creditCard,
+          },
         },
-        productBlock: {
-          title: 'Ставка от 12,5% годовых на срок до 3 лет!»',
-          description:
-            'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
-          items: [
-            'Потребительский кредит по специальной процентной ставке',
-            'Получите деньги без залога и поручительства',
-            'Кредитный лимит до 5 млн рублей',
-          ],
-          buttons: [
-            {
-              href: 'https://rshb.ru',
-              text: 'Подробнее',
-              target: '_blank',
-              version: 'primary',
-            },
-          ],
-          image: worker,
+        {
+          nav: {
+            title: 'Карты Unionpay',
+            desc: 'Кэшбэк до 20% у партнеров',
+          },
+          productBlock: {
+            title: 'Карты Unionpay»',
+            items: [
+              'Потребительский кредит по специальной процентной ставке',
+              'Получите деньги без залога и поручительства',
+              'Кредитный лимит до 5 млн рублей',
+            ],
+            buttons: [
+              {
+                href: 'https://rshb.ru',
+                text: 'Подробнее',
+                target: '_blank',
+                version: 'primary',
+              },
+            ],
+            image: creditCard,
+          },
         },
-      },
-      {
-        nav: {
-          title: 'Выгодно покупать',
-          desc: 'Дополнительные бонусные баллы за покупки',
-        },
-        productBlock: {
-          title: 'Дополнительные бонусные баллы за покупки!»',
-          description:
-            'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
-          items: [
-            'Потребительский кредит по специальной процентной ставке',
-            'Получите деньги без залога и поручительства',
-            'Кредитный лимит до 5 млн рублей',
-          ],
-          buttons: [
-            {
-              href: 'https://rshb.ru',
-              text: 'Подробнее',
-              target: '_blank',
-              version: 'primary',
-            },
-          ],
-          image: creditCard,
-        },
-      },
-      {
-        nav: {
-          title: 'Карты Unionpay',
-          desc: 'Кэшбэк до 20% у партнеров',
-        },
-        productBlock: {
-          title: 'Карты Unionpay»',
-          description: 'Кэшбэк до 20% у партнеров',
-          items: [
-            'Потребительский кредит по специальной процентной ставке',
-            'Получите деньги без залога и поручительства',
-            'Кредитный лимит до 5 млн рублей',
-          ],
-          buttons: [
-            {
-              href: 'https://rshb.ru',
-              text: 'Подробнее',
-              target: '_blank',
-              version: 'primary',
-            },
-          ],
-          image: creditCard,
-        },
-      },
-    ]}
-  />
+      ]}
+    />
+  </div>
 );

package/src/components/ProductGallery/ProductGallery.tsx

@@ -22,7 +22,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
           {galleryBlocks.map((_, i) => renderProductBlock(_, i, context))}
         </div>
 
-        <div className={`border-t border-solid border-main-divider flex`}>
+        <div className="flex">
           {galleryNav.map((slide, i) =>
             renderNavButton({
               slide,
@@ -61,17 +61,19 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
       type="button"
       key={String(i)}
       onClick={onClick}
-      className={`group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 py-4 grow basis-0`}
+      className={`font-sans group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 pt-4 pb-5 grow basis-0`}
     >
       <div className="border-0 border-r border-solid border-main-divider px-6">
-        <div className={`text-sm font-medium group-hover:text-primary-text ${btnTitleClassName}`}>
+        <div
+          className={`text-sm font-medium pb-1 group-hover:text-primary-text ${btnTitleClassName}`}
+        >
           {slide?.title}
         </div>
-        <div className="text-xs text-secondary-text">{slide.desc}</div>
+        <div className="text-xs text-secondary-text pb-[2px]">{slide.desc}</div>
       </div>
       <div
         className={`absolute bottom-0 left-0 w-full h-[3px] bg-primary-main -translate-x-full ${progressBarClassName}`}
-        style={{ animationDuration: `${duration}s` }}
+        style={{ animationDuration: `${duration}s`, animationFillMode: 'forwards' }}
       ></div>
     </button>
   );

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

@@ -23,7 +23,7 @@ const building: Picture = {
 
 export default {
   credit: (
-    <div className="grid grid-cols-12">
+    <div className="container grid grid-cols-12">
       <ProductTile
         context={context}
         className="col-span-6"
@@ -55,7 +55,7 @@ export default {
     </div>
   ),
   pension: (
-    <div className="grid grid-cols-12">
+    <div className="container grid grid-cols-12">
       <ProductTile
         context={context}
         className="col-span-6"
@@ -88,7 +88,7 @@ export default {
     </div>
   ),
   'credit-card': (
-    <div className="grid grid-cols-12">
+    <div className="container grid grid-cols-12">
       <ProductTile
         context={context}
         className="col-span-8"
@@ -121,7 +121,7 @@ export default {
     </div>
   ),
   'pension-credit': (
-    <div className="grid grid-cols-12">
+    <div className="container grid grid-cols-12">
       <ProductTile
         context={context}
         className="col-span-4"

package/src/components/PromoTile/PromoTile.fixture.tsx

@@ -4,7 +4,7 @@ import { PromoTile } from './PromoTile';
 
 export default {
   default: (
-    <div className="grid grid-cols-12">
+    <div className="container grid grid-cols-12">
       <PromoTile
         context={context}
         className="col-span-4"

package/src/components/PromoTile/PromoTile.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { PromoTileContent } from './PromoTileContent';
-import { Tile } from '../Tile/Tile';
 import type { UniBlockProps } from '../../types';
+import { Tile } from '../Tile/Tile';
+import type { PromoTileContent } from './PromoTileContent';
 
 export interface PromoTileProps extends PromoTileContent, UniBlockProps {}
 
@@ -23,7 +23,7 @@ export const PromoTile = JSX<PromoTileProps>(
         buttons={buttons}
         version={version}
       >
-        <div>
+        <div className="mt-1.5">
           {date && <div className="text-sm mb-2">{formatDate(date)}</div>}
           <div className="text-base">{description}</div>
         </div>

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -2,22 +2,25 @@ import { context } from '../../setup-fixture';
 import { StepsBlock } from './StepsBlock';
 
 export default (
-  <StepsBlock
-    context={context}
-    title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-    steps={[
-      {
-        label: 'Заявка на кредит',
-        description: 'Оставьте онлайн-заявку на потребительский кредит',
-      },
-      {
-        label: 'В случае одобрения',
-        description: 'Менеджер свяжется с вами и согласует встречу',
-      },
-      {
-        label: 'Получение наличных',
-        description: 'Получите наличные в отделении банка',
-      },
-    ]}
-  />
+  <div className="container grid grid-cols-12">
+    <StepsBlock
+      className="col-span-12"
+      context={context}
+      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+      steps={[
+        {
+          label: 'Заявка на кредит',
+          description: 'Оставьте онлайн-заявку на потребительский кредит',
+        },
+        {
+          label: 'В случае одобрения',
+          description: 'Менеджер свяжется с вами и согласует встречу',
+        },
+        {
+          label: 'Получение наличных',
+          description: 'Получите наличные в отделении банка',
+        },
+      ]}
+    />
+  </div>
 );

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

@@ -66,7 +66,9 @@
               "size": {
                 "width": 288,
                 "height": 56
-              }
+              },
+              "alt": "Описание картинки",
+              "title": "Подсказка"
             }
           },
           {

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

@@ -10,6 +10,8 @@ const image: Picture = {
     width: 288,
     height: 56,
   },
+  alt: 'Платёжные системы',
+  title: 'Платёжные системы',
 };
 
 const rowHeaders: TariffsTableRowHeader[] = [
@@ -61,9 +63,6 @@ const columns: TariffsTableColumn[] = [
       [
         {
           label: 'Бесплатно',
-          list: {
-            items: ['item 1', 'item 2', 'item 3'],
-          },
         },
       ],
       [
@@ -75,6 +74,7 @@ const columns: TariffsTableColumn[] = [
               width: 140,
               height: 140,
             },
+            alt: 'Деньги',
           },
         },
       ],
@@ -94,15 +94,7 @@ const columns: TariffsTableColumn[] = [
         },
       ],
       [{ label: 'Нет' }],
-      [
-        { label: 'До 20%' },
-        {
-          list: {
-            isDotted: false,
-            items: ['item 1', 'item 2', 'item 3'],
-          },
-        },
-      ],
+      [{ label: 'До 20%' }],
       [
         {
           label: 'Бесплатно',
@@ -146,7 +138,7 @@ const columns: TariffsTableColumn[] = [
 
 export default {
   default: (
-    <div className="w-[1280px]">
+    <div className="container grid grid-cols-12">
       <TariffsTable
         className="col-span-12"
         title="Другие дебетовые карты Россельхозбанка"
@@ -157,7 +149,7 @@ export default {
     </div>
   ),
   '1 column': (
-    <div className="w-[1280px]">
+    <div className="container grid grid-cols-12">
       <TariffsTable
         className="col-span-12"
         title="Другие дебетовые карты Россельхозбанка"
@@ -168,7 +160,7 @@ export default {
     </div>
   ),
   '2 columns': (
-    <div className="w-[1280px]">
+    <div className="container grid grid-cols-12">
       <TariffsTable
         className="col-span-12"
         title="Другие дебетовые карты Россельхозбанка"
@@ -179,7 +171,7 @@ export default {
     </div>
   ),
   '3 columns': (
-    <div className="w-[1280px]">
+    <div className="container grid grid-cols-12">
       <TariffsTable
         className="col-span-12"
         title="Другие дебетовые карты Россельхозбанка"

package/src/components/TariffsTable/TariffsTable.tsx

@@ -1,11 +1,11 @@
 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 { TariffsTableRow } from './TariffsTableRow';
-import type { UniBlockProps } from '../../types';
 import type { TariffsTableContent } from './TariffsTableContent';
-import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
+import { TariffsTableRow } from './TariffsTableRow';
 
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
@@ -20,12 +20,12 @@ export const TariffsTable = JSX<TariffsTableProps>(
     }));
 
     const { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton } =
-      useComparisonTableScroll(
+      useComparisonTableScroll({
         colData,
-        COLS_LENGTH_FOR_SCROLL,
+        colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
         activeCardIndex,
         setActiveCardIndex,
-      );
+      });
 
     return (
       <section
@@ -34,38 +34,40 @@ export const TariffsTable = JSX<TariffsTableProps>(
         }`}
       >
         <Title className="font-medium m-0 max-w-[47rem] text-center mb-9 mx-auto">{title}</Title>
-        {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 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>
-              </div>
-            ) : null}
-          </div>
-        ) : null}
-        {isScrollAvailable ? (
-          <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
-        ) : null}
+              ) : 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

@@ -19,7 +19,7 @@ export const TariffsTableCell = JSX<TariffsTableCellProps>(({ cell, isLastRow })
   const cellClasses = `h-full ${DIVIDER_CLASSES}`;
 
   return (
-    <div className={cellWrapperClasses}>
+    <div className={cellWrapperClasses} role="cell">
       <div className={cellClasses}>{cell.map((item, i) => renderCellInner(item, i))}</div>
     </div>
   );
@@ -29,15 +29,15 @@ const renderCellInner = (
   { label, description, list, image, buttons }: TariffsTableCellData,
   i: number,
 ) => (
-  <div className="first:pt-5 last:pb-5">
+  <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 && <h5 className="text-xl font-medium m-0">{label}</h5>}
+    {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>
+        <div role="list">
           {list.items.map((text, idx) => (
             <BlockItem
               key={String(idx)}

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -24,8 +24,12 @@ export interface TariffsTableColumn {
  * @title Список
  */
 export interface TariffsTableList {
+  /** @hidden */
   version?: BlockItemVersion;
-  /** @title Маркеры */
+  /**
+   * @title Маркеры
+   * @hidden
+   */
   isDotted?: boolean;
   /** @title Элементы списка */
   items?: string[];

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
+    }
+  }
 }