@redneckz/wildless-cms-uni-blocks 0.11.2 → 0.12.3

package/src/components/ContactsBlock/ContactsBlock.tsx

@@ -4,6 +4,7 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import type { ContactBlockProps, ContactsBlockContent } from './ContactsBlockContent';
 
@@ -16,8 +17,13 @@ interface RenderContactsColumnProps {
 }
 
 export const ContactsBlock = JSX<ContactsBlockProps>(
-  ({ className = '', contacts, info, version = 'secondary', ...rest }) => (
-    <BlockWrapper className={`flex p-default ${className}`} version={version} {...rest}>
+  ({ className, contacts, info, version = 'secondary', ...rest }) => (
+    <BlockWrapper
+      className={style('flex', className)}
+      defaultPadding="p-default"
+      version={version}
+      {...rest}
+    >
       {info?.length ? renderBlocks(info) : null}
       {contacts?.length ? renderBlocks(contacts) : null}
     </BlockWrapper>
@@ -49,7 +55,7 @@ const renderBlocksColumn = ({ column, index }: RenderContactsColumnProps) =>
               </Paragraph>
             </div>
           ) : null}
-          {button ? <Button className="mt-6" {...button} /> : null}
+          {button?.href ? <Button className="mt-6" {...button} /> : null}
         </div>
       ))}
     </div>

package/src/components/DepositFiltration/DepositFiltration.example.json

@@ -54,7 +54,7 @@
       "version": "secondary"
     },
     "notFound": {
-      "title": "Нет подходящей ипотечной программы",
+      "title": "Нет подходящей программы",
       "description": "Попробуйте очистить фильтры"
     }
   }

package/src/components/DepositFiltration/DepositFiltration.fixture.tsx

@@ -112,7 +112,7 @@ export default {
         periodInput={{ title: 'Срок, месяцев', min: 3, max: 36 }}
         resetButton={{ text: 'Очистить фильтры', version: 'secondary' }}
         notFound={{
-          title: 'Нет подходящей ипотечной программы',
+          title: 'Нет подходящей программы',
           description: 'Попробуйте очистить фильтры',
         }}
         block={{

package/src/components/DepositFiltration/DepositFiltration.tsx

@@ -53,7 +53,12 @@ export const DepositFiltration: JSXBlock<DepositFiltrationProps> = JSX<DepositFi
     );
 
     return (
-      <BlockWrapper className={style(className)} version="transparent" {...rest}>
+      <BlockWrapper
+        className={style(className)}
+        defaultPadding="p-0"
+        version="transparent"
+        {...rest}
+      >
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton, children: Inputs })}
         <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
       </BlockWrapper>

package/src/components/ErrorBlock/ErrorBlock.tsx

