@redneckz/wildless-cms-uni-blocks 0.3.70 → 0.3.72

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

@@ -7,43 +7,31 @@ const ICONS_MAP: Array<{
   origins: string[];
   icon: Picture;
   label: string;
-  width: string;
-  height: string;
 }> = [
   {
     origins: ['t.me', 'telegram.org'],
     icon: { icon: 'TelegramIcon' },
     label: 'Телеграм',
-    width: '20px',
-    height: '16px',
   },
   {
     origins: ['vk.com'],
     icon: { icon: 'VKIcon' },
     label: 'ВКонтакте',
-    width: '24px',
-    height: '12px',
   },
   {
     origins: ['ok.ru'],
     icon: { icon: 'OkIcon' },
     label: 'Одноклассники',
-    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',
   },
 ];
 
@@ -53,10 +41,12 @@ interface MediaButtonProps {
 }
 
 export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' }) => {
-  const { icon, width, height, label } =
+  const { icon, label } =
     ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
 
-  if (!icon) return null;
+  if (!icon) {
+    return null;
+  }
 
   const classes =
     version === 'secondary'
@@ -77,10 +67,10 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
     >
       {icon ? (
         <Img
-          image={{ ...icon, iconVersion: 'normal' }}
+          image={icon}
           imageClassName={isPrimary ? 'group-hover:text-white' : ''}
-          width={width}
-          height={height}
+          width="24"
+          height="24"
           asSVG
         />
       ) : null}

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

@@ -64,7 +64,7 @@ function renderCard(card: GalleryCard, key: number) {
         ) : null}
         {card.title ? <h3 className={`font-medium text-m-title-xs m-0`}>{card.title}</h3> : null}
         {card.description ? renderDescription(card) : null}
-        {card.items?.length ? renderItems(card.items, card.version, card.isDotted) : null}
+        {card.items?.length ? renderItems(card.items, card.isDotted, card.version) : null}
       </div>
       {card?.button?.text ? renderButton(card.button) : null}
     </div>
@@ -93,7 +93,7 @@ function renderDescription(card: GalleryCard) {
   );
 }
 
