@redneckz/wildless-cms-uni-blocks 0.3.84 → 0.3.86

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

@@ -1,9 +1,5 @@
 {
   "title": "Заголовок",
-  "button": {
-    "href": "https://rshb.ru",
-    "text": "Текст кнопки"
-  },
   "insuranceTabs": [
     {
       "title": "Описание 1",
@@ -11,12 +7,28 @@
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         },
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         }
       ]
     },
@@ -26,17 +38,41 @@
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         },
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         },
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         }
       ]
     }

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

@@ -1,15 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
 import { InsuranceAmountBlockInner } from './InsuranceAmountBlockInner';
 
 export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent, UniBlockProps {}
 
 export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
-  ({ className = '', context, title, insuranceTabs = [], button, ...rest }) => {
+  ({ className = '', context, title, insuranceTabs = [], ...rest }) => {
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
 
     return (
@@ -19,16 +18,18 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
         {...rest}
       >
         {title ? <Heading className="text-center" title={title} headingType="h3" /> : null}
-        <div className="p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]">
-          {insuranceTabs.map((item, i) =>
-            renderNavButton({
-              title: item?.title,
-              i,
-              activeSlideIndex,
-              onClick: () => setActiveSlideIndex(i),
-            }),
-          )}
-        </div>
+        {insuranceTabs?.length > 1 ? (
+          <div className="p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]">
+            {insuranceTabs.map((item, i) =>
+              renderNavButton({
+                title: item?.title,
+                i,
+                activeSlideIndex,
+                onClick: () => setActiveSlideIndex(i),
+              }),
+            )}
+          </div>
+        ) : null}
         <div
           className="flex"
           style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
@@ -40,17 +41,6 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
             insuranceTabs,
           })}
         </div>
-        {button?.text ? (
-          <div className="flex justify-center">
-            <Button
-              className="box-border p-4 h-14 w-full max-w-[240px]"
-              version={button?.version || 'primary'}
-              href={button.href}
-            >
-              {button.text}
-            </Button>
-          </div>
-        ) : null}
       </BlockWrapper>
     );
   },
