@redneckz/wildless-cms-uni-blocks 0.14.26 → 0.14.28

package/mobile/src/components/ApplicationForm/ApplicationFormIndividuals.tsx

@@ -0,0 +1,74 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { objectValidator } from '../../validation/objectValidator';
+import { isValidationSuccess } from '../../validation/validator';
+import { withValidator } from '../../validation/withValidator';
+import { type ApplicationFormsProps } from './ApplicationFormsProps';
+import { Footnote } from './Footnote';
+import { type IndividualsFormState } from './IndividualsFormState';
+import { renderIndividualsFields } from './renderIndividualsFields';
+import { renderSubmitButton } from './renderSubmitButton';
+import { defaultValidator, nameValidator, phoneValidator } from './validators';
+
+const initialFormState: IndividualsFormState = {
+  surname: '',
+  name: '',
+  middleName: '',
+  phone: '',
+  mail: '',
+  date: undefined,
+  consentDataProcessing: true,
+};
+
+const individualsValidator = objectValidator({
+  surname: nameValidator,
+  name: nameValidator,
+  middleName: nameValidator,
+  phone: phoneValidator,
+  mail: defaultValidator,
+  date: defaultValidator,
+});
+
+export const ApplicationFormIndividuals = JSX<ApplicationFormsProps>((props) => {
+  const { button, link, product, onSubmit } = props;
+
+  const handleSubmit = useCallback(
+    (formState: IndividualsFormState) => {
+      const { surname, name, middleName, phone, mail, date, consentDataProcessing } = formState;
+
+      isValidationSuccess(individualsValidator(formState)) &&
+        onSubmit(
+          {
+            typeForm: 'dpst',
+            surname,
+            name,
+            middleName,
+            mail,
+            consentDataProcessing,
+            phone: phone.replace(/[^+\d]/g, ''),
+            date: date?.toISOString().slice(0, 10) || '',
+            product: product || '',
+          },
+          true,
+        );
+    },
+    [onSubmit],
+  );
+
+  const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
+
+  return (
+    <form className="container space-y-s" onSubmit={formProps.onSubmit}>
+      {renderIndividualsFields(field)}
+      <div className="@xl:flex justify-between items-center">
+        <div className="@xl:mb-0 mb-2 flex items-center gap-3">
+          <Checkbox {...withValidator(field('consentDataProcessing'), defaultValidator)} />
+          <Footnote text="Согласен с " link={link} />
+        </div>
+        {renderSubmitButton(button)}
+      </div>
+    </form>
+  );
+});

package/mobile/src/components/ApplicationForm/ApplicationFormsProps.ts

@@ -5,5 +5,6 @@ export interface ApplicationFormsProps<S extends Record<string, any> = Record<st
   button?: SubmitButtonProps;
   link?: LinkProps;
   sourceBookDir?: string;
-  onSubmit: (data: S) => void;
+  product?: string;
+  onSubmit: (data: S, isIndividualType?: boolean) => void;
 }

package/mobile/src/components/ApplicationForm/DatePickerControl.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DatePicker } from '../../ui-kit/DatePicker/DatePicker';
+import { Text } from '../../ui-kit/Text/Text';
+
+export interface DatePickerControlProps {
+  className: string;
+  label: string;
+  value?: Date;
+  error?: string;
+  onChange?: (value: Date) => void;
+}
+
+export const DatePickerControl = JSX<DatePickerControlProps>(
+  ({ className, label, value = undefined, error, onChange }) => (
+    <div className={className}>
+      {label ? (
+        <div className="mb-xs">
+          <Text size="text-m" font="font-light">
+            {label}
+          </Text>
+        </div>
+      ) : null}
+      <DatePicker value={value} onChange={onChange} valid={Boolean(!error)} />
+      <div className="h-2">
+        {error ? (
+          <Text size="text-xs" font="font-light" color="text-error">
+            {error}
+          </Text>
+        ) : null}
+      </div>
+    </div>
+  ),
+);

package/mobile/src/components/ApplicationForm/EmbeddableForms.tsx

@@ -3,6 +3,7 @@ import { ApplicationFormBusinessCard } from './ApplicationFormBusinessCard';
 import { ApplicationFormCredit } from './ApplicationFormCredit';
 import { ApplicationFormDeposit } from './ApplicationFormDeposit';
 import { ApplicationFormGrantSupport } from './ApplicationFormGrantSupport';
