@redneckz/wildless-cms-uni-blocks 0.8.24 → 0.8.26

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

@@ -73,7 +73,6 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
       <div
         className={style('box-border overflow-auto no-scrollbar', listType, className)}
         style={containerStyle}
-        role="list"
         ref={containerRef}
       >
         {mapChildren((child, idx) => (

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import {
-  useIntersectionObserver,
   type IntersectionObserverOptions,
+  useIntersectionObserver,
 } from '../../hooks/useIntersectionObserver';
 
 /**
@@ -33,7 +33,6 @@ export const SwipeListItem = JSX<SwipeListControlItemProps>(
       <div
         className={`inline-block snap-always box-border ${className}`}
         style={style}
-        role="listitem"
         aria-current={Boolean(idx === activeIndex)}
         ref={ref}
       >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.8.24",
+  "version": "0.8.26",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

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

@@ -5,7 +5,7 @@
   },
   "blocks": [
     {
-      "type": "AccordionItem",
+      "type": "RollupItem",
       "content": {
         "label": "Аккордеон 1",
         "isExpanded": true,
@@ -31,7 +31,7 @@
       ]
     },
     {
-      "type": "AccordionItem",
+      "type": "RollupItem",
       "content": {
         "label": "Аккордеон 2",
         "isExpanded": false,
@@ -41,7 +41,7 @@
       }
     },
     {
-      "type": "AccordionItem",
+      "type": "RollupItem",
       "content": {
         "label": "Аккордеон 3",
         "isExpanded": false,

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

@@ -5,10 +5,10 @@ import { Blocks } from '../Blocks';
 import { HEADLINE } from '../Headline/Headline.fixture';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
-import { Accordion } from './Accordion';
+import { VerticalLayout } from '../VerticalLayout/VerticalLayout';
 
-export const ACCORDION_ITEM: BlockDef = {
-  type: 'AccordionItem',
+export const ROLLUP_ITEM: BlockDef = {
+  type: 'RollupItem',
   content: {
     label: 'Accordion label 1',
     labelIcon: { icon: 'CardIcon' },
@@ -27,27 +27,36 @@ const options = {
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Accordion
+      <VerticalLayout
         className="col-span-12"
-        title="Accordion title"
-        description="Accordion description 2"
-        bordered={true}
         block={{
-          type: 'Accordion',
+          type: 'VerticalLayout',
           blocks: [
-            ACCORDION_ITEM,
             {
-              type: 'AccordionItem',
+              type: 'Headline',
+              content: {
+                title: 'Accordion title',
+                description: 'Accordion description 2',
+                headlineVersion: 'M',
+                align: 'text-center',
+              },
+            },
+            ROLLUP_ITEM,
+            {
+              type: 'RollupItem',
               content: { label: 'Accordion label 2', isExpanded: true },
               blocks: [{ type: 'Headline', content: HEADLINE }],
             },
             {
-              type: 'AccordionItem',
+              type: 'RollupItem',
               content: { label: 'Accordion label 3', isExpanded: true },
               blocks: [{ type: 'LinkDocs', content: { ...linkDocsContentExample, title: '' } }],
             },
           ],
         }}
+        version="primary"
+        isInnerPadding={false}
+        isPadding={true}
         options={options}
       />
     </div>

package/src/components/Accordion/Accordion.fixture.tsx

@@ -1,5 +1,4 @@
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
-import type { BlockDef } from '../../model/ContentPageDef';
 import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { HEADLINE } from '../Headline/Headline.fixture';
@@ -8,16 +7,7 @@ import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
 import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import { TILE } from '../Tile/Tile.fixture';
-import { Accordion } from './Accordion';
-
-export const ACCORDION_ITEM: BlockDef = {
-  type: 'AccordionItem',
-  content: { label: 'Accordion label 1', isExpanded: true },
-  blocks: [
-    { type: 'TextBlock', content: TEXT_BLOCK },
-    { type: 'TextBlock', content: TEXT_BLOCK },
-  ],
-};
+import { VerticalLayout } from '../VerticalLayout/VerticalLayout';
 
 const options = {
   blocksRegistry: Blocks,
@@ -26,31 +16,47 @@ const options = {
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Accordion
+      <VerticalLayout
         className="col-span-12"
-        title="Accordion title"
-        description="Accordion description"
+        version="primary"
+        isInnerPadding={false}
+        isPadding={true}
         block={{
-          type: 'Accordion',
+          type: 'VerticalLayout',
           blocks: [
-            ACCORDION_ITEM,
             {
-              type: 'AccordionItem',
+              type: 'Headline',
+              content: {
+                title: 'Accordion title',
+                description: 'Accordion description',
+                headlineVersion: 'M',
+              },
+            },
+            {
+              type: 'RollupItem',
+              content: { label: 'Accordion label 1', isExpanded: true },
+              blocks: [
+                { type: 'TextBlock', content: TEXT_BLOCK },
+                { type: 'TextBlock', content: TEXT_BLOCK },
+              ],
+            },
+            {
+              type: 'RollupItem',
               content: { label: 'Accordion label 2', isExpanded: true },
               blocks: [{ type: 'PictureText', content: PICTURE_TEXT }],
             },
             {
-              type: 'AccordionItem',
+              type: 'RollupItem',
               content: { label: 'Accordion label 3', isExpanded: true },
               blocks: [{ type: 'Headline', content: HEADLINE }],
             },
             {
-              type: 'AccordionItem',
+              type: 'RollupItem',
               content: { label: 'Accordion label 4' },
               blocks: [{ type: 'LinkDocs', content: { ...linkDocsContentExample, title: '' } }],
             },
             {
-              type: 'AccordionItem',
+              type: 'RollupItem',
               content: { label: 'Accordion label 5' },
               blocks: [
                 { type: 'Tile', content: TILE, style: ['col-span-6'] },
@@ -58,7 +64,7 @@ export default {
               ],
             },
             {
-              type: 'AccordionItem',
+              type: 'RollupItem',
               content: { label: 'Accordion label 6' },
               blocks: [
                 { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
@@ -73,16 +79,22 @@ export default {
   ),
   'right-align-title': (
     <div className="container grid grid-cols-12">
-      <Accordion
+      <VerticalLayout
         className="col-span-12"
-        title="Accordion title"
-        accordionAlignTitle="right"
-        description="Accordion description"
         block={{
-          type: 'Accordion',
+          type: 'VerticalLayout',
           blocks: [
             {
-              type: 'AccordionItem',
+              type: 'Headline',
+              content: {
+                title: 'Accordion title',
+                description: 'Accordion description',
+                headlineVersion: 'M',
+                align: 'text-right',
+              },
+            },
+            {
+              type: 'RollupItem',
               content: { label: 'Accordion label 1', isExpanded: true },
               blocks: [
                 { type: 'TextBlock', content: TEXT_BLOCK },
@@ -91,6 +103,9 @@ export default {
             },
           ],
         }}
+        version="primary"
+        isInnerPadding={false}
+        isPadding={true}
         options={options}
       />
     </div>

package/src/components/Accordion/Accordion.mobile.tsx

@@ -5,7 +5,6 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import type { AccordionContent } from './AccordionContent';
-import { AccordionItemsList } from './AccordionItemsList';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
@@ -20,9 +19,9 @@ export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
           </Paragraph>
         </div>
       ) : null}
-      <AccordionItemsList>{renderChildren(rest)}</AccordionItemsList>
+      <div className="list-none m-0 p-0">{renderChildren(rest)}</div>
     </BlockWrapper>
   ),
 );
 
-Accordion.childrenTypes = ['AccordionItem'];
+Accordion.childrenTypes = ['Accordion'];

package/src/components/Accordion/Accordion.tsx

@@ -6,7 +6,6 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import type { AccordionContent } from './AccordionContent';
-import { AccordionItemsList } from './AccordionItemsList';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
@@ -26,9 +25,9 @@ export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
           <Paragraph size="text-l">{description}</Paragraph>
         </div>
       ) : null}
-      <AccordionItemsList>{renderChildren(rest)}</AccordionItemsList>
+      <div className="list-none m-0 p-0">{renderChildren(rest)}</div>
     </BlockWrapper>
   ),
 );
 
-Accordion.childrenTypes = ['AccordionItem'];
+Accordion.childrenTypes = ['Accordion'];

package/src/components/ApplicationForm/ApplicationFormAcquiring.tsx

@@ -61,13 +61,13 @@ export const ApplicationFormAcquiring = JSX<ApplicationFormsProps>((props) => {
   const onSubmit = async (e: PreventableEvent) => {
     e.preventDefault();
 
-    const PartnerComments = `Вид эквайринга=${acquiringType}/Онлайн касса=${onlineСheckout}/POS-терминал=${posTerminal}`;
+    const partnerComments = `Вид эквайринга=${acquiringType}/Онлайн касса=${onlineСheckout}/POS-терминал=${posTerminal}`;
 
     handleSubmit &&
       (await handleSubmit({
         typeForm: 'acqr',
         region: regions.find((_) => _.code === selectedRegion)?.name || '',
-        PartnerComments,
+        partnerComments,
         fullName,
         inn,
         name,

package/src/components/ApplicationForm/ApplicationFormCredit.tsx

@@ -65,7 +65,7 @@ export const ApplicationFormCredit = JSX<ApplicationFormsProps>((props) => {
   const onSubmit = async (e: PreventableEvent) => {
     e.preventDefault();
 
-    const PartnerComments = `Сумма=${amount}/Срок=${term}/Выручка=${annualRevenue}`;
+    const partnerComments = `Сумма=${amount}/Срок=${term}/Выручка=${annualRevenue}`;
 
     handleSubmit &&
       (await handleSubmit({
@@ -77,7 +77,7 @@ export const ApplicationFormCredit = JSX<ApplicationFormsProps>((props) => {
         mail,
         region: regions.find((_) => _.code === selectedRegion)?.name || '',
         department: branches.find((_) => _.branchCode === department)?.address || '',
-        PartnerComments,
+        partnerComments,
       }));
   };
 

package/src/components/ApplicationForm/ApplicationFormWed.tsx

@@ -54,7 +54,7 @@ export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
   const onSubmit = async (e: PreventableEvent) => {
     e.preventDefault();
 
-    const PartnerComments = `Валютный контроль=${currencyControl}/Документарные операции=${documentaryOperations}/Конверсионные операции=${conversionOperations}/Доп инф=${text}`;
+    const partnerComments = `Валютный контроль=${currencyControl}/Документарные операции=${documentaryOperations}/Конверсионные операции=${conversionOperations}/Доп инф=${text}`;
 
     handleSubmit &&
       (await handleSubmit({
@@ -63,7 +63,7 @@ export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
         name,
         phone,
         mail,
-        PartnerComments,
+        partnerComments,
       }));
   };
 

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -41,7 +41,7 @@ const renderStep = (benefit: BenefitBlockItemProps, i: number) => {
         />
       ) : null}
       {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
-      <div className="ml-5">
+      <div className="ml-5 h-full">
         {benefit?.label ? <Heading headingType="h6">{benefit.label}</Heading> : null}
         {renderDescription(description)}
       </div>

package/src/components/Blocks.mobile.ts

@@ -1,6 +1,5 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
 import { Accordion } from './Accordion/Accordion';
-import { AccordionItem } from './AccordionItem/AccordionItem';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Footer } from './Footer/Footer';
 import { Header } from './Header/Header';
@@ -10,13 +9,14 @@ import { LinkList } from './LinkList/LinkList';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
+import { RollupItem } from './RollupItem/RollupItem';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
+import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 
 export const Blocks: BlocksRegistry = {
   Accordion,
-  AccordionItem,
   ComparisonTable,
   Footer,
   Header,
@@ -25,8 +25,10 @@ export const Blocks: BlocksRegistry = {
   LinkList,
   MobileAppTile,
   ProductBlock,
+  RollupItem,
   StepsBlock,
   TariffsTable,
   TextBlock,
   Placeholder,
+  VerticalLayout,
 };

package/src/components/Blocks.ts

@@ -1,6 +1,5 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
 import { Accordion } from './Accordion/Accordion';
-import { AccordionItem } from './AccordionItem/AccordionItem';
 import { ApplicationForm } from './ApplicationForm/ApplicationForm';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
@@ -37,7 +36,6 @@ import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { OfficeMap } from './OfficeMap/OfficeMap';
 import { OfficeServicesBlock } from './OfficeServicesBlock/OfficeServicesBlock';
 import { OtherProducts } from './OtherProducts/OtherProducts';
-import { OtherProductsItem } from './OtherProductsItem/OtherProductsItem';
 import { ParagraphBlock } from './ParagraphBlock/ParagraphBlock';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
@@ -60,7 +58,6 @@ import { Video } from './Video/Video';
 
 export const Blocks: BlocksRegistry = {
   Accordion,
-  AccordionItem,
   ApplicationForm,
   BenefitsBlock,
   Bonus,
@@ -97,7 +94,6 @@ export const Blocks: BlocksRegistry = {
   OfficeMap,
   OfficeServicesBlock,
   OtherProducts,
-  OtherProductsItem,
   ParagraphBlock,
   PictureText,
   Placeholder,

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -9,6 +9,7 @@ import type {
   BonusBenefitsBlockContent,
   ColumnsCount,
 } from './BonusBenefitsBlockContent';
+import { style } from '../../utils/style';
 
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
@@ -40,10 +41,16 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
 
 const renderBonusBenefit = ({ icon, title, description }: BonusBenefit, i: number) => {
   return (
-    <div key={String(i)} className="flex flex-col items-center text-h6">
+    <div
+      key={String(i)}
+      className={style(
+        'flex flex-col items-center text-h6',
+        !description && !title ? 'justify-center' : '',
+      )}
+    >
       {title ? <span>{title}</span> : null}
-      {icon ? <Img image={icon} height="180" width="auto" className="h-[180px] w-auto" /> : null}
-      <div>{description ? <span>{description}</span> : null}</div>
+      {icon ? <Img image={icon} height="180" width="auto" className="w-auto" /> : null}
+      {description ? <span>{description}</span> : null}
     </div>
   );
 };

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.fixture.tsx

@@ -3,13 +3,13 @@ import { CarouselBankHistoryCard } from './CarouselBankHistoryCard';
 export const BANK_HISTORY_CARD = {
   title: '1796г.',
   description:
-    "Россельхозбанк стал одним из ключевых участников Приоритетного национального проекта 'Развитие АПК' основной целью которого было развитие агропромышленного сектора российской экономики и обеспечение продовольственной безопасности страны.",
+    "Россельхозбанк стал одним из ключевых участников Приоритетного национального проекта 'Развитие АПК' целью которого развитие агропромышленного сектора российской экономики",
 };
 
 export const ACTIVE_BANK_HISTORY_CARD = {
   title: '1796г.',
   description:
-    "Россельхозбанк стал одним из ключевых участников Приоритетного национального проекта 'Развитие АПК' основной целью которого было развитие агропромышленного сектора российской экономики и обеспечение продовольственной безопасности страны.",
+    "Россельхозбанк стал одним из ключевых участников Приоритетного национального проекта 'Развитие АПК' целью которого развитие агропромышленного сектора российской экономики",
   isActive: true,
 };
 

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -21,7 +21,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
       >
         <div className="flex flex-col max-w-96 pr-9 text-white text-xl-light">
           <Headline
-            className="p-0"
+            isPadding={false}
             title={title}
             description={description}
             as="h1"

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

@@ -1,16 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { projectSettings } from '../../ProjectSettings';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { projectSettings } from '../../ProjectSettings';
 import type { SitemapDataProps } from '../../services/sitemap/SitemapProps';
 import { useSWRResource } from '../../services/sitemap/useSWRResource';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import { AccordionItemsList } from '../Accordion/AccordionItemsList';
-import { AccordionItem } from '../AccordionItem/AccordionItem';
 import { LinkList } from '../LinkList/LinkList';
 import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
+import { RollupItem } from '../RollupItem/RollupItem';
 import { Contacts } from './Contacts';
 import type { FooterContent, SubMenuItem } from './FooterContent';
 import type { FooterDataProps } from './FooterDataProps';
@@ -28,15 +28,15 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
   return (
-    <footer className={`font-sans px-4 py-[26px] bg-white ${className}`}>
+    <BlockWrapper tag="footer" className={`px-4 py-[26px] ${className}`} {...rest}>
       <Contacts className="overflow-hidden" items={contacts} hasButton />
-      <AccordionItemsList>
+      <div className="m-0 p-0">
         {sitemap.topItems?.map((item, i) => (
-          <AccordionItem key={String(i)} label={item.text}>
+          <RollupItem key={String(i)} label={item?.text}>
             <LinkList documents={item.items} />
-          </AccordionItem>
+          </RollupItem>
         ))}
-      </AccordionItemsList>
+      </div>
       <div>{sitemap?.dispositions?.map(renderSubMenuItem)}</div>
       <MobileAppTile
         title="Мобильное приложение"
@@ -47,7 +47,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
       <SocialMedia className="pb-4" media={socialMedia} />
       <HorizontalNavigation title={horizontalNavigationTitle} links={relatedEnterprises} />
       <TextInformation links={documents} />
-    </footer>
+    </BlockWrapper>
   );
 });
 

package/src/components/Header/Header.mobile.tsx

@@ -12,9 +12,8 @@ import type { SitemapDataProps } from '../../services/sitemap/SitemapProps';
 import { useSWRResource } from '../../services/sitemap/useSWRResource';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import { AccordionItemsList } from '../Accordion/AccordionItemsList';
-import { AccordionItem } from '../AccordionItem/AccordionItem';
 import { LinkList } from '../LinkList/LinkList';
+import { RollupItem } from '../RollupItem/RollupItem';
 import { HeaderBurger } from './HeaderBurger';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderTop } from './HeaderTop';
@@ -65,13 +64,13 @@ export const Header = JSX<HeaderProps>(
             burgerSubMenu={dispositions}
             defaultLocation={defaultLocation}
           >
-            <AccordionItemsList>
+            <div className="list-none m-0 p-0">
               {topItems?.map((item, i) => (
-                <AccordionItem key={String(i)} label={item.text}>
+                <RollupItem key={String(i)} label={item.text}>
                   <LinkList documents={item.items} />
-                </AccordionItem>
+                </RollupItem>
               ))}
-            </AccordionItemsList>
+            </div>
           </HeaderBurger>
         ) : null}
       </BlockWrapper>

package/src/components/Headline/Headline.tsx

@@ -18,14 +18,17 @@ export const Headline = JSX<HeadlineProps>(
     headlineVersion = 'XL',
     align = 'text-center',
     as,
+    isPadding = true,
     ...rest
   }) => {
     const versionStyle = headlineVersionStyles[headlineVersion];
+    const paddingStyle = isPadding ? 'p-12' : '';
 
     return (
       <BlockWrapper
         className={style(
-          'flex flex-col p-12 group-data-secondary:bg-primary-main group-data-secondary:text-white',
+          'flex flex-col group-data-secondary:bg-primary-main group-data-secondary:text-white',
+          paddingStyle,
           versionStyle.wrapper,
           className,
         )}

package/src/components/Headline/HeadlineContent.ts

@@ -13,4 +13,6 @@ export type HeadlineContent = UniBlockContent &
     align?: TextAlign;
     /** @hidden */
     as?: HeadingTagType;
+  /** @title Внутренний отступ блока */
+  isPadding?: boolean;
   };

package/src/components/OtherProducts/OtherProducts.fixture.tsx

@@ -16,8 +16,8 @@ const options = {
 } as BlockRendererOptions;
 
 export const OTHER_PRODUCTS_ITEM: BlockDef = {
-  type: 'OtherProductsItem',
-  content: { label: 'OtherProducts №1 Tiles' },
+  type: 'RollupItem',
+  content: { label: 'OtherProducts №1 Tiles', version: 'secondary' },
   blocks: [
     { type: 'Tile', content: TILE_PREMIUM, style: ['col-span-6'] },
     { type: 'Tile', content: TILE_PREMIUM, style: ['col-span-6'] },
@@ -36,8 +36,9 @@ export default {
           blocks: [
             OTHER_PRODUCTS_ITEM,
             {
-              type: 'OtherProductsItem',
-              content: { label: 'OtherProducts №2 Product_Tiles' },
+              type: 'RollupItem',
+
+              content: { label: 'OtherProducts №2 Product_Tiles', version: 'secondary' },
               blocks: [
                 { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
                 { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
@@ -46,16 +47,16 @@ export default {
               ],
             },
             {
-              type: 'OtherProductsItem',
-              content: { label: 'OtherProducts №3 Product_Block' },
+              type: 'RollupItem',
+              content: { label: 'OtherProducts №3 Product_Block', version: 'secondary' },
               blocks: [
                 { type: 'ProductBlock', content: PRODUCT_BLOCK, style: ['col-span-6'] },
                 { type: 'ProductBlock', content: PRODUCT_BLOCK, style: ['col-span-6'] },
               ],
             },
             {
-              type: 'OtherProductsItem',
-              content: { label: 'OtherProducts №4 Text_Block' },
+              type: 'RollupItem',
+              content: { label: 'OtherProducts №4 Text_Block', version: 'secondary' },
               blocks: [
                 { type: 'TextBlock', content: TEXT_BLOCK },
                 { type: 'TextBlock', content: TEXT_BLOCK },
@@ -64,18 +65,18 @@ export default {
               ],
             },
             {
-              type: 'OtherProductsItem',
-              content: { label: 'OtherProducts №5 Picture_Text' },
+              type: 'RollupItem',
+              content: { label: 'OtherProducts №5 Picture_Text', version: 'secondary' },
               blocks: [{ type: 'PictureText', content: PICTURE_TEXT }],
             },
             {
-              type: 'OtherProductsItem',
-              content: { label: 'OtherProducts №6 Headline' },
+              type: 'RollupItem',
+              content: { label: 'OtherProducts №6 Headline', version: 'secondary' },
               blocks: [{ type: 'Headline', content: HEADLINE }],
             },
             {
-              type: 'OtherProductsItem',
-              content: { label: 'OtherProducts №7 Link_Docs' },
+              type: 'RollupItem',
+              content: { label: 'OtherProducts №7 Link_Docs', version: 'secondary' },
               blocks: [{ type: 'LinkDocs', content: linkDocsContentExample }],
             },
           ],