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

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.example.json

@@ -3,17 +3,7 @@
     "format": "webp",
     "size": {
       "width": 290
-    },
-    "sources": [
-      {
-        "media": 1279,
-        "size": {
-          "width": 174
-        },
-        "format": "webp",
-        "alignment": "southeast"
-      }
-    ]
+    }
   },
   "title": "Заголовок",
   "description": "Описание",

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -39,13 +39,13 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
         'border border-solid border-gray group-data-secondary:border-white/50',
         className,
       )}
-      defaultPadding="p-0"
+      padding="p-0"
       {...rest}
     >
       <BaseTile
         className="h-full"
-        padding={padding}
         defaultPadding="p-m"
+        padding={padding}
         title={
           title ? <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} /> : null
         }

package/src/components/CarouselProductCard/CarouselProductCard.example.json

@@ -5,17 +5,7 @@
       "size": {
         "width": 140,
         "height": 140
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 84
-          },
-          "format": "webp",
-          "alignment": "center"
-        }
-      ]
+      }
     },
     "title": "Заголовок 1",
     "description": "Описание 1",

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

@@ -0,0 +1,34 @@
+import type { Picture } from '../../model/Picture';
+import { CarouselProgramsCard } from './CarouselProgramsCard';
+import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
+
+const imageMonth: Picture = {
+  src: 'coin.png',
+  format: 'webp',
+  size: {
+    width: 112,
+  },
+  title: 'money',
+};
+
+const list = [
+  { title: 'От 16 до 81', description: 'платежей' },
+  {
+    title: 'От 3 до 7,5 млн руб. ',
+    description: 'остаток по счету',
+  },
+];
+
+export const BUSINESS_CARD: CarouselProgramsCardContent = {
+  title: 'Продвинутый',
+  icon: imageMonth,
+  href: 'http://rshb.ru',
+  target: '_blank',
+  list,
+};
+
+const CAROUSEL_BUSINESS_CARD = <CarouselProgramsCard className="col-span-12" {...BUSINESS_CARD} />;
+
+export default {
+  default: <div className="container grid grid-cols-12">{CAROUSEL_BUSINESS_CARD}</div>,
+};

package/src/components/CarouselProgramsCard/CarouselProgramsCard.fixture.tsx

@@ -8,8 +8,7 @@ const imageMonth: Picture = {
   src: 'coin.png',
   format: 'webp',
   size: {
-    width: 200,
-    height: 242,
+    width: 130,
   },
   title: 'money',
 };
@@ -30,12 +29,8 @@ export const BUSINESS_CARD: CarouselProgramsCardContent = {
   list,
 };
 
-const CAROUSEL_BUSINESS_CARD = <CarouselProgramsCard className="col-span-4" {...BUSINESS_CARD} />;
-const CAROUSEL_BUSINESS_CARD_SECONDARY = (
-  <CarouselProgramsCard className="col-span-4" {...BUSINESS_CARD} version="secondary" />
-);
+const CAROUSEL_BUSINESS_CARD = <CarouselProgramsCard className="col-span-6" {...BUSINESS_CARD} />;
 
 export default {
   default: <div className="container grid grid-cols-12">{CAROUSEL_BUSINESS_CARD}</div>,
-  secondary: <div className="container grid grid-cols-12">{CAROUSEL_BUSINESS_CARD_SECONDARY}</div>,
 };

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -5,8 +5,11 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
+import { cardDescriptionColor, cardTitleFont } from './programCardStyles';
 
 export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
 
@@ -15,18 +18,17 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
     return (
       <BlockWrapper
         className={style('border border-gray', className)}
-        defaultPadding="p-0"
+        defaultPadding="p-lg sm:p-0"
         {...rest}
       >
-        <LinkWrapper className="flex" href={href} target={target}>
-          <div className="w-[200px] min-w-[200px] self-center">
-            {icon?.icon ? <Img image={icon} /> : null}
-            {icon?.src ? <Img image={icon} /> : null}
+        <LinkWrapper className="sm:flex sm:items-center" href={href} target={target}>
+          <div className="min-w-[200px] flex justify-center">
+            {icon?.src || icon?.icon ? <Img image={icon} /> : null}
           </div>
-          <div className="p-8 pl-3 w-full">
-            {title ? <Heading className="mb-3.5" headingType="h5" title={title} /> : null}
+          <div className="sm:px-3 py-xl">
+            {title ? <Heading className="mb-2 sm:mb-3.5" headingType="h6" title={title} /> : null}
             {list.length ? (
-              <div className="flex flex-col gap-3">{list?.map(renderList)}</div>
+              <div className="flex flex-col gap-2 sm:gap-3">{list?.map(renderList)}</div>
             ) : null}
           </div>
         </LinkWrapper>
@@ -36,8 +38,16 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
 );
 
 const renderList = (_: HeadlineCommonProps, i: number) => (
-  <div key={String(i)} className="break-words">
-    {_.title ? <div className="text-h6">{_.title}</div> : null}
-    {_.description ? <span className="text-l-light mt-1">{_.description}</span> : null}
+  <div key={String(i)} className="flex flex-row-reverse justify-between gap-y-1 sm:flex-col">
+    {_.title ? (
+      <Text size="text-l" font={cardTitleFont}>
+        {_.title}
+      </Text>
+    ) : null}
+    {_.description ? (
+      <Paragraph size="text-l" font="font-light" color={cardDescriptionColor}>
+        {_.description}
+      </Paragraph>
+    ) : null}
   </div>
 );