@@ -26,11 +26,8 @@ const getErrorBlockStyle = (text: string) => (text ? 'py-20 pt-3 pb-1' : 'mb-16
 export const ErrorBlock = JSX<ErrorBlockProps>(
   ({ className = '', title, subtitle, error, button, ...rest }) => (
     <BlockWrapper
-      className={style(
-        'flex flex-col justify-center items-center',
-        getErrorBlockStyle(button?.text as string),
-        className,
-      )}
+      className={style('flex flex-col justify-center items-center', className)}
+      defaultPadding={getErrorBlockStyle(button?.text as string)}
       version="transparent"
       {...rest}
     >

package/src/components/ExchangeRateOffice/ExchangeRateOffice.tsx

@@ -11,15 +11,12 @@ import { renderTableHeader } from './renderTableHeader';
 export interface ExchangeRateOfficeProps extends ExchangeRateOfficeContent, UniBlockProps {}
 
 export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
-  ({ className = '', currencies = [], actuality = '', officeName = '', ...rest }) => {
+  ({ className, currencies = [], actuality = '', officeName = '', ...rest }) => {
     const fourRates: CurrencyInformation[] = topNRates(currencies, 4);
 
     return (
-      <BlockWrapper
-        className={style('font-sans text-primary-text py-10 bg-white', className)}
-        {...rest}
-      >
-        <div className="flex flex-row flex-grow-0 justify-between mx-10 mb-8">
+      <BlockWrapper className={className} {...rest}>
+        <div className="flex flex-row flex-grow-0 justify-between mb-8">
           <Heading
             headingType="h4"
             title={'Курс обмена валют в ' + officeName}
@@ -31,7 +28,7 @@ export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
             </Text>
           </div>
         </div>
-        <div className="flex flex-row ml-8 mr-14 pt-4 text-left">
+        <div className="flex flex-row pt-4 text-left">
           {fourRates.length > 0 ? (
             <table className={style('h-fit w-fit', className)}>
               <thead>

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -72,7 +72,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
             ),
         })}
         {button?.text ? (
-          <Button className="py-4 mr-1" version={button?.version} {...button}>
+          <Button className="py-4" version={button?.version} {...button}>
             {button.text}
           </Button>
         ) : null}

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { BaseTile } from '../BaseTile/BaseTile';
+import { style } from '../../utils/style';
 import { Currency } from './CurrencyProps';
 import { CurrencyTable } from './CurrencyTable';
 import { CurrentLocation } from './CurrentLocation';
@@ -25,16 +26,15 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
     currencyRatesSell.push({ currency: { currency: Currency.RUB } });
 
     return (
-      <BlockWrapper className={`p-9 box-border min-h-80 ${className}`} {...rest}>
+      <BlockWrapper className={style('box-border min-h-80', className)} {...rest}>
         <BaseTile
-          title={
-            <Heading headingType="h4" title={title} className="whitespace-pre-wrap text-h4 mb-5" />
-          }
+          className="h-full"
+          title={<Heading headingType="h4" title={title} className="whitespace-pre-wrap" />}
         >
-          <div className="flex">
-            <div className="mr-14 pt-4">
+          <div className="flex gap-xxl">
+            <div>
               {currencyRates ? (
-                <CurrencyTable className="mb-[30px]" exchangeCurrencyItems={currencyRates} />
+                <CurrencyTable className="mb-xl" exchangeCurrencyItems={currencyRates} />
               ) : null}
               <CurrentLocation address={exchangeRates?.address} />
             </div>

package/src/components/Footer/Contacts.tsx

@@ -1,16 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
-import type { ContactInfo } from './FooterContent';
+import { Text } from '../../ui-kit/Text/Text';
+import type { ContactGroup, ContactInfo } from './FooterContent';
 
 export interface ContactsProps {
   className?: string;
-  items?: ContactInfo[];
+  items?: ContactGroup[];
   hasButton?: boolean;
 }
 
 export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }) => (
   <div className={className}>
-    {items?.length ? items.map(renderContact) : null}
+    {items?.length ? items.map(renderContactsGroup) : null}
     {hasButton ? (
       <Button
         version="primary"
@@ -24,16 +25,23 @@ export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }
   </div>
 ));
 
-const renderContact = (item: ContactInfo, index: number) => {
-  const { type, text, description } = item;
-
-  return (
-    <div className="mb-4" key={String(index)}>
-      <div>{renderText(type, text)}</div>
-      <div className="mt-1 text-s-light text-secondary-text">{description}</div>
+const renderContactsGroup = (item: ContactGroup, i: number) => (
+  <div className="mb-6" key={String(i)}>
+    <div className="mb-4">
+      <Text size="text-l" font="font-medium">
+        {item?.title}
+      </Text>
     </div>
-  );
-};
+    <div>{item.items?.map(renderContact)}</div>
+  </div>
+);
+
+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>
+);
 
 const renderText = (type: ContactInfo['type'], text = '') => {
   switch (type) {

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

@@ -6,7 +6,6 @@ import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { LinkList } from '../../ui-kit/LinkList/LinkList';
-import { style } from '../../utils/style';
 import { RollupItem } from '../RollupItem/RollupItem';
 import { Contacts } from './Contacts';
 import type { FooterContent } from './FooterContent';
@@ -21,11 +20,11 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
   const fallback = rest.options?.page?.fallback;
 
   const sitemap = useSWRResource<SitemapData>(projectSettings.SITEMAP || 'sitemap', fallback);
-  const { documents, relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } =
+  const { relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } =
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
   return (
-    <BlockWrapper tag="footer" className={style('px-4 py-6', className)} {...rest}>
+    <BlockWrapper tag="footer" className={className} defaultPadding="px-4 py-6" {...rest}>
       <div className="mb-4 pb-5 border-b border-main-divider">
         {sitemap.topItems?.map((item, i) => (
           <RollupItem key={String(i)} label={item?.text} labelIcon={item?.icon}>

package/src/components/Footer/Footer.tsx

@@ -26,8 +26,8 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
   return (
-    <BlockWrapper tag="footer" className={`p-9 ${className}`} {...rest}>
-      <div className="flex items-stretch gap-[54px] pb-[30px] xl:gap-8">
+    <BlockWrapper tag="footer" className={className} {...rest}>
+      <div className="flex items-stretch gap-[54px] pb-8 xl:gap-8">
         <Logo className={LEFT_COL_WIDTH_FULL_HD} logo={logo} />
         <SearchBar className="grow" />
       </div>

package/src/components/Footer/FooterContent.ts

@@ -1,7 +1,7 @@
 import type { DescriptionProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
-import type { UniBlockContent } from '../../model/JSXBlock';
 
 /**
  * @title Тип контакта
@@ -21,6 +21,15 @@ export type ContactInfo = DescriptionProps & {
   type?: ContactType;
 };
 
+/**
+ * @title Группа контактов
+ */
+export type ContactGroup = {
+  /** @title Имя */
+  title?: string;
+  items?: ContactInfo[];
+};
+
 /**
  * @title Пункт подменю
  */

package/src/components/Footer/FooterDataProps.ts

@@ -1,12 +1,12 @@
 import type { LinkCommonProps, LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
-import type { ContactInfo, SubMenuItem } from './FooterContent';
+import type { ContactGroup, SubMenuItem } from './FooterContent';
 
 export interface FooterDataProps extends SitemapData {
   documents?: LinkProps[];
   relatedEnterprises?: LinkProps[];
-  contacts?: ContactInfo[];
+  contacts?: ContactGroup[];
   socialMedia?: LinkCommonProps[];
   mobileApps?: LinkCommonProps[];
   horizontalNavigationTitle?: string; // TODO: для мобильной версии

package/src/components/GracePeriod/GracePeriod.tsx

@@ -13,7 +13,7 @@ export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
   ({ className = '', title, description, calendar, ...rest }) => (
-    <BlockWrapper className={`p-default ${className}`} {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
       <Headline className="!p-0 mb-4" title={title} description={description} headlineVersion="M" />
       {calendar ? renderCalendar(calendar) : null}
     </BlockWrapper>

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

@@ -7,8 +7,8 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { projectSettings } from '../../ProjectSettings';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { HeaderTop } from './HeaderTop';
 import type { HeaderContent } from './HeaderContent';
+import { HeaderTop } from './HeaderTop';
 
 export interface HeaderMobileProps extends HeaderContent, UniBlockProps {}
 
@@ -31,7 +31,7 @@ export const Header = JSX<HeaderMobileProps>(
     );
 
     return (
-      <BlockWrapper tag="header" version={version} {...rest}>
+      <BlockWrapper tag="header" defaultPadding="" version={version} {...rest}>
         <div className="container px-4 py-1 box-border">
           <HeaderTop
             bgColor={bgColor}

package/src/components/Header/Header.tsx

@@ -53,6 +53,7 @@ export const Header = JSX<HeaderProps>(
           showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5',
           className,
         )}
+        defaultPadding=""
         version={version}
         {...rest}
       >

package/src/components/Headline/Headline.tsx

@@ -1,35 +1,35 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { style } from '../../utils/style';
-import { headlineVersionStyles } from './headlineVersionStyles';
 import type { TextSize } from '../../ui-kit/Text/TextProps';
-import type { UniBlockProps } from '../../model/JSXBlock';
+import { style } from '../../utils/style';
 import type { HeadlineContent } from './HeadlineContent';
+import { headlineVersionStyles } from './headlineVersionStyles';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
   ({
     className,
+    version = '',
+    headlineVersion = 'XL',
     title,
     description,
-    headlineVersion = 'XL',
     align = 'text-center',
     as,
     isPadding = true,
     isTheme = false,
-    version = '',
     ...rest
   }) => {
     const versionStyle = headlineVersionStyles[headlineVersion];
-    const paddingStyle = isPadding ? 'p-default' : '';
     const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
 
     return (
       <BlockWrapper
-        className={style(paddingStyle, className)}
+        className={className}
+        defaultPadding={isPadding ? 'p-default' : ''}
         version={version}
         isTheme={isTheme}
         {...rest}

package/src/components/Headline/HeadlineContent.ts

@@ -2,7 +2,6 @@ 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';
-import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Заголовок
@@ -10,9 +9,8 @@ import type { TextAlign } from '../../ui-kit/Text/TextProps';
 export type HeadlineContent = UniBlockContent &
   HeadlineProps &
   ImageContent & {
-    align?: TextAlign;
     /** @hidden */
     as?: HeadingTagType;
-  /** @title Внутренний отступ блока */
-  isPadding?: boolean;
+    /** @title Внутренний отступ блока */
+    isPadding?: boolean;
   };

package/src/components/Headline/headlineVersionStyles.ts

@@ -13,32 +13,32 @@ export const headlineVersionStyles: Record<
   XXL: {
     title: { headingType: 'h0', as: 'h1' },
     descriptionSize: 'text-h5',
-    descriptionStyle: 'mt-headline-xxl',
+    descriptionStyle: 'mt-m',
   },
   XL: {
     title: { headingType: 'h1', as: 'h1' },
     descriptionSize: 'text-xl-light',
-    descriptionStyle: 'mt-headline-l',
+    descriptionStyle: 'mt-s',
   },
   L: {
     title: { headingType: 'h2', as: 'h2' },
     descriptionSize: 'text-xl-light',
-    descriptionStyle: 'mt-headline-l',
+    descriptionStyle: 'mt-s',
   },
   M: {
-    title: { headingType: 'h3', as: 'h3' },
+    title: { headingType: 'h3', as: 'h2' },
     descriptionSize: 'text-xl-light',
-    descriptionStyle: 'mt-headline-m',
+    descriptionStyle: 'mt-text',
   },
   S: {
-    title: { headingType: 'h4', as: 'h4' },
+    title: { headingType: 'h4', as: 'h2' },
     descriptionSize: 'text-xl-light',
-    descriptionStyle: 'mt-headline-s',
+    descriptionStyle: 'mt-xs',
   },
   XS: {
-    title: { headingType: 'h5', as: 'h5' },
+    title: { headingType: 'h5', as: 'h2' },
     descriptionSize: 'text-l-light',
-    descriptionStyle: 'mt-headline-s',
+    descriptionStyle: 'mt-xs',
   },
 };
 

package/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -18,13 +18,8 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
     ...rest
   }) => (
     <BlockWrapper
-      className={style(
-        'relative',
-        'grid grid-cols-12',
-        isPadding ? 'p-default' : '',
-        gapStyles[gap],
-        className,
-      )}
+      className={style('relative', 'grid grid-cols-12', gapStyles[gap], className)}
+      defaultPadding={isPadding ? 'p-default' : ''}
       version={version}
       isTheme={isTheme}
       {...rest}

package/src/components/ImgBlock/ImgBlock.tsx

@@ -10,7 +10,7 @@ export const ImgBlock = JSX<ImgBlockProps>((props) => {
   const { className, image, ...rest } = props;
 
   return (
-    <BlockWrapper className={className} {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-0" {...rest}>
       <Img image={image} />
     </BlockWrapper>
   );

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -3,6 +3,7 @@ import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 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 type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
 import { InsuranceAmountBlockInner } from './InsuranceAmountBlockInner';
 
@@ -22,7 +23,8 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
 
     return (
       <BlockWrapper
-        className={`box-border py-12 overflow-hidden relative w-100 ${className}`}
+        className={style('box-border overflow-hidden relative px-0', className)}
+        defaultPadding="p-default"
         {...rest}
       >
         {title ? <Heading className="text-center mb-8" title={title} headingType="h3" /> : null}

package/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -38,23 +38,23 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
     investmentColumns,
     ...rest
   } = props;
-  const colums = investmentColumns ? [...investmentColumns] : [];
+  const columns = investmentColumns ? [...investmentColumns] : [];
   if (investmentZeroColumn) {
-    colums.unshift(investmentZeroColumn);
+    columns.unshift(investmentZeroColumn);
   }
 
   return (
-    <BlockWrapper className={`px-9 py-12 ${className}`} {...rest}>
+    <BlockWrapper className={className} {...rest}>
       <div className="container text-m-light">
-        {colums?.length ? (
+        {columns?.length ? (
           <div>
             <div className="flex items-end relative pl-9 pr-5 text-white">
-              {joinList(<div className="w-px h-4 bg-gray" />)(colums.map(renderInvestmentColumn))}
+              {joinList(<div className="w-px h-4 bg-gray" />)(columns.map(renderInvestmentColumn))}
               <div className="absolute right-[30px] w-px h-4 bg-gray" />
             </div>
             <div className="border-t border-gray -mt-2 ml-9 mr-8" />
             <div className="flex justify-between text-primary-text mt-3 -mx-10">
-              {colums.map(renderInvestmentColumnTitle)}
+              {columns.map(renderInvestmentColumnTitle)}
             </div>
           </div>
         ) : null}

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

@@ -2,7 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
-import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import type { LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsListItem } from './LinkDocsListItem';
@@ -19,14 +18,13 @@ export const LinkDocs = JSX<LinkDocsProps>(
     align,
     ...rest
   }) => (
-    <BlockWrapper className={style('p-default', className)} {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
       <Headline
         isPadding={false}
         title={title}
         description={description}
         align={align}
         headlineVersion="M"
-        as="h2"
       />
       {documents?.length ? (
         <div className="mt-5 flex flex-col gap-6" role="list">

package/src/components/LinkDocs/LinkDocs.tsx

@@ -25,7 +25,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     columnsMode = 'double',
     ...rest
   }) => (
-    <BlockWrapper className={style('p-default', className)} {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
       <Headline
         className="!p-0"
         title={title}

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

@@ -1,13 +1,84 @@
 import '../../setup-fixture';
 
-import { MobileAppTile as MobileAppTileMobile } from './MobileAppTile.mobile';
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { MobileAppTile } from './MobileAppTile';
+
+const image: Picture = {
+  src: 'icon-phone.png',
+  format: 'webp',
+  size: {
+    width: 335,
+    height: 168,
+  },
+};
+
+const listItems = [
+  'Оплачивайте товары и услуги',
+  'Следите за бонусным счетом онлайн',
+  'Покупайте товары и услуги',
+  'Копите бонусные баллы',
+];
+
+const button1: ButtonProps = {
+  text: 'App Store',
+  href: 'apps.apple.com',
+  version: 'primary',
+};
+
+const button2: ButtonProps = {
+  text: 'Google Play',
+  href: 'play.google.com',
+  version: 'secondary',
+};
+const button3: ButtonProps = {
+  text: 'Google Play',
+  href: 'play.google.com',
+  version: 'secondary',
+};
+
+const button4: ButtonProps = {
+  text: 'Google Play',
+  href: 'play.google.com',
+  version: 'secondary',
+};
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <MobileAppTileMobile
+      <MobileAppTile
+        className="col-span-12"
+        description="Загрузить для IOS и Android"
+        image={image}
+        items={listItems}
         title="Мобильное приложение!"
+        buttons={[
+          {
+            ...button1,
+            version: 'secondary',
+          },
+          button2,
+        ]}
+      />
+    </div>
+  ),
+  '4 buttons': (
+    <div className="container grid grid-cols-12">
+      <MobileAppTile
+        className="col-span-12"
         description="Загрузить для IOS и Android"
+        image={image}
+        items={listItems}
+        title="Мобильное приложение!"
+        buttons={[
+          {
+            ...button1,
+            version: 'secondary',
+          },
+          button2,
+          button3,
+          button4,
+        ]}
       />
     </div>
   ),