@redneckz/wildless-cms-uni-blocks 0.2.89 → 0.2.93

package/src/components/Accordion/Accordion.example.json

@@ -5,22 +5,14 @@
       "label": "Accordion label 1",
       "blocks": [
         {
-          "type": "TextBlock",
-          "data": {
-            "title": "Title",
-            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
-            "blockVersion": "secondary-light",
-            "iconVersion": "small"
-          }
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
         },
         {
-          "type": "TextBlock",
-          "data": {
-            "title": "Title",
-            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
-            "blockVersion": "secondary-light",
-            "iconVersion": "small"
-          }
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
         }
       ]
     },
@@ -28,22 +20,14 @@
       "label": "Accordion label 2",
       "blocks": [
         {
-          "type": "TextBlock",
-          "data": {
-            "title": "Title",
-            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
-            "blockVersion": "secondary-light",
-            "iconVersion": "small"
-          }
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
         },
         {
-          "type": "TextBlock",
-          "data": {
-            "title": "Title",
-            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
-            "blockVersion": "secondary-light",
-            "iconVersion": "small"
-          }
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
         }
       ]
     },
@@ -51,22 +35,14 @@
       "label": "Accordion label 3",
       "blocks": [
         {
-          "type": "TextBlock",
-          "data": {
-            "title": "Title",
-            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
-            "blockVersion": "secondary-light",
-            "iconVersion": "small"
-          }
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
         },
         {
-          "type": "TextBlock",
-          "data": {
-            "title": "Title",
-            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
-            "blockVersion": "secondary-light",
-            "iconVersion": "small"
-          }
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
         }
       ]
     }

package/src/components/Accordion/Accordion.fixture.tsx

@@ -1,52 +1,35 @@
 import { context } from '../../setup-fixture';
+import { HEADLINE } from '../Headline/Headline.fixture';
+import { LINK_DOCS } from '../LinkDocs/LinkDocs.fixture';
+import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import type { AccordionProps } from './Accordion';
-import type { HeadlineProps } from '../Headline/Headline';
-import type { PictureTextContent } from '../PictureText/PictureTextContent';
-import type { TextBlockContent } from '../TextBlock/TextBlockContent';
-
 import { Accordion } from './Accordion';
-import {
-  LinkDocsFixtureSetOne,
-  LinkDocsFixtureSetThree,
-  LinkDocsFixtureSetTwo,
-} from '../LinkDocs/LinkDocs.fixture';
+import type {
+  HeadlineAccordionBlock,
+  LinkDocsAccordionBlock,
+  PictureTextAccordionBlock,
+  TextBlockAccordionBlock,
+} from './AccordionContent';
 
