@redneckz/wildless-cms-uni-blocks 0.12.11 → 0.12.13

package/src/components/Bonus/Bonus.tsx

@@ -10,31 +10,39 @@ import type { BonusContent, BonusCountDef, BonusImageDef } from './BonusContent'
 
 export interface BonusProps extends BonusContent, UniBlockProps {}
 
-export const Bonus = JSX<BonusProps>((props) => {
-  const { className = '', title, description, bonusItems, ...rest } = props;
-
-  return (
-    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
+export const Bonus = JSX<BonusProps>(
+  ({ className = '', title, description, bonusItems = [], ...rest }) => (
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
       <div className="container">
-        <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
-        <div className="flex flex-wrap w-full mt-9">
-          {bonusItems?.length
+        <Headline
+          className="mb-xl"
+          isPadding={false}
+          title={title}
+          description={description}
+          headlineVersion="M"
+        />
+        <div className="flex flex-wrap w-full">
+          {bonusItems.length > 0
             ? bonusItems.map((_, i) => (
                 <div
                   key={String(i)}
-                  className="flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0"
+                  className="flex-grow w-full sm:w-[49%] border border-gray p-m mb-text mx-xs even:mr-0 odd:ml-0 last:odd:mx-0"
                 >
-                  {_?.title ? <Text size="text-h4">{_.title}</Text> : null}
+                  {_?.title ? (
+                    <div className="mb-xs last:mb-0">
+                      <Text size="text-h4">{_.title}</Text>
+                    </div>
+                  ) : null}
                   {_?.description ? (
-                    <div className="mt-xs">
+                    <div className="mb-text last:mb-0">
                       <Paragraph size="text-xl" font="font-light">
                         {_.description}
                       </Paragraph>
                     </div>
                   ) : null}
 
-                  <div className="flex justify-between items-end mt-3">
-                    {renderButtonsSection(_?.buttons)}
+                  <div className="flex justify-between items-end">
+                    <div className="hidden sm:block">{renderButtonsSection(_?.buttons)}</div>
                     {_.bonusItemContent?.bonusType
                       ? renderBonusItemContent(_.bonusItemContent)
                       : null}
@@ -45,31 +53,28 @@ export const Bonus = JSX<BonusProps>((props) => {
         </div>
       </div>
     </BlockWrapper>
-  );
-});
-
-const renderBonusItemContent = (bonusItemContent: BonusImageDef | BonusCountDef) => (
-  <div>
-    {bonusItemContent.bonusType === 'count'
-      ? renderBonusCount(bonusItemContent as BonusCountDef)
-      : renderBonusImage(bonusItemContent as BonusImageDef)}
-  </div>
+  ),
 );
 
+const renderBonusItemContent = (bonusItemContent: BonusImageDef | BonusCountDef) =>
+  bonusItemContent.bonusType === 'count'
+    ? renderBonusCount(bonusItemContent as BonusCountDef)
+    : renderBonusImage(bonusItemContent as BonusImageDef);
+
 const renderBonusCount = (_: BonusCountDef) => (
-  <div className="relative -bottom-3 h-auto flex items-end mt-14 shrink-0">
+  <div className="w-full pt-default mt-s flex items-end">
     {_.bonusCount ? (
-      <span className="font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7">
+      <span className="shrink-0 w-1/2 sm:w-auto font-mohave text-title-extra -tracking-[5px] bg-clip-text text-transparent bg-green-to-yellow mt-lg">
         {_.bonusCount}
       </span>
     ) : null}
     {_.bonusName ? (
-      <span className="text-h2 bg-clip-text text-transparent bg-green-to-yellow">
-        {_.bonusName}
-      </span>
+      <div className="w-1/2 sm:w-auto bg-clip-text text-transparent bg-green-to-yellow">
+        <Text size="text-h2">{_.bonusName}</Text>
+      </div>
     ) : null}
   </div>
 );
 
 const renderBonusImage = (_: BonusImageDef) =>
-  _.image ? <Img className={`w-12 h-12 min-w-12 p-3 rounded-icon`} image={_.image} /> : null;
+  _.image ? <Img className="min-w-12 p-xs rounded-icon shrink-0" image={_.image} /> : null;

package/src/components/BonusBenefitsBlock/renderBonusBenefits.mobile.tsx

@@ -1,4 +1,5 @@
-import { AlignType } from '../../model/AlignType';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type { AlignType } from '../../model/AlignType';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import { BonusBenefit, ColumnsCount } from './BonusBenefitsBlockContent';
 import { renderBonusBenefit } from './renderBonusBenefit';

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -39,20 +39,20 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
         <div className="flex justify-between">
           <div className="w-2/5">
             {renderWantedSumInput({
-              title: 'Сумма вклада, ₽',
+              title: 'Сумма, ₽',
               min: calculatorParams.minSum,
               max: calculatorParams.maxSum,
               ...field('moneyValue'),
               value: calculatorParams.moneyValue,
             })}
             {renderDaysInput({
-              title: 'Срок вклада, дни',
+              title: 'Срок, дней',
               min: calculatorParams.minDays,
               max: calculatorParams.maxDays,
               ...field('daysValue'),
               value: calculatorParams.daysValue,
             })}
-            <div className="mt-7 flex justify-between">
+            <div className="mt-2xl flex justify-between">
               {renderBusinessDepositParamsForm(calculatorParams, field)}
               {renderInterestPayment({
                 title: 'Выплата процентов',
@@ -74,10 +74,15 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
           )}
 
           <div className="w-96">
-            <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
+            <CalculatorValueBlock
+              title="Доход в конце срока"
+              value={income}
+              postfix="₽"
+              prefix="+"
+            />
             <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
-            {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
-            <div className="mt-7">{renderFootnote(footnote)}</div>
+            {renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true })}
+            <div className="mt-2xl">{renderFootnote(footnote)}</div>
           </div>
         </div>
         <div className="mt-5">{renderFootnote(bottomFootnote)}</div>

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -24,7 +24,7 @@ export interface CreditCalculatorProp extends CreditCalculatorProps {
 export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
   ({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
     const [userInputParams, { field }] = useForm({
-      isAnnuity: false,
+      isAnnuity: true,
       isInsurance: true,
       isSalaryClient: false,
       isPensionClient: false,

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -43,14 +43,14 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
       <section className={style('flex justify-between', className)}>
         <div className="w-2/5">
           {renderWantedSumInput({
-            title: 'Сумма вклада, ₽',
+            title: 'Сумма, ₽',
             min: calculatorParams.minSum,
             max: calculatorParams.maxSum,
             ...field('moneyValue'),
             value: calculatorParams.moneyValue,
           })}
           {renderMonthsInput({
-            title: 'Срок вклада, месяцев',
+            title: 'Срок, месяцев',
             min: calculatorParams.minMonths,
             max: calculatorParams.maxMonths,
             availableMonths: calculatorParams.availableMonths,
@@ -63,7 +63,7 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
         </div>
         <Rate rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
         <div className="w-96">
-          <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
+          <CalculatorValueBlock title="Доход в конце срока" value={income} postfix="₽" prefix="+" />
           <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
           {renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true })}
           {renderFootnote(footnote)}

package/src/components/Calculator/UnknownRate.tsx

@@ -15,7 +15,7 @@ export const UnknownRate = JSX<UnknownRateProps>(({ title = 'Ставка' }) =>
     <div className="mt-2xs pt-2xs pl-lg pb-xs">
       <Icon name="PercentIcon" width="90" height="85" />
     </div>
-    <div className="w-[250px] mt-m">
+    <div className="w-64 mt-m">
       <Paragraph size="text-xl" font="font-light" color="text-primary-text">
         Процентная ставка для срока <strong>1-30 дней</strong> устанавливается при обращении в Банк
       </Paragraph>

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

@@ -1,19 +1,19 @@
 import '../../setup-fixture';
 
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { Picture } from '../../model/Picture';
 import { Blocks } from '../Blocks';
-import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
-import { Carousel } from './Carousel';
-import { CARD } from '../CarouselCard/CarouselCard.fixture.mobile';
-import { CAROUSEL_RECOMMENDATION_CARD } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture.mobile';
-import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
 import { BANK_HISTORY_CARD } from '../CarouselBankHistoryCard/CarouselBankHistoryCard.fixture';
+import { CARD } from '../CarouselCard/CarouselCard.fixture.mobile';
 import { CATALOG_CARD } from '../CarouselCatalogCard/CatalogCard';
 import {
   PRODUCT_CARD,
   PRODUCT_CARD_SMALL,
 } from '../CarouselProductCard/CarouselProductCard.fixture';
-import { Picture } from '../../model/Picture';
+import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
+import { CAROUSEL_RECOMMENDATION_CARD } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture.mobile';
+import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
+import { Carousel } from './Carousel';
 
 const catalogImage: Picture = {
   src: 'pay-ring.png',
@@ -34,16 +34,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isPadding={false}
-        isCyclic={true}
-        showArrows={false}
         showDots={true}
         block={{
           type: 'Carousel',
           blocks: [
-            { type: 'CarouselCard', content: CARD, style: ['col-span-4'] },
-            { type: 'CarouselCard', content: CARD, style: ['col-span-4'] },
+            { type: 'CarouselCard', content: CARD },
+            { type: 'CarouselCard', content: CARD },
           ],
         }}
         options={options}
@@ -54,17 +50,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isCyclic={true}
-        isPadding={true}
-        showArrows={false}
         showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
             type: 'CarouselCatalogCard',
             content: { ...CATALOG_CARD, image: catalogImage },
-            style: ['col-span-12'],
           }),
         }}
         options={options}
@@ -75,28 +66,21 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={0}
-        isBlur={true}
-        isCyclic={true}
         isAlignCenter={true}
-        showArrows={false}
         block={{
           type: 'Carousel',
           blocks: [
             {
               type: 'CarouselTariffsCard',
               content: TARIFFS_CARD_HIT,
-              style: ['col-span-4'],
             },
             {
               type: 'CarouselTariffsCard',
               content: TARIFFS_CARD,
-              style: ['col-span-4'],
             },
             {
               type: 'CarouselTariffsCard',
               content: TARIFFS_CARD,
-              style: ['col-span-4'],
             },
           ],
         }}
@@ -108,17 +92,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isCyclic={true}
-        isPadding={false}
-        showArrows={false}
         showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
             type: 'CarouselProductCard',
             content: PRODUCT_CARD,
-            style: ['col-span-4'],
           }),
         }}
         options={options}
@@ -129,16 +108,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={true}
-        isPadding={false}
-        showArrows={false}
         showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
             type: 'CarouselProductCard',
             content: PRODUCT_CARD_SMALL,
-            style: ['col-span-4'],
           }),
         }}
         options={options}
@@ -149,17 +124,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isCyclic={true}
-        isPadding={true}
-        showArrows={false}
         showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
             type: 'CarouselProgramsCard',
             content: BUSINESS_CARD,
-            style: ['col-span-4'],
           }),
         }}
         options={options}
