@redneckz/wildless-cms-uni-blocks 0.3.75 → 0.3.77

package/mobile/src/components/Calculator/renderRate.tsx

@@ -12,9 +12,7 @@ export function renderRate({ rate, title, sup, className = '' }: rateType) {
     <div>
       <div className="text-sm font-light ml-3">{title}</div>
       <div className="flex justify-start">
-        <span
-          className={`calc-rate-text font-mohave text-[200px] leading-[250px] pr-4 mt-[-16px] ${className}`}
-        >
+        <span className={`calc-rate-text font-mohave text-title-huge pr-4 mt-[-16px] ${className}`}>
           {rateFormat}
         </span>
         {sup ? <span className="calc-rate-text text-[65px] leading-[75px]">{sup}</span> : ''}

package/mobile/src/components/Catalog/Catalog.tsx

@@ -14,12 +14,13 @@ const CARD_FULL_VIEW_COUNT = 3;
 const CARD_SHIFT = 430;
 
 export const Catalog = JSX<CatalogProps>(
-  ({ context, cards = [], className = '', title, description }) => {
+  ({ context, cards = [], className = '', title, description, anchor = null }) => {
     const [activeCardIndex, setActiveCardIndex] = context.useState(0);
 
     return (
       <section
         className={`bg-white relative font-sans p-9 overflow-hidden text-center ${className}`}
+        id={anchor}
       >
         {title ? <Heading headingType="h2" className="mb-6" title={title} /> : null}
         {description ? <Description className="mb-6" description={description} /> : null}

package/mobile/src/components/Catalog/CatalogContent.ts

@@ -22,5 +22,6 @@ export interface CatalogCardType extends HeadingContent, DescriptionContent, Ima
  */
 export type CatalogContent = HeadingContent &
   DescriptionContent & {
+    /** @title Список карточек */
     cards?: CatalogCardType[];
   };

package/mobile/src/components/ContentPage/ContentPage.page.json

@@ -2355,4 +2355,4 @@
       }
     }
   ]
-}
+}

package/mobile/src/components/GroupBlock/GroupBlock.example.json

@@ -10,19 +10,88 @@
       "blockType": "ProductBlock",
       "title": "Продуктовый блок",
       "description": "Описание текстового блока",
-      "tags": ["tag2"]
+      "tags": ["tag2"],
+      "backwardButton": {
+        "text": "Кнопка возврата",
+        "icon": { "icon": "ArrowLeftIcon" }
+      },
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 234,
+          "height": 234
+        }
+      }
     },
     {
       "blockType": "ProductTile",
       "title": "Продуктовая плитка",
       "description": "Описание текстового блока",
-      "tags": ["tag1"]
+      "tags": ["tag1"],
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 300
+        }
+      },
+      "version": "primary",
+      "benefits": [
+        {
+          "label": "Преимущество 1",
+          "description": "Описание"
+        },
+        {
+          "label": "Преимущество 2",
+          "description": "Описание"
+        },
+        {
+          "label": "Преимущество 3",
+          "description": "Описание"
+        }
+      ],
+      "buttons": [
+        {
+          "text": "Кнопка",
+          "version": "primary"
+        }
+      ]
     },
     {
       "blockType": "ProductBlock",
       "title": "Продуктовый блок",
       "description": "Описание текстового блока",
-      "tags": ["tag2"]
+      "tags": ["tag2"],
+      "headingType": "h2",
+      "backwardButton": {
+        "text": "Кнопка возврата",
+        "icon": { "icon": "ArrowLeftIcon" }
+      },
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 234,
+          "height": 234
+        }
+      },
+      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+      "isDotted": true,
+      "buttons": [
+        {
+          "text": "Кнопка",
+          "version": "secondary"
+        }
+      ],
+      "version": "primary",
+      "benefits": [
+        {
+          "label": "Преимущество №1",
+          "icon": {"icon": "ClockIcon"}
+        },
+        {
+          "label": "Преимущество №2",
+          "icon": {"icon": "SignDocsIcon"}
+        }
+      ]
     }
   ]
 }

