@redneckz/wildless-cms-uni-blocks 0.9.5 → 0.9.7

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -1,16 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { SocialMedia } from '../Footer/SocialMedia';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
-import { useLink } from '../../hooks/useLink';
+import { SocialMedia } from '../Footer/SocialMedia';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 
 const BORDER_STYLE =
   'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
@@ -33,10 +33,6 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     version = 'primary',
     ...rest
   }) => {
-    const link = useLink();
-    const adjustedProps = link({ href, target });
-    const tagName = href ? 'a' : 'section';
-
     return (
       <BlockWrapper
         className={style(
@@ -44,30 +40,34 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
           BORDER_STYLE,
           className,
         )}
-        extraProps={adjustedProps}
-        tag={tagName}
         version={version}
         {...rest}
       >
-        <div className="self-center">
-          {title ? <Heading headingType="h3" as="h3" className="mb-8" title={title} /> : null}
-        </div>
-        <div className="mb-5">
-          {description ? (
-            <Paragraph size="text-xl" font="font-light" color="group-data-gray:text-secondary-text">
-              {description}
-            </Paragraph>
-          ) : null}
-        </div>
-        <div className="flex align-center w-full">
-          <div className="w-1/2 h-full flex flex-col flex-1 justify-end">
-            {items.length ? (
-              <List className="text-xl-light flex flex-col gap-2 pb-16 mb-3" items={items} />
+        <LinkWrapper className="flex flex-col" href={href} target={target}>
+          <div className="self-center">
+            {title ? <Heading headingType="h3" as="h3" className="mb-8" title={title} /> : null}
+          </div>
+          <div className="mb-5">
+            {description ? (
+              <Paragraph
+                size="text-xl"
+                font="font-light"
+                color="group-data-gray:text-secondary-text"
+              >
+                {description}
+              </Paragraph>
             ) : null}
-            {socialMedia.length ? <SocialMedia className="pb-0" media={socialMedia} /> : null}
           </div>
-          {renderIconBlock(icon, items)}
-        </div>
+          <div className="flex align-center w-full">
+            <div className="w-1/2 h-full flex flex-col flex-1 justify-end">
+              {items.length ? (
+                <List className="text-xl-light flex flex-col gap-2 pb-16 mb-3" items={items} />
+              ) : null}
+              {socialMedia.length ? <SocialMedia className="pb-0" media={socialMedia} /> : null}
+            </div>
+            {renderIconBlock(icon, items)}
+          </div>
+        </LinkWrapper>
       </BlockWrapper>
     );
   },

package/mobile/src/components/VerticalLayout/VerticalLayout.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderBlock } from '../../BlockRenderer/renderBlock';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { AlignTypeWithStretch } from '../../model/AlignType';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
@@ -25,7 +26,6 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
     isInnerPadding = true,
     version = 'transparent',
     isTheme = false,
-    options,
     ...rest
   }) => {
     const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
@@ -43,7 +43,11 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
         isTheme={isTheme}
         {...rest}
       >
-        {renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } })}
+        {renderChildren({
+          ...rest,
+          renderProps: (block, options) =>
+            renderBlock(block, options, { className: innerPaddingStyle }),
+        })}
       </BlockWrapper>
     );
   },

package/mobile/src/content-page-repository/transformImg.ts

