@redneckz/wildless-cms-uni-blocks 0.12.8 → 0.12.10

package/src/components/ApplicationForm/ApplicationFormCredit.tsx

@@ -65,11 +65,11 @@ export const ApplicationFormCredit = JSX<ApplicationFormsProps>(({ button, link,
 
   return (
     <form className="container" onSubmit={formProps.onSubmit}>
-      <Heading headingType="h6" title="Параметры кредита" className="text-center mb-4" />
+      <Heading headingType="h6" title="Параметры кредита" className="sm:text-center mb-4" />
       {renderCreditParameters(field)}
-      <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
+      <Heading headingType="h6" title="Данные организации" className="sm:text-center mb-4" />
       {renderCreditDataOrganization(field)}
-      <Heading headingType="h6" title="Офис банка" className="text-center mb-4" />
+      <Heading headingType="h6" title="Офис банка" className="sm:text-center mb-4" />
       {renderRegionDepartment({ regions, branches, field })}
       {renderSubmitButton(button, 'mb-4')}
       <Footnote link={link} />

package/src/components/ApplicationForm/ApplicationFormDeposit.tsx

@@ -47,7 +47,7 @@ export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
       <Heading
         headingType="h6"
         title="Оставьте заявку и мы ответим на любые вопросы по депозитам"
-        className="text-center mb-4"
+        className="sm:text-center mb-4"
       />
       <div className="max-w-[560px] m-auto">
         <InputControl
@@ -61,8 +61,8 @@ export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
           {...withValidator(field('phone'), phoneValidator)}
         />
       </div>
-      <div className="flex justify-between items-center max-w-[560px] m-auto">
-        <div className="flex-1">
+      <div className="flex justify-between flex-col-reverse sm:items-center sm:flex-row max-w-[560px] m-auto">
+        <div className="flex-1 mt-4 sm:mt-0">
           <Footnote link={link} />
         </div>
         {renderSubmitButton(button)}

package/src/components/ApplicationForm/ApplicationFormWed.tsx

@@ -64,18 +64,18 @@ export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
 
   return (
     <form className="container" onSubmit={formProps.onSubmit}>
-      <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
+      <Heading headingType="h6" title="Данные организации" className="sm:text-center mb-4" />
       {renderWedDataOrganization(field)}
-      <Heading headingType="h6" title="Интересующий вопрос" className="text-center mb-4" />
+      <Heading headingType="h6" title="Интересующий вопрос" className="sm:text-center mb-4" />
       {renderQuestionsInterested(field)}
-      <div className="flex items-center pb-9 mb-9 border-b border-main-divider">
-        {renderSubmitButton(button, 'mr-5')}
+      <div className="flex flex-col border-b border-main-divider mb-5 pb-5 sm:items-center sm:flex-row sm:mb-9 sm:pb-9">
+        {renderSubmitButton(button, 'mb-4 sm:mr-5 sm:mb-0')}
         <Footnote link={link} />
       </div>
       <Heading
         headingType="h6"
         title="Или свяжитесь с нами удобным способом"
-        className="text-center mb-4"
+        className="sm:text-center mb-4"
       />
       {renderContacts()}
     </form>

package/src/components/ApplicationForm/renderAcquiringDataOrganization.tsx

@@ -6,8 +6,8 @@ import { PhoneInputControl } from './PhoneInputControl';
 import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
 export const renderAcquiringDataOrganization = (field: FormFieldRegisterer<AcquiringFormState>) => (
-  <div className="flex justify-between gap-5 mb-5">
-    <div className="w-1/2">
+  <div className="mb-4 sm:flex sm:justify-between sm:gap-5 sm:mb-7">
+    <div className="sm:w-1/2">
       <InputControl
         className="shrink-0 w-full mb-3"
         label="Наименование организации"
@@ -19,7 +19,7 @@ export const renderAcquiringDataOrganization = (field: FormFieldRegisterer<Acqui
         {...withValidator(field('name'), nameValidator)}
       />
     </div>
-    <div className="w-1/2">
+    <div className="sm:w-1/2">
       <InputControl
         className="shrink-0 w-full mb-3"
         label="ИНН"

package/src/components/ApplicationForm/renderAcquiringRegion.tsx

@@ -12,8 +12,8 @@ interface AcquiringRegionProps {
 }
 
 export const renderAcquiringRegion = ({ regions, field }: AcquiringRegionProps) => (
-  <div className="flex justify-between gap-5 mb-7">
-    <div className="w-1/2">
+  <div className="mb-4 pb-1 border-b border-b-main-divider sm:flex sm:justify-between sm:gap-5 sm:mb-7 sm:border-none sm:pb-0">
+    <div className="mb-3 sm:mb-0 sm:w-1/2">
       <SelectControl
         label="Вид эквайринга"
         placeholder="Выберите эквайринг"
@@ -21,7 +21,7 @@ export const renderAcquiringRegion = ({ regions, field }: AcquiringRegionProps)
         {...withValidator(field('acquiringType'), defaultValidator)}
       />
     </div>
-    <div className="w-1/2">
+    <div className="mb-3 sm:mb-0 sm:w-1/2">
       <SelectControl
         label="Адрес"
         placeholder="Выберите адрес"

package/src/components/ApplicationForm/renderBusinessCardDataOrganization.tsx

@@ -8,8 +8,8 @@ import { defaultValidator, innValidator, nameValidator, phoneValidator } from '.
 export const renderBusinessCardDataOrganization = (
   field: FormFieldRegisterer<BusinessCardFormState>,
 ) => (
-  <div className="flex justify-between gap-5">
-    <div className="w-1/2">
+  <div className="sm:flex sm:justify-between sm:gap-5">
+    <div className="sm:w-1/2">
       <InputControl
         className="shrink-0 w-full mb-3"
         label="Контактное лицо"
@@ -21,7 +21,7 @@ export const renderBusinessCardDataOrganization = (
         {...withValidator(field('inn'), innValidator)}
       />
     </div>
-    <div className="w-1/2">
+    <div className="sm:w-1/2">
       <PhoneInputControl
         className="shrink-0 w-full mb-3"
         label="Телефон"

package/src/components/ApplicationForm/renderCreditDataOrganization.tsx

@@ -6,8 +6,8 @@ import { PhoneInputControl } from './PhoneInputControl';
 import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
 export const renderCreditDataOrganization = (field: FormFieldRegisterer<CreditFormState>) => (
-  <div className="flex justify-between gap-5 mb-7">
-    <div className="w-1/2">
+  <div className="mb-4 pb-1 border-b border-b-main-divider sm:flex sm:justify-between sm:gap-5 sm:mb-7 sm:border-none sm:pb-0">
+    <div className="sm:w-1/2">
       <InputControl
         className="shrink-0 w-full mb-3"
         label="Наименование организации"
@@ -24,7 +24,7 @@ export const renderCreditDataOrganization = (field: FormFieldRegisterer<CreditFo
         {...withValidator(field('phone'), phoneValidator)}
       />
     </div>
-    <div className="w-1/2">
+    <div className="sm:w-1/2">
       <InputControl
         className="shrink-0 w-full mb-3"
         label="Годовая выручка, ₽"

package/src/components/ApplicationForm/renderCreditParameters.tsx

@@ -12,8 +12,8 @@ import {
 } from './CreditParameters';
 
 export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormState>) => (
-  <div className="flex justify-between gap-5 mb-7">
-    <div className="w-1/2">
+  <div className="mb-4 pb-1 border-b border-b-main-divider sm:flex sm:justify-between sm:gap-5 sm:mb-7 sm:border-none sm:pb-0">
+    <div className="mb-3 sm:mb-0 sm:w-1/2">
       <label>
         <Text size="text-m" font="font-light">
           Сумма кредита, ₽
@@ -26,7 +26,7 @@ export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormStat
         {...field('amount')}
       />
     </div>
-    <div className="w-1/2">
+    <div className="sm:w-1/2">
       <label>
         <Text size="text-m" font="font-light">
           Срок кредита, месяцев

package/src/components/ApplicationForm/renderQuestionsInterested.tsx

@@ -6,11 +6,19 @@ export const renderQuestionsInterested = (field: FormFieldRegisterer<WedFormStat
   const textField = field('text');
 
   return (
-    <div className="mb-6">
-      <div className="flex items-center mb-4 gap-6">
-        <Checkbox text="Валютный контроль" {...field('currencyControl')} />
-        <Checkbox text="Документарные операции" {...field('documentaryOperations')} />
-        <Checkbox text="Конверсионные операции" {...field('conversionOperations')} />
+    <div className="mb-3 sm:mb-6">
+      <div className="mb-4 sm:flex sm:items-center sm:gap-6">
+        <Checkbox className="mb-3 sm:mb-0" text="Валютный контроль" {...field('currencyControl')} />
+        <Checkbox
+          className="mb-3 sm:mb-0"
+          text="Документарные операции"
+          {...field('documentaryOperations')}
+        />
+        <Checkbox
+          className="mb-3 sm:mb-0"
+          text="Конверсионные операции"
+          {...field('conversionOperations')}
+        />
       </div>
       <textarea
         placeholder="Укажите интересующий вас вопрос, место ведения бизнеса и удобное время для телефонного звонка"

package/src/components/ApplicationForm/renderRegion.tsx

@@ -11,14 +11,12 @@ interface RegionProps {
 }
 
 export const renderRegion = ({ regions, field }: RegionProps) => (
-  <div className="flex justify-between gap-5 mb-5">
-    <div className="w-full">
-      <SelectControl
-        label="Регион"
-        placeholder="Выберите регион"
-        options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
-        {...withValidator(field('region'), defaultValidator)}
-      />
-    </div>
+  <div className="w-full mb-3 sm:mb-5">
+    <SelectControl
+      label="Регион"
+      placeholder="Выберите регион"
+      options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
+      {...withValidator(field('region'), defaultValidator)}
+    />
   </div>
 );

package/src/components/ApplicationForm/renderRegionDepartment.tsx

@@ -13,8 +13,8 @@ interface RegionDepartmentProps {
 }
 
 export const renderRegionDepartment = ({ regions, branches, field }: RegionDepartmentProps) => (
-  <div className="flex justify-between gap-5 mb-7">
-    <div className="w-1/2">
+  <div className="mb-4  sm:flex sm:justify-between sm:gap-5 sm:mb-7 sm:border-none sm:pb-0">
+    <div className="mb-3 sm:mb-0 sm:w-1/2">
       <SelectControl
         label="Регион"
         placeholder="Выберите регион"
@@ -22,7 +22,7 @@ export const renderRegionDepartment = ({ regions, branches, field }: RegionDepar
         {...withValidator(field('region'), defaultValidator)}
       />
     </div>
-    <div className="w-1/2">
+    <div className="mb-3 sm:mb-0 sm:w-1/2">
       <SelectControl
         label="Адрес"
         placeholder="Выберите адрес"

package/src/components/ApplicationForm/renderSlideCheckboxes.tsx

@@ -3,7 +3,7 @@ import { SlideCheckbox } from '../../ui-kit/SlideCheckbox/SlideCheckbox';
 import type { AcquiringFormState } from './AcquiringFormState';
 
 export const renderSlideCheckboxes = (field: FormFieldRegisterer<AcquiringFormState>) => (
-  <div className="mb-5">
+  <div className="sm:mb-5">
     <SlideCheckbox text="Хочу купить онлайн-кассу" {...field('onlineCheckout')} />
     <SlideCheckbox text="Хочу купить POS-терминал" {...field('posTerminal')} />
   </div>

package/src/components/ApplicationForm/renderSubmitButton.tsx

@@ -9,7 +9,10 @@ export const renderSubmitButton = (button?: SubmitButtonProps, className?: strin
   });
 
   return (
-    <button type="submit" className={style('p-4', buttonStyle, className)}>
+    <button
+      type="submit"
+      className={style('p-4 mt-3 w-full sm:mt-0 sm:w-auto', buttonStyle, className)}
+    >
       {button?.text ? button.text : 'Отправить заявку'}
     </button>
   );

package/src/components/ApplicationForm/renderWedDataOrganization.tsx

@@ -7,15 +7,15 @@ import type { WedFormState } from './WedFormState';
 
 export const renderWedDataOrganization = (field: FormFieldRegisterer<WedFormState>) => (
   <div>
-    <div className="flex justify-between gap-5">
-      <div className="w-1/2">
+    <div className="sm:flex sm:justify-between sm:gap-5">
+      <div className="sm:w-1/2">
         <InputControl
           className="shrink-0 w-full mb-3"
           label="Наименование организации"
           {...withValidator(field('fullName'), defaultValidator)}
         />
       </div>
-      <div className="w-1/2">
+      <div className="sm:w-1/2">
         <InputControl
           className="shrink-0 w-full mb-3"
           label="ФИО"
@@ -23,15 +23,15 @@ export const renderWedDataOrganization = (field: FormFieldRegisterer<WedFormStat
         />
       </div>
     </div>
-    <div className="flex justify-between gap-5 mb-7">
-      <div className="w-1/2">
+    <div className="sm:flex sm:justify-between sm:gap-5 sm:mb-7">
+      <div className="sm:w-1/2">
         <PhoneInputControl
           className="shrink-0 w-full mb-3"
           label="Телефон"
           {...withValidator(field('phone'), phoneValidator)}
         />
       </div>
-      <div className="w-1/2">
+      <div className="sm:w-1/2">
         <InputControl
           className="shrink-0 w-full mb-3"
           label="Электронная почта"

package/src/components/BenefitsBlock/BenefitsBlock.example.json

@@ -13,10 +13,10 @@
           "icon": "ClockIcon",
           "format": "webp",
           "size": {
-            "width": 70,
-            "height": 70
+            "width": 70
           }
-        }
+        },
+        "iconBgVersion": ""
       },
       {
         "label": "Преимущество №2",
@@ -28,10 +28,10 @@
           "icon": "SignDocsIcon",
           "format": "webp",
           "size": {
-            "width": 70,
-            "height": 70
+            "width": 70
           }
-        }
+        },
+        "iconBgVersion": ""
       }
     ]
   }

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

@@ -1,6 +1,8 @@
 import '../../setup-fixture';
-import { BenefitsBlock } from './BenefitsBlock';
+
 import type { Picture } from '../../model/Picture';
+import { BenefitsBlock } from './BenefitsBlock';
+import type { BenefitBlockItemProps } from './BenefitsBlockContent';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -8,34 +10,39 @@ const image: Picture = {
   alt: 'Потребительский кредит наличными',
   size: {
     width: 70,
-    height: 70,
   },
 };
 
+const benefitImage = {
+  label: 'Гибкий подход к обеспечению',
+  icon: image,
+};
+const benefitIcon: BenefitBlockItemProps = {
+  label: 'Оформление',
+  description: {
+    name: 'Обеспечение ',
+    benefitType: 'text',
+  },
+  icon: { icon: 'PersonalCardIcon' },
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <BenefitsBlock
         className="col-span-12"
         title="Оформите выгодный кредит для бизнеса"
-        benefitList={[
-          {
-            label: 'Гибкий подход к обеспечению',
-            icon: image,
-          },
-          {
-            label: 'Учет индивидуальных особенностей и потребностей бизнеса',
-            icon: image,
-          },
-          {
-            label: 'Льготная ставка до 5% годовых',
-            icon: image,
-          },
-          {
-            label: 'Возможность беззалогового кредитования',
-            icon: image,
-          },
-        ]}
+        benefitList={new Array(4).fill(benefitImage)}
+        version="primary"
+      />
+    </div>
+  ),
+  'desc-icon': (
+    <div className="container grid grid-cols-12">
+      <BenefitsBlock
+        className="col-span-12"
+        title="Преимущества кредита"
+        benefitList={new Array(4).fill(benefitIcon)}
         version="primary"
       />
     </div>

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

@@ -1,6 +1,8 @@
 import '../../setup-fixture';
+
 import type { Picture } from '../../model/Picture';
 import { BenefitsBlock } from './BenefitsBlock';
+import type { BenefitBlockItemProps, ListBenefitDef } from './BenefitsBlockContent';
 
 const itemsList = [
   'Комиссия за выдачу',
@@ -19,46 +21,37 @@ const image: Picture = {
   },
 };
 
+const benefitImage: BenefitBlockItemProps = {
+  label: 'Без залога и поручительства',
+  description: {
+    name: 'Единовременное перечисление суммы кредита в полном объёме на текущий счет в Банке',
+    benefitType: 'text',
+  },
+  icon: image,
+};
+
+const benefitIcon: BenefitBlockItemProps = {
+  label: 'Без залога ',
+  description: {
+    name: 'Единовременное перечисление ',
+    benefitType: 'text',
+  },
+  icon: { icon: 'CalendarTickIcon' },
+};
+
+const descriptionList: ListBenefitDef = {
+  bullets: true,
+  items: itemsList,
+  benefitType: 'list',
+};
+
 export default {
   'desc-img': (
     <div className="container grid grid-cols-12">
       <BenefitsBlock
         className="col-span-12"
         title="Преимущества кредита"
-        benefitList={[
-          {
-            label: 'Без комиссии',
-            description: {
-              name: 'Комиссия за выдачу кредита не взимается. Допускается полное или частичное погашение кредита',
-              benefitType: 'text',
-            },
-            icon: image,
-          },
-          {
-            label: 'Оформление по паспорту',
-            description: {
-              name: 'Обеспечение не требуется. Кредит можно получить на любые цели',
-              benefitType: 'text',
-            },
-            icon: image,
-          },
-          {
-            label: 'Без залога и поручительства',
-            description: {
-              name: 'Единовременное перечисление суммы кредита в полном объёме на текущий счет в Банке',
-              benefitType: 'text',
-            },
-            icon: image,
-          },
-          {
-            label: 'Деньги за 3 дня',
-            description: {
-              name: 'Рассмотрение заявки с момента предоставления полного комплекта документов',
-              benefitType: 'text',
-            },
-            icon: image,
-          },
-        ]}
+        benefitList={new Array(4).fill(benefitImage)}
         version="primary"
       />
     </div>
@@ -68,40 +61,7 @@ export default {
       <BenefitsBlock
         className="col-span-12"
         title="Преимущества кредита"
-        benefitList={[
-          {
-            label: 'Без комиссии',
-            description: {
-              name: 'Комиссия за выдачу ',
-              benefitType: 'text',
-            },
-            icon: { icon: 'MoneyIcon' },
-          },
-          {
-            label: 'Оформление',
-            description: {
-              name: 'Обеспечение ',
-              benefitType: 'text',
-            },
-            icon: { icon: 'PersonalCardIcon' },
-          },
-          {
-            label: 'Без залога ',
-            description: {
-              name: 'Единовременное перечисление ',
-              benefitType: 'text',
-            },
-            icon: { icon: 'CalendarTickIcon' },
-          },
-          {
-            label: 'Деньги за 3 дня',
-            description: {
-              name: 'Рассмотрение  ',
-              benefitType: 'text',
-            },
-            icon: { icon: 'GlobalIcon' },
-          },
-        ]}
+        benefitList={new Array(4).fill(benefitIcon)}
         version="primary"
       />
     </div>
@@ -114,38 +74,22 @@ export default {
         benefitList={[
           {
             label: 'Без комиссии',
+            description: descriptionList,
             icon: { icon: 'ClockIcon' },
-            description: {
-              bullets: true,
-              items: itemsList,
-              benefitType: 'list',
-            },
           },
           {
             label: 'Оформление по паспорту',
-            description: {
-              bullets: true,
-              items: itemsList,
-              benefitType: 'list',
-            },
+            description: descriptionList,
             icon: { icon: 'SignDocsIcon' },
           },
           {
             label: 'Без залога и поручительства',
-            description: {
-              bullets: true,
-              items: itemsList,
-              benefitType: 'list',
-            },
+            description: descriptionList,
             icon: { icon: 'ComfortableCompIcon' },
           },
           {
             label: 'Деньги за 3 дня',
-            description: {
-              bullets: true,
-              items: itemsList,
-              benefitType: 'list',
-            },
+            description: descriptionList,
             icon: { icon: 'ActualBalanceIcon', iconVersion: 'normal' },
           },
         ]}
@@ -160,38 +104,22 @@ export default {
         benefitList={[
           {
             label: 'Без комиссии',
+            description: descriptionList,
             icon: { icon: 'ClockIcon', iconVersion: 'normal' },
-            description: {
-              bullets: true,
-              items: itemsList,
-              benefitType: 'list',
-            },
           },
           {
             label: 'Оформление по паспорту',
-            description: {
-              bullets: true,
-              items: itemsList,
-              benefitType: 'list',
-            },
+            description: descriptionList,
             icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
           },
           {
             label: 'Без залога и поручительства',
-            description: {
-              bullets: true,
-              items: itemsList,
-              benefitType: 'list',
-            },
+            description: descriptionList,
             icon: { icon: 'ComfortableCompIcon' },
           },
           {
             label: 'Деньги за 3 дня',
-            description: {
-              bullets: true,
-              items: itemsList,
-              benefitType: 'list',
-            },
+            description: descriptionList,
             icon: { icon: 'ActualBalanceIcon', iconVersion: 'normal' },
           },
         ]}
@@ -205,37 +133,25 @@ export default {
         className="col-span-12"
         title="Преимущества кредита"
         benefitList={[
-          {
-            label: 'Без комиссии',
-            description: {
-              name: 'Комиссия за выдачу ',
-              benefitType: 'text',
-            },
-            icon: { icon: 'MoneyIcon' },
-          },
-          {
-            label: 'Оформление',
-            description: {
-              name: 'Обеспечение ',
-              benefitType: 'text',
-            },
-            icon: { icon: 'PersonalCardIcon' },
-          },
+          { ...benefitIcon },
+          { ...benefitIcon },
           {
             label: 'Без залога ',
             description: {
               name: 'Единовременное перечисление ',
               benefitType: 'text',
             },
-            icon: { icon: 'CalendarTickIcon', iconVersion: 'normal' },
+            icon: { icon: 'CalendarTickIcon', iconVersion: 'white' },
+            iconBgVersion: '',
           },
           {
             label: 'Деньги за 3 дня',
             description: {
-              name: 'Рассмотрение  ',
+              name: 'Рассмотрение',
               benefitType: 'text',
             },
-            icon: { icon: 'GlobalIcon', iconVersion: 'black' },
+            icon: { icon: 'GlobalIcon', iconVersion: 'white' },
+            iconBgVersion: '',
           },
         ]}
         version="secondary"