@redneckz/wildless-cms-uni-blocks 0.15.341 → 0.16.1

package/src/components/CarouselLinks/CarouselLinks.fixture.tsx

@@ -6,11 +6,14 @@ import { type CarouselLinkProps } from './CarouselLinksContent';
 const link = {
   text: 'Заключения',
   href: '#',
+  icon: {
+    icon: 'BankIcon',
+  },
 };
 
-const links = Array.from<CarouselLinkProps>({ length: 10 })
-  .fill(link)
-  .map((_, i) => ({ ..._, text: `${_.text} #${i}` }));
+const links = Array.from<CarouselLinkProps>({ length: 11 })
+  .fill(link as CarouselLinkProps)
+  .map((_) => ({ ..._, text: `${_.text}`, icon: _.icon }));
 
 const description = `Акционерное общество «Российский Сельскохозяйственный банк»* —
   один из крупнейших банков в России. Был основан в 2000 году в целях развития

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -1,27 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type LinkProps } from '../../model/LinkProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
-import { Carousel } from '../Carousel/Carousel';
 import { Headline } from '../Headline/Headline';
 import { CarouselLinkButton } from './CarouselLinkButton';
-import { type CarouselLinksContent } from './CarouselLinksContent';
-import { MAX_LINKS_COUNT } from './maxLinksCount';
+import { type CarouselLinkProps, type CarouselLinksContent } from './CarouselLinksContent';
 
 interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps {}
 
 export const CarouselLinks = JSX<CarouselLinksProps>(
   ({ className, additionalDescription, description, links, title, ...rest }) => (
     <BlockWrapper defaultPadding="p-5xl" className={style('overflow-hidden', className)} {...rest}>
-      <div className="flex flex-col lg:flex-row sm:items-center gap-s justify-between">
-        <div>
+      <div className="flex flex-col lg:flex-row gap-5 justify-between">
+        <div className="flex-1">
           <Headline
             isEmbedded={true}
             title={title}
             description={description}
             as="h1"
             align="text-left"
+            headlineVersion="XL"
           />
           <Headline
             className="pt-m"
@@ -30,39 +28,23 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
             isEmbedded={true}
           />
         </div>
-        {links?.length ? renderLinks(links, 'sm:self-end sm:pt-s') : null}
+        {links?.length ? renderLinks(links) : null}
       </div>
     </BlockWrapper>
   ),
 );
 
-const renderLinks = (links: LinkProps[], className = '') => {
-  const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
-
-  return (
-    <Carousel
-      className={className}
-      version="secondary"
-      itemCount={itemCount}
-      arrowsPadded={false}
-      padding="p-0"
-      visibleItemCount={0}
-      isEmbedded={true}
-    >
-      {Array.from({ length: itemCount })
-        .fill(null)
-        .map((_, groupIndex) => (
-          <div
-            key={String(groupIndex)}
-            className="flex flex-wrap gap-2xs sm:gap-0 sm:justify-center"
-          >
-            {links
-              .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)
-              .map((link, index) => (
-                <CarouselLinkButton key={String(index)} {...link} />
-              ))}
-          </div>
-        ))}
-    </Carousel>
-  );
-};
+const renderLinks = (links: CarouselLinkProps[]) => (
+  <div
+    className={style(
+      'lg:grid-cols-9 lg:[&>*]:col-span-2 lg:[&>*:nth-child(14n+2)]:col-span-3 lg:[&>*:nth-child(7n+5)]:col-span-3',
+      'lg:[&>*:nth-child(7n+6)]:col-span-3 lg:[&>*:nth-child(7n+7)]:col-span-3 lg:[&>*:nth-child(14n+10)]:col-span-3 lg:w-3/6',
+      'grid-cols-3 max-lg:[&>*:not(:nth-child(-n+3)):nth-child(4n+3)]:col-span-2 max-lg:[&>*:not(:nth-child(-n+3)):nth-child(4n+4)]:col-span-2',
+      'grid gap-3 lg:gap-5',
+    )}
+  >
+    {links.map((link, i) => (
+      <CarouselLinkButton key={String(i)} {...link} />
+    ))}
+  </div>
+);

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -1,12 +1,5 @@
 {
   "content": {
-    "icon": {
-      "format": "webp",
-      "size": {
-        "width": 290,
-        "height": 290
-      }
-    },
     "title": "Заголовок 1",
     "description": "Описание 1",
     "align": "text-left",

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

@@ -1,6 +1,6 @@
 import { type Picture } from '../../model/Picture';
 import '../../setup-fixture';
-import { type ComplexBenefitContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
+import { type BenefitItemContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
 import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard';
 import { type CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
@@ -24,14 +24,12 @@ const iconCoin: Picture = {
   title: 'money',
 };
 
-const benefits: ComplexBenefitContent[] = [
+const benefits: BenefitItemContent[] = [
   {
-    type: 'default',
     label: 'От 16 до 81',
     description: 'платежей',
   },
   {
-    type: 'default',
     label: 'От 3 до 7,5 млн руб.',
     description: 'остаток по счёту',
   },
@@ -64,16 +62,18 @@ const socialMediaWithoutText: LinkButtonContent[] = [
   },
 ];
 
-const items = [
-  'Бесплатное подключение и обслуживание',
-  'Вход и подписание документов по биометрии',
-  'Работа со счетами, шаблонами и выпиской',
-];
+const __html = `
+  <ul>
+    <li>Бесплатное подключение и обслуживание</li>
+    <li>Вход и подписание документов по биометрии</li>
+    <li>Работа со счетами, шаблонами и выпиской</li>
+  </ul>
+`;
 
 export const CAROUSEL_RECOMMENDATION_CARD: CarouselRecommendationCardContent = {
   title: 'Подключаем мобильный банк для управления бизнесом',
   description: 'Все возможности банка для бизнеса в вашем смартфоне',
-  items,
+  __html,
   icon,
   socialMedia: socialMediaWithText,
 };
@@ -81,7 +81,7 @@ export const CAROUSEL_RECOMMENDATION_CARD: CarouselRecommendationCardContent = {
 export const CAROUSEL_RECOMMENDATION_CARD_SIMPLE: CarouselRecommendationCardContent = {
   title: 'Подключаем мобильный банк для управления бизнесом',
   description: 'Все возможности банка для бизнеса в вашем смартфоне',
-  items,
+  __html,
   icon,
   socialMedia: socialMediaWithoutText,
 };
@@ -97,7 +97,12 @@ export const CAROUSEL_RECOMMENDATION_CARD_SECONDARY: CarouselRecommendationCardC
   description: 'Описание',
   align: 'text-left',
   icon,
-  items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
+  __html: `
+    <ul>
+      <li>Свежие новости</li>
+      <li>Акции и предложения</li> 
+      <li>Ставки и катировки</li>
+    </ul>`,
   version: 'secondary',
   socialMedia: socialMediaWithoutText,
 };

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

@@ -1,6 +1,6 @@
 import { type Picture } from '../../model/Picture';
 import '../../setup-fixture';
-import { type ComplexBenefitContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
+import { type BenefitItemContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
 import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard';
 import { type CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
@@ -24,14 +24,12 @@ const iconCoin: Picture = {
   title: 'money',
 };
 
-const benefits: ComplexBenefitContent[] = [
+const benefits: BenefitItemContent[] = [
   {
-    type: 'default',
     label: 'От 16 до 81',
     description: 'платежей',
   },
   {
-    type: 'default',
     label: 'От 3 до 7,5 млн руб.',
     description: 'остаток по счёту',
   },
@@ -64,24 +62,28 @@ const socialMediaWithoutText: LinkButtonContent[] = [
   },
 ];
 
-const items = [
-  'Бесплатное подключение и обслуживание',
-  'Вход и подписание документов по биометрии',
-  'Работа со счетами, шаблонами и выпиской',
-];
+const __html = `
+  <ul>
+    <li>Бесплатное подключение и обслуживание</li>
+    <li>Вход и подписание документов по биометрии</li>
+    <li>Работа со счетами, шаблонами и выпиской</li>
+  </ul>
+`;
 
 export const CAROUSEL_RECOMMENDATION_CARD: CarouselRecommendationCardContent = {
   title: 'Подключаем мобильный банк для управления бизнесом',
   description: 'Все возможности банка для бизнеса в вашем смартфоне',
-  items,
+  __html,
   icon,
   socialMedia: socialMediaWithText,
+  data: [{ aspectName: 'mindboxEvent', params: { test: 'test-mindbox' } }],
+  href: 'https://www.rshb.ru/',
 };
 
 export const CAROUSEL_RECOMMENDATION_CARD_SIMPLE: CarouselRecommendationCardContent = {
   title: 'Подключаем мобильный банк для управления бизнесом',
   description: 'Все возможности банка для бизнеса в вашем смартфоне',
-  items,
+  __html,
   icon,
   socialMedia: socialMediaWithoutText,
 };
@@ -104,7 +106,12 @@ export const CAROUSEL_RECOMMENDATION_CARD_SECONDARY: CarouselRecommendationCardC
       height: 290,
     },
   },
-  items: ['Свежие новости', 'Акции и предложенияа', 'Ставки и катировки'],
+  __html: `
+    <ul>
+      <li>Свежие новости</li>
+      <li>Акции и предложения</li> 
+      <li>Ставки и катировки</li>
+    </ul>`,
   version: 'secondary',
   socialMedia: socialMediaWithoutText,
 };
@@ -185,7 +192,7 @@ export default {
         align="text-center"
         title="Более 5000 товаров"
         description="Время копить: ставка растет в зависимости от срока нахождения средств на Счете!"
-        items={items}
+        __html={__html}
         isDotted={false}
         icon={iconCoin}
         imageOptions={{ isImageAlwaysOnRight: false }}
@@ -207,7 +214,7 @@ export default {
         align="text-center"
         title="Более 5000 товаров"
         description="Время копить: ставка растет в зависимости от срока нахождения средств на Счете!"
-        items={items}
+        __html={__html}
         isDotted={false}
         icon={iconCoin}
         imageOptions={{ isImageAlwaysOnRight: false, directionRight: false }}

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -1,12 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { getAspectsWithInclude } from '../../hooks/useAspects/aspects/getAspectsWithInclude';
 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 { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { RichText } from '../../ui-kit/RichText/RichText';
 import { type TextAlign } from '../../ui-kit/Text/TextProps';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { isIcon } from '../../utils/isIcon';
@@ -27,8 +28,8 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     additionalDescription,
     href,
     icon,
-    items = [],
     isDotted,
+    __html,
     socialMedia = [],
     target,
     title,
@@ -39,6 +40,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
       isImageAlwaysOnRight = ImageAlwaysOnRight,
       isImageSecondary = false,
     } = {},
+    data,
     ...rest
   }) => (
     <BlockWrapper
@@ -46,7 +48,12 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
       defaultPadding="p-0"
       {...rest}
     >
-      <LinkWrapper href={href} target={target} className="h-full">
+      <LinkWrapper
+        href={href}
+        target={target}
+        className="h-full"
+        data={getAspectsWithInclude(data)}
+      >
         <BaseTile
           className="h-full"
           defaultPadding="p-2xl"
@@ -63,7 +70,12 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
           {...leftOrRightImage(isIcon(icon) ? <Img image={icon} /> : null, directionRight)}
           buttons={
             socialMedia.length ? (
-              <SocialMedia media={socialMedia} showButtonText={true} version={rest?.version} />
+              <SocialMedia
+                media={socialMedia}
+                stretched={true}
+                showButtonText={true}
+                version={rest?.version}
+              />
             ) : null
           }
           isImageAlwaysOnRight={isImageAlwaysOnRight}
@@ -71,7 +83,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
           imageAlign="center"
         >
           <BenefitsList benefits={benefits} />
-          <List items={items} isDotted={isDotted} listItemSize="S" />
+          {__html ? <RichText __html={__html} isDotted={isDotted} itemSize="list-s" /> : null}
           {renderAdditionalDescription(additionalDescription, align)}
         </BaseTile>
       </LinkWrapper>

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.ui.json

@@ -3,6 +3,9 @@
     "image": {
       "ui:field": "picture"
     },
+    "__html": {
+      "ui:widget": "html"
+    },
     "socialMedia": {
       "items": {
         "icon": {

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -10,7 +10,7 @@ import { type IconProps } from '../../model/Picture';
 import { type TileImageOptions } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
 import { type BenefitsListContent } from '../../ui-kit/BenefitsList/BenefitsListContent';
 import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
-import { type ListContent } from '../../ui-kit/List/ListContent';
+import { type RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
 /**
@@ -19,13 +19,13 @@ import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 export type CarouselRecommendationCardContent = UniBlockContent &
   HeadlineCommonProps &
   AdditionalDescriptionProps &
-  ListContent &
   IconProps &
   LinkCommonProps &
   AspectsProps &
   BulletsProps &
   AlignProps &
-  BenefitsListContent & {
+  BenefitsListContent &
+  RichTextProps & {
     /** @title Соц сети */
     socialMedia?: LinkButtonContent[];
     imageOptions?: TileImageOptions;

package/src/components/CarouselTariffsCard/CarouselTariffsCard.example.json

@@ -8,14 +8,6 @@
       "target": "_self",
       "version": "secondary"
     },
-    "icon": {
-      "icon": "",
-      "format": "webp",
-      "size": {
-        "width": 267,
-        "height": 73
-      }
-    },
     "isHighlighting": false,
     "cardCells": [
       {
@@ -39,6 +31,7 @@
         ]
       }
     ],
-    "align": "text-center"
+    "align": "text-center",
+    "visibleCellsCount": 1
   }
 }

package/src/components/CarouselTariffsCard/CarouselTariffsCard.fixture.tsx

@@ -54,6 +54,7 @@ export const TARIFFS_CARD: CarouselTariffsCardContent = {
   icon: imageMonth,
   button: buttonSecondary,
   cardCells,
+  visibleCellsCount: 2,
 };
 
 export const TARIFFS_CARD_HIT: CarouselTariffsCardContent = {

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -18,9 +18,7 @@ import { style } from '../../utils/style';
 import { type CarouselTariffsCardContent } from './CarouselTariffsCardContent';
 import { renderCardInfo } from './renderCardInfo';
 
-export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {
-  visibleCellsCount?: number;
-}
+export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   ({
@@ -50,7 +48,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
             setIsVisible(event.isUnfolded);
           }
         }),
-      [],
+      [options?.parent],
     );
 
     return (
@@ -73,7 +71,9 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
               </div>
             )}
             renderFoldButton={
-              cardCells.length > 1 ? renderFoldButton(isVisible, options?.parent, data) : null
+              cardCells.length >= visibleCellsCount
+                ? renderFoldButton(isVisible, options?.parent, data)
+                : null
             }
           />
         ) : (

package/src/components/CarouselTariffsCard/CarouselTariffsCard.ui.json

@@ -16,6 +16,9 @@
           }
         }
       }
+    },
+    "visibleCellsCount": {
+      "ui:field": "number"
     }
   }
 }

package/src/components/CarouselTariffsCard/CarouselTariffsCardContent.ts

@@ -26,4 +26,6 @@ export type CarouselTariffsCardContent = UniBlockContent &
     button?: LinkButtonContent;
     /** @title Ячейка */
     cardCells?: TariffsCardCellProps[];
+    /** @title Показывать строк */
+    visibleCellsCount?: number;
   };

package/src/components/ContactsBlock/ContactsBlock.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type BlockVersion } from '../../model/BlockVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
@@ -13,7 +13,7 @@ export interface ContactsBlockProps extends ContactsBlockContent, UniBlockProps
 interface RenderContactsColumnProps {
   version?: BlockVersion;
   column?: ContactBlockProps[];
-  index?: number;
+  i?: number;
 }
 
 export const ContactsBlock = JSX<ContactsBlockProps>(
@@ -32,13 +32,13 @@ export const ContactsBlock = JSX<ContactsBlockProps>(
 
 const renderBlocks = (info: ContactBlockProps[][]) => (
   <div className="flex gap-5xl grow basis-0">
-    {info.map((column, index) => renderBlocksColumn({ column, index }))}
+    {info.map((column, i) => renderBlocksColumn({ column, i }))}
   </div>
 );
 
-const renderBlocksColumn = ({ column, index }: RenderContactsColumnProps) =>
+const renderBlocksColumn = ({ column, i }: RenderContactsColumnProps) =>
   column ? (
-    <div className="flex flex-col gap-xl grow basis-0" key={`col-${String(index)}`}>
+    <div className="flex flex-col gap-xl grow basis-0" key={`col-${String(i)}`}>
       {column.map(({ title = '', description, additionalDescription, button }, key) => (
         <div key={String(key)}>
           <Headline
@@ -55,7 +55,9 @@ const renderBlocksColumn = ({ column, index }: RenderContactsColumnProps) =>
               </Paragraph>
             </div>
           ) : null}
-          {button?.text ? <LinkButton className="mt-xl" {...button} /> : null}
+          <div className={style({ 'mt-xl': Boolean(button?.text) })}>
+            {renderButtonsSection([button])}
+          </div>
         </div>
       ))}
     </div>

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

@@ -4,13 +4,12 @@ import '../../setup-fixture';
 import { type ContentPageDef } from '../../model/ContentPageDef';
 import { Blocks } from '../Blocks';
 import { ContentPage } from './ContentPage';
-import { normalizePage } from './normalizePage';
 import { useContentPageData } from './useContentPageData';
 
 export default {
   default: () => {
     const data = useContentPageData(Blocks);
 
-    return <ContentPage blocksRegistry={Blocks} data={normalizePage(data as ContentPageDef)} />;
+    return <ContentPage blocksRegistry={Blocks} data={data as ContentPageDef} />;
   },
 };

package/src/components/ContentPage/ContentPage.fixture.tsx

@@ -5,7 +5,6 @@ import { type BlockDecorator } from '../../model/BlockDecorator';
 import { type ContentPageDef } from '../../model/ContentPageDef';
 import { Blocks } from '../Blocks';
 import { ContentPage } from './ContentPage';
-import { normalizePage } from './normalizePage';
 import { useContentPageData } from './useContentPageData';
 
 const blockDecorator: BlockDecorator = ({ blockClassName, block, render }, i) => (
@@ -33,11 +32,7 @@ export default {
     const data = useContentPageData(Blocks);
 
     return (
-      <ContentPage
-        className="bg-main"
-        blocksRegistry={Blocks}
-        data={normalizePage(data as ContentPageDef)}
-      />
+      <ContentPage className="bg-main" blocksRegistry={Blocks} data={data as ContentPageDef} />
     );
   },
   editor: () => {
@@ -48,7 +43,7 @@ export default {
         <ContentPage
           className="bg-transparent"
           blocksRegistry={Blocks}
-          data={normalizePage(data as ContentPageDef)}
+          data={data as ContentPageDef}
           blockDecorator={blockDecorator}
         />
       </div>

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

@@ -16,15 +16,22 @@
   },
   "jsonLd": "json",
   "style": ["bg-main-divider"],
-  "sitemap": {
-    "$ref": "/wcms-resources/sitemap.json"
+  "cookieContent": {
+    "$ref": "/wcms-resources/cookie-content.json"
+  },
+  "common": {
+    "$ref": "/wcms-resources/common.json"
+  },
+  "navigation": {
+    "$ref": "/wcms-resources/navigation.json"
   },
   "slots": {
     "header": [
       {
         "type": "Header",
         "content": {
-          "portal": { "$ref": "/portal-resources/portal-data.json" }
+          "portal": { "$ref": "/portal-resources/portal-data.json" },
+          "header": { "$ref": "/wcms-resources/header.json" }
         }
       }
     ],

package/src/components/ContentPage/ContentPage.tsx

@@ -67,11 +67,7 @@ export const ContentPage = JSX<ContentPageProps>(
         ) : null}
         <DialogManager />
         <PopupManager />
-        <CookiePopup
-          termLink={{ href: '/pd-policy#cookie', target: '_blank' }}
-          recommendationLink={{ href: '/recommendation', target: '_blank' }}
-          personalDataPolicyLink={{ href: '/pd-policy', target: '_blank' }}
-        />
+        <CookiePopup __html={resolvedPageContent?.cookieContent?.__html} />
       </div>
     );
   },

package/src/components/ContentPage/renderContentPageHead.tsx

@@ -15,9 +15,7 @@ export function renderContentPageHead(data: ContentPageBase & ContentPageMeta) {
     robots ? <meta key="robots" name="robots" content={robots.join(',')} /> : null,
     renderOpenGraph(og),
     renderTwitter(twitter),
-    canonical ? (
-      <link key="canonical" rel="canonical" href={applyCanonicalHref(canonical)} />
-    ) : null,
+    canonical ? <link key="canonical" rel="canonical" href={applyAbsoluteHref(canonical)} /> : null,
     jsonLd ? (
       <script key="jsonLd" type="application/ld+json">
         {jsonLd}
@@ -29,7 +27,11 @@ export function renderContentPageHead(data: ContentPageBase & ContentPageMeta) {
 function renderOpenGraph(og: Record<string, string> | undefined) {
   return og
     ? Object.entries(og).map(([key, value]) => (
-        <meta key={`og_${key}`} property={`og:${key}`} content={value} />
+        <meta
+          key={`og_${key}`}
+          property={`og:${key}`}
+          content={key === 'url' ? applyAbsoluteHref(value) : value}
+        />
       ))
     : null;
 }
@@ -42,6 +44,6 @@ function renderTwitter(twitter: Record<string, string> | undefined) {
     : null;
 }
 
-function applyCanonicalHref(href?: string) {
+function applyAbsoluteHref(href?: string) {
   return env.SITE_URL && href && !isURL(href) ? joinPath(env.SITE_URL, href) : href;
 }

package/src/components/DepositFiltration/DepositFiltration.example.json

@@ -58,6 +58,6 @@
       "title": "Нет подходящей программы",
       "description": "Попробуйте очистить фильтры"
     },
-    "blocksSection": { "view": "grid" }
+    "blocksSection": { "view": "grid", "label": "Заголовок" }
   }
 }

package/src/components/DepositFiltration/DepositFiltration.tsx

@@ -53,7 +53,7 @@ export const DepositFiltration = UniBlock<DepositFiltrationProps>(
           field={field}
           reset={reset}
         >
-          <div className="@4xl:max-w-xs">
+          <div className="@4xl:max-w-xs space-y-lg">
             <CurrencyInput
               label={sumInput?.title}
               min={DEFAULT_MIN_SUM}