@redneckz/wildless-cms-uni-blocks 0.3.30 → 0.3.33

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

@@ -5,11 +5,15 @@
   "rowHeaders": [
     {
       "title": "Параметр 1",
-      "icon": "MoneyIcon"
+      "icon": {
+        "icon": "MoneyIcon"
+      }
     },
     {
       "title": "Параметр 2",
-      "icon": "DollarIcon"
+      "icon": {
+        "icon": "DollarIcon"
+      }
     },
     {
       "title": "Параметр 3"
@@ -45,7 +49,9 @@
             "label": "Ячейка 3-2",
             "buttons": [
               {
-                "icon": "AppleIcon",
+                "icon": {
+                  "icon": "AppleIcon"
+                },
                 "rounded": true,
                 "version": "secondary",
                 "href": "/",
@@ -53,7 +59,9 @@
                 "text": ""
               },
               {
-                "icon": "PlayMarketIcon",
+                "icon": {
+                  "icon": "PlayMarketIcon"
+                },
                 "rounded": true,
                 "version": "secondary",
                 "href": "/",

package/mobile/src/components/TariffsTable/TariffsTableCell.tsx

@@ -1,10 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import type { TariffsTableCellData, TariffsTableList } from './TariffsTableContent';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 export interface TariffsTableCellProps {
   cell: TariffsTableCellData[];
@@ -55,7 +54,7 @@ const renderButtons = (buttons: ButtonWithIconProps[]) => (
         className={`${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`}
         key={String(idx)}
         rounded={rounded}
-        appendLeft={icon && <Icon name={icon} width="24px" height="24px" asSVG />}
+        appendLeft={icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null}
         {...buttonProps}
       />
     ))}

package/mobile/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,4 +1,3 @@
-import type { IconName } from '../../icons/IconName';
 import type { CellData } from '../ComparisonTable/ComparisonTableContent';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -6,6 +5,7 @@ import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
+import { Picture } from '../../model/Picture';
 
 /**
  * @title Ряд
@@ -44,7 +44,7 @@ export type TariffsTableCellData = CellData &
  * @title Параметр
  */
 export type TariffsTableRowHeader = HeadingContent & {
-  icon?: IconName;
+  icon?: Picture;
 };
 
 /**

package/mobile/src/components/TariffsTable/TariffsTableRow.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Img } from '../../ui-kit/Img/Img';
+import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
+import { TableRowContainer } from '../ComparisonTable/TableRowContainer';
 import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { TariffsTableCell } from './TariffsTableCell';
-import { TableRowContainer } from '../ComparisonTable/TableRowContainer';
-import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
 import type { TariffsTableRowData } from './TariffsTableContent';
 
 export interface TariffsTableRowProps {
@@ -23,15 +23,15 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
           }`}
         >
           <div className="flex items-center text-primary-text">
-            {header?.icon && (
-              <Icon
+            {header?.icon ? (
+              <Img
                 className="mr-[14px] max-w-6 max-h-6"
-                name={header.icon}
+                image={header.icon}
                 width="24px"
                 height="24px"
                 asSVG
               />
-            )}
+            ) : null}
             {header?.title}
           </div>
         </div>

package/mobile/src/components/TariffsTable/TariffsTableTileCell.tsx

@@ -1,15 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { TableTileHeader } from './TableTileHeader';
-import { Img } from '../../ui-kit/Img/Img';
 import { Button } from '../../ui-kit/Button/Button';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
+import { TableTileHeader } from './TableTileHeader';
 import type {
   TariffsTableCellData,
   TariffsTableList,
   TariffsTableTileCellProps,
 } from './TariffsTableContent';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ header, data }) => {
   return (
@@ -54,7 +53,7 @@ const renderButtons = (buttons: ButtonWithIconProps[]) => (
         className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`}
         key={String(idx)}
         rounded={rounded}
-        appendLeft={icon && <Icon name={icon} width="24px" height="24px" asSVG />}
+        appendLeft={icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null}
         {...buttonProps}
         aria-label={icon}
       />

package/mobile/src/components/TextBlock/TextBlockContent.ts

@@ -23,7 +23,7 @@ export interface TextBlockContent {
   iconVersion?: TextBlockIconVersion;
   image?: Picture;
   blockVersion?: TextBlockVersion;
-  /** @title Маркеры списка (моб.) */ // TODO: mobile prop
+  /** @title Буллиты */ // TODO: mobile prop
   isDotted?: boolean;
   /** @title Список (моб.) */ // TODO: mobile prop
   items?: string[];

package/mobile/src/content-page-repository/transformContentPage.ts

@@ -16,7 +16,7 @@ export async function transformContentPage(
   const content = await readFile(pagePath, 'utf8');
   return mapJSON<ContentPageDef>(JSON.parse(content), async (value: any, [key]) => {
     const isMarkdown = typeof value === 'string' && key?.endsWith('__md');
-    const isPicture = value && isLocalPath(value.src);
+    const isPicture = value && isLocalPath(value?.src);
     if (isMarkdown) {
       return await transformMarkdown(value);
     } else if (isPicture) {

package/mobile/src/model/Picture.ts

@@ -1,3 +1,5 @@
+import type { IconName } from '../icons/IconName';
+
 export interface Img {
   /** @title Картинка */
   src?: string;
@@ -8,6 +10,8 @@ export interface Img {
 }
 
 export interface ImgSource {
+  /** @title Иконка */
+  icon?: IconName;
   /** @title Картинка */
   src?: string;
   /** @title Формат */

package/mobile/src/model/SitemapProps.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from './LinkProps';
-import { IconName } from '../icons/IconName';
+import type { Picture } from './Picture';
 
 /**
  * @title Меню
@@ -16,7 +16,7 @@ export interface TopMenuItem extends LinkProps {
  */
 export interface DispositionItem extends LinkProps {
   /** @hidden */
-  icon?: IconName;
+  icon?: Picture;
 }
 
 export interface SitemapProps {

package/mobile/src/services/sitemap/SitemapProps.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
-import { IconName } from '../../icons/IconName';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Ссылка
@@ -16,7 +16,7 @@ export interface TopMenuItem extends LinkProps {
  */
 export interface DispositionItem extends LinkProps {
   /** @hidden */
-  icon?: IconName;
+  icon?: Picture;
 }
 
 export interface SitemapProps {

package/mobile/src/ui-kit/BlocksList/EmbeddableBlocks.tsx

@@ -1,23 +1,15 @@
 import { Headline } from '../../components/Headline/Headline';
 import { LinkDocs } from '../../components/LinkDocs/LinkDocs';
-import { PictureText } from '../../components/PictureText/PictureText';
 import { ProductBlock } from '../../components/ProductBlock/ProductBlock';
 import { TextBlock } from '../../components/TextBlock/TextBlock';
-import { Tile } from '../../components/Tile/Tile';
-import { ProductTile } from '../../components/ProductTile/ProductTile';
 import { Gallery } from '../../components/Gallery/Gallery';
-import { MiniGallery } from '../../components/MiniGallery/MiniGallery';
 import { LinkList } from '../../components/LinkList/LinkList';
 
 export const EmbeddableBlocks = {
   Headline,
   LinkDocs,
   TextBlock,
-  PictureText,
   ProductBlock,
-  Tile,
-  ProductTile,
   Gallery,
-  MiniGallery,
   LinkList,
 };

package/mobile/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -2,27 +2,19 @@ import type { JSXBlock } from '../../components/ContentPage/ContentPage';
 import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
 import type { BlockDef, ColumnsCount } from './BlocksListProps';
 import { EmbeddableBlocks } from './EmbeddableBlocks';
-import { BlockVersion } from '../../model/BlockVersion';
 
 type EmbeddableBlocksProps = {
   blocks?: BlockDef[];
   context: ContentPageContext;
   columns?: ColumnsCount;
   className?: string;
-  version?: BlockVersion;
 };
 
-export const renderBlocksList = ({
-  blocks,
-  context,
-  className,
-  columns,
-  version,
-}: EmbeddableBlocksProps) =>
-  blocks?.length ? blocks.map(renderBlock({ context, className, columns, version })) : null;
+export const renderBlocksList = ({ blocks, context, className, columns }: EmbeddableBlocksProps) =>
+  blocks?.length ? blocks.map(renderBlock({ context, className, columns })) : null;
 
 export const renderBlock =
-  ({ context, columns, className, version }: EmbeddableBlocksProps) =>
+  ({ context, columns, className }: EmbeddableBlocksProps) =>
   (block: BlockDef, i: number) => {
     const type = block?.blockListType;
     if (!type || !(type in EmbeddableBlocks)) {
@@ -32,7 +24,7 @@ export const renderBlock =
     const EmbeddedBlock: JSXBlock = EmbeddableBlocks[type];
     return (
       <div className={`${className} ${columnsCountClass}`} key={`block_${i}`}>
-        <EmbeddedBlock context={context} {...block} blockVersion={version} className="!p-0" />
+        <EmbeddedBlock context={context} {...block} className="!p-0" />
       </div>
     );
   };

package/mobile/src/ui-kit/Button/ButtonInner.tsx

@@ -13,8 +13,8 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {appendLeft ? appendLeft : null}
       {isWithText(props) ? (
         <div>
-          <div className="text-m-2xs text-left">{aboveText}</div>
-          <div className="text-m-button font-medium text-left">{text}</div>
+          <div className="text-m-2xs font-light text-left">{aboveText}</div>
+          <div className="text-base text-left">{text}</div>
         </div>
       ) : null}
     </div>
@@ -28,7 +28,7 @@ const getButtonStyle = (props: ButtonInnerProps) => {
     return '';
   }
 
-  const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`;
+  const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-4'}`;
 
   return [
     'flex items-center justify-center',

package/mobile/src/ui-kit/Button/ButtonProps.ts

@@ -1,6 +1,6 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { IconName } from '../Icon/IconProps';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @hidden
@@ -24,7 +24,7 @@ export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
 
 export interface ButtonWithIconProps extends ButtonProps {
   /** @title Иконка */
-  icon?: IconName;
+  icon?: Picture;
   /** @title Верхний текст */
   aboveText?: string;
   /** @hidden */

package/mobile/src/ui-kit/Button/ButtonSection.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import { UniBlockProps } from '../../types';
-import { Icon } from '../Icon/Icon';
+import { Img } from '../Img/Img';
 import { Button } from './Button';
 import type { ButtonContent, ButtonWithIconProps } from './ButtonProps';
 
@@ -25,7 +25,7 @@ function renderButton({ icon, ...button }: ButtonWithIconProps, i: number) {
   return icon ? (
     <Button
       key={String(i)}
-      appendLeft={<Icon name={icon} width="24" height="24" asSVG />}
+      appendLeft={<Img image={icon} width="24" height="24" asSVG />}
       {...button}
     />
   ) : (

package/mobile/src/ui-kit/Icon/Icon.tsx

@@ -12,7 +12,7 @@ const svgColorsMap: Record<IconColor, string> = {
 export const Icon = JSX<IconProps>(
   ({
     className = '',
-    name,
+    name = '',
     alt = `Иконка ${IconTitleMap[name] || name}`,
     title = alt,
     asSVG,

package/mobile/src/ui-kit/Icon/IconProps.ts

@@ -8,13 +8,22 @@ export type { IconName };
  */
 export type IconColor = 'none' | 'primary' | 'secondary';
 
-export interface IconProps {
-  className?: string;
-  name: IconName;
+export interface IconCompatibilityFields {
+  /** @title Альтернативный текст (alt) */
   alt?: string;
+  /** @title Текст подсказки (title) */
   title?: string;
+  /** @title Ширина */
   width?: string;
+  /** @title Высота */
   height?: string;
+  /** @hidden */
   asSVG?: boolean;
+  /** @hidden */
   color?: IconColor;
 }
+
+export type IconProps = IconCompatibilityFields & {
+  className?: string;
+  name?: IconName;
+};

package/mobile/src/ui-kit/Img/Img.tsx

@@ -1,30 +1,46 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Picture, ImgSource } from '../../model/Picture';
+import type { ImgSource, Picture } from '../../model/Picture';
+import { Icon } from '../Icon/Icon';
+import type { Image, ImageProps } from './ImgProps';
 
-export interface ImageProps {
-  className?: string;
-  imageClassName?: string;
-  image: Picture;
-}
+export const Img = JSX<ImageProps<Image>>(
+  ({ className = '', image, imageClassName = '', ...iconProps }) => {
+    // backwards compatibility with existing icons in usage
+    const icon = typeof image === 'string' ? image : image?.icon;
+    if (icon || icon === '') {
+      return <Icon className={className} name={icon} {...iconProps} />;
+    }
 
-export const Img = JSX<ImageProps>(({ className = '', image, imageClassName }) => {
-  if (!image) {
-    return null;
-  }
+    return (
+      <ImgAsPicture
+        className={className}
+        imageClassName={imageClassName}
+        image={image as Picture}
+      />
+    );
+  },
+);
 
-  return (
-    <picture className={className}>
-      {image.sources?.length
-        ? image.sources.map(({ src, format }, index) => (
-            <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
-          ))
-        : null}
-      {renderImg(image, imageClassName)}
-    </picture>
-  );
-});
+export const ImgAsPicture = JSX<ImageProps<Picture>>(
+  ({ className = '', image, imageClassName = '' }) => {
+    if (!image) {
+      return null;
+    }
+
+    return (
+      <picture className={className}>
+        {image?.sources?.length
+          ? image.sources.map(({ src, format }, index) => (
+              <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
+            ))
+          : null}
+        {renderImg(image, imageClassName)}
+      </picture>
+    );
+  },
+);
 
-const renderImg = (image, imageClassName = '') => {
+const renderImg = (image: Picture, imageClassName = '') => {
   const style = {
     width: image.size?.width ? `${image.size?.width}px` : '100%',
     height: image.size?.height ? `${image.size?.height}px` : '100%',

package/mobile/src/ui-kit/Img/ImgProps.ts

@@ -1,9 +1,12 @@
 import type { Picture } from '../../model/Picture';
+import type { IconCompatibilityFields, IconName } from '../Icon/IconProps';
 
-export interface ImageContent {
-  image?: Picture;
-}
+export type Image = Picture | IconName;
 
-export interface ImageProps extends ImageContent {
+export interface ImageContent<T = Picture> {
+  image?: T;
+}
+export interface ImageProps<T> extends ImageContent<T>, IconCompatibilityFields {
   className?: string;
+  imageClassName?: string;
 }

package/mobile/src/ui-kit/List/ListItem.tsx

@@ -11,7 +11,7 @@ export interface ListItemProps {
   isDotted?: boolean;
 }
 
-const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3 mt-2';
+const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
 
 const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
   primary: 'bg-primary-main',
@@ -22,7 +22,7 @@ const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
 export const ListItem = JSX<ListItemProps>(
   ({ className = '', isDotted = true, children, version = 'primary' }) => {
     return (
-      <div className={`font-sans flex items-start ${className}`} role="listitem">
+      <div className={`font-sans flex items-center ${className}`} role="listitem">
         {isDotted && <div className={getListStyle(version)} />}
         <span>{children}</span>
       </div>

package/mobile/src/ui-kit/SearchBar/SearchBar.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Icon } from '../Icon/Icon';
+import { Img } from '../Img/Img';
 
 export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
   const { term, setTerm } = context.useSearch();
@@ -8,7 +8,7 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
     <form className={`relative ${className || ''}`}>
       <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
         <div className="w-[20px] h-[20px]">
-          <Icon name="LoupeIcon" width="24" height="24" />
+          <Img image="LoupeIcon" width="24" height="24" />
         </div>
         {!term && (
           <label
@@ -37,7 +37,7 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
           setTerm('');
         }}
       >
-        <Icon name="CloseIcon" width="24" height="24" />
+        <Img image="CloseIcon" width="24" height="24" />
       </button>
     </form>
   );

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -22,7 +22,7 @@ export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
       const contentContainer = (e.currentTarget as HTMLElement).parentElement
         ?.previousElementSibling;
 
-      contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth' });
+      contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     };
 
     return showDots && children?.length ? (

package/mobile/src/ui-kit/SwipeListControl/utils/getScrollPoints.spec.ts

@@ -17,8 +17,26 @@ const scrollPoints: [number, number][] = [
   [1414, 1914],
 ];
 
+const twoItemsScrollPointsProps = {
+  gap: 14,
+  padding: 16,
+  clientWidth: 414,
+  scrollWidth: 794,
+  childElementCount: 2,
+  itemWidth: 380,
+};
+
+const twoItemsScrollPoints: [number, number][] = [
+  [0, 380],
+  [380, 794],
+];
+
 describe('getScrollPoints', () => {
   it('should return array containing scroll breakpoints delimiting each child', () => {
     expect(getScrollPoints(props)).toEqual(scrollPoints);
   });
+
+  it('should correctly handle case with 2 items in container', () => {
+    expect(getScrollPoints(twoItemsScrollPointsProps)).toEqual(twoItemsScrollPoints);
+  });
 });

package/mobile/src/ui-kit/SwipeListControl/utils/getScrollPoints.ts

@@ -16,9 +16,17 @@ export const getScrollPoints = ({
   scrollWidth: number;
   childElementCount: number;
   itemWidth: number;
-}) => {
-  const scrollItemWidth = itemWidth + gap;
+}): [number, number][] => {
   const scrollableDistance = scrollWidth - clientWidth;
+
+  if (childElementCount === 2) {
+    return [
+      [0, scrollableDistance],
+      [scrollableDistance, scrollWidth],
+    ];
+  }
+
+  const scrollItemWidth = itemWidth + gap;
   const edgeScrollDistance = clientWidth - gap - padding;
 
   const lastScrollableIdx = childElementCount - 2;

package/mobile/src/ui-kit/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../Img/Img';
 import type { Tab, TabClickHandler, TabsProps } from './TabsProps';
 
 const TAB_STYLE = 'px-2 h-14 pb-2 pt-3 border border-b-0 border-main-stroke';
@@ -41,6 +41,6 @@ const renderTab =
 
 const renderIcon = (tab: Tab, isActive: boolean) => (
   <div className="h-full mt-1" style={isActive ? { filter: 'invert(1)' } : null}>
-    <Icon className="w-5 h-5 mr-3" name={tab?.icon || 'CardIcon'} asSVG={!isActive} />
+    <Img className="w-5 h-5 mr-3" image={tab?.icon || 'CardIcon'} asSVG={!isActive} />
   </div>
 );

package/mobile/src/ui-kit/Tabs/TabsProps.ts

@@ -1,4 +1,4 @@
-import type { IconName } from '../../icons/IconName';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Вкладка
@@ -8,7 +8,7 @@ export interface Tab {
   title?: string;
   /** @title Описание */
   description?: string;
-  icon?: IconName;
+  icon?: Picture;
 }
 
 export type TabClickHandler = (value: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.30",
+  "version": "0.3.33",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -109,14 +109,13 @@
     "clean:actual": "rimraf ./cypress/snapshots/actual || exit 0"
   },
   "peerDependencies": {
-    "cypress": "^10.4.0",
+    "cypress": "^10.6.0",
     "cypress-visual-regression": "^1.7.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
     "@redneckz/uni-jsx": "^0.1.6",
-    "cypress-visual-regression": "^1.7.0",
     "glob": "^8.0.3",
     "remark-html": "^15.0.1",
     "remark-parse": "^10.0.1",

package/src/components/Accordion/Accordion.example.json

@@ -3,6 +3,9 @@
   "accordionItems": [
     {
       "label": "Аккордеон 1",
+      "labelIcon": {
+        "icon": "CardIcon"
+      },
       "blocks": [
         {
           "blockListType": "TextBlock",
@@ -18,6 +21,9 @@
     },
     {
       "label": "Аккордеон 2",
+      "labelIcon": {
+        "icon": "CardIcon"
+      },
       "blocks": [
         {
           "blockListType": "TextBlock",
@@ -33,6 +39,9 @@
     },
     {
       "label": "Аккордеон 3",
+      "labelIcon": {
+        "icon": "CardIcon"
+      },
       "blocks": [
         {
           "blockListType": "TextBlock",