@redneckz/wildless-cms-uni-blocks 0.3.7 → 0.3.10

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

@@ -1,15 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
-import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../types';
-import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import type { ComparisonTableContent } from './ComparisonTableContent';
-import { COLS_LENGTH_FOR_SCROLL, COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
-import { HeaderCell } from './HeaderCell';
-import { TableCarouselContainer } from './TableCarouselContainer';
-import { TableRow } from './TableRow';
-import { TableRowContainer } from './TableRowContainer';
+import { TableColumn } from './TableColumn';
 
 export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
 
@@ -22,112 +16,106 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     columns,
     visibleRowLength = 0,
     isColoredFirstColumn = false,
+    useSwiper = false,
   }) => {
-    const router = context.useRouter();
-    const { handlerDecorator } = context;
-
-    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
-    const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
-
-    const colHeaders = columns?.map(({ header }) => header || {});
-    const colData = columns?.map(({ data }) => data) || [];
-    const rowData = rowHeaders
-      ?.map((header, i) => ({
+    const tableData =
+      columns?.map(({ data, header }) => ({
         header,
-        data: colData.map((col) => col?.[i] || [{}]),
-      }))
-      .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
+        column: data?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title })),
+      })) || [];
 
-    const { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton } =
-      useComparisonTableScroll({
-        colData,
-        colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
-        activeCardIndex,
-        setActiveCardIndex,
-      });
+    const [columnsViewState, setColumnsViewState] = context.useState<boolean[]>(
+      new Array(columns?.length).fill(!visibleRowLength),
+    );
 
-    const showToggle = () => setIsShowAllRow(!isShowAllRow);
+    const handleToggleColumn = (i: number) => {
+      columnsViewState[i] = !columnsViewState[i];
+      setColumnsViewState([...columnsViewState]);
+    };
 
     return (
       <section
-        className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${
+        className={`bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${
           className || ''
         }`}
       >
-        <Heading
-          headingType="h2"
-          className="max-w-[47rem] text-center mb-9 mx-auto"
-          title={title}
-        />
-        <div role="table">
-          {colHeaders?.length ? (
-            <TableRowContainer>
-              <div className={FIRST_CELL_CLASSES} role="columnheader" scope="col" />
-              <TableCarouselContainer activeCardIndex={activeCardIndex} columnWidth={COLUMN_WIDTH}>
-                {colHeaders.map((header, i) => (
-                  <HeaderCell
-                    key={String(i)}
-                    {...header}
-                    link={header.link && useLink({ router, handlerDecorator }, header.link)}
-                  />
-                ))}
-              </TableCarouselContainer>
-            </TableRowContainer>
-          ) : null}
-
-          {rowData?.length ? (
-            <div className="relative">
-              {rowData.map((row, i, { length }) => (
-                <TableRow
-                  key={String(i)}
-                  row={row}
-                  isFirstRow={i === 0}
-                  isLastRow={i + 1 === length}
-                  activeCardIndex={activeCardIndex}
-                  isColoredFirstColumn={isColoredFirstColumn}
-                />
-              ))}
-              {isScrollAvailable ? (
-                <div>
-                  <div className="absolute top-7 right-7 z-10">
-                    <ArrowButton
-                      onClick={nextClick}
-                      disabled={!showNextButton}
-                      ariaLabel="Пролистать вправо"
-                    />
-                    <ArrowButton
-                      className="mt-4 rotate-180"
-                      onClick={prevClick}
-                      disabled={!showPrevButton}
-                      ariaLabel="Пролистать влево"
-                    />
-                  </div>
-                </div>
-              ) : null}
-            </div>
-          ) : null}
-        </div>
-
-        {isScrollAvailable ? (
-          <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
-        ) : null}
+        {title && (
+          <Heading headingType="h3" className="font-medium text-center m-0 mb-5" title={title} />
+        )}
 
-        {visibleRowLength ? (
-          <div className="pr-[50px]">
-            <div className="flex w-full">
-              <div className={FIRST_CELL_CLASSES} />
-              <button
-                onClick={showToggle}
-                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 font-medium text-xs py-[11px]">
-                  {!isShowAllRow ? 'Показать все параметры' : 'Скрыть'}
-                </div>
-              </button>
-            </div>
-          </div>
-        ) : null}
+        {renderColumns({
+          tableData,
+          context,
+          visibleRowLength,
+          isColoredFirstColumn,
+          columnsViewState,
+          handleToggleColumn,
+          useSwiper,
+          setColumnsViewState,
+        })}
       </section>
     );
   },
 );
