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

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/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 }],
             },
           ],

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

@@ -0,0 +1,33 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { BlockDef } from '../../model/ContentPageDef';
+import { Blocks } from '../Blocks.mobile';
+
+import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture.mobile';
+import { RollupItem } from './RollupItem.mobile';
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
+
+export const ROLLUP_ITEM: BlockDef = {
+  type: 'RollupItem',
+  content: {
+    label: 'RollupItem label 1',
+    labelIcon: { icon: 'CardIcon' },
+    isExpanded: true,
+  },
+  blocks: [
+    { type: 'TextBlock', content: TEXT_BLOCK },
+    { type: 'TextBlock', content: TEXT_BLOCK },
+  ],
+};
+
+export default {
+  default: (
+    <div>
+      <div className="list-none m-0 p-0">
+        <RollupItem {...ROLLUP_ITEM.content} block={ROLLUP_ITEM} options={options} />
+      </div>
+    </div>
+  ),
+};

package/src/components/RollupItem/RollupItem.mobile.tsx

@@ -0,0 +1,143 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { getParentBlockContent } from '../../BlockRenderer/getParentBlockContent';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
+import type { IconName } from '../../icons/IconName';
+import { BlockVersion } from '../../model/BlockVersion';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { Picture } from '../../model/Picture';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { style } from '../../utils/style';
+import { AccordionContent } from '../Accordion/AccordionContent';
+import type { RollupItemContent } from './RollupItemContent';
+
+export interface RollupItemProps extends RollupItemContent, UniBlockProps {}
+
+export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
+  ({
+    className = '',
+    label = 'Развернуть',
+    isExpanded,
+    isFoldButtonOnTop = true,
+    version = 'primary',
+    ...rest
+  }) => {
+    const { bordered } = getParentBlockContent(rest.options, {} as AccordionContent);
+
+    return (
+      <BlockWrapper
+        className={style(
+          'border-b border-solid border-main-divider w-full',
+          bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0',
+          className,
+        )}
+        tag="div"
+        version="transparent"
+        {...rest}
+      >
+        <Foldable
+          isFoldButtonOnTop={isFoldButtonOnTop}
+          unfoldedByDefault={isExpanded}
+          renderFoldableSection={({ isUnfolded }) => (
+            <FoldableSection
+              className="flex flex-wrap group-last:last:pb-0 gap-5 [&>*]:p-0"
+              isUnfolded={isUnfolded}
+            >
+              {renderChildren(rest)}
+            </FoldableSection>
+          )}
+          renderFoldButton={({ isUnfolded, onToggle }) =>
+            renderFoldButton({ version, label, isUnfolded, onToggle })
+          }
+        />
+      </BlockWrapper>
+    );
+  },
+);
+
+RollupItem.childrenTypes = {
+  exclude: ['RollupItem', 'Accordion', 'OtherProducts'],
+};
+
+interface FoldButtonProps extends FoldablePartProps {
+  version?: BlockVersion;
+  label?: string;
+  className?: string;
+  primaryIcon?: Picture;
+}
+
+const renderFoldButton = ({
+  version,
+  label: defaultLabel,
+  isUnfolded,
+  onToggle,
+  className = '',
+  primaryIcon,
+}: FoldButtonProps) => {
+  const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
+
+  return version === 'primary' ? (
+    renderPrimaryFoldButton({
+      label,
+      icon: isUnfolded ? 'MinusIcon' : 'PlusIcon',
+      onToggle,
+      className,
+      primaryIcon,
+    })
+  ) : (
+    <DefaultFoldButton
+      label={label}
+      icon={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+      onClick={onToggle}
+    />
+  );
+};
+
+interface PrimaryFoldButtonProps {
+  label?: string;
+  icon?: IconName;
+  primaryIcon?: Picture;
+  onToggle?: () => void;
+  onClick?: () => void;
+  className?: string;
+}
+
+const renderPrimaryFoldButton = ({
+  label,
+  icon,
+  primaryIcon,
+  onToggle,
+}: PrimaryFoldButtonProps) => (
+  <button
+    className={`border-none bg-transparent flex justify-between text-left w-full text-primary-text group cursor-pointer py-3.5 px-0`}
+    onClick={onToggle}
+  >
+    <div className="flex group-hover:text-primary-main">
+      {primaryIcon ? (
+        <Img
+          image={{ ...getIconWithVersion({ ...primaryIcon } as Picture) }}
+          className="mr-3 flex-shrink-0"
+          width="24"
+          height="24"
+          asSVG
+        />
+      ) : null}
+      <Text size="text-m-title-xs" font="font-medium">
+        {label}
+      </Text>
+    </div>
+    <Img
+      className="flex-shrink-0"
+      image={{ ...getIconWithVersion({ icon: icon }) }}
+      width="24"
+      height="24"
+      asSVG
+    />
+  </button>
+);