@redneckz/wildless-cms-uni-blocks 0.6.32 → 0.6.34

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

@@ -21,7 +21,7 @@ import { TextInformation } from './TextInformation';
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
 export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
-  const fallback = rest.page?.fallback;
+  const fallback = rest.options?.page?.fallback;
 
   const sitemap = useSWRResource<SitemapDataProps>(projectSettings.SITEMAP || 'sitemap', fallback);
   const { documents, relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } =
@@ -32,8 +32,8 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
       <Contacts className="overflow-hidden" items={contacts} hasButton />
       <AccordionItemsList>
         {sitemap.topItems?.map((item, i) => (
-          <AccordionItem key={String(i)} label={item.text} {...rest}>
-            <LinkList documents={item.items} {...rest} />
+          <AccordionItem key={String(i)} label={item.text}>
+            <LinkList documents={item.items} />
           </AccordionItem>
         ))}
       </AccordionItemsList>

package/mobile/src/components/Gallery/GalleryCardInner.tsx

@@ -5,9 +5,9 @@ import type { Picture } from '../../model/Picture';
 import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export const GalleryCardInner = JSX<GalleryCardProps>(
   ({
@@ -21,20 +21,18 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
     version,
     isDotted = true,
     align = 'center',
-  }) => {
-    return (
-      <div className={`h-full flex flex-col justify-between ${AlignText[align]}`}>
-        <div className="flex flex-col h-full">
-          {renderImage(icon, version)}
-          {renderCardTitle(headlineSmallVersion, title)}
-          {renderDescription(description, title)}
-          {items?.length ? renderItems(items, isDotted, version) : null}
-          {renderAdditionalDescription(additionalDescription)}
-        </div>
-        {button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : null}
+  }) => (
+    <div className={`h-full flex flex-col justify-between ${AlignText[align]}`}>
+      <div className="flex flex-col h-full">
+        {renderImage(icon, version)}
+        {renderCardTitle(headlineSmallVersion, title)}
+        {renderDescription(description, title)}
+        {items?.length ? renderItems(items, isDotted, version) : null}
+        {renderAdditionalDescription(additionalDescription)}
       </div>
-    );
-  },
+      {button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : null}
+    </div>
+  ),
 );
 
 const renderImage = (image?: Picture, version?: BlockVersion) => (

package/mobile/src/components/Gallery/GalleryContainer.tsx

@@ -8,7 +8,7 @@ import type { GalleryCardProps } from './GalleryContent';
 import type { GalleryInnerProps } from './GalleryInner';
 
 export interface GalleryContainerProps extends GalleryInnerProps {
-  activeCardIndex: number;
+  activeIndex: number;
 }
 
 export interface GalleryCardData {
@@ -17,22 +17,20 @@ export interface GalleryCardData {
 }
 
 export const GalleryContainer = JSX<GalleryContainerProps>(
-  ({ headlineVersion = 'M', cards = [], version = 'normal', activeCardIndex, ...rest }) => {
-    return (
-      <div>
-        <Headline {...rest} className="!p-0" headlineVersion={headlineVersion} align="center" />
-        <div
-          className={`flex mt-8 ${
-            cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''
-          } duration-1000`}
-          style={{ transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }}
-          role="list"
-        >
-          {cards?.map((card, i) => renderCard({ card, version }, i))}
-        </div>
+  ({ headlineVersion = 'M', cards = [], version = 'normal', activeIndex, ...rest }) => (
+    <div>
+      <Headline {...rest} className="!p-0" headlineVersion={headlineVersion} align="center" />
+      <div
+        className={`flex mt-8 ${
+          cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''
+        } duration-1000`}
+        style={{ transform: `translateX(-${activeIndex * cardWidthMap[version]}px)` }}
+        role="list"
+      >
+        {cards?.map((card, i) => renderCard({ card, version }, i))}
       </div>
-    );
-  },
+    </div>
+  ),
 );
 
 function renderCard({ card, version }: GalleryCardData, i: number) {

package/mobile/src/components/Gallery/GalleryInner.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { GalleryVersion } from '../../model/GalleryVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -15,37 +15,24 @@ export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
 
 export const GalleryInner = JSX<GalleryInnerProps>(
   ({ cards = [], className = '', version = 'normal', button, ...rest }) => {
-    const [activeCardIndex, setActiveCardIndex] = useState(0);
-
-    const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-    const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
-
-    const isGalleryScrollAvailable = cards?.length > galleryLengthForScrollMap[version];
-
-    const showNextButton =
-      isGalleryScrollAvailable &&
-      cards?.length - activeCardIndex > galleryLengthForScrollMap[version];
-
-    const showPrevButton = isGalleryScrollAvailable && activeCardIndex > 0;
+    const [activeIndex, controls] = useCarouselControls({
+      itemCount: cards?.length,
+      visibleItemCount: galleryLengthForScrollMap[version],
+    });
+    const { isScrollAvailable } = controls;
 
     return (
       <BlockWrapper
         className={`relative font-sans text-primary-text bg-white p-[42px] overflow-hidden flex flex-col ${className}`}
         {...rest}
       >
-        <GalleryContainer
-          cards={cards}
-          version={version}
-          activeCardIndex={activeCardIndex}
-          {...rest}
-        />
+        <GalleryContainer cards={cards} version={version} activeIndex={activeIndex} {...rest} />
         {renderArrows({
-          handler: [handlePrevClick, handleNextClick],
-          isShown: [showPrevButton, showNextButton],
+          ...controls,
           btnClass: ['left-8', 'right-8'],
           className: 'top-1/2',
         })}
-        {isGalleryScrollAvailable ? (
+        {isScrollAvailable ? (
           <div>
             <div className="absolute top-0 left-0 bottom-0 w-[82px] bg-opacity-from-white" />
             <div className="absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" />

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

@@ -21,8 +21,7 @@ export interface HeaderProps extends HeaderContent, UniBlockProps {}
 export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white', ...rest }) => {
   const router = useRouter();
 
-  const { page } = rest;
-  const fallback: Fallback | undefined = page?.fallback;
+  const fallback: Fallback | undefined = rest.options?.page?.fallback;
   const { topItems, dispositions, defaultLocation } = useSWRResource<SitemapDataProps>(
     projectSettings.SITEMAP || 'sitemap',
     fallback,
@@ -62,8 +61,8 @@ export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white',
         >
           <AccordionItemsList>
             {topItems?.map((item, i) => (
-              <AccordionItem key={String(i)} label={item.text} {...rest}>
-                <LinkList documents={item.items} {...rest} />
+              <AccordionItem key={String(i)} label={item.text}>
+                <LinkList documents={item.items} />
               </AccordionItem>
             ))}
           </AccordionItemsList>

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -13,58 +14,52 @@ export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTab
 }
 
 type InsuranceGalleryProps = {
-  tabsShift: number;
+  activeIndex: number;
   cards: CardItem[];
-  activeSlideIndex: number;
-  isLastShift: boolean;
-  setActiveSlideIndex: (index: number) => void;
+  selectedCardIndex: number;
+  onClick: (index: number) => void;
 };
 
 type InsuranceSlideProps = {
   slide: CardItem;
   i: number;
-  activeSlideIndex: number;
+  isActive: boolean;
   onClick: () => void;
 };
 
 export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
   ({ className = '', cards = [], button }) => {
-    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-    const [tabsShift, setTabsShift] = useState(0);
-
-    const handleNextClick = () => setTabsShift(tabsShift + 1);
-    const handlePrevClick = () => setTabsShift(tabsShift - 1);
-
-    const galleryLength = cards?.length ?? 0;
-
-    const isGalleryScrollAvailable = cards?.length > 2;
-    const showNextButton = isGalleryScrollAvailable && galleryLength > tabsShift + 2;
-    const isLastShift = galleryLength === tabsShift + 2;
-    const showPrevButton = tabsShift > 0;
-    const activeHref = cards[activeSlideIndex]?.href;
+    const [selectedCardIndex, setSelectedCardIndex] = useState(0);
+    const handleSelectedCardIndex = useCallback((_: number) => setSelectedCardIndex(_), []);
+    const galleryLength = cards.length;
+    const CARD_VIEW_COUNT = 2;
+    const [activeIndex, controls] = useCarouselControls({
+      itemCount: galleryLength,
+      visibleItemCount: CARD_VIEW_COUNT,
+    });
+    const { canDec, canInc } = controls;
+    const activeHref = cards[activeIndex]?.href;
 
     return (
       <section role="listitem" className={`min-w-full text-center ${className}`}>
         <div className="relative overflow-hidden">
           {galleryLength
             ? renderGallery({
-                tabsShift,
+                activeIndex,
                 cards,
-                activeSlideIndex,
-                isLastShift,
-                setActiveSlideIndex,
+                selectedCardIndex,
+                onClick: handleSelectedCardIndex,
               })
             : null}
           {renderArrows({
-            handler: [handlePrevClick, handleNextClick],
-            isShown: [showPrevButton, showNextButton],
+            ...controls,
             btnClass: ['left-[50px]', 'right-[50px]'],
             className: 'top-[62px]',
           })}
-          {showPrevButton ? (
+          {canDec ? (
             <div className="absolute top-0 left-0 h-full w-[136px] bg-opacity-from-white" />
           ) : null}
-          {showNextButton ? (
+          {canInc ? (
             <div className="absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" />
           ) : null}
         </div>
@@ -74,14 +69,8 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
   },
 );
 
-function renderGallery({
-  tabsShift,
-  cards,
-  activeSlideIndex,
-  isLastShift,
-  setActiveSlideIndex,
-}: InsuranceGalleryProps) {
-  const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
+function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: InsuranceGalleryProps) {
+  const tabsShiftWidth = activeIndex * 460;
   const cardsAlignStyle = cards.length > 2 ? 'justify-start' : 'justify-center';
 
   return (
@@ -94,8 +83,8 @@ function renderGallery({
           renderSlide({
             slide,
             i,
-            activeSlideIndex,
-            onClick: () => setActiveSlideIndex(i),
+            isActive: Boolean(i === selectedCardIndex),
+            onClick: () => onClick(i),
           }),
         )}
       </div>
@@ -103,10 +92,8 @@ function renderGallery({
   );
 }
 
-function renderSlide({ slide, i, activeSlideIndex, onClick }: InsuranceSlideProps) {
-  const isActiveBtn = i === activeSlideIndex;
-
-  const btnClassName = isActiveBtn
+function renderSlide({ slide, i, isActive, onClick }: InsuranceSlideProps) {
+  const btnClassName = isActive
     ? 'shadow-dark-blue/42 border-primary-main'
     : `ease-in duration-300 border-main-stroke`;
 
@@ -130,7 +117,7 @@ function renderSlide({ slide, i, activeSlideIndex, onClick }: InsuranceSlideProp
         {slide?.sum ? renderValueBlock('страховая сумма', slide.sum) : null}
         {slide?.fee ? renderValueBlock('страховой взнос', slide.fee) : null}
       </div>
-      {renderDoneIcon(isActiveBtn)}
+      {renderDoneIcon(isActive)}
     </button>
   );
 }

package/mobile/src/components/InvestmentGallery/InvestmentGallery.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
@@ -17,16 +17,14 @@ const CARD_FULL_VIEW_COUNT = 1;
 
 export interface InvestmentGalleryProps extends InvestmentGalleryContent, UniBlockProps {}
 
-interface NavButtonsProps {
-  cardsCount: number;
-  activeCardIndex: number;
-  setActiveCardIndex: (number: number) => void;
-}
-
 export const InvestmentGallery = JSX<InvestmentGalleryProps>(
   ({ cards = [], className = '', title, version = 'primary', ...rest }) => {
-    const [activeCardIndex, setActiveCardIndex] = useState(0);
-    const cardWidth = 525;
+    const cardWidth = 710;
+
+    const [activeIndex, controls] = useCarouselControls({
+      itemCount: cards.length,
+      visibleItemCount: CARD_FULL_VIEW_COUNT,
+    });
 
     return (
       <BlockWrapper
@@ -37,15 +35,15 @@ export const InvestmentGallery = JSX<InvestmentGalleryProps>(
         <div>
           <div
             className="flex duration-1000 gap-3.5"
-            style={{ transform: `translateX(-${activeCardIndex * cardWidth}px)` }}
+            style={{ transform: `translateX(-${activeIndex * cardWidth}px)` }}
             role="list"
           >
             {cards?.length ? cards.map(renderInvestmentGalleryCard(className, version)) : null}
           </div>
-          {renderNavButtons({
-            cardsCount: cards.length,
-            activeCardIndex,
-            setActiveCardIndex,
+          {renderArrows({
+            ...controls,
+            btnClass: ['left-8', 'right-8'],
+            className: 'top-1/2 mt-3',
           })}
         </div>
         <div
@@ -66,23 +64,3 @@ export const InvestmentGallery = JSX<InvestmentGalleryProps>(
 const renderInvestmentGalleryCard =
   (className: string, version?: BlockVersion) => (card: InvestmentGalleryCardTypes, i: number) =>
     <InvestmentGalleryCard key={String(i)} className={className} version={version} {...card} />;
-
-const renderNavButtons = ({ cardsCount, activeCardIndex, setActiveCardIndex }: NavButtonsProps) => {
-  const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
-  const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
-  const showPrevButton = isUseSlider && activeCardIndex > 0;
-
-  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
-
-  return (
-    <div>
-      {renderArrows({
-        handler: [handlePrevClick, handleNextClick],
-        isShown: [showPrevButton, showNextButton],
-        btnClass: ['left-8', 'right-8'],
-        className: 'top-1/2 mt-3',
-      })}
-    </div>
-  );
-};

package/mobile/src/components/InvestmentGallery/InvestmentGalleryCard.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { BorderVersionStyleMap } from '../../model/BorderVersion';
-import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -51,9 +50,9 @@ export const InvestmentGalleryCard = JSX<RecommendationCardProps>(
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
           <div className="flex flex-col justify-between">
             <div className="flex itens-center justify-between mb-4">
-              {description ? <Description className="text-h6" description={description} /> : null}
+              {description ? <span className="text-h6">{description}</span> : null}
               {additionalDescription ? (
-                <div className="text-m-light text-secondary-text"> {additionalDescription} </div>
+                <span className="text-m-light text-secondary-text"> {additionalDescription} </span>
               ) : null}
             </div>
             {cardList?.length ? (

package/mobile/src/components/OtherProducts/OtherProducts.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { OtherProductsContent } from './OtherProductsContent';
@@ -6,9 +7,9 @@ import type { OtherProductsContent } from './OtherProductsContent';
 export interface OtherProductsProps extends OtherProductsContent, UniBlockProps {}
 
 export const OtherProducts: JSXBlock<OtherProductsProps> = JSX<OtherProductsProps>(
-  ({ className = '', children, ...rest }) => (
+  ({ className = '', ...rest }) => (
     <BlockWrapper className={`font-sans text-primary-text ${className}`} {...rest}>
-      {children}
+      {renderChildren(rest)}
     </BlockWrapper>
   ),
 );

package/mobile/src/components/OtherProductsItem/OtherProductsItem.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { getParentBlockContent } from '../../model/getParentBlockContent';
+import { getParentBlockContent } from '../../BlockRenderer/getParentBlockContent';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
@@ -13,8 +14,8 @@ export interface OtherProductsItemProps extends OtherProductsItemContent, UniBlo
 const icons: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
 
 export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProductsItemProps>(
-  ({ className, page, ancestors, label = '', isUnfolded: unfoldedByDefault, children }) => {
-    const { colorPalette } = getParentBlockContent(ancestors, {} as OtherProductsContent);
+  ({ className, label = '', isUnfolded: unfoldedByDefault, ...rest }) => {
+    const { colorPalette } = getParentBlockContent(rest.options, {} as OtherProductsContent);
 
     return (
       <div className={`border-0 border-b border-solid border-main-divider ${className}`}>
@@ -26,7 +27,7 @@ export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProd
                 className="grid grid-cols-12 gap-1 border-box"
                 isUnfolded={isUnfolded}
               >
-                {children}
+                {renderChildren(rest)}
               </FoldableSection>
             </div>
           )}
@@ -34,7 +35,7 @@ export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProd
             <DefaultFoldButton
               label={label}
               icon={icons[Number(isUnfolded)]}
-              dataTheme={page?.colorPalette || colorPalette}
+              dataTheme={rest.options?.page?.colorPalette || colorPalette}
               onClick={onToggle}
             />
           )}

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,4 +1,5 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { Footnote } from '../../model/Footnote';
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { IconVersion } from '../../model/IconVersion';
 import type { LinkProps } from '../../model/LinkProps';
@@ -9,7 +10,8 @@ import type { ListContent } from '../../ui-kit/List/ListContent';
 
 export type ProductBlockInnerContent = HeadlineProps &
   ListContent &
-  ButtonContent & {
+  ButtonContent &
+  Footnote & {
     /**
      * @default {
      *   "format": "webp",

package/mobile/src/components/Recommendation/Recommendation.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { VersionStyleMap } from '../../model/BlockVersion';
 import { BorderVersionStyleMap } from '../../model/BorderVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
@@ -10,14 +10,17 @@ import { RecommendationCard } from './RecommendationCard';
 import type { RecommendationContent } from './RecommendationContent';
 
 const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
-const CARD_FULL_VIEW_COUNT = 2;
+const CARD_VIEW_COUNT = 2;
 const CARD_SHIFT = 525;
 
 export interface RecommendationProps extends RecommendationContent, UniBlockProps {}
 
 export const Recommendation = JSX<RecommendationProps>(
   ({ recommendations = [], className = '', title, version = 'primary', ...rest }) => {
-    const [activeCardIndex, setActiveCardIndex] = useState(0);
+    const [activeIndex, controls] = useCarouselControls({
+      itemCount: recommendations.length,
+      visibleItemCount: CARD_VIEW_COUNT,
+    });
 
     return (
       <BlockWrapper
@@ -28,10 +31,10 @@ export const Recommendation = JSX<RecommendationProps>(
         <div>
           <div
             className="flex duration-1000 gap-3.5"
-            style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
+            style={{ transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }}
             role="list"
           >
-            {recommendations?.length
+            {recommendations.length
               ? recommendations.map((card, i) => (
                   <RecommendationCard
                     key={String(i)}
@@ -42,10 +45,10 @@ export const Recommendation = JSX<RecommendationProps>(
                 ))
               : null}
           </div>
-          {renderNavButtons({
-            cardsCount: recommendations.length,
-            activeCardIndex,
-            setActiveCardIndex,
+          {renderArrows({
+            ...controls,
+            btnClass: ['left-8', 'right-8'],
+            className: 'top-1/2 mt-3',
           })}
         </div>
         <div
@@ -62,30 +65,3 @@ export const Recommendation = JSX<RecommendationProps>(
     );
   },
 );
-
-const renderNavButtons = ({
-  cardsCount,
-  activeCardIndex,
-  setActiveCardIndex,
-}: {
-  cardsCount: number;
-  activeCardIndex: number;
-  setActiveCardIndex: (index: number) => void;
-}) => {
-  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
-  const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
-  const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
-  const showPrevButton = isUseSlider && activeCardIndex > 0;
-
-  return (
-    <div>
-      {renderArrows({
-        handler: [handlePrevClick, handleNextClick],
-        isShown: [showPrevButton, showNextButton],
-        btnClass: ['left-8', 'right-8'],
-        className: 'top-1/2 mt-3',
-      })}
-    </div>
-  );
-};

package/mobile/src/components/Recommendation/RecommendationCard.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { renderButton } from '../../ui-kit/Button/ButtonSection';
-import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
@@ -30,7 +29,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
       >
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
           <div className="h-full flex flex-col justify-between">
-            {description ? <Description className="mb-2" description={description} /> : null}
+            {description ? <span className="mb-2">{description}</span> : null}
             {items?.length ? (
               <List
                 className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"

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

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { JSXBlock } from '../../model/JSXBlock';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
@@ -17,10 +18,10 @@ interface RollupFoldablePartProps extends FoldablePartProps {
 
 interface FoldButtonProps {
   label?: string;
-  icon: IconName;
+  icon?: IconName;
+  isUnfolded?: boolean;
   onClick?: () => void;
   onToggle?: () => void;
-  isUnfolded?: boolean;
 }
 
 export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
@@ -30,7 +31,7 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
     isExpanded,
     isFoldButtonOnTop = true,
     version = 'primary',
-    children,
+    ...rest
   }) => (
     <div className={`border-b border-solid border-main-divider w-full ${className}`}>
       <Foldable
@@ -42,7 +43,7 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
               className={`grid grid-cols-12 gap-1 border-box`}
               isUnfolded={isUnfolded}
             >
-              {children}
+              {renderChildren(rest)}
             </FoldableSection>
           </div>
         )}
@@ -57,18 +58,19 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
 RollupItem.childrenTypes = [];
 
 const renderFoldButton = ({ isUnfolded, onToggle, label, version }: RollupFoldablePartProps) => {
-  const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
+  const iconsPrimary: IconName[] = ['PlusIcon', 'MinusIcon'];
+  const iconsSecondary: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
   const labels = label ? [label, label] : ['Развернуть', 'Скрыть'];
 
   return version === 'primary' ? (
     <FoldButton
-      icon={icons[Number(isUnfolded)]}
+      icon={iconsPrimary[Number(isUnfolded)]}
       label={labels[Number(isUnfolded)]}
       onClick={onToggle}
     />
   ) : (
     <DefaultFoldButton
-      icon={icons[Number(isUnfolded)]}
+      icon={iconsSecondary[Number(isUnfolded)]}
       label={labels[Number(isUnfolded)]}
       onClick={onToggle}
     />