@redneckz/wildless-cms-uni-blocks 0.6.36 → 0.6.38

package/src/components/ParagraphBlock/ParagraphBlock.fixture.tsx

@@ -0,0 +1,45 @@
+import '../../setup-fixture';
+import { ParagraphBlock } from './ParagraphBlock';
+
+const DEFAULT_CLASS_NAME = 'col-span-12 w-full';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="По умолчанию (наследует от родителя)" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст размера XL" size="text-xl" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст размера L" size="text-l" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст размера M" size="text-m" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст размера S" size="text-s" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст размера XS" size="text-xs" />
+    </div>
+  ),
+  colors: (
+    <div className="container grid grid-cols-12">
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="По умолчанию (наследует от родителя)" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-error" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-green" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-main" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-primary-main" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-primary-text" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-secondary-text" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-white" />
+    </div>
+  ),
+  alignment: (
+    <div className="container grid grid-cols-12">
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="По умолчанию (наследует от родителя)" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Слева" align="text-left" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Справа" align="text-right" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="По центру" align="text-center" />
+    </div>
+  ),
+  font: (
+    <div className="container grid grid-cols-12">
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="По умолчанию (наследует от родителя)" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Тонкий" font="font-light" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Обычный" font="font-normal" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Средний" font="font-medium" />
+    </div>
+  ),
+};

package/src/components/ParagraphBlock/ParagraphBlock.tsx

@@ -0,0 +1,19 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { ParagraphBlockContent } from './ParagraphBlockContent';
+
+interface ParagraphBlockProps extends ParagraphBlockContent, UniBlockProps {}
+
+export const ParagraphBlock = JSX<ParagraphBlockProps>((props) => {
+  const { className, text, size, color, align, font, ...rest } = props;
+
+  return (
+    <BlockWrapper className={className} {...rest}>
+      <Paragraph size={size} color={color} align={align} font={font}>
+        {text}
+      </Paragraph>
+    </BlockWrapper>
+  );
+});

package/src/components/ParagraphBlock/ParagraphBlock.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/ParagraphBlock/ParagraphBlockContent.ts

@@ -0,0 +1,9 @@
+import type { ParagraphProps } from '../../ui-kit/Paragraph/ParagraphProps';
+
+/**
+ * @title Параграф
+ */
+export interface ParagraphBlockContent extends ParagraphProps {
+  /** @title Текст */
+  text?: string;
+}

package/src/components/ProductBlock/ProductBlock.tsx

