@redneckz/wildless-cms-uni-blocks 0.14.761 → 0.14.763

package/mobile/src/utils/adjustHref.ts

@@ -3,19 +3,14 @@ import { dirname } from './dirname';
 import { isUUID } from './isUUID';
 import { hasPrefix, isHash, isURL, joinPath } from './url';
 
-export const PREFIX_API = '/api/';
-export const FILE_STORAGE_API = `${PREFIX_API}v1/storage`;
+const API_PREFIX = '/api/';
+const FILE_STORAGE_API = `${API_PREFIX}v1/storage`;
+
+const DIRECT_HREF_PREFIXES = [projectSettings.CDN, API_PREFIX];
 
 export const adjustHref =
   (router: { pathname: string }) => (href: string | undefined, basePath?: string) => {
-    if (
-      [
-        !href,
-        isURL(href),
-        isHash(href),
-        [projectSettings.CDN, PREFIX_API].some((_) => hasPrefix(href, _)),
-      ].some(Boolean)
-    ) {
+    if (isDirectHref(href)) {
       return href;
     }
 
@@ -26,8 +21,11 @@ export const adjustHref =
     const isRelativeToBase = href?.startsWith('/');
 
     return joinPath(
-      hasPrefix(href, basePath) ? '' : basePath,
+      hasPrefix(href)(basePath) ? '' : basePath,
       isRelativeToBase ? '/' : dirname(router.pathname),
       href,
     );
   };
+
+const isDirectHref = (href: string | undefined) =>
+  !href || isURL(href) || isHash(href) || DIRECT_HREF_PREFIXES.some(hasPrefix(href));

package/mobile/src/utils/url.ts

@@ -1,34 +1,32 @@
 import { type Target } from '../model/LinkProps';
 
-export const isURL = (href?: string): href is `${string}:${string}` => Boolean(href?.includes(':'));
+export const isURL = (href: string | undefined): href is `${string}:${string}` =>
+  Boolean(href?.includes(':'));
 
 export const isLocalURL = (href: string | undefined, target?: Target) =>
   Boolean(href && !isURL(href) && (!target || target === '_self'));
 
-export const isHash = (href?: string): href is `#${string}` => Boolean(href?.startsWith('#'));
+export const isHash = (href: string | undefined): href is `#${string}` =>
+  Boolean(href?.startsWith('#'));
 
-export const withoutQuery = (href?: string): string =>
-  (href || '').replace(/\?.*/, '').replace(/\/$/, '');
+export const withoutQuery = (href: string | undefined): string =>
+  (href ?? '').replace(/\?.*/, '').replace(/\/$/, '');
 
 export const joinPath = (...path: (string | undefined | null)[]): string =>
   path
     .filter(Boolean)
     .join('/')
     .replace(/\/+/g, '/')
-    .replace(/^(.+):\//, '$1://')
+    .replace(/^(.+):\//, '$1://') // TODO Череда очень странных преобрвзований
     .replace(/^file:/, 'file:/')
     .replace(/\/(\?|&|#[^!])/g, '$1')
     .replace(/\?/g, '&')
     .replace('&', '?');
 
-export const hasPrefix = (href?: string, prefix?: string | undefined) => {
-  if (!href || !prefix) {
-    return false;
-  }
-
-  if (href.startsWith(prefix)) {
-    return [prefix === '/', href === prefix, href[prefix.length] === '/'].some(Boolean);
-  }
-
-  return false;
-};
+export const hasPrefix = (href?: string) => (prefix?: string) =>
+  Boolean(
+    href &&
+      prefix &&
+      href.startsWith(prefix) &&
+      (prefix === '/' || href === prefix || href[prefix.length] === '/'),
+  );

package/package.json

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

package/src/components/ApplicationForm/Footnote.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type TextProps } from '../../model/HeadlineType';
 import { type LinkProps } from '../../model/LinkProps';
-import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { Link } from '../../ui-kit/Link/Link';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 
@@ -13,14 +13,9 @@ export const Footnote = JSX<FootnoteProps>(({ text, link }) => (
   <Paragraph size="text-l" font="font-light" color="text-secondary-text">
     {text ? <Text>{text}</Text> : null}
     {link ? (
-      <LinkButton
-        href={link.href}
-        ariaLabel="условия передачи данных"
-        target={link.target || ''}
-        className="!text-left text-primary-main"
-      >
-        <Text>{link.text}</Text>
-      </LinkButton>
+      <Link {...link} ariaLabel="условия передачи данных">
+        {link.text}
+      </Link>
     ) : null}
   </Paragraph>
 ));

package/src/components/ApplicationLeadForm/Footnote.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type TextProps } from '../../model/HeadlineType';
 import { type LinkProps } from '../../model/LinkProps';
-import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { Link } from '../../ui-kit/Link/Link';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 
@@ -13,14 +13,9 @@ export const Footnote = JSX<FootnoteProps>(({ text, link }) => (
   <Paragraph size="text-l" font="font-light" color="text-secondary-text">
     {text ? <Text>{text}</Text> : null}
     {link ? (
-      <LinkButton
-        href={link.href}
-        ariaLabel="условия передачи данных"
-        target={link.target || ''}
-        className="!text-left text-primary-main"
-      >
-        <Text>{link.text}</Text>
-      </LinkButton>
+      <Link {...link} ariaLabel="условия передачи данных">
+        {link.text}
+      </Link>
     ) : null}
   </Paragraph>
 ));

package/src/components/ApplicationLeadForm/GroupedConsents.tsx

@@ -66,7 +66,7 @@ export const GroupedConsents = JSX<GroupedConsentsProps>(({ inputs = [], field,
             />
             {renderErrorText(hasValidationErrors ? CONSENT_REQUIRED : '')}
           </div>
-          <Button embedded onClick={toggle}>
+          <Button embedded ariaLabel={CONSENT_ALL_DOCS_TEXT} onClick={toggle}>
             <ToggleIcon className="p-2xs" iconVersion="color" isUnfolded={isUnfolded} />
           </Button>
         </div>

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -72,7 +72,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
             </div>
             {cardCells.length >= visibleCellsCount ? (
               <DefaultFoldButton
-                className="w-full mt-m"
+                className="mt-m"
                 label={isVisible ? 'Скрыть' : 'Подробнее о тарифе'}
                 isUnfolded={isVisible}
                 embedded

package/src/components/CreditCardForm/CreditCardFormStatus.tsx

@@ -3,11 +3,11 @@ import { useMobileMode } from '../../hooks/useMobileMode';
 import { type DescriptionProps, type LabelProps } from '../../model/HeadlineType';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
-import { InfoCard, type InfoCardProps } from '../../ui-kit/InfoCard/InfoCard';
-import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { Link } from '../../ui-kit/Link/Link';
 import { Text } from '../../ui-kit/Text/Text';
 import { TimerCircle } from '../../ui-kit/TimerCircle/TimerCircle';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { noop } from '../../utils/noop';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 
@@ -15,29 +15,25 @@ type CreditCardFormStatusProps = UniBlockProps & {
   title?: string;
   description?: string;
   interval?: number;
-  intervalExpireAction?: () => void;
   sectionInfoTitle?: string;
   sectionInfo?: (LabelProps & DescriptionProps)[];
   sectionAdditionalTitle?: string;
   sectionInfoAdditional?: (LabelProps & DescriptionProps)[];
   buttonText?: string;
-  infoCard?: InfoCardProps;
+  onExpire?: () => void;
 };
 
 export const CreditCardFormStatus = JSX<CreditCardFormStatusProps>(
   ({
     title,
     description: dsc,
-    infoCard,
     sectionInfoTitle,
     sectionInfo,
     sectionAdditionalTitle,
     sectionInfoAdditional,
     buttonText,
     interval,
-    intervalExpireAction = () => {
-      return;
-    },
+    onExpire = noop,
     ...props
   }) => (
     <BlockWrapper {...props}>
@@ -50,23 +46,12 @@ export const CreditCardFormStatus = JSX<CreditCardFormStatusProps>(
           padding="p-xl"
           className="w-full"
         />
-        {interval ? (
-          <TimerCircle interval={interval} intervalExpireAction={intervalExpireAction} />
-        ) : null}
+        {interval ? <TimerCircle interval={interval} onEnd={onExpire} /> : null}
       </div>
       <SectionInfo title={sectionInfoTitle} items={sectionInfo} />
       <SectionInfo title={sectionAdditionalTitle} items={sectionInfoAdditional} countColumns />
-      {infoCard?.__html ? (
-        <InfoCard
-          __html={infoCard?.__html}
-          icon={infoCard?.icon}
-          link={{
-            text: infoCard?.link?.text,
-          }}
-        />
-      ) : null}
       {buttonText ? (
-        <LinkButton href="/natural" text={buttonText} version="primary" className="w-full mt-lg" />
+        <Link href="/natural" text={buttonText} version="primary" className="w-full mt-lg" />
       ) : null}
     </BlockWrapper>
   ),

package/src/components/CreditCardForm/CreditCardFormStatusTracker.tsx

@@ -28,27 +28,27 @@ export const CreditCardFormStatusTracker = JSX(() => {
   }, [taskId]);
 
   const trackStatus = useCallback(
-    async (stopInterval: () => void) => {
+    async (stop: () => void) => {
       const res = await getTaskStatus({ taskId });
 
       if (res && res?.statusCd !== STATUS_TYPE.process) {
-        stopInterval();
+        stop();
         setStatus(res.statusCd);
       }
     },
     [taskId],
   );
 
-  useInterval(trackStatus, 30000);
+  useInterval(trackStatus, 30_000);
 
-  const handleExpire = () => setStatus(STATUS_TYPE.rework);
+  const handleExpire = useCallback(() => setStatus(STATUS_TYPE.rework), []);
 
   return renderStatus(status, handleExpire);
 });
 
 const renderStatus = (status: STATUS_TYPE, handleExpire: () => void) => {
   const statusesMap: Record<STATUS_TYPE, VNode> = {
-    IN_PROCESS: <PendingStatusContent handleExpireTimer={handleExpire} />,
+    IN_PROCESS: <PendingStatusContent onExpire={handleExpire} />,
     CANCELLED: <FailedStatusContent />,
     FAILED: <FailedStatusContent />,
     DRAFT: <FailedStatusContent />,

package/src/components/CreditCardForm/PendingStatusContent.tsx

@@ -2,28 +2,26 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useRetailFormStore } from '../../hooks/useRetailFormStore';
 import { CreditCardFormStatus } from './CreditCardFormStatus';
 
-export const PendingStatusContent = JSX(
-  ({ handleExpireTimer }: { handleExpireTimer: () => void }) => {
-    const { statusInfo } = useRetailFormStore();
+export const PendingStatusContent = JSX(({ onExpire }: { onExpire: () => void }) => {
+  const { statusInfo } = useRetailFormStore();
 
-    return (
-      <CreditCardFormStatus
-        interval={300}
-        intervalExpireAction={handleExpireTimer}
-        title="Заявка успешно отправлена"
-        description="Не закрывайте окно, скоро сообщим результат"
-        sectionInfoTitle="Заявленные условия по кредиту"
-        sectionInfo={[
-          {
-            label: 'Название продукта',
-            description: 'Кредитная карта',
-          },
-          {
-            label: 'Категория',
-            description: statusInfo?.cardCategory,
-          },
-        ]}
-      />
-    );
-  },
-);
+  return (
+    <CreditCardFormStatus
+      interval={300}
+      title="Заявка успешно отправлена"
+      description="Не закрывайте окно, скоро сообщим результат"
+      sectionInfoTitle="Заявленные условия по кредиту"
+      sectionInfo={[
+        {
+          label: 'Название продукта',
+          description: 'Кредитная карта',
+        },
+        {
+          label: 'Категория',
+          description: statusInfo?.cardCategory,
+        },
+      ]}
+      onExpire={onExpire}
+    />
+  );
+});

package/src/components/CreditCardForm/StepsNavigationButtons.tsx

@@ -15,7 +15,7 @@ export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
 
     return (
       <div className="flex justify-between gap-m">
-        <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
+        <Button version="secondary" disabled={isFirstStep} onClick={onPrevStep}>
           Назад
         </Button>
         <SubmitButton isLoading={isSending}>

package/src/components/CreditForm/CreditFormStatus.tsx

@@ -3,11 +3,11 @@ import { useMobileMode } from '../../hooks/useMobileMode';
 import { type DescriptionProps, type LabelProps } from '../../model/HeadlineType';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
-import { InfoCard, type InfoCardProps } from '../../ui-kit/InfoCard/InfoCard';
-import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { Link } from '../../ui-kit/Link/Link';
 import { Text } from '../../ui-kit/Text/Text';
 import { TimerCircle } from '../../ui-kit/TimerCircle/TimerCircle';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { noop } from '../../utils/noop';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 
@@ -15,29 +15,25 @@ type CreditFormStatusProps = UniBlockProps & {
   title?: string;
   description?: string;
   interval?: number;
-  intervalExpireAction?: () => void;
   sectionInfoTitle?: string;
   sectionInfo?: (LabelProps & DescriptionProps)[];
   sectionAdditionalTitle?: string;
   sectionInfoAdditional?: (LabelProps & DescriptionProps)[];
   buttonText?: string;
-  infoCard?: InfoCardProps;
+  onExpire?: () => void;
 };
 
 export const CreditFormStatus = JSX<CreditFormStatusProps>(
   ({
     title,
     description: dsc,
-    infoCard,
     sectionInfoTitle,
     sectionInfo,
     sectionAdditionalTitle,
     sectionInfoAdditional,
     buttonText,
     interval,
-    intervalExpireAction = () => {
-      return;
-    },
+    onExpire = noop,
     ...props
   }) => {
     return (
@@ -51,28 +47,12 @@ export const CreditFormStatus = JSX<CreditFormStatusProps>(
             padding="p-xl"
             className="w-full"
           />
-          {interval ? (
-            <TimerCircle interval={interval} intervalExpireAction={intervalExpireAction} />
-          ) : null}
+          {interval ? <TimerCircle interval={interval} onEnd={onExpire} /> : null}
         </div>
         <SectionInfo title={sectionInfoTitle} items={sectionInfo} />
         <SectionInfo title={sectionAdditionalTitle} items={sectionInfoAdditional} countColumns />
-        {infoCard?.__html ? (
-          <InfoCard
-            __html={infoCard?.__html}
-            icon={infoCard?.icon}
-            link={{
-              text: infoCard?.link?.text,
-            }}
-          />
-        ) : null}
         {buttonText ? (
-          <LinkButton
-            href="/natural"
-            text={buttonText}
-            version="primary"
-            className="w-full mt-lg"
-          />
+          <Link href="/natural" text={buttonText} version="primary" className="w-full mt-lg" />
         ) : null}
       </BlockWrapper>
     );

package/src/components/CreditForm/CreditFormStatusTracker.tsx

@@ -27,27 +27,27 @@ export const CreditFormStatusTracker = JSX(() => {
   }, [taskId]);
 
   const trackStatus = useCallback(
-    async (stopInterval: () => void) => {
+    async (stop: () => void) => {
       const res = await getTaskStatus({ taskId });
 
       if (res && res?.statusCd !== STATUS_TYPE.process) {
-        stopInterval();
+        stop();
         setStatus(res.statusCd);
       }
     },
     [taskId],
   );
 
-  useInterval(trackStatus, 30000);
+  useInterval(trackStatus, 30_000);
 
-  const handleExpire = () => setStatus(STATUS_TYPE.rework);
+  const handleExpire = useCallback(() => setStatus(STATUS_TYPE.rework), []);
 
   return renderStatus(status, handleExpire);
 });
 
-const renderStatus = (status: STATUS_TYPE, handleExpire: () => void) => {
+const renderStatus = (status: STATUS_TYPE, onExpire: () => void) => {
   const statusesMap: Record<STATUS_TYPE, VNode> = {
-    IN_PROCESS: <PendingStatusContent handleExpireTimer={handleExpire} />,
+    IN_PROCESS: <PendingStatusContent onExpire={onExpire} />,
     CANCELLED: <FailedStatusContent />,
     FAILED: <FailedStatusContent />,
     DRAFT: <FailedStatusContent />,

package/src/components/CreditForm/PendingStatusContent.tsx

@@ -2,40 +2,38 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useRetailFormStore } from '../../hooks/useRetailFormStore';
 import { CreditFormStatus } from './CreditFormStatus';
 
-export const PendingStatusContent = JSX(
-  ({ handleExpireTimer }: { handleExpireTimer: () => void }) => {
-    const { statusInfo } = useRetailFormStore();
+export const PendingStatusContent = JSX(({ onExpire }: { onExpire: () => void }) => {
+  const { statusInfo } = useRetailFormStore();
 
-    return (
-      <CreditFormStatus
-        interval={300}
-        intervalExpireAction={handleExpireTimer}
-        title="Заявка успешно отправлена"
-        description="Не закрывайте окно, скоро сообщим результат"
-        sectionInfoTitle="Заявленные условия по кредиту"
-        sectionInfo={[
-          {
-            label: 'Название продукта',
-            description: 'Кредит на любые цели',
-          },
-          {
-            label: 'Цель кредита',
-            description: 'На любые цели',
-          },
-          {
-            label: 'Сумма',
-            description: `${statusInfo?.calculator?.moneyValue?.toLocaleString() ?? '0'} ₽`,
-          },
-          {
-            label: 'Срок кредита',
-            description: `${statusInfo?.calculator?.monthsValue ?? '0'} мес`,
-          },
-          {
-            label: 'Тип платежа',
-            description: statusInfo?.calculator?.isAnnuity ? 'Аннуитетный' : 'Дифференцированный',
-          },
-        ]}
-      />
-    );
-  },
-);
+  return (
+    <CreditFormStatus
+      interval={300}
+      title="Заявка успешно отправлена"
+      description="Не закрывайте окно, скоро сообщим результат"
+      sectionInfoTitle="Заявленные условия по кредиту"
+      sectionInfo={[
+        {
+          label: 'Название продукта',
+          description: 'Кредит на любые цели',
+        },
+        {
+          label: 'Цель кредита',
+          description: 'На любые цели',
+        },
+        {
+          label: 'Сумма',
+          description: `${statusInfo?.calculator?.moneyValue?.toLocaleString() ?? '0'} ₽`,
+        },
+        {
+          label: 'Срок кредита',
+          description: `${statusInfo?.calculator?.monthsValue ?? '0'} мес`,
+        },
+        {
+          label: 'Тип платежа',
+          description: statusInfo?.calculator?.isAnnuity ? 'Аннуитетный' : 'Дифференцированный',
+        },
+      ]}
+      onExpire={onExpire}
+    />
+  );
+});

package/src/components/CreditForm/StepsNavigationButtons.tsx

@@ -15,7 +15,7 @@ export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
 
     return (
       <div className={'flex justify-between gap-m'}>
-        <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
+        <Button version="secondary" disabled={isFirstStep} onClick={onPrevStep}>
           Назад
         </Button>
         <SubmitButton isLoading={isSending}>

package/src/components/Footer/Footer.tsx

@@ -1,4 +1,5 @@
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Link } from '../../ui-kit/Link/Link';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { Sitemap } from '../../ui-kit/Sitemap/Sitemap';
 import { UniBlock } from '../../UniBlock/UniBlock';
@@ -25,8 +26,6 @@ export const Footer = UniBlock<FooterProps>(({ className, footer, ...rest }) =>
     otherLinks = [],
   } = footer ?? {};
 
-  const linkStyle = '!text-left text-s font-light';
-
   return (
     <BlockWrapper
       tag="footer"
@@ -55,9 +54,7 @@ export const Footer = UniBlock<FooterProps>(({ className, footer, ...rest }) =>
             </SocialMedia>
           ))}
           {otherLinks.map((_, i) => (
-            <LinkButton key={String(i)} className={linkStyle} version="link" {..._}>
-              {_?.text}
-            </LinkButton>
+            <Link key={`${_.href}_${i}`} className="text-s font-light" {..._} />
           ))}
         </div>
       </div>

package/src/components/GrantSupport/GrantSupport.tsx

@@ -2,8 +2,7 @@ import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { getAspectsWithInclude } from '../../hooks/useAspects/aspects/getAspectsWithInclude';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { getRegularButtonClasses } from '../../ui-kit/LinkButton/getRegularButtonClasses';
-import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { Link } from '../../ui-kit/Link/Link';
 import { SelectControl } from '../../ui-kit/Select/SelectControl';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
@@ -17,12 +16,7 @@ export const GrantSupport = UniBlock<GrantSupportProps>(
     const [region, setRegion] = useState({ key: '' });
     const regions = regionSource?.regions ?? [];
 
-    const buttonStyle = getRegularButtonClasses({
-      className: 'text-white',
-      version: button?.version || 'primary',
-    });
     const regionHref = regions?.find((_) => _.name === region.key)?.href;
-    const buttonText = button?.text ? button.text : 'Перейти';
 
     return (
       <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
@@ -40,14 +34,15 @@ export const GrantSupport = UniBlock<GrantSupportProps>(
           ) : null}
           {regionHref ? (
             <div className="text-center">
-              <LinkButton
+              <Link
+                className={style('w-full @xl:w-auto')}
                 href={regionHref}
                 target="_blank"
-                className={style('p-m w-full @xl:w-auto', buttonStyle)}
+                version={button?.version ?? 'primary'}
                 data={getAspectsWithInclude(data, region?.key)}
               >
-                {buttonText}
-              </LinkButton>
+                {button?.text ? button.text : 'Перейти'}
+              </Link>
             </div>
           ) : null}
         </div>

package/src/components/OfficesAtmsMap/FiltrationForm.tsx

@@ -50,6 +50,7 @@ export const FiltrationForm = JSX<RenderFiltrationFormProps>(
                     label={isUnfolded ? 'Меньше фильтров' : 'Больше фильтров'}
                     isUnfolded={isUnfolded}
                     embedded
+                    short
                     onClick={toggle}
                   />
                 ) : null}

package/src/components/OfficesAtmsMap/FoldableCardContent.tsx

@@ -13,7 +13,7 @@ export const FoldableCardContent = JSX(({ children }) => {
       <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"
+          className="my-m mr-m border-b border-solid border-main-divider"
           label={isUnfolded ? 'Скрыть' : 'Подробнее'}
           isUnfolded={isUnfolded}
           embedded

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -11,6 +11,7 @@ type BackwardButtonProps = {
   alwaysVisible?: boolean;
 };
 
+// TODO Заменить LinkButton на Button и применить RoundedIcon
 export function renderBackwardButton({
   version,
   handleClick,