@redneckz/wildless-cms-uni-blocks 0.3.34 → 0.3.35

package/src/components/Footer/MediaButton.tsx

@@ -30,6 +30,20 @@ const ICONS_MAP: Array<{
     width: '12px',
     height: '20px',
   },
+  {
+    origins: ['apps.apple.com'],
+    icon: { icon: 'AppleIcon' },
+    label: 'App Store',
+    width: '20px',
+    height: '22px',
+  },
+  {
+    origins: ['play.google.com'],
+    icon: { icon: 'PlayMarketIcon' },
+    label: 'Google Play',
+    width: '21px',
+    height: '21px',
+  },
 ];
 
 interface MediaButtonProps {
@@ -44,7 +58,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
 
   return (
     <a
-      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[40px] h-[40px] box-border hover:text-primary-main"
+      className="flex items-center justify-center border border-solid rounded-md border-main-divider no-underline outline-none w-14 h-14 box-border text-primary-main hover:text-white hover:bg-primary-main hover:border-primary-main"
       href={href}
       aria-label={label}
       target="_blank"

package/src/components/Footer/Sitemap.tsx

@@ -10,7 +10,7 @@ export interface SitemapProps extends UniBlockProps {
   items?: TopMenuItem[];
 }
 
-export const Sitemap = JSX<SitemapProps>(({ className, items, context }) => {
+export const Sitemap = JSX<SitemapProps>(({ className = '', items, context }) => {
   const sitemap = useSitemap(context.useAsyncData);
   const mergedItems = mergeTopItems(sitemap.topItems, items);
   const linkParams = {
@@ -19,7 +19,7 @@ export const Sitemap = JSX<SitemapProps>(({ className, items, context }) => {
   };
 
   return (
-    <div className={`flex items-start justify-start gap-11 xl:gap-5 ${className || ''}`}>
+    <div className={`flex items-start justify-between gap-11 xl:gap-5 ${className}`}>
       {mergedItems?.map((_, i) => renderColumn(_, i, linkParams))}
     </div>
   );
@@ -29,9 +29,9 @@ const renderColumn = (c: TopMenuItem, index: number, { router, handlerDecorator
   const { text, href, items, target } = c;
 
   return (
-    <div key={String(index)} className="flex flex-col gap-[14px]">
+    <div key={String(index)} className="flex flex-col w-1/5 last:w-1/4 gap-[14px]">
       <a
-        className="block font-sans font-medium text-base text-primary-text no-underline"
+        className="block font-sans leading-5 text-base text-primary-text no-underline"
         href={href}
         target={target || '_self'}
       >
@@ -50,7 +50,7 @@ interface ColumnItemProps extends LinkProps {
 
 const ColumnItem = JSX<ColumnItemProps>(({ text, href, target, index }) => (
   <a
-    className="block font-sans font-normal text-base text-secondary-text hover:text-primary-main no-underline"
+    className="block font-sans font-light text-base text-secondary-text hover:text-primary-main no-underline"
     href={href}
     target={target || '_self'}
   >

package/src/components/Footer/SocialMedia.tsx

@@ -8,14 +8,17 @@ export interface SocialMediaProps extends UniBlockProps {
   media?: Omit<LinkProps, 'text'>[];
 }
 
-export const SocialMedia = JSX<SocialMediaProps>(({ className, media, context }) => {
+export const SocialMedia = JSX<SocialMediaProps>(({ className = '', media, context, children }) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
   return (
-    <div className={`flex items-end gap-2 pt-[30px] pb-7 ${className || ''}`}>
-      {media?.map((_, index) => (
-        <MediaButton key={String(index)} {...useLink({ router, handlerDecorator }, _)} />
-      ))}
+    <div>
+      <div className={`flex gap-2.5 mb-1.5 ${className}`}>
+        {media?.map((_, index) => (
+          <MediaButton key={String(index)} {...useLink({ router, handlerDecorator }, _)} />
+        ))}
+      </div>
+      <span className="font-light text-sm text-secondary-text">{children}</span>
     </div>
   );
 });

package/src/components/Footer/TextInformation.tsx

@@ -9,7 +9,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
   return (
     <div className={`${className || ''}`}>
       <div className="pt-5 pb-[5px]">
-        <span className="font-sans font-normal text-xs text-secondary-text">
+        <span className="font-sans font-light text-xs text-secondary-text">
           {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
         </span>
       </div>
@@ -37,7 +37,7 @@ interface TextInformationLinkProps extends LinkProps {
 const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
   ({ className, index, text, href, target, onClick }) => (
     <a
-      className={`font-sans font-normal text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
+      className={`font-sans font-light text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
         className || ''
       }`}
       href={href}

package/src/components/Header/Header.tsx

@@ -1,16 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { BgColorVersion } from '../../model/BgColorVersion';
-import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import type { UniBlockProps } from '../../types';
-import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
+import { HeaderSubMenu } from './HeaderSubMenu';
 
 const BORDER_COLORS: Record<BgColorVersion, string> = {
   'bg-white': 'bg-main-divider',
@@ -21,7 +20,7 @@ export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
   ({
-    className,
+    className = '',
     defaultLocation = 'Москва',
     bgColor = 'bg-white',
     context,
@@ -34,8 +33,6 @@ export const Header = JSX<HeaderProps>(
 
     const mergedItems = mergeTopItems(sitemap.topItems, topItems);
     const activeTopItem = mergedItems.find(isTopItemActive(router));
-    const subItems = activeTopItem?.items;
-    const activeSubItem = findActiveSubItem(router)(subItems);
 
     const topMenu = mergedItems.map((_, i) => (
       <TopItem
@@ -47,18 +44,8 @@ export const Header = JSX<HeaderProps>(
       />
     ));
 
-    const subMenu = subItems?.map((_) => (
-      <HeaderItem
-        key={_.href}
-        className="mr-8"
-        active={_ === activeSubItem}
-        {...useLink({ router, handlerDecorator }, _)}
-        bgColor={bgColor}
-      />
-    ));
-
     return (
-      <header className={`pt-5 pb-8 px-20 ${bgColor} ${className || ''}`} id={anchor}>
+      <header className={`pt-6 pb-8 px-20 ${bgColor} ${className}`} id={anchor}>
         <div className="container">
           <div className="flex items-center">
             <Logo className="mr-8" bgColor={bgColor} />
@@ -70,8 +57,8 @@ export const Header = JSX<HeaderProps>(
               bgColor={bgColor}
             />
           </div>
-          <div className={`mt-5 h-[1px] ${BORDER_COLORS[bgColor]}`} />
-          <nav className="mt-5">{subMenu}</nav>
+          <div className={`mt-6 h-[1px] ${BORDER_COLORS[bgColor]}`} />
+          <HeaderSubMenu context={context} subItems={activeTopItem?.items} bgColor={bgColor} />
         </div>
       </header>
     );

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -17,11 +17,11 @@ const COLORS_MAP: Record<BgColorVersion, string> = {
   'bg-white': 'text-primary-text hover:text-primary-main',
   transparent: 'text-white',
 };
-const DOP_LINKS_COLORS_MAP: Record<BgColorVersion, string> = {
+const LINKS_COLORS_MAP: Record<BgColorVersion, string> = {
   'bg-white': 'text-secondary-light hover:text-secondary-hover',
   transparent: 'text-white',
 };
-const DOP_LINKS_ICON_NAME_MAP: Record<BgColorVersion, IconName> = {
+const LINKS_ICON_NAME_MAP: Record<BgColorVersion, IconName> = {
   'bg-white': 'GridIcon',
   transparent: 'GridIconWhite',
 };
@@ -54,14 +54,11 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
         >
           <Img image="LoupeIcon" className="h-full" asSVG color="none" />
         </HeaderSecondaryMenuButton>
-        <HeaderSecondaryMenuButton className={`mr-5 ${COLORS_MAP[bgColor]}`} ariaLabel="Профиль">
-          <Img image="ProfileIcon" className="h-full" asSVG color="none" />
-        </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
-          className={`${DOP_LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
+          className={`${LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
           ariaLabel="Дополнительные ссылки"
         >
-          <Img image={DOP_LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG color="none" />
+          <Img image={LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG color="none" />
         </HeaderSecondaryMenuButton>
       </div>
     );

package/src/components/Header/HeaderSubMenu.tsx

@@ -0,0 +1,93 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { LinkProps } from '../../model/LinkProps';
+import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
+import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { headerSubMenuObserver } from './HeaderSubMenuObserver';
+
+export interface HeaderSubMenuProps {
+  context: ContentPageContext;
+  subItems?: LinkProps[];
+  bgColor?: BgColorVersion;
+}
+
+export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems, bgColor }) => {
+  const [subMenuIsShow, setHiddenMenuIsShow] = context.useState(false);
+  const router = context.useRouter();
+  const { handlerDecorator } = context;
+
+  setTimeout(() => {
+    const headerSubMenu = globalThis.document.querySelectorAll('[data-item-name=header-submenu]');
+    headerSubMenu.forEach((_) => {
+      headerSubMenuObserver?.observe(_);
+    });
+  }, 200);
+
+  const activeSubItem = findActiveSubItem(router)(subItems);
+  const toggleSubMenu = () => setHiddenMenuIsShow(!subMenuIsShow);
+
+  const subMenu = subItems?.map((_) => (
+    <HeaderItem
+      key={_.href}
+      className="mr-8"
+      active={_ === activeSubItem}
+      {...useLink({ router, handlerDecorator }, _)}
+      dataItemName="header-submenu"
+      bgColor={bgColor}
+    />
+  ));
+
+  return (
+    <nav className="relative mt-5">
+      <div className="overflow-hidden whitespace-nowrap mr-52">{subMenu}</div>
+      {renderDotsSubMenu({
+        subMenuIsShow,
+        toggleSubMenu,
+        subItems,
+        router,
+        handlerDecorator,
+      })}
+    </nav>
+  );
+});
+
+// TODO: add types
+const renderDotsSubMenu = ({
+  subMenuIsShow,
+  toggleSubMenu,
+  subItems,
+  router,
+  handlerDecorator,
+}) => (
+  <div
+    className={`absolute w-52 -top-4 right-0 pt-4 z-40 ${
+      subMenuIsShow ? 'bg-white rounded-md shadow-blue-gray/24' : ''
+    }`}
+    data-header-submenu-visible="toggled"
+  >
+    <button
+      className="flex justify-between items-center cursor-pointer h-6 ml-6"
+      onClick={toggleSubMenu}
+    >
+      {Array(3).fill(<div className="w-[3px] h-[3px] rounded bg-black mr-1" />)}
+    </button>
+    <div className={`flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`}>
+      {renderDotsSubMenuItems(subItems, router, handlerDecorator)}
+    </div>
+  </div>
+);
+
+// TODO: add types
+const renderDotsSubMenuItems = (subItems, router, handlerDecorator) =>
+  subItems?.map((_) => (
+    <a
+      key={_.href}
+      {...useLink({ router, handlerDecorator }, _)}
+      data-item-name="dots-header-submenu"
+      className="text-base font-light pb-4 hover:text-primary-main"
+    >
+      {_.text}
+    </a>
+  ));

package/src/components/Header/HeaderSubMenuObserver.ts

@@ -0,0 +1,44 @@
+import { isSSR } from '../../utils/isSSR';
+
+export const headerSubMenuObserver = isSSR()
+  ? undefined
+  : new IntersectionObserver(
+      (entries) => {
+        const headerSubMenuButtonElement = window.document.querySelector(
+          '[data-header-submenu-visible=toggled]',
+        );
+        const headerSubMenuItems = Array.from(
+          window.document.querySelectorAll('[data-item-name=header-submenu]'),
+        );
+        const dotsHeaderSubMenuItems = Array.from(
+          window.document.querySelectorAll('[data-item-name=dots-header-submenu]'),
+        );
+        const visibilityList = {};
+        entries.forEach((j) => {
+          visibilityList[String(j.target.toString())] = j.isIntersecting;
+        });
+        const isHeaderSubMenuButtonShow = toggleVisibilityInItems(
+          visibilityList,
+          dotsHeaderSubMenuItems,
+          'hidden',
+        );
+        toggleVisibilityInItems(visibilityList, headerSubMenuItems, 'invisible');
+        if (headerSubMenuButtonElement) {
+          isHeaderSubMenuButtonShow
+            ? headerSubMenuButtonElement.classList.remove('hidden')
+            : headerSubMenuButtonElement.classList.add('hidden');
+        }
+      },
+      { root: window.document, threshold: 1.0 },
+    );
+
+// TODO: add types
+const toggleVisibilityInItems = (visibilityList, items, className) => {
+  const isReversed = className !== 'hidden';
+  return items.some((item) => {
+    const key = item.toString();
+    const option = isReversed ? !visibilityList[key] : visibilityList[key];
+    key in visibilityList ? item.classList.toggle(className, option) : null;
+    return isReversed ? item.classList.contains('hidden') : !item.classList.contains('hidden');
+  });
+};

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -17,7 +17,7 @@ export default {
             aboveText: 'Загрузите в',
             text: 'App Store',
             icon: { icon: 'AppleIcon' },
-            href: '#',
+            href: 'apps.apple.com',
             asSVG: true,
             version: 'secondary',
           },
@@ -25,7 +25,7 @@ export default {
             aboveText: 'Доступно в',
             text: 'Google Play',
             icon: { icon: 'PlayMarketIcon' },
-            href: '#',
+            href: 'play.google.com',
             asSVG: true,
             version: 'secondary',
           },

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -2,7 +2,7 @@ import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { ProductBlock } from './ProductBlock';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonWithIconProps, ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { ProductBlockContent } from './ProductBlockContent';
 
 const image: Picture = {
@@ -15,20 +15,6 @@ const image: Picture = {
   },
 };
 
-const breadcrumbs = [
-  {
-    text: 'Главная',
-    href: '/',
-  },
-  {
-    text: 'Кредитные карты',
-    href: '/credit',
-  },
-  {
-    text: 'Кредитная карта Своя Union Pay',
-  },
-];
-
 const benefits: Benefit[] = [
   {
     label: 'До 5 млн ₽',
@@ -62,16 +48,21 @@ const buttons: ButtonWithIconProps[] = [
   },
 ];
 
+const items = [
+  'Совершайте любые личные покупки',
+  'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
+  'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
+];
+
+const backwardButton: ButtonProps = {
+  href: 'https://rshb.ru',
+  text: 'Все кредитные карты',
+};
+
 export const PRODUCT_BLOCK: ProductBlockContent = {
   title: 'Оплата проходит в 180 странах мира',
   headingType: 'h2',
-  description:
-    'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
-  items: [
-    'Совершайте любые личные покупки',
-    'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
-    'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
-  ],
+  items,
   buttons: buttons,
 };
 
@@ -84,7 +75,6 @@ export default {
         title={'Потребительский кредит наличными'}
         headingType="h2"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        breadcrumbs={breadcrumbs}
         benefits={benefits}
         buttons={buttons}
         image={image}
@@ -100,31 +90,42 @@ export default {
         headingType="h2"
         version={'secondary'}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        breadcrumbs={breadcrumbs}
         benefits={benefits}
-        buttons={buttons}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+        items={items}
         image={image}
       />
     </div>
   ),
   'with items': (
     <div className="container grid grid-cols-12">
-      <ProductBlock
-        className="col-span-12"
-        context={context}
-        breadcrumbs={breadcrumbs}
-        {...PRODUCT_BLOCK}
-        image={image}
-      />
+      <ProductBlock className="col-span-12" context={context} {...PRODUCT_BLOCK} image={image} />
     </div>
   ),
   'without image': (
+    <div className="container grid grid-cols-12">
+      <ProductBlock className="col-span-12" context={context} {...PRODUCT_BLOCK} />
+    </div>
+  ),
+  'default-h1': (
     <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
-        breadcrumbs={breadcrumbs}
-        {...PRODUCT_BLOCK}
+        title={'Потребительский кредит наличными'}
+        headingType="h1"
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefits={benefits}
+        buttons={buttons}
+        image={image}
+        backwardButton={backwardButton}
       />
     </div>
   ),

package/src/components/ProductBlock/ProductBlock.tsx

@@ -6,6 +6,7 @@ import { Breadcrumb } from '../../ui-kit/Breadcrumb';
 import { joinList } from '../../utils/joinList';
 import type { ProductBlockContent } from './ProductBlockContent';
 import { ProductBlockInner } from './ProductBlockInner';
+import { renderBackwardButton } from './renderBackwardButton';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
@@ -36,6 +37,7 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
       className={`font-sans pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap[version]} ${className}`}
       id={anchor}
     >
+      {renderBackwardButton('Все дебетовые карты', version, 'mb-10')}
       {breadcrumbs?.length ? (
         <div className="text-xs mb-6">
           {joinList(<span className={`mx-2 ${breadcrumbsStyleMap[version]}`}>/</span>)(

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,6 +1,6 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonContent, ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -32,6 +32,8 @@ export type ProductBlockInnerContent = HeadingContent &
      * @hidden
      */
     textBlockClassName?: string;
+    /** @title Текст кнопки возврата */
+    backwardButton?: ButtonProps;
   };
 
 /**

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -4,6 +4,7 @@ import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Description } from '../../ui-kit/Description/Description';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTile } from '../BaseTile/BaseTile';
 import type { ProductBlockInnerContent } from './ProductBlockContent';
 import { renderBenefit } from './renderBenefit';
@@ -31,12 +32,12 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
         <div className={`flex flex-col ${textBlockClassName}`}>
           <BaseTile
             context={context}
-            title={getTitle(title, headingType, textColor)}
+            title={getTitle(title, headingType)}
             buttons={getButtons(context, buttons)}
           >
             {description && (
               <Description
-                className={`mt-[18px] max-w-[600px] text-title-new-sm font-light ${textColor}`}
+                className={`mt-4 max-w-[600px] text-md font-light ${textColor}`}
                 description={description}
               />
             )}
@@ -47,9 +48,9 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             ) : null}
             {items?.length ? (
               <List
-                className="mt-5 text-title-new-sm font-light"
+                className="mt-5 text-title-2xs font-light"
                 items={items}
-                itemClassName="mb-[10px]"
+                itemClassName="mb-[7px]"
                 version={version}
                 isDotted={isDotted}
               />
@@ -62,15 +63,20 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   },
 );
 
-const getTitle = (title, headingType, textColor) => {
-  const Tag = headingType;
+const getTitle = (title, headingType) => {
   return (
-    title && <Tag className={`font-sans font-medium m-0 text-title-xl ${textColor}`}>{title}</Tag>
+    title && (
+      <Heading
+        headingType={headingType}
+        title={title}
+        className="whitespace-pre-wrap max-w-[600px]"
+      />
+    )
   );
 };
 
 const getButtons = (context, buttons) => {
   return buttons?.length ? (
-    <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+    <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-4" />
   ) : null;
 };

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -0,0 +1,34 @@
+import { Img } from '../../ui-kit/Img/Img';
+import { Button } from '../../ui-kit/Button/Button';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+const backwardBgStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-primary-main',
+  secondary: 'bg-white',
+};
+
+const backwardIconStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-white',
+  secondary: 'text-primary-text',
+};
+
+export function renderBackwardButton(text: string, version: BlockVersion, className: string) {
+  return (
+    <div className={`flex items-center ${className}`}>
+      <Button
+        rounded
+        className={`w-12 h-12 min-h-12 max-h-12 flex items-center justify-center mr-3 ${backwardBgStyleMap[version]}`}
+      >
+        <Img
+          className={`w-4 h-4 min-w-4 min-h-4 rounded-full box-border ${backwardIconStyleMap[version]}`}
+          image={{ icon: 'ArrowLeftIcon' }}
+          color="none"
+          width="24"
+          height="24"
+          asSVG
+        />
+      </Button>
+      {text ? <span className="text-m-md">{text}</span> : null}
+    </div>
+  );
+}

package/src/components/ProductBlock/renderBenefit.tsx

@@ -3,7 +3,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 const benefitIconBgStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-main',
+  primary: 'bg-primary-main',
   secondary: 'bg-white/30',
 };
 const benefitTitleStyleMap: Record<BlockVersion, string> = {
@@ -20,19 +20,19 @@ 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 ${benefitIconBgStyleMap[version]}`}
+          className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border text-white ${benefitIconBgStyleMap[version]}`}
           image={benefit.icon}
           width="24"
           height="24"
           asSVG
         />
       ) : null}
-      <div className="flex gap-1 flex-col h-full max-w-[149px]">
+      <div className="flex gap-0.5 flex-col h-full max-w-[149px]">
         <div className={`font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`}>
           {benefit.label}
         </div>
         {benefit.description && (
-          <div className={`font-normal text-sm ${benefitDescStyleMap[version]}`}>
+          <div className={`font-normal text-m-md ${benefitDescStyleMap[version]}`}>
             {benefit.description}
           </div>
         )}

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

@@ -5,7 +5,7 @@
   "image": {
     "format": "webp",
     "size": {
-      "width": 300
+      "width": 445
     }
   },
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],