@redneckz/wildless-cms-uni-blocks 0.6.37 → 0.6.38

package/mobile/src/services/BlockRouter/useBlockRouterProvider.ts

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import type { BlockDef } from '../../model/ContentPageDef';
+import { debounce } from '../../utils/debounce';
+import { BlockRouter } from './BlockRouter';
+import { findActiveBlock } from './findActiveBlock';
+
+const isScrolledEnough = () => globalThis.scrollY > (globalThis.innerHeight * 3) / 4;
+
+export function useBlockRouterProvider(
+  router: BlockRouter = BlockRouter.inst,
+  scrollTarget: EventTarget = globalThis,
+) {
+  const intersectionsMapRef = useRef<Map<BlockDef, IntersectionObserverEntry>>(new Map());
+
+  useEffect(
+    () =>
+      router.eventBus.subscribe('intersection', ({ block, intersection }) => {
+        if (intersectionsMapRef.current) {
+          intersectionsMapRef.current.set(block, intersection);
+        }
+      }),
+    [router],
+  );
+
+  useEffect(() => {
+    const handleScroll = debounce(() => {
+      if (!isScrolledEnough()) {
+        router.reset();
+
+        return;
+      }
+
+      const activeBlock = findActiveBlock([...(intersectionsMapRef.current || [])]);
+
+      if (activeBlock?.anchor) {
+        router.replace(activeBlock.anchor);
+      } else if (!activeBlock) {
+        router.reset();
+      }
+    }, 100);
+
+    scrollTarget.addEventListener('scroll', handleScroll);
+
+    return () => {
+      handleScroll.dispose();
+      scrollTarget.removeEventListener('scroll', handleScroll);
+    };
+  }, [router, scrollTarget]);
+}

package/mobile/src/ui-kit/BenefitItem/BenefitItem.tsx

@@ -55,5 +55,5 @@ function getBenefitIconBgStyle(version: BlockVersion, benefitsVersion: IconVersi
     bgColorStyle = 'bg-secondary-light text-primary-main';
   }
 
-  return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
+  return `w-12 h-12 min-w-12 rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
 }

package/mobile/src/ui-kit/BlockWrapper.tsx

@@ -1,10 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { AnchorClickScrollingEvent } from '../components/Tabs/Tabs';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../EventBus/EventBus';
-import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
 import type { UniBlockProps } from '../model/JSXBlock';
-import { changeHashOnObserve } from '../utils/changeHashOnObserve';
+import { useBlockIntersectionObserver } from '../services/BlockRouter/useBlockIntersectionObserver';
 
 interface BlockWrapperProps extends UniBlockProps {
   tag?: keyof HTMLElementTagNameMap;
@@ -15,49 +13,28 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
   ({ className, block, tag = 'section', role, children }) => {
     const Tag: any = tag;
 
-    const { anchor, labels } = block || {};
+    const ref = useBlockIntersectionObserver(block);
 
     const [isVisible, setVisible] = useState(true);
-    const anchorClickRef = useRef<AnchorClickScrollingEvent>({});
-
-    const observerCallback = useMemo(
-      () => changeHashOnObserve({ anchor, anchorClickRef }),
-      [anchor],
-    );
-    const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
-
-    useEffect(
-      () =>
-        EventBus.inst.subscribe('anchorClick', (e) => {
-          setVisible(true);
-          anchorClickRef.current = e;
-        }),
-      [],
-    );
     useEffect(
       () =>
         EventBus.inst.subscribe('tab', (event) => {
           if (event.type === 'group') {
-            const hasSettings = labels?.length || block?.anchor;
-            setVisible(event.label ? !hasSettings || Boolean(labels?.includes(event.label)) : true);
+            const hasSettings = block?.labels?.length || block?.anchor;
+            setVisible(
+              event.label ? !hasSettings || Boolean(block?.labels?.includes(event.label)) : true,
+            );
           } else {
-            changeHash(event.label);
             setVisible(true);
           }
         }),
-      [],
+      [block],
     );
 
     return isVisible ? (
-      <Tag className={className} role={role} {...(anchor ? { id: anchor, ref } : {})}>
+      <Tag className={className} role={role} {...(block?.anchor ? { id: block.anchor, ref } : {})}>
         {children}
       </Tag>
     ) : null;
   },
 );
-
-function changeHash(label?: string) {
-  if (label) {
-    globalThis.document.location.hash = label;
-  }
-}

package/mobile/src/ui-kit/HeaderItem/HeaderItem.tsx

@@ -5,7 +5,7 @@ import type { TopItemProps } from '../TopItem/TopItem';
 export type HeaderItemProps = TopItemProps;
 
 const TEXT_CLASSES = 'font-sans text-s';
-const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
+const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-0.5';
 
 export const HeaderItem = JSX<HeaderItemProps>(
   ({ className = '', text, href, target, active, onClick, children, bgColor = 'bg-white' }) => {

package/mobile/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -1,9 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
 import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
-import type { TariffsTableInnerEvent } from './InnerTableProps';
+import type { TariffsTableInnerContent } from './InnerTableProps';
 
-export interface TableInnerButtonProps extends TariffsTableInnerEvent {
+export interface TableInnerButtonProps
+  extends Partial<TariffsTableCellIndexProps>,
+    TariffsTableInnerContent {
   onClick?: () => void;
   isOpen?: boolean;
 }

package/mobile/src/ui-kit/InnerTable/InnerTableProps.ts

@@ -1,5 +1,3 @@
-import type { TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
-
 export type RowsData = {
   data?: string;
   cols?: string[];
@@ -25,7 +23,3 @@ export interface TariffsTableInnerContent {
   /** @title Ссылка PDF-файл */
   pdfUrl?: string;
 }
-
-export interface TariffsTableInnerEvent
-  extends Partial<TariffsTableCellIndexProps>,
-    TariffsTableInnerContent {}

package/mobile/src/ui-kit/Select/Select.tsx

@@ -46,7 +46,7 @@ export const Select = JSX<SelectProps>(
             ${getBorderStyle(isBorder)}`}
             onClick={() => setIsOpen(!isOpen)}
           >
