@redneckz/wildless-cms-uni-blocks 0.5.11 → 0.5.13

package/src/components/Blocks.mobile.ts

@@ -1,6 +1,5 @@
 import { Accordion } from './Accordion/Accordion';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
-import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
 import { Header } from './Header/Header';
@@ -18,7 +17,6 @@ import { TextBlock } from './TextBlock/TextBlock';
 export const Blocks = {
   Accordion,
   ComparisonTable,
-  ExchangeRateTile,
   Footer,
   Gallery,
   Header,

package/src/components/Blocks.ts

@@ -14,6 +14,7 @@ import { GracePeriod } from './GracePeriod/GracePeriod';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBlock';
+import { InvestmentInfo } from './InvestmentInfo/InvestmentInfo';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
@@ -48,6 +49,7 @@ export const Blocks = {
   Header,
   Headline,
   InsuranceAmountBlock,
+  InvestmentInfo,
   LinkDocs,
   MiniGallery,
   MobileAppTile,

package/src/components/Calculator/CalculatorContent.ts

@@ -138,7 +138,7 @@ export type CalculatorNav = HeadlineCommonProps & IconProps;
 /**
  * @title Вкладка
  */
-export type CalculatorTab = TitleProps & {
+export type CalculatorTab = {
   nav?: CalculatorNav;
   calculatorBlock?: CalculatorBlockDef;
 };

package/src/components/CardTransfer/CardTransfer.tsx

@@ -8,6 +8,7 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { getDisabledButtonClasses } from '../../ui-kit/Button/getDisabledButtonClasses';
 import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
 import { useLink } from '../../hooks/useLink';
+import { getSanitizedValue } from '../../utils/getSanitizedValue';
 
 const AMOUNT_KEY = 'amount';
 const FORM_URL = 'https://www.rshb.ru/p2p/';
@@ -30,7 +31,7 @@ export const CardTransfer = JSX<CardTransferProps>(
     const router = context.useRouter();
     const { handlerDecorator } = context;
     const [value, setValue] = useState<string>('');
-    const isDisabled = !Number(value);
+    const isDisabled = !Number(getSanitizedValue(value));
     const buttonStyle = isDisabled
       ? getDisabledButtonClasses({ version: button?.version })
       : getRegularButtonClasses({ className: 'text-white', version: button?.version });
@@ -47,6 +48,7 @@ export const CardTransfer = JSX<CardTransferProps>(
             name={AMOUNT_KEY}
             value={value}
             onChange={setValue}
+            valid={value === '' || !isDisabled}
             placeholder={placeholder}
             label={label}
           />

package/src/components/Catalog/Catalog.fixture.tsx

@@ -1,7 +1,9 @@
+import type { IconVersion } from '../../model/IconVersion';
 import type { Picture } from '../../model/Picture';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { Img } from '../../ui-kit/Img/Img';
 import { Catalog, CatalogProps } from './Catalog';
 
 const payRing: Picture = {
@@ -21,9 +23,14 @@ const buttonPrimary: ButtonWithIconProps = {
   text: 'Подробнее',
   target: '_blank',
   version: 'primary',
-  icon: {
-    icon: 'AppleIcon',
-  },
+  appendLeft: (
+    <Img
+      image={{ icon: 'AppleIcon', iconVersion: 'primary' as IconVersion }}
+      width="24"
+      height="24"
+      asSVG
+    />
+  ),
 };
 
 const catalogCard = {

package/src/components/Catalog/Catalog.tsx

@@ -44,8 +44,8 @@ export const Catalog = JSX<CatalogProps>(
           activeCardIndex,
           setActiveCardIndex,
         })}
-        <div className={`${BLUR_BLOCK_CLASSES} left-0 ${'bg-opacity-from-white'}`} />
-        <div className={`${BLUR_BLOCK_CLASSES} right-0 ${'bg-opacity-to-white'}`} />
+        <div className={`${BLUR_BLOCK_CLASSES} left-0 bg-opacity-from-white`} />
+        <div className={`${BLUR_BLOCK_CLASSES} right-0 bg-opacity-to-white`} />
       </BlockWrapper>
     );
   },

package/src/components/Catalog/CatalogCard.tsx

@@ -1,10 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/ContentPageDef';
-import type { Picture } from '../../model/Picture';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { CatalogCardType } from './CatalogContent';
@@ -13,12 +11,6 @@ export interface CatalogCardProps extends CatalogCardType, UniBlockProps {
   version?: BlockVersion;
 }
 
-const iconVersionMap = {
-  default: 'normal',
-  primary: 'white',
-  secondary: 'black',
-};
-
 const cardStyleMap: Record<ProductColorVersion, string> = {
   black: 'bg-black',
   white: 'bg-white',
@@ -43,7 +35,7 @@ export const CatalogCard = JSX<CatalogCardProps>(
           </div>
         ) : null}
         {price ? <div className="text-h3 text-left">{price}&nbsp;₽</div> : null}
-        {button ? renderButton(button) : null}
+        {button ? <Button className="mt-5 w-full" {...button} /> : null}
       </section>
     );
   },
@@ -55,29 +47,3 @@ const renderColorOption = (color: ProductColorVersion, i: number) => (
     className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
   />
 );
-
-const renderButton = (button: ButtonWithIconProps) => {
-  const { icon, iconRight, ...other } = button;
-
-  if (!button?.text) {
-    return null;
-  }
-
-  const iconVersion = iconVersionMap[button?.version || 'default'];
-  const leftIcon = renderButtonIcon({ ...icon, iconVersion });
-  const rightIcon = renderButtonIcon({ ...iconRight, iconVersion });
-
-  return (
-    <Button className="mt-5 w-full" appendLeft={leftIcon} appendRight={rightIcon} {...other} />
-  );
-};
-
-const renderButtonIcon = (buttonIcon?: Picture) => {
-  if (!buttonIcon || (!buttonIcon?.icon && !buttonIcon?.src)) {
-    return null;
-  }
-
-  const iconWidth = buttonIcon?.size?.width ? `${buttonIcon.size.width}` : '24';
-
-  return <Img image={buttonIcon} width={iconWidth} height="24" asSVG />;
-};

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

@@ -1,143 +1,72 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/ContentPageDef';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
-import type { ComparisonTableContent } from './ComparisonTableContent';
+import type { CellData, ComparisonTableContent } from './ComparisonTableContent';
 import { TableColumn } from './TableColumn';
 
 export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
 
-export const ComparisonTable = JSX<ComparisonTableProps>(
-  ({
-    className,
-    context,
-    title,
-    rowHeaders,
-    columns,
-    visibleRowLength = 0,
-    isColoredFirstColumn = false,
-    orientation = 'vertical',
-  }) => {
-    const tableData =
-      columns?.map(({ data, header }) => ({
-        header,
-        column: data?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title })),
-      })) || [];
+export const ComparisonTable = JSX<ComparisonTableProps>((props) => {
+  const { className, title } = props;
 
+  return (
+    <section
+      className={`bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${
+        className || ''
+      }`}
+    >
+      {title ? (
+        <Heading headingType="h3" className="font-medium text-center m-0 mb-5" title={title} />
+      ) : null}
+      <div role="table">
+        <TableInner {...props} />
+      </div>
+    </section>
+  );
+});
+
+const TableInner = JSX<ComparisonTableProps>(
+  ({ columns, rowHeaders, isColoredFirstColumn, visibleRowLength, orientation, context }) => {
     const [columnsViewState, setColumnsViewState] = useState(
       new Array<boolean>(columns?.length || 0).fill(!visibleRowLength),
     );
 
-    const handleToggleColumn = (i: number) => {
-      columnsViewState[i] = !columnsViewState[i];
-      setColumnsViewState([...columnsViewState]);
-    };
+    const handleToggleColumn = useCallback((colIndex: number) => {
+      const toggleColState = (colState: boolean, i: number) =>
+        i === colIndex ? !colState : colState;
 
-    return (
-      <section
-        className={`bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${
-          className || ''
-        }`}
-      >
-        {title ? (
-          <Heading headingType="h3" className="font-medium text-center m-0 mb-5" title={title} />
-        ) : null}
+      setColumnsViewState((_) => _.map(toggleColState));
+    }, []);
 
-        {renderColumns({
-          tableData,
-          context,
-          visibleRowLength,
-          isColoredFirstColumn,
-          columnsViewState,
-          handleToggleColumn,
-          orientation,
-          setColumnsViewState,
-        })}
-      </section>
+    const handleSlideChange = useCallback(
+      () => setColumnsViewState((_) => new Array(_.length).fill(false)),
+      [],
     );
-  },
-);
 
-const renderColumns = ({
-  context,
-  tableData,
-  visibleRowLength,
-  isColoredFirstColumn,
-  columnsViewState,
-  handleToggleColumn,
-  orientation = 'horizontal',
-  setColumnsViewState,
-}) => (
-  <div role="table">
-    {tableData?.length
-      ? renderInnerTable({
-          orientation,
-          context,
-          columnsViewState,
-          setColumnsViewState,
-          tableData,
-          visibleRowLength,
-          isColoredFirstColumn,
-          handleToggleColumn,
-        })
-      : null}
-  </div>
-);
+    const getColumnData = (cellData?: CellData[][]) =>
+      cellData?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title }));
 
