@redneckz/wildless-cms-uni-blocks 0.13.1 → 0.13.3

package/src/components/BonusBenefitsBlock/renderBonusBenefits.tsx

@@ -8,7 +8,7 @@ export const renderBonusBenefits = (
   columnsCount: ColumnsCount,
   cardTextAlign: AlignType,
 ) => (
-  <div className={`grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`}>
+  <div className={`grid gap-2xs ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`}>
     {bonusBenefits.map(renderBonusBenefit)}
   </div>
 );

package/src/components/BusinessBlock/BusinessBlock.tsx

@@ -10,7 +10,7 @@ export interface BusinessBlockProps extends BusinessBlockContent, UniBlockProps
 export const BusinessBlock = JSX<BusinessBlockProps>(({ className, title, cards, ...rest }) => (
   <BlockWrapper className={className} defaultPadding="p-6xl space-y-3xl" {...rest}>
     <Heading headingType="h3" title={title} className="text-center" />
-    <div className="flex gap-5">
+    <div className="flex gap-lg">
       {cards?.length ? cards.map((_, i) => <BusinessCard key={String(i)} {..._} />) : null}
     </div>
   </BlockWrapper>

package/src/components/BusinessBlock/BusinessCard.tsx

@@ -29,7 +29,7 @@ const renderItem = (item: BusinessCardItemProps, key: string) => {
   const { icon, text } = item;
 
   return (
-    <li key={key} className="flex items-center gap-s last:mb-0">
+    <li key={key} className="flex items-center gap-s">
       {icon?.icon ? (
         <Img image={icon} className="w-12 h-12 min-w-12 p-s rounded-icon bg-main-divider" />
       ) : null}

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

@@ -19,7 +19,7 @@ const buttons: ButtonContent[] = [
 
 export default {
   default: (
-    <div className="container grid grid-cols-12 p-4">
+    <div className="container grid grid-cols-12">
       <ButtonsBlock className="col-span-12" buttons={buttons} />
     </div>
   ),

package/src/components/ButtonsBlock/ButtonsBlock.fixture.tsx

@@ -19,7 +19,7 @@ const buttons: ButtonContent[] = [
 
 export default {
   default: (
-    <div className="container grid grid-cols-12 p-4">
+    <div className="container grid grid-cols-12">
       <ButtonsBlock className="col-span-12" buttons={buttons} />
     </div>
   ),

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -25,8 +25,8 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
       useBonusCalculatorParams(userInputParams, sourceBookDir);
 
     return (
-      <section className={style('flex justify-between', className)}>
-        <div className="w-2/5">
+      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
           {renderWantedSumInput({
             title: 'Сумма покупок в категории путешествия, ₽',
             min: minSumTravel,
@@ -37,7 +37,6 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
           })}
           {renderWantedSumInput({
             title: 'Сумма покупок в остальных категориях, ₽',
-            className: 'mt-7',
             min: minSumOther,
             max: maxSumOther,
             step: 500,
@@ -45,19 +44,17 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
             ...field('restExpenseValue'),
           })}
         </div>
-        <div>
-          {monthBonus >= 0 ? (
-            <Rate
-              title="Баллов за месяц"
-              rate={monthBonus}
-              rateBlockClassName="tracking-[-14px]"
-              fractionDigits={0}
-            />
-          ) : null}
-        </div>
-        <div className="w-96">
+        {monthBonus >= 0 ? (
+          <Rate
+            title="Баллов за месяц"
+            rate={monthBonus}
+            rateBlockClassName="tracking-[-14px]"
+            fractionDigits={0}
+          />
+        ) : null}
+        <div className="flex flex-col gap-2xl sm:w-96">
           {yearBonus >= 0 ? <CalculatorValueBlock title="Баллов за год" value={yearBonus} /> : null}
-          {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
+          {renderButtonsSection(buttons, { isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -15,6 +15,7 @@ import { renderInterestPayment } from './renderInterestPayment';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { renderRate } from './renderRate';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { style } from '../../utils/style';
 
 export interface BusinessDepositCalculatorProp extends BusinessDepositCalculatorProps {
   className?: string;
@@ -35,47 +36,42 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
     const { income, finalSum, rate, isShowUnknownRate, depositeName } = calculatorParams;
 
     return (
-      <section className={className}>
-        <div className="flex flex-col justify-between sm:flex-row">
-          <div className="flex flex-col gap-y-m sm:w-2/5 sm:gap-y-lg">
-            {renderWantedSumInput({
-              title: 'Сумма, ₽',
-              min: calculatorParams.minSum,
-              max: calculatorParams.maxSum,
-              ...field('moneyValue'),
-              value: calculatorParams.moneyValue,
-            })}
-            {renderDaysInput({
-              title: 'Срок, дней',
-              min: calculatorParams.minDays,
-              max: calculatorParams.maxDays,
-              ...field('daysValue'),
-              value: calculatorParams.daysValue,
-            })}
-            <div className="flex flex-col gap-xl justify-between sm:flex-row sm:gap-0">
-              {renderBusinessDepositParamsForm(calculatorParams, field)}
-              {renderInterestPayment({
-                title: 'Выплата процентов',
-                orientation: 'vertical',
-                ...field('isMonthlyInterestPayment'),
-                radioGroupClassName: 'sm:flex-col',
-              })}
-            </div>
-          </div>
-          <div className="border-b border-main-divider my-xl sm:hidden"></div>
-          {renderRate({
-            rate,
-            depositeName,
-            isShowDepositeName,
-            isShowUnknownRate,
+      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
+          {renderWantedSumInput({
+            title: 'Сумма, ₽',
+            min: calculatorParams.minSum,
+            max: calculatorParams.maxSum,
+            ...field('moneyValue'),
+            value: calculatorParams.moneyValue,
           })}
-          <div className="flex flex-col gap-y-xl mt-3xl sm:gap-0 sm:w-96 sm:mt-0">
-            {renderDepositResults(finalSum, income)}
-            {renderButtonsSection(buttons, { isVertical: true })}
-            <div className="sm:mt-2xl">{renderFootnote(footnote)}</div>
-          </div>
+          {renderDaysInput({
+            title: 'Срок, дней',
+            min: calculatorParams.minDays,
+            max: calculatorParams.maxDays,
+            ...field('daysValue'),
+            value: calculatorParams.daysValue,
+          })}
+          {renderBusinessDepositParamsForm(calculatorParams, field)}
+          {renderInterestPayment({
+            title: 'Выплата процентов',
+            orientation: 'vertical',
+            ...field('isMonthlyInterestPayment'),
+            radioGroupClassName: 'sm:flex-col',
+          })}
+        </div>
+        <div className="border-b border-main-divider md:hidden"></div>
+        {renderRate({
+          rate,
+          depositeName,
+          isShowDepositeName,
+          isShowUnknownRate,
+        })}
+        <div className="flex flex-col gap-2xl sm:w-96">
+          {renderDepositResults(finalSum, income)}
+          {renderButtonsSection(buttons, { isVertical: true })}
+          {renderFootnote(footnote)}
         </div>
-        <div className="mt-lg">{renderFootnote(bottomFootnote)}</div>
       </section>
     );
   },

package/src/components/Calculator/Calculator.tsx

@@ -53,7 +53,7 @@ export const Calculator = JSX<CalculatorProps>(
           {renderArrows({
             ...controls,
             btnClass: ['left-3', 'right-3'],
-            className: 'top-8',
+            className: 'top-10',
           })}
         </div>
         <div
@@ -70,8 +70,8 @@ export const Calculator = JSX<CalculatorProps>(
 
 function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
   const btnClassName = isActive
-    ? 'h-20 w-96 p-xl border-none bg-primary-main text-white'
-    : `h-20 w-96 px-lg ease-in duration-300 bg-white text-primary-text`;
+    ? 'w-96 p-m border-none bg-primary-main text-white'
+    : `w-96 p-s ease-in duration-300 bg-white text-primary-text`;
   const btnTitleClassName = isActive ? 'text-xl mb-xs' : `text-l mb-2xs`;
   const btnDescClassName = isActive
     ? 'text-l font-light text-white'
@@ -87,7 +87,7 @@ function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
       onClick={onClick}
       aria-label={tab?.title}
       className={style(
-        'box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-20 space-x-m',
+        'box-border relative border border-gray cursor-pointer text-left border-b-0 flex space-x-m min-h-20',
         btnClassName,
       )}
     >

package/src/components/Calculator/CalculatorValueBlock.tsx

@@ -3,7 +3,7 @@ import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 
-const calculatorValueBlockStyle = 'flex justify-between md:mb-7 md:flex-col';
+const calculatorValueBlockStyle = 'flex justify-between md:flex-col';
 
 export interface CalculatorValueBlockProps {
   title?: string;

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -47,8 +47,8 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
     });
 
     return (
-      <section className={style('flex flex-col justify-between sm:flex-row', className)}>
-        <div className="flex flex-col gap-y-m sm:w-2/5 sm:gap-y-lg">
+      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
           {renderWantedSumInput({
             title: 'Сумма кредита, ₽',
             step: 500,
@@ -65,20 +65,20 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             value: calculatorParams.monthsValue,
           })}
           {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
-          <div className="mt-s sm:hidden">{paymentTypeElement}</div>
+          <div className="sm:hidden">{paymentTypeElement}</div>
         </div>
-        <div className="border-b border-main-divider mt-xl mb-3xl sm:hidden"></div>
+        <div className="border-b border-main-divider md:hidden"></div>
         {renderRate({
           rate: calculatorParams.rate,
         })}
-        <div className="mt-6xl flex flex-col gap-lg sm:w-96 sm:mt-0 sm:gap-0">
+        <div className="flex flex-col gap-2xl sm:w-96">
           <CalculatorValueBlock
             title="Ежемесячный платеж"
             value={calculatorParams.monthlyPayment}
             postfix="₽"
           />
           <div className="hidden sm:block">{paymentTypeElement}</div>
-          {renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true })}
+          {renderButtonsSection(buttons, { isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>
@@ -90,7 +90,7 @@ const renderCreditParamsForm = (
   params: CreditCalculatorParams & CreditCalculatorParamsViewSettings,
   field: FormFieldRegisterer<any>,
 ) => (
-  <div className="gap-xl flex flex-col sm:gap-s">
+  <div className="flex flex-col gap-y-2xl">
     {params.isShowSalaryClient ? (
       <Checkbox
         text={`Получаю зарплату на счёт\nв Россельхозбанке`}

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -44,8 +44,8 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
     }, [defaultMonth]);
 
     return (
-      <section className={style('flex flex-col justify-between sm:flex-row', className)}>
-        <div className="flex flex-col gap-lg sm:w-2/5">
+      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
           {renderWantedSumInput({
             title: 'Сумма, ₽',
             min: calculatorParams.minSum,
@@ -61,15 +61,13 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
             ...field('monthsValue'),
             value: calculatorParams.monthsValue,
           })}
-          <div className="flex flex-col gap-y-2xl">
-            {renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
-          </div>
+          {renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
         </div>
-        <div className="border-b border-main-divider mt-lg mb-2xl md:hidden"></div>
+        <div className="border-b border-main-divider md:hidden"></div>
         {renderRate({
           rate,
         })}
-        <div className="mt-2xl flex flex-col gap-y-2xl sm:w-96 sm:gap-y-0 sm:mt-0">
+        <div className="flex flex-col gap-2xl sm:w-96">
           <CalculatorValueBlock title="Доход в конце срока" value={income} postfix="₽" prefix="+" />
           <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
           {renderButtonsSection(buttons, { isVertical: true })}

package/src/components/Calculator/Rate.tsx

@@ -28,7 +28,7 @@ export const Rate = JSX<RateProps>(
       </Text>
       <div className="relative">
         <div className="flex justify-start gradient-color-text">
-          <span className={style('font-mohave text-title-huge pr-6 -mt-4', rateBlockClassName)}>
+          <span className={style('font-mohave text-title-huge pr-xl -mt-m', rateBlockClassName)}>
             {String(rate.toFixed(fractionDigits)).replace('.', ',')}
           </span>
           {unit ? <span className="text-7xl">{unit}</span> : null}

package/src/components/Calculator/RefinancingCalculatorForm.tsx

@@ -48,8 +48,8 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
     );
 
     return (
-      <section className={style('flex justify-between', className)}>
-        <div className="w-2/5">
+      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
           {renderWantedSumInput({
             title: 'Остаток долга в других банках, ₽ ',
             step: 500,
@@ -73,11 +73,8 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
             max: calculatorParams.maxMonths,
             ...field('monthsValue'),
             value: calculatorParams.monthsValue,
-            className: 'mt-2xl',
           })}
-          <div className={style('mt-7', calculatorParams.isExtraMoney ? 'mb-3' : '')}>
-            {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
-          </div>
+          {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
           {calculatorParams.isExtraMoney
             ? renderWantedSumInput({
                 title: 'Дополнительная сумма, ₽ ',
@@ -96,7 +93,7 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
           rateBlockClassName="tracking-[-25px]"
           unit="%"
         />
-        <div className="w-96">
+        <div className="flex flex-col gap-2xl sm:w-96">
           <CalculatorValueBlock
             title={'Ежемесячный платеж'}
             value={calculatorParams.monthlyPayment}
@@ -110,7 +107,7 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
             />
           ) : null}
           {renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') })}
-          {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
+          {renderButtonsSection(buttons, { isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>
@@ -122,7 +119,7 @@ const renderCreditParamsForm = (
   params: RefinancingCalculatorParams & RefinancingCalculatorParamsViewSettings,
   field: FormFieldRegisterer<any>,
 ) => (
-  <div>
+  <div className="space-y-s">
     {params.isShowSalaryClient ? (
       <Checkbox
         text="Получаю зарплату на счёт в Россельхозбанке"
@@ -132,7 +129,6 @@ const renderCreditParamsForm = (
     ) : null}
     {params.isShowInsurance ? (
       <Checkbox
-        className="mt-3"
         text="Комплексная страховая защита"
         {...field('isInsurance')}
         value={params.isInsurance}
@@ -140,7 +136,6 @@ const renderCreditParamsForm = (
     ) : null}
     {params.isShowExtraMoney ? (
       <Checkbox
-        className="mt-3"
         text="Получить дополнительную сумму"
         {...field('isExtraMoney')}
         value={params.isExtraMoney}

package/src/components/Calculator/renderBinaryRadioButtonGroup.tsx

@@ -20,9 +20,9 @@ export const renderBinaryRadioButtonGroup = ({
   radioGroupClassName,
   onChange,
 }: BinaryRadioButtonGroupProps) => (
-  <div>
+  <div className="space-y-s">
     {title ? (
-      <div className="mb-3">
+      <div>
         <Text color="text-secondary-text" font="font-light">
           {title}
         </Text>

package/src/components/Calculator/renderCalculatorBlock.tsx

@@ -15,8 +15,8 @@ export const renderCalculatorBlock = (block: CalculatorBlockDef, i: number) => {
       className="box-border relative bg-white flex shrink-0 self-start basis-full"
       role="listitem"
     >
-      <div className="box-border p-9 w-full">
-        {block?.title ? <Heading className="text-center mb-6" title={block.title} /> : null}
+      <div className="box-border p-4xl w-full space-y-xl">
+        {block?.title ? <Heading className="text-center" title={block.title} /> : null}
         <EmbeddedBlock {...block} />
       </div>
     </section>

package/src/components/Calculator/renderInitialFeeInput.tsx

@@ -21,7 +21,6 @@ export function renderInitialFeeInput(
 
   return (
     <InputRange
-      className="mt-7"
       title={title}
       items={[
         `От ${toLocalNumberFormat(0)(minSum)} рублей`,

package/src/components/CardTransfer/CardTransfer.tsx

@@ -49,7 +49,7 @@ export const CardTransfer = JSX<CardTransferProps>(
       >
         {title ? (
           <Heading
-            className="pb-5 xl:pb-9 self-start xl:self-center"
+            className="pb-lg xl:pb-4xl self-start xl:self-center"
             headingType="h2"
             title={title}
           />
@@ -65,7 +65,7 @@ export const CardTransfer = JSX<CardTransferProps>(
           {button?.text ? (
             <button
               type="submit"
-              className={style('w-full p-4 mt-5 xl:mt-6', buttonStyle)}
+              className={style('w-full p-m mt-lg', buttonStyle)}
               disabled={isDisabled}
               {...link(button)}
             >

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.mobile.tsx

@@ -15,7 +15,7 @@ export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
         description={description}
         align="text-left"
         className="text-primary-text"
-        isPadding={false}
+        isEmbedded={true}
       />
     </BlockWrapper>
   ),

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.tsx

@@ -32,7 +32,7 @@ export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
             className="h-96 text-white shadow-dark-blue"
           />
         ) : (
-          <div className="h-[300px] flex justify-center items-center font-mohave text-title-large tracking-[-0.03em]">
+          <div className="h-[300px] flex justify-center items-center font-mohave text-title-large">
             <span className={getTextColor(blockIndex)}>{title}</span>
           </div>
         )}

package/src/components/CarouselCard/CarouselCard.tsx

@@ -14,18 +14,22 @@ const layerStyle = style(layerBaseStyle, 'absolute hidden sm:block border-transp
 
 export const CarouselCard = JSX<CarouselCardProps>(
   ({ className, title, description, button, ...rest }) => (
-    <BlockWrapper className={style('sm:pl-12 sm:pb-9', className)} defaultPadding="p-0" {...rest}>
+    <BlockWrapper
+      className={style('sm:pl-6xl sm:pb-4xl', className)}
+      defaultPadding="p-0"
+      {...rest}
+    >
       <div className="relative">
         <div className={style(layerStyle, 'top-9 right-12 bg-green-dark')} />
         <div className={style(layerStyle, 'top-6 right-8 bg-green')} />
         <div className={style(layerStyle, 'top-3 right-4 bg-green-light')} />
-        <div className={style(layerBaseStyle, 'relative p-10 bg-white border-green-light')}>
+        <div className={style(layerBaseStyle, 'relative p-5xl bg-white border-green-light')}>
           <Headline
             title={title}
             description={description}
             headlineVersion={titleSize}
             align="text-left"
-            isPadding={false}
+            isEmbedded={true}
           />
           {renderButtonsSection([button], {
             className: 'mt-6xl sm:justify-center',

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -28,7 +28,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
         title={title}
         description={description}
         headlineVersion="XS"
-        isPadding={false}
+        isEmbedded={true}
         align="text-left"
         className="mb-m"
       />

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -14,11 +14,9 @@ import type {
 
 export interface CarouselInvestmentCardProps extends CarouselInvestmentCardContent, UniBlockProps {}
 
-const getItemListFontSize = (colValue?: number) => (colValue === 1 ? 'text-h6' : 'text-l');
-
 const cardColumnsModeStyleMap: Record<CardColumnsMode, string> = {
-  1: 'flex-col',
-  2: 'gap-x-10 flex-wrap',
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
 };
 
 export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
@@ -43,7 +41,7 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
         }
         backImage={image?.src ? <Img image={image} /> : null}
       >
-        <div className="flex justify-between mb-4">
+        <div className="flex justify-between mb-m">
           {description ? (
             <div className="w-1/3">
               <Text size="text-h6">{description}</Text>
@@ -57,12 +55,9 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
         </div>
         {cardsList.length ? (
           <ul
-            className={style(
-              'list-none m-0 p-0 flex gap-y-2',
-              cardColumnsModeStyleMap[columnsMode],
-            )}
+            className={style('list-none m-0 p-0 grid gap-xs', cardColumnsModeStyleMap[columnsMode])}
           >
-            {renderCardList(cardsList, columnsMode)}
+            {renderCardList(cardsList)}
           </ul>
         ) : null}
       </BaseTile>
@@ -70,17 +65,10 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
   ),
 );
 
-const renderCardList = (cardsList: CardsListItem[], columnsMode: number) => {
-  const CARDS_COUNT_MAP = [4, 9];
-  const visibleCardsList = cardsList.slice(0, CARDS_COUNT_MAP[columnsMode - 1]);
-
-  return visibleCardsList.map((item, i) => (
-    <li key={String(i)} className={columnsMode === 2 ? 'basis-[calc(50%-20px)]' : ''}>
-      {item?.parameter ? (
-        <div className="pr-2.5">
-          <Text size={getItemListFontSize(columnsMode)}>{item.parameter}</Text>
-        </div>
-      ) : null}
+const renderCardList = (cardsList: CardsListItem[]) =>
+  cardsList.map((item, i) => (
+    <li key={String(i)}>
+      {item?.parameter ? <Text size="text-h6">{item.parameter}</Text> : null}
       {item?.parameterDescription ? (
         <Text size="text-m" font="font-light" color="text-secondary-text">
           {item.parameterDescription}
@@ -88,4 +76,3 @@ const renderCardList = (cardsList: CardsListItem[], columnsMode: number) => {
       ) : null}
     </li>
   ));
-};

package/src/{ui-kit/LinkButton/LinkButton.tsx → components/CarouselLinks/CarouselLinkButton.tsx}

@@ -1,21 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
-import { Img } from '../Img/Img';
+import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 
 const LINK_CLASS_NAME = `absolute border border-primary-main px-xl py-lg
   text-l font-light bg-white text-primary-text flex
   justify-between items-center group-hover/link:text-primary-main z-10`;
 
-const LINK_BORDER_CLASS_NAME =
-  'bg-transparent border-white border h-[70px] absolute w-[316px] top-0';
+const LINK_BORDER_CLASS_NAME = 'bg-transparent border-white border h-[70px] absolute w-80 top-0';
 
-export type LinkButtonProps = LinkProps & {
+export type CarouselLinkButtonProps = LinkProps & {
   className?: string;
 };
 
-export const LinkButton = JSX<LinkButtonProps>(
+export const CarouselLinkButton = JSX<CarouselLinkButtonProps>(
   ({ text, href = '', target = '', className = '' }) => {
     const link = useLink();
     const adjustedProps = link({ href, target });

package/src/components/CarouselLinks/CarouselLinks.fixture.tsx

@@ -21,14 +21,17 @@ const MAX_LINKS_COUNT = 10;
 
 export default {
   default: (
-    <CarouselLinks
-      links={links}
-      title="О Банке"
-      description={description}
-      additionalDescription={additionalDescription}
-      maxLinksCount={MAX_LINKS_COUNT}
-      version="secondary"
-      block={{ type: 'Carousel', blocks: new Array(3).fill(link).flat() }}
-    />
+    <div className="container grid grid-cols-12">
+      <CarouselLinks
+        links={links}
+        className="col-span-12"
+        title="О Банке"
+        description={description}
+        additionalDescription={additionalDescription}
+        maxLinksCount={MAX_LINKS_COUNT}
+        version="secondary"
+        block={{ type: 'Carousel', blocks: new Array(3).fill(link).flat() }}
+      />
+    </div>
   ),
 };