@redneckz/wildless-cms-uni-blocks 0.6.28 → 0.6.30

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

@@ -18,59 +18,57 @@ import { HeaderTop } from './HeaderTop';
 
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
-export const Header = JSX<HeaderProps>(
-  ({ className = '', defaultLocation, bgColor = 'bg-white', ...rest }) => {
-    const router = useRouter();
+export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white', ...rest }) => {
+  const router = useRouter();
 
-    const { page } = rest;
-    const fallback: Fallback | undefined = page?.fallback;
-    const { topItems, dispositions } = useSWRResource<SitemapDataProps>(
-      projectSettings.SITEMAP || 'sitemap',
-      fallback,
-    );
+  const { page } = rest;
+  const fallback: Fallback | undefined = page?.fallback;
+  const { topItems, dispositions, defaultLocation } = useSWRResource<SitemapDataProps>(
+    projectSettings.SITEMAP || 'sitemap',
+    fallback,
+  );
 
-    const activeTopItem = topItems?.find(isTopItemActive(router));
-    const subItems = activeTopItem?.items;
-    const activeSubItem = findActiveSubItem(router)(subItems);
+  const activeTopItem = topItems?.find(isTopItemActive(router));
+  const subItems = activeTopItem?.items;
+  const activeSubItem = findActiveSubItem(router)(subItems);
 
-    const [burgerMenuShow, setBurgerMenuShow] = useState(false);
+  const [burgerMenuShow, setBurgerMenuShow] = useState(false);
 
-    const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
+  const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
 
-    return (
-      <header className={`${bgColor} ${className}`}>
-        <div className="container px-4 py-0 box-border">
-          <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
-          <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
-            <div className="flex no-scrollbar horizontal-list h-full items-center">
-              {subItems?.map((_, i) => (
-                <HeaderItem
-                  key={String(i)}
-                  className="mr-8 whitespace-nowrap text-s"
-                  active={_ === activeSubItem}
-                  bgColor={bgColor}
-                  {..._}
-                />
-              ))}
-            </div>
-          </nav>
-        </div>
-        {burgerMenuShow ? (
-          <HeaderBurger
-            onClick={toggleBurgerMenu}
-            burgerSubMenu={dispositions}
-            defaultLocation={defaultLocation}
-          >
-            <AccordionItemsList>
-              {topItems?.map((item, i) => (
-                <AccordionItem key={String(i)} label={item.text} {...rest}>
-                  <LinkList documents={item.items} {...rest} />
-                </AccordionItem>
-              ))}
-            </AccordionItemsList>
-          </HeaderBurger>
-        ) : null}
-      </header>
-    );
-  },
-);
+  return (
+    <header className={`${bgColor} ${className}`}>
+      <div className="container px-4 py-0 box-border">
+        <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
+        <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
+          <div className="flex no-scrollbar horizontal-list h-full items-center">
+            {subItems?.map((_, i) => (
+              <HeaderItem
+                key={String(i)}
+                className="mr-8 whitespace-nowrap text-s"
+                active={_ === activeSubItem}
+                bgColor={bgColor}
+                {..._}
+              />
+            ))}
+          </div>
+        </nav>
+      </div>
+      {burgerMenuShow ? (
+        <HeaderBurger
+          onClick={toggleBurgerMenu}
+          burgerSubMenu={dispositions}
+          defaultLocation={defaultLocation}
+        >
+          <AccordionItemsList>
+            {topItems?.map((item, i) => (
+              <AccordionItem key={String(i)} label={item.text} {...rest}>
+                <LinkList documents={item.items} {...rest} />
+              </AccordionItem>
+            ))}
+          </AccordionItemsList>
+        </HeaderBurger>
+      ) : null}
+    </header>
+  );
+});

package/src/components/Header/Header.tsx