-const renderInnerTable = ({
-  orientation,
-  context,
-  columnsViewState,
-  setColumnsViewState,
-  tableData,
-  visibleRowLength,
-  isColoredFirstColumn,
-  handleToggleColumn,
-}) =>
-  orientation === 'horizontal' ? (
-    <SwipeListControl
-      context={context}
-      onSlideChange={onSlideChange(columnsViewState, setColumnsViewState)}
-    >
-      {tableData.map(
-        renderColumn({
-          context,
-          visibleRowLength,
-          isColoredFirstColumn,
-          columnsViewState,
-          handleToggleColumn,
-        }),
-      )}
-    </SwipeListControl>
-  ) : (
-    tableData.map(
-      renderColumn({
-        context,
-        visibleRowLength,
-        isColoredFirstColumn,
-        columnsViewState,
-        handleToggleColumn,
-      }),
-    )
-  );
-
-const renderColumn =
-  ({ context, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn }) =>
-  (columnData, i) =>
-    (
+    const tableColumns = columns?.map(({ data, header }, colIndex) => (
       <TableColumn
-        key={String(i)}
+        key={String(colIndex)}
         context={context}
         visibleRowLength={visibleRowLength}
-        showRow={columnsViewState[i]}
-        header={columnData.header}
-        columnData={columnData.column}
-        isFillGradient={i === 0 && isColoredFirstColumn}
-        onToggleColumn={() => handleToggleColumn(i)}
+        showRow={columnsViewState[colIndex]}
+        header={header}
+        columnData={getColumnData(data)}
+        isFillGradient={colIndex === 0 && isColoredFirstColumn}
+        onToggleColumn={() => handleToggleColumn(colIndex)}
       />
-    );
+    ));
 
