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

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"

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,3 +1,9 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
+import { Img } from '../../ui-kit/Img/Img';
 import type {
   BenefitBlockItemProps,
   BenefitsBlockContent,
@@ -5,13 +11,7 @@ import type {
   ListBenefitDef,
   TextBenefitDef,
 } from './BenefitsBlockContent';
-import { benefitImageStyles } from './benefitImageStyles';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
-import { JSX } from '@redneckz/uni-jsx';
-import { style } from '../../utils/style';
-import type { UniBlockProps } from '../../model/JSXBlock';
+import { defaultIconSize } from './defaultIconSize';
 
 interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
@@ -20,10 +20,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
     <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
       {title ? <Heading headingType="h3" as="h2" className="text-center" title={title} /> : null}
       {benefitList?.length ? (
-        <div
-          className="sm:flex sm:flex-wrap w-full sm:justify-center sm:gap-x-m gap-y-lg sm:gap-y-0 mt-8"
-          role="list"
-        >
+        <div className="flex flex-wrap w-full sm:justify-center mt-m gap-xl" role="list">
           {benefitList.map(renderBenefit)}
         </div>
       ) : null}
@@ -34,19 +31,18 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
 const renderBenefit = (benefit: BenefitBlockItemProps, i: number) => (
   <div
     key={String(i)}
-    className="flex items-center sm:basis-1/2 sm:max-w-[400px] mb-14"
+    className="flex gap-s items-center md:basis-1/2 md:max-w-[400px]"
     role="listitem"
   >
     {benefit?.icon?.icon ? (
-      <Img
-        className={style(
-          'p-3 mr-5 shrink-0 bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black',
-          benefitImageStyles,
-        )}
-        image={benefit.icon}
+      <RoundedIcon
+        className="shrink-0"
+        defaultIconSize={defaultIconSize}
+        iconBgVersion={benefit?.iconBgVersion || ''}
+        {...benefit?.icon}
       />
     ) : null}
-    {benefit?.icon?.src ? <Img className="mr-5 shrink-0" image={benefit.icon} /> : null}
+    {benefit?.icon?.src ? <Img className="shrink-0" image={benefit.icon} /> : null}
     {benefit?.label ? (
       <div className="sm:h-full">
         <Heading headingType="h6">{benefit.label}</Heading>

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -3,6 +3,7 @@ import type { LabelProps, TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
 import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { IconBgVersion } from '../../ui-kit/Icon/IconProps';
 
 /**
  * @title Пункты описания
@@ -36,6 +37,7 @@ export type BenefitBlockItemProps = LabelProps &
   IconProps & {
     /** @title Описание */
     description?: DescriptionDef;
+    iconBgVersion?: IconBgVersion;
   };
 
 /**

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

@@ -0,0 +1 @@
+export const defaultIconSize = 56;

package/src/components/BenefitsBlock/defaultIconSize.tsx

@@ -0,0 +1 @@
+export const defaultIconSize = 44;

package/src/components/Blocks.mobile.ts

@@ -1,4 +1,6 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
+import { ApplicationForm } from './ApplicationForm/ApplicationForm';
+import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { ButtonsBlock } from './ButtonsBlock/ButtonsBlock';
 import { CardTransfer } from './CardTransfer/CardTransfer';
@@ -28,9 +30,9 @@ import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
-import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 
 export const Blocks: BlocksRegistry = {
+  ApplicationForm,
   ButtonsBlock,
   BonusBenefitsBlock,
   CardTransfer,

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

@@ -15,7 +15,7 @@ const bonusBenefits: BonusBenefit[] = [
   },
   {
     title:
-      'Заполни заявление и укажи реквизиты «Молодёжной карты». Узнать реквизиты ты можешь после получения карты в офисе, мобильном приложении (нажми на карту → действия → информация → реквизиты карты) или на сайте Банка в личном кабинете',
+      'Заполни заявление и укажи реквизиты «Молодёжной карты». Узнать реквизиты ты можешь после получения карты в офисе, мобильном приложении',
     icon: { icon: 'CarIcon', iconVersion: 'normal' },
   },
   {

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

@@ -5,8 +5,8 @@ import { renderBonusBenefit } from './renderBonusBenefit';
 
 export const renderBonusBenefits = (
   bonusBenefits: BonusBenefit[],
-  columnsCount: ColumnsCount,
-  cardTextAlign: AlignType,
+  _columnsCount: ColumnsCount,
+  _cardTextAlign: AlignType,
 ) => (
   <SwipeListControl>
     {bonusBenefits.map((_, i) => renderBonusBenefit({ ..._ }, i))}

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -99,11 +99,9 @@ const renderAdditionalDescription = (additionalDescription?: string) =>
 const renderItems = (items: ListProps[], isDotted: boolean, version: BlockVersion = 'primary') =>
   items?.length ? (
     <List
-      className={style(
-        'max-w-[308px] mt-2 text-s',
-        version === 'primary' ? '!text-secondary-text' : '',
-      )}
+      className={style('max-w-[308px] mt-2', version === 'primary' ? '!text-secondary-text' : '')}
       items={items.filter((item) => item?.text).map((item) => item.text as string)}
       isDotted={isDotted}
+      listItemSize="S"
     />
   ) : null;

package/src/components/CarouselTariffsCard/CarouselTariffsCard.example.json

@@ -35,5 +35,6 @@
         }
       ]
     }
-  ]
+  ],
+  "align": "text-center"
 }

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -21,7 +21,16 @@ export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, Un
 const VISIBLE_CELLS_COUNT = 1;
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, isHighlighting = false, button, cardCells = [], ...rest }) => {
+  ({
+    className = '',
+    title,
+    align = 'text-center',
+    icon,
+    isHighlighting = false,
+    button,
+    cardCells = [],
+    ...rest
+  }) => {
     const cellsNode = cardCells.map(renderCardInfo);
     const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
     const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
@@ -34,7 +43,9 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
       >
         {isHighlighting ? renderHitIcon() : null}
         {renderIconBlock(icon)}
-        {title ? <Heading className="text-center pt-2" headingType="h5" title={title} /> : null}
+        {title ? (
+          <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
+        ) : null}
         {button ? <Button className="w-full mt-4" {...button} /> : null}
         {cardCells.length ? (
           <Foldable

package/src/components/CarouselTariffsCard/CarouselTariffsCardContent.ts

@@ -1,4 +1,5 @@
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import { AlignProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
 import type { ButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
@@ -16,7 +17,8 @@ export type TariffsCardCellProps = HeadlineCommonProps & {
  */
 export type CarouselTariffsCardContent = UniBlockContent &
   TitleProps &
-  IconProps & {
+  IconProps &
+  AlignProps & {
     /** @title Выделить карточку */
     isHighlighting?: boolean;
     /** @title Кнопка */

package/src/components/CarouselTariffsCard/renderCardInfo.tsx

@@ -2,7 +2,6 @@ import { VNode } from '../../model/VNode';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Text } from '../../ui-kit/Text/Text';
 import { TariffsCardCellProps } from './CarouselTariffsCardContent';
-import { descriptionSize } from './descriptionSize';
 
 export const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
   const { title, description, buttons } = cell;
@@ -18,7 +17,7 @@ export const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode =>
       ) : null}
       {description ? (
         <div className="mt-1">
-          <Text size={descriptionSize} color="text-primary-text">
+          <Text size="text-xl" color="text-primary-text">
             {description}
           </Text>
         </div>