-function renderItems(items: GalleryItem[], version: BlockVersion = 'primary', isDotted) {
+function renderItems(items: GalleryItem[], isDotted, version: BlockVersion = 'primary') {
   return (
     <section className="mt-3">
       {items.map((item, i) => (

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

@@ -20,7 +20,7 @@ export const GalleryCardInner = JSX<GalleryCard>(
           {description ? (
             <div className={`font-light text-m-md-new ${title ? 'mt-2' : ''}`}>{description}</div>
           ) : null}
-          {items?.length ? renderItems(items, version, isDotted) : null}
+          {items?.length ? renderItems(items, isDotted, version) : null}
         </div>
         {button?.text ? renderButton(button) : null}
       </div>
@@ -42,7 +42,7 @@ function renderCardTitle(title: string, className: string) {
   return <div className={`text-xl m-0 ${className}`}>{title}</div>;
 }
 
-function renderItems(items: GalleryItem[], version: BlockVersion = 'primary', isDotted: boolean) {
+function renderItems(items: GalleryItem[], isDotted: boolean, version: BlockVersion = 'primary') {
   return (
     <List
       className={`max-w-[308px] mt-2 text-sm ${

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

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { GalleryVersion } from '../../model/GalleryVersion';
 import type { UniBlockProps } from '../../types';
-import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import type { GalleryContent } from './GalleryContent';
 import { galleryLengthForScrollMap } from './constants';
 import { GalleryContainer } from './GalleryContainer';
-import type { GalleryContent } from './GalleryContent';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
 export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
   version?: GalleryVersion;
@@ -37,24 +37,14 @@ export const GalleryInner = JSX<GalleryInnerProps>(
           activeCardIndex={activeCardIndex}
           {...rest}
         />
-        {showPrevButton ? (
-          <ArrowButton
-            className="absolute top-1/2 left-8 z-10 mt-[25px]"
-            onClick={handlePrevClick}
-            ariaLabel="Пролистать влево"
-            data-block-control="scroll-left"
-          />
-        ) : null}
-        {showNextButton ? (
-          <ArrowButton
-            className="absolute top-1/2 right-8 z-10 mt-[25px] rotate-180"
-            onClick={handleNextClick}
-            ariaLabel="Пролистать вправо"
-            data-block-control="scroll-right"
-          />
-        ) : null}
-        <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" />
-        <div className="absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" />
+        {renderArrows({
+          handler: [handlePrevClick, handleNextClick],
+          isShown: [showPrevButton, showNextButton],
+          btnClass: ['left-8', 'right-8'],
+          className: 'top-1/2',
+        })}
+        <div className="absolute top-0 left-0 bottom-0 w-[82px] bg-opacity-from-white" />
+        <div className="absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" />
       </section>
     );
   },

package/mobile/src/components/GroupBlock/BlocksTypeProps.ts

@@ -10,7 +10,10 @@ export interface ActiveHandler {
 }
 
 export interface GroupBlockCommonProps {
-  /** @title Стиль */
+  /**
+   * @title Стиль
+   * @default ["col-span-12"]
+   */
   style?: string[];
   /** @title Теги */
   tags?: string[];

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

@@ -1,27 +1,28 @@
 {
   "tabs": [
-    { "title": "Еще программы", "index": 0 },
-    { "title": "Страхование жизни", "index": 1, "tag": "tag1" },
-    { "title": "Страхование здоровья", "index": 2, "tag": "tag2" }
+    { "title": "Таб 1", "index": 0 },
+    { "title": "Таб 2", "index": 1, "tag": "tag1" },
+    { "title": "Таб 3", "index": 2, "tag": "tag2" }
   ],
+  "isShowCounter": true,
   "blocks": [
     {
       "blockType": "ProductBlock",
       "title": "Продуктовый блок",
       "description": "Описание текстового блока",
-      "tags":["tag2"]
+      "tags": ["tag2"]
     },
     {
       "blockType": "ProductTile",
       "title": "Продуктовая плитка",
       "description": "Описание текстового блока",
-      "tags":["tag1"]
+      "tags": ["tag1"]
     },
     {
       "blockType": "ProductBlock",
       "title": "Продуктовый блок",
       "description": "Описание текстового блока",
-      "tags":["tag2"]
+      "tags": ["tag2"]
     }
   ]
-}
+}

package/mobile/src/components/GroupBlock/GroupBlock.tsx

@@ -14,23 +14,28 @@ export interface GroupBlockProps extends GroupBlockContent, UniBlockProps {
 }
 
 export const GroupBlock = JSX<GroupBlockProps>(
-  ({ className = '', tabs, context, anchor = null, groupBlocks = [] }) => {
+  ({ className = '', tabs, context, anchor = null, groupBlocks = [], isShowCounter }) => {
     const [currentTag, setCurrentTag] = context.useState(tabs?.[0]?.tag);
 
     const filteredBlocks = filterBlocksByTag(groupBlocks, currentTag);
 
     const tabsNewMap = tabs?.map((tab) => {
       const count = tab.tag
-        ? groupBlocks.filter((block) => block?.tags?.includes(`${tab.tag}`)).length
+        ? groupBlocks.filter((block) => block?.tags?.includes(tab.tag as string)).length
         : groupBlocks.length;
 
       return { ...tab, count };
     });
 
     return (
-      <section id={anchor} className={`box-border gap-1 h-12 ${className}`}>
+      <section id={anchor} className={`box-border gap-1 ${className}`}>
         {tabsNewMap?.length ? (
-          <GroupBlockTabs currentTag={currentTag} onTabClick={setCurrentTag} tabs={tabsNewMap} />
+          <GroupBlockTabs
+            currentTag={currentTag}
+            onTabClick={setCurrentTag}
+            tabs={tabsNewMap}
+            isShowCounter={isShowCounter}
+          />
         ) : null}
         {groupBlocks.length ? (
           <GroupBlocksItem context={context} groupBlocks={filteredBlocks} />

package/mobile/src/components/GroupBlock/GroupBlockTabs.tsx

@@ -12,7 +12,7 @@ export interface GroupBlockTabsProps {
 }
 
 export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
-  const { tabs, currentTag, onTabClick, className = '', isShowCounter = true } = props;
+  const { tabs, currentTag, onTabClick, className = '', isShowCounter } = props;
 
   return (
     <div className={`mb-2 box-border flex gap-x-1 ${className}`} role="tablist">
@@ -24,7 +24,7 @@ export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
 const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-m-sm';
 
 const renderTab =
-  (onTabClick: TabClickHandler, isShowCounter: boolean, currentTag?: string) =>
+  (onTabClick: TabClickHandler, isShowCounter?: boolean, currentTag?: string) =>
   (tab: TabsItemProps, i: number) => {
     const isActive = currentTag === tab.tag;
     const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
@@ -42,9 +42,9 @@ const renderTab =
         tag={tab?.tag}
       >
         <div className="flex flex-1 items-center justify-center">
-          {tab?.title ? <h3 className={`mr-8 ${tabText}`}>{tab?.title}</h3> : null}
+          {tab?.title ? <h3 className={tabText}>{tab?.title}</h3> : null}
           {isShowCounter ? (
-            <div className={`flex items-center justify-center ${counterBlockStyle}`}>
+            <div className={`flex items-center justify-center ml-8 ${counterBlockStyle}`}>
               <span>{tab.count}</span>
             </div>
           ) : null}

package/mobile/src/components/GroupBlock/GroupBlocksItem.tsx

@@ -11,7 +11,7 @@ export interface GroupBlocksProps extends GroupBlockContent, UniBlockProps {}
 
 export const GroupBlocksItem = JSX<GroupBlocksProps>(({ groupBlocks, context }) => {
   return (
-    <div className={'grid grid-cols-12 gap-2 box-border'}>
+    <div className="grid grid-cols-12 gap-2 box-border">
       {groupBlocks?.length ? groupBlocks.map(renderBlock(context)) : null}
     </div>
   );

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

@@ -0,0 +1,72 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { LinkProps } from '../../model/LinkProps';
+import type { UniBlockProps } from '../../types';
+import type {
+  ContentPageContext,
+  HandlerDecorator,
+  Router,
+} from '../ContentPage/ContentPageContext';
+
+const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
+  'bg-white': 'bg-primary-text',
+  transparent: 'bg-white',
+};
+
+interface DropdownMenuProps extends UniBlockProps {
+  menuVisible: boolean;
+  toggleMenu: () => void;
+  menuItems: LinkProps[];
+  bgColor?: BgColorVersion;
+  context: ContentPageContext;
+}
+
+export const DropdownMenu = JSX<DropdownMenuProps>((props) => {
+  const { menuVisible, toggleMenu, menuItems, bgColor, context } = props;
+
+  const { useRouter, handlerDecorator } = context;
+
+  const router = useRouter();
+
+  return (
+    <div
+      className={`absolute w-52 -top-4 right-0 pt-4 z-40 ${
+        menuVisible ? 'bg-white rounded-md shadow-blue-gray/24' : ''
+      }`}
+    >
+      <button
+        className="flex justify-between items-center cursor-pointer h-6 ml-6"
+        onClick={toggleMenu}
+        aria-label={`${menuVisible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
+      >
+        {Array(3).fill(bgColor).map(renderDot)}
+      </button>
+      <div
+        className={`flex flex-col rounded-md bg-white p-6 pb-2 ${menuVisible ? '' : 'hidden'}`}
+        aria-hidden={!menuVisible}
+      >
+        {renderDotsSubMenuItems(menuItems, router, handlerDecorator)}
+      </div>
+    </div>
+  );
+});
+
+const renderDotsSubMenuItems = (
+  menuItems: LinkProps[],
+  router: Router,
+  handlerDecorator: HandlerDecorator | undefined,
+) =>
+  menuItems?.map((_) => (
+    <a
+      key={_.href}
+      {...useLink({ router, handlerDecorator }, _)}
+      className="text-base font-light pb-4 hover:text-primary-main"
+    >
+      {_.text}
+    </a>
+  ));
+
+const renderDot = (bgColor: BgColorVersion, i: number) => (
+  <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />
+);

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

@@ -4,14 +4,8 @@ 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 { isSSR } from '../../utils/isSSR';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
-import { headerSubMenuObserver } from './HeaderSubMenuObserver';
-
-const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'bg-primary-text',
-  transparent: 'bg-white',
-};
+import { DropdownMenu } from './DropdownMenu';
 
 export interface HeaderSubMenuProps {
   context: ContentPageContext;
@@ -19,95 +13,59 @@ export interface HeaderSubMenuProps {
   bgColor?: BgColorVersion;
 }
 
-export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems, bgColor }) => {
-  const [subMenuIsShow, setHiddenMenuIsShow] = context.useState(false);
+export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [], bgColor }) => {
+  const [menuVisible, setMenuVisible] = context.useState(false);
   const router = context.useRouter();
-  const { handlerDecorator } = context;
+  const { handlerDecorator, IntersectionObserverTag } = context;
+
+  const [visibleItemsCount, setVisibleItemsCount] = context.useState<number>(subItems.length);
+  const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
-  setTimeout(() => {
-    if (isSSR()) {
+  const activeSubItem = findActiveSubItem(router)(subItems);
+  const toggleMenu = () => setMenuVisible(!menuVisible);
+
+  const observerCallback = (itemIndex: number) => (entries: IntersectionObserverEntry[]) => {
+    if (!entries.length) {
       return;
     }
 
-    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 entry = entries[0];
 
-  const subMenu = subItems?.map((_) => (
-    <HeaderItem
-      key={_.href}
-      className="mr-8"
-      active={_ === activeSubItem}
-      {...useLink({ router, handlerDecorator }, _)}
-      dataItemName="header-submenu"
-      bgColor={bgColor}
-    />
-  ));
+    if (entry.intersectionRatio < 1) {
+      setVisibleItemsCount((prev) => Math.min(prev, itemIndex));
+    } else {
+      setVisibleItemsCount((prev) => Math.max(prev, itemIndex + 1));
+    }
+  };
 
   return (
     <nav className="relative mt-5">
-      <div className="overflow-hidden whitespace-nowrap mr-52">{subMenu}</div>
-      {renderDotsSubMenu({
-        subMenuIsShow,
-        toggleSubMenu,
-        subItems,
-        bgColor,
-        router,
-        handlerDecorator,
-      })}
+      <div className="overflow-hidden whitespace-nowrap mr-52">
+        {subItems.map((_, i) => (
+          <IntersectionObserverTag
+            Tag="span"
+            observerCallback={observerCallback(i)}
+            observerOptions={{ threshold: 1 }}
+            key={String(i)}
+          >
+            <HeaderItem
+              className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
+              active={_ === activeSubItem}
+              {...useLink({ router, handlerDecorator }, _)}
+              bgColor={bgColor}
+            />
+          </IntersectionObserverTag>
+        ))}
+      </div>
+      {dropDownMenuItems.length ? (
+        <DropdownMenu
+          context={context}
+          menuVisible={menuVisible}
+          toggleMenu={toggleMenu}
+          menuItems={dropDownMenuItems}
+          bgColor={bgColor}
+        />
+      ) : null}
     </nav>
   );
 });
-
-// TODO: add types
-const renderDotsSubMenu = ({
-  subMenuIsShow,
-  toggleSubMenu,
-  subItems,
-  bgColor,
-  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}
-      aria-label={`${subMenuIsShow ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
-    >
-      {Array(3).fill(bgColor).map(renderDot)}
-    </button>
-    <div
-      className={`flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`}
-      aria-hidden={!subMenuIsShow}
-    >
-      {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>
-  ));
-
-const renderDot = (bgColor: BgColorVersion, i: number) => (
-  <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />
-);

package/mobile/src/components/Headline/Headline.tsx

@@ -19,7 +19,7 @@ export const Headline = JSX<HeadlineProps>(
   }) => {
     const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
     return (
-      <section className={`px-4 py-6 ${STYLE_MAPS.background} ${className}`}>
+      <section className={`px-4 py-6 flex flex-col gap-2.5 ${STYLE_MAPS.background} ${className}`}>
         {title ? (
           <Heading
             headingType="h2"
@@ -29,15 +29,13 @@ export const Headline = JSX<HeadlineProps>(
         ) : null}
         {description ? (
           <p
-            className={`font-normal text-m-md ${STYLE_MAPS.description} ${ALIGN_TEXT[align]} ${
-              title ? 'mt-2.5' : ''
-            }`}
+            className={`font-normal text-m-md ${STYLE_MAPS.description} ${ALIGN_TEXT[align]}            `}
           >
             {description}
           </p>
         ) : null}
         {image?.src && (
-          <div className="mt-5 mx-auto flex justify-center">
+          <div className="mt-2.5 mx-auto flex justify-center">
             <Img image={image} />
           </div>
         )}

package/mobile/src/components/Headline/HeadlineContent.ts

@@ -1,6 +1,6 @@
 import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { HeadingContent, HeadingType } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { AlignType } from '../../model/AlignType';
 
@@ -12,4 +12,5 @@ export type HeadlineContent = HeadingContent &
   ImageContent & {
     align?: AlignType;
     bgColorHeadline?: BlockVersionWithTransparent;
+    headingType?: HeadingType;
   };

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps, FuncReturnVoid } from '../../types';
 import type { InsuranceAmountBlockTabs, cardItem } from './InsuranceAmountBlockContent';
-import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
 export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs, UniBlockProps {}
 
@@ -22,9 +22,6 @@ type InsuranceSlideProps = {
   onClick: FuncReturnVoid<MouseEvent>;
 };
 
-const arrowBtnStyle =
-  'absolute w-12 h-12 min-h-12 max-h-12 top-1 z-10 mt-[25px] bg-white rounded-full text-primary-text';
-
 export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
   ({ className = '', context, cards = [], anchor = null }) => {
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
@@ -52,27 +49,17 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
                 setActiveSlideIndex,
               })
             : null}
+          {renderArrows({
+            handler: [handlePrevClick, handleNextClick],
+            isShown: [showPrevButton, showNextButton],
+            btnClass: ['left-[50px]', 'right-[50px]'],
+            className: 'top-[62px]',
+          })}
           {showPrevButton ? (
-            <div>
-              <ArrowButton
-                className={`${arrowBtnStyle} left-0 top-9`}
-                onClick={handlePrevClick}
-                ariaLabel="Пролистать влево"
-                data-block-control="scroll-left"
-              />
-              <div className="absolute top-0 left-0 h-[168px] w-[84px] bg-opacity-from-white" />
-            </div>
+            <div className="absolute top-0 left-0 h-full w-[136px] bg-opacity-from-white" />
           ) : null}
           {showNextButton ? (
-            <div>
-              <ArrowButton
-                className={`${arrowBtnStyle} right-0 top-9 rotate-180`}
-                onClick={handleNextClick}
-                ariaLabel="Пролистать вправо"
-                data-block-control="scroll-right"
-              />
-              <div className="absolute top-0 right-0 h-[168px] w-[100px] bg-opacity-to-white" />
-            </div>
+            <div className="absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" />
           ) : null}
         </div>
       </section>
@@ -89,8 +76,11 @@ function renderGallery({
 }: InsuranceGalleryProps) {
   const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
   return (
-    <div style={{ transform: `translateX(-${tabsShiftWidth}px)` }} className="duration-1000">
-      <div className="w-full flex flex-nowrap gap-3.5 pb-[38px] px-[50px]">
+    <div
+      style={{ transform: `translateX(-${tabsShiftWidth}px)` }}
+      className="duration-1000 px-[50px]"
+    >
+      <div className="w-full flex flex-nowrap gap-3.5 pb-[38px]">
         {cards.map((slide, i) =>
           renderSlide({
             slide,

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

@@ -1,6 +1,6 @@
 {
   "title": "Список документов",
-  "subtitle": "Описание",
+  "description": "Описание",
   "icon": {
     "icon": "DocIcon"
   },