-const onSlideChange = (columnsViewState, setColumnsViewState) => () => {
-  setColumnsViewState(new Array(columnsViewState.length).fill(false));
-};
+    return orientation === 'horizontal' ? (
+      <SwipeListControl context={context} onSlideChange={handleSlideChange}>
+        {tableColumns}
+      </SwipeListControl>
+    ) : (
+      tableColumns
+    );
+  },
+);

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -65,7 +65,7 @@ const renderShowMoreToggleButton = ({
           onClick={onClick}
           className="mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
         >
-          <div className="font-sans text-xs-light font-medium py-[11px]">
+          <div className="font-sans text-xs-light font-medium py-3">
             {!isShowAllRow ? 'Показать все параметры' : 'Скрыть'}
           </div>
         </button>

package/src/components/ComparisonTable/TableCell.tsx

@@ -7,7 +7,7 @@ export interface TableCellProps {
   isLastRow?: boolean;
   isFirstRow?: boolean;
   rowHeader?: string;
-  isFillGradient: boolean;
+  isFillGradient?: boolean;
 }
 
 export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
@@ -33,7 +33,7 @@ const labelStyle = (isFillGradient = false): string =>
 const descriptionStyle = (isFillGradient = false): string =>
   `text-s opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`;
 
-const renderCellInner = ({ label, description }: CellData, i: number, isFillGradient: boolean) => (
+const renderCellInner = ({ label, description }: CellData, i: number, isFillGradient?: boolean) => (
   <div key={String(i)} className="first:pt-7 pt-6 last:pb-7">
     {label ? <h4 className={labelStyle(isFillGradient)}>{label}</h4> : null}
     {description ? <div className={descriptionStyle(isFillGradient)}>{description}</div> : null}

package/src/components/ComparisonTable/TableColumn.tsx

@@ -1,10 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { UniBlockProps } from '../../model/ContentPageDef';
-import type { TitleProps } from '../../model/HeadlineType';
-import type { IconProps } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
-import { CellData } from './ComparisonTableContent';
+import type { CellData, ColumnHeader } from './ComparisonTableContent';
 import { GRADIENT } from './constants';
 import { HeaderCell } from './HeaderCell';
 import { TableCell } from './TableCell';
@@ -14,13 +12,11 @@ export interface TableColumnData {
   cell: CellData[];
 }
 
-export type TableColumnHeader = TitleProps & IconProps;
-
 export interface TableColumnProps extends UniBlockProps {
-  header: TableColumnHeader;
-  columnData: TableColumnData[];
-  visibleRowLength: number;
-  isFillGradient: boolean;
+  header?: ColumnHeader;
+  columnData?: TableColumnData[];
+  visibleRowLength?: number;
+  isFillGradient?: boolean;
   showRow: boolean;
   onToggleColumn: () => void;
 }
@@ -48,31 +44,33 @@ export const TableColumn = JSX<TableColumnProps>(
             ))
           : null}
 
-        {showRow ? renderButton({ header, buttonVersion }) : null}
+        {showRow && header?.link ? (
+          <Button
+            href={header.link.href}
+            target={header.link.target}
+            version={buttonVersion}
+            className="text-s font-medium mt-4 py-[11px]"
+          >
+            {header.link.text}
+          </Button>
+        ) : null}
         {renderToggleButton({ onToggleColumn, isFillGradient, showRow })}
       </div>
     );
   },
 );
 