package/mobile/src/components/GroupBlock/GroupBlockContent.ts

@@ -4,10 +4,10 @@ import type { GroupBlockDef } from './BlocksTypeProps';
  *  @title Таб
  */
 export interface GroupBlockTab {
-  /** @title Название */
-  title?: string;
   /** @title Tег */
   tag?: string;
+  /** @title Название */
+  title?: string;
 }
 
 /**

package/mobile/src/components/LinkDocs/LinkDocsContent.ts

@@ -28,7 +28,16 @@ export interface LinkDocsContent {
   title?: string;
   /** @title Описание */
   description?: string;
-  /** @title Название иконки */
+  /**
+   *  @title Иконка
+   *  @default {
+   *   "size": {
+   *     "width": 24,
+   *     "height": 24
+   *   },
+   *   "format": "webp"
+   * }
+   */
   icon?: Picture;
   /** @title Список */
   documents?: LinkDocsItem[];

package/mobile/src/components/OtherProducts/OtherProducts.example.json

@@ -7,12 +7,14 @@
         {
           "blockListType": "TextBlock",
           "title": "Текстовый блок",
-          "description": "Описание текстового блока"
+          "description": "Описание текстового блока",
+          "style": ["col-span-12"]
         },
         {
           "blockListType": "TextBlock",
           "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2"
+          "description": "Описание текстового блока №2",
+          "style": ["col-span-12"]
         }
       ]
     },
@@ -22,12 +24,14 @@
         {
           "blockListType": "TextBlock",
           "title": "Текстовый блок",
-          "description": "Описание текстового блока"
+          "description": "Описание текстового блока",
+          "style": ["col-span-12"]
         },
         {
           "blockListType": "TextBlock",
           "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2"
+          "description": "Описание текстового блока №2",
+          "style": ["col-span-12"]
         }
       ]
     },
@@ -37,12 +41,14 @@
         {
           "blockListType": "TextBlock",
           "title": "Текстовый блок",
-          "description": "Описание текстового блока"
+          "description": "Описание текстового блока",
+          "style": ["col-span-12"]
         },
         {
           "blockListType": "TextBlock",
           "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2"
+          "description": "Описание текстового блока №2",
+          "style": ["col-span-12"]
         }
       ]
     }

package/mobile/src/components/PictureText/PictureTextContent.ts

@@ -6,6 +6,7 @@ import type { Picture } from '../../model/Picture';
 export type TitleWithImageContent = HeadingContent & ImageContent;
 
 export interface PictureTextBenefit {
+  /** @title Иконка */
   icon?: Picture;
   /** @title Название */
   label?: string;

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

@@ -3,7 +3,6 @@
   "description": "Описание",
   "headingType": "h2",
   "backwardButton": {
-    "href": "https://rshb.ru",
     "text": "Кнопка возврата",
     "icon": { "icon": "ArrowLeftIcon" }
   },
@@ -12,24 +11,18 @@
     "size": {
       "width": 234,
       "height": 234
-    },
-    "alt": "",
-    "title": ""
+    }
   },
   "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
   "isDotted": true,
   "buttons": [
     {
       "text": "Кнопка",
-      "version": "secondary",
-      "target": "",
-      "icon": {
-        "alt": "",
-        "title": ""
-      }
+      "version": "secondary"
     }
   ],
   "version": "primary",
