@redneckz/wildless-cms-uni-blocks 0.6.26 → 0.6.28

package/src/components/BusinessBlock/BusinessCard.tsx

@@ -0,0 +1,41 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import type { BusinessCardItemProps, BusinessCardProps } from './BusinessBlockContent';
+
+export const BusinessCard = JSX<BusinessCardProps>((props) => {
+  const { title, image, cardItems, button } = props;
+
+  return (
+    <div className="border-color-stroke border p-9 w-1/2">
+      {image ? (
+        <div className="flex justify-center">
+          {image?.src ? <Img className="mb-5" image={image} /> : null}
+          {image?.icon ? <Img image={image} asSVG /> : null}
+        </div>
+      ) : null}
+      {title ? <Heading headingType="h4" title={title} className="mb-6" /> : null}
+      {cardItems?.length ? <ul>{cardItems.map((_, i) => renderItem(_, String(i)))}</ul> : null}
+      {button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : null}
+    </div>
+  );
+});
+
+const renderItem = (item: BusinessCardItemProps, key: string) => {
+  const { icon, text } = item;
+
+  return (
+    <li key={key} className="flex items-center gap-3.5 mb-3 last:mb-0">
+      {icon?.icon ? (
+        <Img
+          className={`w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider`}
+          image={icon.icon}
+          asSVG
+        />
+      ) : null}
+      {icon?.src ? <Img image={icon.icon} /> : null}
+      <span className="text-xl-light">{text}</span>
+    </li>
+  );
+};

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_REST_MIN_SUM, DEFAULT_TRAVEL_MIN_SUM } from './constants';
@@ -10,10 +9,12 @@ import { renderFootnote } from './renderFootnote';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useBonusCalculatorParams } from './useBonusCalculatorParams';
 
-export interface BonusCalculatorProps extends CommonCalculatorProps, UniBlockProps {}
+export interface BonusCalculatorProps extends CommonCalculatorProps {
+  className?: string;
+}
 
 export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