@@ -170,17 +140,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isPadding={false}
-        isCyclic={true}
-        showArrows={false}
         showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
             type: 'CarouselRecommendationCard',
             content: CAROUSEL_RECOMMENDATION_CARD,
-            style: ['col-span-4'],
           }),
         }}
         options={options}
@@ -191,17 +156,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isPadding={false}
-        isCyclic={true}
-        showArrows={false}
         showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
             type: 'CarouselRecommendationCard',
             content: { version: 'secondary', ...CAROUSEL_RECOMMENDATION_CARD },
-            style: ['col-span-4'],
           }),
         }}
         options={options}
@@ -212,17 +172,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isCyclic={true}
-        isPadding={false}
-        showArrows={false}
         showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
             type: 'CarouselBankHistoryCard',
             content: BANK_HISTORY_CARD,
-            style: ['col-span-4'],
           }),
         }}
         options={options}

package/src/components/Carousel/Carousel.fixture.tsx

@@ -1,6 +1,7 @@
 import '../../setup-fixture';
 
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { Picture } from '../../model/Picture';
 import { Blocks } from '../Blocks';
 import { BANK_HISTORY_CARD } from '../CarouselBankHistoryCard/CarouselBankHistoryCard.fixture';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
@@ -19,7 +20,6 @@ import {
 import { RICH_CARD } from '../CarouselRichTextCard/CarouselRichTextCard.fixture';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { Carousel } from './Carousel';
-import { Picture } from '../../model/Picture';
 
 const catalogImage: Picture = {
   src: 'pay-ring.png',
@@ -41,8 +41,7 @@ export default {
       <Carousel
         className="col-span-12"
         visibleItemCount={1}
-        isBlur={false}
-        isCyclic={true}
+        noCardBorder={true}
         block={{
           type: 'Carousel',
           blocks: [
@@ -58,14 +57,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={true}
-        isCyclic={false}
+        noCardBorder={true}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
             type: 'CarouselCard',
             content: CARD_MINI,
-            style: ['col-span-3'],
           }),
         }}
         options={options}
@@ -77,7 +74,6 @@ export default {
       <Carousel
         className="col-span-12"
         visibleItemCount={3}
-        isBlur={false}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
@@ -94,8 +90,6 @@ export default {
       <Carousel
         className="col-span-12"
         visibleItemCount={0}
-        isBlur={true}
-        isCyclic={false}
         isAlignCenter={true}
         isGap={false}
         block={{
@@ -116,7 +110,6 @@ export default {
       <Carousel
         className="col-span-12"
         visibleItemCount={1}
-        isBlur={true}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
@@ -133,7 +126,6 @@ export default {
       <Carousel
         className="col-span-12"
         visibleItemCount={3}
-        isBlur={true}
         block={{
           type: 'Carousel',
           blocks: [
@@ -164,7 +156,6 @@ export default {
       <Carousel
         className="col-span-12"
         visibleItemCount={2}
-        isBlur={false}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
@@ -180,14 +171,11 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={true}
-        isCyclic={false}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
             type: 'CarouselInvestmentCard',
             content: INVESTMENT_CARD_WITH_SINGLE_COLUMN,
-            style: ['col-span-2'],
           }),
         }}
         options={options}
@@ -198,15 +186,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isCyclic={false}
         visibleItemCount={0}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
             type: 'CarouselRecommendationCard',
             content: CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST,
-            style: ['col-span-2'],
           }),
         }}
         options={options}
@@ -217,15 +202,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isCyclic={false}
         visibleItemCount={0}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
             type: 'CarouselRecommendationCard',
             content: CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
-            style: ['col-span-2'],
           }),
         }}
         options={options}
@@ -237,14 +219,11 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isCyclic={false}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
             type: 'CarouselEventCard',
             content: CAROUSEL_EVENT_CARD,
-            style: ['col-span-4'],
           }),
         }}
         options={options}
@@ -255,10 +234,9 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isCyclic={false}
         arrowsPadded={false}
         visibleItemCount={3}
+        noCardBorder={true}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({