@@ -22,17 +22,10 @@ const BORDER_COLORS: Record<BgColorVersion, string> = {
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
-  ({
-    bgColor = 'bg-white',
-    className = '',
-    defaultLocation = 'Москва',
-    logo,
-    showSubMenu = true,
-    ...rest
-  }) => {
+  ({ bgColor = 'bg-white', className = '', showSubMenu = true, ...rest }) => {
     const router = useRouter();
 
-    const { topItems } = useSWRResource<SitemapDataProps>(
+    const { topItems, logo, defaultLocation } = useSWRResource<SitemapDataProps>(
       projectSettings.SITEMAP || 'sitemap',
       rest.page?.fallback,
     );

package/src/components/Header/HeaderContent.ts

@@ -31,12 +31,6 @@ export interface Logo {
  * @required ["defaultLocation", "topItems"]
  */
 export interface HeaderContent {
-  logo?: Logo;
-  /**
-   * @title Город по-умолчанию
-   * @default Москва
-   */
-  defaultLocation?: string;
   /** @hidden */
   showSubMenu?: boolean;
   /** @hidden */

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -29,7 +29,7 @@ const LINKS_ICON_VERSION_MAP: Record<BgColorVersion, IconVersion> = {
 };
 
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({ className, defaultLocation = '', bgColor = 'bg-white' }) => {
+  ({ className, defaultLocation = 'Москва', bgColor = 'bg-white' }) => {
     const [city, getCity] = useGeolocation(defaultLocation);
 
     return (

package/src/components/MobileAppTile/MobileAppTile.example.json

@@ -8,10 +8,7 @@
         "height": 345
       }
     },
-    "qr": {
-      "src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAACkCAYAAAAZtYVBAAAAAXNSR0IArs4c6QAACp1JREFUeF7tndtuKzkMBJ3//+gssG8aA1MoNDXWcTqvlCiqWSI1vuXn9/f399W/KnCIAj8F8pBMNIz/FSiQBeEoBQrkUeloMAWyDBylQIE8Kh0NpkCWgaMUKJBHpaPBFMgycJQCBfKodDSYAlkGjlKgQB6VjgZTIMvAUQoUyKPS0WAKZBk4SoECeVQ6GkwM5M/Pz6Mq2o9vUnxXf9fxtB75T8U5Pb7r/kgv0qNAXj6fXCAJmXt7gQT9qIKdXoFOj68VUn7jokCefaW6Aj3estOS/Rbg5Y5q/adAUgOjeNIrQOrfrk/7nc5PgbwoQC2REpQCkyaYgCM77Y/s0/5bIeGhhhJSINcrAelBehbIAkmM3Nr/uQpJdzh6SqMNk386sbvnU7bpymDt9gpA+0/zQ/t//A65e8Pkv0Det1TSr0DKF6pJ0AJZIJdDRcCkJ5D8F8gC+VEgCcD0jkV3Ojpg9k5l47Xj6UDTfuiOb/e7/Sl794ZTQWi+tVMCbYIsYHb87vzY/RZIeCeoQK5IUYewHerrn7KtIBY4SkgrZPbrjl9XIalFpEClAFNLTeOn/ZF9en3y9/UVkgSwCaHx1l4g7zPUCgmfeLfAUQUtkAVyUYAAozsgAUf2AvlhIKmFkp0STPbdAFD89gDYA2HH24c+2p/VH/2lvzE+HRABRAkmwadfdyOBKd7p+bQe6UPx2PxofwXyXjJKMAn+9Hxar0BSxsBOFZjsdKIpPErwafMp3j8HJCUotVvBCdi/Zk/1p/kp8OMv+1DAqb1Aru+E2AOV6k/zC+Twe9HfDjwBldoLZIFcGKIDlQJH8z8OJAW4225fxqF4bELjBAz/NlIaD+mz2x7fIXcHSP4L5KpQgSRiNtsLZIHcjJhzXyAL5KLA0y872JZEwNKdMbVfj1ca/3Q87vi/XjZ+6z++QxbI+9cFC6RDskCG3wOnilUgC+TtlYIAsRW/QDrgaPR4haQFUyCu8y1AFJ+9I02vT/GRfqQPzZ++c9v9FMiLYgXy/hd3qSNY/d4O0PTnIe2JSDc4XaGsoNPrp/q1QoZvfRVIi6B73TFtwbbF2wM9XiGtnFRR6ISnG0792wQ/rQ+tZwuAzRetT/b4DkkLTANQIFdF6YCkFa5AXhTcLYj1TwCkB2Y6ngIJJTMVPE34dMWmhD/dQWi9tmxZ8aaBpYpGQNF8m2B7IGh9AjDdH/kfLxDpyz4UcJoA2jABbBNKgNkEPx0/5cPuz/qj8WQ/7qGGAEsBJ0Fswmh8gSTFLw9prZCrIARYK+S9Xg6/99HbKyRVvNROFdMKRBXN+rPjSQ/yR/OnrzDTehXIS4anBSaA6EDZeAokKG4FopZJCbIVgFqwBSodT3qRf5pv9UnzQfG+Hcjdd0grUCqAFbxA3iOT5uM4IKklWSAIOKqgNh4r6PR+yJ898E/7s/ptv0NaAAioAjn72z62Ak7r/3jLLpD3/yaDEvx0RZuuuK2Qly9tkSAWCPJHANkDSv6mAZr2Z/Xa3rLtBne3EIqHgLFXCtqPTdi0P1qf1iM9yP/jLZsAmLanFaVArgoUyPB70gXS1qQ/9rLPdAWkE1sg/ziQ9qFg+s4xK//rRQfItnTyR/rRASQ7HVDaj52f5iN+qCFBn95QLAj8Ii8lkAAhO+k1DTjth+JJ9R5/qCmQ6xfrCTiyEwAFEo5AgSyQk1VyvGVTBZi2WzGowlALozsw+Se7XZ8KAulN+qX7Jf/bWzYJMG3XGx6+I6YApQkvkJcM0InfbS+Q2Y9DkX7pgSH/rZCtkIqRfw5I27JIDaqo0+uRv91PvdZ/Oj6db69clO/xCkkJpROWzrcAk0DpnYwSRuvb+XZ8gQw/DkZAF0j3o/sFskBSUVzstuLZ8QUSPr2jsvXi/5NCLZcSQvHYivz0eNof6WMBpw5Gen78DkmC0AZIAOuf/D19x00BLpAXBUhQCwwJTMCkgJN/Apr0mPZPepH+rZBEzMVuASD35G8aGFovBbhADldIShgBQgBau60YBATFn+4/jTfVx84//g6ZJiQVhICilkfzC+R9huJP+1iBKaEF8v573NN6pwfY5ovWK5CgUNoCKWH2zlggIWFU8WwL2y34bsCwAsA/mrLxEfCpnrvjGb9DFkhCcLWTXrsBoIps7WnBKZDhO0e2IlGFooRagOl4WOB2H5ACWSAXBgg4stOBogPyOJBUUT5dAaxglADaT7qenU/6k7+0opL/Ahn+99oC6X6fskDCVxSmK5htaTZB6fhWyIuCJAgBQvPpoWE3MLv9F0ipgL1jkHtKMNmppdL6dj8UDx0oOpAU7/R+d69H/uN3amwCKSCbYEooAZFWWBsvrUf6kD3dL/lPDwD5L5AXhewBK5DuvfcCOfydnhTYVsh7JLdXyDQB1IIsINRy6ApAJ5zipfm0vq3I5I/iIb3sfBpfIMN3bqYTRgAVSECaKlQrJNWE1V4gwx5TIFegQjnfflKaKjDpT4C748JfQ7b+3gpW+s83SRAbIAlILYvWI2BoP7vtaUeh/ZOd9KH47PwCCU/du4Ej/5RwAiq1W6Dsfii+xx9qMKDhT1RTyyMAqCJP2yke0i+1F8iLgm3Z7iEnBdAeWDowFujxlj0tiPWXtgyab+02fgLCrm+BSP3TfKtH3LLtgtPjU0FovrWn+9t9BbAVzu7fHohWSLgipEAUyOy97VZI+YFeArZAfhhIeghJE0R3LNuCpsdTfLblpXrRgUnttN80/rhCFsg1BdMJtwlO16f5BfKiAF2aqSK1QrovaVHBoXzYA9UKGf7fGqoYdEAo4TahVOFSO+3Xxjv+lE2CxwFufuigBKXxpxXEAmvXS/1P53+8QlpBKOG0YWunE24TRPGneth47Hqpf9Kf9GmFhDupTRAJbgGhO+70ena/1FHi/Z728TNKiBWEBCd/BADZ4wTJX9qw65E+tqPY9R+vkLs3TC1j2j4NIOlDCab5FC/Z7YGleGm97XdIKxgJ8Gk7CWoTQvqQP5pP8ZKd9KYKSv5bIeFLXTYBaUIIqAIpkbYtkdwTEJ+22/hpfIFcFfrzLXsaGDqgdr3pA2gfGtN4aX5bdvhLFtSiC+Rhn/ahE00nhuZP2yke21ILZIFcmLLAFsifW/2sPvQQhv52vzBOFSZtgeQ/Fki+l273Q+MxgfKFc7teWvEp/q+/Q1rBSTBKiD0QdryNj8ZbfWj/dj0a/3VP2VZwFKgVMmrppG8rpFSIKoSteHY8hUv+aD5daWj/5N/at1dIG9DbiQk/QEuC03o2fvtQRUCRv7Qj0Pqpf6tfgbwoZhNECaMKQ+sVSIk0CS7dvQ23/u34Vsj1ZR/Kl+045O/xO6QNiAAhQQqke2GaKjR1gDS/24GcDpAEIQBTuz0gtJ7Vh/yR3cZP8dn1yF+BlB8/swmdThj5I7uNnwCy65G/AlkgFwboCjQNNAE6/pRNC6Z2euqcttuETFcQ8kd2Gz/lx65H/sYrpF2w46vAnQJxhay8VWBSgQI5qWZ9xQoUyFjCOphUoEBOqllfsQIFMpawDiYVKJCTatZXrECBjCWsg0kFCuSkmvUVK1AgYwnrYFKBAjmpZn3FChTIWMI6mFSgQE6qWV+xAgUylrAOJhUokJNq1lesQIGMJayDSQX+AzMMbwXyi0XeAAAAAElFTkSuQmCC",
-      "alt": "QR код"
-    },
+    "qr": null,
     "buttons": [
       {
         "aboveText": "Загрузите в",
@@ -32,6 +29,7 @@
     ],
     "title": "Мобильное приложение",
     "description": "Загрузить для IOS и Android",
-    "version": "primary"
+    "version": "primary",
+    "headingType": "h4"
   }
 }

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -48,7 +48,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
                 headingType={headingType}
                 as="h3"
                 title={title}
-                className={`whitespace-pre-wrap max-w-[509px] mb-6
+                className={`whitespace-pre-wrap mb-6 w-full
                   ${textColorClass} ${AlignText[alignTitle]}`}
               />
             ) : null

package/src/components/Recommendation/RecommendationCard.tsx

@@ -1,5 +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';
@@ -14,7 +15,7 @@ export interface RecommendationCardProps extends RecommendationCardTypes {
 }
 
 export const RecommendationCard = JSX<RecommendationCardProps>(
-  ({ className = '', title, description, items, image, version, socialMedia }) => {
+  ({ className = '', title, description, items, image, version, socialMedia, button }) => {
     const tileTitle = title ? (
       <Heading headingType="h5" as="h3" className="mb-3.5 z-10" title={title} />
     ) : null;
@@ -40,6 +41,9 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
             {socialMedia ? (
               <SocialMedia className="pt-10 pb-0" media={socialMedia} version={version} />
             ) : null}
+            {button?.text ? (
+              <div className="pt-2">{renderButton({ button, buttonClassName: 'mt-16' })}</div>
+            ) : null}
           </div>
         </BaseTile>
       </section>

package/src/components/Recommendation/RecommendationContent.ts

@@ -2,6 +2,7 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
 /**
@@ -33,6 +34,13 @@ export interface RecommendationCardTypes extends HeadlineCommonProps, ListConten
    * }
    */
   image?: Picture;
+  /**
+   * @default {
+   * "text": "",
+   * "version": "secondary"
+   * }
+   */
+  button?: ButtonProps;
 }
 
 /**

package/src/components/RollupItem/RollupItem.example.json

@@ -0,0 +1,23 @@
+{
+  "content": {
+    "label": "Сворачивающаяся секция 1",
+    "isExpanded": true,
+    "isFoldButtonOnTop": true
+  },
+  "blocks": [
+    {
+      "type": "Bonus",
+      "content": {
+        "title": "Заголовок",
+        "description": "Описание",
+        "bonusItems": [
+          {
+            "title": "Плитка 1",
+            "description": "Описание плитки 1"
+          }
+        ]
+      },
+      "style": ["col-span-12"]
+    }
+  ]
+}

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

@@ -0,0 +1,23 @@
+import { RollupItem } from '../RollupItem/RollupItem';
+import { TextBlock } from '../TextBlock/TextBlock';
+import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
+
+const TEXT_BLOCK_ACCORDION_BLOCK = <TextBlock className="col-span-12" {...TEXT_BLOCK} />;
+
+export default {
+  default: (
+    <RollupItem label="Rollup button 1">
+      {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
+    </RollupItem>
+  ),
+  secondary: (
+    <RollupItem label="Rollup button 2" version="secondary" isFoldButtonOnTop={false}>
+      {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
+    </RollupItem>
+  ),
+  'secondary default-open': (
+    <RollupItem isExpanded={true} version="secondary" label="Rollup button 2">
+      {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
+    </RollupItem>
+  ),
+};

package/src/components/RollupItem/RollupItem.tsx

@@ -0,0 +1,86 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { JSXBlock } from '../../model/JSXBlock';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { Img } from '../../ui-kit/Img/Img';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import type { RollupItemProps } from './RollupItemProps';
+
+interface RollupFoldablePartProps extends FoldablePartProps {
+  label?: string;
+  version?: BlockVersion;
+}
+
+interface FoldButtonProps {
+  label?: string;
+  icon: IconName;
+  onClick?: () => void;
+  onToggle?: () => void;
+  isUnfolded?: boolean;
+}
+
+export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
+  ({
+    className = '',
+    label = 'Развернуть',
+    isExpanded,
+    isFoldButtonOnTop = true,
+    version = 'primary',
+    children,
+  }) => (
+    <div className={`border-b border-solid border-main-divider w-full ${className}`}>
+      <Foldable
+        isFoldButtonOnTop={isFoldButtonOnTop}
+        unfoldedByDefault={isExpanded}
+        renderFoldableSection={({ isUnfolded }) => (
+          <div className="box-border">
+            <FoldableSection
+              className={`grid grid-cols-12 gap-1 border-box`}
+              isUnfolded={isUnfolded}
+            >
+              {children}
+            </FoldableSection>
+          </div>
+        )}
+        renderFoldButton={({ isUnfolded, onToggle }) =>
+          renderFoldButton({ isUnfolded, onToggle, label, version })
+        }
+      />
+    </div>
+  ),
+);
+
+RollupItem.childrenTypes = [];
+
+const renderFoldButton = ({ isUnfolded, onToggle, label, version }: RollupFoldablePartProps) => {
+  const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
+  const labels = label ? [label, label] : ['Развернуть', 'Скрыть'];
+
+  return version === 'primary' ? (
+    <FoldButton
+      icon={icons[Number(isUnfolded)]}
+      label={labels[Number(isUnfolded)]}
+      onClick={onToggle}
+    />
+  ) : (
+    <DefaultFoldButton
+      icon={icons[Number(isUnfolded)]}
+      label={labels[Number(isUnfolded)]}
+      onClick={onToggle}
+    />
+  );
+};
+
+const FoldButton = JSX<FoldButtonProps>(({ label, icon, onClick }) => (
+  <button
+    className="border-none bg-transparent px-9 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer"
+    onClick={onClick}
+  >
+    <span className="text-xl font-medium pr-2.5">{label}</span>
+    {icon ? <Img image={getIconWithVersion({ icon })} width="24" height="24" asSVG /> : null}
+  </button>
+));

package/src/components/RollupItem/RollupItem.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/RollupItem/RollupItemContent.ts

@@ -0,0 +1,13 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { LabelProps } from '../../model/HeadlineType';
+
+/**
+ * @title Сворачивающаяся секция
+ */
+export type RollupItemContent = LabelProps & {
+  /** @title Отображать в раскрытом виде */
+  isExpanded?: boolean;
+  /** @title Кнопка сверху */
+  isFoldButtonOnTop?: boolean;
+  version?: BlockVersion;
+};

package/src/components/RollupItem/RollupItemProps.ts

@@ -0,0 +1,4 @@
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { RollupItemContent } from './RollupItemContent';
+
+export interface RollupItemProps extends RollupItemContent, UniBlockProps {}

package/src/components/TariffsTable/TariffsTable.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useTableArrowScrollControl } from '../../hooks/useTableArrowScrollControl';
+import { useCarouselControl } from '../../hooks/useCarousel';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderDefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
@@ -11,9 +11,16 @@ import type { TableArrowScrollControlProps } from '../../ui-kit/TableArrowScroll
 import { COLS_LENGTH_FOR_SCROLL } from './constants';
 import type { TariffsTableContent } from './TariffsTableContent';
 import { TariffsTableRow } from './TariffsTableRow';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
+import type { Controls } from '../../hooks/useCarousel';
 
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
+interface WrapperProps {
+  controls: Controls;
+  isScrollAvailable: boolean;
+}
+
 export const TariffsTable = JSX<TariffsTableProps>(
   ({
     className = '',
@@ -32,17 +39,18 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
     const columnsLength = colData.length;
 
-    const tableArrowScrollControlProps = useTableArrowScrollControl({
-      columnsLength,
-      colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
+    const [activeIndex, controls] = useCarouselControl({
+      itemsCount: colData.length,
+      visibleItemCount: COLS_LENGTH_FOR_SCROLL,
     });
-    const { activeCardIndex } = tableArrowScrollControlProps;
+
+    const isScrollAvailable = colData.length > COLS_LENGTH_FOR_SCROLL;
 
     const rows = (rowData || []).map((row, i) => (
       <TariffsTableRow
         key={String(i)}
         row={row}
-        activeCardIndex={activeCardIndex}
+        activeCardIndex={activeIndex}
         rowIdx={i}
         {...rest}
       />
@@ -62,7 +70,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
         {hiddenRowsNum > 0 ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (
-              <Wrapper tableArrowScrollControlProps={tableArrowScrollControlProps}>
+              <Wrapper controls={controls} isScrollAvailable={isScrollAvailable}>
                 {visibleRows}
                 <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
               </Wrapper>
@@ -70,7 +78,9 @@ export const TariffsTable = JSX<TariffsTableProps>(
             renderFoldButton={renderDefaultFoldButton}
           />
         ) : (
-          <Wrapper tableArrowScrollControlProps={tableArrowScrollControlProps}>{rows}</Wrapper>
+          <Wrapper controls={controls} isScrollAvailable={isScrollAvailable}>
+            {rows}
+          </Wrapper>
         )}
       </BlockWrapper>
     );
@@ -91,16 +101,23 @@ function renderDescription(description?: string) {
   return description ? <div className="mb-9 text-center text-l">{description}</div> : null;
 }
 
-const Wrapper = JSX<{
-  tableArrowScrollControlProps: TableArrowScrollControlProps;
-}>(({ children, tableArrowScrollControlProps }) => {
-  const { isScrollAvailable } = tableArrowScrollControlProps;
+const Wrapper = JSX<WrapperProps>(({ children, controls, isScrollAvailable }) => {
+  const { inc, dec, canDec, canInc } = controls;
 
   return (
     <div role="table">
       <div className="relative">
         {children}
-        <TableArrowScrollControl {...tableArrowScrollControlProps} />
+        {isScrollAvailable ? (
+          <div>
+            {renderArrows({
+              handler: [inc, dec],
+              isShown: [canDec, canInc],
+              btnClass: ['top-[108px]', 'top-11'],
+              className: 'right-7',
+            })}
+          </div>
+        ) : null}
       </div>
       {isScrollAvailable ? (
         <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />

package/src/components/VerticalLayout/VerticalLayout.fixture.tsx

@@ -1,10 +1,23 @@
 import '../../react/setup-fixture';
+import { LinkDocs } from '../LinkDocs/LinkDocs';
+import { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
 import { ProductTile } from '../ProductTile/ProductTile';
 import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { RollupItem } from '../RollupItem/RollupItem';
+import { TextBlock } from '../TextBlock/TextBlock';
+import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import { VerticalLayout } from './VerticalLayout';
 
 const PRODUCT_TILES_OTHER_BLOCK = <ProductTile {...PRODUCT_TILE} />;
-
+const TEXT_BLOCK_ACCORDION_BLOCK = <TextBlock className="col-span-12" {...TEXT_BLOCK} />;
+export const linkDocsExample: LinkDocsContent = {
+  description: 'Ответы на часто задаваемые вопросы',
+  documents: [
+    { text: 'target self', href: '/abc1/cooldoc.doc', target: '_self' },
+    { text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },
+    { text: 'GlassIcon', href: '/abc3/map.jpeg' },
+  ],
+};
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -38,4 +51,36 @@ export default {
       </VerticalLayout>
     </div>
   ),
+  rollup: (
+    <div className="container grid grid-cols-12">
+      <VerticalLayout align="left" className="col-span-12" version="primary">
+        <RollupItem label="Rollup button 1">
+          {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
+        </RollupItem>
+        <RollupItem isExpanded={true} label="Rollup button 1">
+          <LinkDocs className="col-span-12" {...linkDocsExample} />
+        </RollupItem>
+      </VerticalLayout>
+    </div>
+  ),
+  'rollup secondary': (
+    <div className="container grid grid-cols-12">
+      <VerticalLayout gap="XS" align="left" version="transparent" className="col-span-12">
+        <RollupItem
+          label="Rollup button 1 with TEXT_BLOCK"
+          version="secondary"
+          isFoldButtonOnTop={false}
+        >
+          {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
+        </RollupItem>
+        <RollupItem
+          label="Rollup button 2 with TEXT_BLOCK"
+          version="secondary"
+          isFoldButtonOnTop={false}
+        >
+          {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
+        </RollupItem>
+      </VerticalLayout>
+    </div>
+  ),
 };

package/src/components/VerticalLayout/VerticalLayout.tsx

@@ -30,7 +30,7 @@ const backgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
 };
 
 export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutProps>(
-  ({ className = '', children, gap = '', align = 'left', version = 'primary', ...rest }) => (
+  ({ className = '', children, gap = '', align = 'left', version = 'transparent', ...rest }) => (
     <BlockWrapper
       className={[
         'flex flex-col',

package/src/hooks/useCarousel.ts

@@ -0,0 +1,55 @@
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+export type CarouselControlProps = [number, Controls];
+
+export interface Controls {
+  inc: () => void;
+  dec: () => void;
+  canInc: boolean;
+  canDec: boolean;
+}
+
+interface CarouselProps {
+  itemsCount: number;
+  visibleItemCount?: number;
+  isCyclic?: boolean;
+}
+
+export const useCarouselControl = ({
+  itemsCount,
+  visibleItemCount = itemsCount,
+  isCyclic,
+}: CarouselProps): Required<CarouselControlProps> => {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const inc = useCallback(
+    () =>
+      setActiveIndex((_) => (isCyclic ? (_ + 1) % itemsCount : Math.min(_ + 1, itemsCount - 1))),
+    [],
+  );
+
+  const dec = useCallback(
+    () =>
+      setActiveIndex((_) => (isCyclic ? (itemsCount + _ - 1) % itemsCount : Math.max(_ - 1, 0))),
+    [],
+  );
+
+  const isScrollAvailable = itemsCount > visibleItemCount;
+  const isCyclicAndScrollAvailable = isCyclic && isScrollAvailable;
+
+  const canInc =
+    isCyclicAndScrollAvailable ||
+    (isScrollAvailable && itemsCount - activeIndex > visibleItemCount);
+
+  const canDec = isCyclicAndScrollAvailable || Boolean(isScrollAvailable && activeIndex > 0);
+
+  return [
+    activeIndex,
+    {
+      inc,
+      dec,
+      canInc,
+      canDec,
+    },
+  ];
+};

package/src/icons/HeartIcon.svg

@@ -0,0 +1,3 @@
+<svg title="Сердце" width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.87565 3.66675C5.09122 3.66675 2.83398 5.92398 2.83398 8.70841C2.83398 13.7501 8.79232 18.3334 12.0007 19.3996C15.209 18.3334 21.1673 13.7501 21.1673 8.70841C21.1673 5.92398 18.9101 3.66675 16.1257 3.66675C14.4205 3.66675 12.9131 4.51324 12.0007 5.80893C11.0882 4.51324 9.5808 3.66675 7.87565 3.66675Z" fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/HuaweiIcon.svg

@@ -0,0 +1 @@
+<svg title="Лого «Huawei»" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.471 1.4c-5.177 0-7.07 1.894-7.07 7.07V19.53c0 5.176 1.893 7.07 7.07 7.07h11.055c5.177 0 7.074-1.894 7.074-7.07V8.47c0-5.176-1.893-7.07-7.07-7.07H8.47z" fill="#83B83E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.393 16.015h1.012l-.508-1.18-.504 1.18zm-.249.595-.3.687h-.683L12.614 14h.59l1.448 3.297h-.702l-.296-.687h-1.51zm10.997.685h.66V14h-.66v3.295zm-2.63-1.416h1.218v-.6h-1.217v-.676h1.767v-.6h-2.427v3.294h2.49v-.601h-1.83v-.817zm-2.623.39L17.138 14h-.546l-.748 2.269-.73-2.267h-.712l1.15 3.297h.554l.75-2.166.75 2.166h.56l1.146-3.297h-.694l-.73 2.267zm-7.736-.38c0 .536-.266.822-.75.822-.486 0-.754-.294-.754-.845v-1.864H7.98v1.886c0 .928.516 1.46 1.414 1.46.908 0 1.428-.542 1.428-1.487V14h-.669v1.888zM6.382 14h.669v3.3h-.67v-1.34h-1.51v1.34H4.2V14h.67v1.33h1.51V14zM14 9.8a4.205 4.205 0 0 1-4.2-4.2h.594a3.61 3.61 0 0 0 3.607 3.607 3.61 3.61 0 0 0 3.607-3.606h.593c0 2.316-1.884 4.2-4.2 4.2z" fill="#fff"/></svg>