@redneckz/wildless-cms-uni-blocks 0.14.25 → 0.14.27

package/src/components/Carousel/Carousel.fixture.tsx

@@ -1,7 +1,6 @@
-import '../../setup-fixture';
-
 import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { BANK_HISTORY_CARD } from '../CarouselBankHistoryCard/CarouselBankHistoryCard.fixture';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
@@ -11,8 +10,8 @@ import {
   PRODUCT_CARD,
   PRODUCT_CARD_SMALL,
 } from '../CarouselProductCard/CarouselProductCard.fixture';
-import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
 import {
+  CAROUSEL_RECOMMENDATION_CARD_BENEFITS,
   CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
   CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST,
 } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
@@ -161,39 +160,40 @@ export default {
       />
     </div>
   ),
-  program: (
+  investment: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={2}
+        visibleItemCount={0}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
-            type: 'CarouselProgramsCard',
-            content: BUSINESS_CARD,
+            type: 'CarouselInvestmentCard',
+            content: INVESTMENT_CARD_WITH_SINGLE_COLUMN,
           }),
         }}
         options={options}
       />
     </div>
   ),
-  investment: (
+  recommendations: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
         visibleItemCount={0}
+        cardSize="big"
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
-            type: 'CarouselInvestmentCard',
-            content: INVESTMENT_CARD_WITH_SINGLE_COLUMN,
+            type: 'CarouselRecommendationCard',
+            content: CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST,
           }),
         }}
         options={options}
       />
     </div>
   ),
-  recommendations: (
+  recommendationsSecondary: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
@@ -203,14 +203,14 @@ export default {
           type: 'Carousel',
           blocks: new Array(6).fill({
             type: 'CarouselRecommendationCard',
-            content: CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST,
+            content: CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
           }),
         }}
         options={options}
       />
     </div>
   ),
-  recommendationsSecondary: (
+  recommendationsBenefits: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
@@ -220,13 +220,14 @@ export default {
           type: 'Carousel',
           blocks: new Array(6).fill({
             type: 'CarouselRecommendationCard',
-            content: CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
+            content: CAROUSEL_RECOMMENDATION_CARD_BENEFITS,
           }),
         }}
         options={options}
       />
     </div>
   ),
