@redneckz/wildless-cms-uni-blocks 0.3.8 → 0.3.9

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

@@ -16,22 +16,23 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, bordered,
   return (
     <li
       className={`${
-        bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0 py-[14px]'
+        bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0'
       } border-solid border-main-divider`}
     >
       <button
         className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
-        ${hasContent ? 'group cursor-pointer' : ''}`}
+          ${bordered ? '' : 'py-[14px] px-0'}
+          ${hasContent ? 'group cursor-pointer' : ''}`}
         onClick={handleToggle}
       >
         <span
-          className={`text-m-title-xs pr-2.5 font-medium ${
+          className={`text-sm pr-2.5 font-medium ${
             hasContent ? 'group-hover:text-primary-main' : ''
           }`}
         >
           {label}
         </span>
-        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
+        {hasContent ? <Icon name={icon} width="20" height="20" asSVG /> : null}
       </button>
       {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
     </li>

package/mobile/src/components/Accordion/AccordionItemInner.tsx

@@ -7,7 +7,7 @@ import type { AccordionItemProps } from './AccordionItem';
 
 export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
   return (
-    <div className={`transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0 `}>
+    <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
       {blocks?.length ? blocks.map(renderBlock(context)) : null}
     </div>
   );
@@ -21,7 +21,7 @@ const renderBlock = (context: ContentPageContext) => (block: AccordionBlockProps
 
   const AccordionBlock: JSXBlock = AccordionBlocks[type];
   return (
-    <div className="mb-5 last:mb-0 py-2.5" key={`block_${i}`}>
+    <div className="mb-5 last:mb-0" key={`block_${i}`}>
       <AccordionBlock context={context} {...block} className="!p-0" />
     </div>
   );

package/mobile/src/components/Accordion/utils/isActiveHandler.ts

@@ -1,4 +1,4 @@
-import type { IconName } from '../../../ui-kit/Icon/IconProps';
+import type { IconName } from '../../../icons/IconName';
 
 export const isActiveHandler = ({ context, blocks }) => {
   const [isActive, setIsActive] = context.useState(false);

package/mobile/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -9,7 +9,7 @@ export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps
 export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefits }) => {
   return (
     <section
-      className={`font-sans text-primary-text bg-white p-12 pb-2 flex flex-col items-center ${
+      className={`font-sans text-primary-text bg-white p-12 flex flex-col items-center ${
         className || ''
       }`}
     >
@@ -17,7 +17,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefi
         <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
       ) : null}
       {benefits?.length ? (
-        <div className="grid grid-cols-2 gap-5 mt-9">{benefits.map(renderStep)}</div>
+        <div className="grid grid-cols-2 gap-8 mt-9">{benefits.map(renderStep)}</div>
       ) : null}
     </section>
   );
