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

package/src/components/PictureText/PictureText.example.json

@@ -2,6 +2,8 @@
   "content": {
     "title": "Блок с картинкой",
     "description": "Описание",
+    "headlineVersion": "M",
+    "align": "text-center",
     "image": {
       "format": "webp",
       "size": {
@@ -10,7 +12,6 @@
       }
     },
     "version": "primary",
-    "directionRight": false,
     "benefits": [
       {
         "type": "default",
@@ -30,6 +31,10 @@
       }
     ],
     "sum": 500000,
-    "monthLimit": 25000
+    "monthLimit": 25000,
+    "imageOptions": {
+      "directionRight": false,
+      "imageAlign": "center"
+    }
   }
 }

package/src/components/PictureText/PictureText.tsx

@@ -8,15 +8,26 @@ import { renderInsuranceSumMonth } from './renderInsuranceSumMonth';
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
 export const PictureText = JSX<PictureTextProps>(
-  ({ className, headlineVersion = 'M', align = 'text-center', sum, monthLimit, ...rest }) => (
-    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+  ({
+    className,
+    padding,
+    headlineVersion = 'M',
+    align = 'text-center',
+    sum,
+    monthLimit,
+    imageOptions,
+    ...rest
+  }) => (
+    <BlockWrapper className={className} padding="p-0" {...rest}>
       <BaseProductTile
         className="h-full"
+        defaultPadding="p-default"
+        padding={padding}
         headlineVersion={headlineVersion}
         align={align}
         isInsetTitle={false}
+        imageOptions={{ directionRight: false, imageAlign: 'center', ...imageOptions }}
         {...rest}
-        imageOptions={{ directionRight: false, imageAlign: 'center', ...rest.imageOptions }}
       >
         {renderInsuranceSumMonth(Number(sum), Number(monthLimit))}
       </BaseProductTile>

package/src/components/ProductBlock/ProductBlock.example.json

@@ -24,7 +24,6 @@
     ],
     "version": "primary",
     "benefitsVersion": "normal",
-    "benefitsCountOfRow": 3,
     "benefits": [
       {
         "label": "Преимущество №1",
@@ -39,6 +38,9 @@
         }
       }
     ],
-    "directionRight": true
+    "imageOptions": {
+      "directionRight": true,
+      "imageAlign": "end"
+    }
   }
 }

package/src/components/ProductBlock/ProductBlock.tsx

@@ -6,20 +6,24 @@ import { style } from '../../utils/style';
 import type { ProductBlockContent } from './ProductBlockContent';
 import { renderBackwardButton } from './renderBackwardButton';
 
-export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
+export interface ProductBlockProps extends UniBlockProps, ProductBlockContent {}
 
-export const ProductBlock = JSX<ProductBlockProps>(({ className, backwardButton, ...rest }) => (
-  <BlockWrapper
-    className={style('overflow-hidden flex flex-col gap-lg box-border', className)}
-    defaultPadding="p-default"
-    {...rest}
-  >
-    {backwardButton?.text
-      ? renderBackwardButton(
-          backwardButton,
-          !rest.version || rest.version === 'primary' ? 'primary' : 'white',
-        )
-      : null}
-    <BaseProductTile className="grow h-full" {...rest} />
-  </BlockWrapper>
-));
+export const ProductBlock = JSX<ProductBlockProps>(
+  ({ className, padding, backwardButton, ...rest }) => (
+    <BlockWrapper
+      className={style('overflow-hidden flex flex-col gap-lg box-border', className)}
+      defaultPadding="p-default"
+      padding={padding}
+      {...rest}
+    >
+      {backwardButton?.text
+        ? renderBackwardButton(
+            backwardButton,
+            !rest.version || rest.version === 'primary' ? 'primary' : 'white',
+          )
+        : null}
+
+      <BaseProductTile className="grow h-full" {...rest} />
+    </BlockWrapper>
+  ),
+);

package/src/components/ProductGallery/ProductGallery.mobile.tsx

@@ -8,20 +8,22 @@ import type { ProductGalleryContent } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-export const ProductGallery = JSX<ProductGalleryProps>(({ className, slides = [], ...rest }) => (
-  <BlockWrapper
-    className={style('overflow-hidden relative', className)}
-    defaultPadding="p-m"
-    {...rest}
-  >
-    <SwipeListControl gap={0} padding={0}>
-      {slides
-        .map((s) => s.productBlock)
-        .map((_, i) => (
-          <div key={String(i)} className="box-border h-full" role="listitem">
-            <BaseProductTile className="px-5 h-full" headlineVersion="L" {..._} {...rest} />
-          </div>
-        ))}
-    </SwipeListControl>
-  </BlockWrapper>
-));
+export const ProductGallery = JSX<ProductGalleryProps>(
+  ({ className, padding, slides = [], ...rest }) => (
+    <BlockWrapper
+      className={style('overflow-hidden relative', className)}
+      padding={padding}
+      {...rest}
+    >
+      <SwipeListControl gap={0} padding={0}>
+        {slides
+          .map((s) => s.productBlock)
+          .map((_, i) => (
+            <div key={String(i)} className="box-border h-full" role="listitem">
+              <BaseProductTile className="px-5 h-full" headlineVersion="L" {..._} {...rest} />
+            </div>
+          ))}
+      </SwipeListControl>
+    </BlockWrapper>
+  ),
+);

package/src/components/ProductGallery/ProductGallery.tsx

@@ -9,13 +9,14 @@ import type { ProductGalleryContent, ProductSlide } from './ProductGalleryConten
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
 export const ProductGallery = JSX<ProductGalleryProps>(
-  ({ className = '', slides = [], ...rest }) => {
+  ({ className = '', padding, slides = [], ...rest }) => {
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
 
     return (
       <BlockWrapper
         className={style('box-border overflow-hidden', className)}
         defaultPadding="py-default"
+        padding={padding}
         {...rest}
       >
         <div

package/src/components/ProductTile/ProductTile.example.json

@@ -10,6 +10,7 @@
       }
     },
     "version": "primary",
+    "isTabularBenefits": true,
     "benefits": [
       {
         "type": "default",
@@ -34,7 +35,9 @@
       }
     ],
     "imageOptions": {
-      "directionRight": true
+      "directionRight": true,
+      "imageAlign": "end",
+      "isBackground": true
     }
   }
 }

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>

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"