-  ({ context, className = '', sourceBookDir = '', buttons, footnote }) => {
+  ({ className = '', sourceBookDir = '', buttons, footnote }) => {
     const [travelExpenseValue, setTravelExpenseValue] = useState(DEFAULT_TRAVEL_MIN_SUM);
     const [restExpenseValue, setRestExpenseValue] = useState(DEFAULT_REST_MIN_SUM);
     const userInputParams = {
@@ -57,7 +58,7 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
         </div>
         <div className="w-full max-w-[350px]">
           {yearBonus >= 0 ? <CalculatorValueBlock title="Баллов за год" value={yearBonus} /> : null}
-          {renderButtonSection(context, buttons)}
+          {renderButtonSection(buttons)}
           {renderFootnote(footnote)}
         </div>
       </section>

package/src/components/Calculator/Calculator.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 import { Calculator } from './Calculator';
 
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
@@ -54,7 +54,6 @@ export default {
     <div className="container grid grid-cols-12">
       <Calculator
         className="col-span-12"
-        context={context}
         calculatorTabs={[
           {
             nav: {
@@ -87,7 +86,6 @@ export default {
     <div className="container grid grid-cols-12">
       <Calculator
         className="col-span-12"
-        context={context}
         calculatorTabs={[
           {
             nav: {

package/src/components/Calculator/Calculator.tsx

@@ -24,7 +24,7 @@ type NavButtonProps = {
 };
 
 export const Calculator = JSX<CalculatorProps>(
-  ({ className = '', context, calculatorTabs = [], ...rest }) => {
+  ({ className = '', calculatorTabs = [], ...rest }) => {
     const tabsNav = calculatorTabs.map((_) => _.nav || ({} as CalculatorNav));
     const calculatorBlocks = calculatorTabs.map(
       ({ calculatorBlock }) => calculatorBlock || ({} as CalculatorBlockDef),
@@ -41,7 +41,6 @@ export const Calculator = JSX<CalculatorProps>(
 
     return (
       <BlockWrapper
-        context={context}
         className={`box-border overflow-hidden relative font-sans w-100 text-primary-text bg-white ${className}`}
         {...rest}
       >
@@ -61,9 +60,7 @@ export const Calculator = JSX<CalculatorProps>(
           style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
           role="list"
         >
-          {calculatorBlocks?.length
-            ? calculatorBlocks.map(renderCalculatorBlock({ context, className }))
-            : null}
+          {calculatorBlocks?.length ? calculatorBlocks.map(renderCalculatorBlock) : null}
         </div>
       </BlockWrapper>
     );

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
@@ -9,7 +9,6 @@ import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
 import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
-import { renderPaymentTypeSelector } from './renderPaymentTypeSelector';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useCreditCalculatorParams } from './useCreditCalculatorParams';
 
@@ -27,10 +26,12 @@ const paymentTypeItems = [
   },
 ];
 
-export interface CreditCalculatorProp extends CommonCalculatorProps, UniBlockProps {}
+export interface CreditCalculatorProp extends CommonCalculatorProps {
+  className?: string;
+}
 
 export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
-  ({ context, className = '', sourceBookDir, buttons, footnote }) => {
+  ({ className = '', sourceBookDir, buttons, footnote }) => {
     const [isAnnuity, toggleIsAnnuity] = useState(false);
     const [isInsurance, toggleIsInsurance] = useState(true);
     const [isSalaryClient, toggleIsSalaryClient] = useState(false);
@@ -88,13 +89,12 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             value={calculatorParams.monthlyPayment}
             postfix="₽"
           />
-          {renderPaymentTypeSelector({
-            context,
-            items: paymentTypeItems,
-            checkedItem: isAnnuity ? ANNUITY : DIFFERENTIAL,
-            onChange: (text: string) => toggleIsAnnuity(text === ANNUITY),
-          })}
-          {renderButtonSection(context, buttons)}
+          <RadioButtonGroup
+            items={paymentTypeItems}
+            checkedItem={isAnnuity ? ANNUITY : DIFFERENTIAL}
+            onChange={(text: string) => toggleIsAnnuity(text === ANNUITY)}
+          />
+          {renderButtonSection(buttons)}
           {renderFootnote(footnote)}
         </div>
       </section>

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -2,7 +2,7 @@
 
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/JSXBlock';
+import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import {
@@ -17,13 +17,11 @@ import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
 import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
-import { renderPaymentTypeSelector } from './renderPaymentTypeSelector';
 import { renderWantedSumInput } from './renderWantedSumInput';
 
-export interface DepositCalculatorProp
-  extends DepositCalculatorParams,
-    CommonCalculatorProps,
-    UniBlockProps {}
+export interface DepositCalculatorProp extends DepositCalculatorParams, CommonCalculatorProps {
+  className?: string;
+}
 
 const EVERY_MONTH = 'everyMonth';
 const AT_END_TERM = 'atEndTerm';
@@ -40,7 +38,7 @@ const depositTypeItems = [
 ];
 
 export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
-  ({ context, className = '', rate, buttons, footnote }) => {
+  ({ className = '', rate, buttons, footnote }) => {
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
     const [isEveryMonth, toggleIsEveryMonth] = useState(false);
@@ -78,13 +76,12 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
           {finallySum ? (
             <CalculatorValueBlock title="Сумма в конце срока" value={finallySum} postfix="₽" />
           ) : null}
-          {renderPaymentTypeSelector({
-            context,
-            items: depositTypeItems,
-            checkedItem: isEveryMonth ? EVERY_MONTH : AT_END_TERM,
-            onChange: (text: string) => toggleIsEveryMonth(text === EVERY_MONTH),
-          })}
-          {renderButtonSection(context, buttons)}
+          <RadioButtonGroup
+            items={depositTypeItems}
+            checkedItem={isEveryMonth ? EVERY_MONTH : AT_END_TERM}
+            onChange={(text: string) => toggleIsEveryMonth(text === EVERY_MONTH)}
+          />
+          {renderButtonSection(buttons)}
           {renderFootnote(footnote)}
         </div>
       </section>

package/src/components/Calculator/renderButtonSection.tsx

@@ -1,9 +1,8 @@
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 
-export function renderButtonSection(context: ContentPageContext, buttons?: ButtonWithIconProps[]) {
+export function renderButtonSection(buttons?: ButtonWithIconProps[]) {
   return buttons?.length ? (
-    <ButtonSection context={context} buttons={buttons} className="flex flex-col mt-7 gap-2" />
+    <ButtonSection buttons={buttons} className="flex flex-col mt-7 gap-2" />
   ) : null;
 }

package/src/components/Calculator/renderCalculatorBlock.tsx

@@ -1,27 +1,24 @@
-import type { JSXBlock } from '../../model/JSXBlock';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { CalculatorBlockDef } from './CalculatorContent';
-import { EmbeddableCalcBlocks, EmbeddableCalcProps } from './EmbeddableCalcBlocks';
+import { EmbeddableCalcBlocks } from './EmbeddableCalcBlocks';
 
-export const renderCalculatorBlock =
-  ({ context, className }: any) =>
-  (block: CalculatorBlockDef, i: number) => {
-    const type = block?.calcType;
-    if (!type || !(type in EmbeddableCalcBlocks)) {
-      return null;
-    }
-    const EmbeddedBlock: JSXBlock<EmbeddableCalcProps> = EmbeddableCalcBlocks[type];
+export const renderCalculatorBlock = (block: CalculatorBlockDef, i: number) => {
+  const type = block?.calcType;
+  if (!type || !(type in EmbeddableCalcBlocks)) {
+    return null;
+  }
+  const EmbeddedBlock = EmbeddableCalcBlocks[type];
 
-    return (
-      <section
-        key={String(i)}
-        className={`box-border relative bg-white flex shrink-0 self-start basis-full ${className}`}
-        role="listitem"
-      >
-        <div className="box-border p-9 w-full">
-          {block?.title ? <Heading className="text-center mb-6" title={block.title} /> : null}
-          <EmbeddedBlock context={context} {...block} className="flex justify-between" />
-        </div>
-      </section>
-    );
-  };
+  return (
+    <section
+      key={String(i)}
+      className="box-border relative bg-white flex shrink-0 self-start basis-full"
+      role="listitem"
+    >
+      <div className="box-border p-9 w-full">
+        {block?.title ? <Heading className="text-center mb-6" title={block.title} /> : null}
+        <EmbeddedBlock {...block} className="flex justify-between" />
+      </div>
+    </section>
+  );
+};

package/src/components/CardTransfer/CardTransfer.fixture.tsx

@@ -1,6 +1,6 @@
-import { context } from '../../react/setup-fixture';
-import { CardTransfer } from './CardTransfer';
+import '../../react/setup-fixture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { CardTransfer } from './CardTransfer';
 
 const button: ButtonProps = {
   href: '',
@@ -10,5 +10,5 @@ const button: ButtonProps = {
 };
 
 export default {
-  default: <CardTransfer context={context} button={button} />,
+  default: <CardTransfer button={button} />,
 };

package/src/components/CardTransfer/CardTransfer.tsx

@@ -25,21 +25,19 @@ export const CardTransfer = JSX<CardTransferProps>(
     label = DEFAULT_LABEL,
     placeholder = DEFAULT_PLACEHOLDER,
     button,
-    context,
     ...rest
   }) => {
-    const router = context.useRouter();
-    const { handlerDecorator } = context;
     const [value, setValue] = useState<string>('');
     const isDisabled = !Number(getSanitizedValue(value));
     const buttonStyle = isDisabled
       ? getDisabledButtonClasses({ version: button?.version })
       : getRegularButtonClasses({ className: 'text-white', version: button?.version });
 
+    const link = useLink();
+
     return (
       <BlockWrapper
         className={`p-[50px] flex flex-col items-center font-sans bg-white ${className}`}
-        context={context}
         {...rest}
       >
         {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}
@@ -57,7 +55,7 @@ export const CardTransfer = JSX<CardTransferProps>(
               type="submit"
               className={`w-full p-4 mt-6 ${buttonStyle} `}
               disabled={isDisabled}
-              {...useLink({ router, handlerDecorator }, button)}
+              {...link(button)}
             >
               {button.text}
             </button>

package/src/components/Catalog/Catalog.fixture.tsx

@@ -1,6 +1,6 @@
 import type { Picture } from '../../model/Picture';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Catalog, CatalogProps } from './Catalog';
 
@@ -36,7 +36,6 @@ const catalogCard = {
 };
 
 export const defaultProps: CatalogProps = {
-  context,
   title: 'Каталог',
   description: 'Описание',
   cards: new Array(5).fill(catalogCard).flat(),

package/src/components/Catalog/Catalog.tsx

@@ -1,12 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { Headline } from '../Headline/Headline';
 import { CatalogCard } from './CatalogCard';
-import type { CatalogCardType, CatalogContent } from './CatalogContent';
+import type { CatalogContent } from './CatalogContent';
 
 export interface CatalogProps extends CatalogContent, UniBlockProps {}
 
@@ -15,34 +14,41 @@ const CARD_FULL_VIEW_COUNT = 3;
 const CARD_SHIFT = 430;
 
 export const Catalog = JSX<CatalogProps>(
-  ({ context, cards = [], className = '', title, description, ...rest }) => {
+  ({ cards = [], className = '', title, description, ...rest }) => {
     const [activeCardIndex, setActiveCardIndex] = useState(0);
 
+    const handleNextClick = useCallback(() => setActiveCardIndex((_) => _ + 1), []);
+    const handlePrevClick = useCallback(() => setActiveCardIndex((_) => _ - 1), []);
+
+    const isUseSlider = cards.length > CARD_FULL_VIEW_COUNT;
+    const showNextButton = isUseSlider && cards.length - activeCardIndex > CARD_FULL_VIEW_COUNT;
+    const showPrevButton = isUseSlider && activeCardIndex > 0;
+
     return (
       <BlockWrapper
-        context={context}
         className={`bg-white relative font-sans p-[50px] overflow-hidden text-center ${className}`}
         {...rest}
       >
         <Headline
-          context={context}
           className="!p-0"
           title={title}
           description={description}
           headlineVersion="M"
           align="center"
+          {...rest}
         />
         <div
           className="flex duration-1000 gap-3.5 mt-8"
           style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
           role="list"
         >
-          {cards?.length ? cards.map(renderCatalogCard(context)) : null}
+          {cards?.length ? cards.map((card, i) => <CatalogCard key={String(i)} {...card} />) : null}
         </div>
-        {renderNavButtons({
-          cardsCount: cards.length,
-          activeCardIndex,
-          setActiveCardIndex,
+        {renderArrows({
+          handler: [handlePrevClick, handleNextClick],
+          isShown: [showPrevButton, showNextButton],
+          btnClass: ['left-8', 'right-8'],
+          className: 'top-1/2 z-10 mt-6',
         })}
         <div className={`${BLUR_BLOCK_CLASSES} left-0 bg-opacity-from-white`} />
         <div className={`${BLUR_BLOCK_CLASSES} right-0 bg-opacity-to-white`} />
@@ -50,33 +56,3 @@ export const Catalog = JSX<CatalogProps>(
     );
   },
 );
-
-const renderCatalogCard = (context: ContentPageContext) => (card: CatalogCardType, i: number) => {
-  return <CatalogCard key={String(i)} context={context} {...card} />;
-};
-
-interface RenderNavButtonsProps {
-  cardsCount: number;
-  activeCardIndex: number;
-  setActiveCardIndex: (index: number) => void;
-}
-
-const renderNavButtons = ({
-  cardsCount,
-  activeCardIndex,
-  setActiveCardIndex,
-}: RenderNavButtonsProps) => {
-  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
-
-  const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
-  const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
-  const showPrevButton = isUseSlider && activeCardIndex > 0;
-
-  return renderArrows({
-    handler: [handlePrevClick, handleNextClick],
-    isShown: [showPrevButton, showNextButton],
-    btnClass: ['left-8', 'right-8'],
-    className: 'top-1/2 z-10 mt-6',
-  });
-};

package/src/components/Catalog/CatalogCard.tsx

@@ -1,13 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { CatalogCardType } from './CatalogContent';
 
-export interface CatalogCardProps extends CatalogCardType, UniBlockProps {
+export interface CatalogCardProps extends CatalogCardType {
+  className?: string;
   version?: BlockVersion;
 }
 
@@ -17,28 +17,26 @@ const cardStyleMap: Record<ProductColorVersion, string> = {
 };
 
 export const CatalogCard = JSX<CatalogCardProps>(
-  ({ className = '', title, description, image, price, button, colors }) => {
-    return (
-      <section
-        className={`border border-solid box-border border-main-stroke p-[30px] min-w-[402px] flex flex-col justify-left ${className}`}
-        role="listitem"
-      >
-        {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}
-        {title ? (
-          <Heading headingType="h6" as="h4" className="text-left mb-1.5" title={title} />
-        ) : null}
-        {description ? <div className="text-m-light text-left mb-4">{description}</div> : null}
-        {colors?.length ? (
-          <div className="flex mb-4 text-s-light text-secondary-text">
-            <div className="mr-1.5">Доступные цвета: </div>
-            {colors.map(renderColorOption)}
-          </div>
-        ) : null}
-        {price ? <div className="text-h3 text-left">{price}&nbsp;₽</div> : null}
-        {button ? renderButton({ button, buttonClassName: 'mt-5 w-full' }) : null}
-      </section>
-    );
-  },
+  ({ className = '', title, description, image, price, button, colors }) => (
+    <section
+      className={`border border-solid box-border border-main-stroke p-[30px] min-w-[402px] flex flex-col justify-left ${className}`}
+      role="listitem"
+    >
+      {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}
+      {title ? (
+        <Heading headingType="h6" as="h4" className="text-left mb-1.5" title={title} />
+      ) : null}
+      {description ? <div className="text-m-light text-left mb-4">{description}</div> : null}
+      {colors?.length ? (
+        <div className="flex mb-4 text-s-light text-secondary-text">
+          <div className="mr-1.5">Доступные цвета: </div>
+          {colors.map(renderColorOption)}
+        </div>
+      ) : null}
+      {price ? <div className="text-h3 text-left">{price}&nbsp;₽</div> : null}
+      {button ? renderButton({ button, buttonClassName: 'mt-5 w-full' }) : null}
+    </section>
+  ),
 );
 
 const renderColorOption = (color: ProductColorVersion, i: number) => (

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

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 import { ComparisonTable } from './ComparisonTable';
 import type { Column } from './ComparisonTableContent';
 
@@ -95,7 +95,6 @@ export default {
         className="col-span-12"
         title="Другие дебетовые карты Россельхозбанка"
         isColoredFirstColumn={true}
-        context={context}
         rowHeaders={rowHeaders}
         orientation="vertical"
         columns={columns}
@@ -109,7 +108,6 @@ export default {
         className="col-span-12"
         title="Другие дебетовые карты Россельхозбанка"
         isColoredFirstColumn={true}
-        context={context}
         rowHeaders={rowHeaders}
         orientation="horizontal"
         columns={Array(2).fill(columns).flat()}

package/src/components/ComparisonTable/ComparisonTable.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 import { ComparisonTable } from './ComparisonTable';
 import type { Column } from './ComparisonTableContent';
 
@@ -199,7 +199,6 @@ export default {
       <ComparisonTable
         className="col-span-12"
         title="Другие дебетовые карты Россельхозбанка"
-        context={context}
         rowHeaders={rowHeaders}
         columns={Array(2).fill(columns).flat()}
       />
@@ -211,7 +210,6 @@ export default {
         className="col-span-12"
         title="Другие дебетовые карты Россельхозбанка"
         visibleRowLength={3}
-        context={context}
         rowHeaders={rowHeaders}
         columns={Array(2).fill(columns).flat()}
       />
@@ -224,7 +222,6 @@ export default {
         title="Другие дебетовые карты Россельхозбанка"
         visibleRowLength={3}
         isColoredFirstColumn={true}
-        context={context}
         rowHeaders={rowHeaders}
         columns={Array(2).fill(columns).flat()}
       />
@@ -235,7 +232,6 @@ export default {
       <ComparisonTable
         className="col-span-12"
         title="Другие вклады и сбережения"
-        context={context}
         rowHeaders={rowHeaders2}
         columns={Array(2).fill(columns2).flat()}
       />
@@ -246,7 +242,6 @@ export default {
       <ComparisonTable
         className="col-span-12"
         title="Другие вклады и сбережения"
-        context={context}
         rowHeaders={rowHeaders2}
         columns={columns2.slice(0, 2)}
       />

package/src/components/ComparisonTable/ComparisonTable.mobile.tsx

@@ -28,7 +28,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>((props) => {
 });
 
 const TableInner = JSX<ComparisonTableProps>(
-  ({ columns, rowHeaders, isColoredFirstColumn, visibleRowLength, orientation, context }) => {
+  ({ columns, rowHeaders, isColoredFirstColumn, visibleRowLength, orientation, ...rest }) => {
     const [columnsViewState, setColumnsViewState] = useState(
       new Array<boolean>(columns?.length || 0).fill(!visibleRowLength),
     );
@@ -51,20 +51,18 @@ const TableInner = JSX<ComparisonTableProps>(
     const tableColumns = columns?.map(({ data, header }, colIndex) => (
       <TableColumn
         key={String(colIndex)}
-        context={context}
         visibleRowLength={visibleRowLength}
         showRow={columnsViewState[colIndex]}
         header={header}
         columnData={getColumnData(data)}
         isFillGradient={colIndex === 0 && isColoredFirstColumn}
         onToggleColumn={() => handleToggleColumn(colIndex)}
+        {...rest}
       />
     ));
 
     return orientation === 'horizontal' ? (
-      <SwipeListControl context={context} onSlideChange={handleSlideChange}>
-        {tableColumns}
-      </SwipeListControl>
+      <SwipeListControl onSlideChange={handleSlideChange}>{tableColumns}</SwipeListControl>
     ) : (
       tableColumns
     );