+
   'bank-history': (
     <div className="container grid grid-cols-12">
       <Carousel

package/src/components/Carousel/Carousel.tsx

@@ -68,7 +68,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
           />
         </div>
         <SwipeListControlDots
-          className="@lg:hidden"
+          className="@5xl:hidden"
           containerRef={containerRef}
           activeIndex={dotsActiveIndex}
           dotCount={count}

package/src/components/Carousel/renderCarouselCards.tsx

@@ -68,7 +68,7 @@ const cardStyle = (
     CARD_SIZE_MAP[cardSize], // TODO fix для RecommendationCard
     someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'),
     showBorder &&
-      'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider',
+      'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider h-full',
   );
 
 const isCardHighlighted = (_: BlockDef | undefined) =>

package/src/components/CarouselCard/CarouselCard.tsx

@@ -19,7 +19,7 @@ export const CarouselCard = JSX<CarouselCardProps>(
       defaultPadding="p-0"
       {...rest}
     >
-      <div className="relative">
+      <div className="relative h-full">
         <div className={style(layerStyle, 'top-9 right-12 bg-green-dark')} />
         <div className={style(layerStyle, 'top-6 right-8 bg-green')} />
         <div className={style(layerStyle, 'top-3 right-4 bg-green-light')} />

package/src/components/CarouselCard/titleSize.tsx

@@ -1 +1 @@
-export const titleSize = 'L';
+export const titleSize = 'XS';

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -39,7 +39,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
         className="h-full"
         padding={padding}
         title={
-          title ? (
+          title || description ? (
             <Headline
               title={title}
               description={description}

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

@@ -1,6 +1,6 @@
-import '../../setup-fixture';
-
 import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { type ComplexBenefitContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
 import { type ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard';
 import { type CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
@@ -15,6 +15,28 @@ const icon: Picture = {
   title: 'product-basket',
 };
 
+const iconCoin: Picture = {
+  src: 'coin.png',
+  format: 'webp',
+  size: {
+    width: 130,
+  },
+  title: 'money',
+};
+
+const benefits: ComplexBenefitContent[] = [
+  {
+    type: 'default',
+    label: 'От 16 до 81',
+    description: 'платежей',
+  },
+  {
+    type: 'default',
+    label: 'От 3 до 7,5 млн руб.',
+    description: 'остаток по счёту',
+  },
+];
+
 const socialMediaWithText: ButtonContent[] = [
   {
     href: 'https://t.me',
@@ -80,6 +102,15 @@ export const CAROUSEL_RECOMMENDATION_CARD_SECONDARY: CarouselRecommendationCardC
   socialMedia: socialMediaWithoutText,
 };
 
+export const CAROUSEL_RECOMMENDATION_CARD_BENEFITS: CarouselRecommendationCardContent = {
+  title: 'Продвинутый',
+  imageOptions: {
+    directionRight: false,
+  },
+  icon: iconCoin,
+  benefits: benefits,
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -132,4 +163,12 @@ export default {
       />
     </div>
   ),
+  benefits: (
+    <div className="container grid grid-cols-12">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        {...CAROUSEL_RECOMMENDATION_CARD_BENEFITS}
+      />
+    </div>
+  ),
 };

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx

@@ -1,6 +1,6 @@
-import '../../setup-fixture';
-
 import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { type ComplexBenefitContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
 import { type ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard';
 import { type CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
@@ -15,6 +15,28 @@ const icon: Picture = {
   title: 'product-basket',
 };
 
+const iconCoin: Picture = {
+  src: 'coin.png',
+  format: 'webp',
+  size: {
+    width: 130,
+  },
+  title: 'money',
+};
+
+const benefits: ComplexBenefitContent[] = [
+  {
+    type: 'default',
+    label: 'От 16 до 81',
+    description: 'платежей',
+  },
+  {
+    type: 'default',
+    label: 'От 3 до 7,5 млн руб.',
+    description: 'остаток по счёту',
+  },
+];
+
 const socialMediaWithText: ButtonContent[] = [
   {
     href: 'https://t.me',
@@ -87,6 +109,15 @@ export const CAROUSEL_RECOMMENDATION_CARD_SECONDARY: CarouselRecommendationCardC
   socialMedia: socialMediaWithoutText,
 };
 
+export const CAROUSEL_RECOMMENDATION_CARD_BENEFITS: CarouselRecommendationCardContent = {
+  title: 'Продвинутый',
+  imageOptions: {
+    directionRight: false,
+  },
+  icon: iconCoin,
+  benefits: benefits,
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -139,4 +170,12 @@ export default {
       />
     </div>
   ),
+  benefits: (
+    <div className="container grid grid-cols-12">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        {...CAROUSEL_RECOMMENDATION_CARD_BENEFITS}
+      />
+    </div>
+  ),
 };

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -1,10 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type UniBlockProps } from '../../model/JSXBlock';
+import { leftOrRightImage } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
+import { BenefitsList } from '../../ui-kit/BenefitsList/BenefitsList';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
+import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
@@ -27,7 +30,12 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     target,
     title,
     align = 'text-left',
-    isImageAlwaysOnRight = ImageAlwaysOnRight,
+    benefits,
+    imageOptions: {
+      directionRight = true,
+      isImageAlwaysOnRight = ImageAlwaysOnRight,
+      isImageSecondary = false,
+    } = {},
     ...rest
   }) => {
     return (
@@ -39,7 +47,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
         <LinkWrapper href={href} target={target} className="h-full">
           <BaseTile
             className="h-full"
-            defaultPadding="p-m"
+            defaultPadding="p-2xl"
             padding={padding}
             insetTitle={
               title ? (
@@ -52,15 +60,17 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
                 />
               ) : null
             }
-            rightImage={icon?.icon || icon?.src ? <Img image={icon} /> : null}
+            {...leftOrRightImage(isIcon(icon) ? <Img image={icon} /> : null, directionRight)}
             buttons={
               socialMedia.length ? (
-                <SocialMedia media={socialMedia} showButtonText={true} version={rest.version} />
+                <SocialMedia media={socialMedia} showButtonText={true} version={rest?.version} />
               ) : null
             }
             isImageAlwaysOnRight={isImageAlwaysOnRight}
+            isImageSecondary={isImageSecondary}
           >
-            {items.length ? <List items={items} listItemSize={listItemSize} /> : null}
+            <BenefitsList benefits={benefits} />
+            <List items={items} listItemSize={listItemSize} />
           </BaseTile>
         </LinkWrapper>
       </BlockWrapper>

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -2,6 +2,8 @@ import { type AlignProps, type HeadlineCommonProps } from '../../model/HeadlineT
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type LinkCommonProps } from '../../model/LinkProps';
 import { type IconProps } from '../../model/Picture';
+import { type TileImageOptions } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
+import { type BenefitsListContent } from '../../ui-kit/BenefitsList/BenefitsListContent';
 import { type ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { type ListContent } from '../../ui-kit/List/ListContent';
 
@@ -13,9 +15,9 @@ export type CarouselRecommendationCardContent = UniBlockContent &
   ListContent &
   IconProps &
   LinkCommonProps &
-  AlignProps & {
+  AlignProps &
+  BenefitsListContent & {
     /** @title Соц сети */
     socialMedia?: ButtonContent[];
-    /** @title Изображение всегда справа */
-    isImageAlwaysOnRight?: boolean;
+    imageOptions?: TileImageOptions;
   };

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type UniBlockProps } from '../../model/JSXBlock';
-import { type Picture } from '../../model/Picture';
 import { type VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
@@ -10,6 +9,7 @@ import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
+import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { type CarouselTariffsCardContent } from './CarouselTariffsCardContent';
 import { renderCardInfo } from './renderCardInfo';
@@ -25,12 +25,16 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
 
     return (
-      <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-3xl" {...rest}>
-        {renderIconBlock(icon)}
+      <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-2xl" {...rest}>
+        {isIcon(icon) ? (
+          <div className="self-center">
+            <Img image={icon} />
+          </div>
+        ) : null}
         {title ? (
           <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
         ) : null}
-        {button ? <Button className="w-full mt-m" {...button} /> : null}
+        {button ? <Button className="w-full mt-m mb-lg" {...button} /> : null}
         {cardCells.length ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (
@@ -47,10 +51,6 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   },
 );
 
-const renderIconBlock = (icon?: Picture) => (
-  <div className="self-center">{icon?.src || icon?.icon ? <Img image={icon} /> : null}</div>
-);
-
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button
     className="w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center"

package/src/components/ContentPage/ContentPage.tsx

@@ -42,7 +42,7 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
               {renderBlocksList(slots?.header, { ...options, slotName: 'header' })}
             </div>
           ) : null}
-          <div className="container space-y-px @lg:space-y-0 @lg:grid @lg:grid-cols-12 @lg:gap-2xs">
+          <div className="container space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs">
             {renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } })}
             {renderBlocksList(slots?.footer, { ...options, slotName: 'footer' })}
           </div>

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

@@ -45,10 +45,12 @@ export const Footer = JSX<FooterProps>(({ className, ...rest }) => {
         <SocialMedia className="mb-xl" media={socialMedia} stretched={true}>
           Соцсети
         </SocialMedia>
-        <Text size="text-s" font="font-light" color="text-secondary-text">
-          Мобильное приложение
-        </Text>
-        <div className="mt-xs">{mobileApps?.map(renderButton)}</div>
+        <div className="mb-xl">
+          <div className="flex flex-col gap-4 mb-xs">{mobileApps?.map(renderButton)}</div>
+          <Text size="text-s" font="font-light" color="text-secondary-text">
+            Мобильное приложение
+          </Text>
+        </div>
       </div>
       <div className="py-lg border-t border-main-divider">
         <HorizontalNavigationLink
@@ -74,7 +76,7 @@ const renderButton = ({ href = '/', text }: LinkProps, i: number) => {
   return (
     <Button
       key={String(i)}
-      className="w-full mb-lg"
+      className="w-full"
       text={text || label}
       version="secondary"
       href={href}

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type TitleProps } from '../../model/HeadlineType';
 import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import { type FooterLink } from './FooterLink';
 import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 
@@ -8,7 +9,7 @@ export interface HorizontalNavigationProps extends FooterLink, TitleProps {}
 
 export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
   ({ title, links, className = '' }) => (
-    <div className={className}>
+    <div className={style('flex flex-col gap-4', className)}>
       <Text size="text-l" font="font-normal">
         {title}
       </Text>

package/src/components/Footer/SocialMedia.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { ButtonVersion } from '../../model/ButtonVersion';
-import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Text } from '../../ui-kit/Text/Text';
+import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { findIconByHref } from './findIconByHref';
 
@@ -22,7 +22,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
     const buttons: ButtonContent[] | undefined = media?.map((_) => {
       const { href, icon, text } = _;
       const { iconMapped } = findIconByHref(href);
-      const iconCustom = getFilteredIcon(icon) ?? iconMapped;
+      const iconCustom = isIcon(icon) ? icon : iconMapped;
       const buttonText = showButtonText ? { text } : { text: '' };
 
       if (!hasText && text) {
@@ -39,26 +39,24 @@ export const SocialMedia = JSX<SocialMediaProps>(
 
     const buttonClassName = style(
       'border border-solid hover:border-transparent group-data-primary:border-main-divider border-main-divider group-data-gray:border-green group/media',
-      showButtonText && hasText ? '' : ' basis-auto',
+      showButtonText && hasText ? '' : 'basis-auto',
       stretched ? 'flex-1 justify-center' : '',
     );
 
     return (
-      <div className="flex flex-col sm:flex-col-reverse gap-xs">
-        {children ? (
-          <Text size="text-s" font="font-light" color="text-secondary-text">
-            {children}
-          </Text>
-        ) : null}
-        <div className={style('flex gap-xs', className)}>
+      <div className={style('flex flex-col gap-xs', className)}>
+        <div className="flex gap-xs">
           {renderButtonsSection(buttons, {
             className: stretched ? 'w-full' : '',
             buttonClassName,
           })}
         </div>
+        {children ? (
+          <Text size="text-s" font="font-light" color="text-secondary-text">
+            {children}
+          </Text>
+        ) : null}
       </div>
     );
   },
 );
-
-const getFilteredIcon = (icon: Picture | undefined) => (icon?.src || icon?.icon ? icon : undefined);

package/src/components/Footer/TextInformation.tsx

@@ -12,7 +12,7 @@ export const TextInformation = JSX<FooterLink>(({ className = '', links }) => (
       </Text>
     </div>
     {links?.length ? (
-      <div className="flex flex-col @lg:flex-row justify-start items-start gap-x-lg gap-y-xs pt-lg">
+      <div className="flex flex-col @5xl:flex-row justify-start items-start gap-x-lg gap-y-xs pt-lg">
         {links.map((_, i) => (
           <TextInformationLink key={String(i)} index={i} {..._} />
         ))}

package/src/components/Footer/iconsMap.ts

@@ -35,4 +35,8 @@ export const ICONS_MAP: Array<IconsMapItem> = [
     origins: ['rutube.ru'],
     iconMapped: { icon: 'RutubeIcon' },
   },
+  {
+    origins: ['dzen.ru'],
+    iconMapped: { icon: 'DzenIcon' },
+  },
 ];

package/src/components/OfficesAtmsMap/OfficesAtmsMap.ui.json

@@ -1 +1,16 @@
-{}
+{
+  "content": {
+    "data": {
+      "dataType": {
+        "ui:widget": "hidden"
+      },
+      "list": {
+        "items": {
+          "image": {
+            "ui:field": "picture"
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/OfficesAtmsMap/OfficesAtmsMapContent.ts

@@ -6,6 +6,7 @@ import { type Picture } from '../../model/Picture';
  * @title Пункт
  */
 export type ItemList = {
+  /** @title Название */
   text?: string;
   image?: Picture;
 };

package/src/components/ProductBlock/ProductBlock.tsx

@@ -33,12 +33,7 @@ export const ProductBlock = JSX<ProductBlockProps>(
         padding={padding}
         {...rest}
       >
-        {backwardButton
-          ? renderBackwardButton(
-              !rest.version || rest.version === 'primary' ? 'primary' : 'white',
-              handleClick,
-            )
-          : null}
+        {backwardButton ? renderBackwardButton(rest.version || 'primary', handleClick) : null}
         <BaseProductTile className="grow h-full" {...rest} />
       </BlockWrapper>
     );

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -22,7 +22,13 @@ export function renderBackwardButton(version: ButtonVersion, handleClick: () =>
           }}
         />
       </div>
-      <Button version="link" text={text} ariaLabel={text} onClick={handleClick} />
+      <Button
+        version="link"
+        className="group-data-secondary:text-white/80"
+        text={text}
+        ariaLabel={text}
+        onClick={handleClick}
+      />
     </div>
   );
 }

package/src/components/ProductGallery/ProductGallery.example.json

@@ -8,7 +8,7 @@
         },
         "productBlock": {
           "title": "Продуктовая галерея",
-          "headlineVersion": "XXL",
+          "headlineVersion": "M",
           "image": {
             "format": "webp",
             "size": {

package/src/components/ProductGallery/ProductGallery.tsx

@@ -28,7 +28,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
             <div key={String(i)} className="box-border grow-0 shrink-0 basis-full" role="listitem">
               <BaseProductTile
                 className="pl-6xl h-full"
-                headlineVersion="XXL"
+                headlineVersion="M"
                 isFullWidthTitle={false}
                 {...productBlock}
                 {...rest}

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.example.json

@@ -3,6 +3,7 @@
   "description": "Описание",
   "__html": "<p>Описание</p>",
   "richVersion": "",
+  "icon": { "format": "webp", "size": { "width": 70, "height": 48 } },
   "button": {
     "text": "Информация о регионе",
     "version": "link",