@redneckz/wildless-cms-uni-blocks 0.3.7 → 0.3.10

package/src/components/ContentPage/ContentPageHead.tsx

@@ -7,13 +7,8 @@ export interface ContentPageHeadProps {
 }
 
 export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data, children }) => {
-  const {
-    title,
-    main: { description, keywords, canonical, robots },
-    og,
-    twitter,
-    jsonLd,
-  } = data;
+  const { title, main, og, twitter, jsonLd } = data;
+  const { description, keywords, canonical, robots } = main || {};
   return (
     <HeadComponent>
       <title>{title}</title>
@@ -21,19 +16,27 @@ export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data,
       {description && <meta name="description" content={description} />}
       {keywords && <meta name="keywords" content={keywords.join(',')} />}
       {robots && <meta name="robots" content={robots.join(',')} />}
-      {og
-        ? Object.entries(og).map(([key, value]) => (
-            <meta key={key} name={`og:${key}`} content={value} />
-          ))
-        : null}
-      {twitter
-        ? Object.entries(twitter).map(([key, value]) => (
-            <meta key={key} name={`twitter:${key}`} content={value} />
-          ))
-        : null}
+      {renderOpenGraph(og)}
+      {renderTwitter(twitter)}
       {canonical && <link rel="canonical" href={canonical} />}
       {jsonLd && <script type="application/ld+json">{jsonLd}</script>}
       {children}
     </HeadComponent>
   );
 });
+
+function renderOpenGraph(og: Record<string, string> | undefined) {
+  return og
+    ? Object.entries(og).map(([key, value]) => (
+        <meta key={key} name={`og:${key}`} content={value} />
+      ))
+    : null;
+}
+
+function renderTwitter(twitter: Record<string, string> | undefined) {
+  return twitter
+    ? Object.entries(twitter).map(([key, value]) => (
+        <meta key={key} name={`twitter:${key}`} content={value} />
+      ))
+    : null;
+}

package/src/components/Footer/Contacts.tsx