-const renderButton = ({ header, buttonVersion }) => {
-  if (!header.link) {
-    return null;
-  }
-
-  return (
-    <Button
-      href={header.link.href}
-      target={header.link.target}
-      version={buttonVersion}
-      className="text-s font-medium mt-4 py-[11px]"
-    >
-      {header.link.text}
-    </Button>
-  );
-};
+interface RenderToggleButtonProps {
+  onToggleColumn: () => void;
+  isFillGradient?: boolean;
+  showRow: boolean;
+}
 
-const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (
+const renderToggleButton = ({
+  onToggleColumn,
+  isFillGradient,
+  showRow,
+}: RenderToggleButtonProps) => (
   <div className="mt-5" role="cell">
     <a
       role="link"

package/src/components/ContentPage/ContentPageContext.tsx

@@ -1,5 +1,3 @@
-import { VNode } from '../../model/VNode';
-
 export interface Router {
   pathname: string;
   query: Record<string, string | string[] | undefined>;
@@ -16,19 +14,7 @@ export interface Search {
   setTerm: (t: string) => void;
 }
 
-export interface IntersectionObserverTagProps {
-  tag: keyof HTMLElementTagNameMap;
-  className?: string;
-  anchor?: string;
-  children?: VNode;
-  observerCallback: IntersectionObserverCallback;
-  observerOptions?: IntersectionObserverInit;
-}
-
-export type IntersectionObserverComponent = (props: IntersectionObserverTagProps) => VNode;
-
 export interface ContentPageContext {
   useRouter: () => Router;
   handlerDecorator?: HandlerDecorator;
-  IntersectionObserverTag: IntersectionObserverComponent;
 }

package/src/components/ContentPage/filterBlocks.mobile.ts

@@ -1,13 +1,11 @@
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { BlockDef } from '../../model/ContentPageDef';
-import { isBlockInRegistry } from './isBlockInRegistry';
 import { normalizeBlock } from './normalizeBlock';
 
 export const filterBlocks = (blocks: BlockDef[], blocksRegistry: BlocksRegistry) =>
   blocks
     ?.filter(
       (block) =>
-        isBlockInRegistry(block?.type || block?.mobile?.type, blocksRegistry) &&
-        !block.mobile?.hidden,
+        (block?.type || block?.mobile?.type || '') in blocksRegistry && !block.mobile?.hidden,
     )
     .map(normalizeBlock);

package/src/components/ContentPage/filterBlocks.ts

@@ -1,7 +1,6 @@
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { BlockDef } from '../../model/ContentPageDef';
-import { isBlockInRegistry } from './isBlockInRegistry';
 import { normalizeBlock } from './normalizeBlock';
 
 export const filterBlocks = (blocks: BlockDef[], blocksRegistry: BlocksRegistry) =>
-  blocks?.filter((block) => isBlockInRegistry(block?.type, blocksRegistry)).map(normalizeBlock);
+  blocks?.filter((block) => (block?.type || '') in blocksRegistry).map(normalizeBlock);

package/src/components/ContentPage/renderBlock.tsx

@@ -1,4 +1,4 @@
-import { BlockAncestors, BlockDecorator, DEFAULT_SLOT_NAME } from '../../model/BlockDecorator';
+import { BlockAncestors, BlockDecorator, DEFAULT_ANCESTORS } from '../../model/BlockDecorator';
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { BlockDef, ContentPageDef } from '../../model/ContentPageDef';
 import { style2className } from '../../utils/style2className';
@@ -15,7 +15,7 @@ interface RenderBlockOptions {
 export function renderBlock(
   block: BlockDef,
   options: RenderBlockOptions,
-  ancestors: BlockAncestors = [DEFAULT_SLOT_NAME], // Recursion context
+  ancestors: BlockAncestors = DEFAULT_ANCESTORS, // Recursion context
 ) {
   const { key, page, blockDecorator, blocksRegistry, context } = options;
   const { type } = block;

package/src/components/ErrorBlock/ErrorBlock.tsx

@@ -33,9 +33,7 @@ export const ErrorBlock = JSX<ErrorBlockProps>(
         <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
         {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
         {subtitle ? (
-          <div className="font-sans text-xl-light text-left mb-7 max-w-[613px] text-center">
-            {subtitle}
-          </div>
+          <div className="font-sans text-xl-light mb-7 max-w-[613px] text-center">{subtitle}</div>
         ) : null}
         {button?.text ? (
           <Button

package/src/components/ExchangeRateTile/ExchangeRateTile.ui.json

@@ -1 +1,8 @@
-{}
+{
+  "content": {},
+  "style": {
+    "ui:options": {
+      "minCols": 6
+    }
+  }
+}

package/src/components/ExchangeRateTile/renderInput.tsx

@@ -21,7 +21,7 @@ export function renderInput(props: InputProps) {
   return (
     <div className="relative flex">
       <Input
-        className="shrink-0 h-14 pl-4 pt-4 pb-4 text-l w-full appearance-none mr-[-90px]"
+        className="shrink-0 text-l w-full appearance-none mr-[-90px]"
         placeholder={placeholder}
         type="text"
         value={value}

package/src/components/Footer/Contacts.tsx

@@ -28,6 +28,7 @@ export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton,
               target: '_blank',
             },
           )}
+          ariaLabel="Обратная связь"
         />
       ) : null}
     </div>

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

@@ -1,6 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/ContentPageDef';
-import { Accordion } from '../Accordion/Accordion';
+import type { Fallback } from '../../model/Fallback';
+import { useSitemap } from '../../services/sitemap/useSitemap';
+import { Button } from '../../ui-kit/Button/Button';
+import { Img } from '../../ui-kit/Img/Img';
+import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
+import { AccordionItem } from '../Accordion/AccordionItem';
+import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+import { LinkList } from '../LinkList/LinkList';
 import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
 import { Contacts } from './Contacts';
 import type { FooterContent, SubMenuItem } from './FooterContent';
@@ -8,13 +15,6 @@ import { HorizontalNavigation } from './HorizontalNavigation';
 import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
 
-import { useSitemap } from '../../services/sitemap/useSitemap';
-import type { Fallback } from '../../model/Fallback';
-import { Button } from '../../ui-kit/Button/Button';
-import { Img } from '../../ui-kit/Img/Img';
-import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
-import { getAccordionItems } from '../../utils/getAccordionItems';
-
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
 export const Footer = JSX<FooterProps>(
@@ -35,11 +35,13 @@ export const Footer = JSX<FooterProps>(
     return (
       <footer className={`font-sans px-4 py-[26px] bg-white ${className}`}>
         <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
-        <Accordion
-          context={context}
-          className="!p-0 mb-4"
-          accordionItems={getAccordionItems(sitemap.topItems)}
-        />
+        <AccordionItemsList>
+          {sitemap.topItems?.map((item, i) => (
+            <AccordionItem key={String(i)} context={context} label={item.text}>
+              <LinkList context={context} documents={item.items} />
+            </AccordionItem>
+          ))}
+        </AccordionItemsList>
         <div>{dispositions?.map(renderSubMenuItem)}</div>
         <MobileAppTile
           context={context}

package/src/components/Footer/FooterContent.ts

@@ -1,7 +1,7 @@
-import type { LinkProps } from '../../model/LinkProps';
-import type { SitemapProps } from '../../services/sitemap/SitemapProps';
-import type { IconProps } from '../../model/Picture';
 import type { DescriptionProps } from '../../model/HeadlineType';
+import type { LinkCommonProps, LinkProps } from '../../model/LinkProps';
+import type { IconProps } from '../../model/Picture';
+import type { SitemapProps } from '../../services/sitemap/SitemapProps';
 
 /**
  * @title Тип контакта
@@ -21,11 +21,6 @@ export type ContactInfo = DescriptionProps & {
   type?: ContactType;
 };
 
-/**
- * @required ["href"]
- */
-export type SocialMedia = Omit<LinkProps, 'text'>;
-
 /**
  * @title Пункт подменю
  */
@@ -43,9 +38,9 @@ export interface FooterContent extends SitemapProps {
   /** @title Контакты */
   contacts?: ContactInfo[];
   /** @title Социальные сети */
-  socialMedia?: SocialMedia[];
+  socialMedia?: LinkCommonProps[];
   /** @title Мобильные приложения */
-  mobileApps?: SocialMedia[];
+  mobileApps?: LinkCommonProps[];
   /** @title Заголовок для меню */
   horizontalNavigationTitle?: string; // TODO: для мобильной версии
   /** @title Подменю */