@redneckz/wildless-cms-uni-blocks 0.12.5 → 0.12.7

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -1,9 +1,10 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
+import type { ComplexBenefitContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductTile } from './ProductTile';
-import type { Benefit, ProductTileContent } from './ProductTileContent';
+import type { ProductTileContent } from './ProductTileContent';
 
 const imageSize = {
   height: 242,
@@ -38,7 +39,7 @@ const building: Picture = {
   size: imageSize,
 };
 
-const benefits: Benefit[] = [
+const benefits: ComplexBenefitContent[] = [
   {
     type: 'default',
     label: 'до 5 млн Р',
@@ -56,7 +57,7 @@ const benefits: Benefit[] = [
   },
 ];
 
-const benefits2: Benefit[] = [
+const benefits2: ComplexBenefitContent[] = [
   {
     type: 'default',
     label: '1 год',
@@ -64,7 +65,7 @@ const benefits2: Benefit[] = [
   },
 ];
 
-const multilineBenefits: Benefit[] = [
+const multilineBenefits: ComplexBenefitContent[] = [
   {
     type: 'default',
     label: 'Широкий',
@@ -146,7 +147,7 @@ export default {
       <ProductTile
         className="col-span-6"
         title="Акция! “Пенсионный кредит”"
-        description={'Потребительский кредит на любые цели, без залога и поручительства'}
+        description="Потребительский кредит на любые цели, без залога и поручительства"
         benefits={benefits}
         buttons={buttons2}
         image={letterWithMoney}
@@ -158,7 +159,7 @@ export default {
       <ProductTile
         className="col-span-6"
         title="Кредит пенсионный"
-        description={'Для людей в возрасте до 75 лет'}
+        description="Для людей в возрасте до 75 лет"
         benefits={multilineBenefits}
         buttons={buttons2}
       />
@@ -169,7 +170,7 @@ export default {
       <ProductTile
         className="col-span-8"
         title="Кредит под залог недвижимости"
-        description={'Без переоформления залогой недвижимости на банк'}
+        description="Без переоформления залогой недвижимости на банк"
         benefits={benefits}
         buttons={buttons2}
         image={building}
@@ -181,7 +182,7 @@ export default {
       <ProductTile
         className="col-span-4"
         title="Кредит пенсионный"
-        description={'Для людей в возрасте до 75 лет'}
+        description="Для людей в возрасте до 75 лет"
         benefits={benefits}
         buttons={buttons2}
       />
@@ -192,10 +193,8 @@ export default {
       <ProductTile
         className="col-span-6"
         title="Ипотечное страхование"
-        description={'Финансовая защита заемщиков в случае непредвиденных обстоятельств'}
-        additionalDescription={
-          'Страховая сумма и страховой взнос зависит от остатка задолженности по ипотеке'
-        }
+        description="Финансовая защита заемщиков в случае непредвиденных обстоятельств"
+        additionalDescription="Страховая сумма и страховой взнос зависит от остатка задолженности по ипотеке"
         benefits={benefits2}
         buttons={buttons3}
         image={letterWithPhone}
@@ -217,11 +216,11 @@ export default {
       <ProductTile
         className="col-span-8"
         title="Кредит под залог недвижимости"
-        description={'Без переоформления залогой недвижимости на банк'}
+        description="Без переоформления залогой недвижимости на банк"
         benefits={benefits}
         buttons={buttons2}
         image={building}
-        directionRight={false}
+        imageOptions={{ directionRight: false }}
       />
     </div>
   ),

package/src/components/ProductTile/ProductTile.tsx

@@ -1,73 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
+import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { style } from '../../utils/style';
-import { Headline } from '../Headline/Headline';
-import type { Benefit, ProductTileContent } from './ProductTileContent';
-import { renderAdditionalDescription } from './renderAdditionalDescription';
-import { renderBenefit } from './renderBenefit';
-import { renderImage } from './renderImage';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { ProductTileContent } from './ProductTileContent';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
 export const ProductTile = JSX<ProductTileProps>(
   ({
-    className = '',
-    title,
+    className,
+    padding,
     headlineVersion = 'S',
-    description,
+    isTabularBenefits = true,
     additionalDescription,
-    benefits = [],
-    buttons,
-    image,
-    directionRight = true,
+    imageOptions,
     ...rest
   }) => (
-    <BlockWrapper
-      className={style(
-        'overflow-hidden box-border relative min-h-[364px] flex flex-col justify-between',
-        className,
-      )}
-      {...rest}
-    >
-      <div className={style('flex flex-col', directionRight ? '' : 'items-end')}>
-        <Headline
-          className={style('!p-0 !bg-transparent z-10', title || description ? 'mb-3.5' : '')}
-          title={title}
-          description={description}
-          headlineVersion={headlineVersion}
-          as="h2"
-          align="text-left"
-        />
-        {renderBenefits(benefits, image)}
-        {renderAdditionalDescription(additionalDescription, image)}
-      </div>
-      {renderButtonsSection(buttons, {
-        className: style('mt-5 text-l', directionRight ? '' : 'justify-end'),
-      })}
-      {renderImage(image, directionRight)}
+    <BlockWrapper className={className} padding="p-0" {...rest}>
+      <BaseProductTile
+        className="h-full"
+        defaultPadding="p-m"
+        padding={padding}
+        headlineVersion={headlineVersion}
+        isTabularBenefits={isTabularBenefits}
+        imageOptions={{ isBackground: true, ...imageOptions }}
+        {...rest}
+      >
+        {additionalDescription ? (
+          <Paragraph size="text-m" font="font-light" color="group-data-primary:text-secondary-text">
+            {additionalDescription}
+          </Paragraph>
+        ) : null}
+      </BaseProductTile>
     </BlockWrapper>
   ),
 );
-
-function renderBenefits(benefits: Benefit[], image?: Picture) {
-  if (!benefits.length) {
-    return null;
-  }
-
-  // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-  const benefitsWidth = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-
-  return (
-    <div
-      className={style(
-        'z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline',
-        benefitsWidth,
-      )}
-    >
-      {benefits.length ? benefits.map(renderBenefit) : null}
-    </div>
-  );
-}

package/src/components/ProductTile/ProductTileContent.ts

@@ -1,41 +1,10 @@
-import type { DefaultListItemType } from '../../model/DefaultListItemType';
-import type {
-  AdditionalDescriptionProps,
-  DescriptionProps,
-  HeadlineProps,
-  LabelProps,
-} from '../../model/HeadlineType';
+import type { AdditionalDescriptionProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { RichTextItem } from '../../model/RichTextItem';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-
-/**
- * @title Стандартный
- */
-type TextBenefit = DescriptionProps & LabelProps & DefaultListItemType;
-
-/**
- * @title Преимущество
- * @default{
- *  "type": "default"
- * }
- */
-export type Benefit = TextBenefit | RichTextItem;
+import { BaseProductTileContent } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
 
 /**
  * @title Продуктовая плитка
  */
 export type ProductTileContent = UniBlockContent &
-  HeadlineProps &
-  AdditionalDescriptionProps &
-  ButtonContent &
-  ImageContent & {
-    /**
-     * @title Преимущества
-     * @maxItems 7
-     */
-    benefits?: Benefit[];
-    /** @title Картинка справа/текст слева */
-    directionRight?: boolean;
-  };
+  BaseProductTileContent &
+  AdditionalDescriptionProps;

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

@@ -0,0 +1,47 @@
+import '../../setup-fixture';
+
+import { RepresentativeOfficeInfo } from './RepresentativeOfficeInfo';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { Picture } from '../../model/Picture';
+
+const BUTTON: ButtonWithIconProps = {
+  text: 'Информация о регионе',
+  target: '_blank',
+  version: 'secondary',
+  icon: { icon: 'ArrowTopRightIcon', iconVersion: 'color' },
+};
+
+const ICON: Picture = {
+  icon: 'BelarusianFlag',
+  iconVersion: 'color',
+};
+
+const DESCRIPTION = `
+<p><strong>Представительство АО «Россельхозбанк» в Республике Беларусь (г. Минск) зарегистрировано в октябре 2008 года</strong></p>
+<br>
+<p class="text-slate-600/50 mb-3">Основными задачи Представительства</p>
+<ul>
+  <li>установление и развитие деловых связей с белорусскими финансовыми институтами и компаниями АПК для реализации совместных проектов;</li>
+  <li>организация взаимодействия с государственными органами власти и международными организациями, находящимися в Республике Беларусь;</li>
+  <li>продвижение и сопровождение в Республике Беларусь российских инвестиционных проектов;</li>
+  <li>мониторинг реализации двусторонних и многосторонних соглашений, участником которых является АО «Россельхозбанк».</li>
+</ul>
+`;
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <RepresentativeOfficeInfo
+        className="col-span-12 sm:col-span-6"
+        title="Представительство в Республике Беларусь"
+        __html={DESCRIPTION}
+        address="Республика Беларусь, 220004, г. Минск, ул. Немига, д. 40"
+        telephone="(+375-17)-226-4578"
+        email="prshbrb@mail.ru"
+        button={BUTTON}
+        icon={ICON}
+        version="primary"
+      />
+    </div>
+  ),
+};

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.fixture.tsx

@@ -1,22 +1,30 @@
 import '../../setup-fixture';
 
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { RepresentativeOfficeInfo } from './RepresentativeOfficeInfo';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { Picture } from '../../model/Picture';
 
-const button: ButtonWithIconProps = {
+const BUTTON: ButtonWithIconProps = {
   text: 'Информация о регионе',
   target: '_blank',
   version: 'secondary',
   icon: { icon: 'ArrowTopRightIcon', iconVersion: 'color' },
 };
 
-const description = `
+const ICON: Picture = {
+  icon: 'BelarusianFlag',
+  iconVersion: 'color',
+};
+
+const DESCRIPTION = `
 <p><strong>Представительство АО «Россельхозбанк» в Республике Беларусь (г. Минск) зарегистрировано в октябре 2008 года</strong></p>
 <br>
-<p>Основными задачи Представительства</p>
+<p class="text-slate-600/50 mb-3">Основными задачи Представительства</p>
 <ul>
-  <li>установление и развитие деловых связей с белорусскими финансовыми институтами и компаниями АПК для реализации совместных проектов</li>
-  <li>организация взаимодействия с государственными органами власти и международными организациями, находящимися в Республике Бкларусь</li>
+  <li>установление и развитие деловых связей с белорусскими финансовыми институтами и компаниями АПК для реализации совместных проектов;</li>
+  <li>организация взаимодействия с государственными органами власти и международными организациями, находящимися в Республике Беларусь;</li>
+  <li>продвижение и сопровождение в Республике Беларусь российских инвестиционных проектов;</li>
+  <li>мониторинг реализации двусторонних и многосторонних соглашений, участником которых является АО «Россельхозбанк».</li>
 </ul>
 `;
 
@@ -24,13 +32,14 @@ export default {
   default: (
     <div className="container grid grid-cols-12">
       <RepresentativeOfficeInfo
-        className="col-span-6"
+        className="col-span-12 sm:col-span-6"
         title="Представительство в Республике Беларусь"
-        __html={description}
+        __html={DESCRIPTION}
         address="Республика Беларусь, 220004, г. Минск, ул. Немига, д. 40"
         telephone="(+375-17)-226-4578"
         email="prshbrb@mail.ru"
-        button={button}
+        button={BUTTON}
+        icon={ICON}
         version="primary"
       />
     </div>

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -30,9 +30,9 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
     ...rest
   }) => (
     <BlockWrapper className={style('box-border text-left', className)} version={version} {...rest}>
-      <div className="w-full flex justify-between">
-        {title ? <Heading headingType="h4" as="h3" className="mb-6" title={title} /> : null}
+      <div className="w-full sm:flex sm:justify-between sm:flex-row-reverse">
         {renderIconBlock(icon)}
+        {title ? <Heading headingType="h4" as="h3" className="mb-3 sm:mb-6" title={title} /> : null}
       </div>
       <div className="w-full">
         {__html ? renderDescriptionBlock(__html) : null}
@@ -50,7 +50,7 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
 );
 
 const renderIconBlock = (icon?: Picture) => (
-  <div className="self-end">
+  <div className={'w-10 h-7 sm:w-24 sm:h-16 mb-3 sm:mb-0 sm:mt-3'}>
     {icon?.src ? <Img image={icon} /> : null}
     {icon?.icon ? <Img image={icon} /> : null}
   </div>
@@ -66,7 +66,9 @@ const renderBlock = (blockName: string, data?: string, iconName?: IconName | und
   <div className="flex mb-4">
     <Icon className="pr-4" iconVersion="black" name={iconName} width="24" height="24" />
     <div className="flex flex-col first:pb-1">
-      <Text size="text-m-light">{blockName}</Text>
+      <Text size="text-m" font="font-light">
+        {blockName}
+      </Text>
       {data ? (
         <Text size="text-h6" color="text-green">
           {data}

package/src/components/SafeDepositRental/RentalPeriod.tsx

@@ -12,7 +12,7 @@ interface RentalPeriodProps {
 
 export const RentalPeriod = JSX<RentalPeriodProps>(({ days, setDays }) => (
   <div className="mb-6">
-    <span className="block text-m-light mb-[3px]">Срок аренды</span>
+    <span className="block text-m font-light mb-1">Срок аренды</span>
     <InputRange min={MIN} max={MAX} value={days} items={ITEMS} onChange={setDays} />
   </div>
 ));

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -10,6 +10,7 @@ import { HandleFormStateChange, SafeDepositRentalState } from './SafeDepositRent
 import { Region, useGetRegions } from './useGetRegions';
 import { useSafeBoxes } from './useSafeBoxes';
 import { getBranch, getCoordinates } from './utils';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 
 export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlockProps {}
 
@@ -58,7 +59,11 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
             onClick={handleShowMap}
             onChange={handleChangeSafeDepositState}
           />
-          {footnote ? <p className="text-s-light text-secondary-text">{footnote}</p> : null}
+          {footnote ? (
+            <Paragraph size="text-s" font="font-light">
+              {footnote}
+            </Paragraph>
+          ) : null}
         </div>
         {points.length && showMap ? <YandexMap points={points} className="h-[640px]" /> : null}
       </BlockWrapper>

package/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -4,6 +4,7 @@ import { RegionsAndBranches } from './RegionsAndBranches';
 import { RenderRadioButtons } from './RenderRadioButtons';
 import { RentalPeriod } from './RentalPeriod';
 import { SafeBoxCases } from './SafeBoxCases';
+import { Text } from '../../ui-kit/Text/Text';
 import type { HandleFormStateChange, SafeDepositRentalState } from './SafeDepositRentalTypes';
 import type { Region } from './useGetRegions';
 import type { Branch, SafeBoxCase, SafeBoxCaseVolume } from './useSafeBoxes';
@@ -50,7 +51,9 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
           selectedBoxSize={selectedBoxSize}
           onSelectedBoxSize={(value) => onChange({ selectedBoxSize: value })}
         />
-        <span className="text-secondary-text text-l-light">Тип договора</span>
+        <Text size="text-l" font="font-light" color="text-secondary-text">
+          Тип договора
+        </Text>
         <div className="flex justify-between items-center mt-5">
           <RenderRadioButtons />
           <Button text="Офисы на карте" version="primary" onClick={onClick} />

package/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -19,7 +19,7 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
       <div className="bg-primary-main px-10 pt-10 pb-4 text-center">
         <Img image={{ icon: 'PackA4Icon' }} width="290" height="257" />
 
-        <span className="text-s-light text-white opacity-80 mt-2 inline-block">
+        <span className="text-s font-light text-white opacity-80 mt-2 inline-block">
           На рисунки изображена пачка<br></br> листов формата А4
         </span>
       </div>
@@ -30,7 +30,7 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
 const renderTotal = (label: string, total: string | number, className = '') => {
   return (
     <div className={className}>
-      <div className="text-m-light text-secondary-text mb-1">{label}</div>
+      <div className="text-m font-light text-secondary-text mb-1">{label}</div>
       <span className="text-h3 text-primary-text">{total}</span>
     </div>
   );

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

@@ -30,6 +30,14 @@ export default {
           description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
           size="normal"
           steps={steps}
+          buttons={[
+            {
+              text: 'Отправить заявку',
+              href: 'https://www.rshb.ru/',
+              target: '_blank',
+              version: 'primary',
+            },
+          ]}
         />
       </div>
     </div>
@@ -56,23 +64,23 @@ export default {
             {
               type: 'default',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
-              icon: { icon: 'ClockIcon' },
+              icon: { src: 'bank-card.png' },
             },
             {
               type: 'default',
               label: 'В случае одобрения',
-              icon: { icon: 'SignDocsIcon' },
+              icon: { src: 'card-with-diamond.png' },
             },
             {
               type: 'default',
               label: 'Заявка на кредит',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
-              icon: { icon: 'ComfortableCompIcon' },
+              icon: { src: 'building.png' },
             },
             {
               type: 'default',
               label: 'Получение наличных',
-              icon: { icon: 'ClockIcon' },
+              icon: { src: 'globe-1.png' },
             },
           ]}
         />
@@ -142,23 +150,23 @@ export default {
             {
               type: 'default',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
-              icon: { icon: 'ClockIcon', iconVersion: 'normal' },
+              icon: { src: 'bank-card.png' },
             },
             {
               type: 'default',
               label: 'В случае одобрения',
-              icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
+              icon: { src: 'card-with-diamond.png' },
             },
             {
               type: 'default',
               label: 'Заявка на кредит',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
-              icon: { icon: 'ComfortableCompIcon', iconVersion: 'normal' },
+              icon: { src: 'building.png' },
             },
             {
               type: 'default',
               label: 'Получение наличных',
-              icon: { icon: 'ClockIcon', iconVersion: 'normal' },
+              icon: { src: 'globe-1.png' },
             },
           ]}
           version="secondary"