@redneckz/wildless-cms-uni-blocks 0.3.26 → 0.3.29

package/src/common.css

@@ -1,5 +1,9 @@
 @import '../fonts/ubuntu/ubuntu.css';
 
+html {
+  scroll-behavior: smooth;
+}
+
 /* Private clients | Green */
 [data-theme='pc'] {
   --color-primary-main: 66, 171, 68;

package/src/components/Accordion/Accordion.tsx

@@ -13,9 +13,12 @@ const accordionStyleMap: Record<BlockVersion, string> = {
 };
 
 export const Accordion = JSX<AccordionProps>(
-  ({ title, accordionItems, context, className = '', version = 'primary' }) => {
+  ({ title, accordionItems, context, className = '', version = 'primary', anchor = null }) => {
     return (
-      <section className={`p-[50px] font-sans ${className} ${accordionStyleMap[version]}`}>
+      <section
+        className={`p-[50px] font-sans ${className} ${accordionStyleMap[version]}`}
+        id={anchor}
+      >
         {title ? <Heading headingType="h4" className="mb-2.5" title={title} /> : null}
         {accordionItems?.length ? (
           <ul className="list-none m-0 p-0">

package/src/components/BaseTile/BaseTile.tsx

@@ -5,9 +5,9 @@ import type { BaseTileCommonProps } from './BaseTileProps';
 export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}
 
 export const BaseTile = JSX<BaseTileProps>(
-  ({ className = '', title, children, buttons, image }) => {
+  ({ className = '', title, children, buttons, image, anchor = null }) => {
     return (
-      <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
+      <div className={`font-sans flex flex-col grow h-full items-start ${className}`} id={anchor}>
         {title}
         <div className="flex grow w-full justify-between">
           <div className="flex flex-col justify-between w-full">

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -6,22 +6,25 @@ import type { Benefit, BenefitsBlockContent } from './BenefitsBlockContent';
 
 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 flex flex-col items-center ${
-        className || ''
-      }`}
-    >
-      {title ? (
-        <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
-      ) : null}
-      {benefits?.length ? (
-        <div className="grid grid-cols-2 gap-8 mt-9">{benefits.map(renderStep)}</div>
-      ) : null}
-    </section>
-  );
-});
+export const BenefitsBlock = JSX<BenefitsBlockProps>(
+  ({ className, title, benefits, anchor = null }) => {
+    return (
+      <section
+        className={`font-sans text-primary-text bg-white p-12 flex flex-col items-center ${
+          className || ''
+        }`}
+        id={anchor}
+      >
+        {title ? (
+          <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
+        ) : null}
+        {benefits?.length ? (
+          <div className="grid grid-cols-2 gap-8 mt-9">{benefits.map(renderStep)}</div>
+        ) : null}
+      </section>
+    );
+  },
+);
 
 const renderStep = (benefit: Benefit, i: number) => {
   return (

package/src/components/BlockContent.ts

@@ -5,8 +5,10 @@ import type { FooterContent } from './Footer/FooterContent';
 import type { GalleryContent } from './Gallery/GalleryContent';
 import type { HeaderContent } from './Header/HeaderContent';
 import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
+import type { LinkListContent } from './LinkList/LinkListContent';
 import type { MobileAppTileContent } from './MobileAppTile/MobileAppTileContent';
 import type { NavigationContent } from './Navigation/NavigationContent';
+import type { NavigatorTabsContent } from './NavigatorTabs/NavigatorTabsContent';
 import type { PictureTextContent } from './PictureText/PictureTextContent';
 import type { PlaceholderContent } from './Placeholder/PlaceholderContent';
 import type { ProductBlockContent } from './ProductBlock/ProductBlockContent';
@@ -17,7 +19,6 @@ 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
@@ -31,6 +32,7 @@ export type BlockContent =
   | HeaderContent
   | LinkDocsContent
   | MobileAppTileContent
+  | NavigatorTabsContent
   | PictureTextContent
   | PlaceholderContent
   | ProductBlockContent

package/src/components/Blocks.ts

@@ -11,6 +11,7 @@ import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Navigation } from './Navigation/Navigation';
+import { NavigatorTabs } from './NavigatorTabs/NavigatorTabs';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
@@ -38,6 +39,7 @@ export const Blocks = {
   LinkDocs,
   MiniGallery,
   MobileAppTile,
+  NavigatorTabs,
   PictureText,
   ProductBlock,
   ProductGallery,

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

@@ -130,6 +130,7 @@ export default {
         isColoredFirstColumn={true}
         context={context}
         rowHeaders={rowHeaders}
+        orientation="vertical"
         columns={Array(2).fill(columns).flat()}
         visibleRowLength={2}
       />
@@ -143,7 +144,7 @@ export default {
         isColoredFirstColumn={true}
         context={context}
         rowHeaders={rowHeaders}
-        orientation={'horizontal'}
+        orientation="horizontal"
         columns={Array(2).fill(columns).flat()}
         visibleRowLength={2}
       />

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

@@ -16,7 +16,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     columns,
     visibleRowLength = 0,
     isColoredFirstColumn = false,
-    orientation = 'horizontal',
+    orientation = 'vertical',
   }) => {
     const tableData =
       columns?.map(({ data, header }) => ({
@@ -95,16 +95,6 @@ const renderInnerTable = ({
   handleToggleColumn,
 }) =>
   orientation === 'horizontal' ? (
-    tableData.map(
-      renderColumn({
-        context,
-        visibleRowLength,
-        isColoredFirstColumn,
-        columnsViewState,
-        handleToggleColumn,
-      }),
-    )
-  ) : (
     <SwipeListControl
       context={context}
       onSlideChange={onSlideChange(columnsViewState, setColumnsViewState)}
@@ -119,6 +109,16 @@ const renderInnerTable = ({
         }),
       )}
     </SwipeListControl>
+  ) : (
+    tableData.map(
+      renderColumn({
+        context,
+        visibleRowLength,
+        isColoredFirstColumn,
+        columnsViewState,
+        handleToggleColumn,
+      }),
+    )
   );
 
 const renderColumn =

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { FIRST_CELL_CLASSES } from './constants';
 import { ComparisonTableBody } from './ComparisonTableBody';
-import type { UniBlockProps } from '../../types';
 import type { ComparisonTableContent } from './ComparisonTableContent';
+import { FIRST_CELL_CLASSES } from './constants';
 
 export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
 
@@ -16,6 +16,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     columns,
     visibleRowLength = 0,
     isColoredFirstColumn = false,
+    anchor = null,
   }) => {
     const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
     const showToggle = () => setIsShowAllRow(!isShowAllRow);
@@ -25,6 +26,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
         className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${
           className || ''
         }`}
+        id={anchor}
       >
         <Heading
           headingType="h2"

package/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -83,5 +83,5 @@ export interface ComparisonTableContent {
   /** @title Отображать заданное количество строк */
   visibleRowLength?: number;
   /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
-  orientation?: ListOrientation;
+  orientation?: ListOrientation; // TODO: мобильный проп
 }

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

@@ -57,6 +57,34 @@
         ]
       }
     },
+    {
+      "type": "NavigatorTabs",
+      "style": ["col-span-12"],
+      "content": {
+        "navigatorTabs": [
+          {
+            "label": "Калькулятор",
+            "anchor": "calculator"
+          },
+          {
+            "label": "Преимущества",
+            "anchor": "advantages"
+          },
+          {
+            "label": "Как оформить",
+            "anchor": "howToApply"
+          },
+          {
+            "label": "Тарифы",
+            "anchor": "tariffs"
+          },
+          {
+            "label": "Документы",
+            "anchor": "documents"
+          }
+        ]
+      }
+    },
     {
       "type": "ProductGallery",
       "style": ["col-span-12"],
@@ -1400,6 +1428,7 @@
     {
       "type": "LinkDocs",
       "style": ["col-span-12"],
+      "anchor": "documents",
       "content": {
         "title": "Дополнительные документы",
         "subtitle": "Ответы на часто задаваемые вопросы",
@@ -1880,6 +1909,7 @@
     },
     {
       "type": "CreditCalculator",
+      "anchor": "calculator",
       "style": ["col-span-12"]
     },
     {

package/src/components/ContentPage/ContentPage.tsx

@@ -94,16 +94,16 @@ function renderBlock(
   const BlockComponent = blocksRegistry[type || 'Placeholder'] || Placeholder;
   return blockDecorator(
     {
-      blockClassName: style2className(block.style),
+      blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
       block,
       render: (props) => {
-        const { version, content } = props.block;
+        const { version, content, anchor } = props.block;
         return (
           <BlockComponent
-            key={`${type}-${i}`}
             className={props.blockClassName}
             version={version}
             context={context}
+            anchor={anchor}
             {...content}
           />
         );

package/src/components/ContentPage/ContentPageContext.tsx

@@ -3,7 +3,8 @@ export interface Router {
   query: Record<string, string | string[] | undefined>;
   href?: string;
   basePath?: string;
-  push: (url: string) => void;
+  push: (url?: string) => void;
+  replace: (url?: string) => void;
 }
 
 export interface LikeService {

package/src/components/CreditCalculator/CreditCalculator.tsx

@@ -10,11 +10,11 @@ import { DEFAULT_TABS } from './defaultTabs';
 export interface CreditCalculatorProps extends CreditCalculatorContent, UniBlockProps {}
 
 export const CreditCalculator = JSX<CreditCalculatorProps>(
-  ({ className = '', context, tabs = DEFAULT_TABS }) => {
+  ({ className = '', context, tabs = DEFAULT_TABS, anchor = null }) => {
     const [currentTabIndex, setCurrentTabIndex] = context.useState(0);
 
     return (
-      <section className={`font-sans text-primary-text py-10 bg-white ${className}`}>
+      <section className={`font-sans text-primary-text py-10 bg-white ${className}`} id={anchor}>
         <Heading
           className="w-full text-center mb-8"
           headingType={getTileHeadingType(className)}

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -3,7 +3,7 @@ import { Icon } from '../../ui-kit/Icon/Icon';
 import type { ExchangeCurrencyItem } from './ExchangeRateTileContent';
 import { formatCurrency } from './formatCurrency';
 
-const TABLE_HEAD_STYLE = 'text-left font-normal text-sm text-secondary-text';
+const TABLE_HEAD_STYLE = 'font-light text-left font-normal text-sm text-secondary-text';
 
 const CURRENCY_ICONS_MAP = {
   USD: 'DollarIcon',
@@ -33,15 +33,19 @@ export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurre
 const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
   const code = exchangeCurrencyItem?.currency?.currency;
   return (
-    <tr key={code}>
+    <tr key={code} className="pb-1">
       <td className="pt-4">
         <div className="flex items-center">
           {code ? <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" /> : null}
-          <span className="ml-2">{code}</span>
+          <span className="text-m-title-md ml-2">{code}</span>
         </div>
       </td>
-      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem.buyExchangeRate)}</td>
-      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem.saleExchangeRate)}</td>
+      <td className="pt-4 pl-11 m-title-md font-light">
+        {formatCurrency(exchangeCurrencyItem.buyExchangeRate)}
+      </td>
+      <td className="pt-4 pl-11 m-title-md font-light">
+        {formatCurrency(exchangeCurrencyItem.saleExchangeRate)}
+      </td>
     </tr>
   );
 };

package/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -11,8 +11,8 @@ export const CurrentLocation = JSX<CurrentLocationProps>(
   ({ className = '', address, distance }) => (
     <div className={`flex text-sm ${className}`}>
       <Icon className="min-w-fit" name="GpsIcon" width="24" height="24" asSVG />
-      <div className="ml-1.5">
-        {address ? <p className="m-0">{address}</p> : null}
+      <div className="ml-3 font-light">
+        {address ? <p className="m-0 mb-[3px]">{address}</p> : null}
         {distance ? (
           <p className="text-secondary-text m-0">Курс указан для ближайшего офиса - {distance}</p>
         ) : null}

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -17,7 +17,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
       <div className={`grid gap-3.5 ${className}`}>
         {renderInput('Хочу продать', codes)}
         {renderInput('Получу', codes)}
-        <Button className="box-border mt-3.5 py-3 h-12 w-44" version="primary" href="#">
+        <Button className="box-border mt-3.5 py-3 h-12 w-full" version="primary" href="#">
           Купить валюту
         </Button>
       </div>
@@ -27,14 +27,14 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
 
 function renderInput(placeholder: string, codes: string[]) {
   return (
-    <div className="flex items-center">
+    <div className="relative flex items-center">
       <Input
-        className="h-10 border pl-2.5 rounded-md text-m-sm w-full appearance-none"
+        className="h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12"
         type="number"
         placeholder={`${placeholder}`}
       />
       {codes.length ? (
-        <Select className="h-9 -translate-x-16">
+        <Select className="h-9 -translate-x-4">
           {codes.map((code, i) => (
             <SelectOption key={String(i)} value={code}>
               {code}

package/src/components/ExchangeRateTile/ExchangeRateTile.fixture.tsx

@@ -5,7 +5,7 @@ import { ExchangeRateTile } from './ExchangeRateTile';
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <ExchangeRateTile context={context} className="col-span-12" />
+      <ExchangeRateTile context={context} className="col-span-8" />
     </div>
   ),
 };

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -32,7 +32,7 @@ const DEFAULT_LOCATION = {
 export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
 
 export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
-  ({ className = '', context, title = 'Курсы обмена валют' }) => {
+  ({ className = '', context, title = 'Курсы обмена валют', anchor = null }) => {
     const data = useExchangeRates(context.useAsyncData);
     const exchangeCurrencyItems =
       data?.exchangeRate?.currencies?.filter((item) => {
@@ -40,21 +40,27 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
       }) || DEFAULT_CURRENCY_ITEMS;
 
     return (
-      <section className={`bg-white text-primary-text font-sans p-9 box-border ${className}`}>
+      <section
+        className={`bg-white text-primary-text font-sans p-9 box-border ${className}`}
+        id={anchor}
+      >
         <BaseTile
           context={context}
           title={
             <Heading
               headingType={getTileHeadingType(className)}
               title={title}
-              className="whitespace-pre-wrap mb-3"
+              className="whitespace-pre-wrap"
             />
           }
         >
           <div className="flex">
-            <div className="mr-20 pt-3">
+            <div className="mr-[43px] pt-4">
               {exchangeCurrencyItems ? (
-                <CurrencyTable className="mb-7" exchangeCurrencyItems={exchangeCurrencyItems} />
+                <CurrencyTable
+                  className="mb-[31px]"
+                  exchangeCurrencyItems={exchangeCurrencyItems}
+                />
               ) : null}
               <CurrentLocation {...DEFAULT_LOCATION} />
             </div>

package/src/components/Footer/Footer.tsx

@@ -15,9 +15,18 @@ const LEFT_COL_WIDTH_SMALL_DESKTOP = 'xl:w-[220px]';
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
 export const Footer = JSX<FooterProps>(
-  ({ className, documents, relatedEnterprises, contacts, socialMedia, topItems, context }) => {
+  ({
+    className,
+    documents,
+    relatedEnterprises,
+    contacts,
+    socialMedia,
+    topItems,
+    context,
+    anchor = null,
+  }) => {
     return (
-      <footer className={`px-9 py-10 bg-white ${className || ''}`}>
+      <footer className={`px-9 py-10 bg-white ${className || ''}`} id={anchor}>
         <div className="flex items-stretch gap-[54px] pb-8 xl:gap-8">
           <Logo className={`${LEFT_COL_WIDTH_FULL_HD} ${LEFT_COL_WIDTH_SMALL_DESKTOP}`} />
           <SearchBar context={context} className="grow" />

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

@@ -83,7 +83,7 @@ const cards: GalleryCard[] = [
 const defaultProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  orientation: 'horizontal' as ListOrientation,
+  orientation: 'vertical' as ListOrientation,
   context,
   cards: cards,
 };

package/src/components/Gallery/GalleryInner.tsx

@@ -11,7 +11,7 @@ export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
 }
 
 export const GalleryInner = JSX<GalleryInnerProps>(
-  ({ context, cards = [], className = '', version = 'normal', ...rest }) => {
+  ({ context, cards = [], className = '', version = 'normal', anchor = null, ...rest }) => {
     const [activeCardIndex, setActiveCardIndex] = context.useState(0);
 
     const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
@@ -28,6 +28,7 @@ export const GalleryInner = JSX<GalleryInnerProps>(
     return (
       <section
         className={`relative font-sans text-primary-text bg-white p-[50px] overflow-hidden ${className}`}
+        id={anchor}
       >
         <GalleryContainer
           context={context}

package/src/components/Header/Header.tsx

@@ -20,7 +20,7 @@ const BORDER_COLORS: Record<BgColorVersion, string> = {
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
-  ({ className, defaultLocation, bgColor = 'bg-white', context, topItems }) => {
+  ({ className, defaultLocation, bgColor = 'bg-white', context, topItems, anchor = null }) => {
     const router = context.useRouter();
     const sitemap = useSitemap(context.useAsyncData);
     const { handlerDecorator } = context;
@@ -51,7 +51,7 @@ export const Header = JSX<HeaderProps>(
     ));
 
     return (
-      <header className={`pt-5 pb-8 px-20 ${bgColor} ${className || ''}`}>
+      <header className={`pt-5 pb-8 px-20 ${bgColor} ${className || ''}`} id={anchor}>
         <div className="container">
           <div className="flex items-center">
             <Logo className="mr-8" bgColor={bgColor} />

package/src/components/Headline/Headline.tsx

@@ -8,10 +8,17 @@ import type { HeadlineContent } from './HeadlineContent';
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
-  ({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description }) => {
+  ({
+    bgColorHeadline = 'transparent',
+    align = 'left',
+    className = '',
+    title,
+    description,
+    anchor = null,
+  }) => {
     const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
     return (
-      <section className={`p-[50px] ${STYLE_MAPS.background} ${className}`}>
+      <section className={`p-[50px] ${STYLE_MAPS.background} ${className}`} id={anchor}>
         {title && (
           <Heading
             headingType="h2"

package/src/components/LikeControl/LikeControl.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { LikeButton } from '../../ui-kit/Button/LikeButton';
 import type { UniBlockProps } from '../../types';
+import { LikeButton } from '../../ui-kit/Button/LikeButton';
 
-export const LikeControl = JSX<UniBlockProps>(({ className, context }) => {
+export const LikeControl = JSX<UniBlockProps>(({ className, context, anchor = null }) => {
   const likeService = context.useLikeService();
 
   return (
@@ -10,6 +10,7 @@ export const LikeControl = JSX<UniBlockProps>(({ className, context }) => {
       className={`border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${
         className || ''
       }`}
+      id={anchor}
     >
       <LikeButton onClick={likeService.like} ariaLabel="Поставить отметку «лайк»" />
       <LikeButton

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

@@ -24,6 +24,6 @@
     }
   ],
   "columnsMode": "double",
-  "listMode": "vertical",
+  "orientation": "vertical",
   "hasBorder": true
 }

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

@@ -29,7 +29,7 @@ export default {
         className="col-span-12"
         context={mobileContext}
         {...linkDocsContentExample}
-        listMode={'horizontal'}
+        orientation="horizontal"
       />
     </div>
   ),

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

@@ -15,7 +15,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     subtitle,
     icon = 'DocIconMonoColor',
     documents,
-    listMode = 'vertical',
+    orientation = 'vertical',
     hasBorder = true,
   }) => {
     return (
@@ -32,7 +32,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
         {subtitle ? (
           <h3 className="mt-0 font-normal mb-5 text-center text-m-md">{subtitle}</h3>
         ) : null}
-        {listMode === 'vertical' ? (
+        {orientation === 'vertical' ? (
           <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
         ) : (
           <LinkDocsHorizontalList

package/src/components/LinkDocs/LinkDocs.tsx

@@ -32,9 +32,10 @@ export const LinkDocs = JSX<LinkDocsProps>(
     documents,
     icon = 'DocIcon',
     columnsMode = 'double',
+    anchor = null,
   }) => {
     return (
-      <section className={`font-sans text-primary-text p-12 bg-white ${className}`}>
+      <section className={`font-sans text-primary-text p-12 bg-white ${className}`} id={anchor}>
         {title ? (
           <Heading
             headingType="h2"

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -34,7 +34,7 @@ export interface LinkDocsContent {
   documents?: LinkDocsItem[];
   columnsMode?: LinkColumnsMode;
   /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
-  listMode?: ListOrientation; // TODO: мобильный проп
+  orientation?: ListOrientation; // TODO: мобильный проп
   /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
   hasBorder?: boolean;
   align?: AlignType;

package/src/components/LinkList/LinkList.tsx

@@ -4,9 +4,9 @@ import type { LinkListContent } from './LinkListContent';
 
 export interface LinkListProps extends LinkListContent, UniBlockProps {}
 
-export const LinkList = JSX<LinkListProps>(({ className = '', documents }) => {
+export const LinkList = JSX<LinkListProps>(({ className = '', documents, anchor = null }) => {
   return (
-    <section className={`font-sans bg-white mt-[10px] ${className}`}>
+    <section className={`font-sans bg-white mt-[10px] ${className}`} id={anchor}>
       <ul className="flex flex-col text-sm text-secondary-text p-0">
         {documents?.length ? renderLinkListItem(documents) : null}
       </ul>