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

package/mobile/src/hooks/useExchangeRates.ts

@@ -1,25 +1,85 @@
 import type { AsyncDataHook } from '../components/ContentPage/ContentPageContext';
-import { ExchangeCurrencyItem } from '../components/ExchangeRateTile/ExchangeRateTileContent';
+import type { ExchangeCurrencyItem } from '../components/ExchangeRateTile/ExchangeCurrencyCalculator';
 
-interface ExchangeRatesData {
-  exchangeRate?: {
-    currencies?: ExchangeCurrencyItem[];
-  };
+interface RatesData {
+  code: string;
+  rate_buy: number;
+  rate_sell: number;
 }
 
-export function useExchangeRates(useAsyncData: AsyncDataHook): ExchangeRatesData {
+export function useExchangeRates(useAsyncData: AsyncDataHook): ExchangeCurrencyItem[] {
   const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchExchangeRates);
 
-  return data || {};
+  const result = data?.hits?.hits?.map((_) => _._source) || [];
+  return result.length ? getCurrencyListByRate(result) : result;
 }
 
-async function fetchExchangeRates(): Promise<ExchangeRatesData | undefined> {
+async function fetchExchangeRates(): Promise<any | undefined> {
   try {
-    const response = await fetch(EXCHANGE_RATES_URL);
+    const response = await fetch(EXCHANGE_RATES_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(EXCHANGE_RATES_BODY),
+    });
     return await response.json();
   } catch (err) {
     console.error(err);
   }
 }
 
-const EXCHANGE_RATES_URL = '/api/v1/exchangerates.json';
+const EXCHANGE_RATES_URL =
+  'https://coins.rshb.ru/api/catalog/vue_storefront_magento_1_currency_rates_average/currency_rates_average/_search?size=10000';
+
+const EXCHANGE_RATES_BODY = {
+  query: {
+    bool: {
+      must: [
+        {
+          term: {
+            // eslint-disable-next-line camelcase
+            russian_region_code: '77',
+          },
+        },
+        {
+          term: {
+            // eslint-disable-next-line camelcase
+            from_volume: '0',
+          },
+        },
+        {
+          terms: {
+            // eslint-disable-next-line camelcase
+            currency_pair: ['USD/RUB', 'EUR/RUB'],
+          },
+        },
+      ],
+    },
+  },
+};
+
+interface FormatRatesData {
+  code: string;
+  buy?: number;
+  sell?: number;
+}
+
+const getCurrencyListByRate = (currencyRates: RatesData[]) =>
+  currencyRates.reduce((result: FormatRatesData[], _) => {
+    const currencyInfo = _['currency_first'];
+    if (!validateRate(_['rate_buy']) && !validateRate(_['rate_sell'])) {
+      return result;
+    }
+    const currencyCode = currencyInfo.code;
+    if (!result.some((i) => i.code === currencyCode)) {
+      result.push({
+        code: currencyCode,
+        buy: Number(_.rate_buy),
+        sell: Number(_.rate_sell),
+      });
+    }
+    return result;
+  }, []);
+
+const validateRate = (value) => Math.round(value) > 0;

package/mobile/src/hooks/useTableArrowScrollControl.ts

@@ -11,12 +11,12 @@ export const useTableArrowScrollControl = ({
   activeCardIndex: number;
   setActiveCardIndex: (_: number) => void;
 }): Required<TableArrowScrollControlProps> => {
-  const onNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-  const onPrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
 
   const isScrollAvailable = columnsLength > colsLengthForScroll;
   const showNextButton = isScrollAvailable && columnsLength - activeCardIndex > colsLengthForScroll;
   const showPrevButton = Boolean(isScrollAvailable && activeCardIndex > 0);
 
-  return { onNextClick, onPrevClick, isScrollAvailable, showNextButton, showPrevButton };
+  return { handleNextClick, handlePrevClick, isScrollAvailable, showNextButton, showPrevButton };
 };

package/mobile/src/react/IntersectionObserverTag.tsx

@@ -0,0 +1,23 @@
+import { FC, useCallback, useRef } from 'react';
+import { IntersectionObserverTagProps } from '../components/ContentPage/ContentPageContext';
+
+export const IntersectionObserverTag: FC<IntersectionObserverTagProps> = (props) => {
+  const { Tag, observerCallback, observerOptions, children, ...rest } = props;
+
+  const intersectionObserver = useRef<IntersectionObserver>();
+  const ref = useCallback(
+    (tag: HTMLElement | null | undefined) => {
+      if (tag && !intersectionObserver.current) {
+        intersectionObserver.current = new IntersectionObserver(observerCallback, observerOptions);
+        intersectionObserver.current.observe(tag);
+      }
+    },
+    [observerCallback, observerOptions],
+  );
+
+  return (
+    <Tag ref={ref} {...rest}>
+      {children}
+    </Tag>
+  );
+};

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.70",
+  "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": "45 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';