@redneckz/wildless-cms-uni-blocks 0.6.22 → 0.6.24

package/src/components/ProductBlock/renderBenefit.tsx

@@ -5,8 +5,8 @@ import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
 
 export const renderBenefit =
   (version: BlockVersion = 'primary', benefitsVersion: IconVersion = 'normal') =>
-  ({ icon, label, description }: BenefitItemProps, i: number) => {
-    return (
+  ({ icon, label, description }: BenefitItemProps, i: number) =>
+    (
       <BenefitItem
         key={String(i)}
         icon={icon}
@@ -16,4 +16,3 @@ export const renderBenefit =
         benefitsVersion={benefitsVersion}
       />
     );
-  };

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

@@ -1,74 +1,76 @@
 {
-  "slides": [
-    {
-      "nav": {
-        "title": "Заголовок",
-        "description": "Описание"
-      },
-      "productBlock": {
-        "title": "Продуктовая галерея",
-        "image": {
-          "format": "webp",
-          "size": {
-            "width": 608,
-            "height": 299
-          }
+  "content": {
+    "slides": [
+      {
+        "nav": {
+          "title": "Заголовок",
+          "description": "Описание"
         },
-        "version": "primary",
-        "description": "Описание",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
-        "benefits": [
-          {
-            "icon": {
-              "icon": "ActualBalanceIcon"
-            },
-            "label": "Денежное преимущество",
-            "description": "эмпирическая выгода"
+        "productBlock": {
+          "title": "Продуктовая галерея",
+          "image": {
+            "format": "webp",
+            "size": {
+              "width": 608,
+              "height": 299
+            }
           },
-          {
-            "icon": {
-              "icon": "BankIcon"
+          "version": "primary",
+          "description": "Описание",
+          "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+          "benefits": [
+            {
+              "icon": {
+                "icon": "ActualBalanceIcon"
+              },
+              "label": "Денежное преимущество",
+              "description": "эмпирическая выгода"
             },
-            "label": "Возврат %",
-            "description": "при пополнении счёта"
-          }
-        ]
-      }
-    },
-    {
-      "nav": {
-        "title": "Заголовок",
-        "description": "Описание"
+            {
+              "icon": {
+                "icon": "BankIcon"
+              },
+              "label": "Возврат %",
+              "description": "при пополнении счёта"
+            }
+          ]
+        }
       },
-      "productBlock": {
-        "title": "Продуктовая галерея",
-        "image": {
-          "format": "webp",
-          "size": {
-            "width": 608,
-            "height": 299
-          }
+      {
+        "nav": {
+          "title": "Заголовок",
+          "description": "Описание"
         },
-        "version": "primary",
-        "description": "Описание",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
-        "benefits": [
-          {
-            "icon": {
-              "icon": "BankIcon"
-            },
-            "label": "Возврат %",
-            "description": "при пополнении счёта"
+        "productBlock": {
+          "title": "Продуктовая галерея",
+          "image": {
+            "format": "webp",
+            "size": {
+              "width": 608,
+              "height": 299
+            }
           },
-          {
-            "icon": {
-              "icon": "ActualBalanceIcon"
+          "version": "primary",
+          "description": "Описание",
+          "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+          "benefits": [
+            {
+              "icon": {
+                "icon": "BankIcon"
+              },
+              "label": "Возврат %",
+              "description": "при пополнении счёта"
             },
-            "label": "Денежное преимущество",
-            "description": "эмпирическая выгода"
-          }
-        ]
+            {
+              "icon": {
+                "icon": "ActualBalanceIcon"
+              },
+              "label": "Денежное преимущество",
+              "description": "эмпирическая выгода"
+            }
+          ]
+        }
       }
-    }
-  ]
+    ]
+  }
 }

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

@@ -1,32 +1,34 @@
 {
-  "title": "Продуктовая плитка",
-  "headlineVersion": "S",
-  "description": "Описание",
-  "image": {
-    "format": "webp",
-    "size": {
-      "width": 300
-    }
-  },
-  "version": "primary",
-  "benefits": [
-    {
-      "label": "Преимущество 1",
-      "description": "Описание"
+  "content": {
+    "title": "Продуктовая плитка",
+    "headlineVersion": "S",
+    "description": "Описание",
+    "image": {
+      "format": "webp",
+      "size": {
+        "width": 300
+      }
     },
-    {
-      "label": "Преимущество 2",
-      "description": "Описание"
-    },
-    {
-      "label": "Преимущество 3",
-      "description": "Описание"
-    }
-  ],
-  "buttons": [
-    {
-      "text": "Кнопка",
-      "version": "primary"
-    }
-  ]
+    "version": "primary",
+    "benefits": [
+      {
+        "label": "Преимущество 1",
+        "description": "Описание"
+      },
+      {
+        "label": "Преимущество 2",
+        "description": "Описание"
+      },
+      {
+        "label": "Преимущество 3",
+        "description": "Описание"
+      }
+    ],
+    "buttons": [
+      {
+        "text": "Кнопка",
+        "version": "primary"
+      }
+    ]
+  }
 }

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

@@ -1,14 +1,16 @@
 {
-  "title": "Акции и спецпредложения",
-  "date": "2022-04-16",
-  "description": "Пенсионный кредит по специальной процентной ставке",
-  "headlineVersion": "M",
-  "buttons": [
-    {
-      "text": "Все акции",
-      "href": "/credits",
-      "version": "secondary"
-    }
-  ],
-  "version": "secondary"
+  "content": {
+    "title": "Акции и спецпредложения",
+    "date": "2022-04-16",
+    "description": "Пенсионный кредит по специальной процентной ставке",
+    "headlineVersion": "M",
+    "buttons": [
+      {
+        "text": "Все акции",
+        "href": "/credits",
+        "version": "secondary"
+      }
+    ],
+    "version": "secondary"
+  }
 }

package/src/components/Recommendation/Recommendation.example.json

@@ -1,54 +1,56 @@
 {
-  "title": "Блок рекомендаций",
-  "recommendations": [
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 180,
-          "height": 180
-        }
+  "content": {
+    "title": "Блок рекомендаций",
+    "recommendations": [
+      {
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 180,
+            "height": 180
+          }
+        },
+        "title": "Заголовок 1",
+        "description": "Описание 1",
+        "socialMedia": [
+          { "href": "https://t.me" },
+          { "href": "https://vk.com" },
+          { "href": "https://ok.ru" }
+        ]
       },
-      "title": "Заголовок 1",
-      "description": "Описание 1",
-      "socialMedia": [
-        { "href": "https://t.me" },
-        { "href": "https://vk.com" },
-        { "href": "https://ok.ru" }
-      ]
-    },
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 180,
-          "height": 180
-        }
+      {
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 180,
+            "height": 180
+          }
+        },
+        "title": "Заголовок 2",
+        "description": "Описание 2",
+        "socialMedia": [
+          { "href": "https://t.me" },
+          { "href": "https://vk.com" },
+          { "href": "https://ok.ru" }
+        ]
       },
-      "title": "Заголовок 2",
-      "description": "Описание 2",
-      "socialMedia": [
-        { "href": "https://t.me" },
-        { "href": "https://vk.com" },
-        { "href": "https://ok.ru" }
-      ]
-    },
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 180,
-          "height": 180
-        }
-      },
-      "title": "Заголовок 3",
-      "description": "Описание 3",
-      "socialMedia": [
-        { "href": "https://t.me" },
-        { "href": "https://vk.com" },
-        { "href": "https://ok.ru" }
-      ]
-    }
-  ],
-  "version": "primary"
+      {
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 180,
+            "height": 180
+          }
+        },
+        "title": "Заголовок 3",
+        "description": "Описание 3",
+        "socialMedia": [
+          { "href": "https://t.me" },
+          { "href": "https://vk.com" },
+          { "href": "https://ok.ru" }
+        ]
+      }
+    ],
+    "version": "primary"
+  }
 }

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

