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

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

@@ -20,11 +20,11 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     ...rest
   }) => {
     const [isShowAllRow, setIsShowAllRow] = useState(!visibleRowLength);
-    const showToggle = useCallback(() => setIsShowAllRow((_) => !_), []);
+    const handleToggle = useCallback(() => setIsShowAllRow((_) => !_), []);
 
     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
@@ -40,7 +40,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
           visibleRowLength={visibleRowLength}
         />
         {visibleRowLength
-          ? renderShowMoreToggleButton({ isShowAllRow, onClick: showToggle })
+          ? renderShowMoreToggleButton({ isShowAllRow, onClick: handleToggle })
           : null}
       </BlockWrapper>
     );
@@ -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

@@ -19,6 +19,7 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
     items,
     button,
     version,
+    isFullWidth = true,
     isDotted = true,
     align = 'center',
   }) => (
@@ -30,7 +31,12 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
         {items?.length ? renderItems(items, isDotted, version) : null}
         {renderAdditionalDescription(additionalDescription)}
       </div>
-      {button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : null}
+      {button?.text
+        ? renderButton({
+            button,
+            buttonClassName: `mt-6 ${isFullWidth ? '' : 'self-center'}`,
+          })
+        : null}
     </div>
   ),
 );
@@ -40,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
       />

package/src/components/Gallery/GalleryContent.ts

@@ -52,6 +52,11 @@ export type GalleryCardProps = HeadlineSmallProps & {
    * @default center
    */
   align?: AlignType;
+  /**
+   * @title Кнопка по всей ширине
+   * @default true
+   */
+  isFullWidth?: boolean;
 };
 
 /**

package/src/components/Gallery/GalleryInner.tsx

@@ -38,7 +38,6 @@ export const GalleryInner = JSX<GalleryInnerProps>(
             <div className="absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" />
           </div>
         ) : null}
-
         {button ? renderButton({ button, buttonClassName: 'mt-8 mx-auto' }) : null}
       </BlockWrapper>
     );

package/src/components/GracePeriod/GracePeriod.tsx

@@ -13,7 +13,7 @@ export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
   ({ className = '', title, description, calendar, ...rest }) => (
-    <BlockWrapper className={`font-sans bg-white p-[50px] ${className}`} {...rest}>
+    <BlockWrapper className={`font-sans bg-white p-12 ${className}`} {...rest}>
       <Headline
         className="!p-0 mb-4"
         title={title}
@@ -80,7 +80,7 @@ const renderMonthImages = (item: MappedCalendarItemProps) =>
     _.image?.src ? (
       <div
         key={`monthImage-${_.image.src}`}
-        className="h-[207px] border-r-[1px] pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0"
+        className="h-[207px] border-r pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0"
       >
         <Img image={_.image} className="flex" />
       </div>

package/src/components/Header/Header.mobile.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useRouter } from '../../hooks/useRouter';
 import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
@@ -30,16 +30,14 @@ export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white',
   const activeTopItem = topItems?.find(isTopItemActive(router));
   const subItems = activeTopItem?.items;
   const activeSubItem = findActiveSubItem(router)(subItems);
-
   const [burgerMenuShow, setBurgerMenuShow] = useState(false);
-
-  const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
+  const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
 
   return (
     <header className={`${bgColor} ${className}`}>
       <div className="container px-4 py-0 box-border">
-        <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
-        <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
+        <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} />
+        <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-12">
           <div className="flex no-scrollbar horizontal-list h-full items-center">
             {subItems?.map((_, i) => (
               <HeaderItem
@@ -55,7 +53,7 @@ export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white',
       </div>
       {burgerMenuShow ? (
         <HeaderBurger
-          onClick={toggleBurgerMenu}
+          onClick={handleBurgerMenuShow}
           burgerSubMenu={dispositions}
           defaultLocation={defaultLocation}
         >

package/src/components/Header/Header.tsx

@@ -61,7 +61,7 @@ export const Header = JSX<HeaderProps>(
               bgColor={bgColor}
             />
           </div>
-          <div className={`mt-6 h-[1px] ${BORDER_COLORS[bgColor]}`} />
+          <div className={`mt-6 h-px ${BORDER_COLORS[bgColor]}`} />
           {showSubMenu && activeTopItem?.items?.length ? (
             <HeaderSubMenu subItems={activeTopItem.items} bgColor={bgColor} />
           ) : null}

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -66,7 +66,7 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
-          className={`${LINKS_COLORS_MAP[bgColor]} group min-w-[32px] min-h-[32px]`}
+          className={`${LINKS_COLORS_MAP[bgColor]} group min-w-8 min-h-8`}
           ariaLabel="Дополнительные ссылки"
         >
           <Img

package/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -9,7 +9,7 @@ export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
   ({ className = '', children, ariaLabel }) => (
     <button
       type="button"
-      className={`border-0 p-0 w-[24px] h-[24px] flex items-center bg-inherit cursor-pointer ${className}`}
+      className={`border-0 p-0 w-6 h-6 flex items-center bg-inherit cursor-pointer ${className}`}
       disabled={true}
       aria-label={ariaLabel}
     >

package/src/components/Header/HeaderSubMenu.tsx

@@ -19,6 +19,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [], bgColor }
   const activeSubItem = findActiveSubItem(router)(subItems);
 
   const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
+
   const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
   const subItemsListRef = useRef<HTMLDivElement | null>(null);

package/src/components/Header/HeaderTop.tsx

@@ -8,7 +8,7 @@ export interface HeaderTopProps {
   bgColor?: BgColorVersion;
 }
 export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
-  <div className="flex items-center justify-between border-0 border-b border-main-divider h-[50px]">
+  <div className="flex items-center justify-between border-0 border-b border-main-divider h-12">
     <div className="flex items-center">
       <button
         className="pl-0 pr-4 border-0 bg-transparent cursor-pointer"

package/src/components/Headline/Headline.tsx

@@ -24,7 +24,7 @@ export const Headline = JSX<HeadlineProps>(
 
     return (
       <BlockWrapper
-        className={`font-sans flex flex-col p-[50px] ${SIZE_MAPS.gap} ${STYLE_MAPS.background} ${className}`}
+        className={`font-sans flex flex-col p-12 ${SIZE_MAPS.gap} ${STYLE_MAPS.background} ${className}`}
         {...rest}
       >
         {title ? (

package/src/components/ImgBlock/ImgBlock.example.json

@@ -0,0 +1,11 @@
+{
+  "content": {
+    "image": {
+      "format": "webp",
+      "size": {
+        "width": 400,
+        "height": 300
+      }
+    }
+  }
+}

package/src/components/ImgBlock/ImgBlock.fixture.tsx

@@ -0,0 +1,21 @@
+import type { Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { ImgBlock } from './ImgBlock';
+
+const image: Picture = {
+  src: 'legal-support-business.png',
+  format: 'webp',
+  size: {
+    width: 200,
+    height: 200,
+  },
+  alt: 'Варианты потребительского кредита',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ImgBlock className="col-span-12" image={image} />
+    </div>
+  ),
+};

package/src/components/ImgBlock/ImgBlock.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Img } from '../../ui-kit/Img/Img';
+import type { ImgBlockContent } from './ImgBlockContent';
+
+interface ImgBlockProps extends ImgBlockContent, UniBlockProps {}
+
+export const ImgBlock = JSX<ImgBlockProps>((props) => {
+  const { className, image, ...rest } = props;
+
+  return (
+    <BlockWrapper className={className} {...rest}>
+      <Img image={image} />
+    </BlockWrapper>
+  );
+});

package/src/components/ImgBlock/ImgBlock.ui.json

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "image": {
+      "ui:field": "picture"
+    }
+  }
+}

package/src/components/ImgBlock/ImgBlockContent.ts

@@ -0,0 +1,8 @@
+import type { Picture } from '../../model/Picture';
+
+/**
+ * @title Картинка
+ */
+export interface ImgBlockContent {
+  image?: Picture;
+}

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -1,15 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
 import { InsuranceAmountBlockInner } from './InsuranceAmountBlockInner';
 
