@redneckz/wildless-cms-uni-blocks 0.12.6 → 0.12.8

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

@@ -0,0 +1,18 @@
+import '../../setup-fixture';
+
+import { CarouselBankHistoryCard } from './CarouselBankHistoryCard';
+import type { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
+
+export const BANK_HISTORY_CARD: CarouselBankHistoryCardContent = {
+  title: '1796г.',
+  description:
+    "Россельхозбанк стал одним из ключевых участников Приоритетного национального проекта 'Развитие АПК' целью которого развитие агропромышленного сектора российской экономики",
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CarouselBankHistoryCard className="col-span-12" {...BANK_HISTORY_CARD} />
+    </div>
+  ),
+};

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.fixture.tsx

@@ -1,5 +1,6 @@
 import '../../setup-fixture';
 
+import { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { CarouselBankHistoryCard } from './CarouselBankHistoryCard';
 import type { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
 
@@ -9,6 +10,13 @@ export const BANK_HISTORY_CARD: CarouselBankHistoryCardContent = {
     "Россельхозбанк стал одним из ключевых участников Приоритетного национального проекта 'Развитие АПК' целью которого развитие агропромышленного сектора российской экономики",
 };
 
+const options: BlockRendererOptions = {
+  key: 'card-0',
+};
+
+const commonProps = { ...BANK_HISTORY_CARD, options };
+
 export default {
   default: <CarouselBankHistoryCard {...BANK_HISTORY_CARD} />,
+  active: <CarouselBankHistoryCard activeIndex={0} {...commonProps} />,
 };

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.mobile.tsx

@@ -0,0 +1,23 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
+import { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
+
+interface CarouselBankHistoryCardProps extends CarouselBankHistoryCardContent, UniBlockProps {}
+
+export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
+  ({ title, description, className }) => (
+    <BlockWrapper className={style(className)} defaultPadding="p-default">
+      <Headline
+        headlineVersion="S"
+        title={title}
+        description={description}
+        align="text-left"
+        className="text-primary-text"
+        isPadding={false}
+      />
+    </BlockWrapper>
+  ),
+);

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -18,7 +18,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
       className={style('flex w-full overflow-hidden justify-between', className)}
       {...rest}
     >
-      <div className="flex flex-col max-w-96 pr-m text-white text-xl-light">
+      <div className="flex flex-col max-w-96 pr-m text-white text-xl font-light">
         <Headline
           isPadding={false}
           title={title}

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -4,6 +4,7 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { style } from '../../utils/style';
+import { Text } from '../../ui-kit/Text/Text';
 import { ComparisonTableBody } from './ComparisonTableBody';
 import type { ComparisonTableContent } from './ComparisonTableContent';
 import { FIRST_CELL_CLASSES } from './constants';
@@ -61,11 +62,11 @@ const renderShowMoreToggleButton = ({
       <div className={FIRST_CELL_CLASSES} />
       <button
         onClick={onClick}
-        className="mt-5 flex-1 border-gray border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
+        className="mt-m py-xs flex-1 border-gray border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
       >
-        <div className="font-sans text-xs-light font-medium py-3">
+        <Text size="text-xs" font="font-medium">
           {!isShowAllRow ? 'Показать все параметры' : 'Скрыть'}
-        </div>
+        </Text>
       </button>
     </div>
   </div>

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -38,7 +38,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
           target={link.target}
           className="mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active"
         >
-          <div className="text-xs-light font-medium py-[11px]">{link.text}</div>
+          <div className="text-xs font-light font-medium py-[11px]">{link.text}</div>
         </Button>
       </div>
     )}

package/src/components/ErrorBlock/ErrorBlock.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { Text } from '../../ui-kit/Text/Text';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -34,7 +35,11 @@ export const ErrorBlock = JSX<ErrorBlockProps>(
       <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
       {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
       {subtitle ? (
-        <div className="font-sans text-xl-light mb-7 max-w-[613px] text-center">{subtitle}</div>
+        <div className="mb-7 max-w-[613px] text-center">
+          <Text size="text-xl" font="font-light">
+            {subtitle}
+          </Text>
+        </div>
       ) : null}
       {button?.text ? (
         <Button className="py-4 px-9" version={button?.version} {...button}>

package/src/components/ExchangeRateOffice/ExchangeRateOffice.tsx

@@ -23,7 +23,7 @@ export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
             className="whitespace-pre-wrap text-h4 mb-5"
           />
           <div className="pl-11">
-            <Text size="text-m-light" align="text-left" color="text-secondary-text">
+            <Text size="text-m" font="font-light" align="text-left" color="text-secondary-text">
               {actuality}
             </Text>
           </div>
@@ -34,7 +34,12 @@ export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
               <thead>
                 <tr>
                   <th>
-                    <Text size="text-m-light" align="text-left" color="text-secondary-text">
+                    <Text
+                      size="text-m"
+                      font="font-light"
+                      align="text-left"
+                      color="text-secondary-text"
+                    >
                       Валюта
                     </Text>
                   </th>

package/src/components/ExchangeRateOffice/renderTableHeader.tsx

@@ -3,7 +3,7 @@ import { Text } from '../../ui-kit/Text/Text';
 export const renderTableHeader = (title: string) => {
   return (
     <th className="pl-11">
-      <Text size="text-m-light" align="text-left" color="text-secondary-text">
+      <Text size="text-m" font="font-light" align="text-left" color="text-secondary-text">
         {title}
       </Text>
     </th>

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -3,7 +3,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import { formatCurrency } from './formatCurrency';
 
-const TABLE_HEAD_STYLE = 'text-left text-m-light text-secondary-text';
+const TABLE_HEAD_STYLE = 'text-left text-m font-light text-secondary-text';
 const TABLE_HEAD_STYLE_WITH_PL = `${TABLE_HEAD_STYLE} pl-11`;
 
 const CURRENCY_ICONS_MAP = {

package/src/components/Footer/Contacts.tsx

@@ -39,7 +39,7 @@ const renderContactsGroup = (item: ContactGroup, i: number) => (
 const renderContact = (item: ContactInfo, index: number) => (
   <div className="mb-4" key={String(index)}>
     <div>{renderText(item.type, item.text)}</div>
-    <div className="mt-1 text-s-light text-secondary-text">{item.description}</div>
+    <div className="mt-1 text-s font-light text-secondary-text">{item.description}</div>
   </div>
 );
 
@@ -56,7 +56,7 @@ const renderText = (type: ContactInfo['type'], text = '') => {
       );
     case 'email':
       return (
-        <a className="text-xl-light text-primary-text no-underline" href={`mailto:${text}`}>
+        <a className="text-xl font-light text-primary-text no-underline" href={`mailto:${text}`}>
           {text}
         </a>
       );

package/src/components/Footer/HorizontalNavigation.tsx

@@ -14,7 +14,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(({ className
             <HorizontalNavigationLink
               key={String(i)}
               index={i}
-              className="text-l-light max-w-[292px]"
+              className="text-l font-light max-w-[292px]"
               {..._}
             />
           ))}

package/src/components/Footer/SocialMedia.tsx

@@ -18,7 +18,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
           <MediaButton key={String(index)} buttonSize={buttonSize} {..._} />
         ))}
       </div>
-      <Text size="text-s-light" color="text-secondary-text">
+      <Text size="text-s" font="font-light" color="text-secondary-text">
         {children}
       </Text>
     </div>

package/src/components/Footer/TextInformation.tsx

@@ -2,12 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Text } from '../../ui-kit/Text/Text';
 import type { FooterLink } from './FooterLink';
 import { TextInformationLink } from './TextInformationLink';
-import { textInformationTextSize } from './textInformationTextSize';
 
 export const TextInformation = JSX<FooterLink>(({ className = '', links }) => (
   <div className={className}>
     <div className="pt-4 xl:pt-5">
-      <Text size={textInformationTextSize} color="text-secondary-text">
+      <Text size="text-xs" font="font-light" color="text-secondary-text">
         {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
       </Text>
     </div>

package/src/components/Footer/TextInformationLink.tsx

@@ -15,7 +15,7 @@ export const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
 
     return (
       <a
-        className={`text-xs-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`}
+        className={`text-xs font-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`}
         href={href}
         target={target}
         onClick={onClick}

package/src/components/GracePeriod/GracePeriod.tsx

@@ -50,7 +50,7 @@ const renderCalendar = (calendar: CalendarItem[]) => {
             style={{ flexBasis: _.flexBasis }}
           >
             <div className="flex">{renderMonthImages(_)}</div>
-            <div className="text-s-light text-primary-text mt-3">
+            <div className="text-s font-light text-primary-text mt-3">
               <span>{_.text}</span>&thinsp;
               <span className="text-primary-main">{_.greenText}</span>
             </div>

package/src/components/Header/DropdownMenu.tsx

@@ -53,7 +53,7 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
             <a
               key={item.href || String(i)}
               className={style(
-                'text-l-light pb-4 hover:text-primary-main',
+                'text-l font-light pb-4 hover:text-primary-main',
                 item === activeItem ? 'text-primary-main' : '',
               )}
               {...link(linkProps)}

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

@@ -1,12 +1,7 @@
 import '../../setup-fixture';
-
 import { Header } from './Header.mobile';
 
 export default {
   default: <Header />,
   transparent: <Header bgColor="transparent" />,
-  withTitle: <Header mobileHeaderType="withTitle" mobileTitle="Все кредитные карты" />,
-  backButton: (
-    <Header mobileHeaderType="backwardButton" mobileBackwardButtonTitle="Кредитные карты" />
-  ),
 };

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

@@ -18,12 +18,7 @@ const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
 };
 
 export const Header = JSX<HeaderMobileProps>(
-  ({
-    bgColor = 'bg-white',
-    version = BG_COLOR_TO_BLOCK_VERSION[bgColor],
-    mobileHeaderType = 'none',
-    ...rest
-  }) => {
+  ({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
     const fallback: Fallback | undefined = rest.options?.page?.fallback;
     const { logo, internetBankUrl } = useSWRResource<SitemapData>(
       projectSettings.SITEMAP || 'sitemap',
@@ -38,7 +33,6 @@ export const Header = JSX<HeaderMobileProps>(
             logo={logo}
             internetBankUrl={internetBankUrl}
             version={version}
-            mobileHeaderType={mobileHeaderType}
             {...rest}
           />
         </div>

package/src/components/Header/HeaderContent.ts

@@ -25,24 +25,10 @@ export type Logo = ImageContent & {
   title?: string;
 };
 
-/**
- * @title Мобильный тип шапки
- * @enumNames ["Не выбрано", "Название", "Кнопка возврата"]
- */
-export type MobileHeaderType = 'none' | 'withTitle' | 'backwardButton';
-
-export interface MobileHeaderProps {
-  mobileHeaderType?: MobileHeaderType;
-  /** @title Название (мобильная версия) */
-  mobileTitle?: string;
-  /** @title Кнопка возврата (мобильная версия) */
-  mobileBackwardButtonTitle?: string;
-}
-
 /**
  * @title Шапка (для мобильных горизонтальная прокрутка shift+mouseScroll)
  */
-export interface HeaderContent extends MobileHeaderProps {
+export interface HeaderContent {
   /** @hidden */
   showSubMenu?: boolean;
   /** @hidden */

package/src/components/Header/HeaderTop.tsx

@@ -5,15 +5,15 @@ import { Logo } from '../../ui-kit/Logo/Logo';
 import { Button } from '../../ui-kit/Button/Button';
 import { style } from '../../utils/style';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { MobileHeaderProps, MobileHeaderType } from './HeaderContent';
 import { Img } from '../../ui-kit/Img/Img';
+import { useRouter } from '../../hooks/useRouter';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 
-export interface HeaderTopProps extends MobileHeaderProps {
+export interface HeaderTopProps {
   bgColor?: BgColorVersion;
   logo?: LogoType;
   internetBankUrl?: string;
   version?: BlockVersion;
-  mobileHeaderType?: MobileHeaderType;
 }
 
 const BUTTON_STYLE = {
@@ -21,51 +21,42 @@ const BUTTON_STYLE = {
   transparent: 'text-white hover:text-primary-hover',
 };
 
-export const HeaderTop = JSX<HeaderTopProps>(
-  ({
-    bgColor,
-    logo,
-    internetBankUrl,
-    version,
-    mobileHeaderType,
-    mobileTitle,
-    mobileBackwardButtonTitle,
-  }) => {
-    const isTypeNone = mobileHeaderType === 'none';
-    const isTypeWithTitle = mobileHeaderType === 'withTitle';
+export const HeaderTop = JSX<HeaderTopProps>(({ bgColor, logo, internetBankUrl, version }) => {
+  const router = useRouter();
+  const isRootLocation = router.pathname === '/';
+  const onClick = useCallback(() => {
+    router.back();
+  }, []);
 
-    return (
-      <div className="flex items-center justify-between w-full">
-        {isTypeNone || isTypeWithTitle ? (
-          <Logo bgColor={bgColor} logo={logo} showTitle={isTypeNone} />
-        ) : null}
-        {isTypeWithTitle ? mobileTitle : null}
-        {mobileHeaderType === 'backwardButton' ? (
-          <Button className="flex items-center text-l">
-            <Img
-              className="w-6 h-6"
-              image={{
-                icon: 'ChevronLeft',
-                iconVersion: 'black',
-              }}
-            />
-            {mobileBackwardButtonTitle}
-          </Button>
-        ) : null}
-        {internetBankUrl ? (
-          <Button
-            href={internetBankUrl}
-            ariaLabel="Войти"
-            target="_blank"
-            className={style(
-              'p-3 my-1 text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
-              BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
-            )}
-          >
-            Войти
-          </Button>
-        ) : null}
-      </div>
-    );
-  },
-);
+  return (
+    <div className="flex items-center justify-between w-full">
+      {isRootLocation ? (
+        <Logo bgColor={bgColor} logo={logo} />
+      ) : (
+        <Button className="flex items-center text-l" ariaLabel="Вернуться назад" onClick={onClick}>
+          <Img
+            className="w-6 h-6"
+            image={{
+              icon: 'ChevronLeft',
+              iconVersion: 'black',
+            }}
+          />
+          Вернуться назад
+        </Button>
+      )}
+      {internetBankUrl ? (
+        <Button
+          href={internetBankUrl}
+          ariaLabel="Войти"
+          target="_blank"
+          className={style(
+            'p-3 my-1 text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
+            BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
+          )}
+        >
+          Войти
+        </Button>
+      ) : null}
+    </div>
+  );
+});

package/src/components/Headline/Headline.example.json

@@ -3,16 +3,6 @@
     "title": "Заголовок",
     "description": "Описание",
     "align": "center",
-    "bgColorHeadline": "transparent",
-    "headlineVersion": "M",
-    "image": {
-      "format": "webp",
-      "size": {
-        "width": 180,
-        "height": 180
-      },
-      "alt": "",
-      "title": ""
-    }
+    "headlineVersion": "M"
   }
 }

package/src/components/Headline/Headline.tsx

@@ -45,6 +45,7 @@ export const Headline = JSX<HeadlineProps>(
         {description ? (
           <Paragraph
             size={versionStyle.descriptionSize as TextSize}
+            font={versionStyle.descriptionWeight}
             align={align}
             {...descriptionStyle}
           >

package/src/components/Headline/HeadlineContent.ts

@@ -1,14 +1,12 @@
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
 /**
  * @title Заголовок
  */
 export type HeadlineContent = UniBlockContent &
-  HeadlineProps &
-  ImageContent & {
+  HeadlineProps & {
     /** @hidden */
     as?: HeadingTagType;
     /** @title Внутренний отступ блока */

package/src/components/Headline/headlineVersionStyles.ts

@@ -1,43 +1,50 @@
 import type { HeadlineSmallVersion, HeadlineVersion } from '../../model/HeadlineType';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
-import type { TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
+import type { FontWeight, TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
 
 export const headlineVersionStyles: Record<
   HeadlineVersion,
   {
     title: HeadingCommonProps;
     descriptionSize: TextSize | TitleSize;
+    descriptionWeight: FontWeight;
     descriptionStyle: string;
   }
 > = {
   XXL: {
     title: { headingType: 'h0', as: 'h1' },
     descriptionSize: 'text-h5',
+    descriptionWeight: 'font-normal',
     descriptionStyle: 'mt-m',
   },
   XL: {
     title: { headingType: 'h1', as: 'h1' },
-    descriptionSize: 'text-xl-light',
+    descriptionSize: 'text-xl',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-s',
   },
   L: {
     title: { headingType: 'h2', as: 'h2' },
-    descriptionSize: 'text-xl-light',
+    descriptionSize: 'text-xl',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-s',
   },
   M: {
     title: { headingType: 'h3', as: 'h2' },
-    descriptionSize: 'text-xl-light',
+    descriptionSize: 'text-xl',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-text',
   },
   S: {
     title: { headingType: 'h4', as: 'h2' },
-    descriptionSize: 'text-xl-light',
+    descriptionSize: 'text-xl',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-xs',
   },
   XS: {
     title: { headingType: 'h5', as: 'h2' },
-    descriptionSize: 'text-l-light',
+    descriptionSize: 'text-l',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-xs',
   },
 };

package/src/components/HorizontalLayout/HorizontalLayout.fixture.tsx

@@ -9,9 +9,9 @@ import { HorizontalLayout } from './HorizontalLayout';
 export const linkDocsExample: LinkDocsContent = {
   description: 'Ответы на часто задаваемые вопросы',
   documents: [
-    { text: 'target self', href: '/abc1/cooldoc.doc', target: '_self' },
-    { text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },
-    { text: 'GlassIcon', href: '/abc3/map.jpeg' },
+    { docType: 'Link', text: 'target self', href: '/abc1/cooldoc.doc', target: '_self' },
+    { docType: 'Link', text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },
+    { docType: 'Link', text: 'GlassIcon', href: '/abc3/map.jpeg' },
   ],
 };
 

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -74,7 +74,7 @@ function renderNavButton({ title, i, isActive, onClick }: NavButtonProps) {
       key={String(i)}
       onClick={onClick}
       aria-label={title}
-      className={`box-border px-4 py-3 text-m-light ${btnClassName}`}
+      className={`box-border px-4 py-3 text-m font-light ${btnClassName}`}
     >
       {title}
     </button>

package/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -45,7 +45,7 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
 
   return (
     <BlockWrapper className={className} {...rest}>
-      <div className="container text-m-light">
+      <div className="container text-m font-light">
         {columns?.length ? (
           <div>
             <div className="flex items-end relative pl-9 pr-5 text-white">

package/src/components/LinkDocs/LinkDocItem.tsx

@@ -0,0 +1,44 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { VNode } from '../../model/VNode';
+import { Text } from '../../ui-kit/Text/Text';
+import type { LinkDoc } from './LinkDocsContent';
+
+export interface LinkDocItemProps extends LinkDoc {
+  icon?: VNode;
+}
+
+export const LinkDocItem = JSX<LinkDocItemProps>(({ icon, text, fileSize, ...linkProps }) => (
+  <a
+    className="flex box-border gap-3 group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main"
+    role="link"
+    {...linkProps}
+  >
+    {icon}
+    {text ? (
+      <Text size="text-l" font="font-light">
+        {text}
+        <Text color="text-secondary-text">
+          {linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize)}
+        </Text>
+      </Text>
+    ) : null}
+  </a>
+));
+
+const formatSuffix = (ext?: string, fileSize?: string) => {
+  const prefix = ext || fileSize ? ',' : '';
+  const extension = ext ? ` ${ext}` : '';
+  const size = fileSize ? ` (${fileSize})` : '';
+
+  return prefix + extension + size;
+};
+
+const getExtFromHref = (href: string) => {
+  if (!href) {
+    return '';
+  }
+
+  const index = href.lastIndexOf('.');
+
+  return index !== -1 ? href.substring(index + 1) : '';
+};

package/src/components/LinkDocs/LinkDocs.example.json

@@ -14,21 +14,25 @@
     },
     "documents": [
       {
+        "docType": "Link",
         "text": "Документ №1",
         "href": "/documents/document1.doc",
         "fileSize": "123КБ"
       },
       {
+        "docType": "Link",
         "text": "Документ №2",
         "href": "/documents/document2.rtf",
         "target": "_blank"
       },
       {
+        "docType": "Link",
         "text": "Документ №3",
         "href": "/abc3/map.jpeg",
         "fileSize": "2МБ"
       },
       {
+        "docType": "Link",
         "text": "Документ №4",
         "href": "/abc/map.rar"
       }