@@ -1,62 +1,64 @@
 {
-  "version": "primary",
-  "title": "Шаги",
-  "description": "Описание",
-  "showLines": true,
-  "steps": [
-    {
-      "label": "Шаг №1",
-      "description": "Описание шага №1",
-      "icon": {
-        "icon": "NewDocIcon",
-        "size": {
-          "width": 48,
-          "height": 48
+  "content": {
+    "version": "primary",
+    "title": "Шаги",
+    "description": "Описание",
+    "showLines": true,
+    "steps": [
+      {
+        "label": "Шаг №1",
+        "description": "Описание шага №1",
+        "icon": {
+          "icon": "NewDocIcon",
+          "size": {
+            "width": 48,
+            "height": 48
+          },
+          "format": "webp"
         },
-        "format": "webp"
+        "button": {
+          "text": "Кнопка",
+          "target": "_blank",
+          "version": "primary"
+        }
       },
-      "button": {
-        "text": "Кнопка",
-        "target": "_blank",
-        "version": "primary"
-      }
-    },
-    {
-      "label": "Шаг №2",
-      "icon": {
-        "icon": "PassSendIcon",
-        "size": {
-          "width": 48,
-          "height": 48
+      {
+        "label": "Шаг №2",
+        "icon": {
+          "icon": "PassSendIcon",
+          "size": {
+            "width": 48,
+            "height": 48
+          },
+          "format": "webp"
         },
-        "format": "webp"
+        "button": {
+          "text": "Кнопка",
+          "target": "_blank",
+          "version": "primary"
+        }
       },
-      "button": {
-        "text": "Кнопка",
-        "target": "_blank",
-        "version": "primary"
-      }
-    },
-    {
-      "description": "Шаг №3 без заголовка",
-      "icon": {
-        "icon": "ActualBalanceIcon",
-        "size": {
-          "width": 48,
-          "height": 48
+      {
+        "description": "Шаг №3 без заголовка",
+        "icon": {
+          "icon": "ActualBalanceIcon",
+          "size": {
+            "width": 48,
+            "height": 48
+          },
+          "format": "webp"
         },
-        "format": "webp"
-      },
-      "button": {
-        "text": "Кнопка",
-        "target": "_blank",
-        "version": "primary"
+        "button": {
+          "text": "Кнопка",
+          "target": "_blank",
+          "version": "primary"
+        }
       }
+    ],
+    "button": {
+      "text": "Кнопка",
+      "target": "_blank",
+      "version": "primary"
     }
-  ],
-  "button": {
-    "text": "Кнопка",
-    "target": "_blank",
-    "version": "primary"
   }
 }

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

@@ -136,20 +136,20 @@ export default {
           steps={[
             {
               description: 'Оставьте онлайн-заявку на потребительский кредит',
-              icon: { icon: 'ClockIcon' },
+              icon: { icon: 'ClockIcon', iconVersion: 'normal' },
             },
             {
               label: 'В случае одобрения',
-              icon: { icon: 'SignDocsIcon' },
+              icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
             },
             {
               label: 'Заявка на кредит',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
-              icon: { icon: 'ComfortableCompIcon' },
+              icon: { icon: 'ComfortableCompIcon', iconVersion: 'normal' },
             },
             {
               label: 'Получение наличных',
-              icon: { icon: 'ClockIcon' },
+              icon: { icon: 'ClockIcon', iconVersion: 'normal' },
             },
           ]}
           version="secondary"

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -36,17 +36,17 @@ const STEPS_WITH_ICONS: Step[] = [
   {
     label: 'В мобильном приложении или интернет-банке',
     description: 'Для всех клиентов Россельхозбанка',
-    icon: { icon: 'SignDocsIcon' },
+    icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
   },
   {
     label: 'Через Госуслуги',
     description: 'При наличии данных в Единой биометрической системе',
-    icon: { icon: 'ClockIcon' },
+    icon: { icon: 'ClockIcon', iconVersion: 'normal' },
   },
   {
     label: 'В офисах Россельхозбанка',
     description: 'Откройте вклад',
-    icon: { icon: 'ComfortableCompIcon' },
+    icon: { icon: 'ComfortableCompIcon', iconVersion: 'normal' },
   },
 ];
 
@@ -97,6 +97,7 @@ export default {
         {...COMMON_PROPS}
         showLines={false}
         steps={STEPS_WITH_ICONS}
+        version="secondary"
         button={{
           text: 'Отправить заявку',
           href: 'https://www.rshb.ru/',

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

@@ -8,6 +8,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
@@ -112,7 +113,7 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
       <span className={`font-medium flex self-center ${styleMap.title} ${iconTextSize}`}>
         {checkIsIconRenderable(step?.icon) ? (
           <Img
-            image={{ ...step.icon, iconVersion: STEPS_SVG_VERSION_MAP[version] }}
+            image={getIconWithVersion({ ...step.icon }, version)}
             width={iconSize}
             height={iconSize}
             asSVG

package/src/components/StepsBlock/StepsBlock.tsx

@@ -8,8 +8,10 @@ import { Img } from '../../ui-kit/Img/Img';
 import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
 import { joinList } from '../../utils/joinList';
 import { renderStepContent } from './renderStepContent';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 import type { StyleType } from './StepsBlockStyleMaps';
+import type { BlockVersion } from '../../model/BlockVersion';
 import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
@@ -58,7 +60,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
           <div className={`box-border ${titleMargin}`}>
             <div className={`flex items-center ${paddingX}`}>
               {joinList(<div className={`h-0.5 w-full bg-secondary-light ${lineOpacity}`} />)(
-                steps.map(renderStepIcon(styleMap)),
+                steps.map(renderStepIcon(styleMap, version)),
               )}
             </div>
             <div className={`flex justify-between mt-4 ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`}>
@@ -87,7 +89,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
 );
 
 const renderStepIcon =
-  (styleMap: StyleType) =>
+  (styleMap: StyleType, version?: BlockVersion) =>
   ({ icon }: Step, i: number) => {
     return (
       <div key={String(i)} className="flex flex-col items-center text-center">
@@ -96,7 +98,7 @@ const renderStepIcon =
             ${styleMap.iconBackground} ${styleMap.title}`}
         >
           {checkIsIconRenderable(icon) ? (
-            <Img image={icon} width="48" height="48" asSVG />
+            <Img image={getIconWithVersion(icon || {}, version)} width="48" height="48" asSVG />
           ) : (
             <span className={`text-h4 ${styleMap.iconText}`}>{i + 1}</span>
           )}

package/src/components/Tabs/Tabs.example.json

@@ -1,20 +1,22 @@
 {
-  "showCounter": true,
-  "tabs": [
-    {
-      "type": "group",
-      "ref": "tab1",
-      "title": "Вкладка 1"
-    },
-    {
-      "type": "group",
-      "ref": "tab2",
-      "title": "Вкладка 2"
-    },
-    {
-      "type": "group",
-      "ref": "tab3",
-      "title": "Вкладка 3"
-    }
-  ]
+  "content": {
+    "showCounter": true,
+    "tabs": [
+      {
+        "type": "group",
+        "ref": "tab1",
+        "title": "Вкладка 1"
+      },
+      {
+        "type": "group",
+        "ref": "tab2",
+        "title": "Вкладка 2"
+      },
+      {
+        "type": "group",
+        "ref": "tab3",
+        "title": "Вкладка 3"
+      }
+    ]
+  }
 }

package/src/components/Tabs/renderLinkTab.tsx

@@ -27,6 +27,7 @@ export const renderLinkTab = ({
 
   return (
     <a
+      role="tab"
       key={String(i)}
       className={`${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`}
       target={target}