+
+const renderColumns = ({
+  context,
+  tableData,
+  visibleRowLength,
+  isColoredFirstColumn,
+  columnsViewState,
+  handleToggleColumn,
+  useSwiper,
+  setColumnsViewState,
+}) => (
+  <div role="table">
+    {tableData?.length ? (
+      useSwiper ? (
+        <SwipeListControl
+          context={context}
+          onSlideChange={onSlideChange(columnsViewState, setColumnsViewState)}
+        >
+          {tableData.map(
+            renderColumn({
+              context,
+              visibleRowLength,
+              isColoredFirstColumn,
+              columnsViewState,
+              handleToggleColumn,
+            }),
+          )}
+        </SwipeListControl>
+      ) : (
+        tableData.map(
+          renderColumn({
+            context,
+            visibleRowLength,
+            isColoredFirstColumn,
+            columnsViewState,
+            handleToggleColumn,
+          }),
+        )
+      )
+    ) : null}
+  </div>
+);
+
+const renderColumn =
+  ({ context, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn }) =>
+  (columnData, i) =>
+    (
+      <TableColumn
+        key={String(i)}
+        context={context}
+        visibleRowLength={visibleRowLength}
+        showRow={columnsViewState[i]}
+        header={columnData.header}
+        columnData={columnData.column}
+        isFillGradient={i === 0 && isColoredFirstColumn}
+        onToggleColumn={() => handleToggleColumn(i)}
+      />
+    );
+
+const onSlideChange = (columnsViewState, setColumnsViewState) => () => {
+  setColumnsViewState(new Array(columnsViewState.length).fill(false));
+};

package/mobile/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -26,6 +26,8 @@ export interface CellData {
 export interface ColumnHeader {
   /** @title Заголовок */
   title?: string;
+  /** @title Подзаголовок */
+  subtitle?: string;
   icon?: IconName;
   image?: Picture;
   link?: LinkProps;
@@ -61,4 +63,6 @@ export interface ComparisonTableContent {
   isColoredFirstColumn?: boolean;
   /** @title Отображать заданное количество строк */
   visibleRowLength?: number;
+  /** @title Использовать свайпер- */
+  useSwiper?: boolean;
 }

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

@@ -1,46 +1,50 @@
 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/Img';
-import { BORDER_CLASSES, GRADIENT } from './constants';
 
 export interface HeaderCellProps {
   icon?: IconName;
   image?: Picture;
   title?: string;
+  subtitle?: string;
+  isFillGradient?: boolean;
   link?: LinkProps;
 }
 
-export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) => (
-  <div
-    className={`w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES} ${GRADIENT}`}
-    role="columnheader"
-    scope="col"
-  >
-    {icon && !image?.src && (
-      <Icon
-        className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
-        name={icon}
-        width="63"
-        height="63"
-      />
-    )}
-    {image?.src && <Img className="mb-[18px]" image={image} />}
-    {title && <Heading headingType="h4" className="text-center text-white" title={title} />}
-    {link?.text && (
-      <div className="mt-auto w-full">
-        <Button
-          href={link.href}
-          target={link.target}
-          className="mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active"
+export const HeaderCell = JSX<HeaderCellProps>(
+  ({ icon, image, title, subtitle, isFillGradient }) => (
+    <div role="columnheader" scope="col">
+      {icon && (
+        <Icon
+          className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
+          name={icon}
+          width="63"
+          height="63"
+        />
+      )}
+      {image?.src && (
+        <div className="mb-3.5">
+          <Img image={image} />
+        </div>
+      )}
+      {title && (
+        <Heading
+          headingType="h4"
+          className={`${isFillGradient ? 'text-white' : ''}`}
+          title={title}
+        />
+      )}
+      {subtitle && (
+        <div
+          className={`text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`}
         >
-          <div className="font-medium text-xs py-[11px]">{link.text}</div>
-        </Button>
-      </div>
-    )}
-  </div>
-));
+          {subtitle}
+        </div>
+      )}
+    </div>
+  ),
+);

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

@@ -1,43 +1,46 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { CellData } from './ComparisonTableContent';
-import { BORDER_CLASSES, DIVIDER_CLASSES, GRADIENT } from './constants';
+import { DIVIDER_CLASSES } from './constants';
 
 export interface TableCellProps {
   cell: CellData[];
-  isLastRow: boolean;
-  isFirstRow: boolean;
-  isFillGradient: boolean;
+  rowHeader?: string;
+  isLastRow?: boolean;
+  isFirstRow?: boolean;
+  isFillGradient?: boolean;
 }
 
