@redneckz/wildless-cms-uni-blocks 0.4.3 → 0.4.4

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.fixture.tsx

@@ -1,8 +1,8 @@
 import { context } from '../../react/setup-fixture';
-import type { ButtonCommonProps } from '../../ui-kit/Button/Button';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { InsuranceAmountBlock } from './InsuranceAmountBlock';
 
-const buttonPrimary: ButtonCommonProps = {
+const buttonPrimary: ButtonWithIconProps = {
   href: '/insurance',
   text: 'Выбрать программу',
   target: '_blank',

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -18,9 +18,9 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
         className={`box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`}
         {...rest}
       >
-        {title ? <Heading className="text-center" title={title} headingType="h3" /> : null}
+        {title ? <Heading className="text-center mb-8" title={title} headingType="h3" /> : null}
         {insuranceTabs?.length > 1 ? (
-          <div className="p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]">
+          <div className="p-1.5 bg-secondary-light w-fit mx-auto mb-7 rounded-md">
             {insuranceTabs.map((item, i) =>
               renderNavButton({
                 title: item?.title,

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -45,7 +45,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
 
     return (
       <section role="listitem" className={`min-w-full text-center ${className}`}>
-        <div className="relative mt-7 overflow-hidden">
+        <div className="relative overflow-hidden">
           {galleryLength
             ? renderGallery({
                 tabsShift,
@@ -82,13 +82,14 @@ function renderGallery({
   setActiveSlideIndex,
 }: InsuranceGalleryProps) {
   const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
+  const cardsAlignStyle = cards.length > 2 ? 'justify-start' : 'justify-center';
 
   return (
     <div
       style={{ transform: `translateX(-${tabsShiftWidth}px)` }}
       className="duration-1000 px-[50px]"
     >
-      <div className="w-full flex flex-nowrap gap-3.5 pb-[38px]">
+      <div className={`w-full flex flex-nowrap gap-3.5 pb-12 ${cardsAlignStyle}`}>
         {cards.map((slide, i) =>
           renderSlide({
             slide,
@@ -118,10 +119,10 @@ function renderSlide({ slide, i, activeSlideIndex, onClick }: InsuranceSlideProp
     >
       {slide?.icon ? (
         <Img
-          className="p-3 rounded-full bg-secondary-light mr-[30px]"
+          className="p-6 rounded-full bg-secondary-light mr-[30px]"
           image={slide.icon}
-          width="70"
-          height="70"
+          width="108"
+          height="108"
         />
       ) : null}
 

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

@@ -1,4 +1,4 @@
-{ 
+{
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "image": {
     "format": "webp",
@@ -8,7 +8,6 @@
     }
   },
   "qr": {
-    "href": "https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true",
     "src": "data:image/png;base64,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"
   },
   "buttons": [

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
+import type { MobileAppTileContent } from './MobileAppTileContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -8,15 +8,10 @@ import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
-import type { MobileAppTileContent } from './MobileAppTileContent';
+import { VersionStyleMap } from '../../model/BlockVersion';
 
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
-const mobileAppStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const MobileAppTile = JSX<MobileAppTileProps>(
   ({
     className = '',
@@ -32,13 +27,14 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
   }) => {
     const textColorClass = version === 'primary' ? 'text-primary-text' : '';
     const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
+    const buttonsWithClass = buttons?.map((_) => ({ ..._, className: 'min-w-[168px]' }));
 
     return (
       <BlockWrapper
         context={context}
         className={`flex justify-between font-sans p-9 box-border relative min-h-[320px]
         ${getTileMinHeight(className)}
-        ${mobileAppStyleMap[version]}
+        ${VersionStyleMap[version]}
         ${className}`}
         {...rest}
       >
@@ -58,16 +54,16 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
           }
           buttons={
             buttons?.length ? (
-              <ButtonSection context={context} buttons={buttons} className="flex mt-8 gap-4" />
+              <ButtonSection context={context} buttons={buttonsWithClass} className="flex gap-4" />
             ) : null
           }
         >
           <div className="flex flex-1 items-center">
-            {qr?.src && (
+            {qr?.src ? (
               <div className={`flex justify-center mr-5 bg-white rounded-md ${containerStyle}`}>
-                <Img image={qr} />
+                <Img className="w-fit" image={qr} />
               </div>
-            )}
+            ) : null}
             {renderList(version, items)}
           </div>
         </BaseTile>

package/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -15,6 +15,7 @@ export type MobileAppTileContent = HeadlineCommonProps &
   ListContent &
   ImageContent & {
     // TODO: description для мобильной версии
+    /** @title QR-код */
     qr?: Picture;
     /** @title Ссылка */
     href?: string; // TODO: для мобильной версии

package/src/components/Navigation/Navigation.tsx

@@ -3,7 +3,7 @@ import { useLink } from '../../hooks/useLink';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import type { UniBlockProps } from '../../types';
-import { NavigationContent } from './NavigationContent';
+import type { NavigationContent } from './NavigationContent';
 import { NavigationItem } from './NavigationItem';
 
 export interface NavigationProps extends NavigationContent, UniBlockProps {}

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -12,10 +12,7 @@ export interface BlockItemCommonProps {
   label?: string;
   /** @title Отображать в раскрытом виде */
   isUnfolded?: boolean;
-  /**
-   * @title Блоки
-   * @maxItems 10
-   */
+  /** @title Блоки */
   blocks?: BlockDef[];
 }
 

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

@@ -63,7 +63,7 @@ export const INSURANCE_TEXT: PictureTextContent = {
       icon: { icon: 'ShieldTickIcon' },
     },
     {
-      label: 'Сокращение численности работников организации',
+      label: 'Сокращение численности работников организации и другой текст для теста длинны текста',
       icon: { icon: 'ShieldTickIcon' },
     },
     {

package/src/components/PictureText/PictureText.tsx

@@ -8,14 +8,10 @@ import { Img } from '../../ui-kit/Img/Img';
 import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
 import { Headline } from '../Headline/Headline';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { VersionStyleMap } from '../../model/BlockVersion';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
-const pictureTextStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const PictureText = JSX<PictureTextProps>(
   ({
     className = '',
@@ -32,7 +28,7 @@ export const PictureText = JSX<PictureTextProps>(
   }) => {
     return (
       <BlockWrapper
-        className={`relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`}
+        className={`relative font-sans p-14 ${VersionStyleMap[version]} ${className}`}
         context={context}
         {...rest}
       >

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

@@ -2,12 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { ProductBlockInner } from './ProductBlockInner';
 import type { UniBlockProps } from '../../types';
 import type { ProductBlockContent } from './ProductBlockContent';
-import type { BlockVersion } from '../../model/BlockVersion';
-
-const productBlockStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
+import { VersionStyleMap } from '../../model/BlockVersion';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
@@ -15,9 +10,7 @@ export const ProductBlock = JSX<ProductBlockProps>((props /* Get rid of image an
   const { className = '', version = 'primary' } = props;
 
   return (
-    <section
-      className={`font-sans bg-white px-4 py-6 ${productBlockStyleMap[version]} ${className}`}
-    >
+    <section className={`font-sans bg-white px-4 py-6 ${VersionStyleMap[version]} ${className}`}>
       <ProductBlockInner {...props} />
     </section>
   );

package/src/components/ProductBlock/ProductBlock.tsx

@@ -2,20 +2,16 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
+import type { ProductBlockContent } from './ProductBlockContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Breadcrumb } from '../../ui-kit/Breadcrumb';
 import { joinList } from '../../utils/joinList';
-import type { ProductBlockContent } from './ProductBlockContent';
 import { ProductBlockInner } from './ProductBlockInner';
 import { renderBackwardButton } from './renderBackwardButton';
+import { VersionStyleMap } from '../../model/BlockVersion';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
-const productBlockStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 const breadcrumbsStyleMap: Record<BlockVersion, string> = {
   primary: 'text-secondary-text',
   secondary: 'text-white/80',
@@ -36,7 +32,7 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
   return (
     <BlockWrapper
       context={context}
-      className={`font-sans overflow-hidden p-[50px] flex flex-col box-border min-h-[528px] ${productBlockStyleMap[version]} ${className}`}
+      className={`font-sans overflow-hidden p-[50px] flex flex-col box-border min-h-[454px] ${VersionStyleMap[version]} ${className}`}
       {...otherProps}
     >
       {backwardButton?.text

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -2,15 +2,26 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { ButtonContent, BackwardButtonProps } from '../../ui-kit/Button/ButtonProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import type { Picture } from '../../model/Picture';
 
 export type ProductBlockInnerContent = HeadlineProps &
   ListContent &
-  ButtonContent &
-  ImageContent & {
+  ButtonContent & {
+    /**
+     *  @title Иконка
+     *  @default
+     * {
+     *   "size": {
+     *     "width": 608,
+     *     "height": 299
+     *   },
+     *   "format": "webp"
+     * }
+     */
+    image?: Picture;
     /**
      * @title Список преимуществ
      * @minItems 2

package/src/components/ProductGallery/ProductGallery.example.json

@@ -16,7 +16,23 @@
         },
         "version": "primary",
         "description": "Описание",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+        "benefits": [
+          {
+            "icon": {
+              "icon": "ActualBalanceIcon"
+            },
+            "label": "Денежное преимущество",
+            "description": "эмпирическая выгода"
+          },
+          {
+            "icon": {
+              "icon": "BankIcon"
+            },
+            "label": "Возврат %",
+            "description": "при пополнении счёта"
+          }
+        ]
       }
     },
     {
@@ -35,7 +51,23 @@
         },
         "version": "primary",
         "description": "Описание",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+        "benefits": [
+          {
+            "icon": {
+              "icon": "BankIcon"
+            },
+            "label": "Возврат %",
+            "description": "при пополнении счёта"
+          },
+          {
+            "icon": {
+              "icon": "ActualBalanceIcon"
+            },
+            "label": "Денежное преимущество",
+            "description": "эмпирическая выгода"
+          }
+        ]
       }
     }
   ]

package/src/components/ProductGallery/ProductGallery.tsx

@@ -2,10 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
-import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 import type { ProductGalleryContent } from './ProductGalleryContent';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+import { VersionStyleMap } from '../../model/BlockVersion';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
@@ -14,21 +15,11 @@ type StyleType = {
   text: string;
 };
 
-const productGalleryStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 const productBlockStyleMap: Record<BlockVersion, StyleType> = {
   primary: { title: 'text-secondary-text', text: 'text-secondary-text' },
   secondary: { title: 'text-white', text: 'text-white/80' },
 };
 
-const productSlideStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const ProductGallery = JSX<ProductGalleryProps>(
   ({ className = '', context, slides = [], version = 'primary', ...rest }) => {
     const galleryNav = slides.map((s) => s.nav);
@@ -39,7 +30,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
       <BlockWrapper
         context={context}
         className={`box-border pt-[50px] overflow-hidden relative font-sans w-100 ${className}
-        ${productGalleryStyleMap[version]}`}
+        ${VersionStyleMap[version]}`}
         {...rest}
       >
         <div
@@ -78,7 +69,7 @@ function renderProductBlock(block: ProductBlockInnerContent, i: number, context)
     >
       <div className="flex grow">
         <ProductBlockInner
-          className={`pl-[50px] z-[1] ${additionalClass}`}
+          className={`pl-[50px] z-10 ${additionalClass}`}
           context={context}
           textBlockClassName="mb-[154px]"
           {...block}
@@ -95,7 +86,7 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick, version }) {
   const btnClassName = isActiveBtn
     ? 'bg-white shadow-dark-blue/42 w-[354px] min-w-[354px] border-none'
     : `min-w-[277px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10
-      ${productSlideStyleMap[version]}`;
+      ${VersionStyleMap[version]}`;
   const btnTitleClassName = isActiveBtn
     ? 'text-primary-text text-h6'
     : `text-l ${productBlockStyleMap[version].title}`;

package/src/components/ProductGallery/ProductGalleryBlock.tsx

@@ -1,14 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 import type { HeadlineProps } from '../../model/HeadlineType';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
-
-const productGalleryStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
+import { VersionStyleMap } from '../../model/BlockVersion';
 
 export interface ProductGalleryBlockProps extends UniBlockProps {
   headlineVersion?: HeadlineProps;
@@ -21,7 +16,7 @@ export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
 
     return (
       <section
-        className={`flex grow-0 shrink-0 basis-full px-4 pt-6 ${productGalleryStyleMap[version]} ${className}`}
+        className={`flex grow-0 shrink-0 basis-full px-4 pt-6 ${VersionStyleMap[version]} ${className}`}
         role="listitem"
       >
         <div className="flex grow">

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

@@ -1,32 +1,40 @@
 import { context } from '../../react/setup-fixture';
-
 import type { Picture } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductTile } from './ProductTile';
 import type { ProductTileContent } from './ProductTileContent';
 
+const imageSize = {
+  height: 242,
+  width: 242,
+};
+
 const cardWithMoney: Picture = {
   src: 'card-with-diamond.png',
   alt: 'Кредиты в РСХБ',
   format: 'webp',
+  size: imageSize,
 };
 
 const letterWithMoney: Picture = {
   src: 'letter-with-money.png',
   alt: 'Пенсионный кредит в РСХБ',
   format: 'webp',
+  size: imageSize,
 };
 
 const letterWithPhone: Picture = {
   src: 'letter-with-phone.png',
   alt: 'Пенсионный кредит в РСХБ',
   format: 'webp',
+  size: imageSize,
 };
 
 const building: Picture = {
   src: 'building.png',
   alt: 'Кредит под залог недвижимости в РСХБ',
   format: 'webp',
+  size: imageSize,
 };
 
 const benefits = [
@@ -51,6 +59,21 @@ const benefits2 = [
   },
 ];
 
+const multilineBenefits = [
+  {
+    label: 'Широкий',
+    description: 'выбор платёжных систем',
+  },
+  {
+    label: 'Специальные',
+    description: 'условия по снятию наличных условия по снятию наличных',
+  },
+  {
+    label: '0,5 балла',
+    description: '«Урожай» за 100 рублей «Урожай» за 100 рублей',
+  },
+];
+
 const buttons: ButtonProps[] = [
   {
     text: 'Подробнее',
@@ -159,4 +182,15 @@ export default {
       />
     </div>
   ),
+  'stretching with long description': (
+    <div className="container grid grid-cols-12">
+      <ProductTile
+        context={context}
+        className="col-span-6"
+        {...PRODUCT_TILE}
+        benefits={multilineBenefits}
+        title="Многострочные преимущества"
+      />
+    </div>
+  ),
 };