@@ -64,8 +54,13 @@ const renderInsuranceGalleries = ({
   const insuranceGalleries = insuranceTabs?.map((_) => _.cards);
 
   return insuranceGalleries?.length
-    ? insuranceGalleries.map((cards) => (
-        <InsuranceAmountBlockInner context={context} className={className} cards={cards} />
+    ? insuranceGalleries.map((cards, i) => (
+        <InsuranceAmountBlockInner
+          key={String(i)}
+          context={context}
+          className={className}
+          cards={cards}
+        />
       ))
     : null;
 };
@@ -83,7 +78,7 @@ function renderNavButton({ title, i, activeSlideIndex, onClick }) {
       key={String(i)}
       onClick={onClick}
       aria-label={title}
-      className={`box-border px-4 py-3 text-m-md ${btnClassName}`}
+      className={`box-border px-4 py-3 text-m ${btnClassName}`}
     >
       {title}
     </button>

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -1,5 +1,4 @@
 import type { Picture } from '../../model/Picture';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
  * @title Кнопка выбора программы
@@ -11,6 +10,8 @@ export type CardItem = {
   fee?: number;
   /** @title Страховая сумма */
   sum?: number;
+  /** @title Ссылка на программу*/
+  href?: string;
 };
 
 /**
@@ -31,5 +32,4 @@ export interface InsuranceAmountBlockContent {
   title?: string;
   /** @title Список вкладок */
   insuranceTabs?: InsuranceAmountBlockTabs[];
-  button?: ButtonProps;
 }

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

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { FuncReturnVoid, UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
@@ -12,14 +13,14 @@ type InsuranceGalleryProps = {
   cards: CardItem[];
   activeSlideIndex: number;
   isLastShift: boolean;
-  setActiveSlideIndex: FuncReturnVoid<number>;
+  setActiveSlideIndex: (index: number) => void;
 };
 
 type InsuranceSlideProps = {
   slide: CardItem;
   i: number;
   activeSlideIndex: number;
-  onClick: FuncReturnVoid<MouseEvent>;
+  onClick: () => void;
 };
 
 export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
@@ -36,9 +37,10 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
     const showNextButton = isGalleryScrollAvailable && galleryLength > tabsShift + 2;
     const isLastShift = galleryLength === tabsShift + 2;
     const showPrevButton = tabsShift > 0;
+    const activeHref = cards[activeSlideIndex]?.href;
 
     return (
-      <section className={`min-w-full ${className}`}>
+      <section role="listitem" className={`min-w-full text-center ${className}`}>
         <div className="relative mt-7 overflow-hidden">
           {galleryLength
             ? renderGallery({
@@ -62,6 +64,9 @@ 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] p-4 text-center" version="primary" href={activeHref}>
+          Выбрать программу
+        </Button>
       </section>
     );
   },
@@ -111,10 +116,10 @@ function renderSlide({ slide, i, activeSlideIndex, onClick }: InsuranceSlideProp
     >
       {slide?.icon ? (
         <Img
-          className={`h-[108px] w-[108px] p-3 rounded-full bg-secondary-light mr-[30px]`}
+          className="p-3 rounded-full bg-secondary-light mr-[30px]"
           image={slide.icon}
-          width="24"
-          height="24"
+          width="70"
+          height="70"
         />
       ) : null}
 
@@ -129,9 +134,9 @@ function renderSlide({ slide, i, activeSlideIndex, onClick }: InsuranceSlideProp
 
 function renderValueBlock(title, sum) {
   return (
-    <div className="flex flex-col text-left">
-      <span className="whitespace-pre text-title-2xs">{addSpacesBetweenNumbers(sum)} ₽</span>
-      <span className="whitespace-pre text-secondary-text font-light text-base mt-1">{title}</span>
+    <div className="flex flex-col text-left whitespace-pre">
+      <span className="text-h6">{addSpacesBetweenNumbers(sum)} ₽</span>
+      <span className="text-secondary-text text-l mt-1">{title}</span>
     </div>
   );
 }

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

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

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

@@ -28,7 +28,6 @@ export const LinkDocs = JSX<LinkDocsProps>(
           description={description}
           context={context}
           align="center"
-          headingType="h3"
         />
         {orientation === 'vertical' ? (
           <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />

package/mobile/src/components/LinkDocs/LinkDocsContent.ts

@@ -2,6 +2,7 @@ import type { LinkProps } from '../../model/LinkProps';
 import type { AlignType } from '../../model/AlignType';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
+import type { HeadlineProps } from '../../model/HeadlineType';
 
 /**
  * @title Отображение списка
@@ -23,11 +24,7 @@ export interface LinkDocsItem extends LinkProps {
 /**
  * @title Список документов
  */
-export interface LinkDocsContent {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Описание */
-  description?: string;
+export type LinkDocsContent = HeadlineProps & {
   /**
    *  @title Иконка
    *  @default {
@@ -47,4 +44,4 @@ export interface LinkDocsContent {
   /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
   hasBorder?: boolean;
   align?: AlignType;
-}
+};

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

@@ -11,7 +11,7 @@ export interface LinkDocsHorizontalListProps extends LinkDocsVerticalListProps {
 export const LinkDocsHorizontalList = JSX<LinkDocsHorizontalListProps>(
   ({ context, hasBorder = true, documents, icon }) => {
     return (
-      <SwipeListControl context={context} className="text-m-sm text-primary-main mt-5">
+      <SwipeListControl context={context} className="text-s text-primary-main mt-5">
         {documents?.length
           ? documents.map((doc, i) => (
               <LinkDocsListItem

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

@@ -13,9 +13,7 @@ export const LinkDocsVerticalList = JSX<LinkDocsVerticalListProps>(
   ({ hasBorder = true, documents, icon }) => {
     return (
       <div
-        className={`text-m-sm text-primary-main flex flex-col mt-5 ${
-          hasBorder ? 'gap-3.5' : 'gap-2'
-        }`}
+        className={`text-s text-primary-main flex flex-col mt-5 ${hasBorder ? 'gap-3.5' : 'gap-2'}`}
         role="list"
       >
         {documents?.length

package/mobile/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,9 +1,8 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
  * @title QR код
@@ -18,8 +17,7 @@ export interface QRCode {
 /**
  * @title Мобильное приложение
  */
-export type MobileAppTileContent = HeadingContent &
-  DescriptionContent &
+export type MobileAppTileContent = HeadlineCommonProps &
   ButtonContent &
   ListContent &
   ImageContent & {

package/mobile/src/components/NavigatorTabs/NavigatorTabItem.tsx

@@ -4,10 +4,10 @@ import type { LinkProps } from '../../model/LinkProps';
 export interface NavigatorTabItemProps extends LinkProps {
   active?: boolean;
   className?: string;
-  onClick?: (ev: MouseEvent) => void;
+  onClick?: () => void;
 }
 
-const TEXT_CLASSES = 'font-sans font-normal text-m-md';
+const TEXT_CLASSES = 'font-sans text-m';
 const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
 
 export const NavigatorTabItem = JSX<NavigatorTabItemProps>(
@@ -18,13 +18,13 @@ export const NavigatorTabItem = JSX<NavigatorTabItemProps>(
   ),
 );
 
-const getLinkClasses = (className: string, active?: boolean) => {
+const getLinkClasses = (className: string, active = false) => {
   const classes = active ? 'bg-primary-main' : 'group bg-white';
 
   return `${classes} ${LINK_CLASSES} ${className}`;
 };
 
-const getTextClasses = (active?: boolean) => {
+const getTextClasses = (active = false) => {
   const classes = active ? 'text-white' : 'text-secondary-text group-hover:text-primary-main ';
 
   return `${classes} ${TEXT_CLASSES}`;

package/mobile/src/components/OtherProducts/OtherProductsItem.tsx

@@ -27,7 +27,7 @@ export const OtherProductsItem = JSX<BlockItemProps>(
             context={context}
             foldButtonLabel={label}
             containerClasses="grid grid-cols-12 gap-1 border-box"
-            render={(children, isActive) => <Wrapper isActive={isActive}>{children}</Wrapper>}
+            render={(children) => <Wrapper>{children}</Wrapper>}
           />
         ) : null}
       </div>
@@ -35,6 +35,6 @@ export const OtherProductsItem = JSX<BlockItemProps>(
   },
 );
 
-const Wrapper = JSX<{ isActive: boolean }>(({ children }) => {
+const Wrapper = JSX(({ children }) => {
   return <div className="box-border">{children}</div>;
 });

package/mobile/src/components/PictureText/PictureTextContent.ts

@@ -1,9 +1,9 @@
 import { BlockVersion } from '../../model/BlockVersion';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { TitleProp } from '../../model/HeadlineType';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { Picture } from '../../model/Picture';
 
-export type TitleWithImageContent = HeadingContent & ImageContent;
+export type TitleWithImageContent = TitleProp & ImageContent;
 
 export interface PictureTextBenefit {
   /** @title Иконка */

package/mobile/src/components/Placeholder/Placeholder.tsx

@@ -1,10 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { PlaceholderContent } from '../../components/Placeholder/PlaceholderContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Headline } from '../Headline/Headline';
 import type { UniBlockProps } from '../../types';
-import { Description } from '../../ui-kit/Description/Description';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
@@ -25,23 +23,14 @@ export const Placeholder = JSX<PlaceholderProps>(
         )} ${getTileMinHeight(className)} `}
         {...rest}
       >
-        <BaseTile
+        <Headline
           context={context}
-          title={
-            title ? (
-              <Heading
-                headingType={getTileHeadingType(className)}
-                title={title}
-                className={`whitespace-pre-wrap max-w-[600px]`}
-              />
-            ) : null
-          }
-        >
-          {description ? (
-            <Description className="mt-4 max-w-[600px]" description={description} />
-          ) : null}
-          <figure className="m-0 min-w-[600px]">{renderShimmer()}</figure>
-        </BaseTile>
+          className="!p-0 max-w-[600px]"
+          title={title}
+          description={description}
+          headlineVersion={getTileHeadingType(className)}
+        />
+        <figure className="m-0 min-w-[600px]">{renderShimmer()}</figure>
       </BlockWrapper>
     );
   },

package/mobile/src/components/Placeholder/PlaceholderContent.ts

@@ -1,7 +1,6 @@
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
  * @hidden
  */
-export type PlaceholderContent = HeadingContent & DescriptionContent;
+export type PlaceholderContent = HeadlineCommonProps;

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,12 +1,11 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import { Picture } from '../../model/Picture';
-import type { BackwardButtonProps, ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ButtonContent, BackwardButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { Picture } from '../../model/Picture';
+import type { HeadlineProps } from '../../model/HeadlineType';
 
 export interface ProductBlockBenefit {
   icon?: Picture;
@@ -22,9 +21,7 @@ export type BenefitItemProps = {
   benefitsVersion?: IconVersion;
 };
 
-export type ProductBlockInnerContent = HeadingContent &
-  HeadingTypeContent &
-  DescriptionContent &
+export type ProductBlockInnerContent = HeadlineProps &
   ListContent &
   ButtonContent &
   ImageContent & {

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

@@ -1,8 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
-import { Description } from '../../ui-kit/Description/Description';
-import { Heading } from '../../ui-kit/Heading/Heading';
+import { Headline } from '../Headline/Headline';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -17,7 +16,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     className = '',
     context,
     title,
-    headingType = 'h2',
+    headlineVersion = 'L',
     description,
     benefits,
     benefitsVersion = 'normal',
@@ -32,17 +31,15 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
       <div className={`w-full ${className}`}>
         <div>
           {label ? renderLabel(label, version) : null}
+          <Headline
+            context={context}
+            className="!p-0 max-w-[600px]"
+            title={title}
+            description={description}
+            headlineVersion={headlineVersion}
+          />
           <BaseTile
             context={context}
-            title={
-              title ? (
-                <Heading
-                  headingType={headingType}
-                  title={title}
-                  className="whitespace-pre-wrap max-w-[600px]"
-                />
-              ) : null
-            }
             buttons={
               buttons?.length ? (
                 <ButtonSection
@@ -53,9 +50,6 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
               ) : null
             }
           >
-            {description ? (
-              <Description className="mt-3 text-m-md" description={description} />
-            ) : null}
             {benefits?.filter((_) => _.label)?.length ? (
               <div className="mt-3">
                 {benefits.map((benefit, i) =>
@@ -64,12 +58,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
               </div>
             ) : null}
             {items?.length ? (
-              <List
-                className="mt-3 text-m-md"
-                items={items}
-                version={version}
-                isDotted={isDotted}
-              />
+              <List className="mt-3 text-m" items={items} version={version} isDotted={isDotted} />
             ) : null}
           </BaseTile>
         </div>

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

@@ -8,6 +8,7 @@ export function renderBackwardButton(
   version: BlockVersion,
   className: string,
 ) {
+  const { text, href, target, onClick } = button;
   const iconVersion = version === 'primary' ? 'white' : 'black';
   const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
 
@@ -17,12 +18,14 @@ export function renderBackwardButton(
         version={version}
         rounded
         className="w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3"
-        ariaLabel={button?.text}
-        href={button?.href}
+        ariaLabel={text}
+        href={href}
+        target={target}
+        onClick={onClick}
       >
         <Img className="w-4 h-4" image={{ ...backwardIcon, iconVersion }} asSVG />
       </Button>
-      {button?.text ? <span className="text-m-md font-light">{button.text}</span> : null}
+      {text ? <span className="text-m">{text}</span> : null}
     </div>
   );
 }

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

@@ -25,13 +25,9 @@ export function renderBenefit({ benefit, version = 'primary' }: BenefitItemProps
           asSVG
         />
       ) : null}
-      <div className={`font-medium text-m-title-xs m-0 ${benefitTitleStyleMap[version]}`}>
-        {benefit.label}
-      </div>
+      <div className={`text-l m-0 ${benefitTitleStyleMap[version]}`}>{benefit.label}</div>
       {benefit.description && (
-        <div className={`font-normal text-m-sm ${benefitDescStyleMap[version]}`}>
-          {benefit.description}
-        </div>
+        <div className={`text-s ${benefitDescStyleMap[version]}`}>{benefit.description}</div>
       )}
     </div>
   );

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

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { HeadingType } from '../../ui-kit/Heading/HeadingContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+import type { HeadlineProps } from '../../model/HeadlineType';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import type { UniBlockProps } from '../../types';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 
 const productGalleryStyleMap: Record<BlockVersion, string> = {
   primary: 'bg-white text-primary-text',
@@ -11,20 +11,21 @@ const productGalleryStyleMap: Record<BlockVersion, string> = {
 };
 
 export interface ProductGalleryBlockProps extends UniBlockProps {
-  headingType?: HeadingType;
+  headlineVersion?: HeadlineProps;
   block?: ProductBlockInnerContent;
 }
 
 export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
-  ({ block, headingType, context, className = '' }) => {
+  ({ block, context, className = '' }) => {
     const version = block?.version ?? 'primary';
 
     return (
       <section
         className={`flex grow-0 shrink-0 basis-full px-4 pt-6 ${productGalleryStyleMap[version]} ${className}`}
+        role="listitem"
       >
         <div className="flex grow">
-          <ProductBlockInner context={context} headingType={headingType || 'h2'} {...block} />
+          <ProductBlockInner context={context} {...block} />
         </div>
       </section>
     );

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

@@ -1,6 +1,6 @@
 {
   "title": "Продуктовая плитка",
-  "headingType": "h3",
+  "headlineVersion": "S",
   "description": "Описание",
   "image": {
     "format": "webp",