@redneckz/wildless-cms-uni-blocks 0.14.531 → 0.14.533

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

@@ -1,8 +1,15 @@
+import { type Picture } from '../../model/Picture';
 import '../../setup-fixture';
 
 import { StepsBlock } from './StepsBlock';
 import { type StepProps } from './StepsBlockContent';
 
+const percentImage: Picture = {
+  src: '3-6-percent.png',
+  format: 'webp',
+  alt: 'Ставка от 3,6% годовых',
+};
+
 const steps: StepProps[] = [
   {
     label: 'Заявка на кредит',
@@ -20,6 +27,36 @@ const steps: StepProps[] = [
   },
 ];
 
+const STEPS_WITH_ICONS: StepProps[] = [
+  {
+    label: 'В мобильном приложении или интернет-банке',
+    description: 'Для всех клиентов Россельхозбанка',
+    icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
+  },
+  {
+    label: 'Через Госуслуги',
+    description: 'При наличии данных в Единой биометрической системе',
+    icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
+  },
+  {
+    label: 'В офисах Россельхозбанка',
+    description: 'Откройте вклад',
+    image: percentImage,
+  },
+];
+
+const BUTTONS = [
+  { text: 'Войти в интернет-банк' },
+  { text: 'Оформить' },
+  { text: 'Офисы на карте' },
+];
+
+const STEPS_WITH_BUTTONS_AND_ICONS: StepProps[] = STEPS_WITH_ICONS.map((step, i) => ({
+  ...step,
+  button: BUTTONS[i],
+  stepVersion: 'primary',
+}));
+
 export default {
   primary: (
     <div className="container grid grid-cols-12">
@@ -27,7 +64,6 @@ export default {
         <StepsBlock
           title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
           description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
-          size="normal"
           steps={steps}
           stepVersion="gray"
           buttons={[
@@ -47,20 +83,25 @@ export default {
       <div className="col-span-12">
         <StepsBlock
           title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-          size="small"
           steps={steps}
           stepVersion="gray"
         />
       </div>
     </div>
   ),
+  'primary with button': (
+    <div className="container grid grid-cols-12">
+      <div className="col-span-12">
+        <StepsBlock steps={STEPS_WITH_BUTTONS_AND_ICONS} />
+      </div>
+    </div>
+  ),
   'primary with images': (
     <div className="container grid grid-cols-12">
       <div className="col-span-12">
         <StepsBlock
           title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
           description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
-          size="small"
           stepVersion="primary"
           steps={[
             {
@@ -90,7 +131,6 @@ export default {
       <div className="col-span-12">
         <StepsBlock
           title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-          size="small"
           steps={[
             {
               label: 'Заявка на кредит',
@@ -115,7 +155,6 @@ export default {
         <StepsBlock
           title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
           description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
-          size="normal"
           steps={steps}
           version="secondary"
           stepVersion="primary"
@@ -128,7 +167,6 @@ export default {
       <div className="col-span-12">
         <StepsBlock
           title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-          size="small"
           steps={steps}
           version="secondary"
           stepVersion="primary"
@@ -142,7 +180,6 @@ export default {
         <StepsBlock
           title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
           description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
-          size="small"
           steps={[
             {
               description: 'Оставьте онлайн-заявку на потребительский кредит',
@@ -173,7 +210,6 @@ export default {
       <div className="col-span-12">
         <StepsBlock
           title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-          size="small"
           steps={[
             {
               label: 'Заявка на кредит',

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -80,7 +80,6 @@ const STEPS_WITH_BUTTON_PROPS: StepsBlockProps = {
   })),
   title: TITLE,
   stepVersion: 'primary',
-  size: 'small',
   buttons: [
     { text: 'Оформить', version: 'primary' },
     { text: 'Оформить', version: 'primary' },

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -1,32 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type BlockVersion } from '../../model/BlockVersion';
-import { type SizeVersion } from '../../model/SizeVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Img } from '../../ui-kit/Img/Img';
 import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { RichText } from '../../ui-kit/RichText/RichText';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
-import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
-import { getIconTextStyle } from './getIconTextStyle';
-import { type StepProps, type StepsBlockContent } from './StepsBlockContent';
-import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
-
-type StepIconVersion = Record<'icon' | 'image', string>;
-
-const STEPS_SIZE_MAP: Record<SizeVersion, StepIconVersion> = {
-  normal: { icon: 'h-11 w-11', image: 'h-14 w-14' },
-  small: { icon: 'h-12 w-12', image: 'h-14 w-14' },
-};
-
-const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
-  normal: '',
-  small: 'min-h-6xl',
-};
-
-const styleMap = STEPS_BLOCK_STYLE;
+import { renderStepMobile } from './renderStepMobile';
+import { type StepsBlockContent } from './StepsBlockContent';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
@@ -35,102 +14,35 @@ export const StepsBlock = JSX<StepsBlockProps>(
     className = '',
     title,
     description,
-    steps,
+    steps = [],
     buttons,
-    size = 'normal',
     stepVersion = 'gray',
     version = 'primary',
     ...rest
-  }) => (
-    <BlockWrapper
-      className={style('box-border flex flex-col gap-xl', className)}
-      defaultPadding="p-6xl"
-      version={version}
-      {...rest}
-    >
-      <Headline
-        title={title}
-        description={description}
-        headlineVersion="M"
-        isEmbedded={true}
-        align="text-left"
-      />
-      {steps?.length ? (
-        <div className="box-border">
-          <div className="flex flex-col gap-6xl justify-between">
-            {steps.map(renderStep(size, stepVersion))}
-          </div>
-        </div>
-      ) : null}
-      {renderButtonsSection(buttons, { isVertical: true })}
-    </BlockWrapper>
-  ),
-);
-
-// TODO: Create universal function for this case
-const renderStep = (size: SizeVersion, stepVersion: BlockVersion) => (step: StepProps, i: number) =>
-  (
-    <div key={String(i)} className="contents">
-      <div className="flex flex-row items-center relative">
-        <div className="overflow-hidden flex flex-shrink-0 items-center">
-          {renderIconArea(size, stepVersion)(step, i)}
-        </div>
-        <div
-          className={style(
-            'flex flex-col justify-center h-fit',
-            STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size],
-          )}
-        >
-          {step.label ? (
-            <Paragraph size="text-l" align="text-left">
-              {step.label}
-            </Paragraph>
-          ) : null}
-          {step.description ? (
-            <div className={style('text-s font-light text-left', styleMap.description)}>
-              {step.description}
-            </div>
-          ) : null}
-          <RichText __html={step.__html} />
-        </div>
-      </div>
-    </div>
-  );
-
-const renderIconArea =
-  (size: SizeVersion, stepVersion: BlockVersion) => (step: StepProps, i: number) => {
-    const iconVersion = stepVersion === 'secondary' ? 'white' : 'color';
-    const isImg = Boolean(step?.icon?.src);
-    const iconAreaSize = STEPS_SIZE_MAP[size][isImg ? 'image' : 'icon'];
-    const containerVersion = isImg ? stepVersion === 'transparent' : stepVersion;
+  }) => {
+    const isBigSizeSteps = steps.length > 3;
 
     return (
       <BlockWrapper
-        className={style(iconAreaSize, 'z-10 mr-s flex justify-center content-center rounded-md')}
-        defaultPadding=""
-        version={containerVersion as BlockVersion}
+        className={style('box-border flex flex-col gap-xl', className)}
+        defaultPadding="p-6xl"
+        version={version}
+        {...rest}
       >
-        <span className="flex max-w-full max-h-full items-center justify-center">
-          {isIcon(step?.icon) ? (
-            <Img
-              image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
-              imageClassName="max-w-full max-h-full"
-              width={getIconSizeStyle(size)}
-              height={getIconSizeStyle(size)}
-            />
-          ) : (
-            <span
-              className={style(
-                'text-h4',
-                stepVersion === 'transparent' ? styleMap.iconText : getIconTextStyle(stepVersion),
-              )}
-            >
-              {i + 1}
-            </span>
-          )}
-        </span>
+        <Headline
+          title={title}
+          description={description}
+          headlineVersion="M"
+          isEmbedded={true}
+          align="text-left"
+        />
+        {steps?.length ? (
+          <div className="flex flex-col gap-6xl justify-between box-border">
+            {steps.map(renderStepMobile(isBigSizeSteps, version, stepVersion))}
+          </div>
+        ) : null}
+        {renderButtonsSection(buttons, { isVertical: true })}
       </BlockWrapper>
     );
-  };
-
-const getIconSizeStyle = (size: string) => (size === 'normal' ? '38' : '24');
+  },
+);

package/src/components/StepsBlock/StepsBlock.tsx

@@ -11,7 +11,7 @@ import { joinList } from '../../utils/joinList';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import { getIconTextStyle } from './getIconTextStyle';
-import { renderStep, STEP_BREAKPOINT } from './renderStep';
+import { renderStep } from './renderStep';
 import { type StepProps, type StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE, type StyleType } from './StepsBlockStyleMaps';
 
@@ -25,16 +25,13 @@ export const StepsBlock = JSX<StepsBlockProps>(
     className = '',
     description,
     showLines = true,
-    size = 'normal',
     steps = [],
     stepVersion = 'gray',
     title,
     version = 'primary',
     ...rest
   }) => {
-    const stepsLength = steps.length;
-
-    const shortGaps = stepsLength > 3;
+    const isBigSizeSteps = steps.length > 3;
 
     const styleMap = STEPS_BLOCK_STYLE;
 
@@ -42,9 +39,6 @@ export const StepsBlock = JSX<StepsBlockProps>(
 
     const isMobileMode = useMobileMode();
 
-    const paddingXNormal = stepsLength < STEP_BREAKPOINT ? 'px-24' : 'px-16';
-    const paddingXSmall = stepsLength < STEP_BREAKPOINT ? 'px-28' : 'px-20';
-
     return (
       <BlockWrapper
         className={style(
@@ -65,17 +59,12 @@ export const StepsBlock = JSX<StepsBlockProps>(
         />
         {steps?.length ? (
           <div className="box-border space-y-lg flex flex-col justify-center">
-            <div
-              className={style(
-                'flex items-center',
-                size === 'normal' ? paddingXNormal : paddingXSmall,
-              )}
-            >
+            <div className={style('flex items-center', isBigSizeSteps ? 'px-16' : 'px-24')}>
               {joinList(
                 <div className={style('h-0.5 w-full bg-secondary-light flex-1', lineOpacity)} />,
-              )(steps.map(renderStepIcon(styleMap, size, stepVersion)))}
+              )(steps.map(renderStepIcon(styleMap, isBigSizeSteps, stepVersion)))}
             </div>
-            <div className={style('flex justify-between', shortGaps ? 'gap-x-s' : 'gap-x-20')}>
+            <div className={style('flex justify-between', isBigSizeSteps ? 'gap-x-s' : 'gap-x-20')}>
               {steps.map(renderStep({ styleMap, version }))}
             </div>
           </div>
@@ -87,7 +76,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
 );
 
 const renderStepIcon =
-  (styleMap: StyleType, size: string, stepVersion: BlockVersion) =>
+  (styleMap: StyleType, stepsSize: boolean, stepVersion: BlockVersion) =>
   ({ icon }: StepProps, i: number) => {
     const iconVersion = stepVersion === 'secondary' ? 'white' : 'color';
 
@@ -96,7 +85,7 @@ const renderStepIcon =
         key={String(i)}
         defaultPadding=""
         className={`${getIconSizeStyle(
-          size,
+          stepsSize,
         )} flex justify-center items-center text-center rounded-full box-border z-10`}
         version={stepVersion}
       >
@@ -120,4 +109,4 @@ const renderStepIcon =
     );
   };
 
-const getIconSizeStyle = (size: string) => (size === 'normal' ? 'h-24 w-24' : 'h-16 w-16');
+const getIconSizeStyle = (stepsSize: boolean) => (stepsSize ? 'h-16 w-16' : 'h-24 w-24');

package/src/components/StepsBlock/StepsBlock.ui.json

@@ -18,6 +18,9 @@
         "icon": {
           "ui:field": "icon"
         },
+        "image": {
+          "ui:field": "picture"
+        },
         "button": {
           "href": {
             "ui:field": "attachmentHref"

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -2,7 +2,7 @@ import { type BlockVersion } from '../../model/BlockVersion';
 import { type BulletsProps } from '../../model/Bullets';
 import { type DescriptionProps, type LabelProps, type TitleProps } from '../../model/HeadlineType';
 import { type IconProps } from '../../model/Picture';
-import { type SizeVersion } from '../../model/SizeVersion';
+import { type ImageContent } from '../../ui-kit/Img/ImgProps';
 import { type ButtonsSectionContent } from '../../ui-kit/LinkButton/ButtonsSectionContent';
 import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
@@ -12,6 +12,7 @@ import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
  * @title Шаг
  */
 export type StepProps = DescriptionProps &
+  ImageContent &
   LabelProps &
   RichTextProps &
   IconProps &
@@ -34,10 +35,6 @@ export type StepsBlockContent = UniBlockContent &
      * @maxItems 5
      */
     steps?: StepProps[];
-    /**
-     * @title Тема шагов
-     */
+    /** @title Тема шагов */
     stepVersion?: BlockVersion;
-    /** @title Размер шагов */
-    size?: SizeVersion; // TODO: mobile content
   };

package/src/components/StepsBlock/renderStepMobile.tsx

@@ -0,0 +1,139 @@
+import { type BlockVersion } from '../../model/BlockVersion';
+import { type IconVersion } from '../../model/IconVersion';
+import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Img } from '../../ui-kit/Img/Img';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { isIcon } from '../../utils/isIcon';
+import { style } from '../../utils/style';
+import { getIconTextStyle } from './getIconTextStyle';
+import { type StepProps } from './StepsBlockContent';
+import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
+
+const styleMap = STEPS_BLOCK_STYLE;
+
+export const renderStepMobile =
+  (stepsSize: boolean, version: BlockVersion, stepVersion: BlockVersion) =>
+  (step: StepProps, i: number) => {
+    const { button, image } = step;
+
+    const styleStepMobile = button?.text && image?.src;
+
+    return (
+      <div key={String(i)} className="contents">
+        <div className={style('flex items-center relative', image?.src ? 'flex-col' : 'flex-row')}>
+          {image?.src ? renderText(step) : null}
+          <div className="overflow-hidden flex flex-shrink-0 items-center">
+            {renderIconArea(stepsSize, stepVersion)(step, i)}
+          </div>
+          <div
+            className={style('flex flex-col justify-center h-fit w-full', {
+              'min-h-6xl': stepsSize,
+            })}
+          >
+            {image?.src ? null : renderText(step)}
+            {styleStepMobile ? (
+              <LinkButton
+                className="box-border py-s w-full max-w-60 mt-lg"
+                version={version as LinkButtonVersion}
+                {...button}
+              >
+                {button?.text}
+              </LinkButton>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+const renderIconArea =
+  (stepsSize: boolean, stepVersion: BlockVersion) => (step: StepProps, i: number) => {
+    const iconVersion = stepVersion === 'secondary' ? 'white' : 'color';
+    const isImg = Boolean(step?.icon?.src);
+    const iconAreaSize = getIconAreaSize(stepsSize, isImg);
+    const containerVersion = isImg ? stepVersion === 'transparent' : stepVersion;
+    const isImgSrc = step.image?.src;
+
+    return (
+      <BlockWrapper
+        className={style(
+          { 'w-32': Boolean(isImgSrc) },
+          'z-10 mr-s flex justify-center content-center rounded-md',
+          !isImgSrc && iconAreaSize,
+        )}
+        defaultPadding=""
+        version={containerVersion as BlockVersion}
+      >
+        <div className="flex max-w-full max-h-full items-center justify-center">
+          {renderIcon({ step, iconVersion, i, stepVersion })}
+        </div>
+      </BlockWrapper>
+    );
+  };
+
+const renderText = (step: StepProps) => {
+  const visibleStyle = Boolean(step.button?.text && step.image?.src);
+
+  return (
+    <div
+      className={style({
+        'mb-lg w-full': visibleStyle,
+      })}
+    >
+      {step?.label ? (
+        <Paragraph size="text-l" align="text-left">
+          {step.label}
+        </Paragraph>
+      ) : null}
+      {step?.description ? (
+        <div className={style('text-s font-light text-left', styleMap.description)}>
+          {step.description}
+        </div>
+      ) : null}
+      <RichText __html={step.__html} />
+    </div>
+  );
+};
+
+const getIconAreaSize = (stepsSize: boolean, isImg: boolean) => {
+  return stepsSize && isImg ? 'h-14 w-14' : 'h-11 w-11';
+};
+
+const renderIcon = ({
+  step,
+  iconVersion,
+  i,
+  stepVersion,
+}: {
+  step: StepProps;
+  iconVersion: IconVersion;
+  i: number;
+  stepVersion: BlockVersion;
+}) => {
+  if (isIcon(step?.icon)) {
+    return (
+      <Img
+        image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
+        imageClassName="max-w-full max-h-full"
+        width="24"
+        height="24"
+      />
+    );
+  } else if (isIcon(step.image)) {
+    return <Img image={{ ...step.image, size: { width: 120, height: 120 } }} />;
+  }
+
+  return (
+    <span
+      className={style(
+        'text-h4',
+        stepVersion === 'transparent' ? styleMap.iconText : getIconTextStyle(stepVersion),
+      )}
+    >
+      {i + 1}
+    </span>
+  );
+};

package/src/components/StickyBottomMenu/StickyBottomMenuItem.tsx

@@ -11,23 +11,21 @@ interface StickyBottomMenuItemProps {
 }
 
 export const StickyBottomMenuItem = JSX<StickyBottomMenuItemProps>(
-  ({ isActive, item, onClick }) => {
-    return (
-      <div
-        className={style(
-          isActive ? 'text-primary-main' : 'text-primary-text',
-          `w-10 m-4 flex justify-center items-center flex-col text-xs cursor-pointer`,
-        )}
-        title={item?.title || ''}
-        onClick={onClick}
-      >
-        <Icon
-          className="w-6 h-6"
-          name={item?.icon?.icon}
-          iconVersion={isActive ? 'color' : 'black'}
-        />
-        {item?.title || ''}
-      </div>
-    );
-  },
+  ({ isActive, item, onClick }) => (
+    <div
+      className={style(
+        isActive ? 'text-primary-main' : 'text-primary-text',
+        `w-10 m-4 flex justify-center items-center flex-col text-xs cursor-pointer`,
+      )}
+      title={item?.title || ''}
+      onClick={onClick}
+    >
+      <Icon
+        className="w-6 h-6"
+        name={item?.icon?.icon}
+        iconVersion={isActive ? 'color' : 'black'}
+      />
+      {item?.title || ''}
+    </div>
+  ),
 );

package/src/components/TabsLayout/TabsLayout.tsx

@@ -91,7 +91,7 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
       >
         {renderTabsLayout({
           className: style({
-            'pb-1': Boolean(block?.slots) && tabsType === 'default',
+            'pb-1': block?.slots && tabsType === 'default',
             'sticky top-1 z-20': isSticky && !isEveryLink,
           }),
           items: getItems(tabs, tabsCounted),

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -26,25 +26,23 @@ export const TariffsTableCell = JSX<TariffsTableCellProps>(
     tableInner,
     openTableInnerIdx,
     setOpenTableInnerIdx,
-  }) => {
-    return (
-      <div className="w-80 flex-grow flex flex-col gap-m @4xl:gap-lg" role="cell">
-        {cells?.length
-          ? cells.map((_, i) => (
-              <RenderCellInner
-                key={String(i)}
-                cell={_}
-                fieldIdx={i}
-                rowIdx={rowIdx}
-                cellIdx={cellIdx}
-                setTableInner={setTableInner}
-                tableInner={tableInner}
-                openTableInnerIdx={openTableInnerIdx}
-                setOpenTableInnerIdx={setOpenTableInnerIdx}
-              />
-            ))
-          : null}
-      </div>
-    );
-  },
+  }) => (
+    <div className="w-80 flex-grow flex flex-col gap-m @4xl:gap-lg" role="cell">
+      {cells?.length
+        ? cells.map((_, i) => (
+            <RenderCellInner
+              key={String(i)}
+              cell={_}
+              fieldIdx={i}
+              rowIdx={rowIdx}
+              cellIdx={cellIdx}
+              setTableInner={setTableInner}
+              tableInner={tableInner}
+              openTableInnerIdx={openTableInnerIdx}
+              setOpenTableInnerIdx={setOpenTableInnerIdx}
+            />
+          ))
+        : null}
+    </div>
+  ),
 );

package/src/ui-kit/BaseFiltration/renderGridBlocks.tsx

@@ -27,7 +27,7 @@ export const renderGridBlocks = ({
       : [blocksToRender, []];
 
   return (
-    <div className={style('space-y-2xs', blocksToRender.length ? '' : 'hidden')}>
+    <div className={style('space-y-2xs', { hidden: !blocksToRender.length })}>
       <div className={style(resultsGridStyle)}>
         {renderBlocksList(visibleBlocks, { ...rest.options, parent: block })}
         {isOdd(visibleBlocks.length) ? <AdTile className="col-span-6" {...rest} /> : null}
@@ -41,7 +41,7 @@ export const renderGridBlocks = ({
         )}
         renderFoldButton={({ isUnfolded, onToggle }) => (
           <DefaultFoldButton
-            className={style(topItemsCount < 1 ? 'hidden' : '')}
+            className={style({ hidden: topItemsCount < 1 })}
             disabled={!hiddenBlocks?.length}
             label={label}
             icon={ICONS[Number(isUnfolded)]}