+import { ApplicationFormIndividuals } from './ApplicationFormIndividuals';
 import { ApplicationFormWed } from './ApplicationFormWed';
 
 export const EmbeddableForms = {
@@ -12,4 +13,5 @@ export const EmbeddableForms = {
   ApplicationFormCredit,
   ApplicationFormAcquiring,
   ApplicationFormGrantSupport,
+  ApplicationFormIndividuals,
 };

package/mobile/src/components/ApplicationForm/Footnote.tsx

@@ -5,12 +5,13 @@ import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 
 interface FootnoteProps {
+  text?: string;
   link?: LinkProps;
 }
 
-export const Footnote = JSX<FootnoteProps>(({ link }) => (
+export const Footnote = JSX<FootnoteProps>(({ text, link }) => (
   <Paragraph size="text-s" font="font-light" color="text-secondary-text">
-    <Text>Нажимая кнопку, вы подтверждаете согласие с </Text>
+    <Text>{text || 'Нажимая кнопку, вы подтверждаете согласие с '}</Text>
     {link ? (
       <Button
         href={link.href}

package/mobile/src/components/ApplicationForm/IndividualsFormState.ts

@@ -0,0 +1,9 @@
+export interface IndividualsFormState {
+  surname: string;
+  name: string;
+  middleName: string;
+  phone: string;
+  mail: string;
+  date: Date | undefined;
+  consentDataProcessing: boolean;
+}

package/mobile/src/components/ApplicationForm/renderIndividualsFields.tsx

@@ -0,0 +1,46 @@
+import { type FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
+import { DatePickerControl } from './DatePickerControl';
+import { type IndividualsFormState } from './IndividualsFormState';
+import { InputControl } from './InputControl';
+import { PhoneInputControl } from './PhoneInputControl';
+import { defaultValidator, nameValidator, phoneValidator } from './validators';
+
+export const renderIndividualsFields = (field: FormFieldRegisterer<IndividualsFormState>) => (
+  <div className="@xl:flex @xl:justify-between @xl:gap-lg">
+    <div className="@xl:w-1/2 space-y-s">
+      <InputControl
+        className="shrink-0 w-full"
+        label="Фамилия"
+        {...withValidator(field('surname'), nameValidator)}
+      />
+      <InputControl
+        className="shrink-0 w-full"
+        label="Отчество"
+        {...withValidator(field('middleName'), nameValidator)}
+      />
+      <PhoneInputControl
+        className="shrink-0 w-full"
+        label="Телефон"
+        {...withValidator(field('phone'), phoneValidator)}
+      />
+    </div>
+    <div className="@xl:w-1/2 space-y-s">
+      <InputControl
+        className="shrink-0 w-full"
+        label="Имя"
+        {...withValidator(field('name'), nameValidator)}
+      />
+      <DatePickerControl
+        className="shrink-0 w-full"
+        label="Дата рождения"
+        {...withValidator(field('date'), defaultValidator)}
+      />
+      <InputControl
+        className="shrink-0 w-full"
+        label="Электронная почта"
+        {...withValidator(field('mail'), defaultValidator)}
+      />
+    </div>
+  </div>
+);

package/mobile/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -27,6 +27,7 @@ export type ListBenefitDef = ListContent & {
 
 /**
  * @title Вид контента
+ * @default null
  */
 export type DescriptionDef = EmptyOption | TextBenefitDef | ListBenefitDef;
 

package/mobile/src/components/Bonus/BonusContent.ts

@@ -27,6 +27,7 @@ export type BonusCountDef = {
 
 /**
  * @title Вид контента
+ * @default null
  */
 export type BonusItemContentDef = EmptyOption | BonusImageDef | BonusCountDef;
 

package/mobile/src/components/Calculator/Calculator.tsx

@@ -12,8 +12,8 @@ import { EmbeddableCalcBlocks } from './EmbeddableCalcBlocks';
 
 export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
 
-export const Calculator = JSX<CalculatorProps>(({ className, calculatorTabs = [] }) => (
-  <BlockWrapper className={className} defaultPadding="p-0">
+export const Calculator = JSX<CalculatorProps>(({ className, calculatorTabs = [], ...rest }) => (
+  <BlockWrapper className={className} defaultPadding="p-0" {...rest}>
     {renderTabs(calculatorTabs)}
   </BlockWrapper>
 ));
@@ -28,7 +28,7 @@ const renderCalculator = (tab: CalculatorTab) => {
   const EmbeddedBlock = EmbeddableCalcBlocks[type];
 
   return (
-    <div>
+    <div className="p-xl">
       {tab?.calculatorBlock?.title ? (
         <Heading className="mb-lg" title={tab?.calculatorBlock?.title} />
       ) : null}
@@ -45,7 +45,7 @@ const renderTabs = (tabs: CalculatorTab[]) => {
   const isSingleTab = tabs.length === 1;
 
   if (isSingleTab) {
-    return <BlockWrapper>{renderCalculator(tabs[0])}</BlockWrapper>;
+    return renderCalculator(tabs[0]);
   }
 
   return tabs.map((tab, index) => (
@@ -54,9 +54,7 @@ const renderTabs = (tabs: CalculatorTab[]) => {
       isFoldButtonOnTop
       unfoldedByDefault={index === 0}
       renderFoldableSection={({ isUnfolded }) => (
-        <FoldableSection isUnfolded={isUnfolded}>
-          <BlockWrapper>{renderCalculator(tab)}</BlockWrapper>
-        </FoldableSection>
+        <FoldableSection isUnfolded={isUnfolded}>{renderCalculator(tab)}</FoldableSection>
       )}
       renderFoldButton={renderFoldButton(tab)}
     />
@@ -66,6 +64,8 @@ const renderTabs = (tabs: CalculatorTab[]) => {
 const renderFoldButton =
   (tab: CalculatorTab) =>
   ({ isUnfolded, onToggle }: FoldablePartProps) => {
+    const align = tab.nav?.align || 'text-left';
+
     return (
       <button
         onClick={onToggle}
@@ -75,10 +75,10 @@ const renderFoldButton =
           <Icon name={tab.nav?.icon?.icon} iconVersion="color" width="24" height="24" />
         </div>
         <div className="flex-1 flex flex-col pl-s">
-          <Text align="text-left" color="text-white">
+          <Text align={align} color="text-white">
             {tab.nav?.title}
           </Text>
-          <Text align="text-left" size="text-s" color="text-white" font="font-light">
+          <Text align={align} size="text-s" color="text-white" font="font-light">
             {tab.nav?.description}
           </Text>
         </div>

package/mobile/src/components/Calculator/CalculatorContent.ts

@@ -28,6 +28,7 @@ export type IPRateDef = RateParams & {
 
 /**
  * @title Назначение ставки
+ * @default null
  */
 export type RateParamsDef = EmptyOption | ULRateDef | IPRateDef;
 
@@ -154,6 +155,7 @@ export type RefinancingCalculatorParamsDef = TitleProps &
 
 /**
  * @title Настройки калькулятора
+ * @default null
  */
 export type CalculatorBlockDef =
   | EmptyOption
@@ -180,6 +182,7 @@ export type CalculatorTab = {
  * @title Калькулятор
  */
 export interface CalculatorContent {
+  /** @title Выравнивание вкладок */
   tabAlign?: Align;
   /** @title Вкладки */
   calculatorTabs?: CalculatorTab[];

package/mobile/src/components/Carousel/renderCarouselCards.tsx

@@ -3,6 +3,7 @@ import { renderBlock } from '../../BlockRenderer/renderBlock';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { type BlockDef } from '../../model/ContentPageDef';
 import { type UniBlockProps } from '../../model/JSXBlock';
+import { getBorderStyle } from '../../utils/getBorderStyle';
 import { style } from '../../utils/style';
 import { type CardSizeMode } from './CarouselContent';
 import { renderCardHighlight } from './renderCardHighlight';
@@ -67,8 +68,8 @@ const cardStyle = (
     'min-w-80',
     CARD_SIZE_MAP[cardSize], // TODO fix для RecommendationCard
     someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'),
-    showBorder &&
-      'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider',
+    getBorderStyle(showBorder),
+    showBorder && 'h-full',
   );
 
 const isCardHighlighted = (_: BlockDef | undefined) =>

package/mobile/src/components/CarouselCard/CarouselCard.tsx

@@ -19,7 +19,7 @@ export const CarouselCard = JSX<CarouselCardProps>(
       defaultPadding="p-0"
       {...rest}
     >
-      <div className="relative">
+      <div className="relative h-full">
         <div className={style(layerStyle, 'top-9 right-12 bg-green-dark')} />
         <div className={style(layerStyle, 'top-6 right-8 bg-green')} />
         <div className={style(layerStyle, 'top-3 right-4 bg-green-light')} />

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -25,7 +25,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
 
     return (
-      <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-3xl" {...rest}>
+      <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-2xl" {...rest}>
         {isIcon(icon) ? (
           <div className="self-center">
             <Img image={icon} />
@@ -34,7 +34,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
         {title ? (
           <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
         ) : null}
-        {button ? <Button className="w-full mt-m" {...button} /> : null}
+        {button ? <Button className="w-full mt-m mb-lg" {...button} /> : null}
         {cardCells.length ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (

package/mobile/src/components/Footer/Footer.tsx

@@ -45,10 +45,12 @@ export const Footer = JSX<FooterProps>(({ className, ...rest }) => {
         <SocialMedia className="mb-xl" media={socialMedia} stretched={true}>
           Соцсети
         </SocialMedia>
-        <Text size="text-s" font="font-light" color="text-secondary-text">
-          Мобильное приложение
-        </Text>
-        <div className="mt-xs">{mobileApps?.map(renderButton)}</div>
+        <div className="mb-xl">
+          <div className="flex flex-col gap-4 mb-xs">{mobileApps?.map(renderButton)}</div>
+          <Text size="text-s" font="font-light" color="text-secondary-text">
+            Мобильное приложение
+          </Text>
+        </div>
       </div>
       <div className="py-lg border-t border-main-divider">
         <HorizontalNavigationLink
@@ -74,7 +76,7 @@ const renderButton = ({ href = '/', text }: LinkProps, i: number) => {
   return (
     <Button
       key={String(i)}
-      className="w-full mb-lg"
+      className="w-full"
       text={text || label}
       version="secondary"
       href={href}

package/mobile/src/components/Footer/HorizontalNavigation.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type TitleProps } from '../../model/HeadlineType';
 import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import { type FooterLink } from './FooterLink';
 import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 
@@ -8,7 +9,7 @@ export interface HorizontalNavigationProps extends FooterLink, TitleProps {}
 
 export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
   ({ title, links, className = '' }) => (
-    <div className={className}>
+    <div className={style('flex flex-col gap-4', className)}>
       <Text size="text-l" font="font-normal">
         {title}
       </Text>

package/mobile/src/components/Footer/SocialMedia.tsx

@@ -39,23 +39,23 @@ export const SocialMedia = JSX<SocialMediaProps>(
 
     const buttonClassName = style(
       'border border-solid hover:border-transparent group-data-primary:border-main-divider border-main-divider group-data-gray:border-green group/media',
-      showButtonText && hasText ? '' : ' basis-auto',
+      showButtonText && hasText ? '' : 'basis-auto',
       stretched ? 'flex-1 justify-center' : '',
     );
 
     return (
-      <div className="flex flex-col sm:flex-col-reverse gap-xs">
-        {children ? (
-          <Text size="text-s" font="font-light" color="text-secondary-text">
-            {children}
-          </Text>
-        ) : null}
-        <div className={style('flex gap-xs', className)}>
+      <div className={style('flex flex-col gap-xs', className)}>
+        <div className="flex gap-xs">
           {renderButtonsSection(buttons, {
             className: stretched ? 'w-full' : '',
             buttonClassName,
           })}
         </div>
+        {children ? (
+          <Text size="text-s" font="font-light" color="text-secondary-text">
+            {children}
+          </Text>
+        ) : null}
       </div>
     );
   },

package/mobile/src/components/Footer/iconsMap.ts

@@ -35,4 +35,8 @@ export const ICONS_MAP: Array<IconsMapItem> = [
     origins: ['rutube.ru'],
     iconMapped: { icon: 'RutubeIcon' },
   },
+  {
+    origins: ['dzen.ru'],
+    iconMapped: { icon: 'DzenIcon' },
+  },
 ];

package/mobile/src/components/LinkDocs/LinkDocItem.tsx

@@ -7,38 +7,28 @@ export interface LinkDocItemProps extends LinkDoc {
   icon?: VNode;
 }
 
-export const LinkDocItem = JSX<LinkDocItemProps>(({ icon, text, fileSize, ...linkProps }) => (
-  <a
-    className="flex box-border gap-s 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>
-));
+export const LinkDocItem = JSX<LinkDocItemProps>(
+  ({ icon, text, fileFormat, fileSize, ...linkProps }) => {
+    const prefix = fileFormat || fileSize ? ',' : '';
+    const size = fileSize ?? '';
+    const format = fileFormat ? String(fileFormat) : '';
 
-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) : '';
-};
+    return (
+      <a
+        className="flex box-border gap-s 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 && `${size} ${prefix} ${format}`}
+            </Text>
+          </Text>
+        ) : null}
+      </a>
+    );
+  },
+);

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

@@ -17,12 +17,14 @@
         "docType": "Link",
         "text": "Документ №1",
         "href": "/documents/document1.doc",
+        "fileFormat": "doc",
         "fileSize": "123КБ"
       },
       {
         "docType": "Link",
         "text": "Документ №2",
         "href": "/documents/document2.rtf",
+        "fileFormat": "rtf",
         "target": "_blank"
       },
       {
@@ -34,7 +36,8 @@
       {
         "docType": "Link",
         "text": "Документ №4",
-        "href": "/abc/map.rar"
+        "href": "/abc/map.rar",
+        "fileFormat": "rar"
       }
     ],
     "columnsMode": "double",

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -51,7 +51,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
             )}
             role="list"
           >
-            {documents.map(renderLinkDocItem(router, columnsMode, icon))}
+            {documents.map(renderLinkDocItem(router, icon))}
           </div>
         ) : null}
       </BlockWrapper>
@@ -60,8 +60,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
 );
 
 const renderLinkDocItem =
-  (router: Router, columnsMode: LinkColumnsMode, icon: Picture) =>
-  (docBlockDef: DocBlockDef, i: number) => {
+  (router: Router, icon: Picture) => (docBlockDef: DocBlockDef, i: number) => {
     const href =
       docBlockDef?.docType === 'Attachment'
         ? adjustHref(router)(docBlockDef?.attachment?.src)
@@ -72,12 +71,15 @@ const renderLinkDocItem =
         ? formatBytes(docBlockDef?.attachment?.fileSize || 0)
         : docBlockDef?.fileSize;
 
+    const fileFormat = docBlockDef?.docType !== 'Attachment' ? docBlockDef?.fileFormat : '';
+
     return (
       <div key={String(i)} role="listitem">
         <LinkDocItem
           text={docBlockDef?.text}
           target={docBlockDef?.target}
           href={href}
+          fileFormat={fileFormat}
           fileSize={fileSize}
           icon={icon ? <Img className={linkIconStyle} image={icon} width="24" height="24" /> : null}
         />

package/mobile/src/components/LinkDocs/LinkDocsContent.ts

@@ -17,6 +17,8 @@ export type LinkColumnsMode = 'single' | 'double';
 export interface LinkDoc extends LinkProps {
   /** @title размер файла */
   fileSize?: string;
+  /** @title формат файла */
+  fileFormat?: string;
 }
 
 export interface AttachmentDoc {
@@ -44,6 +46,10 @@ export type AttachmentDocDef = AttachmentDoc & {
   docType: 'Attachment';
 };
 
+/**
+ * @title Документ
+ * @default null
+ */
 export type DocBlockDef = EmptyOption | LinkDocDef | AttachmentDocDef;
 
 /**

package/mobile/src/components/LinkDocs/linkDocsContentExample.ts

@@ -10,28 +10,37 @@ export const linkDocsContentExample: LinkDocsContent = {
       attachment: { src: '/abc1/cooldoc.doc' },
       target: '_self',
     },
-    { docType: 'Link', text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },
-    { docType: 'Link', text: 'GlassIcon', href: '/abc3/map.jpeg' },
-    { docType: 'Link', text: 'no icon', href: '/abc4' },
+    {
+      docType: 'Link',
+      text: 'target blank',
+      href: '/abc2/wtf.rtf',
+      fileFormat: 'rtf',
+      target: '_blank',
+    },
+    { docType: 'Link', text: 'GlassIcon', href: '/abc3/map.jpeg', fileFormat: 'jpeg' },
+    { docType: 'Link', text: 'no icon', href: '/abc4', fileFormat: 'rtf' },
     { docType: 'Link', text: 'документ 5', href: '/abc5' },
-    { docType: 'Link', text: 'документ 6', href: '/abc6/abc.pdf' },
-    { docType: 'Link', text: 'Text text text', href: '/abc7/yolo.png' },
+    { docType: 'Link', text: 'документ 6', href: '/abc6/abc.pdf', fileFormat: 'pdf' },
+    { docType: 'Link', text: 'Text text text', href: '/abc7/yolo.png', fileFormat: 'png' },
     {
       docType: 'Link',
       text: 'Some more generic text to stretch item, and even more, more text, and more generic text, and even more, more text, and even more',
       href: '/abc8/archive.zip',
+      fileFormat: 'zip',
       fileSize: '2.3МБ',
     },
     {
       docType: 'Link',
       text: 'И ещё немного текста',
       href: '/abc9/rarniw.rar',
+      fileFormat: 'rar',
       fileSize: '666МБ',
     },
     {
       docType: 'Link',
       text: 'Форматируем, сортируем, смотрим как отображается...',
       href: '/abc10/',
+      fileFormat: 'pdf',
       fileSize: '65ГБ',
     },
   ],

package/mobile/src/components/MobileAppTile/MobileAppTile.example.json

@@ -30,6 +30,7 @@
     "title": "Мобильное приложение",
     "description": "Загрузить для IOS и Android",
     "version": "primary",
-    "headingType": "h4"
+    "headingType": "h4",
+    "additionalDescription": "Наведите камеру телефона на QR-код и скачайте приложение"
   }
 }