@redneckz/wildless-cms-uni-blocks 0.3.76 → 0.3.78

package/src/components/BonusBenefitsBlock/BonusBenefitsBlockContent.ts

@@ -1,9 +1,12 @@
 import type { Picture } from '../../model/Picture';
 
+/**
+ * @title Бонус и преимущество
+ */
 export interface BonusBenefit {
   /** @title Название */
   label?: string;
-  /** @title Бонус и преимущество */
+  /** @title Изображение */
   icon?: Picture;
 }
 
@@ -15,9 +18,6 @@ export interface BonusBenefitsBlockContent {
   title?: string;
   /** @title Подзаголовок */
   subtitle?: string;
-  /**
-   * @title Список бонусов
-   * @maxItems 8
-   */
+  /** @title Список бонусов */
   bonusBenefits?: BonusBenefit[];
 }

package/src/components/Calculator/Calculator.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { FuncReturnVoid, UniBlockProps } from '../../types';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
 import type { CalculatorBlockDef, CalculatorContent, CalculatorNav } from './CalculatorContent';
 import { renderCalculatorBlock } from './renderCalculatorBlock';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
 export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
 

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

@@ -2035,7 +2035,7 @@
         "description": "Необязательное описание",
         "calendar": [
           {
-            "blackText": "1 декабря — беспроцентный период",
+            "text": "1 декабря — беспроцентный период",
             "greenText": "начинается с первого числа каждого месяца",
             "month": [
               {
@@ -2052,7 +2052,7 @@
             ]
           },
           {
-            "blackText": "25 сентября и 25 октября — обязательный платеж 25 числа следующих месяцев",
+            "text": "25 сентября и 25 октября — обязательный платеж 25 числа следующих месяцев",
             "greenText": "(минимальный платеж, 3% от суммы задолженности)",
             "month": [
               {
@@ -2080,7 +2080,7 @@
             ]
           },
           {
-            "blackText": "25 ноября — последний день беспроцентного 3-х месячного периода",
+            "text": "25 ноября — последний день беспроцентного 3-х месячного периода",
             "greenText": "",
             "month": [
               {
@@ -2097,7 +2097,7 @@
             ]
           },
           {
-            "blackText": "",
+            "text": "",
             "greenText": "25 декабря — обязательный платеж в соответствии с тарифом",
             "month": [
               {
@@ -2355,4 +2355,4 @@
       }
     }
   ]
-}
+}

package/src/components/ExchangeRateTile/ExchangeRateTileContent.ts

@@ -1,6 +1,7 @@
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
-
 /**
- * @title Курсы валют
+ * @title Курсы обмена валют
  */
-export type ExchangeRateTileContent = HeadingContent;
+export interface ExchangeRateTileContent {
+  /** @title Заголовок */
+  title?: string;
+}

package/src/components/GracePeriod/GracePeriod.example.json

@@ -3,7 +3,7 @@
   "description": "Необязательное описание блока",
   "calendar": [
     {
-      "blackText": "1 декабря — беспроцентный период",
+      "text": "1 декабря — беспроцентный период",
       "greenText": "начинается с первого числа каждого месяца",
       "month": [
         {
@@ -21,7 +21,7 @@
       ]
     },
     {
-      "blackText": "25 сентября и 25 октября — обязательный платеж 25 числа следующих месяцев",
+      "text": "25 сентября и 25 октября — обязательный платеж 25 числа следующих месяцев",
       "greenText": "(минимальный платеж, 3% от суммы задолженности)",
       "month": [
         {
@@ -51,7 +51,7 @@
       ]
     },
     {
-      "blackText": "25 ноября — последний день беспроцентного 3-х месячного периода",
+      "text": "25 ноября — последний день беспроцентного 3-х месячного периода",
       "greenText": "",
       "month": [
         {
@@ -69,7 +69,7 @@
       ]
     },
     {
-      "blackText": "",
+      "text": "",
       "greenText": "25 декабря — обязательный платеж в соответствии с тарифом",
       "month": [
         {

package/src/components/GracePeriod/GracePeriod.fixture.tsx

@@ -54,45 +54,45 @@ export const GRACE_PERIOD: GracePeriodContent = {
   description: 'Необязательное описание блока',
   calendar: [
     {
-      blackText: '1 декабря — беспроцентный период',
+      text: '1 декабря — беспроцентный период',
       greenText: 'начинается с первого числа каждого месяца',
       month: [
         {
-          name: 'Август',
+          text: 'Август',
           image: august,
         },
       ],
     },
     {
-      blackText: '25 сентября и 25 октября — обязательный платеж 25 числа следующих месяцев',
+      text: '25 сентября и 25 октября — обязательный платеж 25 числа следующих месяцев',
       greenText: '(минимальный платеж, 3% от суммы задолженности)',
       month: [
         {
-          name: 'Сентябрь',
+          text: 'Сентябрь',
           image: september,
         },
         {
-          name: 'Октябрь',
+          text: 'Октябрь',
           image: october,
         },
       ],
     },
     {
-      blackText: '25 ноября — последний день',
+      text: '25 ноября — последний день',
       greenText: 'беспроцентного 3-х месячного периода',
       month: [
         {
-          name: 'Ноябрь',
+          text: 'Ноябрь',
           image: november,
         },
       ],
     },
     {
-      blackText: '25 декабря — обязательный платеж в соответствии с тарифом',
+      text: '25 декабря — обязательный платеж в соответствии с тарифом',
       greenText: '',
       month: [
         {
-          name: 'Декабрь',
+          text: 'Декабрь',
           image: december,
         },
       ],

package/src/components/GracePeriod/GracePeriod.tsx

@@ -49,7 +49,7 @@ const renderCalendar = (calendar) => {
           >
             <div className="flex">{renderMonthImages(_)}</div>
             <div className="font-light text-sm text-primary-text mt-3">
-              <span>{_.blackText}</span>&thinsp;
+              <span>{_.text}</span>&thinsp;
               <span className="text-primary-main">{_.greenText}</span>
             </div>
           </div>
@@ -60,9 +60,9 @@ const renderCalendar = (calendar) => {
 };
 
 const renderMonthNames = (item, colSize) =>
-  item.month.map((_) => (
-    <div key={`monthName-${_.name}`} style={{ flexBasis: `${colSize}%` }}>
-      {_.name}
+  item.month.map((_, i) => (
+    <div key={`monthName-${i}`} style={{ flexBasis: `${colSize}%` }}>
+      {_.text}
     </div>
   ));
 const renderMonthImages = (item) =>

package/src/components/GracePeriod/GracePeriodContent.ts

@@ -3,7 +3,7 @@ import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 
 interface Month {
   /** @title Название месяца */
-  name?: string;
+  text?: string;
   /**
    * @title Изображение календарного месяца
    * @default
@@ -22,7 +22,7 @@ interface CalendarItem {
   /** @title Месяц */
   month?: Month[];
   /** @title Основной текст */
-  blackText?: string;
+  text?: string;
   /** @title Вспомогательный текст */
   greenText?: string;
 }

package/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/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/src/components/GroupBlock/GroupBlockTabs.tsx

@@ -44,7 +44,9 @@ const renderTab =
         <div className="flex flex-1 items-center justify-center">
           {tab?.title ? <h3 className={tabText}>{tab?.title}</h3> : null}
           {isShowCounter ? (
-            <div className={`flex items-center justify-center ml-8 ${counterBlockStyle}`}>
+            <div
+              className={`flex items-center justify-center ml-8 text-s-bold ${counterBlockStyle}`}
+            >
               <span>{tab.count}</span>
             </div>
           ) : null}

package/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/src/components/MobileAppTile/MobileAppTile.example.json

@@ -1,4 +1,13 @@
-{
+{ 
+  "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
+  "image": {
+    "src": "icon-phone.png",
+    "format": "webp",
+    "size": {
+      "width": 529,
+      "height": 345
+    }
+  },
   "qr": {
     "href": "https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true",
     "src": "data:image/png;base64,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"
@@ -22,5 +31,6 @@
     }
   ],
   "title": "Мобильное приложение",
-  "description": "Загрузить для IOS и Android"
+  "description": "Загрузить для IOS и Android",
+  "version": "primary"
 }

package/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/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/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/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -2,7 +2,7 @@ import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductBlock } from './ProductBlock';
-import type { ProductBlockContent, ProductBlockBenefit } from './ProductBlockContent';
+import type { ProductBlockBenefit, ProductBlockContent } from './ProductBlockContent';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -18,7 +18,7 @@ const benefits: ProductBlockBenefit[] = [
   {
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
-    icon: { icon: 'EmptyWalletIcon', iconVersion: 'white' },
+    icon: { icon: 'CalendarTickIcon', iconVersion: 'white' },
   },
   {
     label: 'От 16,9%',

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

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

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

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

package/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/src/components/StepsBlock/StepsBlock.mobile.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/src/components/StepsBlock/StepsBlock.tsx

@@ -5,7 +5,9 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { joinList } from '../../utils/joinList';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
-import { getStyleMap, StyleType } from './StepsBlockStyleMaps';
+import type { StyleType } from './StepsBlockStyleMaps';
+import { getStyleMap } from './StepsBlockStyleMaps';
+import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
@@ -63,19 +65,23 @@ export const StepsBlock = JSX<StepsBlockProps>(
   },
 );
 
-const renderStepIcon = (styleMap: StyleType) => (step: Step, i: number) => {
-  return (
-    <div key={String(i)} className="flex flex-col items-center text-center relative">
-      <div
-        className={`h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 ${styleMap.iconBackground}`}
-      >
-        {(step.icon?.icon && <Img image={step.icon} width="48" height="48" />) || (
-          <span className={`font-normal text-title-sm ${styleMap.title}`}>{i + 1}</span>
-        )}
+const renderStepIcon =
+  (styleMap: StyleType) =>
+  ({ icon }: Step, i: number) => {
+    return (
+      <div key={String(i)} className="flex flex-col items-center text-center relative">
+        <div
+          className={`h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 ${styleMap.iconBackground}`}
+        >
+          {checkIsIconRenderable(icon) ? (
+            <Img image={icon} width="48" height="48" asSVG />
+          ) : (
+            <span className={`font-normal text-title-sm ${styleMap.title}`}>{i + 1}</span>
+          )}
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  };
 
 const renderStepTitle = (styleMap: StyleType, isMainButton: boolean) => (step: Step, i: number) => {
   return (

package/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;
 }