@redneckz/wildless-cms-uni-blocks 0.2.113 → 0.2.116

package/mobile/lib/ui-kit/SwipeListControl/utils/getIndexParts.js

@@ -0,0 +1,15 @@
+/*
+  Returns object containing whole index part, and it's decimal part for a given
+  scrollLeft value of a container and an array of tuple containing values of a
+  start and end boundaries of a scrollable child, right boundary non-inclusive.
+  Returns object with index equal -1 and fraction equal 0 if scrollLeft is outside given scrollPoints
+ */
+export const getIndexParts = (scrollLeft, scrollPoints) => {
+    const index = scrollPoints.findIndex(([start, end]) => start <= scrollLeft && scrollLeft < end);
+    if (index < 0)
+        return { index, fraction: 0 };
+    const [start, end] = scrollPoints[index];
+    const fraction = (scrollLeft - start) / (end - start);
+    return { index, fraction };
+};
+//# sourceMappingURL=getIndexParts.js.map

package/mobile/lib/ui-kit/SwipeListControl/utils/getIndexParts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getIndexParts.js","sourceRoot":"","sources":["../../../../src/ui-kit/SwipeListControl/utils/getIndexParts.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,UAAkB,EAClB,YAAgC,EAIhC,EAAE;IACF,MAAM,KAAK,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,UAAU,IAAI,UAAU,GAAG,GAAG,CAAC,CAAC;IAChG,IAAI,KAAK,GAAG,CAAC;QAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;IAE7C,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACzC,MAAM,QAAQ,GAAG,CAAC,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC;IACtD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AAC7B,CAAC,CAAC"}

package/mobile/lib/ui-kit/SwipeListControl/utils/getScrollPoints.d.ts

@@ -0,0 +1,8 @@
+export declare const getScrollPoints: ({ gap, padding, clientWidth, scrollWidth, childElementCount, itemWidth, }: {
+    gap: number;
+    padding: number;
+    clientWidth: number;
+    scrollWidth: number;
+    childElementCount: number;
+    itemWidth: number;
+}) => [number, number][];

package/mobile/lib/ui-kit/SwipeListControl/utils/getScrollPoints.js

@@ -0,0 +1,24 @@
+/*
+ Calculates array of breakpoints for each scrollable element in container.
+ Returns array of tuples consisting of [start, end] boundary scrollLeft values.
+*/
+export const getScrollPoints = ({ gap, padding, clientWidth, scrollWidth, childElementCount, itemWidth, }) => {
+    const scrollItemWidth = itemWidth + gap;
+    const scrollableDistance = scrollWidth - clientWidth;
+    const edgeScrollDistance = clientWidth - gap - padding;
+    const lastScrollableIdx = childElementCount - 2;
+    const scrollPoints = new Array(childElementCount)
+        .fill(0)
+        .map((_, idx) => idx === 0 || idx === lastScrollableIdx
+        ? [
+            idx > 0 ? scrollableDistance - edgeScrollDistance : 0,
+            idx > 0 ? scrollableDistance : edgeScrollDistance,
+        ]
+        : [
+            (idx - 1) * scrollItemWidth + edgeScrollDistance,
+            idx * scrollItemWidth + edgeScrollDistance,
+        ]);
+    scrollPoints[childElementCount - 1] = [scrollableDistance, scrollWidth];
+    return scrollPoints;
+};
+//# sourceMappingURL=getScrollPoints.js.map

package/mobile/lib/ui-kit/SwipeListControl/utils/getScrollPoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getScrollPoints.js","sourceRoot":"","sources":["../../../../src/ui-kit/SwipeListControl/utils/getScrollPoints.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,GAAG,EACH,OAAO,EACP,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,SAAS,GAQV,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,SAAS,GAAG,GAAG,CAAC;IACxC,MAAM,kBAAkB,GAAG,WAAW,GAAG,WAAW,CAAC;IACrD,MAAM,kBAAkB,GAAG,WAAW,GAAG,GAAG,GAAG,OAAO,CAAC;IAEvD,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,CAAC,CAAC;IAChD,MAAM,YAAY,GAAuB,IAAI,KAAK,CAAC,iBAAiB,CAAC;SAClE,IAAI,CAAC,CAAC,CAAC;SACP,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CACd,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,iBAAiB;QACpC,CAAC,CAAC;YACE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAC;YACrD,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,kBAAkB;SAClD;QACH,CAAC,CAAC;YACE,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,eAAe,GAAG,kBAAkB;YAChD,GAAG,GAAG,eAAe,GAAG,kBAAkB;SAC3C,CACN,CAAC;IACJ,YAAY,CAAC,iBAAiB,GAAG,CAAC,CAAC,GAAG,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC;IAExE,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC"}

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItem } from './AccordionItem';
 
