@redneckz/wildless-cms-uni-blocks 0.3.46 → 0.3.49

package/mobile/src/components/NavigatorTabs/NavigatorTabItem.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { NavigatorTab } from './NavigatorTabsContent';
+import type { LinkProps } from '../../model/LinkProps';
 
-export interface NavigatorTabItemProps extends NavigatorTab {
+export interface NavigatorTabItemProps extends LinkProps {
   active?: boolean;
   className?: string;
   onClick?: (ev: MouseEvent) => void;
@@ -11,9 +11,9 @@ const TEXT_CLASSES = 'font-sans font-normal text-sm';
 const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
 
 export const NavigatorTabItem = JSX<NavigatorTabItemProps>(
-  ({ className = '', label, active, children, onClick, href, target = '_self' }) => (
+  ({ className = '', text, active, children, onClick, href, target = '_self' }) => (
     <a className={getLinkClasses(className, active)} target={target} href={href} onClick={onClick}>
-      <span className={getTextClasses(active)}>{label || children}</span>
+      <span className={getTextClasses(active)}>{text || children}</span>
     </a>
   ),
 );

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

@@ -1,7 +1,7 @@
 {
   "navigatorTabs": [
-    { "label": "Tab1", "href": "#tab1" },
-    { "label": "Tab2", "href": "#tab2" },
-    { "label": "Link", "href": "https://rshb.ru", "target": "_blank" }
+    { "text": "Таб 1", "href": "#tab1", "target": "_self" },
+    { "text": "Таб 2", "href": "#tab2", "target": "_self" },
+    { "text": "Ссылка", "href": "https://rshb.ru", "target": "_blank" }
   ]
 }

package/mobile/src/components/NavigatorTabs/NavigatorTabs.tsx

@@ -1,15 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
-import { getHash, isURL } from '../../utils/url';
-import type { Router } from '../ContentPage/ContentPageContext';
+import { getHash } from '../../utils/url';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { NavigatorTabItem } from './NavigatorTabItem';
-import type { NavigatorTab, NavigatorTabsContent } from './NavigatorTabsContent';
+import type { NavigatorTabsContent } from './NavigatorTabsContent';
 
 export interface TabsBlockProps extends UniBlockProps, NavigatorTabsContent {}
 
 export const NavigatorTabs = JSX<TabsBlockProps>(
   ({ className = '', navigatorTabs, context, anchor = null }) => {
-    const router = context.useRouter();
     const href = globalThis.location?.href; // TODO: remove globalThis, use href from router
 
     return (
@@ -17,13 +18,16 @@ export const NavigatorTabs = JSX<TabsBlockProps>(
         className={`sticky top-0 z-20 box-border flex gap-x-1 h-12 ${className}`}
         id={anchor}
       >
-        {navigatorTabs ? navigatorTabs.map(renderTab(href, router)) : null}
+        {navigatorTabs ? navigatorTabs.map(renderTab(context, href)) : null}
       </section>
     );
   },
 );
 
-const renderTab = (href?: string, router?: Router) => (tab: NavigatorTab, i: number) => {
+const renderTab = (context: ContentPageContext, href?: string) => (tab: LinkProps, i: number) => {
+  const { useRouter, handlerDecorator } = context;
+  const router = useRouter();
+
   const hash = getHash(href);
   const active = hash ? tab.href === hash : i === 0;
 
@@ -31,14 +35,7 @@ const renderTab = (href?: string, router?: Router) => (tab: NavigatorTab, i: num
     <NavigatorTabItem
       key={tab.href}
       active={active}
-      onClick={() => handleRoute(router, tab.href)}
-      {...tab}
+      {...useLink({ router, handlerDecorator }, tab)}
     />
   );
 };
-
-const handleRoute = (router?: Router, href?: string) => {
-  if (isURL(href)) return; // if href if full URL - move to HTML href action, do not touch router
-
-  router?.replace(href || '');
-};

package/mobile/src/components/NavigatorTabs/NavigatorTabsContent.ts

@@ -1,14 +1,4 @@
-/**
- * @title Таб
- */
-export interface NavigatorTab {
-  /** @title Название */
-  label?: string;
-  /** @title Якорь */
-  href?: string;
-  /** @title Таргет (target) */
-  target?: string;
-}
+import type { LinkProps } from '../../model/LinkProps';
 
 /**
  * @title Блок табов
@@ -18,5 +8,5 @@ export interface NavigatorTabsContent {
    * @title Список табов
    * @minItems 3
    */
-  navigatorTabs?: NavigatorTab[];
+  navigatorTabs?: LinkProps[];
 }

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

@@ -15,6 +15,7 @@ export function renderBackwardButton(
         rounded
         className="w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3"
         ariaLabel={button?.text}
+        href={button?.href}
       >
         <Img className="w-4 h-4" image={button?.icon || { icon: 'ArrowLeftIcon' }} asSVG />
       </Button>

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

@@ -1,5 +1,6 @@
 {
   "title": "Продуктовая плитка",
+  "headingType": "h3",
   "description": "Описание",
   "image": {
     "format": "webp",

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

@@ -6,7 +6,6 @@ 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 { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
@@ -24,6 +23,7 @@ export const ProductTile = JSX<ProductTileProps>(
     context,
     className = '',
     title,
+    headingType = 'h3',
     description,
     benefits,
     buttons,
@@ -43,7 +43,8 @@ export const ProductTile = JSX<ProductTileProps>(
           title={
             title && (
               <Heading
-                headingType={getTileHeadingType(className)}
+                headingType={headingType}
+                as="h3"
                 title={title}
                 className={`whitespace-pre-wrap max-w-[600px]`}
               />

package/mobile/src/components/ProductTile/ProductTileContent.ts

@@ -1,7 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { TextBenefit } from '../BenefitsBlock/BenefitsBlockContent';
 
@@ -9,6 +9,7 @@ import type { TextBenefit } from '../BenefitsBlock/BenefitsBlockContent';
  * @title Продуктовая плитка
  */
 export type ProductTileContent = HeadingContent &
+  HeadingTypeContent &
   DescriptionContent &
   ButtonContent &
   ImageContent & {

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

@@ -1,5 +1,6 @@
 {
   "title": "Плитка",
+  "headingType": "h3",
   "titleSize": "M",
   "description": "Описание",
   "image": {

package/mobile/src/components/Tile/Tile.tsx

@@ -7,7 +7,6 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
-import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { TileContent } from './TileContent';
@@ -25,6 +24,7 @@ export const Tile = JSX<TileProps>((props) => {
   const {
     context,
     title,
+    headingType = 'h3',
     description,
     items,
     children,
@@ -49,7 +49,7 @@ export const Tile = JSX<TileProps>((props) => {
         title={
           title && (
             <Heading
-              headingType={getTileHeadingType(className)}
+              headingType={headingType}
               as="h3"
               title={title}
               className={`whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
@@ -66,7 +66,7 @@ export const Tile = JSX<TileProps>((props) => {
       >
         {description && (
           <Description
-            className="mt-4 max-w-[600px] text-title-new-sm font-light"
+            className="max-w-[600px] text-title-new-sm font-light"
             description={description}
           />
         )}
@@ -81,7 +81,7 @@ function renderList(items, version) {
   return items?.length ? (
     <List
       items={items}
-      itemClassName="text-title-new-sm font-light mt-2.5 first:mt-0"
+      itemClassName="text-title-2xs font-light mt-2"
       version={version === 'primary' ? 'tile' : 'tile-white'}
     />
   ) : null;

package/mobile/src/components/Tile/TileContent.ts

@@ -1,7 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
@@ -9,6 +9,7 @@ import type { ListContent } from '../../ui-kit/List/ListContent';
  * @title Плитка
  */
 export type TileContent = HeadingContent &
+  HeadingTypeContent &
   DescriptionContent &
   ListContent &
   ButtonContent &

package/mobile/src/types.ts

@@ -2,7 +2,11 @@ import type { BlockContent } from './components/BlockContent';
 import type { ContentPageContext } from './components/ContentPage/ContentPageContext';
 import type { BlockVersion } from './model/BlockVersion';
 
-export type ColorPalette = 'pc' | 'bc' | 'eo' | 'eo2' | 'eo3' | 'eo4';
+/**
+ * @title Цветовая палитра
+ * @enumNames ["", "Частным клиентам", "Бизнес клиентам", "Экосистема Своё"]
+ */
+export type ColorPalette = '' | 'pc' | 'bc' | 'eo';
 
 export interface BaseBlockDef {
   type?: string;

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

@@ -14,7 +14,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-sm text-left">{text}</div>
+          <div className="text-button text-left">{text}</div>
         </div>
       ) : null}
     </div>

package/mobile/src/ui-kit/List/ListItem.tsx

@@ -15,8 +15,8 @@ const LIST_STYLE_CLASSES = {
   primary: 'rounded-full inline-block mr-3 mt-2',
   secondary: 'rounded-full inline-block mr-3 mt-2',
   gray: 'rounded-full inline-block mr-3 mt-2',
-  tile: 'rounded-full inline-block mr-4',
-  'tile-white': 'rounded-full inline-block mr-4',
+  tile: 'rounded-full inline-block mr-4 mt-3',
+  'tile-white': 'rounded-full inline-block mr-4 mt-3',
 };
 
 const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.46",
+  "version": "0.3.49",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Accordion/AccordionItem.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import { Img } from '../../ui-kit/Img/Img';
 import type { AccordionItemCommonProps } from './AccordionContent';
 import { AccordionItemInner } from './AccordionItemInner';
 import { useActiveHandler } from './useActiveHandler';
-import { Img } from '../../ui-kit/Img/Img';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
@@ -23,7 +23,9 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, isExpanded, block
         onClick={handleToggle}
       >
         <span className={`text-xl pr-2.5 font-medium`}>{label}</span>
-        {hasContent ? <Img image={icon} width="24" height="24" asSVG /> : null}
+        {hasContent ? (
+          <Img image={icon} className="text-primary-main" width="24" height="24" asSVG />
+        ) : null}
       </button>
       {hasContent ? (
         <AccordionItemInner isExpanded={isActive} blocks={blocks} context={context} />

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

@@ -553,27 +553,27 @@
       "content": {
         "navigatorTabs": [
           {
-            "label": "Калькулятор",
+            "text": "Калькулятор",
             "href": "#calculator"
           },
           {
-            "label": "Преимущества",
+            "text": "Преимущества",
             "href": "#advantages"
           },
           {
-            "label": "Как оформить",
+            "text": "Как оформить",
             "href": "#howToApply"
           },
           {
-            "label": "Тарифы",
+            "text": "Тарифы",
             "href": "#tariffs"
           },
           {
-            "label": "Документы",
+            "text": "Документы",
             "href": "#documents"
           },
           {
-            "label": "Урожай",
+            "text": "Урожай",
             "href": "https://rshb.ru/",
             "target": "_blank"
           }

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

@@ -12,7 +12,8 @@
             "src": "calendar/august.png",
             "format": "webp",
             "size": {
-              "width": 210
+              "width": 210,
+              "height": 190
             },
             "alt": "Пример использования «Карты для покупок в рассрочку»"
           }
@@ -29,7 +30,8 @@
             "src": "calendar/september.png",
             "format": "webp",
             "size": {
-              "width": 210
+              "width": 210,
+              "height": 190
             },
             "alt": "Пример использования «Карты для покупок в рассрочку»"
           }
@@ -40,7 +42,8 @@
             "src": "calendar/october.png",
             "format": "webp",
             "size": {
-              "width": 210
+              "width": 210,
+              "height": 190
             },
             "alt": "Пример использования «Карты для покупок в рассрочку»"
           }
@@ -57,7 +60,8 @@
             "src": "calendar/november.png",
             "format": "webp",
             "size": {
-              "width": 210
+              "width": 210,
+              "height": 190
             },
             "alt": "Пример использования «Карты для покупок в рассрочку»"
           }
@@ -74,7 +78,8 @@
             "src": "calendar/december.png",
             "format": "webp",
             "size": {
-              "width": 210
+              "width": 210,
+              "height": 190
             },
             "alt": "Пример использования «Карты для покупок в рассрочку»"
           }

package/src/components/GracePeriod/GracePeriod.tsx

@@ -21,17 +21,23 @@ export const GracePeriod = JSX<GracePeriodProps>(
 
 const renderCalendar = (calendar) => {
   const colCount =
-    calendar.reduce((accumulator, currentValue) => accumulator + currentValue.month.length, 0) || 1;
+    calendar.reduce(
+      (accumulator, currentValue) =>
+        currentValue?.month?.length ? accumulator + currentValue.month.length : accumulator,
+      0,
+    ) || 1;
   const colSize = 100 / colCount;
 
-  const mappedCalendar = calendar.map((_) => ({
-    ..._,
-    flexBasis: `${_.month.length * colSize}%`,
-  }));
+  const mappedCalendar = calendar
+    .filter((_) => _?.month?.length)
+    .map((_) => ({
+      ..._,
+      flexBasis: `${_.month.length * colSize}%`,
+    }));
 
   return (
     <div className="w-full flex flex-col justify-center mt-14">
-      <div className="flex w-full mb-3 font-light text-m-title-md mb-3 text-center">
+      <div className="flex w-full mb-3 font-light text-m-title-md text-center">
         {mappedCalendar.map((_) => renderMonthNames(_, colSize))}
       </div>
       <div className="flex w-full">

package/src/components/GracePeriod/GracePeriodContent.ts

@@ -1,14 +1,24 @@
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { Picture } from '../../model/Picture';
 
 interface Month {
   /** @title Название месяца */
   name?: string;
-  /** @title Изображение календарного месяца */
+  /**
+   * @title Изображение календарного месяца
+   * @default
+   * {
+   *  format: "webp",
+   *  size: {
+   *    width: 210,
+   *    height: 190
+   *   }
+   * }
+   */
   image?: Picture;
 }
 
 interface CalendarItem {
+  /** @title Месяц */
   month?: Month[];
   /** @title Основной текст */
   blackText?: string;
@@ -19,7 +29,9 @@ interface CalendarItem {
 /**
  * @title Льготный период
  */
-export interface GracePeriodContent extends HeadingContent {
+export interface GracePeriodContent {
+  /** @title Заголовок */
+  title?: string;
   /** @title Описание */
   description?: string;
   /** @title Календарь */

package/src/components/LinkDocs/LinkDocsListItem.tsx

@@ -5,7 +5,7 @@ import { LinkDocsListItemBase } from './LinkDocsListItemBase';
 export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
   <LinkDocsListItemBase
     className={`flex h-full box-border ${className}`}
-    iconClassName="mr-2.5 min-w-6 min-h-6 text-primary-text"
+    iconClassName="mr-2.5 min-w-6 min-h-6"
     textClassName="self-center font-light"
     suffixClassName="text-secondary-text group-hover:text-primary-main"
     doc={doc}

package/src/components/NavigatorTabs/NavigatorTabItem.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { NavigatorTab } from './NavigatorTabsContent';
+import type { LinkProps } from '../../model/LinkProps';
 
-export interface NavigatorTabItemProps extends NavigatorTab {
+export interface NavigatorTabItemProps extends LinkProps {
   active?: boolean;
   className?: string;
   onClick?: (ev: MouseEvent) => void;
@@ -11,9 +11,9 @@ const TEXT_CLASSES = 'font-sans font-normal text-sm';
 const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
 
 export const NavigatorTabItem = JSX<NavigatorTabItemProps>(
-  ({ className = '', label, active, children, onClick, href, target = '_self' }) => (
+  ({ className = '', text, active, children, onClick, href, target = '_self' }) => (
     <a className={getLinkClasses(className, active)} target={target} href={href} onClick={onClick}>
-      <span className={getTextClasses(active)}>{label || children}</span>
+      <span className={getTextClasses(active)}>{text || children}</span>
     </a>
   ),
 );

package/src/components/NavigatorTabs/NavigatorTabs.example.json

@@ -1,7 +1,7 @@
 {
   "navigatorTabs": [
-    { "label": "Tab1", "href": "#tab1" },
-    { "label": "Tab2", "href": "#tab2" },
-    { "label": "Link", "href": "https://rshb.ru", "target": "_blank" }
+    { "text": "Таб 1", "href": "#tab1", "target": "_self" },
+    { "text": "Таб 2", "href": "#tab2", "target": "_self" },
+    { "text": "Ссылка", "href": "https://rshb.ru", "target": "_blank" }
   ]
 }

package/src/components/NavigatorTabs/NavigatorTabs.fixture.tsx

@@ -1,11 +1,16 @@
 import { context } from '../../setup-fixture';
 import { NavigatorTabs } from './NavigatorTabs';
 import tabsExample from './NavigatorTabs.example.json';
+import type { NavigatorTabsContent } from './NavigatorTabsContent';
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <NavigatorTabs context={context} className="col-span-12" {...tabsExample} />
+      <NavigatorTabs
+        context={context}
+        className="col-span-12"
+        {...(tabsExample as NavigatorTabsContent)}
+      />
     </div>
   ),
 };

package/src/components/NavigatorTabs/NavigatorTabs.tsx

@@ -1,15 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
-import { getHash, isURL } from '../../utils/url';
-import type { Router } from '../ContentPage/ContentPageContext';
+import { getHash } from '../../utils/url';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { NavigatorTabItem } from './NavigatorTabItem';
-import type { NavigatorTab, NavigatorTabsContent } from './NavigatorTabsContent';
+import type { NavigatorTabsContent } from './NavigatorTabsContent';
 
 export interface TabsBlockProps extends UniBlockProps, NavigatorTabsContent {}
 
 export const NavigatorTabs = JSX<TabsBlockProps>(
   ({ className = '', navigatorTabs, context, anchor = null }) => {
-    const router = context.useRouter();
     const href = globalThis.location?.href; // TODO: remove globalThis, use href from router
 
     return (
@@ -17,13 +18,16 @@ export const NavigatorTabs = JSX<TabsBlockProps>(
         className={`sticky top-0 z-20 box-border flex gap-x-1 h-12 ${className}`}
         id={anchor}
       >
-        {navigatorTabs ? navigatorTabs.map(renderTab(href, router)) : null}
+        {navigatorTabs ? navigatorTabs.map(renderTab(context, href)) : null}
       </section>
     );
   },
 );
 
-const renderTab = (href?: string, router?: Router) => (tab: NavigatorTab, i: number) => {
+const renderTab = (context: ContentPageContext, href?: string) => (tab: LinkProps, i: number) => {
+  const { useRouter, handlerDecorator } = context;
+  const router = useRouter();
+
   const hash = getHash(href);
   const active = hash ? tab.href === hash : i === 0;
 
@@ -31,14 +35,7 @@ const renderTab = (href?: string, router?: Router) => (tab: NavigatorTab, i: num
     <NavigatorTabItem
       key={tab.href}
       active={active}
-      onClick={() => handleRoute(router, tab.href)}
-      {...tab}
+      {...useLink({ router, handlerDecorator }, tab)}
     />
   );
 };
-
-const handleRoute = (router?: Router, href?: string) => {
-  if (isURL(href)) return; // if href if full URL - move to HTML href action, do not touch router
-
-  router?.replace(href || '');
-};

package/src/components/NavigatorTabs/NavigatorTabsContent.ts

@@ -1,14 +1,4 @@
-/**
- * @title Таб
- */
-export interface NavigatorTab {
-  /** @title Название */
-  label?: string;
-  /** @title Якорь */
-  href?: string;
-  /** @title Таргет (target) */
-  target?: string;
-}
+import type { LinkProps } from '../../model/LinkProps';
 
 /**
  * @title Блок табов
@@ -18,5 +8,5 @@ export interface NavigatorTabsContent {
    * @title Список табов
    * @minItems 3
    */
-  navigatorTabs?: NavigatorTab[];
+  navigatorTabs?: LinkProps[];
 }

package/src/components/ProductBlock/ProductBlock.tsx

@@ -37,7 +37,7 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
       className={`font-sans overflow-hidden pt-[50px] pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap[version]} ${className}`}
       id={anchor}
     >
-      {backwardButton ? renderBackwardButton(backwardButton, version, 'mb-10 -mt-[10px]') : null}
+      {backwardButton?.text ? renderBackwardButton(backwardButton, version, 'mb-10 -mt-2.5') : null}
       {breadcrumbs?.length ? (
         <div className="text-xs mb-6">
           {joinList(<span className={`mx-2 ${breadcrumbsStyleMap[version]}`}>/</span>)(

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -15,6 +15,7 @@ export function renderBackwardButton(
         rounded
         className="w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3"
         ariaLabel={button?.text}
+        href={button?.href}
       >
         <Img className="w-4 h-4" image={button?.icon || { icon: 'ArrowLeftIcon' }} asSVG />
       </Button>

package/src/components/ProductBlock/renderBenefit.tsx

@@ -20,7 +20,7 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
     <div key={String(i)} className="flex gap-4 items-center">
       {benefit.icon ? (
         <Img
-          className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border text-white ${benefitIconBgStyleMap[version]}`}
+          className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border text-primary-text ${benefitIconBgStyleMap[version]}`}
           image={benefit.icon}
           width="24"
           height="24"

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

@@ -1,5 +1,6 @@
 {
   "title": "Продуктовая плитка",
+  "headingType": "h3",
   "description": "Описание",
   "image": {
     "format": "webp",