@redneckz/wildless-cms-uni-blocks 0.10.1 → 0.10.3

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -5,7 +5,6 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
@@ -64,7 +63,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
 
 const renderIconBlock = (icon: Picture | undefined) => (
   <div className="absolute bottom-0 right-0">
-    {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+    {icon?.icon ? <Img image={icon} /> : null}
     {icon?.src ? <Img image={icon} /> : null}
   </div>
 );

package/src/components/CarouselTariffsCard/CarouselTariffsCard.example.json

@@ -24,8 +24,16 @@
       "description": "Описание 1-2"
     },
     {
-      "title": "Ячейка 1-3",
-      "description": "Описание 1-3"
+      "buttons": [
+        {
+          "icon": {
+            "iconVersion": "color",
+            "icon": "DocIconMonoColor"
+          },
+          "version": "link",
+          "text": "Скачать файл"
+        }
+      ]
     }
   ]
 }

package/src/components/CarouselTariffsCard/CarouselTariffsCard.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { CarouselTariffsCard } from './CarouselTariffsCard';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
 
@@ -27,6 +27,13 @@ const buttonSecondary: ButtonProps = {
   version: 'secondary',
 };
 
+const buttonIcon: ButtonWithIconProps = {
+  text: 'App Store',
+  icon: { icon: 'DocIconMonoColor', iconVersion: 'color' },
+  href: 'rshb.ru',
+  version: 'link',
+};
+
 const cardCells = [
   { title: 'Открытие расчетного счета', description: 'Бесплатно' },
   { title: 'Внутрибанковские платежи', description: '0 ₽' },
@@ -37,6 +44,7 @@ const cardCells = [
     description: '0% - до 100 000 ₽/мес., далее согласно п.2.4. Тарифов Банка',
   },
   { title: 'Зарплатный проект', description: 'Бесплатно' },
+  { buttons: [buttonIcon] },
 ];
 
 export const TARIFFS_CARD: CarouselTariffsCardContent = {

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import type { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
@@ -12,9 +12,11 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
-import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import type {
+  CarouselTariffsCardContent,
+  TariffsCardCellProps,
+} from './CarouselTariffsCardContent';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
@@ -58,7 +60,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 const renderIconBlock = (icon?: Picture) => (
   <div className="w-[267px] min-w-[267px] self-center">
     {icon?.src ? <Img image={icon} /> : null}
-    {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+    {icon?.icon ? <Img image={icon} /> : null}
   </div>
 );
 
@@ -76,25 +78,31 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
       name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
       width="16"
       height="16"
-      asSVG
     />
   </button>
 );
 
-const renderCardInfo = (cell: HeadlineCommonProps, i: number): VNode => (
-  <div key={String(i)} className="py-5 border-b border-main-divider">
-    {cell?.title ? (
-      <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
-    ) : null}
-    {cell?.description ? (
-      <div className="text-primary-text text-h6 mt-1">{cell.description}</div>
-    ) : null}
-  </div>
-);
+const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
+  const { title, description, buttons } = cell;
+
+  return (
+    <div key={String(i)} className="py-5 border-b border-main-divider">
+      {title ? (
+        <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
+      ) : null}
+      {description ? (
+        <div className="text-primary-text text-h6 mt-1">{cell.description}</div>
+      ) : null}
+      {buttons?.length ? (
+        <div className="text-primary-main">{renderButtonsSection(buttons)}</div>
+      ) : null}
+    </div>
+  );
+};
 
 const renderHitIcon = (): VNode => (
   <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
-    <Icon iconVersion="black" name="HeartIcon" width="23" height="22" asSVG />
+    <Icon iconVersion="black" name="HeartIcon" width="23" height="22" />
     <Paragraph size="text-s" font="font-normal" align="text-center" color="text-primary-text">
       ХИТ
     </Paragraph>

package/src/components/CarouselTariffsCard/CarouselTariffsCard.ui.json

@@ -1 +1,18 @@
-{}
+{
+  "content": {
+    "cardCells": {
+      "items": {
+        "buttons": {
+          "items": {
+            "icon": {
+              "ui:field": "icon"
+            },
+            "iconRight": {
+              "ui:field": "icon"
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/CarouselTariffsCard/CarouselTariffsCardContent.ts

@@ -1,7 +1,15 @@
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+export type TariffsCardCellProps = HeadlineCommonProps & {
+  /**
+   * @title Кнопка
+   * @maxItems 1
+   */
+  buttons?: ButtonWithIconProps[];
+};
 
 /**
  * @title Карточка тарифной карусели
@@ -14,5 +22,5 @@ export type CarouselTariffsCardContent = UniBlockContent &
     /** @title Кнопка */
     button?: ButtonProps;
     /** @title Ячейка */
-    cardCells?: HeadlineCommonProps[];
+    cardCells?: TariffsCardCellProps[];
   };

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -4,7 +4,6 @@ import type { Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { BORDER_CLASSES, GRADIENT } from './constants';
 
 export interface HeaderCellProps {
@@ -23,10 +22,9 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
     {icon && !image?.src && (
       <Img
         className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
-        image={getIconWithVersion(icon)}
+        image={icon}
         width="63"
         height="63"
-        asSVG
       />
     )}
     {image?.src && <Img className="mb-[18px]" image={image} />}

package/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -8,7 +8,7 @@ interface CurrentLocationProps {
 
 export const CurrentLocation = JSX<CurrentLocationProps>(({ className = '', address }) => (
   <div className={`flex ${className}`}>
-    <Img image={{ icon: 'GpsIcon' }} width="24" height="24" asSVG />
+    <Img image={{ icon: 'GpsIcon' }} width="24" height="24" />
     <div className="ml-3">
       {address ? <p className="text-primary-main  m-0 mb-1 text-l">{address}</p> : null}
       <p className="text-secondary-text m-0 text-m">Курс указан для заданного офиса</p>

package/src/components/Footer/Footer.mobile.tsx

@@ -7,7 +7,6 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { LinkList } from '../LinkList/LinkList';
 import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
 import { RollupItem } from '../RollupItem/RollupItem';
@@ -56,9 +55,7 @@ const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
 
   return (
     <Button version="link" key={`footer-${i}`} href={href} className="flex text-s mb-4 w-6">
-      {icon ? (
-        <Img className="pr-1" image={getIconWithVersion(icon)} width="24" height="24" asSVG />
-      ) : null}
+      {icon ? <Img className="pr-1" image={icon} width="24" height="24" /> : null}
       <span className="pl-2.5 font-medium text-primary-text">{text}</span>
     </Button>
   );

package/src/components/Footer/MediaButton.tsx

@@ -3,7 +3,6 @@ import type { IconProps, Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 
 const ICONS_MAP: Array<{
@@ -68,8 +67,6 @@ export const MediaButton = JSX<MediaButtonProps>(
 
     const iconCustom = getFilteredIcon(icon) ?? iconMapped;
 
-    const iconWithVersion = iconCustom ? getIconWithVersion(iconCustom) : undefined;
-
     return (
       <Button
         className={style(
@@ -88,13 +85,12 @@ export const MediaButton = JSX<MediaButtonProps>(
         version={version}
         {...rest}
       >
-        {iconWithVersion && !text ? (
+        {iconCustom && !text ? (
           <Img
-            image={iconWithVersion}
+            image={iconCustom}
             imageClassName="group-hover/media:text-white"
             width="24"
             height="24"
-            asSVG
           />
         ) : null}
       </Button>

package/src/components/Header/DropdownMenu.tsx

@@ -2,8 +2,8 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
-import type { LinkProps } from '../../model/LinkProps';
 import { style } from '../../utils/style';
+import type { LinkProps } from '../../model/LinkProps';
 
 interface DropdownMenuProps {
   className?: string;
@@ -26,7 +26,7 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
       ref={ref}
     >
       <button
-        className="group/btn flex justify-between items-center h-6 ml-6"
+        className="group/btn flex justify-between items-center h-6"
         aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
         onClick={handleToggle}
       >
@@ -40,7 +40,10 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
           ))}
       </button>
       <div
-        className={style('flex flex-col rounded-md bg-white p-6 pb-2', visible ? '' : 'hidden')}
+        className={style(
+          'absolute flex flex-col rounded-md bg-white p-6 pb-2',
+          visible ? '' : 'hidden',
+        )}
         aria-hidden={!visible}
       >
         {items?.map((item, i) => {

package/src/components/Header/Header.tsx

@@ -35,7 +35,7 @@ export const Header = JSX<HeaderProps>(
   }) => {
     const router = useRouter();
 
-    const { topItems, logo, defaultLocation, foreignOffices, officesLink } =
+    const { topItems, logo, defaultLocation, foreignOffices, officesLink, internetBankUrl } =
       useSWRResource<SitemapData>(
         projectSettings.SITEMAP || 'sitemap',
         rest.options?.page?.fallback,
@@ -76,7 +76,11 @@ export const Header = JSX<HeaderProps>(
             )}
           />
           {showSubMenu && activeTopItem?.items?.length ? (
-            <HeaderSubMenu subItems={activeTopItem.items} />
+            <HeaderSubMenu
+              subItems={activeTopItem.items}
+              version={version}
+              internetBankUrl={internetBankUrl}
+            />
           ) : null}
         </div>
         <SearchDialog topItems={topItems} />

package/src/components/Header/HeaderBurger.tsx

@@ -23,7 +23,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
           className="absolute top-4 right-4 border-none bg-transparent cursor-pointer"
           onClick={onClick}
         >
-          <Img image={{ icon: 'CloseIcon' }} width="24" height="24" asSVG />
+          <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
         </button>
         <button className="flex items-center text-s p-0 mb-4 bg-transparent cursor-pointer">
           <Img
@@ -31,7 +31,6 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
             width="20"
             height="20"
             className="text-primary-main box-border mr-2"
-            asSVG
           />
           <Text color="text-secondary-text">{location.name}</Text>
         </button>
@@ -48,9 +47,7 @@ const renderBurgerSubMenuItem = (menu: DispositionItem, i: number) => {
 
   return (
     <a key={`headerSubMenu-${i}`} href={href} className="flex text-s mb-4 hover:text-primary-main">
-      {icon ? (
-        <Img className="text-primary-main pr-1" image={icon} width="24" height="24" asSVG />
-      ) : null}
+      {icon ? <Img className="text-primary-main pr-1" image={icon} width="24" height="24" /> : null}
       <span className="font-medium pl-0.5">{text}</span>
     </a>
   );

package/src/components/Header/HeaderChatBotButton.tsx

@@ -38,5 +38,7 @@ const renderChatBotButton = ({ className, iconVersion, onClick }: HeaderChatBotB
     image={{ icon: 'HeadphonesIcon', iconVersion }}
     ariaLabel="Чат"
     onClick={onClick}
+    buttonSize="large"
+    isGrayBg={true}
   />
 );

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -2,13 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
-import { projectSettings } from '../../ProjectSettings';
 import { useDialog } from '../../ui-kit/Dialog/useDialog';
 import { LOCATION_DIALOG_ID } from '../../ui-kit/LocationDialog/LocationDialog';
 import { SEARCH_DIALOG_ID } from '../../ui-kit/SearchDialog/SearchDialog';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { style } from '../../utils/style';
-import { HeaderChatBotButton } from './HeaderChatBotButton';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
 interface HeaderSecondaryMenuContent {
@@ -40,9 +38,6 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           ariaLabel="Поиск"
           onClick={handleOpenSearchModal}
         />
-        {projectSettings.CHAT_BOT ? (
-          <HeaderChatBotButton iconVersion={iconVersion} chat={projectSettings.CHAT_BOT} />
-        ) : null}
       </div>
     );
   },

package/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -1,24 +1,42 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import { style } from '../../utils/style';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
 export interface HeaderSecondaryMenuButtonProps extends ImageContent {
   className?: string;
   isRounded?: boolean;
+  buttonSize?: 'default' | 'large';
+  isGrayBg?: boolean;
   disabled?: boolean;
   ariaLabel?: string;
   onClick?: () => void;
 }
 
+const BUTTON_SIZE_STYLE = {
+  default: 'w-6 h-6',
+  large: 'w-12 h-12',
+};
+
 export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
-  ({ className, isRounded, disabled, ariaLabel, image, onClick }) => (
+  ({
+    className,
+    isRounded,
+    buttonSize = 'default',
+    isGrayBg = false,
+    disabled,
+    ariaLabel,
+    image,
+    onClick,
+  }) => (
     <button
       className={style(
-        'group/btn border-0 p-0 flex items-center bg-inherit',
+        'group/btn border-0 flex shrink-0 items-center',
+        isGrayBg ? 'p-3 rounded-full' : 'p-0 bg-inherit',
+        isGrayBg && !isRounded ? 'bg-main-divider' : '',
         isRounded
           ? 'w-8 h-8 text-secondary-light hover:text-secondary-hove'
-          : 'w-6 h-6 text-primary-text hover:text-primary-main',
+          : `${BUTTON_SIZE_STYLE[buttonSize]} text-primary-text hover:text-primary-main`,
         'group-data-transparent:text-white',
         className,
       )}
@@ -31,7 +49,6 @@ export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
         image={image}
         className={style('h-full', isRounded ? 'bg-main-divider/20 rounded-full' : '')}
         imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
-        asSVG
       />
     </button>
   ),

package/src/components/Header/HeaderSubMenu.tsx

@@ -1,64 +1,83 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
 import { useRouter } from '../../hooks/useRouter';
-import type { LinkProps } from '../../model/LinkProps';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { style } from '../../utils/style';
 import { DropdownMenu } from './DropdownMenu';
 import { HeaderSubMenuItem } from './HeaderSubMenuItem';
+import { projectSettings } from '../../ProjectSettings';
+import { HeaderChatBotButton } from './HeaderChatBotButton';
+import { InternetBankButton } from './InternetBankButton';
+import type { LinkProps } from '../../model/LinkProps';
+import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { IconVersion } from '../../model/IconVersion';
 
 export interface HeaderSubMenuProps {
+  version?: BlockVersion;
   subItems?: LinkProps[];
+  internetBankUrl?: string;
 }
 
-export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [] }) => {
-  const router = useRouter();
+export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
+  ({ subItems = [], version, internetBankUrl }) => {
+    const iconVersion: IconVersion = version === 'transparent' ? 'white' : 'black';
+
+    const router = useRouter();
 
-  const activeSubItem = findActiveSubItem(router)(subItems);
+    const activeSubItem = findActiveSubItem(router)(subItems);
 
-  const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
+    const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
 
-  const dropDownMenuItems = subItems.slice(visibleItemsCount);
+    const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
-  const subItemsListRef = useRef<HTMLDivElement | null>(null);
-  const observerOptions: IntersectionObserverOptions = { rootRef: subItemsListRef };
-  const subItemsVisibilityHandlers = useMemo(
-    () =>
-      subItems.map((_, index) => (isIntersecting: boolean) => {
-        setVisibleItemsCount(
-          isIntersecting
-            ? handleIntersectionActivation(index)
-            : handleIntersectionDeactivation(index),
-        );
-      }),
-    [subItems],
-  );
+    const subItemsListRef = useRef<HTMLDivElement | null>(null);
+    const observerOptions: IntersectionObserverOptions = { rootRef: subItemsListRef };
+    const subItemsVisibilityHandlers = useMemo(
+      () =>
+        subItems.map((_, index) => (isIntersecting: boolean) => {
+          setVisibleItemsCount(
+            isIntersecting
+              ? handleIntersectionActivation(index)
+              : handleIntersectionDeactivation(index),
+          );
+        }),
+      [subItems],
+    );
 
-  return (
-    <nav className="relative mt-6">
-      <div ref={subItemsListRef} className="overflow-hidden whitespace-nowrap mr-52 pb-3">
-        {subItems.map((_, i) => (
-          <HeaderSubMenuItem
-            key={String(i)}
-            className={style('mr-8', visibleItemsCount - 1 < i ? 'invisible' : '')}
-            active={_ === activeSubItem}
-            observerOptions={observerOptions}
-            onVisibilityChange={subItemsVisibilityHandlers[i]}
-            {..._}
+    return (
+      <nav className="relative mt-3 flex items-center justify-between">
+        <div ref={subItemsListRef} className="overflow-hidden whitespace-nowrap pb-3 mt-2">
+          {subItems.map((_, i) => (
+            <HeaderSubMenuItem
+              key={String(i)}
+              className={style('ml-8 first:ml-0', visibleItemsCount - 1 < i ? 'invisible' : '')}
+              active={_ === activeSubItem}
+              observerOptions={observerOptions}
+              onVisibilityChange={subItemsVisibilityHandlers[i]}
+              {..._}
+            />
+          ))}
+        </div>
+        {dropDownMenuItems.length ? (
+          <DropdownMenu
+            className="relative w-auto z-40"
+            items={dropDownMenuItems}
+            activeItem={activeSubItem}
+          />
+        ) : null}
+        {projectSettings.CHAT_BOT ? (
+          <HeaderChatBotButton
+            className="ml-9"
+            iconVersion={iconVersion}
+            chat={projectSettings.CHAT_BOT}
           />
-        ))}
-      </div>
-      {dropDownMenuItems.length ? (
-        <DropdownMenu
-          className="absolute w-52 -top-4 right-0 pt-4 z-40"
-          items={dropDownMenuItems}
-          activeItem={activeSubItem}
-        />
-      ) : null}
-    </nav>
-  );
-});
+        ) : null}
+        <InternetBankButton version={version} internetBankUrl={internetBankUrl} />
+      </nav>
+    );
+  },
+);
 
 const handleIntersectionActivation = (index: number) => (prev: number) => Math.max(prev, index + 1);
 const handleIntersectionDeactivation = (index: number) => (prev: number) => Math.min(prev, index);

package/src/components/Header/HeaderSubMenuItem.tsx

@@ -15,7 +15,7 @@ export interface HeaderSubMenuItemProps extends LinkProps {
 }
 
 export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
-  ({ observerOptions, onVisibilityChange, children, ...rest }) => {
+  ({ observerOptions, onVisibilityChange, children, className, ...rest }) => {
     const observerCallback = useCallback(
       (entries: IntersectionObserverEntry[]) => {
         if (!entries.length || !onVisibilityChange) {
@@ -32,7 +32,7 @@ export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
     const ref = useIntersectionObserver<HTMLSpanElement>(observerCallback, observerOptions);
 
     return (
-      <span ref={ref}>
+      <span ref={ref} className={className}>
         <HeaderItem {...rest}>{children}</HeaderItem>
       </span>
     );

package/src/components/Header/HeaderTop.tsx

@@ -23,7 +23,6 @@ export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor, logo }) => (
           className="text-primary-text w-6 h-6"
           width="24"
           height="24"
-          asSVG
         />
       </button>
       <Logo className="mr-8" bgColor={bgColor} logo={logo} />

package/src/components/Header/InternetBankButton.tsx

@@ -0,0 +1,28 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { Button } from '../../ui-kit/Button/Button';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+interface InternetBankButtonProps {
+  version?: BlockVersion;
+  internetBankUrl?: string;
+}
+
+const BUTTON_STYLE = {
+  default: 'px-5 bg-main-divider rounded hover:text-primary-main',
+  transparent: 'text-white hover:text-primary-hover',
+};
+
+export const InternetBankButton = JSX<InternetBankButtonProps>(({ version, internetBankUrl }) => (
+  <Button
+    href={internetBankUrl}
+    ariaLabel="Интернет-банк"
+    target="_blank"
+    className={style(
+      'py-3 ml-3 text-l font-light whitespace-nowrap hover:text-primary-main',
+      BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
+    )}
+  >
+    Интернет-банк
+  </Button>
+));

package/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -18,7 +18,13 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
     ...rest
   }) => (
     <BlockWrapper
-      className={style('grid grid-cols-12', isPadding ? 'p-12' : '', gapStyles[gap], className)}
+      className={style(
+        'relative',
+        'grid grid-cols-12',
+        isPadding ? 'p-12' : '',
+        gapStyles[gap],
+        className,
+      )}
       version={version}
       isTheme={isTheme}
       {...rest}