@redneckz/wildless-cms-uni-blocks 0.3.69 → 0.3.71

package/mobile/src/{setup-fixture.ts → react/setup-fixture.ts}

@@ -2,8 +2,9 @@ import { setup } from '@redneckz/uni-jsx';
 
 import { useEffect, useState } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { DaDataAPI } from './api/DaDataAPI';
-import type { ContentPageContext } from './components/ContentPage/ContentPageContext';
+import { DaDataAPI } from '../api/DaDataAPI';
+import type { ContentPageContext } from '../components/ContentPage/ContentPageContext';
+import { IntersectionObserverTag } from './IntersectionObserverTag';
 
 setup(jsx, jsxs);
 
@@ -28,6 +29,7 @@ const Router = () => {
     },
   };
 };
+
 export const context: ContentPageContext = {
   useState,
   useRouter: Router,
@@ -78,6 +80,7 @@ export const context: ContentPageContext = {
       setTerm: (text: string) => setTerm(text),
     };
   },
+  IntersectionObserverTag,
 };
 
 export const mobileContext: ContentPageContext = {

package/mobile/src/services/sitemap/isHrefActive.ts

@@ -4,7 +4,8 @@ import { withoutMobilePath } from '../../utils/withoutMobilePath';
 export const isHrefActive = (
   href: string | undefined,
   router: { pathname?: string; href?: string },
-  cmp: (href: string, baseHref: string) => boolean = (href, baseHref) => baseHref.startsWith(href),
+  cmp: (targetHref: string, baseHref: string) => boolean = (targetHref, baseHref) =>
+    baseHref.startsWith(targetHref),
 ) => {
   return cmp(
     withoutQuery(href),

package/mobile/src/ui-kit/Button/ArrowButton.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { ButtonProps } from './ButtonProps';
 import { Button } from './Button';
-import { ButtonProps } from './ButtonProps';
 import { Img } from '../Img/Img';
 
 export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) => (

package/mobile/src/ui-kit/Button/ButtonSection.tsx

@@ -20,7 +20,9 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
 });
 
 function renderButton({ icon, ...button }: ButtonWithIconProps, i: number) {
-  if (!button?.text) return;
+  if (!button?.text) {
+    return;
+  }
 
   return icon ? (
     <Button

package/mobile/src/ui-kit/Button/renderArrows.tsx

@@ -0,0 +1,41 @@
+import { ArrowButton } from './ArrowButton';
+import type { FuncReturnVoid } from '../../types';
+
+type renderArrowsProps = {
+  handler: FuncReturnVoid<MouseEvent>[];
+  isShown: [boolean, boolean];
+  btnClass: [string, string];
+  className?: string;
+  isDisabled?: boolean;
+};
+
+export function renderArrows({
+  handler,
+  isShown,
+  btnClass,
+  className = '',
+  isDisabled = false,
+}: renderArrowsProps) {
+  return (
+    <div>
+      {isShown[0] || isDisabled ? (
+        <ArrowButton
+          className={`absolute z-10 ${btnClass[0]} ${className}`}
+          onClick={handler[0]}
+          ariaLabel="Пролистать влево"
+          data-block-control="scroll-left"
+          disabled={!isShown[0]}
+        />
+      ) : null}
+      {isShown[1] || isDisabled ? (
+        <ArrowButton
+          className={`absolute z-10 rotate-180 ${btnClass[1]} ${className}`}
+          onClick={handler[1]}
+          ariaLabel="Пролистать вправо"
+          data-block-control="scroll-right"
+          disabled={!isShown[1]}
+        />
+      ) : null}
+    </div>
+  );
+}

package/mobile/src/ui-kit/Img/Img.tsx

@@ -13,6 +13,7 @@ export const Img = JSX<ImageProps<Image>>(
       return (
         <Icon
           className={className}
+          imageClassName={imageClassName}
           iconVersion={getIconVersion(image)}
           name={icon}
           {...iconProps}

package/mobile/src/ui-kit/Input/Input.tsx

@@ -1,8 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { InputProps } from './InputProps';
+import { ChangeEvent } from 'react';
 
-export const Input = JSX<InputProps>(({ className = '', id, name, type = 'text', placeholder }) => {
-  return (
-    <input className={className} id={id} name={name || id} type={type} placeholder={placeholder} />
-  );
-});
+export const Input = JSX<InputProps>(
+  ({ className = '', id, name, type = 'text', placeholder, pattern, value, onChange }) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      const validInputValue = e.target.validity.valid ? e.target.value : value;
+      onChange(validInputValue);
+    };
+    return (
+      <input
+        className={className}
+        id={id}
+        name={name || id}
+        type={type}
+        pattern={pattern}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => handleChange(e)}
+      />
+    );
+  },
+);

package/mobile/src/ui-kit/Input/InputProps.ts

@@ -6,4 +6,7 @@ export interface InputProps {
   name?: string;
   type?: InputTypes;
   placeholder?: string;
+  pattern?: string;
+  value: string;
+  onChange: (value: string) => void;
 }

package/mobile/src/ui-kit/InputRange/InputRange.tsx

@@ -4,18 +4,26 @@ import type { InputRangeProps } from './InputRangeProps';
 
 export const InputRange = JSX<InputRangeProps>(
   ({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
-    const handleChange = (value: string) => {
-      if (!onChange) return;
-      const sanitizedValue = Number(value.replace(/\D/g, ''));
+    const handleChange = (_: string) => {
+      if (!onChange) {
+        return;
+      }
+      const sanitizedValue = Number(_.replace(/\D/g, ''));
       onChange(sanitizedValue);
     };
     const inputStyle = {
       backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
     };
     const handleBlur = () => {
-      if (!onChange) return;
-      if (value < min) onChange(min);
-      if (value > max) onChange(max);
+      if (!onChange) {
+        return;
+      }
+      if (value < min) {
+        onChange(min);
+      }
+      if (value > max) {
+        onChange(max);
+      }
     };
     return (
       <div className={className}>

package/mobile/src/ui-kit/SVG.tsx

@@ -32,8 +32,8 @@ export const SVG = JSX<SVGProps>(
         width={width}
         height={height}
       >
-        {paths.map(({ d, fill, ...options }, i) => (
-          <path key={i} d={d} fill={fill || 'currentColor'} {...commonOptions} {...options} />
+        {paths.map(({ d, fill: pathFill, ...options }, i) => (
+          <path key={i} d={d} fill={pathFill || 'currentColor'} {...commonOptions} {...options} />
         ))}
       </svg>
     );

package/mobile/src/ui-kit/Select/Select.tsx

@@ -4,12 +4,22 @@ export interface SelectProps {
   className?: string;
   id?: string;
   name?: string;
+  value: string;
+  onChange: (value: string) => void;
 }
 
-export const Select = JSX<SelectProps>(({ className = '', id, name, children }) => {
-  return (
-    <select className={className} id={id} name={name || id}>
-      {children}
-    </select>
-  );
-});
+export const Select = JSX<SelectProps>(
+  ({ className = '', id, name, children, value, onChange }) => {
+    return (
+      <select
+        className={className}
+        id={id}
+        name={name || id}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      >
+        {children}
+      </select>
+    );
+  },
+);

package/mobile/src/ui-kit/SwipeListControl/SwipeListControl.tsx

@@ -2,9 +2,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
 import { SwipeListControlDots } from './SwipeListControlDots';
 import { SwipeListControlList } from './SwipeListControlList';
+import type { SwipeListControlProps } from './SwipeListControlProps';
 import { getIndexParts } from './utils/getIndexParts';
 import { getScrollPoints } from './utils/getScrollPoints';
-import type { SwipeListControlProps } from './SwipeListControlProps';
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
@@ -27,12 +27,17 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     };
 
     const handleScroll = (e: UIEvent) => {
-      const { scrollLeft, clientWidth, childElementCount, scrollWidth, children } =
-        e.currentTarget as HTMLElement;
+      const {
+        scrollLeft,
+        clientWidth,
+        childElementCount,
+        scrollWidth,
+        children: childrenCollection,
+      } = e.currentTarget as HTMLElement;
 
       // horizontal PADDING / 2 to compensate padding-margin combo of child container
       // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually
-      const itemWidth = (children[0] as HTMLElement).offsetWidth - padding / 2;
+      const itemWidth = (childrenCollection[0] as HTMLElement).offsetWidth - padding / 2;
       const scrollPoints = getScrollPoints({
         gap,
         padding,

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -46,7 +46,9 @@ const getDotStyles = (
   activeIndex: number,
   indexFraction: number,
 ): Record<string, string> | null => {
-  if (currentIdx < activeIndex || currentIdx > activeIndex + 1) return null;
+  if (currentIdx < activeIndex || currentIdx > activeIndex + 1) {
+    return null;
+  }
 
   const leftIndexMod = 1 - indexFraction;
   const rightIndexMod = indexFraction;

package/mobile/src/ui-kit/SwipeListControl/utils/getIndexParts.ts

@@ -11,8 +11,12 @@ export const getIndexParts = (
   index: number;
   fraction: number;
 } => {
-  const index = scrollPoints.findIndex(([start, end]) => start <= scrollLeft && scrollLeft < end);
-  if (index < 0) return { index, fraction: 0 };
+  const index = scrollPoints.findIndex(
+    ([pointStart, pointEnd]) => pointStart <= scrollLeft && scrollLeft < pointEnd,
+  );
+  if (index < 0) {
+    return { index, fraction: 0 };
+  }
 
   const [start, end] = scrollPoints[index];
   const fraction = (scrollLeft - start) / (end - start);

package/mobile/src/ui-kit/TableArrowScrollControl/TableArrowScrollControl.tsx

@@ -1,27 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { ArrowButton } from '../Button/ArrowButton';
+import { renderArrows } from '../Button/renderArrows';
 import type { TableArrowScrollControlProps } from './TableArrowScrollControlProps';
 
 export const TableArrowScrollControl = JSX<TableArrowScrollControlProps>(
-  ({ isScrollAvailable, onNextClick, onPrevClick, showNextButton, showPrevButton }) => {
+  ({ isScrollAvailable, handleNextClick, handlePrevClick, showNextButton, showPrevButton }) => {
     return isScrollAvailable ? (
       <div>
-        <div className="absolute top-7 right-7 z-10">
-          <ArrowButton
-            className="mt-4 rotate-180"
-            onClick={onNextClick}
-            disabled={!showNextButton}
-            ariaLabel="Пролистать вправо"
-            data-block-control="scroll-right"
-          />
-          <ArrowButton
-            className="mt-4"
-            onClick={onPrevClick}
-            disabled={!showPrevButton}
-            ariaLabel="Пролистать влево"
-            data-block-control="scroll-left"
-          />
-        </div>
+        {renderArrows({
+          handler: [handlePrevClick, handleNextClick],
+          isShown: [showPrevButton, showNextButton],
+          btnClass: ['top-[108px]', 'top-11'],
+          className: 'right-7',
+          isDisabled: true,
+        })}
       </div>
     ) : null;
   },

package/mobile/src/ui-kit/TableArrowScrollControl/TableArrowScrollControlProps.ts

@@ -1,7 +1,9 @@
+import { FuncReturnVoid } from '../../types';
+
 export interface TableArrowScrollControlProps {
   isScrollAvailable?: boolean;
-  onNextClick?: (ev?: MouseEvent) => void;
-  onPrevClick?: (ev?: MouseEvent) => void;
-  showNextButton?: boolean;
-  showPrevButton?: boolean;
+  handleNextClick: FuncReturnVoid<MouseEvent>;
+  handlePrevClick: FuncReturnVoid<MouseEvent>;
+  showNextButton: boolean;
+  showPrevButton: boolean;
 }

package/mobile/src/ui-kit/Tabs/Tabs.tsx

@@ -13,6 +13,9 @@ export const Tabs = JSX<TabsProps>(({ tabs, currentTabIndex, onTabClick }) => {
   );
 });
 
+const tabDescriptionStyle = (isActive = false) =>
+  `font-light text-xs ${isActive ? '' : 'text-secondary-text'}`;
+
 const renderTab =
   (currentTabIndex: number, onTabClick: TabClickHandler) => (tab: Tab, index: number) => {
     const isActive = currentTabIndex === index;
@@ -30,9 +33,7 @@ const renderTab =
         <div>
           {tab?.title ? <h3 className="font-medium m-0 text-base">{tab?.title}</h3> : null}
           {tab?.description ? (
-            <span className={`font-light text-xs ${isActive ? '' : 'text-secondary-text'}`}>
-              {tab?.description}
-            </span>
+            <span className={tabDescriptionStyle(isActive)}>{tab?.description}</span>
           ) : null}
         </div>
       </div>

package/mobile/src/ui-kit/TopItem/TopItem.tsx

@@ -44,7 +44,7 @@ export const TopItem = JSX<TopItemProps>(
   ),
 );
 
-const getLinkClasses = (bgColor: BgColorVersion, active?: boolean, flat?: boolean) => {
+const getLinkClasses = (bgColor: BgColorVersion, active = false, flat = false) => {
   let classes = 'border-transparent';
   if (active) {
     classes = `rounded-md ${bgColor === 'bg-white' ? 'border-primary-main' : 'border-white'}`;
@@ -53,13 +53,12 @@ const getLinkClasses = (bgColor: BgColorVersion, active?: boolean, flat?: boolea
   return `${classes} ${LINK_CLASSES} ${flat ? '' : 'px-4 py-2'}`;
 };
 
-const getTextClasses = (bgColor: BgColorVersion, active?: boolean, flat?: boolean) => {
-  let classes = 'text-white';
-  if (bgColor === 'bg-white') {
-    classes = active
-      ? 'text-primary-main'
-      : `${flat ? 'text-primary-text' : 'text-secondary-text'} hover:text-primary-main`;
+const getTextClasses = (bgColor: BgColorVersion, active = false, flat = false) => {
+  if (bgColor !== 'bg-white') {
+    return `text-white ${TEXT_CLASSES}`;
   }
-
-  return `${classes} ${TEXT_CLASSES}`;
+  const nonActiveAtoms = `${
+    flat ? 'text-primary-text' : 'text-secondary-text'
+  } hover:text-primary-main`;
+  return `${active ? 'text-primary-main' : nonActiveAtoms} ${TEXT_CLASSES}`;
 };

package/mobile/src/utils/changeHashOnScroll.ts

@@ -5,7 +5,9 @@ export const changeHashOnScroll = (router: Router, blocks: NodeListOf<Element> |
     const currentHash = globalThis.location?.hash; // TODO: remove globalThis, use href from router
     const anchorHash = `#${block?.id}`;
 
-    if (currentHash === anchorHash) return;
+    if (currentHash === anchorHash) {
+      return;
+    }
 
     const position = block?.getBoundingClientRect();
     if (position && position.top > 0 && position.top < 150) {

package/mobile/src/utils/getCurrentDate.ts

@@ -1,3 +1,3 @@
 export const getCurrentDate = () => {
-  return new Date().toJSON().slice(0, "YYYY-MM-DD".length);
+  return new Date().toJSON().slice(0, 'YYYY-MM-DD'.length);
 };

package/mobile/src/utils/roundTo.ts

@@ -0,0 +1,4 @@
+export const roundTo = (value: number, precision = 2) => {
+  const factor = Math.pow(10, precision);
+  return Math.round(parseFloat(String(value)) * factor) / factor;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.69",
+  "version": "0.3.71",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -88,7 +88,7 @@
     "build:icons": "rimraf ./cosmos-static/icons && node ./scripts/prepare-icons.js ./src/icons ./cosmos-static/icons > ./src/icons/IconName.ts",
     "size": "size-limit",
     "lint": "eslint ./src",
-    "pretest": "npm run lint",
+    "pretest": "npm run prepare && npm run lint",
     "test": "jest --coverage",
     "cosmos": "cosmos",
     "cosmos:mobile": "cosmos --config cosmos.config.mobile.json",
@@ -163,7 +163,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "30 kB",
+      "limit": "40 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

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

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { HEADLINE } from '../Headline/Headline.fixture';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';

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

@@ -1,14 +1,4 @@
-import { context } from '../../setup-fixture';
-import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
-import { HEADLINE } from '../Headline/Headline.fixture';
-import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
-import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
-import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
-import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
-import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
-import { TILE } from '../Tile/Tile.fixture';
-import type { AccordionProps } from './Accordion';
-import { Accordion } from './Accordion';
+import { context } from '../../react/setup-fixture';
 import type {
   GalleryBlockListDef,
   HeadlineBlockListDef,
@@ -19,6 +9,16 @@ import type {
   TextBlockBlockListDef,
   TileBlockListDef,
 } from '../../ui-kit/BlocksList/BlocksListProps';
+import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
+import { HEADLINE } from '../Headline/Headline.fixture';
+import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
+import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
+import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
+import { TILE } from '../Tile/Tile.fixture';
+import type { AccordionProps } from './Accordion';
+import { Accordion } from './Accordion';
 
 const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockBlockListDef = {
   blockListType: 'TextBlock',

package/src/components/Accordion/Accordion.mobile.tsx

@@ -9,9 +9,7 @@ export interface AccordionProps extends AccordionContent, UniBlockProps {}
 export const Accordion = JSX<AccordionProps>(
   ({ title, description, accordionItems, context, className = '', bordered }) => {
     return (
-      <section
-        className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}
-      >
+      <section className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}>
         {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
         {description ? <div className="mb-5 text-m-md text-center">{description}</div> : null}
         {accordionItems?.length ? (

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { BenefitsBlock } from './BenefitsBlock';
 

package/src/components/BlockContent.ts

@@ -7,6 +7,7 @@ import type { GalleryContent } from './Gallery/GalleryContent';
 import type { GracePeriodContent } from './GracePeriod/GracePeriodContent';
 import type { GroupBlockContent } from './GroupBlock/GroupBlockContent';
 import type { HeaderContent } from './Header/HeaderContent';
+import type { InsuranceAmountBlockContent } from './InsuranceAmountBlock/InsuranceAmountBlockContent';
 import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { LinkListContent } from './LinkList/LinkListContent';
 import type { MobileAppTileContent } from './MobileAppTile/MobileAppTileContent';
@@ -23,6 +24,7 @@ import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
 import type { BonusBenefitsBlockContent } from './BonusBenefitsBlock/BonusBenefitsBlockContent';
+import type { InsuranceContent } from './Insurance/InsuranceContent';
 
 /**
  * @hidden
@@ -36,6 +38,7 @@ export type BlockContent =
   | GalleryContent
   | GracePeriodContent
   | HeaderContent
+  | InsuranceAmountBlockContent
   | LinkDocsContent
   | MobileAppTileContent
   | NavigatorTabsContent
@@ -52,4 +55,5 @@ export type BlockContent =
   | NavigationContent
   | LinkListContent
   | GroupBlockContent
-  | BonusBenefitsBlockContent;
+  | BonusBenefitsBlockContent
+  | InsuranceContent;

package/src/components/Blocks.ts

@@ -3,7 +3,6 @@ import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Calculator } from './Calculator/Calculator';
-import { CreditCalculator } from './CreditCalculator/CreditCalculator';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
@@ -11,6 +10,7 @@ import { GracePeriod } from './GracePeriod/GracePeriod';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { Insurance } from './Insurance/Insurance';
+import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBlock';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
@@ -37,7 +37,6 @@ export const Blocks = {
   Bonus,
   ComparisonTable,
   Calculator,
-  CreditCalculator,
   ExchangeRateTile,
   Footer,
   Gallery,
@@ -45,6 +44,7 @@ export const Blocks = {
   Header,
   Headline,
   Insurance,
+  InsuranceAmountBlock,
   LinkDocs,
   MiniGallery,
   MobileAppTile,

package/src/components/Bonus/Bonus.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { Bonus } from './Bonus';
 import type { BonusContent } from './BonusContent';
 

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.example.json

@@ -51,4 +51,4 @@
       }
     }
   ]
-}
+}

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { BonusBenefitsBlock } from './BonusBenefitsBlock';
 

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -11,13 +11,11 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
   ({ className = '', title, subtitle, bonusBenefits, anchor = null }) => {
     return (
       <section
-        className={`font-sans text-primary-text bg-white p-50 flex flex-col ${className}`}
+        className={`font-sans text-primary-text bg-white p-50 flex flex-col text-center ${className}`}
         id={anchor}
       >
-        {title ? (
-          <Heading headingType="h3" className="text-center mb-[10px]" title={title} />
-        ) : null}
-        {subtitle ? <span className="text-md font-normal text-center">{subtitle}</span> : null}
+        {title ? <Heading headingType="h3" className="mb-[10px]" title={title} /> : null}
+        {subtitle ? <span className="text-md font-normal">{subtitle}</span> : null}
         {bonusBenefits?.length ? (
           <div className={`grid gap-1 ${getElementsColsValue(className)}`}>
             {bonusBenefits.map(renderBonusBenefit)}
@@ -40,9 +38,7 @@ const renderBonusBenefit = (bonusBenefit: BonusBenefit, i: number) => {
         />
       ) : null}
       <div>
-        {bonusBenefit?.label ? (
-          <span className="title-2xs text-center m-0">{bonusBenefit.label}</span>
-        ) : null}
+        {bonusBenefit?.label ? <span className="title-2xs m-0">{bonusBenefit.label}</span> : null}
       </div>
     </div>
   );

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

@@ -1,13 +1,13 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { Calculator } from './Calculator';
 
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type {
+  BonusCalculatorParamsDef,
   CreditCalculatorParamsDef,
-  MortgageCalculatorParamsDef,
   DepositCalculatorParamsDef,
-  BonusCalculatorParamsDef,
+  MortgageCalculatorParamsDef,
 } from './CalculatorContent';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 const buttons: ButtonWithIconProps[] = [
   {