-export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
-  const cellWrapperClasses = `w-80 box-border flex flex-col ${BORDER_CLASSES} ${
-    !isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'
-  } ${isFillGradient ? GRADIENT : ''}`;
+export const TableCell = JSX<TableCellProps>(({ cell, rowHeader, isFillGradient = false }) => {
+  const cellWrapperClasses = `box-border flex flex-col`;
 
-  const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES} ${
-    isFillGradient && isFirstRow ? 'border-t' : ''
-  } ${!isLastRow ? 'border-solid' : ''}`;
+  const cellClasses = `h-full ${DIVIDER_CLASSES}`;
 
   return (
     <div className={cellWrapperClasses} role="cell">
-      <div className={cellClasses}>
-        {cell.map((item, i) => renderCellInner(item, i, isFillGradient))}
-      </div>
+      <div className={cellClasses}>{cell.map(renderCellInner(isFillGradient, rowHeader))}</div>
     </div>
   );
 });
 
-const renderCellInner = ({ label, description }: CellData, i: number, isFillGradient: boolean) => (
-  <div key={String(i)} className="first:pt-7 pt-6 last:pb-7">
-    {label && (
-      <h5 className={`text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`}>{label}</h5>
-    )}
-    {description && (
-      <div
-        className={`text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`}
-      >
-        {description}
+const renderCellInner =
+  (isFillGradient: boolean, rowHeader?: string) =>
+  ({ label, description }: CellData, i: number) =>
+    (
+      <div key={String(i)} className="flex justify-between text-m-sm py-3.5">
+        <div className={`${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}>
+          {rowHeader}
+        </div>
+        <div className="basis-1/2">
+          {label && (
+            <div className={`text-right ${isFillGradient ? 'text-white' : ''}`}>{label}</div>
+          )}
+          {description && (
+            <div
+              className={`text-right ${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}
+            >
+              {description}
+            </div>
+          )}
+        </div>
       </div>
-    )}
-  </div>
-);
+    );

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

@@ -0,0 +1,66 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { GRADIENT } from './constants';
+import { HeaderCell } from './HeaderCell';
+import { TableCell } from './TableCell';
+
+export interface TableColumnProps extends UniBlockProps {
+  header: any;
+  columnData: any;
+  visibleRowLength: number;
+  isFillGradient: boolean;
+  showRow: boolean;
+  onToggleColumn: () => void;
+}
+
+export const TableColumn = JSX<TableColumnProps>(
+  ({ header, columnData, visibleRowLength = 0, isFillGradient, showRow, onToggleColumn }) => {
+    const columnDataView = columnData.slice(0, showRow ? columnData.length : visibleRowLength);
+    const gradientClassName = isFillGradient ? GRADIENT : '';
+    const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
+    return (
+      <div className={`border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`}>
+        <HeaderCell {...header} isFillGradient={isFillGradient} />
+        {columnDataView?.length
+          ? columnDataView.map(({ rowHeader, cell }, i) => (
+              <TableCell
+                key={String(i)}
+                cell={cell}
+                rowHeader={rowHeader}
+                isFillGradient={isFillGradient}
+              />
+            ))
+          : null}
+
+        {showRow && renderButton({ header, buttonVersion })}
+        {renderToggleButton({ onToggleColumn, isFillGradient, showRow })}
+      </div>
+    );
+  },
+);
+
+const renderButton = ({ header, buttonVersion }) => (
+  <Button
+    href={header.link.href}
+    target={header.link.target}
+    version={buttonVersion}
+    className="font-medium text-m-sm mt-4 py-[11px]"
+  >
+    {header.link.text}
+  </Button>
+);
+
+const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (
+  <div className="mt-5">
+    <a
+      onClick={onToggleColumn}
+      className={`font-medium text-m-sm cursor-pointer ${
+        isFillGradient ? 'text-white/80' : 'text-primary-main'
+      }`}
+    >
+      {!showRow ? 'Показать описание' : 'Скрыть'}
+    </a>
+  </div>
+);

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

@@ -20,7 +20,7 @@ export const TableRow = JSX<TableRowProps>(
       {header?.title ? (
         <div
           className={`text-sm py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
-            !isLastRow ? 'border-solid' : ''
+            !isLastRow ? 'border-solid' : 'border-b-0'
           }`}
         >
           {header.title}

package/mobile/src/components/ContentPage/ContentPageHead.tsx

@@ -7,13 +7,8 @@ export interface ContentPageHeadProps {
 }
 
 export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data, children }) => {
-  const {
-    title,
-    main: { description, keywords, canonical, robots },
-    og,
-    twitter,
-    jsonLd,
-  } = data;
+  const { title, main, og, twitter, jsonLd } = data;
+  const { description, keywords, canonical, robots } = main || {};
   return (
     <HeadComponent>
       <title>{title}</title>
@@ -21,19 +16,27 @@ export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data,
       {description && <meta name="description" content={description} />}
       {keywords && <meta name="keywords" content={keywords.join(',')} />}
       {robots && <meta name="robots" content={robots.join(',')} />}
-      {og
-        ? Object.entries(og).map(([key, value]) => (
-            <meta key={key} name={`og:${key}`} content={value} />
-          ))
-        : null}
-      {twitter
-        ? Object.entries(twitter).map(([key, value]) => (
-            <meta key={key} name={`twitter:${key}`} content={value} />
-          ))
-        : null}
+      {renderOpenGraph(og)}
+      {renderTwitter(twitter)}
       {canonical && <link rel="canonical" href={canonical} />}
       {jsonLd && <script type="application/ld+json">{jsonLd}</script>}
       {children}
     </HeadComponent>
   );
 });
+
+function renderOpenGraph(og: Record<string, string> | undefined) {
+  return og
+    ? Object.entries(og).map(([key, value]) => (
+        <meta key={key} name={`og:${key}`} content={value} />
+      ))
+    : null;
+}
+
+function renderTwitter(twitter: Record<string, string> | undefined) {
+  return twitter
+    ? Object.entries(twitter).map(([key, value]) => (
+        <meta key={key} name={`twitter:${key}`} content={value} />
+      ))
+    : null;
+}

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

@@ -19,7 +19,7 @@ export const Contacts = JSX<ContactsProps>(({ className, items, hasButton, conte
       {hasButton ? (
         <Button
           version="primary"
-          className="my-4"
+          className="mt-0.5 mb-5"
           {...useLink(
             { router, handlerDecorator },
             {
@@ -38,7 +38,7 @@ const renderContact = (item: ContactInfo, index: number) => {
   const { type, text, description } = item;
 
   return (
-    <div className="mb-4" key={String(index)}>
+    <div className="mb-3.5" key={String(index)}>
       <div>{renderText(type, text)}</div>
       <div className="font-sans text-sm text-secondary-text">{description}</div>
     </div>

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

@@ -35,7 +35,7 @@ export const Footer = JSX<FooterProps>(
     return (
       <footer className={`px-4 py-[26px] bg-white ${className}`}>
         <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
-        <Accordion className="p-0 pt-0 pb-0 mb-4" {...propsTextBlock} />
+        <Accordion className="!p-0 mb-4" {...propsTextBlock} />
         <div>{subMenu?.map(renderSubMenuItem)}</div>
         <MobileAppTile
           context={context}
@@ -58,9 +58,9 @@ export const Footer = JSX<FooterProps>(
 const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
   const { icon, href, text } = menu;
   return (
-    <Button key={`footer-${i}`} href={href} className="flex text-sm mb-4">
+    <Button version="link" key={`footer-${i}`} href={href} className="flex text-sm mb-4">
       {icon ? <Icon className="pr-1" name={icon} width="24" height="24" asSVG /> : null}
-      <span className="pl-0.5 font-medium">{text}</span>
+      <span className="pl-2.5 font-medium text-primary-text">{text}</span>
     </Button>
   );
 };

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

@@ -17,7 +17,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
       <div className={className}>
         <span className="text-primary-text font-sans font-medium text-sm">{title}</span>
         {links?.length ? (
-          <div className="flex flex-col gap-5 py-5">
+          <div className="flex flex-col gap-2 pt-3">
             {links.map((_, i) => (
               <HorizontalNavigationLink
                 key={String(i)}

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

@@ -32,13 +32,15 @@ export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
 
   return (
     <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"
+      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:text-primary-main"
       href={href}
       aria-label={label}
       target="_blank"
       rel="noopener noreferrer"
     >
-      {Icon && <Icon name={icon} width={width} height={height} asSVG className="block" />}
+      {Icon && (
+        <Icon name={icon} width={width} height={height} asSVG className="block" color="none" />
+      )}
     </a>
   );
 });

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

@@ -8,13 +8,13 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
   const { handlerDecorator } = context;
   return (
     <div className={`${className || ''}`}>
-      <div className="pt-5 pb-[5px]">
+      <div className="py-6">
         <span className="font-sans font-normal text-xs text-secondary-text">
           {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
         </span>
       </div>
       {links?.length ? (
-        <div className={`flex flex-col justify-start items-start gap-5 pt-[5px]`}>
+        <div className={`flex flex-col justify-start items-start gap-2`}>
           {links.map((_, i) => (
             <TextInformationLink
               key={String(i)}

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

@@ -13,7 +13,11 @@
       "title": "Заголовок 1",
       "description": "Описание 1",
       "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      "items": [
+        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
+        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
+        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
+      ]
     },
     {
       "image": {
@@ -26,7 +30,11 @@
       "title": "Заголовок 2",
       "description": "Описание 2",
       "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      "items": [
+        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
+        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
+        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
+      ]
     },
     {
       "image": {
@@ -39,7 +47,11 @@
       "title": "Заголовок 3",
       "description": "Описание 3",
       "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      "items": [
+        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
+        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
+        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
+      ]
     },
     {
       "image": {
@@ -52,7 +64,11 @@
       "title": "Заголовок 4",
       "description": "Описание 4",
       "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      "items": [
+        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
+        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
+        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
+      ]
     }
   ]
 }