@redneckz/wildless-cms-uni-blocks 0.2.114 → 0.3.0

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

@@ -1,82 +1,44 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import { Title } from '../../ui-kit/Title/Title';
-import { AlignType } from '../BaseTile/BaseTileProps';
-import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
-
-const titleAlignStyleMap: Record<AlignType, string> = {
-  left: 'text-left',
-  center: 'text-center',
-  right: 'text-right',
-};
-
-const titleMarginsStyleMap: Record<LinkColumnsMode, string> = {
-  double: 'mb-8',
-  single: 'mb-[26px]',
-};
-
-const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
-  double: 'gap-x-5 gap-y-[26px] flex-wrap',
-  single: 'gap-3.5 flex-col',
-};
+import { Heading } from '../../ui-kit/Heading/Heading';
+import type { LinkDocsContent } from './LinkDocsContent';
+import { LinkDocsHorizontalList } from './LinkDocsHorizontalList';
+import { LinkDocsVerticalList } from './LinkDocsVerticalList';
 
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
 export const LinkDocs = JSX<LinkDocsProps>(
-  ({ className = '', title, align, documents, icon, columnsMode = 'single' }) => {
-    const containerClasses = linkColumnsModeStyleMap[columnsMode];
-
+  ({
+    className = '',
+    context,
+    title,
+    subtitle,
+    icon = 'DocIconMonoColor',
+    documents,
+    listMode = 'vertical',
+    hasBorder = true,
+  }) => {
     return (
-      <section className={`font-sans p-[50px] bg-white ${className}`}>
-        {title && (
-          <Title
-            className={`font-medium mt-0 ${titleMarginsStyleMap[columnsMode]} ${
-              titleAlignStyleMap[align ?? 'center']
-            }`}
-          >
-            {title}
-          </Title>
+      <section className={`py-6 px-4 bg-white ${className}`}>
+        {title ? (
+          <Heading
+            headingType="h2"
+            className={`text-center ${subtitle ? 'mb-2' : 'mb-5'}`}
+            title={title}
+          />
+        ) : null}
+        {subtitle ? <h3 className="mb-5 text-center text-m-base">{subtitle}</h3> : null}
+        {listMode === 'vertical' ? (
+          <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
+        ) : (
+          <LinkDocsHorizontalList
+            context={context}
+            hasBorder={hasBorder}
+            documents={documents}
+            icon={icon}
+          />
         )}
-        <div className={`flex ${containerClasses}`} role="list">
-          {documents?.length
-            ? documents.map(({ text, fileSize, ...linkProps }, i) => (
-                <a
-                  key={String(i)}
-                  className={`group flex text-sm align-middle h-fit
-                   text-primary-text no-underline hover:text-primary-main
-                   ${columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}`}
-                  role="listitem"
-                  {...linkProps}
-                >
-                  {icon && <Icon className="mr-2.5 h-fit" name={icon} width="24px" height="24px" />}
-                  <span className="self-center">
-                    {text}
-                    <span className="text-secondary-text group-hover:text-primary-main">
-                      {linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize)}
-                    </span>
-                  </span>
-                </a>
-              ))
-            : null}
-        </div>
       </section>
     );
   },
 );
-
-const getExtFromHref = (href: string) => {
-  if (!href) return '';
-
-  const lastChunk = href.split('.').pop();
-  if (!lastChunk || lastChunk.includes('/')) return '';
-
-  return lastChunk;
-};
-
-const formatSuffix = (ext?: string, fileSize?: string) => {
-  const prefix = ext || fileSize ? ',' : '';
-  const extension = ext ? ` ${ext}` : '';
-  const size = fileSize ? ` (${fileSize})` : '';
-  return prefix + extension + size;
-};

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

@@ -1,10 +1,25 @@
-import { LinkProps } from '../../model/LinkProps';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
-import { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { LinkProps } from '../../model/LinkProps';
+import type { IconName } from '../../icons/IconName';
+import type { AlignType } from '../BaseTile/BaseTileProps';
 
-/** @title Режим отображения списка */
+/**
+ * @title Отображение списка
+ * @enumNames [
+ *    "Одна колонка",
+ *    "Две колонки",
+ *    ]
+ */
 export type LinkColumnsMode = 'single' | 'double';
 
+/**
+ * @title Отображение списка (моб.)
+ * @enumNames [
+ *    "Вертикально",
+ *    "Горизонтально",
+ *    ]
+ */
+export type LinkListMode = 'vertical' | 'horizontal';
+
 /**
  * @title Элемент списка
  */
@@ -16,11 +31,18 @@ export interface LinkDocsItem extends LinkProps {
 /**
  * @title Список документов
  */
-export interface LinkDocsContent extends Pick<BaseTileCommonProps, 'title' | 'align'> {
-  /** @title Отображение списка */
-  columnsMode?: LinkColumnsMode;
+export interface LinkDocsContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Подзаголовок */
+  subtitle?: string;
   /** @title Название иконки */
   icon?: IconName;
   /** @title Список */
   documents?: LinkDocsItem[];
+  columnsMode?: LinkColumnsMode;
+  listMode?: LinkListMode; // TODO: мобильный проп
+  /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
+  hasBorder?: boolean;
+  align?: AlignType;
 }

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

@@ -0,0 +1,28 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import { LinkDocsListItem } from './LinkDocsListItem';
+import type { LinkDocsVerticalListProps } from './LinkDocsVerticalList';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+
+export interface LinkDocsHorizontalListProps extends LinkDocsVerticalListProps {
+  context: ContentPageContext;
+}
+
+export const LinkDocsHorizontalList = JSX<LinkDocsHorizontalListProps>(
+  ({ context, hasBorder = true, documents, icon }) => {
+    return (
+      <SwipeListControl context={context} className="text-m-sm text-primary-main">
+        {documents?.length
+          ? documents.map((doc, i) => (
+              <LinkDocsListItem
+                key={String(i)}
+                className={hasBorder ? 'rounded-md border-main-stroke border p-4' : ''}
+                doc={doc}
+                icon={icon}
+              />
+            ))
+          : null}
+      </SwipeListControl>
+    );
+  },
+);

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

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { LinkDocsListItem } from './LinkDocsListItem';
+import type { IconName } from '../../icons/IconName';
+import type { LinkColumnsMode, LinkDocsItem } from './LinkDocsContent';
+
+export interface LinkDocsListProps {
+  className?: string;
+  documents?: LinkDocsItem[];
+  columnsMode?: LinkColumnsMode;
+  icon?: IconName;
+}
+
+export const LinkDocsList = JSX<LinkDocsListProps>(
+  ({ className, documents, columnsMode = 'double', icon }) => {
+    return documents?.length ? (
+      <div className={className} role="list">
+        {documents.map((doc, i) => (
+          <div
+            key={String(i)}
+            className={columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}
+            role="listitem"
+          >
+            <LinkDocsListItem
+              className="group flex text-sm align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main"
+              doc={doc}
+              icon={icon}
+            />
+          </div>
+        ))}
+      </div>
+    ) : null;
+  },
+);

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

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { LinkDocsListItemBase } from './LinkDocsListItemBase';
+import type { LinkDocsListItemProps } from './LinkDocsListItemBase';
+
+export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
+  <LinkDocsListItemBase
+    className={`flex h-full ${className}`}
+    iconClassName="mr-2.5 min-w-6 min-h-6"
+    doc={doc}
+    icon={icon}
+  />
+));

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

@@ -0,0 +1,51 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { IconName } from '../../icons/IconName';
+import type { LinkDocsItem } from './LinkDocsContent';
+
+export interface LinkDocsListItemProps {
+  className?: string;
+  doc: LinkDocsItem;
+  icon?: IconName;
+}
+
+export interface LinkDocsListItemBaseProps extends LinkDocsListItemProps {
+  iconClassName?: string;
+  textClassName?: string;
+  suffixClassName?: string;
+}
+
+export const LinkDocsListItemBase = JSX<LinkDocsListItemBaseProps>(
+  ({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
+    const { text, fileSize, ...linkProps } = doc;
+    return (
+      <a className={className} role="link" {...linkProps}>
+        {icon ? (
+          <Icon className={iconClassName} name={icon} width="24px" height="24px" asSVG />
+        ) : null}
+        {text ? (
+          <span className={textClassName}>
+            {text}
+            <span className={suffixClassName}>
+              {linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize)}
+            </span>
+          </span>
+        ) : null}
+      </a>
+    );
+  },
+);
+
+const formatSuffix = (ext?: string, fileSize?: string) => {
+  const prefix = ext || fileSize ? ',' : '';
+  const extension = ext ? ` ${ext}` : '';
+  const size = fileSize ? ` (${fileSize})` : '';
+  return prefix + extension + size;
+};
+
+const getExtFromHref = (href: string) => {
+  if (!href) return '';
+
+  const index = href.lastIndexOf('.');
+  return index !== -1 ? href.substring(index + 1) : '';
+};

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

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { IconName } from '../../icons/IconName';
+import type { LinkDocsItem } from './LinkDocsContent';
+import { LinkDocsListItem } from './LinkDocsListItem';
+
+export interface LinkDocsVerticalListProps {
+  hasBorder?: boolean;
+  documents?: LinkDocsItem[];
+  icon?: IconName;
+}
+
+export const LinkDocsVerticalList = JSX<LinkDocsVerticalListProps>(
+  ({ hasBorder = true, documents, icon }) => {
+    return (
+      <div
+        className={`text-m-sm text-primary-main flex flex-col ${hasBorder ? 'gap-3.5' : 'gap-2'}`}
+        role="list"
+      >
+        {documents?.length
+          ? documents.map((doc, i) => (
+              <div key={String(i)} role="listitem">
+                <LinkDocsListItem
+                  className={hasBorder ? 'rounded-md border-main-stroke border p-4' : ''}
+                  doc={doc}
+                  icon={icon}
+                />
+              </div>
+            ))
+          : null}
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,26 @@
+import type { LinkDocsContent } from './LinkDocsContent';
+
+export const linkDocsContentExample: LinkDocsContent = {
+  title: 'Дополнительные документы',
+  subtitle: 'Ответы на часто задаваемые вопросы',
+  documents: [
+    { text: 'target self', href: '/abc1/cooldoc.doc', target: '_self' },
+    { text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },
+    { text: 'GlassIcon', href: '/abc3/map.jpeg' },
+    { text: 'no icon', href: '/abc4' },
+    { text: 'документ 5', href: '/abc5' },
+    { text: 'документ 6', href: '/abc6/abc.pdf' },
+    { text: 'Text text text', href: '/abc7/yolo.png' },
+    {
+      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.zip',
+      fileSize: '2.3МБ',
+    },
+    { text: 'И ещё немного текста', href: '/abc9/rarniw.rar', fileSize: '666МБ' },
+    {
+      text: 'Форматируем, сортируем, смотрим как отображается...',
+      href: '/abc10/',
+      fileSize: '65ГБ',
+    },
+  ],
+};

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

@@ -1,4 +1,6 @@
-import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionProps';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 
 /**
  * @title QR код
@@ -13,10 +15,11 @@ export interface QRCode {
 /**
  * @title Мобильное приложение
  */
-export interface MobileAppTileContent
-  extends Pick<BaseTileCommonProps, 'title' | 'buttons' | 'description'> {
-  // TODO: description для мобильной версии
-  qr?: QRCode;
-  /** @title Ссылка */
-  href?: string; // TODO: для мобильной версии
-}
+export type MobileAppTileContent = HeadingContent &
+  DescriptionContent &
+  ButtonContent & {
+    // TODO: description для мобильной версии
+    qr?: QRCode;
+    /** @title Ссылка */
+    href?: string; // TODO: для мобильной версии
+  };

package/mobile/src/components/PictureText/PictureText.tsx

@@ -2,17 +2,17 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import type { PictureTextContent } from './PictureTextContent';
 
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import { Img } from '../../ui-kit/Img';
-import { Title } from '../../ui-kit/Title/Title';
+import { Img } from '../../ui-kit/Img/Img';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
-export const PictureText = JSX<PictureTextProps>(({ className, title, image, benefits }) => {
+export const PictureText = JSX<PictureTextProps>(({ className = '', title, image, benefits }) => {
   return (
     <section className={`relative font-sans text-primary-text bg-white p-14 ${className}`}>
-      <Title className="font-medium m-0 text-center">{title}</Title>
+      <Heading headingType="h2" className="text-center" title={title} />
       <div className={'flex justify-center mt-9'}>
         {image?.src && <Img className="mr-6" image={image} />}
         {benefits?.length ? (
@@ -32,6 +32,7 @@ function renderBenefit(benefit: Benefit, i: number) {
           name={benefit.icon}
           width="48"
           height="48"
+          asSVG
         />
       )}
       <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">

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

@@ -1,10 +1,13 @@
-import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
+export type TitleWithImageContent = HeadingContent & ImageContent;
+
 /**
  * @title Картинка с текстом
  */
-export interface PictureTextContent extends Pick<BaseTileCommonProps, 'title' | 'image'> {
+export interface PictureTextContent extends TitleWithImageContent {
   /** @title Список преимуществ */
   benefits?: Benefit[];
 }

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { PlaceholderContent } from '../../components/Placeholder/PlaceholderContent';
-import { Tile } from '../Tile/Tile';
 import type { UniBlockProps } from '../../types';
+import { Tile } from '../Tile/Tile';
+import type { PlaceholderContent } from './PlaceholderContent';
 
 export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
   className?: string;
@@ -9,10 +9,15 @@ export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
 
 const GOLDEN_RATIO = 1.618;
 
-export const Placeholder = JSX<PlaceholderProps>(({ className, context, title }) => {
+export const Placeholder = JSX<PlaceholderProps>(({ className = '', context, title }) => {
   return (
-    <Tile className={className} context={context} title={title} description="Блок в разработке...">
-      <figure className="m-0 min-w-[600px]">{renderShimmer()}</figure>
+    <Tile
+      className={`pr-0 min-h-0 ${className}`}
+      context={context}
+      title={title}
+      description="Блок в разработке..."
+    >
+      <figure className="m-0">{renderShimmer()}</figure>
     </Tile>
   );
 });

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

@@ -1,6 +1,6 @@
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+
 /**
  * @hidden
  */
-export interface PlaceholderContent {
-  title?: string;
-}
+export type PlaceholderContent = HeadingContent;

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

@@ -1,28 +1,31 @@
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { TitleSize } from '../../ui-kit/Title/TitleProps';
-import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionProps';
+import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
-export interface ProductBlockInnerCommonProps
-  extends Omit<BaseTileCommonProps, 'align' | 'titleSize'> {
-  /**
-   * @title Размер заголовка
-   * @default M
-   * @hidden
-   */
-  titleSize?: TitleSize;
-  /**
-   * @title Преимущества
-   * @minItems 2
-   * @maxItems 3
-   */
-  benefits?: Benefit[];
-}
+export type ProductBlockInnerContent = HeadingContent &
+  HeadingTypeContent &
+  DescriptionContent &
+  ListContent &
+  ButtonContent &
+  ImageContent & {
+    /**
+     * @title Преимущества
+     * @minItems 2
+     * @maxItems 3
+     */
+    benefits?: Benefit[];
+    version?: BlockVersion;
+  };
 
 /**
  * @title Продуктовый блок
  */
-export interface ProductBlockContent extends ProductBlockInnerCommonProps {
+export interface ProductBlockContent extends ProductBlockInnerContent {
   /** @title Хлебные крошки */
   breadcrumbs?: LinkProps[];
 }

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

@@ -1,18 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Img } from '../../ui-kit/Img';
+import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
-import type { ProductBlockInnerCommonProps } from './ProductBlockContent';
+import type { ProductBlockInnerContent } from './ProductBlockContent';
 import { renderBenefit } from './renderBenefit';
 
-export interface ProductBlockInnerProps extends ProductBlockInnerCommonProps, UniBlockProps {}
+export type ProductBlockInnerProps = ProductBlockInnerContent & UniBlockProps;
 
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   ({
-    className,
+    className = '',
     context,
     title,
-    titleSize,
+    headingType = 'h2',
     description,
     benefits,
     buttons,
@@ -21,21 +25,32 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     version = 'primary',
   }) => {
     return (
-      <div className={`${className || ''}`}>
+      <div className={`${className}`}>
         <div>
           <BaseTile
             context={context}
-            title={title}
-            titleSize={titleSize || 'XL'}
-            description={description}
-            items={items}
-            buttons={buttons}
+            title={
+              title && (
+                <Heading
+                  headingType={headingType}
+                  title={title}
+                  className={`whitespace-pre-wrap max-w-[600px]`}
+                />
+              )
+            }
+            buttons={
+              buttons?.length ? (
+                <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+              ) : null
+            }
           >
+            {description && <Description description={description} />}
             {benefits?.length ? (
               <div className="mt-[19px]">
                 {benefits.map((_, i) => renderBenefit(_, i, version))}
               </div>
             ) : null}
+            {items?.length ? <List items={items} /> : null}
           </BaseTile>
         </div>
         {image?.src && (

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

@@ -20,11 +20,12 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
           name={benefit.icon}
           width="24"
           height="24"
+          asSVG
         />
       )}
-      <h4 className={`font-medium text-m-base m-0 ${benefitTitleStyleMap[version]}`}>
+      <div className={`font-medium text-m-base m-0 ${benefitTitleStyleMap[version]}`}>
         {benefit.label}
-      </h4>
+      </div>
       {benefit.description && (
         <div className={`font-normal text-m-sm ${benefitDescStyleMap[version]}`}>
           {benefit.description}

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

@@ -25,6 +25,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
         <div className="flex px-4 py-6">
           {slides.map((_, i) =>
             renderNavButton({
+              slide: _.productBlock,
               i,
               activeSlideIndex,
               onClick: () => setActiveSlideIndex(i),
@@ -37,7 +38,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
   },
 );
 
-function renderNavButton({ i, activeSlideIndex, onClick, duration }) {
+function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
   const isActiveBtn = i === activeSlideIndex;
   const progressBarClassName = isActiveBtn ? 'animate-slide bg-primary-main' : 'bg-main-divider';
   return (
@@ -45,6 +46,7 @@ function renderNavButton({ i, activeSlideIndex, onClick, duration }) {
       type="button"
       key={String(i)}
       onClick={onClick}
+      aria-label={slide?.title}
       className={`relative overflow-hidden border-0 bg-inherit cursor-pointer pl-0 mr-1.5 pt-4 pb-5 last:mr-0 grow basis-0`}
     >
       <div

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

@@ -1,20 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { TitleSize } from '../../ui-kit/Title/TitleProps';
-import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
+import { HeadingType } from '../../ui-kit/Heading/HeadingContent';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 
 export interface ProductGalleryBlockProps extends UniBlockProps {
-  titleSize?: TitleSize;
-  block?: ProductBlockInnerCommonProps;
+  headingType?: HeadingType;
+  block?: ProductBlockInnerContent;
 }
 
 export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
-  ({ block, titleSize, context }) => {
+  ({ block, headingType, context }) => {
     return (
       <section className="flex grow-0 shrink-0 basis-full px-4 py-6" role="listitem">
         <div className="flex grow">
-          <ProductBlockInner context={context} titleSize={titleSize} {...block} />
+          <ProductBlockInner context={context} headingType={headingType || 'h2'} {...block} />
         </div>
       </section>
     );