-interface RenderNavButtonProps {
+interface NavButtonProps {
   title?: string;
   i: number;
-  activeSlideIndex?: number;
+  isActive: boolean;
   onClick: () => void;
 }
 
@@ -18,10 +18,11 @@ export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent,
 export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
   ({ className = '', title, insuranceTabs = [], button, ...rest }) => {
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+    const handleActiveSlideIndex = useCallback((_: number) => setActiveSlideIndex(_), []);
 
     return (
       <BlockWrapper
-        className={`box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`}
+        className={`box-border py-12 overflow-hidden relative font-sans w-100 bg-white ${className}`}
         {...rest}
       >
         {title ? <Heading className="text-center mb-8" title={title} headingType="h3" /> : null}
@@ -31,8 +32,8 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
               renderNavButton({
                 title: item?.title,
                 i,
-                activeSlideIndex,
-                onClick: () => setActiveSlideIndex(i),
+                isActive: Boolean(i === activeSlideIndex),
+                onClick: () => handleActiveSlideIndex(i),
               }),
             )}
           </div>
@@ -62,12 +63,8 @@ const renderInsuranceGalleries = ({ insuranceTabs, button }: InsuranceAmountBloc
     : null;
 };
 
-function renderNavButton({ title, i, activeSlideIndex, onClick }: RenderNavButtonProps) {
-  const isActiveBtn = i === activeSlideIndex;
-
-  const btnClassName = isActiveBtn
-    ? 'bg-primary-main text-white rounded-md'
-    : `text-secondary-text`;
+function renderNavButton({ title, i, isActive, onClick }: NavButtonProps) {
+  const btnClassName = isActive ? 'bg-primary-main text-white rounded-md' : `text-secondary-text`;
 
   return (
     <button

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -20,7 +20,7 @@ type InsuranceGalleryProps = {
   onClick: (index: number) => void;
 };
 
-type InsuranceSlideProps = {
+type NavButtonProps = {
   slide: CardItem;
   i: number;
   isActive: boolean;
@@ -53,7 +53,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
             : null}
           {renderArrows({
             ...controls,
-            btnClass: ['left-[50px]', 'right-[50px]'],
+            btnClass: ['left-12', 'right-12'],
             className: 'top-[62px]',
           })}
           {canDec ? (
@@ -63,7 +63,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
             <div className="absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" />
           ) : null}
         </div>
-        <Button className="w-[240px] text-center" version="primary" {...button} href={activeHref} />
+        <Button className="w-60 text-center" version="primary" {...button} href={activeHref} />
       </section>
     );
   },
@@ -74,13 +74,10 @@ function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: Insur
   const cardsAlignStyle = cards.length > 2 ? 'justify-start' : 'justify-center';
 
   return (
-    <div
-      style={{ transform: `translateX(-${tabsShiftWidth}px)` }}
-      className="duration-1000 px-[50px]"
-    >
+    <div style={{ transform: `translateX(-${tabsShiftWidth}px)` }} className="duration-1000 px-12">
       <div className={`w-full flex flex-nowrap gap-3.5 pb-12 ${cardsAlignStyle}`}>
         {cards.map((slide, i) =>
-          renderSlide({
+          renderNavButton({
             slide,
             i,
             isActive: Boolean(i === selectedCardIndex),
@@ -92,7 +89,7 @@ function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: Insur
   );
 }
 
-function renderSlide({ slide, i, isActive, onClick }: InsuranceSlideProps) {
+function renderNavButton({ slide, i, isActive, onClick }: NavButtonProps) {
   const btnClassName = isActive
     ? 'shadow-dark-blue/42 border-primary-main'
     : `ease-in duration-300 border-main-stroke`;

package/src/components/LinkDocs/LinkDocs.tsx

@@ -23,10 +23,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     columnsMode = 'double',
     ...rest
   }) => (
-    <BlockWrapper
-      className={`font-sans text-primary-text p-[50px] bg-white ${className}`}
-      {...rest}
-    >
+    <BlockWrapper className={`font-sans text-primary-text p-12 bg-white ${className}`} {...rest}>
       <Headline
         className="!p-0"
         title={title}

package/src/components/LinkList/LinkList.tsx

@@ -7,7 +7,7 @@ import type { LinkListContent } from './LinkListContent';
 export interface LinkListProps extends LinkListContent, UniBlockProps {}
 
 export const LinkList = JSX<LinkListProps>(({ className = '', documents, ...rest }) => (
-  <BlockWrapper className={`font-sans bg-white mt-[10px] ${className}`} {...rest}>
+  <BlockWrapper className={`font-sans bg-white mt-2.5 ${className}`} {...rest}>
     <ul className="flex flex-col text-s text-secondary-text p-0">
       {documents?.length ? renderLinkListItem(documents) : null}
     </ul>

package/src/components/MobileAppTile/MobileAppTile.mobile.tsx

@@ -14,7 +14,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
       >
         {href ? (
           <div className="flex">
-            <div className="flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]">
+            <div className="flex justify-center align-middle rounded-md bg-primary-main w-12 h-12">
               <Logo className="w-8" bgColor="transparent" showTitle />
             </div>
             <a href={href} target="_blank" className="flex flex-col justify-center pl-3">

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -34,7 +34,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
 
     return (
       <BlockWrapper
-        className={`flex justify-between font-sans p-[50px] box-border relative min-h-[320px]
+        className={`flex justify-between font-sans p-12 box-border relative min-h-80
         ${getTileMinHeight(className)}
         ${VersionStyleMap[version]}
         ${className}`}

package/src/components/OfficeMap/useOfficeMap.ts

@@ -11,16 +11,16 @@ export function useOfficeMap(regionCode?: string) {
     regionCode ? `${OFFICE_MAP_URL}?regionCode=${regionCode}` : undefined,
     fetchOfficeMap,
   );
-  console.warn('WARNING!!!  Hook useOfficeMap RETURN MOCK object for testing!');
-  console.log('Hook useOfficeMap get this data:', data);
+
+  console.warn('Hook useOfficeMap RETURNs MOCK object for testing', data);
 
   return OFFICE_MAP;
 }
 
-const fetchOfficeMap = (url?: string) => {
+function fetchOfficeMap(url?: string) {
   if (!url) {
     return {};
   }
 
   return fetchJSON(url, { method: 'GET' });
-};
+}

package/src/components/ParagraphBlock/ParagraphBlock.example.json

@@ -0,0 +1,5 @@
+{
+  "content": {
+    "text": "Текст"
+  }
+}