package/src/components/CarouselProgramsCard/programCardStyles.mobile.ts

@@ -0,0 +1,2 @@
+export const cardTitleFont = 'font-light';
+export const cardDescriptionColor = '';

package/src/components/CarouselProgramsCard/programCardStyles.ts

@@ -0,0 +1,2 @@
+export const cardTitleFont = 'font-normal';
+export const cardDescriptionColor = 'text-secondary-text';

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -5,18 +5,7 @@
       "size": {
         "width": 290,
         "height": 290
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 174,
-            "height": 174
-          },
-          "format": "webp",
-          "alignment": "southeast"
-        }
-      ]
+      }
     },
     "title": "Заголовок 1",
     "description": "Описание 1",

package/src/components/ErrorBlock/ErrorBlock.example.json

@@ -9,17 +9,7 @@
         "format": "webp",
         "size": {
           "width": 460
-        },
-        "sources": [
-          {
-            "media": 1279,
-            "size": {
-              "width": 276
-            },
-            "format": "webp",
-            "alignment": "center"
-          }
-        ]
+        }
       }
     },
     "button": {

package/src/components/MobileAppTile/MobileAppTile.example.json

@@ -6,17 +6,7 @@
       "size": {
         "width": 529,
         "height": 345
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 360
-          },
-          "format": "webp",
-          "alignment": "center"
-        }
-      ]
+      }
     },
     "alignTitle": "left",
     "qr": null,

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -33,7 +33,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
     return (
       <BlockWrapper
         className={style('min-h-80', className)}
-        defaultPadding="p-0"
+        padding="p-0"
         version={version}
         {...rest}
       >

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

@@ -2,25 +2,16 @@
   "content": {
     "title": "Блок с картинкой",
     "description": "Описание",
+    "headlineVersion": "M",
+    "align": "text-center",
     "image": {
       "format": "webp",
       "size": {
         "width": 400,
         "height": 300
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 240
-          },
-          "format": "webp",
-          "alignment": "center"
-        }
-      ]
+      }
     },
     "version": "primary",
-    "directionRight": false,
     "benefits": [
       {
         "type": "default",
@@ -40,6 +31,10 @@
       }
     ],
     "sum": 500000,
-    "monthLimit": 25000
+    "monthLimit": 25000,
+    "imageOptions": {
+      "directionRight": false,
+      "imageAlign": "center"
+    }
   }
 }

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

@@ -10,12 +10,6 @@ const imageInsurance: Picture = {
   size: {
     width: 335,
   },
-  sources: [
-    {
-      src: 'insurance.png',
-      format: 'png',
-    },
-  ],
 };
 
 const imageMonitor: Picture = {

package/src/components/PictureText/PictureText.fixture.tsx

@@ -22,12 +22,6 @@ const imageInsurance: Picture = {
     width: 400,
     height: 300,
   },
-  sources: [
-    {
-      src: 'insurance.png',
-      format: 'png',
-    },
-  ],
 };
 
 const imageMonitor: Picture = {

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

@@ -12,17 +12,7 @@
       "size": {
         "width": 234,
         "height": 234
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 164
-          },
-          "format": "webp",
-          "alignment": "northeast"
-        }
-      ]
+      }
     },
     "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
     "isDotted": true,
@@ -34,7 +24,6 @@
     ],
     "version": "primary",
     "benefitsVersion": "normal",
-    "benefitsCountOfRow": 3,
     "benefits": [
       {
         "label": "Преимущество №1",
@@ -49,6 +38,9 @@
         }
       }
     ],
-    "directionRight": true
+    "imageOptions": {
+      "directionRight": true,
+      "imageAlign": "end"
+    }
   }
 }

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

@@ -18,12 +18,6 @@ const image: Picture = {
     width: 234,
     height: 234,
   },
-  sources: [
-    {
-      src: 'money-1.png',
-      format: 'png',
-    },
-  ],
 };
 
 const benefits: ComplexBenefitContent[] = [

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

@@ -7,19 +7,10 @@
       "format": "webp",
       "size": {
         "width": 242
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 145
-          },
-          "format": "webp",
-          "alignment": "southeast"
-        }
-      ]
+      }
     },
     "version": "primary",
+    "isTabularBenefits": true,
     "benefits": [
       {
         "type": "default",
@@ -43,6 +34,10 @@
         "version": "primary"
       }
     ],
-    "isImageOnRightSide": true
+    "imageOptions": {
+      "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>
   ),