-            <p className="p-4 pr-8 h-[56px] overflow-hidden text-ellipsis whitespace-nowrap">
+            <p className="p-4 pr-8 h-14 overflow-hidden text-ellipsis whitespace-nowrap">
               {selectedItem?.text || placeholder}
             </p>
             <Icon
@@ -59,7 +59,7 @@ export const Select = JSX<SelectProps>(
           {options?.length ? (
             <div className={`h-0 ${renderOptionsStyle(isOpen)}`}>
               <div
-                className={`bg-white text-l max-h-[256px] overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`}
+                className={`bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`}
               >
                 {options.map(renderOption(choiceOption, isOpen, isSelected))}
               </div>

package/mobile/src/ui-kit/YandexMap/useYandexMaps.ts

@@ -5,7 +5,9 @@ import { projectSettings } from '../../ProjectSettings';
 const YMAPS_NAMESPACE = 'ymaps';
 
 export const useYandexMaps = () => {
-  const url = `https://api-maps.yandex.ru/2.1/?apikey=${projectSettings.YANDEX_MAP_API_KEY}&lang=ru_RU`;
+  const url = `https://api-maps.yandex.ru/2.1/?apikey=${
+    projectSettings.YANDEX_MAP_API_KEY || ''
+  }&lang=ru_RU`;
 
   return useExternalNS<typeof ymaps>(YMAPS_NAMESPACE, url);
 };

package/mobile/src/utils/adjustHref.ts

@@ -1,3 +1,4 @@
+import { projectSettings } from '../ProjectSettings';
 import { getOrigin } from './url';
 
 export const adjustHref = (
@@ -8,8 +9,9 @@ export const adjustHref = (
     return href;
   }
 
+  const hrefWithBasePath = `${projectSettings.BASE_PATH || ''}${href}`;
   const origin = getOrigin(router?.href);
 
   // Relative URL
-  return origin ? href.replace(origin, '') || '/' : href;
+  return origin ? hrefWithBasePath.replace(origin, '') || '/' : hrefWithBasePath;
 };

package/mobile/src/utils/debounce.ts

@@ -0,0 +1,24 @@
+type DebouncedCallback<Args extends any[]> = ((...args: Args) => void) & {
+  dispose: () => void;
+};
+
+export const debounce = <Args extends any[]>(
+  fn: (...args: Args) => void,
+  delay = 600,
+): DebouncedCallback<Args> => {
+  let timerId: ReturnType<typeof setTimeout>;
+
+  const debouncedCallback: DebouncedCallback<Args> = (...args: Args): void => {
+    debouncedCallback.dispose();
+    timerId = setTimeout(() => {
+      fn(...args);
+    }, delay);
+  };
+  debouncedCallback.dispose = () => {
+    if (timerId) {
+      clearTimeout(timerId);
+    }
+  };
+
+  return debouncedCallback;
+};

package/package.json

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

package/src/EventBus/EventBus.ts

@@ -1,21 +1,21 @@
 import type { EventMap } from './EventMap';
 
-type Subscriber = (ev: EventMap[keyof EventMap]) => void;
+export type BaseEventMap = Record<string, any>;
 
-export class EventBus {
-  public static readonly inst = new EventBus();
+export class EventBus<EM extends BaseEventMap> {
+  public static readonly inst = new EventBus<EventMap>();
 
-  private subscribers: Partial<Record<keyof EventMap, Subscriber[]>> = {};
-  private subjectsStateMap: Partial<EventMap> = {};
+  private subscribers: Partial<Record<keyof EM, Array<(ev: EM[keyof EM]) => void>>> = {};
+  private subjectsStateMap: Partial<EM> = {};
 
-  subscribe<T extends keyof EventMap>(type: T, listener: (event: EventMap[T]) => void) {
-    this.subscribers[type] ||= [];
-    this.subscribers[type]?.push(listener);
+  subscribe<K extends keyof EM>(type: K, listener: (event: EM[K]) => void) {
+    this.subscribers[type] = (this.subscribers[type] || []).concat(
+      listener as (ev: EM[keyof EM]) => void,
+    );
 
     const latestEvent = this.subjectsStateMap[type];
-
     if (latestEvent) {
-      listener(latestEvent as EventMap[T]);
+      listener(latestEvent as EM[K]);
     }
 
     return () => {
@@ -23,16 +23,20 @@ export class EventBus {
     };
   }
 
-  private unsubscribe<T extends keyof EventMap>(type: T, listener: (event: EventMap[T]) => void) {
+  private unsubscribe<K extends keyof EM>(type: K, listener: (event: EM[K]) => void) {
     this.subscribers[type] = this.subscribers[type]?.filter((s) => s !== listener);
   }
 
-  fire<T extends keyof EventMap>(type: T, event: EventMap[T]) {
-    this.subjectsStateMap[type] = event;
+  fire<K extends keyof EM>(type: K, event: EM[K]) {
+    const isSubjectDeclared = type in this.subjectsStateMap;
+    if (isSubjectDeclared) {
+      this.subjectsStateMap[type] = event;
+    }
+
     this.subscribers[type]?.forEach((s) => s(event));
   }
 
-  subject<T extends keyof EventMap>(type: T, event: EventMap[T]) {
+  subject<K extends keyof EM>(type: K, event: EM[K]) {
     this.subjectsStateMap[type] = event;
   }
 }

package/src/EventBus/EventMap.ts

@@ -1,8 +1,5 @@
-import type { AnchorClickScrollingEvent, TabActivationEvent } from '../components/Tabs/Tabs';
-import type { TariffsTableInnerEvent } from '../ui-kit/InnerTable/InnerTableProps';
+import type { TabActivationEvent } from '../components/Tabs/Tabs';
 
 export interface EventMap {
   tab: TabActivationEvent;
-  tariffInnerTable: TariffsTableInnerEvent;
-  anchorClick: AnchorClickScrollingEvent;
 }

package/src/ProjectSettings.ts

@@ -7,6 +7,7 @@ export interface ProjectSettings {
   SITEMAP?: string;
   FOOTER?: string;
   CDN?: string; // Should ends with "/"
+  BASE_PATH?: string; // Should ends with "/"
   YANDEX_MAP_API_KEY?: string;
   YANDEX_METRIKA_ID?: string;
 }
@@ -45,6 +46,9 @@ export const projectSettings = new (class implements ProjectSettings {
   get CDN() {
     return this._.CDN;
   }
+  get BASE_PATH() {
+    return this._.BASE_PATH;
+  }
   get YANDEX_MAP_API_KEY() {
     return this._.YANDEX_MAP_API_KEY;
   }

package/src/components/Accordion/Accordion.tsx

@@ -13,7 +13,7 @@ export interface AccordionProps extends AccordionContent, UniBlockProps {}
 export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
   ({ className = '', title, accordionAlignTitle = 'center', description, ...rest }) => (
     <BlockWrapper
-      className={`p-[50px] mb-1 last:mb-0 bg-white text-primary-text ${className}`}
+      className={`p-12 mb-1 last:mb-0 bg-white text-primary-text ${className}`}
       {...rest}
     >
       {title ? (

package/src/components/AccordionItem/AccordionItem.mobile.tsx

@@ -37,7 +37,7 @@ export const AccordionItem: JSXBlock<AccordionItemProps> = JSX<AccordionItemProp
           )}
           renderFoldButton={({ isUnfolded, onToggle }) => (
             <FoldButton
-              className={bordered ? '' : 'py-[14px] px-0'}
+              className={bordered ? '' : 'py-3.5 px-0'}
               label={label}
               icon={icons[Number(isUnfolded)]}
               primaryIcon={labelIcon}

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -55,7 +55,7 @@ const renderStep = (version: BlockVersion) => (benefit: BenefitBlockItemProps, i
     <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
       {benefit?.icon?.icon ? (
         <Img
-          className={`w-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[version]}`}
+          className={`w-12 h-12 min-w-12 p-3 rounded-full ${benefitsIconStyleMap[version]}`}
           image={getIconWithVersion(benefit.icon, version)}
           asSVG
         />

package/src/components/Bonus/Bonus.tsx

@@ -12,7 +12,7 @@ export const Bonus = JSX<BonusProps>((props) => {
   const { className = '', title, description, bonusItems, ...rest } = props;
 
   return (
-    <BlockWrapper className={`font-sans bg-white p-[50px] pb-9 ${className}`} {...rest}>
+    <BlockWrapper className={`font-sans bg-white p-12 pb-9 ${className}`} {...rest}>
       <div className="container">
         <Headline
           className="!p-0"
@@ -76,6 +76,4 @@ const renderBonusCount = (_: BonusCountDef) => (
 );
 
 const renderBonusImage = (_: BonusImageDef) =>
-  _.image ? (
-    <Img className={`w-[50px] h-[50px] min-w-[50px] p-3 rounded-full`} image={_.image} />
-  ) : null;
+  _.image ? <Img className={`w-12 h-12 min-w-12 p-3 rounded-full`} image={_.image} /> : null;

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -23,7 +23,7 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
     ...rest
   }) => (
     <BlockWrapper
-      className={`font-sans text-primary-text bg-white p-[50px] flex flex-col text-center ${className}`}
+      className={`font-sans text-primary-text bg-white p-12 flex flex-col text-center ${className}`}
       {...rest}
     >
       <Headline

package/src/components/BusinessBlock/BusinessBlock.tsx

@@ -9,7 +9,7 @@ export interface BusinessBlockProps extends BusinessBlockContent, UniBlockProps
 
 export const BusinessBlock = JSX<BusinessBlockProps>(
   ({ className = '', title, cards, ...rest }) => (
-    <BlockWrapper className={`font-sans bg-white p-[50px] pb-9 ${className}`} {...rest}>
+    <BlockWrapper className={`font-sans bg-white p-12 pb-9 ${className}`} {...rest}>
       <Heading headingType="h3" title={title} className="text-center mb-8" />
       <div className="flex gap-5">
         {cards?.length ? cards.map((_, i) => <BusinessCard key={String(i)} {..._} />) : null}

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -43,7 +43,6 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
       isMonthlyInterestPayment,
     };
     const handleMonthsValue = useCallback((_: number) => setMonthsValue(_), []);
-    const [isEveryMonth, toggleIsEveryMonth] = useState(false);
 
     const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir);
     const { income, finalSum, rate } = calculatorParams;

package/src/components/Calculator/renderProposal.tsx

@@ -1,12 +1,12 @@
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { Button } from '../../ui-kit/Button/Button';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 
 export function renderProposal(monthlyPayment: number) {
   return (
     <div className="box-border ">
       <div className="text-l-light">Ежемесячный платёж</div>
       <div className="text-h3 mb-3">{addSpacesBetweenNumbers(Math.round(monthlyPayment))} ₽</div>
-      <Button className="mt-[50px] w-full" text="Отправить заявку" version="primary" href="#" />
+      <Button className="mt-12 w-full" text="Отправить заявку" version="primary" href="#" />
     </div>
   );
 }

package/src/components/CardTransfer/CardTransfer.tsx

@@ -38,7 +38,7 @@ export const CardTransfer = JSX<CardTransferProps>(
 
     return (
       <BlockWrapper
-        className={`p-[50px] flex flex-col items-center font-sans bg-white ${className}`}
+        className={`p-12 flex flex-col items-center font-sans bg-white ${className}`}
         {...rest}
       >
         {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}

package/src/components/CarouselProgramsCard/CarouselProgramsCard.fixture.tsx

@@ -1,5 +1,4 @@
 import type { Picture } from '../../model/Picture';
-import { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { CarouselProgramsCard } from './CarouselProgramsCard';
 import { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
 

package/src/components/Catalog/Catalog.example.json

@@ -14,7 +14,7 @@
           }
         },
         "button": {
-          "href": "",
+          "href": "#Accordion-0",
           "text": "Подробнее",
           "target": "_self",
           "version": "primary"

package/src/components/Catalog/Catalog.tsx

@@ -22,7 +22,7 @@ export const Catalog = JSX<CatalogProps>(
 
     return (
       <BlockWrapper
-        className={`bg-white relative font-sans p-[50px] overflow-hidden text-center ${className}`}
+        className={`bg-white relative font-sans p-12 overflow-hidden text-center ${className}`}
         {...rest}
       >
         <Headline

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -24,7 +24,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
 
     return (
       <BlockWrapper
-        className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className}`}
+        className={`bg-white font-sans py-12 pl-12 overflow-hidden text-primary-text relative ${className}`}
         {...rest}
       >
         <Heading
@@ -54,7 +54,7 @@ const renderShowMoreToggleButton = ({
   isShowAllRow: boolean;
   onClick: () => void;
 }) => (
-  <div className="pr-[50px]">
+  <div className="pr-12">
     <div className="flex w-full">
       <div className={FIRST_CELL_CLASSES} />
       <button

package/src/components/ContactsBlock/ContactsBlock.tsx

@@ -18,7 +18,7 @@ interface RenderContactsColumnProps {
 
 export const ContactsBlock = JSX<ContactsBlockProps>(
   ({ className = '', contacts, info, version = 'secondary', ...rest }) => (
-    <BlockWrapper className={`${VersionStyleMap[version]} flex p-[50px] ${className}`} {...rest}>
+    <BlockWrapper className={`${VersionStyleMap[version]} flex p-12 ${className}`} {...rest}>
       {info?.length ? renderBlocks(info, version) : null}
       {contacts?.length ? renderBlocks(contacts, version) : null}
     </BlockWrapper>

package/src/components/ContentPage/ContentPage.tsx

@@ -5,6 +5,7 @@ import type { BlockDecorator } from '../../model/BlockDecorator';
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { ContentPageDef } from '../../model/ContentPageDef';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { useBlockRouterProvider } from '../../services/BlockRouter/useBlockRouterProvider';
 import { style2className } from '../../utils/style2className';
 import { LikeControl } from '../LikeControl/LikeControl';
 
@@ -27,6 +28,8 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>((pr
     parent: data,
   };
 
+  useBlockRouterProvider();
+
   return (
     <section
       className={`relative ${style2className(pageStyle)} ${className}`}

package/src/components/ContentPage/useContentPageData.ts

@@ -3,13 +3,7 @@ import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { BlockDef, ContentPageDef } from '../../model/ContentPageDef';
 import baseData from './ContentPage.page.json';
 
-const BLOCK_TYPES_BLACK_LIST = [
-  'Header',
-  'Footer',
-  'Placeholder',
-  'AccordionItem',
-  'OtherProductsItem',
-];
+const BLOCK_TYPES_BLACK_LIST = ['Header', 'Footer', 'Placeholder'];
 
 export function useContentPageData(blocksRegistry: BlocksRegistry): ContentPageDef {
   const [data, setData] = useState<ContentPageDef>(baseData);
@@ -26,11 +20,13 @@ const contentPageData = async (blocksRegistry: BlocksRegistry): Promise<ContentP
   blocks: await Promise.all(
     Object.keys(blocksRegistry)
       .filter((type) => !BLOCK_TYPES_BLACK_LIST.includes(type))
+      .filter((type) => !type.endsWith('Item'))
       .sort()
       .map(
-        async (type): Promise<BlockDef> => ({
+        async (type, i): Promise<BlockDef> => ({
           type,
           style: ['col-span-12'],
+          anchor: `${type}-${i}`,
           content: {},
           ...(await blockContentExample(type)),
         }),

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -26,7 +26,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
 
     return (
       <BlockWrapper
-        className={`bg-white text-primary-text font-sans p-9 box-border min-h-[320px] ${className}`}
+        className={`bg-white text-primary-text font-sans p-9 box-border min-h-80 ${className}`}
         {...rest}
       >
         <BaseTile

package/src/components/Footer/Footer.tsx

@@ -20,13 +20,13 @@ export interface FooterProps extends FooterContent, UniBlockProps {}
 export const Footer = JSX<FooterProps>(({ className, ...rest }) => {
   const fallback = rest.options?.page?.fallback;
 
-  const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems } =
+  const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, logo } =
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
   return (
     <BlockWrapper tag="footer" className={`p-9 bg-white font-sans ${className || ''}`} {...rest}>
       <div className="flex items-stretch gap-[54px] pb-[30px] xl:gap-8">
-        <Logo className={LEFT_COL_WIDTH_FULL_HD} />
+        <Logo className={LEFT_COL_WIDTH_FULL_HD} logo={logo} />
         <SearchBar className="grow" />
       </div>
       <div className="flex items-stretch gap-[54px] xl:gap-8">

package/src/components/Footer/FooterDataProps.ts

@@ -1,6 +1,7 @@
-import { LinkCommonProps, LinkProps } from '../../model/LinkProps';
-import { SitemapDataProps } from '../../services/sitemap/SitemapProps';
-import { ContactInfo, SubMenuItem } from './FooterContent';
+import type { LinkCommonProps, LinkProps } from '../../model/LinkProps';
+import type { Picture } from '../../model/Picture';
+import type { SitemapDataProps } from '../../services/sitemap/SitemapProps';
+import type { ContactInfo, SubMenuItem } from './FooterContent';
 
 export interface FooterDataProps extends SitemapDataProps {
   documents?: LinkProps[];
@@ -10,4 +11,8 @@ export interface FooterDataProps extends SitemapDataProps {
   mobileApps?: LinkCommonProps[];
   horizontalNavigationTitle?: string; // TODO: для мобильной версии
   subMenu?: SubMenuItem[]; // TODO: для мобильной версии
+  logo?: {
+    image?: Picture;
+    title?: string;
+  };
 }

package/src/components/Footer/MediaButton.tsx

@@ -56,7 +56,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ version = 'primary', ...rest
   const classes =
     version === 'secondary'
       ? 'bg-white hover:bg-secondary-hover'
-      : 'border-solid border-[1px] border-main-divider hover:border-transparent hover:bg-primary-main';
+      : 'border-solid border border-main-divider hover:border-transparent hover:bg-primary-main';
 
   const isPrimary = version === 'primary';
 

package/src/components/Gallery/Gallery.mobile.tsx

@@ -38,7 +38,7 @@ function renderCardsLayout(orientation: ListOrientation, cards: GalleryCardProps
   return orientation === 'horizontal' ? (
     <SwipeListControl>{cards?.map(renderCard)}</SwipeListControl>
   ) : (
-    <div className="grid gap-[14px]">{cards?.map(renderCard)}</div>
+    <div className="grid gap-3.5">{cards?.map(renderCard)}</div>
   );
 }
 

package/src/components/Gallery/GalleryCardInner.tsx

@@ -46,7 +46,7 @@ const renderImage = (image?: Picture, version?: BlockVersion) => (
     {image?.src ? <Img className="mb-5" image={image} /> : null}
     {image?.icon ? (
       <Img
-        className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`}
+        className={`w-8 h-8 min-w-8 mb-5 rounded-full`}
         image={getIconWithVersion(image, version)}
         asSVG
       />