@@ -22,7 +22,7 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
 
   return (
     <BlockWrapper
-      className={`font-sans overflow-hidden p-[50px] flex flex-col box-border min-h-[454px] ${VersionStyleMap[version]} ${className}`}
+      className={`font-sans overflow-hidden p-12 flex flex-col box-border min-h-[454px] ${VersionStyleMap[version]} ${className}`}
       {...rest}
     >
       {backwardButton?.text

package/src/components/ProductGallery/ProductGallery.tsx

@@ -1,20 +1,21 @@
 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 { BlockVersion } from '../../model/BlockVersion';
 import { VersionStyleMap } from '../../model/BlockVersion';
 import { BorderVersionStyleMap } from '../../model/BorderVersion';
+import { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
-import type { ProductGalleryContent, ProductGalleryNav } from './ProductGalleryContent';
+import type { ProductGalleryContent } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-interface RenderNavButtonProps {
-  slide?: ProductGalleryNav;
+interface NavButtonProps {
+  slide?: HeadlineCommonProps;
   i: number;
-  activeSlideIndex?: number;
+  isActive: boolean;
   onClick: () => void;
   version: BlockVersion;
 }
@@ -34,10 +35,11 @@ export const ProductGallery = JSX<ProductGalleryProps>(
     const galleryNav = slides.map((s) => s.nav);
     const galleryBlocks = slides.map((s) => s.productBlock);
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+    const handleActiveSlideIndex = useCallback((_: number) => setActiveSlideIndex(_), []);
 
     return (
       <BlockWrapper
-        className={`box-border pt-[50px] overflow-hidden relative font-sans w-100 mb-6 ${className}
+        className={`box-border pt-12 overflow-hidden relative font-sans w-100 mb-6 ${className}
         ${VersionStyleMap[version]}`}
         {...rest}
       >
@@ -54,8 +56,8 @@ export const ProductGallery = JSX<ProductGalleryProps>(
             renderNavButton({
               slide,
               i,
-              activeSlideIndex,
-              onClick: () => setActiveSlideIndex(i),
+              isActive: Boolean(i === activeSlideIndex),
+              onClick: () => handleActiveSlideIndex(i),
               version,
             }),
           )}
@@ -77,7 +79,7 @@ function renderProductBlock(block: ProductBlockInnerContent & UniBlockProps, i:
     >
       <div className="flex grow">
         <ProductBlockInner
-          className={`pl-[50px] z-10 ${additionalClass}`}
+          className={`pl-12 z-10 ${additionalClass}`}
           textBlockClassName="mb-[154px]"
           headlineVersion="XXL"
           {...block}
@@ -87,17 +89,15 @@ function renderProductBlock(block: ProductBlockInnerContent & UniBlockProps, i:
   );
 }
 
-function renderNavButton({ slide, i, activeSlideIndex, onClick, version }: RenderNavButtonProps) {
-  const isActiveBtn = i === activeSlideIndex;
-
-  const btnClassName = isActiveBtn
+function renderNavButton({ slide, i, isActive, onClick, version }: NavButtonProps) {
+  const btnClassName = isActive
     ? 'bg-white shadow-dark-blue/42 min-w-[350px] border-none p-6'
     : `min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur
       ${VersionStyleMap[version]}`;
-  const btnTitleClassName = isActiveBtn
+  const btnTitleClassName = isActive
     ? 'text-primary-text !text-h6 p-2'
     : `text-l pb-1 ${productBlockStyleMap[version].title}`;
-  const btnDescClassName = isActiveBtn
+  const btnDescClassName = isActive
     ? 'text-secondary-text text-l-light'
     : `text-m-light ${productBlockStyleMap[version].text}`;
 

package/src/components/Recommendation/Recommendation.fixture.tsx

@@ -1,7 +1,9 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
-import { Recommendation, RecommendationProps } from './Recommendation';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { RecommendationProps } from './Recommendation';
+import { Recommendation } from './Recommendation';
 
 const cowCard: Picture = {
   src: 'cow-card.png',
@@ -109,6 +111,36 @@ export const shortProps: RecommendationProps = {
   ],
 };
 
+const button: ButtonProps = {
+  text: 'Подробнее',
+  href: '/credit-cards',
+  version: 'secondary',
+};
+
+export const buttonProps: RecommendationProps = {
+  title: 'Также интересуются',
+  recommendations: [
+    {
+      title: 'Кредиты',
+      items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
+      image: five,
+      button,
+    },
+    {
+      title: 'Кредитная карта с длинным заголовком',
+      description: 'Льготный период 120 дней',
+      image: card,
+      button,
+    },
+    {
+      title: 'Кредиты',
+      items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
+      image: five,
+      button,
+    },
+  ],
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12 mb-1">
@@ -135,4 +167,9 @@ export default {
       <Recommendation className="col-span-12" {...shortProps} version="secondary" />
     </div>
   ),
+  'with button': (
+    <div className="container grid grid-cols-12 mb-1">
+      <Recommendation className="col-span-12" {...buttonProps} />
+    </div>
+  ),
 };

package/src/components/SafeDepositRental/RegionsAndBranches.tsx

@@ -20,31 +20,29 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
     branches = [],
     selectedBranch,
     onSelectedBranch,
-  }) => {
-    return (
-      <div className="flex justify-between gap-4 mb-6">
-        <div className="max-w-[396px] w-1/2">
-          <WrapperSelect
-            data={regions}
-            fieldValue="code"
-            fieldLabel="name"
-            selected={selectedRegion}
-            setSelected={onSelectedRegion}
-            label="Регион"
-          />
-        </div>
-        <div className="max-w-[396px] w-1/2">
-          <WrapperSelect
-            data={branches}
-            fieldValue="branchCode"
-            fieldLabel="address"
-            selected={selectedBranch}
-            setSelected={onSelectedBranch}
-            label="Отделение"
-            placeholder="Выберите отделение"
-          />
-        </div>
+  }) => (
+    <div className="flex justify-between gap-4 mb-6">
+      <div className="max-w-[396px] w-1/2">
+        <WrapperSelect
+          data={regions}
+          fieldValue="code"
+          fieldLabel="name"
+          selected={selectedRegion}
+          setSelected={onSelectedRegion}
+          label="Регион"
+        />
       </div>
-    );
-  },
+      <div className="max-w-[396px] w-1/2">
+        <WrapperSelect
+          data={branches}
+          fieldValue="branchCode"
+          fieldLabel="address"
+          selected={selectedBranch}
+          setSelected={onSelectedBranch}
+          label="Отделение"
+          placeholder="Выберите отделение"
+        />
+      </div>
+    </div>
+  ),
 );

package/src/components/SafeDepositRental/RenderRadioButtons.tsx

@@ -1,11 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks/core';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks/core';
 import { Radio } from '../../ui-kit/Radio/Radio';
 
 export const RenderRadioButtons = JSX(() => {
   const [selectedOption, setSelectedOption] = useState('option2');
-
-  const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelectedOption(_.target.value);
+  const onChange = useCallback((_: string) => setSelectedOption(_), []);
 
   return (
     <div>

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -18,6 +18,7 @@ const DEFAULT_DAYS = 26;
 export const SafeDepositRental = JSX<SafeDepositRentalProps>(
   ({ title, footnote, className = '', ...rest }) => {
     const [showMap, setShowMap] = useState<boolean>(false);
+    const handleShowMap = useCallback(() => setShowMap((_) => !_), []);
     const [safeDepositState, setStateDepositState] = useState<SafeDepositRentalState>({
       selectedRegion: '',
       selectedBranch: '',
@@ -37,10 +38,6 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
       [setStateDepositState],
     );
 
-    const onShowMapToggle = () => {
-      setShowMap(!showMap);
-    };
-
     const points = getCoordinates(getBranch(branches, safeDepositState.selectedBranch) || branches);
 
     return (
@@ -58,7 +55,7 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
             regions={regions}
             branches={branches}
             data={{ ...safeDepositState, selectedRegion }}
-            onShowMapToggle={onShowMapToggle}
+            onClick={handleShowMap}
             onChange={handleChangeSafeDepositState}
           />
           {footnote ? <p className="text-s-light text-secondary-text">{footnote}</p> : null}

package/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -13,7 +13,7 @@ export interface SafeDepositRentalFieldsProps extends SafeDepositRentalState {
   safeBoxCases?: SafeBoxCase[];
   caseVolumes?: SafeBoxCaseVolume[];
   branches?: Branch[];
-  onShowMapToggle: () => void;
+  onClick: () => void;
   onChange: HandleChangeState;
 }
 
@@ -29,7 +29,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
     safeBoxCases,
     caseVolumes,
     onChange,
-    onShowMapToggle,
+    onClick,
   }) => {
     return (
       <div className="flex-1 mr-9">
@@ -53,7 +53,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
         <span className="text-secondary-text text-l-light">Тип договора</span>
         <div className="flex justify-between items-center mt-5">
           <RenderRadioButtons />
-          <Button text="Офисы на карте" version="primary" onClick={onShowMapToggle} />
+          <Button text="Офисы на карте" version="primary" onClick={onClick} />
         </div>
       </div>
     );

package/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -11,12 +11,12 @@ export interface SafeDepositRentalFormProps {
   regions: Region[];
   branches: Branch[];
   data: SafeDepositRentalState;
-  onShowMapToggle: () => void;
+  onClick: () => void;
   onChange: (data: Partial<SafeDepositRentalState>) => void;
 }
 
 export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) => {
-  const { regions, data, branches, onChange, onShowMapToggle } = props;
+  const { regions, data, branches, onChange, onClick } = props;
 
   useEffect(() => {
     onChange({
@@ -41,7 +41,7 @@ export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) =>
       <SafeDepositRentalFields
         {...data}
         regions={regions}
-        onShowMapToggle={onShowMapToggle}
+        onClick={onClick}
         branches={branches}
         caseVolumes={caseVolumes}
         safeBoxCases={safeBoxCases}

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -13,12 +13,12 @@ export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
 const STEPS_SIZE_MAP: Record<SizeVersion, string> = {
   normal: 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]',
-  small: 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]',
+  small: 'h-12 w-12 min-w-12 min-h-12',
 };
 
 const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
   normal: 'min-h-[70px]',
-  small: 'min-h-[50px]',
+  small: 'min-h-12',
 };
 
 export const StepsBlock = JSX<StepsBlockProps>(
@@ -72,7 +72,7 @@ const renderStepTitle =
             {renderIconArea(size, version)(step, i)}
             {isLastStep ? null : (
               <div
-                className={`min-h-8 h-full w-[2px] ${
+                className={`min-h-8 h-full w-0.5 ${
                   showLines ? styleMap.iconConnector : ''
                 } ${margin}`}
               />

package/src/components/StepsBlock/StepsBlock.tsx

@@ -31,7 +31,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
     return (
       <BlockWrapper
         className={[
-          'box-border py-[50px] font-sans',
+          'box-border py-12 font-sans',
           shortGaps ? 'px-20' : 'px-[70px]',
           'flex flex-col items-center overflow-hidden',
           styleMap.background,
@@ -57,9 +57,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
             </div>
           </div>
         ) : null}
-        {button?.text ? (
-          <Button className="mt-8 min-w-[240px]" version="primary" {...button} />
-        ) : null}
+        {button?.text ? <Button className="mt-8 min-w-60" version="primary" {...button} /> : null}
       </BlockWrapper>
     );
   },
@@ -67,8 +65,8 @@ export const StepsBlock = JSX<StepsBlockProps>(
 
 const renderStepIcon =
   (styleMap: StyleType, version?: BlockVersion) =>
-  ({ icon }: Step, i: number) => {
-    return (
+  ({ icon }: Step, i: number) =>
+    (
       <div key={String(i)} className="flex flex-col items-center text-center">
         <div
           className={`h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center
@@ -82,4 +80,3 @@ const renderStepIcon =
         </div>
       </div>
     );
-  };

package/src/components/Tabs/LinkTab.tsx

@@ -1,6 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
-import { EventBus } from '../../EventBus/EventBus';
 import { useLink } from '../../hooks/useLink';
 import {
   ACTIVE_LINK_CLASSES,
@@ -15,20 +13,14 @@ import type { LinkTabData, TabData } from './TabsContent';
 interface LinkTabProps {
   tab: LinkTabData;
   currentTab?: TabData;
-  onClick?: (tab: TabData) => void;
 }
 
 export const LinkTab = JSX<LinkTabProps>((props) => {
-  const { tab, currentTab, onClick } = props;
+  const { tab, currentTab } = props;
   const active = currentTab?.type === 'link' && currentTab.href === tab.href;
 
-  const handleClick = useCallback(() => {
-    onClick && onClick(tab);
-    EventBus.inst.fire('anchorClick', { isScrolling: true, label: tab.href });
-  }, [tab, onClick]);
-
   const link = useLink();
-  const adjustedProps = link({ ...tab, onClick: handleClick });
+  const adjustedProps = link(tab);
 
   return (
     <a

package/src/components/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../../EventBus/EventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -11,11 +11,6 @@ export interface TabActivationEvent {
   label?: string;
 }
 
-export interface AnchorClickScrollingEvent {
-  isScrolling?: boolean;
-  label?: string;
-}
-
 export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
 export const Tabs = JSX<TabsBlockProps>((props) => {
@@ -26,10 +21,7 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
   useEffect(
     () =>
       EventBus.inst.subscribe('tab', (event) => {
-        if (!tabs) {
-          return;
-        }
-        const tab = tabs.find(checkTab(event));
+        const tab = tabs?.find(checkTab(event));
         if (event.type === 'link' && tab) {
           setCurrentTab(tab);
         }
@@ -37,20 +29,20 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
     [tabs],
   );
 
-  useEffect(() => {
-    if (currentTab?.type === 'group') {
-      return EventBus.inst.subject('tab', { label: currentTab.ref });
-    }
-
-    return undefined;
-  }, [currentTab]);
+  useEffect(
+    () =>
+      currentTab?.type === 'group'
+        ? EventBus.inst.subject('tab', { label: currentTab.ref })
+        : undefined,
+    [currentTab],
+  );
 
-  const handleClick = (selectedTab: TabData) => {
+  const handleClick = useCallback((selectedTab: TabData) => {
     if (selectedTab?.type === 'group') {
       EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
     }
     setCurrentTab(selectedTab);
-  };
+  }, []);
 
   return (
     <BlockWrapper

package/src/components/TariffsTable/TableTileHeader.tsx

@@ -3,13 +3,11 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 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 ? (
-        <Img className="ml-auto max-w-6 max-h-6" image={icon} width="24px" height="24px" />
-      ) : null}
-    </div>
-  );
-});
+export const TableTileHeader = JSX<TariffsTableRowHeader>(({ title, icon }) => (
+  <div className="flex gap-2.5 mb-2">
+    {title ? <Heading headingType="h3" className="font-medium" title={title} /> : null}
+    {icon ? (
+      <Img className="ml-auto max-w-6 max-h-6" image={icon} width="24px" height="24px" />
+    ) : null}
+  </div>
+));

package/src/components/TariffsTable/TariffsTable.tsx

@@ -16,7 +16,6 @@ export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
 interface WrapperProps {
   controls: CarouselControls;
-  isScrollAvailable: boolean;
 }
 
 export const TariffsTable = JSX<TariffsTableProps>(
@@ -39,7 +38,6 @@ export const TariffsTable = JSX<TariffsTableProps>(
       itemCount: itemCount,
       visibleItemCount: COLS_LENGTH_FOR_SCROLL,
     });
-    const { isScrollAvailable } = controls;
     const rows = (rowData || []).map((row, i) => (
       <TariffsTableRow key={String(i)} row={row} activeIndex={activeIndex} rowIdx={i} {...rest} />
     ));
@@ -48,7 +46,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
     return (
       <BlockWrapper
-        className={`bg-white font-sans p-[50px] overflow-hidden text-primary-text relative ${
+        className={`bg-white font-sans p-12 overflow-hidden text-primary-text relative ${
           itemCount > 1 ? 'pr-0' : ''
         } ${className}`}
         {...rest}
@@ -58,7 +56,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
         {hiddenRowsNum > 0 ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (
-              <Wrapper controls={controls} isScrollAvailable={isScrollAvailable}>
+              <Wrapper controls={controls}>
                 {visibleRows}
                 <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
               </Wrapper>
@@ -66,9 +64,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
             renderFoldButton={renderDefaultFoldButton}
           />
         ) : (
-          <Wrapper controls={controls} isScrollAvailable={isScrollAvailable}>
-            {rows}
-          </Wrapper>
+          <Wrapper controls={controls}>{rows}</Wrapper>
         )}
       </BlockWrapper>
     );
@@ -89,20 +85,22 @@ function renderDescription(description?: string) {
   return description ? <div className="mb-9 text-center text-l">{description}</div> : null;
 }
 
-const Wrapper = JSX<WrapperProps>(({ children, controls, isScrollAvailable }) => (
-  <div role="table">
-    <div className="relative">
-      {children}
-      {isScrollAvailable
-        ? renderArrows({
-            ...controls,
-            btnClass: ['top-[108px]', 'top-[44px]'],
-            className: 'right-7',
-          })
-        : null}
+const Wrapper = JSX<WrapperProps>(({ children, controls }) => {
+  const { isScrollAvailable } = controls;
+
+  return (
+    <div role="table">
+      <div className="relative">
+        {children}
+        {renderArrows({
+          ...controls,
+          btnClass: ['top-[108px]', 'top-[44px]'],
+          className: 'right-7',
+        })}
+      </div>
+      {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>
-));
+  );
+});