@redneckz/wildless-cms-uni-blocks 0.14.752 → 0.14.754

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,15 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { type AspectsDef } from '../../model/AspectsProps';
+import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { IconButton } from '../../ui-kit/Button/IconButton';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
-import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { type CarouselTariffsCardContent } from './CarouselTariffsCardContent';
 import { carouselTariffsCardEventBus } from './carouselTariffsCardEventBus';
@@ -30,12 +28,15 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     data,
     ...rest
   }) => {
-    const cellsNode = cardCells.map(renderCardInfo);
+    const cellsNode = useMemo(() => cardCells.map(renderCardInfo), [cardCells]);
+    const [visibleCells, hiddenCells] = useMemo(
+      () =>
+        visibleCellsCount > 0
+          ? [cellsNode.slice(0, visibleCellsCount), cellsNode.slice(visibleCellsCount)]
+          : [cellsNode, []],
+      [visibleCellsCount, cellsNode],
+    );
 
-    const [visibleCells, hiddenCells] =
-      visibleCellsCount > 0
-        ? [cellsNode.slice(0, visibleCellsCount), cellsNode.slice(visibleCellsCount)]
-        : [cellsNode, []];
     const [isVisible, setIsVisible] = useState(false);
 
     useEffect(
@@ -58,11 +59,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
     return (
       <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-2xl" {...rest}>
-        {isIcon(icon) ? (
-          <div className="self-center">
-            <Img image={icon} />
-          </div>
-        ) : null}
+        <Img className="self-center" image={icon} />
         {title ? (
           <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
         ) : null}
@@ -74,7 +71,14 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
               <FoldableSection isUnfolded={isVisible}>{hiddenCells}</FoldableSection>
             </div>
             {cardCells.length >= visibleCellsCount ? (
-              <FoldButton isUnfolded={isVisible} data={data} onClick={handleFold} />
+              <DefaultFoldButton
+                className="w-full mt-m"
+                label={isVisible ? 'Скрыть' : 'Подробнее о тарифе'}
+                isUnfolded={isVisible}
+                embedded
+                data={data}
+                onClick={handleFold}
+              />
             ) : null}
           </Foldable>
         ) : (
@@ -84,15 +88,3 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     );
   },
 );
-
-const FoldButton = JSX<{ isUnfolded?: boolean; data?: AspectsDef[]; onClick?: () => void }>(
-  ({ data, isUnfolded, onClick }) => (
-    <IconButton
-      className="w-full"
-      {...(isUnfolded
-        ? { name: 'ArrowUpIcon', text: 'Скрыть', data }
-        : { name: 'ArrowDownIcon', text: 'Подробнее о тарифе' })}
-      onClick={onClick}
-    />
-  ),
-);

package/src/components/CreditCardForm/ReworkStatusContent.tsx