@@ -14,11 +14,7 @@ export const Accordion = JSX<AccordionProps>(
           bordered ? 'px-4' : ''
         } ${className}`}
       >
-        {title ? (
-          <Title className="m-0 mb-2 font-medium text-center" size="M">
-            {title}
-          </Title>
-        ) : null}
+        {title ? <Heading type="h3" className="mb-2 text-center" text={title} /> : null}
         {description ? <div className="mb-5 text-m-md text-center">{description}</div> : null}
         {accordionItems?.length ? (
           <ul className="list-none m-0 p-0">

package/mobile/src/components/BaseTile/BaseTile.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTileInner } from './BaseTileInner';
 import type { AlignType, BaseTileCommonProps } from './BaseTileProps';
-import { getTitleSizeByClassName } from './getTitleSizeByClassName';
+import { getHeadingType } from './getHeadingType';
 
 const alignBlock: Record<AlignType, string> = {
   left: 'items-start',
@@ -20,7 +20,7 @@ export const BaseTile = JSX<BaseTileProps>(
     className,
     context,
     title,
-    titleSize,
+    headingType,
     description,
     children,
     buttons,
@@ -32,12 +32,11 @@ export const BaseTile = JSX<BaseTileProps>(
     return (
       <div className={`font-sans flex flex-col grow h-full ${alignBlock[align]}`}>
         {title && (
-          <Title
-            size={titleSize || getTitleSizeByClassName(className)}
+          <Heading
+            type={headingType || getHeadingType(className)}
             className={`${TITLE_CLASSES} ${version === 'primary' ? 'text-primary-text' : ''}`}
-          >
-            {title}
-          </Title>
+            text={title}
+          />
         )}
         <BaseTileInner
           context={context}

package/mobile/src/components/BaseTile/BaseTileProps.ts

@@ -1,8 +1,8 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { HeadingType } from '../../ui-kit/Heading/HeadingProps';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
-import type { TitleSize } from '../../ui-kit/Title/TitleProps';
 
 /**
  * @title Выравнивание
@@ -21,7 +21,7 @@ export interface BaseTileIconButton extends ButtonWithIconProps {
 /**
  * @title Общий компонент плиток
  */
-export interface BaseTileCommonProps extends BaseTileTitleProps, BaseTileMainProps {}
+export type BaseTileCommonProps = BaseTileTitleProps & BaseTileMainProps;
 
 /**
  * @title Заголовк плитки
@@ -30,11 +30,11 @@ export interface BaseTileTitleProps {
   /** @title Заголовок */
   title?: string;
   /**
-   * @title Размер заголовка
-   * @default M
+   * @title Тип заголовка
    */
-  titleSize?: TitleSize;
+  headingType?: HeadingType;
 }
+
 export interface BaseTileMainProps {
   description?: string;
   image?: Picture;

package/mobile/src/components/BaseTile/{getTitleSizeByClassName.ts → getHeadingType.ts}

@@ -1,11 +1,12 @@
 import { getColSpan } from '../../utils/getColSpan';
-export function getTitleSizeByClassName(className = '') {
+
+export function getHeadingType(className = '') {
   const colSpan = getColSpan(className);
   if (colSpan <= 4) {
-    return 'S';
+    return 'h4';
   } else if (colSpan <= 8) {
-    return 'M';
+    return 'h3';
   } else {
-    return 'L';
+    return 'h2';
   }
 }

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import { Title } from '../../ui-kit/Title/Title';
 import type { Benefit, BenefitsBlockContent } from './BenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
@@ -13,7 +13,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefi
         className || ''
       }`}
     >
-      {title ? <Title className="font-medium m-0 max-w-[47rem] text-center">{title}</Title> : null}
+      {title ? <Heading type="h2" className="max-w-[47rem] text-center" text={title} /> : null}
       {benefits?.length ? (
         <div className="grid grid-cols-2 gap-5 mt-9">{benefits.map(renderStep)}</div>
       ) : null}

package/mobile/src/components/Blocks.ts