@@ -25,7 +25,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefi
 
 const renderStep = (benefit: Benefit, i: number) => {
   return (
-    <div key={String(i)} className="flex items-center p-10 gap-5 max-w-[580px]">
+    <div key={String(i)} className="flex items-center gap-5 max-w-[500px]">
       {benefit.icon && (
         <Icon
           className="h-[70px] w-[70px] min-w-[70px] min-h-[70px]"

package/mobile/src/components/BlockContent.ts

@@ -17,6 +17,7 @@ import type { StepsBlockContent } from './StepsBlock/StepsBlockContent';
 import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
+import type { LinkListContent } from './LinkList/LinkListContent';
 
 /**
  * @hidden
@@ -40,4 +41,5 @@ export type BlockContent =
   | TariffsTableContent
   | TextBlockContent
   | TileContent
-  | NavigationContent;
+  | NavigationContent
+  | LinkListContent;

package/mobile/src/components/Blocks.ts

@@ -10,6 +10,7 @@ import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TextBlock } from './TextBlock/TextBlock';
+import { LinkList } from './LinkList/LinkList';
 
 export const Blocks = {
   Accordion,
@@ -24,4 +25,5 @@ export const Blocks = {
   ProductGallery,
   StepsBlock,
   TextBlock,
+  LinkList,
 };

package/mobile/src/components/ComparisonTable/TableCell.tsx

@@ -16,7 +16,7 @@ export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isF
 
   const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES} ${
     isFillGradient && isFirstRow ? 'border-t' : ''
-  } ${!isLastRow ? 'border-solid' : ''}`;
+  } ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
 
   return (
     <div className={cellWrapperClasses} role="cell">

package/mobile/src/components/ComparisonTable/TableRow.tsx

@@ -20,7 +20,7 @@ export const TableRow = JSX<TableRowProps>(
       {header?.title ? (
         <div
           className={`text-sm py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
-            !isLastRow ? 'border-solid' : ''
+            !isLastRow ? 'border-solid' : 'border-b-0'
           }`}
         >
           {header.title}

package/mobile/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/mobile/src/components/Footer/Footer.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/mobile/src/components/Footer/HorizontalNavigation.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/mobile/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/mobile/src/components/Footer/TextInformation.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/mobile/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/mobile/src/components/Gallery/Gallery.tsx

@@ -7,6 +7,7 @@ import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl
 import type { GalleryCard } from './GalleryContent';
 import { GalleryItem } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
+import { Icon } from '../../ui-kit/Icon/Icon';
 
 const blockStyle: Record<BlockVersion, string> = {
   primary: 'bg-white',
@@ -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?.href ? 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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/components/LinkDocs/LinkDocs.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/mobile/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/mobile/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/mobile/src/components/LinkList/LinkListContent.ts

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

package/mobile/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/mobile/src/components/MobileAppTile/MobileAppTile.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/mobile/src/components/ProductBlock/ProductBlockInner.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/mobile/src/components/ProductGallery/ProductGalleryBlock.tsx

@@ -12,7 +12,7 @@ export interface ProductGalleryBlockProps extends UniBlockProps {
 export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
   ({ block, headingType, context }) => {
     return (
-      <section className="flex grow-0 shrink-0 basis-full px-4 pt-6" role="listitem">
+      <section className="flex grow-0 shrink-0 basis-full px-4 pt-6">
         <div className="flex grow">
           <ProductBlockInner context={context} headingType={headingType || 'h2'} {...block} />
         </div>

package/mobile/src/components/Tile/Tile.tsx

@@ -10,7 +10,7 @@ import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
-import type { TileContent } from '../Tile/TileContent';
+import type { TileContent } from './TileContent';
 
 export interface TileProps extends TileContent, UniBlockProps {
   role?: string;
@@ -37,7 +37,7 @@ export const Tile = JSX<TileProps>((props) => {
 
   return (
     <section
-      className={`font-sans p-9 box-border ${className} ${
+      className={`overflow-hidden font-sans p-9 box-border ${className} ${
         tileStyleMap[version]
       } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
       role={role}

package/mobile/src/icons/OkIcon.svg

@@ -1,5 +1,6 @@
 <svg title="Лого «Одноклассники»" viewBox="0 0 12 20" xmlns="http://www.w3.org/2000/svg">
   <path
+    fill="currentColor"
     d="M5.986 10.341C3.05 10.341.61 7.995.61 5.22.61 2.347 3.05 0 5.987 0c3.036 0 5.375 2.346 5.375 5.22a5.048 5.048 0 0 1-1.578 3.628 5.451 5.451 0 0 1-3.78 1.494h-.018Zm0-7.324A2.186 2.186 0 0 0 3.797 5.22c0 1.196.946 2.106 2.19 2.106 1.293 0 2.189-.91 2.189-2.106.001-1.199-.896-2.203-2.19-2.203Zm2.14 11.586 3.037 2.825c.598.621.598 1.531 0 2.106-.646.621-1.643.621-2.14 0l-3.036-2.873-2.937 2.873c-.298.287-.697.43-1.146.43-.348 0-.746-.144-1.095-.43-.597-.575-.597-1.485 0-2.107l3.086-2.825a14.303 14.303 0 0 1-3.182-1.339c-.747-.383-.896-1.34-.498-2.059.498-.718 1.393-.909 2.19-.43a7.08 7.08 0 0 0 3.583.97 7.08 7.08 0 0 0 3.583-.97c.797-.479 1.742-.288 2.19.43.448.72.248 1.675-.45 2.06-.944.574-2.039 1.005-3.184 1.34Z"
   />
 </svg>

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

@@ -19,7 +19,7 @@ export const BlockItem = JSX<BlockItemProps>(
   ({ className = '', isDotted = true, text, children, version = 'primary' }) => {
     return (
       <div className={`font-sans flex items-start ${className}`} role="listitem">
-        {isDotted && <div className={getListStyle(version)} />}!!!!!
+        {isDotted && <div className={getListStyle(version)} />}
         <span className={TEXT_STYLE_MAP[version]}>{text || children}</span>
       </div>
     );

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

@@ -6,7 +6,7 @@ export interface DescriptionProps extends DescriptionContent {
 }
 
 export const Description = JSX<DescriptionProps>((props) => {
-  const { className, description } = props;
+  const { className = '', description } = props;
 
-  return <div className={`font-normal text-m-md ${className || ''}`}>{description}</div>;
+  return <div className={`font-normal text-m-md ${className}`}>{description}</div>;
 });