@@ -19,7 +19,7 @@ export const Contacts = JSX<ContactsProps>(({ className, items, hasButton, conte
       {hasButton ? (
         <Button
           version="primary"
-          className="my-4"
+          className="mt-0.5 mb-5"
           {...useLink(
             { router, handlerDecorator },
             {
@@ -38,7 +38,7 @@ const renderContact = (item: ContactInfo, index: number) => {
   const { type, text, description } = item;
 
   return (
-    <div className="mb-4" key={String(index)}>
+    <div className="mb-3.5" key={String(index)}>
       <div>{renderText(type, text)}</div>
       <div className="font-sans text-sm text-secondary-text">{description}</div>
     </div>

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

@@ -35,7 +35,7 @@ export const Footer = JSX<FooterProps>(
     return (
       <footer className={`px-4 py-[26px] bg-white ${className}`}>
         <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
-        <Accordion className="p-0 pt-0 pb-0 mb-4" {...propsTextBlock} />
+        <Accordion className="!p-0 mb-4" {...propsTextBlock} />
         <div>{subMenu?.map(renderSubMenuItem)}</div>
         <MobileAppTile
           context={context}
@@ -58,9 +58,9 @@ export const Footer = JSX<FooterProps>(
 const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
   const { icon, href, text } = menu;
   return (
-    <Button key={`footer-${i}`} href={href} className="flex text-sm mb-4">
+    <Button version="link" key={`footer-${i}`} href={href} className="flex text-sm mb-4">
       {icon ? <Icon className="pr-1" name={icon} width="24" height="24" asSVG /> : null}
-      <span className="pl-0.5 font-medium">{text}</span>
+      <span className="pl-2.5 font-medium text-primary-text">{text}</span>
     </Button>
   );
 };

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

@@ -17,7 +17,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
       <div className={className}>
         <span className="text-primary-text font-sans font-medium text-sm">{title}</span>
         {links?.length ? (
-          <div className="flex flex-col gap-5 py-5">
+          <div className="flex flex-col gap-2 pt-3">
             {links.map((_, i) => (
               <HorizontalNavigationLink
                 key={String(i)}

package/src/components/Footer/MediaButton.tsx

@@ -32,13 +32,15 @@ export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
 
   return (
     <a
-      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:fill-primary-main"
+      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:text-primary-main"
       href={href}
       aria-label={label}
       target="_blank"
       rel="noopener noreferrer"
     >
-      {Icon && <Icon name={icon} width={width} height={height} asSVG className="block" />}
+      {Icon && (
+        <Icon name={icon} width={width} height={height} asSVG className="block" color="none" />
+      )}
     </a>
   );
 });

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

@@ -8,13 +8,13 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
   const { handlerDecorator } = context;
   return (
     <div className={`${className || ''}`}>
-      <div className="pt-5 pb-[5px]">
+      <div className="py-6">
         <span className="font-sans font-normal text-xs text-secondary-text">
           {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
         </span>
       </div>
       {links?.length ? (
-        <div className={`flex flex-col justify-start items-start gap-5 pt-[5px]`}>
+        <div className={`flex flex-col justify-start items-start gap-2`}>
           {links.map((_, i) => (
             <TextInformationLink
               key={String(i)}

package/src/components/Gallery/Gallery.example.json

@@ -13,7 +13,11 @@
       "title": "Заголовок 1",
       "description": "Описание 1",
       "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      "items": [
+        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
+        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
+        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
+      ]
     },
     {
       "image": {
@@ -26,7 +30,11 @@
       "title": "Заголовок 2",
       "description": "Описание 2",
       "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      "items": [
+        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
+        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
+        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
+      ]
     },
     {
       "image": {
@@ -39,7 +47,11 @@
       "title": "Заголовок 3",
       "description": "Описание 3",
       "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      "items": [
+        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
+        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
+        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
+      ]
     },
     {
       "image": {
@@ -52,7 +64,11 @@
       "title": "Заголовок 4",
       "description": "Описание 4",
       "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      "items": [
+        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
+        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
+        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
+      ]
     }
   ]
 }

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

@@ -19,6 +19,7 @@ const buttonPrimary: ButtonCommonProps = {
   text: 'Подробнее',
   target: '_blank',
   version: 'secondary',
+  icon: 'BankIcon',
 };
 const link: ButtonCommonProps = {
   href: '/credit-cards',

package/src/components/Gallery/Gallery.fixture.tsx

@@ -21,6 +21,14 @@ const buttonPrimary: ButtonCommonProps = {
   version: 'secondary',
 };
 
+const buttonPrimaryIcon: ButtonCommonProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
+  icon: 'BankIcon',
+};
+
 const defaultItems = [
   { text: 'Качественные фермерские продукты напрямую от производителей' },
   { text: 'Самая большая база сельских туров по России' },
@@ -45,7 +53,7 @@ export const defaultProps: GalleryProps = {
       title: 'Более 1000 развлечений',
       description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
       image,
-      button: buttonPrimary,
+      button: buttonPrimaryIcon,
       items: defaultItems,
     },
     {

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

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { BlockVersion } from '../../model/BlockVersion';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import type { GalleryCard } from './GalleryContent';
@@ -44,7 +45,6 @@ function renderCard(card: GalleryCard, key: number) {
     <div
       className={`box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
       ${blockStyle[card.version ?? 'primary']}`}
-      role="listitem"
       key={key}
     >
       <div>
@@ -57,11 +57,21 @@ function renderCard(card: GalleryCard, key: number) {
         {card.description ? renderDescription(card) : null}
         {card.items?.length ? renderItems(card.items) : null}
       </div>
-      {card?.button?.href ? <Button className="mt-3" {...card.button} /> : null}
+      {card?.button?.text ? renderButton(card.button) : null}
     </div>
   );
 }
 
+function renderButton(button) {
+  return (
+    <Button
+      className="mt-3"
+      appendLeft={button?.icon && <Icon name={button?.icon} width="24px" height="24px" asSVG />}
+      {...button}
+    />
+  );
+}
+
 function renderDescription(card: GalleryCard) {
   return (
     <div
@@ -77,8 +87,8 @@ function renderDescription(card: GalleryCard) {
 function renderItems(items: GalleryItem[]) {
   return (
     <section className="mt-3">
-      {items.map((item) => (
-        <div>
+      {items.map((item, i) => (
+        <div key={String(i)}>
           <span className="text-m-md font-medium">{item.title}</span>
           <span className="text-m-sm text-secondary-text pl-2">{item.text}</span>
         </div>

package/src/components/Gallery/GalleryCardInner.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import type { GalleryCard } from './GalleryContent';
 
@@ -22,12 +23,22 @@ export const GalleryCardInner = JSX<GalleryCard>(
           ) : null}
           {items?.length ? renderItems(items, version) : null}
         </div>
-        {button?.text && <Button className="mt-6" {...button} />}
+        {button?.text ? renderButton(button) : null}
       </div>
     );
   },
 );
 
+function renderButton(button) {
+  return (
+    <Button
+      className="mt-6 w-full"
+      appendLeft={button.icon && <Icon name={button.icon} width="24px" height="24px" asSVG />}
+      {...button}
+    />
+  );
+}
+
 function renderCardTitle(title: string, className: string) {
   return <div className={`font-medium text-xl m-0 ${className}`}>{title}</div>;
 }

package/src/components/Gallery/GalleryInner.tsx

@@ -38,19 +38,20 @@ export const GalleryInner = JSX<GalleryInnerProps>(
         />
         {showPrevButton && (
           <ArrowButton
-            className="absolute top-1/2 left-8 rotate-180"
+            className="absolute top-1/2 left-8 rotate-180 z-10 mt-[25px]"
             onClick={handlePrevClick}
             ariaLabel="Пролистать влево"
           />
         )}
         {showNextButton && (
           <ArrowButton
-            className="absolute top-1/2 right-1 z-10"
+            className="absolute top-1/2 right-8 z-10 mt-[25px]"
             onClick={handleNextClick}
             ariaLabel="Пролистать вправо"
           />
         )}
-        <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+        <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" />
       </section>
     );
   },

package/src/components/Header/HeaderBurger.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Button } from '../../ui-kit/Button/Button';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
@@ -19,13 +18,19 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
 
     return (
       <div className="absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20">
-        <button className="absolute top-4 right-4 border-none bg-transparent" onClick={onClick}>
+        <button className="absolute top-4 right-4 border-none bg-transparent cursor-pointer" onClick={onClick}>
           <Icon name="CloseIcon" width="24" height="24" asSVG />
         </button>
-        <Button onClick={getCity} className="flex items-center text-sm text-secondary-text mb-4">
-          <Icon name="GeolocationIcon" width="24" height="24" className="box-border mr-2" asSVG />
+        <button onClick={getCity} className="flex items-center text-sm text-secondary-text mb-4 bg-transparent cursor-pointer">
+          <Icon
+            name="GeolocationIcon"
+            width="20"
+            height="20"
+            className="text-primary-main box-border mr-2"
+            asSVG
+          />
           {city}
-        </Button>
+        </button>
         {children}
         <div className="mb-7">{burgerSubMenu?.map(renderBurgerSubMenuItem)}</div>
         <SearchBar context={context} className="grow" />
@@ -37,9 +42,11 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
 const renderBurgerSubMenuItem = (menu: SubMenuItem, i: number) => {
   const { icon, href, text } = menu;
   return (
-    <Button key={`headerSubMenu-${i}`} href={href} className="flex text-sm mb-4">
-      {icon ? <Icon className="pr-1" name={icon} width="24" height="24" asSVG /> : null}
+    <a key={`headerSubMenu-${i}`} href={href} className="flex text-sm mb-4 hover:text-primary-main">
+      {icon ? (
+        <Icon className="text-primary-main pr-1" name={icon} width="24" height="24" asSVG />
+      ) : null}
       <span className="pl-0.5 font-medium">{text}</span>
-    </Button>
+    </a>
   );
 };

package/src/components/Header/HeaderTop.tsx

@@ -11,7 +11,7 @@ export interface HeaderTopProps {
 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">
-      <button className="pr-4 border-0 bg-transparent" onClick={onClick} aria-label="Открыть меню">
+      <button className="pr-4 border-0 bg-transparent cursor-pointer" onClick={onClick} aria-label="Открыть меню">
         <Icon
           name={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
           width="24"
@@ -24,7 +24,7 @@ export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
     <button
       className={`${
         bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'
-      } text-sm  border-0 bg-transparent`}
+      } text-sm  border-0 bg-transparent cursor-pointer`}
     >
       Войти
     </button>

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -19,7 +19,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     hasBorder = true,
   }) => {
     return (
-      <section className={`font-sans py-6 px-4 bg-white ${className}`}>
+      <section className={`font-sans text-primary-text py-6 px-4 bg-white ${className}`}>
         {title ? (
           <Heading
             headingType="h2"
@@ -27,7 +27,9 @@ export const LinkDocs = JSX<LinkDocsProps>(
             title={title}
           />
         ) : null}
-        {subtitle ? <h3 className="mb-5 text-center text-m-md">{subtitle}</h3> : null}
+        {subtitle ? (
+          <h3 className="mt-0 font-normal mb-5 text-center text-m-md">{subtitle}</h3>
+        ) : null}
         {listMode === 'vertical' ? (
           <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
         ) : (

package/src/components/LinkDocs/LinkDocs.tsx

@@ -34,7 +34,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     columnsMode = 'double',
   }) => {
     return (
-      <section className={`font-sans p-[50px] bg-white ${className}`}>
+      <section className={`font-sans text-primary-text p-12 bg-white ${className}`}>
         {title ? (
           <Heading
             headingType="h2"
@@ -46,7 +46,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
         ) : null}
         {subtitle ? (
           <h3
-            className={`text-base ${titleMarginsStyleMap[columnsMode]} ${
+            className={`text-base mt-0 font-normal ${titleMarginsStyleMap[columnsMode]} ${
               titleAlignStyleMap[align ?? 'center']
             }`}
           >

package/src/components/LinkList/LinkList.example.json

@@ -0,0 +1,21 @@
+{
+  "documents": [
+    {
+      "text": "Документ №1",
+      "href": "/documents/document1.doc"
+    },
+    {
+      "text": "Документ №2",
+      "href": "/documents/document2.rtf",
+      "target": "_blank"
+    },
+    {
+      "text": "Документ №3",
+      "href": "/abc3/map.jpeg"
+    },
+    {
+      "text": "Документ №4",
+      "href": "/abc/map.rar"
+    }
+  ]
+}

package/src/components/LinkList/LinkList.fixture.tsx

@@ -0,0 +1,13 @@
+import { mobileContext } from '../../setup-fixture';
+import { linkDocsContentExample } from './linkListContentExample';
+import { LinkList } from './LinkList';
+
+export default (
+  <div className="container grid grid-cols-12">
+    <LinkList
+      className="col-span-12"
+      context={mobileContext}
+      {...linkDocsContentExample}
+    />
+  </div>
+);

package/src/components/LinkList/LinkList.tsx

@@ -0,0 +1,28 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { LinkListContent } from './LinkListContent';
+
+export interface LinkListProps extends LinkListContent, UniBlockProps {}
+
+export const LinkList = JSX<LinkListProps>(({ className = '', documents }) => {
+  return (
+    <section className={`font-sans bg-white mt-[10px] ${className}`}>
+      <ul className="flex flex-col text-sm text-secondary-text p-0">
+        {documents?.length ? renderLinkListItem(documents) : null}
+      </ul>
+    </section>
+  );
+});
+
+const renderLinkListItem = (documents) => {
+  return documents.map((doc, i) => {
+    const { text, ...linkProps } = doc;
+    return (
+      <li key={`list_item_${String(i)}`} className="mb-4 list-none">
+        <a className="hover:text-primary-main" role="link" {...linkProps}>
+          {text ? text : null}
+        </a>
+      </li>
+    );
+  });
+};

package/src/components/LinkList/LinkListContent.ts

@@ -0,0 +1,9 @@
+import type { LinkProps } from '../../model/LinkProps';
+
+/**
+ * @title Список документов
+ */
+export interface LinkListContent {
+  /** @title Список */
+  documents?: LinkProps[];
+}

package/src/components/LinkList/linkListContentExample.ts

@@ -0,0 +1,22 @@
+import type { LinkListContent } from './LinkListContent';
+
+export const linkDocsContentExample: LinkListContent = {
+  documents: [
+    { text: 'target self', href: '/abc1/cooldoc/', target: '_self' },
+    { text: 'target blank', href: '/abc2/wtf/', target: '_blank' },
+    { text: 'GlassIcon', href: '/abc3/map/' },
+    { text: 'no icon', href: '/abc4' },
+    { text: 'документ 5', href: '/abc5' },
+    { text: 'документ 6', href: '/abc6/abc' },
+    { text: 'Text text text', href: '/abc7/yolo' },
+    {
+      text: 'Some more generic text to stretch item, and even more, more text, and more generic text, and even more, more text, and even more',
+      href: '/abc8/archive/',
+    },
+    { text: 'И ещё немного текста', href: '/abc9/' },
+    {
+      text: 'Форматируем, сортируем, смотрим как отображается...',
+      href: '/abc10/',
+    },
+  ],
+};

package/src/components/MiniGallery/MiniGallery.fixture.tsx

@@ -39,6 +39,11 @@ export const defaultProps: MiniGalleryProps = {
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
       image,
     },
+    {
+      title: 'Более 8888 развлечений',
+      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
+      image,
+    },
   ],
 };
 

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

@@ -20,8 +20,8 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
               <Logo className="w-[33px]" bgColor="transparent" hideTitle />
             </div>
             <a href={href} target="_blank" className="flex flex-col justify-center pl-3">
-              <div className="text-sm font-medium">{title}</div>
-              <div className="text-xs text-secondary-text">{description}</div>
+              <div className="text-m-button font-medium mb-[3px]">{title}</div>
+              <div className="text-m-button text-secondary-text">{description}</div>
             </a>
           </div>
         ) : null}

package/src/components/ProductBlock/ProductBlockInner.mobile.tsx

@@ -48,7 +48,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
               ) : null
             }
           >
-            {description && <Description description={description} />}
+            {description ? <Description className="mb-5" description={description} /> : null}
             {benefits?.length ? (
               <div className="mt-5">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
             ) : null}

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -25,7 +25,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     version = 'primary',
   }) => {
     return (
-      <div className={`flex grow justify-between items-stretch text-primary-text ${className}`}>
+      <div className={`flex grow justify-between items-stretch ${className}`}>
         <div className={'flex flex-col'}>
           <BaseTile
             context={context}
@@ -34,7 +34,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
                 <Heading
                   headingType={headingType}
                   title={title}
-                  className={`whitespace-pre-wrap max-w-[600px]`}
+                  className={`whitespace-pre-wrap mb-4 max-w-[600px]`}
                 />
               )
             }
@@ -45,14 +45,16 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             }
           >
             {description && (
-              <Description className="mt-4 max-w-[600px]" description={description} />
+              <Description className="text-m-base max-w-[600px]" description={description} />
             )}
             {benefits?.length ? (
               <div className="flex gap-6 mt-6 mb-3.5">
                 {benefits.map((_, i) => renderBenefit(_, i, version))}
               </div>
             ) : null}
-            {items?.length ? <List className="mt-5" items={items} /> : null}
+            {items?.length ? (
+              <List className="mt-5" items={items} itemClassName="mb-[10px]" version={version} />
+            ) : null}
           </BaseTile>
         </div>
         {image?.src && <Img className="mt-auto" image={image} />}

package/src/components/ProductGallery/ProductGallery.fixture.mobile.tsx

@@ -147,6 +147,8 @@ export default {
             {
               productBlock: {
                 title: 'Акция «Кредит на все, что хочется!»',
+                description:
+                  'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
                 items: [
                   'Потребительский кредит по специальной процентной ставке',
                   'Получите деньги без залога и поручительства',

package/src/components/ProductGallery/ProductGallery.tsx

@@ -62,15 +62,15 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
       key={String(i)}
       onClick={onClick}
       aria-label={slide?.title}
-      className={`font-sans group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 pt-4 pb-5 grow basis-0`}
+      className={`font-sans group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 pt-4 pb-[23px] grow basis-0`}
     >
       <div className="border-0 border-r border-solid border-main-divider px-6">
         <div
-          className={`text-sm font-medium pb-1 group-hover:text-primary-text ${btnTitleClassName}`}
+          className={`text-sm font-medium pb-[3px] group-hover:text-primary-text ${btnTitleClassName}`}
         >
           {slide?.title}
         </div>
-        <div className="text-xs text-secondary-text pb-[2px]">{slide.desc}</div>
+        <div className="text-xs text-secondary-text">{slide.desc}</div>
       </div>
       <div
         className={`absolute bottom-0 left-0 w-full h-[3px] bg-primary-main -translate-x-full ${progressBarClassName}`}