@@ -2,6 +2,7 @@ import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
+import { LinkDocs } from './LinkDocs/LinkDocs';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
@@ -13,6 +14,7 @@ export const Blocks = {
   Footer,
   Header,
   Headline,
+  LinkDocs,
   Placeholder,
   ProductBlock,
   ProductGallery,

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

@@ -3,7 +3,7 @@ import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
 import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../types';
 import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type { ComparisonTableContent } from './ComparisonTableContent';
 import { COLS_LENGTH_FOR_SCROLL, COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
 import { HeaderCell } from './HeaderCell';
@@ -54,7 +54,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
           className || ''
         }`}
       >
-        <Title className="font-medium m-0 max-w-[47rem] text-center mb-9 mx-auto">{title}</Title>
+        <Heading type="h2" className="max-w-[47rem] text-center mb-9 mx-auto" text={title} />
         <div role="table">
           {colHeaders?.length ? (
             <TableRowContainer>

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

@@ -2,10 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img';
-import { Title } from '../../ui-kit/Title/Title';
 import { BORDER_CLASSES, GRADIENT } from './constants';
 
 export interface HeaderCellProps {
@@ -30,11 +30,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
       />
     )}
     {image?.src && <Img className="mb-[18px]" image={image} />}
-    {title && (
-      <Title size="S" className="font-medium m-0 text-center text-white">
-        {title}
-      </Title>
-    )}
+    {title && <Heading type="h4" className="text-center text-white" text={title} />}
     {link?.text && (
       <div className="mt-auto w-full">
         <Button

package/mobile/src/components/ContentPage/ContentPage.page.json

@@ -265,6 +265,62 @@
         "bgColor": "transparent"
       }
     },
+    {
+      "type": "LinkDocs",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Дополнительные документы",
+        "subtitle": "Ответы на часто задаваемые вопросы",
+        "icon": "DocIcon",
+        "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, 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ГБ"
+          }
+        ]
+      }
+    },
     {
       "type": "Footer",
       "style": ["col-span-12"],

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

@@ -25,7 +25,7 @@ interface MediaButtonProps {
 }
 
 export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
-  const { icon, width, height } =
+  const { icon, width, height, label } =
     ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
 
   if (!icon) return null;
@@ -34,6 +34,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
     <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"
       href={href}
+      aria-label={label}
       target="_blank"
       rel="noopener noreferrer"
     >

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img';
-import { Title } from '../../ui-kit/Title/Title';
 import type { GalleryCard } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
 
@@ -12,7 +12,7 @@ export const Gallery = JSX<GalleryProps>(({ title, description, cards = [], clas
       className={`relative font-sans text-primary-text bg-white p-4 overflow-hidden ${className}`}
     >
       <div className="flex flex-col items-center mb-8">
-        <Title className="font-medium m-0 text-centers">{title}</Title>
+        <Heading type="h2" className="text-center" text={title} />
         {description ? (
           <div className="font-normal text-base max-w-[600px] mt-3">{description}</div>
         ) : null}

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { GalleryVersion } from '../../model/GalleryVersion';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { Tile } from '../Tile/Tile';
 import { cardStyleMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
@@ -24,7 +24,7 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
       <div>
         <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" />
         <div className="flex flex-col items-center mb-8">
-          {title ? <Title className="font-medium m-0 text-center">{title}</Title> : null}
+          {title ? <Heading type="h2" className="text-center" text={title} /> : null}
           {description ? (
             <div className="font-normal text-base max-w-[600px] mt-2.5">{description}</div>
           ) : null}

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

@@ -34,7 +34,7 @@ export const Header = JSX<HeaderProps>(
       <header className={`${bgColor} ${className}`}>
         <div className="container px-4 py-0">
           <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
-          <nav className="flex items-center m-0 p-0 overflow-x-scroll overflow-y-hidden w-full h-[50px]">
+          <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
             <div className="flex">
               {subItems?.map((_, i) =>
                 renderSubItem(

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" onClick={onClick}>
+      <button className="pr-4" onClick={onClick} aria-label="Открыть меню">
         <Icon
           name={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
           width="24"

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 
 import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img';
-import { Title } from '../../ui-kit/Title/Title';
 import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
@@ -11,11 +11,7 @@ export const Headline = JSX<HeadlineProps>(
   ({ bgColor = 'transparent', className = '', title, description, image }) => {
     return (
       <section className={`px-4 py-6 ${bgColor} ${className}`}>
-        {title && (
-          <Title size="L" className="text-primary-text mt-0 font-medium">
-            {title}
-          </Title>
-        )}
+        {title && <Heading type="h2" className="text-primary-text" text={title} />}
         {description && (
           <p className={`font-normal text-m-md ${title ? 'mt-2.5' : ''}`}>{description}</p>
         )}

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

@@ -1,11 +1,14 @@
 import type { BgColorVersion } from '../../model/BgColorVersion';
-import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { Picture } from '../../model/Picture';
+import type { AlignType, BaseTileTitleProps } from '../BaseTile/BaseTileProps';
 
 /**
  * @title Заголовок
  */
-export interface HeadlineContent
-  extends Pick<BaseTileCommonProps, 'title' | 'titleSize' | 'description' | 'align' | 'image'> {
-  //TODO: image for mobile
+export interface HeadlineContent extends BaseTileTitleProps {
+  description?: string;
+  image?: Picture;
+  align?: AlignType;
+  // TODO: image for mobile
   bgColor?: BgColorVersion;
 }

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

@@ -1,5 +1,6 @@
 {
   "title": "Дополнительные документы",
+  "subtitle": "Ответы на часто задаваемые вопросы",
   "icon": "DocIcon",
   "documents": [
     {
@@ -22,5 +23,7 @@
       "href": "/abc/map.rar"
     }
   ],
-  "columnsMode": "double"
+  "columnsMode": "double",
+  "listMode": "vertical",
+  "hasBorder": true
 }

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

@@ -1,82 +1,40 @@
 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 type { LinkDocsContent } from './LinkDocsContent';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { LinkDocsVerticalList } from './LinkDocsVerticalList';
+import { LinkDocsHorizontalList } from './LinkDocsHorizontalList';
 
 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 = 'DocIcon',
+    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 type="h2" className={`text-center ${subtitle ? 'mb-2' : 'mb-5'}`} text={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>
+    );
+  },
+);