@@ -5,12 +5,15 @@ import { CreditCardFormStatus } from './CreditCardFormStatus';
 export const ReworkStatusContent = JSX(() => {
   const { statusInfo } = useRetailFormStore();
 
-  return (
-    <CreditCardFormStatus
-      title="Благодарим вас за ожидание, но нам требуется больше времени для принятия решения"
-      description="Посетите выбранное отделение банка с необходимыми документами и так завершите оформление кредита."
-      sectionAdditionalTitle="В отделении Банка"
-      sectionInfoAdditional={[
+  const isCourierDelivery = statusInfo?.methodObtain === 'courier';
+
+  const infoAdditional = isCourierDelivery
+    ? [
+        {
+          description: statusInfo?.deliveryAddress,
+        },
+      ]
+    : [
         {
           label: 'Регион',
           description: statusInfo?.regionRetail,
@@ -19,7 +22,18 @@ export const ReworkStatusContent = JSX(() => {
           label: 'Адрес',
           description: statusInfo?.addressRetail,
         },
-      ]}
+      ];
+
+  return (
+    <CreditCardFormStatus
+      title="Благодарим вас за ожидание, но нам требуется больше времени для принятия решения"
+      description={
+        isCourierDelivery
+          ? ''
+          : 'Посетите выбранное отделение банка с необходимыми документами и так завершите оформление кредита.'
+      }
+      sectionAdditionalTitle={isCourierDelivery ? 'Адрес доставки' : 'В отделении Банка'}
+      sectionInfoAdditional={infoAdditional}
       sectionInfo={[
         {
           label: 'Основные документы:',

package/src/components/CreditCardForm/StepsNavigationButtons.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
 
 export interface StepsNavigationButtonsProps {
   step: number;
@@ -17,9 +18,9 @@ export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
         <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
           Назад
         </Button>
-        <Button isLoading={isSending} type="submit">
+        <SubmitButton isLoading={isSending}>
           {isFinalStep ? 'Отправить заявку' : 'Далее'}
-        </Button>
+        </SubmitButton>
       </div>
     );
   },

package/src/components/CreditCardForm/useCreditCardFormAPI.tsx

@@ -36,6 +36,7 @@ export const useCreditCardFormAPI = ({
           deliveryAddress: leadForm?.addressCourier?.fullAddress,
           cardCategory: leadForm?.cardCategory?.text,
           deliveryDate: leadForm?.deliveryDate,
+          methodObtain: leadForm?.methodObtain,
         };
         retailFormStore.leadForm = initialState;
       }

package/src/components/CreditForm/StepsNavigationButtons.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
 
 export interface StepsNavigationButtonsProps {
   step: number;
@@ -17,9 +18,9 @@ export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
         <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
           Назад
         </Button>
-        <Button type="submit" isLoading={isSending}>
+        <SubmitButton isLoading={isSending}>
           {isFinalStep ? 'Отправить заявку' : 'Далее'}
-        </Button>
+        </SubmitButton>
       </div>
     );
   },

package/src/components/Depository/DepositoryItem.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { API_BASE_URI } from '../../api/apiBaseUrl';
 import { useLink } from '../../hooks/useLink';
+import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
 import { Text } from '../../ui-kit/Text/Text';
 import { formatDate } from '../../utils/formatDate';
-import { renderRoundedIcon } from '../RollupItem/renderRoundedIcon';
 import { type DepositoryDataItem } from './useDepository';
 
 export const DepositoryItem = JSX(({ title, timestamp, publicId }: DepositoryDataItem) => {
@@ -15,7 +15,7 @@ export const DepositoryItem = JSX(({ title, timestamp, publicId }: DepositoryDat
       className="flex gap-3 items-center py-lg border-gray border-opacity-50 border-b"
       key={publicId}
     >
-      {renderRoundedIcon({ icon: 'DocDownloadIcon', iconVersion: 'black' })}
+      <RoundedIcon className="shrink-0" icon="DocDownloadIcon" iconVersion="black" />
       <div className="flex flex-col gap-x-6xl lg:flex-row lg:items-center">
         {timestamp ? (
           <Text size="text-m" font-weight="font-light">

package/src/components/OfficesAtmsMap/FiltrationForm.tsx

@@ -1,12 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import { Button } from '../../ui-kit/Button/Button';
+import { ButtonTitle } from '../../ui-kit/Button/ButtonTitle';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+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 { Icon } from '../../ui-kit/Icon/Icon';
-import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 
 const COMMON_FILTERS_STYLES = 'flex flex-col sm:flex-row sm:flex-wrap gap-3xl pb-2xl';
 
@@ -43,7 +44,20 @@ export const FiltrationForm = JSX<RenderFiltrationFormProps>(
                   {hiddenFilters}
                 </FoldableSection>
               </div>
-              {renderFoldButton(reset, onlyOffice)({ isUnfolded, onToggle: toggle })}
+              <div className="flex space-x-lg">
+                {onlyOffice ? (
+                  <DefaultFoldButton
+                    label={isUnfolded ? 'Меньше фильтров' : 'Больше фильтров'}
+                    isUnfolded={isUnfolded}
+                    embedded
+                    onClick={toggle}
+                  />
+                ) : null}
+                <Button embedded onClick={reset}>
+                  <ButtonTitle>Очистить фильтр</ButtonTitle>
+                  <Icon name="CloseIcon" size="small" />
+                </Button>
+              </div>
             </Foldable>
           </div>
         ) : null}
@@ -51,29 +65,3 @@ export const FiltrationForm = JSX<RenderFiltrationFormProps>(
     );
   },
 );
-
-// TODO Столько разных кнопок с иконками, но эта самая творчески-ударённая реализация))
-export const renderFoldButton =
-  (reset: () => void, onlyOffice = false) =>
-  ({ isUnfolded, onToggle }: FoldablePartProps) =>
-    (
-      <div className="flex space-x-lg">
-        {onlyOffice ? (
-          <LinkButton
-            version="transparent"
-            className="text-secondary-text [&>*]:p-0"
-            appendRight={
-              <Icon name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'} width="16" height="16" />
-            }
-            text={isUnfolded ? 'Меньше фильтров' : 'Больше фильтров'}
-            onClick={onToggle}
-          />
-        ) : null}
-        <LinkButton version="transparent" className="text-secondary-text [&>*]:p-0" onClick={reset}>
-          <div className="flex items-center">
-            Очистить фильтр
-            <Icon name="CloseIcon" width="16" height="16" className="ml-2xs" />
-          </div>
-        </LinkButton>
-      </div>
-    );

package/src/components/OfficesAtmsMap/FoldableCardContent.tsx

@@ -1,16 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
-import { renderFoldButton } from './renderFoldButton';
 
 export const FoldableCardContent = JSX(({ children }) => {
   const [isUnfolded, { toggle }] = useBool(false);
 
   return (
-    <Foldable className="block sm:hidden">
-      <FoldableSection isUnfolded={isUnfolded}>{children}</FoldableSection>
-      {renderFoldButton({ isUnfolded, onToggle: toggle })}
-    </Foldable>
+    <div>
+      <div className="hidden sm:block">{children}</div>
+      <Foldable className="block sm:hidden">
+        <FoldableSection isUnfolded={isUnfolded}>{children}</FoldableSection>
+        <DefaultFoldButton
+          className="w-full my-m mr-m border-b border-solid border-main-divider"
+          label={isUnfolded ? 'Скрыть' : 'Подробнее'}
+          isUnfolded={isUnfolded}
+          embedded
+          onClick={toggle}
+        />
+      </Foldable>
+    </div>
   );
 });

package/src/components/OfficesAtmsMap/renderAtmCard.tsx

@@ -53,11 +53,12 @@ export const renderAtmCard = (
           <Badge color="green">{capitalize(workTime)}</Badge>
         </div>
       </div>
-      <div className="hidden sm:block">
-        <CardRow className="flex-wrap">{additionalInfo?.map(renderInfo)}</CardRow>
-      </div>
       <FoldableCardContent>
-        <CardRow className="flex-wrap">{additionalInfo?.map(renderInfo)}</CardRow>
+        <CardRow className="flex-wrap">
+          {additionalInfo?.map((item, key) => (
+            <CardCell key={String(key)} {...item} />
+          ))}
+        </CardRow>
       </FoldableCardContent>
     </div>
   );
@@ -69,5 +70,3 @@ export const getAtmPoint = ({ address = '', terminalType, atmCode = '' }: Atm) =
 
   return { header, body };
 };
-
-const renderInfo = (item: CardCellProps, i: number) => <CardCell key={String(i)} {...item} />;

package/src/components/OfficesAtmsMap/renderOfficeCard.tsx

@@ -33,7 +33,6 @@ export const renderOfficeCard = (branch: Branch, i: number) => {
         </div>
         {renderCurrentDaySchedule(workScheduleWeek)}
       </div>
-      <div className="hidden sm:block">{renderCardContent(branch)}</div>
       <FoldableCardContent>{renderCardContent(branch)}</FoldableCardContent>
     </div>
   );

package/src/components/OfficesAtmsMap/renderRemoteWorkplaceCard.tsx

@@ -26,7 +26,6 @@ export const renderRemoteWorkplaceCard = (
           ) : null}
         </div>
       </div>
-      <div className="hidden sm:block">{renderCardContent(workScheduleDescription)}</div>
       <FoldableCardContent>{renderCardContent(workScheduleDescription)}</FoldableCardContent>
     </div>
   );

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

@@ -2,7 +2,6 @@ import '../../setup-fixture';
 
 import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { type BlockDef } from '../../model/ContentPageDef';
-import { type Picture } from '../../model/Picture';
 import { Blocks } from '../Blocks.mobile';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture.mobile';
 import { RollupItem } from './RollupItem';
@@ -23,18 +22,10 @@ export const ROLLUP_ITEM: BlockDef = {
   ],
 };
 
-const labelIcon: Picture = { icon: 'BriefcaseIcon' };
-
 export default {
   default: (
     <div>
-      <RollupItem
-        {...ROLLUP_ITEM.content}
-        block={ROLLUP_ITEM}
-        labelIcon={labelIcon}
-        labelIconBgVersion="primary"
-        options={options}
-      />
+      <RollupItem {...ROLLUP_ITEM.content} block={ROLLUP_ITEM} options={options} />
       <RollupItem
         foldButtonVersion="accordion"
         {...ROLLUP_ITEM.content}
@@ -50,8 +41,6 @@ export default {
         isExpanded={true}
         foldButtonVersion="accordion"
         label="RollupItem label 1"
-        labelIcon={labelIcon}
-        labelIconBgVersion="primary"
         options={options}
       />
     </div>

package/src/components/RollupItem/RollupItem.tsx

@@ -1,24 +1,17 @@
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { useMobileMode } from '../../hooks/useMobileMode';
-import { type 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 { type IconBgVersion, type IconProps } from '../../ui-kit/Icon/IconProps';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
-import { AccordionFoldButton } from './AccordionFoldButton';
 import { getFoldableStyles } from './getFoldableStyles';
-import { getIconName } from './getIconName';
-import { type FoldButtonVersion, type RollupItemContent } from './RollupItemContent';
+import { type RollupItemContent } from './RollupItemContent';
 
 interface RollupItemProps extends RollupItemContent, UniBlockProps {
-  labelIcon?: Picture;
-  labelIconBgVersion?: IconBgVersion;
   role?: string;
 }
 
@@ -27,10 +20,8 @@ export const RollupItem = UniBlock<RollupItemProps>(
     className = '',
     isExpanded,
     isFoldButtonOnTop = true,
-    label = 'Развернуть',
-    labelIcon,
-    labelIconBgVersion,
     foldButtonVersion = 'default',
+    label,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     version,
     role,
@@ -51,15 +42,17 @@ export const RollupItem = UniBlock<RollupItemProps>(
         })}
       </FoldableSection>
     );
-    const foldButton = renderFoldButton({
-      foldButtonVersion,
-      label,
-      labelIcon,
-      labelIconBgVersion,
-      isMobile,
-      isUnfolded,
-      onToggle: toggle,
-    });
+
+    const isAccordion = foldButtonVersion === 'accordion';
+    const foldButton = (
+      <DefaultFoldButton
+        className={style('w-full', { 'text-h6 my-lg': isAccordion })}
+        label={label}
+        isUnfolded={isUnfolded}
+        embedded={isAccordion}
+        onClick={toggle}
+      />
+    );
 
     return (
       <BlockWrapper
@@ -80,45 +73,5 @@ export const RollupItem = UniBlock<RollupItemProps>(
       </BlockWrapper>
     );
   },
-  {
-    childrenTypes: { exclude: ['RollupItem'] },
-  },
+  { childrenTypes: { exclude: ['RollupItem'] } },
 );
-
-interface FoldButtonProps extends FoldablePartProps {
-  foldButtonVersion?: FoldButtonVersion;
-  label?: string;
-  labelIcon?: IconProps;
-  labelIconBgVersion?: IconBgVersion;
-  isPadding?: boolean;
-  isMobile?: boolean;
-}
-
-const renderFoldButton = ({
-  foldButtonVersion,
-  label: defaultLabel,
-  labelIcon,
-  labelIconBgVersion,
-  isUnfolded,
-  isMobile = false,
-  onToggle,
-}: FoldButtonProps) => {
-  const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
-  const icon = getIconName(isUnfolded, isMobile);
-
-  return foldButtonVersion === 'accordion' ? (
-    <AccordionFoldButton
-      label={label}
-      labelIcon={labelIcon}
-      labelIconBgVersion={labelIconBgVersion}
-      icon={icon}
-      onToggle={onToggle}
-    />
-  ) : (
-    <DefaultFoldButton
-      label={label}
-      icon={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-      onClick={onToggle}
-    />
-  );
-};

package/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Img } from '../../ui-kit/Img/Img';
+import { Icon } from '../../ui-kit/Icon/Icon';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 import { type Tariff } from './useSafeBoxes';
@@ -25,7 +25,7 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
         </Paragraph>
       </div>
       <div className="flex flex-col items-center gap-s order-3 @xl:order-none mb-xl @xl:mb-0 bg-primary-main py-s @xl:p-3xl text-center">
-        <Img image={{ icon: 'PackA4Icon' }} className="@xl:h-60" />
+        <Icon className="@xl:h-60" name="PackA4Icon" />
         <div className="hidden @xl:inline opacity-80 whitespace-pre-line">
           <Paragraph size="text-s" font="font-light" color="text-white">
             {imageDescription}

package/src/components/TariffsTable/TariffsTable.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderDefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
@@ -63,7 +63,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
                 {visibleRows}
                 <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
               </TariffsTableWrapper>
-              {renderDefaultFoldButton({ isUnfolded, onToggle: toggle })}
+              <DefaultFoldButton className="w-full" isUnfolded={isUnfolded} onClick={toggle} />
             </Foldable>
           ) : (
             <TariffsTableWrapper controls={controls}>{rows}</TariffsTableWrapper>

package/src/hooks/useRetailFormStore.tsx

@@ -8,6 +8,7 @@ export type StatusInfoState = {
   cardCategory?: string;
   deliveryDate?: Date | string;
   deliveryAddress?: string;
+  methodObtain?: string;
   calculator?: {
     monthsValue?: number;
     moneyValue?: number;

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

@@ -18,7 +18,7 @@ interface GridBlocksProps extends GridSection, UniBlockProps {
 }
 
 export const GridBlocks = JSX<GridBlocksProps>(
-  ({ topItemsCount = 0, label = '', block, blocksToRender = [], ...rest }) => {
+  ({ topItemsCount = 0, label, block, blocksToRender = [], ...rest }) => {
     const [visibleBlocks, hiddenBlocks] =
       topItemsCount > 0
         ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]
@@ -38,11 +38,11 @@ export const GridBlocks = JSX<GridBlocksProps>(
             {isOdd(hiddenBlocks.length) ? <AdTile className="col-span-6" {...rest} /> : null}
           </FoldableSection>
           <DefaultFoldButton
-            className={style({ hidden: topItemsCount < 1 })}
-            dataTheme={rest.options?.page?.colorPalette}
-            disabled={!hiddenBlocks?.length}
+            className={style('w-full', { hidden: topItemsCount < 1 })}
             label={label}
-            icon={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+            isUnfolded={isUnfolded}
+            disabled={!hiddenBlocks?.length}
+            dataTheme={rest.options?.page?.colorPalette}
             onClick={toggle}
           />
         </Foldable>

package/src/ui-kit/Button/Button.fixture.tsx

@@ -10,7 +10,6 @@ export default {
       <div className="bg-white p-xl flex flex-col gap-2">
         <p>Primary</p>
         <Button>{buttonText}</Button>
-        <Button active>{buttonText}</Button>
         <Button disabled>{buttonText}</Button>
         <Button>
           {icon}
@@ -20,9 +19,6 @@ export default {
       <div className="bg-white p-xl flex flex-col gap-2">
         <p>Secondary</p>
         <Button version="secondary">{buttonText}</Button>
-        <Button version="secondary" active>
-          {buttonText}
-        </Button>
         <Button version="secondary" disabled>
           {buttonText}
         </Button>
@@ -38,7 +34,6 @@ export default {
       <div className="bg-primary-main p-xl flex flex-col gap-2">
         <p className="text-white">Primary</p>
         <Button>{buttonText}</Button>
-        <Button active>{buttonText}</Button>
         <Button disabled>{buttonText}</Button>
         <Button>
           {icon}
@@ -48,9 +43,6 @@ export default {
       <div className="bg-primary-main p-xl flex flex-col gap-2">
         <p className="text-white">Secondary</p>
         <Button version="secondary">{buttonText}</Button>
-        <Button version="secondary" active>
-          {buttonText}
-        </Button>
         <Button version="secondary" disabled>
           {buttonText}
         </Button>