@@ -83,7 +83,7 @@ function createBackgroundImageChain({ width, height }: ImageSize) {
 }
 
 function resizeImg(chain: Sharp, size: Picture['size'], options?: ResizeOptions) {
-  return chain.resize(size?.width, size?.height, {
+  return chain.resize(size?.width || null, size?.height || null, {
     fit: sharp.fit.fill,
     background: { r: 0, g: 0, b: 0, alpha: 0 },
     ...options,

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

@@ -1,15 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../EventBus/defaultEventBus';
-import { useBlockIntersectionObserver } from '../services/BlockRouter/useBlockIntersectionObserver';
-import { style } from '../utils/style';
 import type { BlockVersion } from '../model/BlockVersion';
 import type { UniBlockProps } from '../model/JSXBlock';
+import { useBlockIntersectionObserver } from '../services/BlockRouter/useBlockIntersectionObserver';
+import { style } from '../utils/style';
 
 interface BlockWrapperProps extends UniBlockProps {
   tag?: keyof HTMLElementTagNameMap;
   role?: string;
-  extraProps?: Record<string, any>;
 }
 
 export const blockStyles: Record<BlockVersion, string> = {
@@ -24,11 +23,10 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
   ({
     className = '',
     version = 'primary',
+    isTheme = true,
     block,
     tag = 'section',
     role,
-    isTheme = true,
-    extraProps = {},
     children,
   }) => {
     const Tag: any = tag;
@@ -57,7 +55,6 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
         {...(version && isTheme ? { 'data-ver': version } : {})}
         {...(block?.anchor ? { id: block.anchor, ref } : {})}
         role={role}
-        {...extraProps}
       >
         {children}
       </Tag>

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

@@ -0,0 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { Target } from '../../model/LinkProps';
+
+interface LinkWrapperProps {
+  className?: string;
+  href?: string;
+  target?: Target;
+}
+
+export const LinkWrapper = JSX<LinkWrapperProps>(({ className = '', href, target, children }) => {
+  const link = useLink();
+  const linkProps = link({ href, target });
+  const Tag = href ? 'a' : 'div';
+
+  return (
+    <Tag className={className} {...(href ? linkProps : {})}>
+      {children}
+    </Tag>
+  );
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/BlockRenderer/BlockRendererOptions.ts

@@ -9,6 +9,4 @@ export interface BlockRendererOptions {
   blocksRegistry?: BlocksRegistry;
   parent?: Slot;
   ancestors?: BlockAncestors;
-  className?: string;
-  extraProps?: Record<string, any>;
 }

package/src/BlockRenderer/renderBlock.tsx

@@ -8,14 +8,18 @@ const DEFAULT_ANCESTORS: BlockAncestors = [];
 
 const defaultStyle = 'col-span-12';
 
-export function renderBlock(block: BlockDef, options: BlockRendererOptions) {
+type ExtraProps = Partial<Record<string, any> & { className: string }>;
+
+export function renderBlock(
+  block: BlockDef,
+  options: BlockRendererOptions,
+  { className, ...extraProps }: ExtraProps = {},
+) {
   const {
     key,
     blockDecorator = defaultBlockDecorator,
     blocksRegistry = {},
     ancestors = DEFAULT_ANCESTORS,
-    className = '',
-    extraProps = {},
   } = options;
   const { type } = block;
 

package/src/components/Calculator/Calculator.example.json

@@ -16,6 +16,12 @@
               "version": "primary"
             }
           ],
+          "paramsViewSettings": {
+            "isShowSalaryClient": true,
+            "isShowStateEmployee": true,
+            "isShowPensionClient": true,
+            "isShowInsurance": true
+          },
           "footnote": "Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка. "
         }
       }

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

@@ -32,6 +32,12 @@ const bottomFootnote =
 
 const CREDIT_CALCULATOR_BLOCK: CreditCalculatorParamsDef = {
   calcType: 'CreditCalculatorForm',
+  paramsViewSettings: {
+    isShowSalaryClient: true,
+    isShowStateEmployee: true,
+    isShowPensionClient: true,
+    isShowInsurance: true,
+  },
   buttons: buttons,
   footnote,
 };

package/src/components/Calculator/CalculatorContent.ts

@@ -10,6 +10,21 @@ export type CommonCalculatorProps = Footnote &
     sourceBookDir?: string;
   };
 
+export interface CreditCalculatorParamsViewSettings {
+  /** @title Получаю зарплату на счёт в Россельхозбанке */
+  isShowSalaryClient?: boolean;
+  /** @title Работаю в бюджетной организации */
+  isShowStateEmployee?: boolean;
+  /** @title Получаю пенсию на карту Россельхозбанка */
+  isShowPensionClient?: boolean;
+  /** @title Комплексная страховая защита */
+  isShowInsurance?: boolean;
+}
+export interface CreditCalculatorProps extends CommonCalculatorProps {
+  /** @title Настройка отображения чекбоксов */
+  paramsViewSettings?: CreditCalculatorParamsViewSettings;
+}
+
 export interface BusinessDepositCalculatorProps extends CommonCalculatorProps {
   /** @title Сноска снизу блока */
   bottomFootnote?: string;
@@ -53,7 +68,7 @@ export interface CalculatorParams {
  * @default {"calcType": "CreditCalculatorForm"}
  */
 export type CreditCalculatorParamsDef = TitleProps &
-  CommonCalculatorProps & {
+  CreditCalculatorProps & {
     calcType: 'CreditCalculatorForm';
   };
 

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -3,7 +3,10 @@ import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { style } from '../../utils/style';
-import type { CommonCalculatorProps } from './CalculatorContent';
+import type {
+  CreditCalculatorParamsViewSettings,
+  CreditCalculatorProps,
+} from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
 import { Rate } from './Rate';
@@ -11,18 +14,23 @@ import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderPaymentType } from './renderPaymentType';
 import { renderWantedSumInput } from './renderWantedSumInput';
-import { useCreditCalculatorParams } from './useCreditCalculatorParams';
+import { CreditCalculatorParams, useCreditCalculatorParams } from './useCreditCalculatorParams';
 
-export interface CreditCalculatorProp extends CommonCalculatorProps {
+export interface CreditCalculatorProp extends CreditCalculatorProps {
   className?: string;
 }
 
 export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
-  ({ className = '', sourceBookDir, buttons, footnote }) => {
+  ({ className = '', sourceBookDir, buttons, footnote, paramsViewSettings }) => {
     const [isAnnuity, toggleIsAnnuity] = useState(false);
-    const [isInsurance, toggleIsInsurance] = useState(true);
     const [isSalaryClient, toggleIsSalaryClient] = useState(false);
+    const handleIsSalaryClient = useCallback((_: boolean) => toggleIsSalaryClient(_), []);
     const [isStateEmployee, toggleIsStateEmployee] = useState(false);
+    const handleIsStateEmployee = useCallback((_: boolean) => toggleIsStateEmployee(_), []);
+    const [isPensionClient, toggleIsPensionClient] = useState(false);
+    const handleIsPensionClient = useCallback((_: boolean) => toggleIsPensionClient(_), []);
+    const [isInsurance, toggleIsInsurance] = useState(true);
+    const handleIsInsurance = useCallback((_: boolean) => toggleIsInsurance(_), []);
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
     const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
@@ -31,11 +39,16 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
       isAnnuity,
       isInsurance,
       isSalaryClient,
+      isPensionClient,
       isStateEmployee,
       moneyValue,
       monthsValue,
     };
-    const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir);
+    const calculatorParams = useCreditCalculatorParams(
+      userInputParams,
+      sourceBookDir,
+      paramsViewSettings,
+    );
 
     return (
       <section className={style('flex justify-between', className)}>
@@ -47,31 +60,17 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
           )}
           {renderMonthsInput('Срок кредита, месяцев', calculatorParams, handleMonthsValue)}
           <div className="mt-7">
-            <Checkbox
-              text="Получаю зарплату на счёт в Россельхозбанке"
-              checked={isSalaryClient}
-              onChange={toggleIsSalaryClient}
-            />
-            <Checkbox
-              className="mt-3"
-              text="Работаю в бюджетной организации"
-              checked={isStateEmployee}
-              onChange={toggleIsStateEmployee}
-            />
-            <Checkbox
-              className="mt-3"
-              text="Комплексная страховая защита"
-              checked={isInsurance}
-              onChange={toggleIsInsurance}
-            />
+            {renderCreditParamsForm({
+              ...calculatorParams,
+              ...paramsViewSettings,
+              handleIsSalaryClient,
+              handleIsStateEmployee,
+              handleIsPensionClient,
+              handleIsInsurance,
+            })}
           </div>
         </div>
-        <Rate
-          title="Ставка"
-          rate={calculatorParams.rate}
-          rateBlockClassName="tracking-[-25px]"
-          unit="%"
-        />
+        {renderRate(calculatorParams.rate)}
         <div className="w-full max-w-[350px]">
           <CalculatorValueBlock
             title={'Ежемесячный платеж'}
@@ -90,3 +89,64 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
     );
   },
 );
+
+const renderRate = (rate: number) => (
+  <Rate title="Ставка" rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
+);
+
+type CreditParamsFormProps = CreditCalculatorParams &
+  CreditCalculatorParamsViewSettings & {
+    handleIsSalaryClient?: (value: boolean) => void;
+    handleIsStateEmployee?: (value: boolean) => void;
+    handleIsPensionClient?: (value: boolean) => void;
+    handleIsInsurance?: (value: boolean) => void;
+  };
+
+const renderCreditParamsForm = ({
+  isSalaryClient,
+  isStateEmployee,
+  isPensionClient,
+  isInsurance,
+  isShowSalaryClient,
+  isShowStateEmployee,
+  isShowPensionClient,
+  isShowInsurance,
+  handleIsSalaryClient,
+  handleIsStateEmployee,
+  handleIsPensionClient,
+  handleIsInsurance,
+}: CreditParamsFormProps) => (
+  <div>
+    {isShowSalaryClient ? (
+      <Checkbox
+        text="Получаю зарплату на счёт в Россельхозбанке"
+        checked={isSalaryClient}
+        onChange={handleIsSalaryClient}
+      />
+    ) : null}
+    {isShowStateEmployee ? (
+      <Checkbox
+        className="mt-3"
+        text="Работаю в бюджетной организации"
+        checked={isStateEmployee}
+        onChange={handleIsStateEmployee}
+      />
+    ) : null}
+    {isShowPensionClient ? (
+      <Checkbox
+        className="mt-3"
+        text="Получаю пенсию на карту Россельхозбанка"
+        checked={isPensionClient}
+        onChange={handleIsPensionClient}
+      />
+    ) : null}
+    {isShowInsurance ? (
+      <Checkbox
+        className="mt-3"
+        text="Комплексная страховая защита"
+        checked={isInsurance}
+        onChange={handleIsInsurance}
+      />
+    ) : null}
+  </div>
+);

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -4,7 +4,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
-import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
+import { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
 import { Rate } from './Rate';
@@ -15,7 +15,7 @@ import { renderRegistrationType } from './renderRegistrationType';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useDepositCalculatorParams } from './useDepositCalculatorParams';
 
-export interface DepositCalculatorProp extends DepositCalculatorParams, CommonCalculatorProps {
+export interface DepositCalculatorProp extends CommonCalculatorProps {
   className?: string;
 }
 

package/src/components/Calculator/constants.ts

@@ -27,6 +27,7 @@ export const DEFAULT_CREDIT_CALCULATOR_PARAMS: CreditCalculatorSourceBookParams
   maxMonths: DEFAULT_MAX_MONTHS,
   rate: 0,
   isSalaryClient: true,
+  isPensionClient: false,
   isStateEmployee: true,
   isInsurance: true,
 };

package/src/components/Calculator/useCreditCalculatorParams.ts

@@ -1,3 +1,4 @@
+import type { CreditCalculatorParamsViewSettings } from './CalculatorContent';
 import { CREDIT_CALC_DEFAULT_DIR, DEFAULT_CREDIT_CALCULATOR_PARAMS } from './constants';
 import { getMonthlyPayment } from './getMonthlyPayment';
 import { checkRangeByKeys, getRangeByKeys } from './rangeHelpers';
@@ -6,6 +7,7 @@ import { useCalculatorParams } from './useCalculatorParams';
 export interface CommonCreditParams {
   isInsurance: boolean;
   isSalaryClient: boolean;
+  isPensionClient: boolean;
   isStateEmployee: boolean;
 }
 export interface CreditCalculatorSourceBookParams extends CommonCreditParams {
@@ -35,18 +37,44 @@ export type CreditCalculatorData = {
 export const useCreditCalculatorParams = (
   userInputParams: CreditCalculatorUserInputParams,
   sourceBookDir?: string,
+  paramsViewSettings?: CreditCalculatorParamsViewSettings,
 ): CreditCalculatorParams => {
-  const { isInsurance, isSalaryClient, isStateEmployee, moneyValue, monthsValue } = userInputParams;
-
+  const { moneyValue, monthsValue } = userInputParams;
   const data = useCalculatorParams<CreditCalculatorData>(sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
   const creditCalculatorSourceBookParams =
-    data?.rows?.find((_) => {
+    data?.rows?.find((row) => {
+      const isExcludeSalaryClient = !paramsViewSettings?.isShowSalaryClient;
+      const isExcludeStateEmployee = !paramsViewSettings?.isShowStateEmployee;
+      const isExcludePensionClient = !paramsViewSettings?.isShowPensionClient;
+      const isExcludeInsurance = !paramsViewSettings?.isShowInsurance;
+
       return (
-        isInsurance === _.isInsurance &&
-        isSalaryClient === _.isSalaryClient &&
-        isStateEmployee === _.isStateEmployee &&
-        checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
-        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], _)
+        checkRowByParam({
+          row,
+          userInputParams,
+          paramKey: 'isSalaryClient',
+          isExclude: isExcludeSalaryClient,
+        }) &&
+        checkRowByParam({
+          row,
+          userInputParams,
+          paramKey: 'isStateEmployee',
+          isExclude: isExcludeStateEmployee,
+        }) &&
+        checkRowByParam({
+          row,
+          userInputParams,
+          paramKey: 'isPensionClient',
+          isExclude: isExcludePensionClient,
+        }) &&
+        checkRowByParam({
+          row,
+          userInputParams,
+          paramKey: 'isInsurance',
+          isExclude: isExcludeInsurance,
+        }) &&
+        checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
+        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row)
       );
     }) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
 
@@ -62,3 +90,13 @@ export const useCreditCalculatorParams = (
     monthlyPayment,
   };
 };
+
+interface CheckRowByParamProps {
+  row: CreditCalculatorSourceBookParams;
+  userInputParams: CreditCalculatorUserInputParams;
+  paramKey: string;
+  isExclude: boolean;
+}
+
+const checkRowByParam = ({ row, userInputParams, paramKey, isExclude }: CheckRowByParamProps) =>
+  isExclude || userInputParams[paramKey] === row[paramKey];

package/src/components/Carousel/Carousel.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { renderBlock } from '../../BlockRenderer/renderBlock';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -24,7 +25,6 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
     isCyclic = false,
     arrowsPadded = true,
     isPadding = true,
-    options,
     ...rest
   }) => {
     const { blocks: childBlocks } = rest.block || {};
@@ -59,18 +59,16 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             gap={ITEMS_GAP}
             onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
           >
-            {isBankHistoryCarousel
-              ? renderChildren({
-                  ...rest,
-                  options: {
-                    ...options,
-                    extraProps: {
+            {renderChildren({
+              ...rest,
+              renderProps: isBankHistoryCarousel
+                ? (block, options) =>
+                    renderBlock(block, options, {
                       blocksLength: childBlocks?.length,
                       activeIndex: activeIndex,
-                    },
-                  },
-                })
-              : renderChildren({ ...rest, options })}
+                    })
+                : renderBlock,
+            })}
           </SwipeListContainer>
           <CarouselScrollButtons
             scroll={scroll}

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -52,7 +52,8 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
 );
 
 const renderColorOption = (color: ProductColorVersion, i: number) => (
-  <span
+  <div
+    role="figure"
     key={String(i)}
     className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
   />