-const TEXT_BLOCK: TextBlockContent = {
-  description:
-    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?',
+const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockAccordionBlock = {
+  accordionBlockType: 'TextBlock',
+  ...TEXT_BLOCK,
 };
 
-const HEADLINE: HeadlineProps = {
-  context,
-  title: 'Своя кредитная карта',
-  description: 'Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.',
-  align: 'left',
-  bgColor: 'bg-white',
+const HEADLINE_ACCORDION_BLOCK: HeadlineAccordionBlock = {
+  accordionBlockType: 'Headline',
+  ...HEADLINE,
 };
 
-const PICTURE_TEXT: PictureTextContent = {
-  title: 'Варианты потребительского кредита',
-  benefits: [
-    {
-      label: 'Кредит по одному документу',
-      description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
-      icon: 'DocumentText',
-    },
-    {
-      label: 'Кредит на общих условиях',
-      description: 'До 5 млн ₽ на общих условиях получения кредита',
-      icon: 'DiscountShape',
-    },
-  ],
-  image: {
-    src: 'legal-support-business.png',
-    alt: 'Варианты потребительского кредита',
-    format: 'webp',
-    size: {
-      width: 200,
-      height: 200,
-    },
-  },
+const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlock = {
+  accordionBlockType: 'PictureText',
+  ...PICTURE_TEXT,
+};
+
+const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlock = {
+  accordionBlockType: 'LinkDocs',
+  ...LINK_DOCS,
 };
 
 const propsTextBlock: AccordionProps = {
@@ -55,94 +38,21 @@ const propsTextBlock: AccordionProps = {
   accordionItems: [
     {
       label: 'Accordion label 1',
-      blocks: [
-        {
-          type: 'TextBlock',
-          data: TEXT_BLOCK,
-        },
-        {
-          type: 'TextBlock',
-          data: TEXT_BLOCK,
-        },
-      ],
+      blocks: [TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK],
     },
     {
       label: 'Accordion label 2',
-      blocks: [
-        {
-          type: 'TextBlock',
-          data: TEXT_BLOCK,
-        },
-        {
-          type: 'TextBlock',
-          data: TEXT_BLOCK,
-        },
-      ],
+      blocks: [PICTURE_TEXT_ACCORDION_BLOCK],
     },
     {
       label: 'Accordion label 3',
-      blocks: [
-        {
-          type: 'PictureText',
-          data: PICTURE_TEXT,
-        },
-        {
-          type: 'PictureText',
-          data: PICTURE_TEXT,
-        },
-      ],
+      blocks: [HEADLINE_ACCORDION_BLOCK],
     },
     {
       label: 'Accordion label 4',
-      blocks: [
-        {
-          type: 'Headline',
-          data: HEADLINE,
-        },
-        {
-          type: 'Headline',
-          data: HEADLINE,
-        },
-      ],
+      blocks: [LINK_DOCS_ACCORDION_BLOCK],
     },
   ],
 };
 
-const propsLinkDocs: AccordionProps = {
-  title: 'Accordion title',
-  context,
-  accordionItems: [
-    {
-      label: 'Список документов в 2 колонки',
-      blocks: [
-        {
-          type: 'LinkDocs',
-          data: { ...LinkDocsFixtureSetOne, title: '' },
-        },
-      ],
-    },
-    {
-      label: 'Список документов в одну колонку',
-      blocks: [
-        {
-          type: 'LinkDocs',
-          data: { ...LinkDocsFixtureSetTwo, title: '' },
-        },
-      ],
-    },
-    {
-      label: 'Немного кастомизированный список',
-      blocks: [
-        {
-          type: 'LinkDocs',
-          data: LinkDocsFixtureSetThree,
-        },
-      ],
-    },
-  ],
-};
-
-export default {
-  'with text block': <Accordion {...propsTextBlock} />,
-  'with link docs block': <Accordion {...propsLinkDocs} />,
-};
+export default <Accordion {...propsTextBlock} />;

package/src/components/Accordion/AccordionContent.ts

@@ -2,41 +2,70 @@ import type { HeadlineContent } from '../Headline/HeadlineContent';
 import type { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
 import type { PictureTextContent } from '../PictureText/PictureTextContent';
 import type { TextBlockContent } from '../TextBlock/TextBlockContent';
-import AccordionBlocks from './AccordionBlocks';
 
 /**
- * @hidden
- * @title Содержимое блока
+ * @title Тип блока
  */
-export type AccordionData =
-  | HeadlineContent
-  | LinkDocsContent
-  | TextBlockContent
-  | PictureTextContent;
+export type AccordionTypeBlock = 'Headline' | 'LinkDocs' | 'TextBlock' | 'PictureText';
 
 /**
- * @hidden
- * @title Тип блока
- * @enumNames ["Заголовок", "Блок документов", Текстовый блок", "Картинка с текстом"]
+ * @title Заголовок
  */
-export type AccordionTypeBlock = keyof typeof AccordionBlocks;
+export interface HeadlineAccordionBlock extends HeadlineContent {
+  /** @default Headline */
+  accordionBlockType: AccordionTypeBlock;
+}
 
 /**
- * Блок
+ * @title Список документов
  */
-export interface AccordionBlock {
-  type?: AccordionTypeBlock;
-  data?: AccordionData;
+export interface LinkDocsAccordionBlock extends LinkDocsContent {
+  /** @default LinkDocs */
+  accordionBlockType: AccordionTypeBlock;
 }
 
+/**
+ * @title Текстовый блок
+ */
+export interface TextBlockAccordionBlock extends TextBlockContent {
+  /** @default TextBlock */
+  accordionBlockType: AccordionTypeBlock;
+}
+
+/**
+ * @title Картинка с текстом
+ */
+export interface PictureTextAccordionBlock extends PictureTextContent {
+  /** @default PictureText */
+  accordionBlockType: AccordionTypeBlock;
+}
+
+/**
+ * @title Выберите блок
+ */
+export type EmptyOption = null;
+
+/**
+ * @title Содержимое аккордеона
+ */
+export type AccordionBlockProps =
+  | EmptyOption
+  | HeadlineAccordionBlock
+  | LinkDocsAccordionBlock
+  | TextBlockAccordionBlock
+  | PictureTextAccordionBlock;
+
 /**
  * @title Элемент списка
  */
 export interface AccordionItemCommonProps {
-  /** @title Название */
+  /**
+   * @title Название
+   * @default Список
+   */
   label?: string;
   /** @title Блоки */
-  blocks?: AccordionBlock[];
+  blocks?: AccordionBlockProps[];
 }
 
 /**

package/src/components/Accordion/AccordionItem.tsx

@@ -4,7 +4,7 @@ import { Icon } from '../../ui-kit/Icon/Icon';
 import type { JSXBlock } from '../ContentPage/ContentPage';
 import { ContentPageContext } from '../ContentPage/ContentPageContext';
 import AccordionBlocks from './AccordionBlocks';
-import type { AccordionBlock, AccordionItemCommonProps } from './AccordionContent';
+import type { AccordionBlockProps, AccordionItemCommonProps } from './AccordionContent';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
@@ -13,8 +13,11 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, context }
   const hasContent = blocks?.length;
   const icon = isActive ? 'MinusIcon' : 'PlusIcon';
 
-  const handleToggle = (e) => {
-    if (!hasContent) return null;
+  const handleToggle = (e: MouseEvent) => {
+    if (!hasContent) {
+      return;
+    }
+
     setIsActive(!isActive);
     const contentBlock = getContentBlock(e);
     contentBlock.style.maxHeight = contentBlock.style.maxHeight
@@ -51,18 +54,19 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, context }
   );
 });
 
-const renderBlock = (block: AccordionBlock, i: number, context: ContentPageContext) => {
-  if (!block.type || !block.data || !AccordionBlocks.hasOwnProperty(block.type)) {
+const renderBlock = (block: AccordionBlockProps, i: number, context: ContentPageContext) => {
+  const type = block?.accordionBlockType;
+  if (!type || !(type in AccordionBlocks)) {
     return null;
   }
 
-  const AccordionBlock: JSXBlock = AccordionBlocks[block.type];
+  const AccordionBlock: JSXBlock = AccordionBlocks[type];
   return (
     <div className="mb-5 last:mb-0" key={`block_${i}`}>
-      <AccordionBlock context={context} {...block.data} />
+      <AccordionBlock context={context} {...block} />
     </div>
   );
 };
 
-const getContentBlock = (e) =>
-  e.target.tagName === 'BUTTON' ? e.target.nextSibling : e.target.parentNode.nextSibling;
+const getContentBlock = ({ target }) =>
+  target.tagName === 'BUTTON' ? target.nextSibling : target.parentNode.nextSibling;

package/src/components/BaseTile/BaseTile.tsx

@@ -44,11 +44,14 @@ export const BaseTile = JSX<BaseTileProps>(
     return (
       <div className={`font-sans flex flex-col grow h-full ${alignBlock[align]}`}>
         {title && (
-          <Title size={titleSize || getTitleSizeByClassName(className)} className={TITLE_CLASSES}>
+          <Title
+            size={titleSize || getTitleSizeByClassName(className)}
+            className={`${TITLE_CLASSES} ${version === 'primary' ? 'text-primary-text' : ''}`}
+          >
             {title}
           </Title>
         )}
-        <div className="flex grow justify-between">
+        <div className="flex grow justify-between w-full">
           <div className={`flex flex-col justify-between ${alignBlock[align]}`}>
             <div>
               {description ? (
@@ -74,7 +77,7 @@ export const BaseTile = JSX<BaseTileProps>(
   },
 );
 
-function getTitleSizeByClassName(className: string = '') {
+function getTitleSizeByClassName(className = '') {
   const colSpan = getColSpan(className);
   if (colSpan <= 4) {
     return 'S';

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

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

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -1,14 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
+import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../types';
 import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
 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 { COLS_LENGTH_FOR_SCROLL, COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
 import { HeaderCell } from './HeaderCell';
+import { TableCarouselContainer } from './TableCarouselContainer';
 import { TableRow } from './TableRow';
-import { COLS_LENGTH_FOR_SCROLL, FIRST_CELL_CLASSES } from './constants';
+import { TableRowContainer } from './TableRowContainer';
 
 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,
+        colsLengthForScroll: 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/HeaderCell.tsx

@@ -17,7 +17,7 @@ export interface HeaderCellProps {
 
 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}`}
+    className={`w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES} ${GRADIENT}`}
     role="columnheader"
     scope="col"
   >
@@ -29,7 +29,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
         height="63"
       />
     )}
-    {image?.src && <Img className="mb-4" image={image} />}
+    {image?.src && <Img className="mb-[18px]" image={image} />}
     {title && (
       <Title size="S" className="font-medium m-0 text-center text-white">
         {title}
@@ -42,7 +42,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
           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>
+          <div className="font-medium text-xs py-[11px]">{link.text}</div>
         </Button>
       </div>
     )}

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