@redneckz/wildless-cms-uni-blocks 0.14.751 → 0.14.753

package/mobile/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -1,59 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type ColorPalette } from '../../model/ContentPageBase';
 import { style } from '../../utils/style';
-import { type IconName } from '../Icon/IconProps';
-import { Img } from '../Img/Img';
-import { Text } from '../Text/Text';
-import { TextWithIcon } from '../TextWithIcon/TextWithIcon';
-import { type FoldablePartProps } from './FoldablePartProps';
+import { Button, type ButtonProps } from '../Button/Button';
+import { ButtonTitle } from '../Button/ButtonTitle';
+import { ToggleIcon } from '../Icon/ToggleIcon';
 
-interface DefaultFoldButtonProps {
-  className?: string;
-  label: string;
-  icon: IconName;
-  dataTheme?: ColorPalette;
-  disabled?: boolean;
-  onClick?: () => void;
+interface DefaultFoldButtonProps extends ButtonProps {
+  isUnfolded?: boolean;
+  label?: string;
 }
 
 export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
-  ({ className = '', label, icon, dataTheme = 'pc', disabled = false, onClick }) => (
-    <TextWithIcon
-      tag="button"
-      onClick={onClick}
-      disabled={disabled}
-      data-theme={dataTheme}
-      justifyContent="center"
-      role="button"
-      className={style(
-        'py-4 border border-transparent outline-none focus:border-primary-text space-x-s',
-        disabled
-          ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
-          : 'bg-primary-main text-white hover:bg-primary-hove',
-        className,
-      )}
-      textNode={<Text size="text-h4">{label}</Text>}
-      iconNode={
-        icon ? (
-          <Img
-            image={{
-              icon,
-              iconVersion: 'white',
-            }}
-            className="my-auto"
-            width="20"
-            height="20"
-          />
-        ) : null
-      }
-    />
+  ({ className, isUnfolded, label = isUnfolded ? 'Скрыть' : 'Развернуть', embedded, ...rest }) => (
+    <Button
+      className={style({ 'text-h4': !embedded }, className)}
+      rounded={false}
+      embedded={embedded}
+      {...rest}
+    >
+      <ButtonTitle>{label}</ButtonTitle>
+      <ToggleIcon isUnfolded={isUnfolded} iconVersion={embedded ? 'color' : ''} />
+    </Button>
   ),
 );
-
-export const renderDefaultFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps) => (
-  <DefaultFoldButton
-    icon={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-    label={isUnfolded ? 'Скрыть' : 'Развернуть'}
-    onClick={onToggle}
-  />
-);

package/mobile/src/ui-kit/Foldable/Foldable.tsx

@@ -1,13 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
+import { type ARIAProps } from '../ARIAProps';
 
-export interface FoldableProps {
+export interface FoldableProps extends ARIAProps {
   className?: string;
 }
 
 // TODO Не особо полезно, в итоге
-export const Foldable = JSX<FoldableProps>(({ className, children }) => (
-  <div className={style(className)} role="group">
+export const Foldable = JSX<FoldableProps>(({ className, role = 'group', children }) => (
+  <div className={style(className)} role={role}>
     {children}
   </div>
 ));

package/mobile/src/ui-kit/Icon/Icon.tsx

@@ -8,7 +8,7 @@ import { style } from '../../utils/style';
 import { joinPath } from '../../utils/url';
 import { type IconProps } from './IconProps';
 
-const svgUseStyleMap: Record<IconVersion, string> = {
+const iconVersionStyle: Record<IconVersion, string> = {
   '': '',
   normal: '',
   color: 'text-primary-main',
@@ -17,6 +17,13 @@ const svgUseStyleMap: Record<IconVersion, string> = {
   gray: 'text-gray',
 };
 
+const sizeStyle: Record<NonNullable<IconProps['size']>, string> = {
+  small: '16',
+  medium: '24',
+  large: '48',
+  xl: '78',
+};
+
 export const Icon = JSX<IconProps>(
   ({
     className = '',
@@ -25,24 +32,26 @@ export const Icon = JSX<IconProps>(
     alt = `Иконка ${name}`,
     title = alt,
     iconVersion = 'color',
-    width,
-    height,
+    size,
+    width = size && sizeStyle[size],
+    height = width,
   }) => {
     const router = useRouter();
     const iconName = iconVersion === 'normal' ? `${name}.svg` : `sprites.svg#${name}`;
     const href = adjustHref(router)(joinPath(projectSettings.CDN, '/icons/', iconName));
+
     if (iconVersion === 'normal') {
       // fix svg gradient color
       return (
         <img
           className={className}
+          style={getInlineStyle(className, height)}
           src={href}
           alt={alt}
           title={title}
           aria-hidden="true"
           width={width}
           height={height}
-          style={getInlineStyle(className, height)}
         />
       );
     }
@@ -51,9 +60,9 @@ export const Icon = JSX<IconProps>(
       <Background className={className}>
         <svg
           className={style(
-            getSvgSize(width),
-            svgUseStyleMap[iconVersion],
+            iconVersionStyle[iconVersion],
             {
+              'w-full h-full': !width,
               invert: iconVersion === 'white',
             },
             imageClassName,
@@ -71,16 +80,13 @@ export const Icon = JSX<IconProps>(
   },
 );
 
-const getInlineStyle = (className?: string, height?: string) => {
-  if (className?.includes('h-')) {
-    return {};
-  }
-
-  return { height: isOnlyDigits(height) ? `${height}px` : height, width: 'auto' };
-};
-
-const getSvgSize = (width?: string) => (width ? '' : 'w-full h-full');
+// TODO Что то совсем не очень
+const getInlineStyle = (className?: string, height?: string) =>
+  className?.includes('h-')
+    ? {}
+    : { height: isOnlyDigits(height) ? `${height}px` : height, width: 'auto' };
 
+// TODO И это тоже
 const Background = JSX<{ className?: string }>(({ className, children }) =>
   className ? (
     <div role="img" className={className}>

package/mobile/src/ui-kit/Icon/IconProps.ts

@@ -14,11 +14,24 @@ export type { IconName };
  */
 export type IconBgVersion = '' | 'primary' | 'secondary' | 'opacity';
 
+/**
+ * @title Размер иконки
+ * @enumNames [
+ *    "Мелкая",
+ *    "Средняя",
+ *    "Большая",
+ *    "Гигантская"
+ * ]
+ */
+export type IconSize = 'small' | 'medium' | 'large' | 'xl';
+
 export interface IconCompatibilityFields {
   /** @title Альтернативный текст (alt) */
   alt?: string;
   /** @title Текст подсказки (title) */
   title?: string;
+  /** @title Размер */
+  size?: IconSize;
   /** @title Ширина */
   width?: string;
   /** @title Высота */

package/mobile/src/ui-kit/Icon/RoundedIcon.tsx

@@ -32,7 +32,7 @@ export const RoundedIcon = JSX<RoundedIconProps>(
           className,
         )}
       >
-        <Icon {...rest} width="54%" height="54%" name={icon} />
+        <Icon {...rest} width="54%" name={icon} />
       </div>
     ) : null;
   },

package/mobile/src/ui-kit/Icon/ToggleIcon.tsx

@@ -0,0 +1,11 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from './Icon';
+import { type IconProps } from './IconProps';
+
+interface ToggleIconProps extends IconProps {
+  isUnfolded?: boolean;
+}
+
+export const ToggleIcon = JSX<ToggleIconProps>(({ isUnfolded, ...rest }) => (
+  <Icon name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'} size="small" iconVersion="" {...rest} />
+));

package/mobile/src/ui-kit/Input/InputPopup.tsx

@@ -1,26 +1,60 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
+import { style } from '../../utils/style';
+import { type PreventableEventWithTarget } from '../PreventableEvent';
 
 export interface InputPopupProps {
-  options?: Array<DaDataSuggestion>;
+  options: Array<DaDataSuggestion>;
+  container: HTMLDivElement;
   onChange: (e: DaDataSuggestion) => void;
   value?: string;
 }
 
-export const InputPopup = JSX<InputPopupProps>(({ options, onChange }) => (
-  <div
-    className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-2xl"
-    role="list"
-  >
-    {options?.map((item, key) => (
-      <div
-        key={key.toString()}
-        className="flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative"
-        role="listitem"
-        onMouseDown={() => onChange(item)}
-      >
-        <span className="min-h-6">{item.processedValue}</span>
-      </div>
-    ))}
-  </div>
-));
+const ARROW_DOWN_KEYBOARD_KEY_CODE = 'ArrowDown';
+const ARROW_UP_KEYBOARD_KEY_CODE = 'ArrowUp';
+const ENTER_KEYBOARD_KEY_CODE = 'Enter';
+const INITIAL_LIST_ITEM_ACTIVE = -1;
+
+export const InputPopup = JSX<InputPopupProps>(({ options, container, onChange }) => {
+  const [listItemActive, setListItemActive] = useState<number>(INITIAL_LIST_ITEM_ACTIVE);
+
+  const onKeyDownHandler = (ev: PreventableEventWithTarget & { key: string }): void => {
+    const hintsListMaxIndex = options.length - 1;
+
+    if (ev.key === ARROW_DOWN_KEYBOARD_KEY_CODE) {
+      setListItemActive(listItemActive < hintsListMaxIndex ? listItemActive + 1 : 0);
+    } else if (ev.key === ARROW_UP_KEYBOARD_KEY_CODE) {
+      setListItemActive(listItemActive > 0 ? listItemActive - 1 : hintsListMaxIndex);
+    } else if (ev.key === ENTER_KEYBOARD_KEY_CODE && options[listItemActive]) {
+      ev.preventDefault();
+      onChange(options[listItemActive]);
+    }
+  };
+
+  useEffect(() => {
+    container.addEventListener('keydown', onKeyDownHandler);
+
+    return () => container.removeEventListener('keydown', onKeyDownHandler);
+  }, [listItemActive]);
+
+  return (
+    <div
+      className="bg-white text-l overflow-y-auto overflow-x-hidden rounded-md shadow-2xl"
+      role="list"
+    >
+      {options?.map((item, key) => (
+        <div
+          key={key.toString()}
+          className={style('flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative', {
+            'bg-main-divider': listItemActive === key,
+          })}
+          role="listitem"
+          onMouseDown={() => onChange(item)}
+        >
+          <span className="min-h-6">{item.processedValue}</span>
+        </div>
+      ))}
+    </div>
+  );
+});

package/mobile/src/ui-kit/Input/useInputPopup.tsx

@@ -15,6 +15,7 @@ interface InputPopupOptions {
   onDaDataChange?: (e: DaDataSuggestion) => void;
 }
 
+// eslint-disable-next-line max-lines-per-function
 export function useInputPopup({
   isOpen,
   value,
@@ -39,8 +40,8 @@ export function useInputPopup({
     (option: DaDataSuggestion) => {
       close();
       currentInputValue.current = option.processedValue;
-      onChange && onChange(option.processedValue);
-      onDaDataChange && onDaDataChange(option);
+      onChange?.(option.processedValue);
+      onDaDataChange?.(option);
     },
     [close, onChange],
   );
@@ -87,7 +88,14 @@ export function useInputPopup({
     }
 
     popup.open({
-      popup: <InputPopup options={hintsList} value={value} onChange={handleChange} />,
+      popup: (
+        <InputPopup
+          options={hintsList}
+          container={inputElement}
+          value={value}
+          onChange={handleChange}
+        />
+      ),
       top: top + globalThis.scrollY + height,
       left,
       width,

package/mobile/src/ui-kit/Loader/Loader.tsx

@@ -18,7 +18,7 @@ export const Loader = JSX<LoaderProps>(
     >
       <div
         className={style(
-          'inline-block ',
+          'inline-block',
           'animate-spin rounded-full',
           'border-solid border-current',
           'border-r-transparent',

package/mobile/src/ui-kit/Sitemap/Sitemap.tsx

@@ -1,7 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { LinkList } from '../../components/Footer/LinkList';
-import { RollupItem } from '../../components/RollupItem/RollupItem';
 import { type TopMenuItemProps } from '../../data/NavigationData';
+import { style } from '../../utils/style';
+import { Button } from '../Button/Button';
+import { ButtonTitle } from '../Button/ButtonTitle';
+import { Foldable } from '../Foldable/Foldable';
+import { FoldableSection } from '../Foldable/FoldableSection';
+import { RoundedIcon } from '../Icon/RoundedIcon';
+import { ToggleIcon } from '../Icon/ToggleIcon';
+import { Text } from '../Text/Text';
 import { type SitemapProps } from './SitemapProps';
 
 export const Sitemap = JSX<SitemapProps>(({ navigationItems }) => (
@@ -14,13 +22,37 @@ const renderTopItems = (topItems: TopMenuItemProps[] | undefined) =>
   topItems
     ?.filter((_) => _.icon?.icon)
     .map((item, i) => (
-      <RollupItem
+      <MobileTopItem
         key={String(i)}
-        foldButtonVersion="accordion"
-        label={item?.text}
-        labelIcon={item?.icon}
-        role="menuitem"
+        className="w-full border-0 border-b border-solid border-main-divider last:border-b-0"
+        item={item}
+      />
+    ));
+
+const MobileTopItem = JSX<{ className?: string; item: TopMenuItemProps }>(({ className, item }) => {
+  const [isUnfolded, { toggle }] = useBool(false);
+
+  return (
+    <Foldable className={className} role="menuitem">
+      <Button
+        className={style('w-full', item.icon?.icon ? 'py-xs' : 'py-lg')}
+        embedded
+        onClick={toggle}
+      >
+        <ButtonTitle>
+          <RoundedIcon className="shrink-0" {...item.icon} />
+          <Text size="text-h6" font="font-normal">
+            {item.text}
+          </Text>
+        </ButtonTitle>
+        <ToggleIcon iconVersion="color" size="medium" isUnfolded={isUnfolded} />
+      </Button>
+      <FoldableSection
+        className="flex flex-wrap gap-lg group-last:last:pb-0"
+        isUnfolded={isUnfolded}
       >
         {item.items ? <LinkList items={item.items} /> : null}
-      </RollupItem>
-    ));
+      </FoldableSection>
+    </Foldable>
+  );
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.751",
+  "version": "0.14.753",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/api/RetailAPI/doRequest.ts

@@ -1,4 +1,5 @@
 import { RETAIL_API_BASE_URI } from '../apiBaseUrl';
+import { getTraceId } from './getTraceId';
 
 export const fetchRetailJSON = async <R>(
   url: string,
@@ -21,10 +22,15 @@ export async function doRequest(
   method: 'POST' | 'GET' | 'PUT',
   body?: any,
 ): Promise<Response> {
+  const traceId = getTraceId();
+
   return globalThis?.fetch?.(`${RETAIL_API_BASE_URI}${url}`, {
     method,
     headers: {
       'Content-Type': 'application/json',
+      'X-B3-Sampled': '1',
+      'X-B3-Spanid': traceId,
+      'X-B3-Traceid': traceId,
       ...getAuthorizationHeaders(),
     },
     credentials: 'include',

package/src/api/RetailAPI/getGenderFromName.ts

@@ -1,20 +1,17 @@
-import { type DaDataSuggestion } from '../dadataHints/dadataHintsType';
-import { fetchRetailJSON } from './doRequest';
+import { getDaDataHints } from '../dadataHints/dadataHints';
 
 const GENDERS = ['male', 'female'];
 
 export const getGenderFromName = async (name: string): Promise<string> => {
-  const res = await fetchRetailJSON<{ suggestions: Array<DaDataSuggestion> }>(
-    '/suggestions/suggest/fio',
-    'POST',
-    {
-      query: name,
-      count: 1,
+  const res = await getDaDataHints({
+    url: '/suggest/fio',
+    requestData: {
       parts: ['NAME'],
     },
-  );
+    query: name,
+  });
 
-  const gender = res?.suggestions[0]?.data?.gender?.toLowerCase() || '';
+  const gender = res[0]?.data?.gender?.toLowerCase() || '';
 
   return GENDERS.includes(gender) ? gender : '';
 };

package/src/api/RetailAPI/getTraceId.ts

@@ -0,0 +1,6 @@
+export const getTraceId = () => {
+  const result = new Uint8Array(8);
+  globalThis.crypto.getRandomValues(result);
+
+  return result.reduce((acc, _) => `${acc}${_.toString(16).padStart(2, '0')}`, '');
+};

package/src/components/ApplicationForm/renderAgreementSubmit.tsx

@@ -1,14 +1,15 @@
 import { type FieldProps } from '../../hooks/useForm/useForm';
 import { type LinkProps } from '../../model/LinkProps';
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { agreementValidator } from '../../ui-kit/FormField/validators';
 import { renderErrorText } from '../../ui-kit/Input/renderErrorText';
 import { withValidator } from '../../validation/withValidator';
 import { type SubmitButtonProps } from './ApplicationFormContent';
 import { Footnote } from './Footnote';
-import { renderSubmitButton } from './renderSubmitButton';
 
 const agreementText = 'Нажимая кнопку, вы подтверждаете согласие с ';
+
 export const renderAgreementSubmit = (
   consentDataProcessing?: FieldProps<boolean>,
   link?: LinkProps,
@@ -26,6 +27,8 @@ export const renderAgreementSubmit = (
     ) : (
       <Footnote text={agreementText} link={link} />
     )}
-    {renderSubmitButton(button)}
+    <SubmitButton className="w-full @xl:w-auto">
+      {button?.text ? button.text : 'Отправить заявку'}
+    </SubmitButton>
   </div>
 );

package/src/components/ApplicationLeadForm/GroupedConsents.tsx

@@ -5,12 +5,13 @@ import { type FormFieldRegisterer } from '../../services/retail/external/types';
 import { InputsConsentsMap } from '../../services/retail/inputs';
 import { type LeadFormState } from '../../services/retail/model/LeadFormState';
 import { type FieldRetailDef } from '../../services/retail/model/RetailFormContent';
-import { IconButton } from '../../ui-kit/Button/IconButton';
+import { Button } from '../../ui-kit/Button/Button';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { getField } from '../../ui-kit/FormField/getField';
 import { validatorObj } from '../../ui-kit/FormField/getObjectValidator';
+import { ToggleIcon } from '../../ui-kit/Icon/ToggleIcon';
 import { renderErrorText } from '../../ui-kit/Input/renderErrorText';
 import { withValidator } from '../../validation/withValidator';
 
@@ -65,7 +66,9 @@ export const GroupedConsents = JSX<GroupedConsentsProps>(({ inputs = [], field,
             />
             {renderErrorText(hasValidationErrors ? CONSENT_REQUIRED : '')}
           </div>
-          <IconButton name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'} onClick={toggle} />
+          <Button embedded onClick={toggle}>
+            <ToggleIcon className="p-2xs" iconVersion="color" isUnfolded={isUnfolded} />
+          </Button>
         </div>
         <FoldableSection className="flex flex-col pl-2xl" isUnfolded={isUnfolded}>
           {inputs.map(getField<FieldRetailDef>(field, {}, InputsConsentsMap))}

package/src/components/ApplicationLeadForm/renderSubmitButton.tsx

@@ -1,9 +1,8 @@
-import { Button } from '../../ui-kit/Button/Button';
-import { style } from '../../utils/style';
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
 import { type SubmitButtonProps } from './ApplicationLeadFormContent';
 
 export const renderSubmitButton = (button?: SubmitButtonProps, isSending?: boolean) => (
-  <Button className={style('w-full @xl:w-auto')} type="submit" isLoading={isSending}>
+  <SubmitButton className="w-full @xl:w-auto" isLoading={isSending}>
     {button?.text ? button.text : 'Отправить заявку'}
-  </Button>
+  </SubmitButton>
 );

package/src/components/CardTransfer/CardTransfer.tsx

@@ -3,7 +3,7 @@ import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useForm } from '../../hooks/useForm/useForm';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Button } from '../../ui-kit/Button/Button';
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
 import { CurrencyInput } from '../../ui-kit/CurrencyInput/CurrencyInput';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
@@ -67,9 +67,9 @@ export const CardTransfer = JSX<CardTransferProps>(
           />
           <input type="hidden" name="amount" value={amount} />
           {button?.text ? (
-            <Button className="w-full mt-lg" type="submit" disabled={isDisabled}>
+            <SubmitButton className="w-full mt-lg" disabled={isDisabled}>
               {button.text}
-            </Button>
+            </SubmitButton>
           ) : null}
         </form>
       </BlockWrapper>

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}
-    />
-  ),
-);