+  "benefitsVersion": "normal",
   "benefits": [
     {
       "label": "Преимущество №1",

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

@@ -26,8 +26,7 @@
   "buttons": [
     {
       "text": "Кнопка",
-      "version": "primary",
-      "target": ""
+      "version": "primary"
     }
   ]
 }

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -5,7 +5,6 @@ import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { ProductTileContent, TextBenefit } from './ProductTileContent';
@@ -33,39 +32,36 @@ export const ProductTile = JSX<ProductTileProps>(
   }) => {
     return (
       <section
-        className={`bg-white overflow-hidden text-primary-text font-sans p-9 box-border ${className} ${
+        className={`bg-white overflow-hidden text-primary-text font-sans p-9 box-border min-h-[364px] relative justify-between grid ${className} ${
           productTileStyleMap[version]
         } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
         id={anchor}
       >
-        <BaseTile
-          context={context}
-          title={
-            title ? (
-              <Heading
-                headingType={headingType}
-                as="h3"
-                title={title}
-                className={`whitespace-pre-wrap max-w-[600px]`}
-              />
-            ) : null
-          }
-          buttons={
-            buttons?.length ? (
-              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
-            ) : null
-          }
-          image={image?.src && <Img className="mt-auto ml-7" image={image} />}
-        >
+        <div className="z-[1]">
+          {title ? (
+            <Heading
+              headingType={headingType}
+              as="h3"
+              title={title}
+              className={`whitespace-pre-wrap text-h4`}
+            />
+          ) : null}
           {description ? (
-            <Description className="mt-4 max-w-[600px]" description={description} />
+            <Description className="mt-2 text-md font-light" description={description} />
           ) : null}
           {renderBenefits(benefits || [], version)}
-
           {additionalDescription
             ? renderAdditionalDescription(additionalDescription, version)
             : null}
-        </BaseTile>
+        </div>
+        {buttons?.length ? (
+          <ButtonSection
+            context={context}
+            buttons={buttons}
+            className="flex self-end mt-5 gap-4 z-[1]"
+          />
+        ) : null}
+        {image?.src ? <Img className="absolute right-0 bottom-0" image={image} /> : null}
       </section>
     );
   },
@@ -73,10 +69,12 @@ export const ProductTile = JSX<ProductTileProps>(
 
 function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
   return (
-    <div className="flex mt-5 mb-1">
-      {benefits.length ? <div className="mr-8">{benefits.map(renderBenefitLabel)}</div> : null}
+    <div className="flex mt-4">
+      {benefits.length ? (
+        <div className="mr-6 gap-2.5 text-title-2xs">{benefits.map(renderBenefitLabel)}</div>
+      ) : null}
       {benefits.length ? (
-        <div className="pt-1">
+        <div className="pt-1 text-m">
           {benefits.map((_, i) => renderBenefitDescription(_, i, version))}
         </div>
       ) : null}
@@ -86,7 +84,7 @@ function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
 
 function renderBenefitLabel(benefit: TextBenefit, i: number) {
   return (
-    <div key={String(i)} className={`text-xl font-medium ${i ? 'mt-2.5' : ''}`}>
+    <div key={String(i)} className={`${i ? 'mt-2.5' : ''}`}>
       {benefit.label}
     </div>
   );
@@ -99,7 +97,7 @@ function renderBenefitDescription(benefit: TextBenefit, i: number, version = 'pr
   };
 
   return (
-    <div key={String(i)} className={`text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
+    <div key={String(i)} className={`${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.description}
     </div>
   );
@@ -111,5 +109,5 @@ function renderAdditionalDescription(additionalDescription: string, version = 'p
     secondary: 'text-white',
   };
 
-  return <div className={`text-sm mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>;
+  return <div className={`text-m mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>;
 }

package/mobile/src/components/PromoTile/PromoTile.example.json

@@ -6,8 +6,7 @@
     {
       "text": "Все акции",
       "href": "/credits",
-      "version": "secondary",
-      "target": ""
+      "version": "secondary"
     }
   ],
   "version": "secondary"

package/mobile/src/components/StepsBlock/StepsBlock.example.json

@@ -8,19 +8,34 @@
       "label": "Шаг №1",
       "description": "Описание шага №1",
       "icon": {
-        "icon": "NewDocIcon"
+        "icon": "NewDocIcon",
+        "size": {
+          "width": 48,
+          "height": 48
+        },
+        "format": "webp"
       }
     },
     {
       "label": "Шаг №2",
       "icon": {
-        "icon": "PassSendIcon"
+        "icon": "PassSendIcon",
+        "size": {
+          "width": 48,
+          "height": 48
+        },
+        "format": "webp"
       }
     },
     {
       "description": "Шаг №3 без заголовка",
       "icon": {
-        "icon": "ActualBalanceIcon"
+        "icon": "ActualBalanceIcon",
+        "size": {
+          "width": 48,
+          "height": 48
+        },
+        "format": "webp"
       }
     }
   ]

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

@@ -5,6 +5,7 @@ import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
+import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
 import { getStyleMap } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
@@ -109,7 +110,11 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
       className={`${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
     >
       <span className={`font-medium flex self-center ${styleMap.title} ${iconTextSize}`}>
-        {(step.icon?.icon && <Img image={step.icon} width={iconSize} height={iconSize} />) || i + 1}
+        {checkIsIconRenderable(step?.icon) ? (
+          <Img image={step.icon} width={iconSize} height={iconSize} asSVG />
+        ) : (
+          <span>{i + 1}</span>
+        )}
       </span>
     </div>
   );

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -11,6 +11,17 @@ export interface Step {
   label?: string;
   /** @title Описание */
   description?: string;
+  /**
+   *  @title Иконка
+   *  @default
+   * {
+   *   "size": {
+   *     "width": 48,
+   *     "height": 48
+   *   },
+   *   "format": "webp"
+   * }
+   */
   icon?: Picture;
   button?: ButtonProps;
 }

package/mobile/src/components/Tile/Tile.example.json

@@ -7,21 +7,14 @@
     "format": "webp",
     "size": {
       "width": 445
-    },
-    "alt": "",
-    "title": ""
+    }
   },
   "isDotted": true,
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "buttons": [
     {
       "text": "Кнопка",
-      "version": "primary",
-      "target": "",
-      "icon": {
-        "alt": "",
-        "title": ""
-      }
+      "version": "primary"
     }
   ],
   "version": "primary"

package/mobile/src/model/Picture.ts

@@ -10,6 +10,12 @@ export interface Img {
   title?: string;
 }
 
+/**
+ * @title Брейкпоинт
+ * @enumNames ["1919px и меньше", "1439px и меньше", "1279px и меньше"]
+ */
+export type MediaQuery = '(max-width: 1919px)' | '(max-width: 1439px)' | '(max-width: 1279px)';
+
 export interface ImgSource {
   /** @title Иконка */
   icon?: IconName;
@@ -20,6 +26,7 @@ export interface ImgSource {
   format?: 'jpeg' | 'jpg' | 'png' | 'gif' | 'webp' | 'heif' | 'avif';
   /** @hidden */
   options?: Record<string, any>;
+  media?: MediaQuery;
   /** @title Размер изображения */
   size?: {
     /** @title Ширина */

package/mobile/src/ui-kit/BlocksList/BlocksListProps.ts

@@ -27,71 +27,93 @@ export interface BlocksCommonProps {
 
 /**
  * @title Заголовок
- * @default {"blockListType": "Headline"}
  */
 export type HeadlineBlockListDef = HeadlineContent &
-  BlocksCommonProps & { blockListType: 'Headline' };
+  BlocksCommonProps & {
+    /** @default Headline */
+    blockListType: 'Headline';
+  };
 
 /**
  * @title Список документов
- * @default {"blockListType": "LinkDocs"}
  */
 export type LinkDocsBlockListDef = LinkDocsContent &
-  BlocksCommonProps & { blockListType: 'LinkDocs' };
+  BlocksCommonProps & {
+    /** @default LinkDocs */
+    blockListType: 'LinkDocs';
+  };
 
 /**
  * @title Текстовый блок
- * @default {"blockListType": "TextBlock"}
  */
 export type TextBlockBlockListDef = TextBlockContent &
-  BlocksCommonProps & { blockListType: 'TextBlock' };
+  BlocksCommonProps & {
+    /** @default TextBlock */
+    blockListType: 'TextBlock';
+  };
 
 /**
  * @title Картинка с текстом
- * @default {"blockListType": "PictureText"}
  */
 export type PictureTextBlockListDef = PictureTextContent &
-  BlocksCommonProps & { blockListType: 'PictureText' };
+  BlocksCommonProps & {
+    /** @default PictureText */
+    blockListType: 'PictureText';
+  };
 
 /**
  * @title Продуктовый блок
- * @default {"blockListType": "ProductBlock"}
  */
 export type ProductBlockBlockListDef = ProductBlockContent &
-  BlocksCommonProps & { blockListType: 'ProductBlock' };
+  BlocksCommonProps & {
+    /** @default ProductBlock */
+    blockListType: 'ProductBlock';
+  };
 
 /**
  * @title Плитка
- * @default {"blockListType": "Tile"}
  */
-export type TileBlockListDef = TileContent & BlocksCommonProps & { blockListType: 'Tile' };
+export type TileBlockListDef = TileContent &
+  BlocksCommonProps & {
+    /** @default Tile */
+    blockListType: 'Tile';
+  };
 
 /**
  * @title Продуктовая плитка
- * @default {"blockListType": "ProductTile"}
  */
 export type ProductTileBlockListDef = ProductTileContent &
-  BlocksCommonProps & { blockListType: 'ProductTile' };
+  BlocksCommonProps & {
+    /** @default ProductTile */
+    blockListType: 'ProductTile';
+  };
 
 /**
  * @title Галерея
- * @default {"blockListType": "Gallery"}
  */
-export type GalleryBlockListDef = GalleryContent & BlocksCommonProps & { blockListType: 'Gallery' };
+export type GalleryBlockListDef = GalleryContent &
+  BlocksCommonProps & {
+    /** @default Gallery */
+    blockListType: 'Gallery';
+  };
 
 /**
  * @title Мини-галлерея
- * @default {"blockListType": "MiniGallery"}
  */
 export type MiniGalleryBlockListDef = MiniGalleryContent &
-  BlocksCommonProps & { blockListType: 'MiniGallery' };
+  BlocksCommonProps & {
+    /** @default MiniGallery */
+    blockListType: 'MiniGallery';
+  };
 
 /**
  * @title Список ссылок
- * @default {"blockListType": "LinkList"}
  */
 export type LinkListBlockListDef = LinkListContent &
-  BlocksCommonProps & { blockListType: 'LinkList' };
+  BlocksCommonProps & {
+    /** @default LinkList */
+    blockListType: 'LinkList';
+  };
 
 /**
  * @title Содержимое блока

package/mobile/src/ui-kit/Button/ButtonInner.tsx

@@ -15,7 +15,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {isWithText(props) ? (
         <div>
           <div className="text-m-2xs font-light text-left">{aboveText}</div>
-          <div className="text-button text-left">{text}</div>
+          <div className="text-base text-left">{text}</div>
         </div>
       ) : null}
       {appendRight ? appendRight : null}
@@ -30,7 +30,7 @@ const getButtonStyle = (props: ButtonInnerProps) => {
     return '';
   }
 
-  const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[18px]'}`;
+  const withTextStyle = `px-9 gap-2 ${aboveText ? 'py-2' : 'py-4'}`;
 
   return [
     'flex items-center justify-center',

package/mobile/src/ui-kit/Foldable/Foldable.tsx

@@ -59,7 +59,7 @@ export const Foldable = JSX<FoldableProps>(
             onClick={handleToggle}
           >
             <span className="pr-3">{isActive ? 'Скрыть' : foldButtonLabel}</span>
-            {icon && <Icon name={icon} iconVersion="white" width="20" height="20" asSVG />}
+            {icon ? <Icon name={icon} iconVersion="white" width="20" height="20" asSVG /> : null}
           </button>
         ) : null}
       </div>

package/mobile/src/utils/checkIsIconRenderable.tsx

@@ -0,0 +1,3 @@
+import type { Picture } from '../model/Picture';
+
+export const checkIsIconRenderable = (icon?: Picture) => Boolean(icon?.icon || icon?.src);