@redneckz/wildless-cms-uni-blocks 0.3.74 → 0.3.75

package/src/components/Catalog/CatalogCard.tsx

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import type { CatalogCardType, CatalogProductColor } from './CatalogContent';
+
+export interface CatalogCardProps extends CatalogCardType, UniBlockProps {
+  version?: BlockVersion;
+}
+
+const cardStyleMap: Record<CatalogProductColor, string> = {
+  black: 'bg-black',
+  white: 'bg-white',
+};
+
+export const CatalogCard = JSX<CatalogCardProps>(
+  ({ className = '', title, description, image, price, button, colors }) => {
+    return (
+      <section
+        className={`border border-solid box-border p-[30px] min-w-[402px] flex flex-col justify-left ${className}`}
+        role="listitem"
+      >
+        {image?.src ? <Img className="mb-5" image={image} /> : null}
+        {title ? (
+          <Heading headingType="h6" as="h5" className="text-left mb-1.5" title={title} />
+        ) : null}
+        {description ? <div className="text-m-md text-left mb-4">{description}</div> : null}
+        {colors?.length ? (
+          <div className="flex mb-4 text-m-md text-secondary-text">
+            Доступные цвета: {colors.map(renderColorOption)}
+          </div>
+        ) : null}
+        {price ? <div className="text-title-sm text-left">{price}&nbsp;₽</div> : null}
+        {button?.text ? <Button className="mt-6 w-full" {...button} /> : null}
+      </section>
+    );
+  },
+);
+
+const renderColorOption = (color: CatalogProductColor, i: number) => (
+  <span
+    key={String(i)}
+    className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
+  />
+);

package/src/components/Catalog/CatalogContent.ts

@@ -0,0 +1,26 @@
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+
+/**
+ * @enumNames ["Черный", "Белый"]
+ */
+export type CatalogProductColor = 'black' | 'white';
+
+export interface CatalogCardType extends HeadingContent, DescriptionContent, ImageContent {
+  /** @title Цена в рублях */
+  price?: number;
+  /** @title Доступные цвета */
+  colors?: CatalogProductColor[];
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
+}
+
+/**
+ * @title Каталог
+ */
+export type CatalogContent = HeadingContent &
+  DescriptionContent & {
+    cards?: CatalogCardType[];
+  };

package/src/components/ComparisonTable/TableColumn.tsx

@@ -21,6 +21,7 @@ export const TableColumn = JSX<TableColumnProps>(
     const columnDataView = columnData?.slice(0, showRow ? columnData.length : visibleRowLength);
     const gradientClassName = isFillGradient ? GRADIENT : '';
     const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
+
     return (
       <div
         className={`border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`}

package/src/components/ContentPage/ContentPage.tsx

@@ -108,12 +108,14 @@ function renderBlock(
     console.warn(`No block with "${type}" is registered`);
   }
   const BlockComponent = blocksRegistry[type || 'Placeholder'] || Placeholder;
+
   return blockDecorator(
     {
       blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
       block,
       render: (props) => {
         const { version, content, anchor } = props.block;
+
         return (
           <BlockComponent
             key={`${type}-${i}`}

package/src/components/ContentPage/ContentPageHead.tsx

@@ -9,6 +9,7 @@ export interface ContentPageHeadProps {
 export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data, children }) => {
   const { title, main, og, twitter, jsonLd } = data;
   const { description, keywords, canonical, robots } = main || {};
+
   return (
     <HeadComponent>
       <title>{title}</title>

package/src/components/ContentPage/normalizeBlock.mobile.ts

@@ -2,5 +2,6 @@ import { BlockDef } from '../../types';
 
 export function normalizeBlock(block: BlockDef) {
   const { mobile, ...rest } = block;
+
   return mobile ? { ...rest, ...mobile, content: { ...rest.content, ...mobile.content } } : block;
 }

package/src/components/ContentPage/normalizeBlock.ts

@@ -3,5 +3,6 @@ import { BlockDef } from '../../types';
 export function normalizeBlock(block: BlockDef) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { mobile, ...rest } = block;
+
   return rest;
 }

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -32,6 +32,7 @@ export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurre
 
 const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
   const code = exchangeCurrencyItem?.code;
+
   return (
     <tr key={code} className="pb-1">
       <td className="pt-4">

package/src/components/ExchangeRateTile/calculateResult.ts

@@ -2,6 +2,7 @@ import { roundTo } from '../../utils/roundTo';
 
 export const calculateResult = (value: string, rate: number, precision: boolean) => {
   const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
+
   return Number.isInteger(result) ? result : roundTo(result);
 };
 

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

@@ -28,6 +28,7 @@ export const Footer = JSX<FooterProps>(
   }) => {
     const sitemap = useSitemap(context.useAsyncData);
     const dispositions = sitemap?.dispositions;
+
     return (
       <footer className={`px-4 py-[26px] bg-white ${className}`}>
         <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
@@ -57,6 +58,7 @@ export const Footer = JSX<FooterProps>(
 
 const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
   const { icon, href, text } = menu;
+
   return (
     <Button version="link" key={`footer-${i}`} href={href} className="flex text-sm mb-4">
       {icon ? <Img className="pr-1" image={icon} width="24" height="24" asSVG /> : null}

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

@@ -13,6 +13,7 @@ export interface SocialMediaProps extends UniBlockProps {
 export const SocialMedia = JSX<SocialMediaProps>(({ className, media, version, context }) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
+
   return (
     <div className={`flex gap-2 items-start justify-start pt-6 pb-6 ${className || ''}`}>
       {media?.map((_, index) => (

package/src/components/Footer/SocialMedia.tsx

@@ -14,6 +14,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
   ({ className = '', media, version, context, children }) => {
     const router = context.useRouter();
     const { handlerDecorator } = context;
+
     return (
       <div>
         <div className={`flex gap-2.5 ${className}`}>

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

@@ -6,6 +6,7 @@ import type { FooterLink } from './FooterLink';
 export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
+
   return (
     <div className={`${className || ''}`}>
       <div className="py-6">

package/src/components/Footer/TextInformation.tsx

@@ -6,6 +6,7 @@ import type { FooterLink } from './FooterLink';
 export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
+
   return (
     <div className={`${className || ''}`}>
       <div className="pt-5">

package/src/components/Gallery/GalleryCardInner.tsx

@@ -8,6 +8,7 @@ import type { GalleryCard, GalleryItem } from './GalleryContent';
 export const GalleryCardInner = JSX<GalleryCard>(
   ({ title, description, image, items, button, version, isDotted = true }) => {
     const titleStyleClasses = getTitleStyle(version);
+
     return (
       <div className="h-full flex flex-col justify-between text-center">
         <div>

package/src/components/GroupBlock/GroupBlocksItem.tsx

@@ -24,6 +24,7 @@ export const renderBlock = (context: ContentPageContext) => (block: GroupBlockDe
   }
   const classNameBlock = style2className(block?.style);
   const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
+
   return (
     <EmbeddedBlock key={`block_${i}`} context={context} {...block} className={classNameBlock} />
   );

package/src/components/GroupBlock/renderBlocksTypes.tsx

@@ -19,6 +19,7 @@ export const renderBlock =
     }
     const classNameBlock = style2className(block?.style);
     const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
+
     return (
       <div className={className} key={`block_${i}`}>
         <EmbeddedBlock context={context} {...block} className={classNameBlock} />

package/src/components/Header/HeaderBurger.tsx

@@ -15,6 +15,7 @@ export interface HeaderBurgerProps {
 export const HeaderBurger = JSX<HeaderBurgerProps>(
   ({ context, burgerSubMenu, onClick, defaultLocation = '', children }) => {
     const [city, getCity] = context.useGeolocation(defaultLocation);
+
     return (
       <div className="absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20">
         <button
@@ -46,6 +47,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
 
 const renderBurgerSubMenuItem = (menu: DispositionItem, i: number) => {
   const { icon, href, text } = menu;
+
   return (
     <a key={`headerSubMenu-${i}`} href={href} className="flex text-sm mb-4 hover:text-primary-main">
       {icon ? (

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -29,6 +29,7 @@ const LINKS_ICON_VERSION_MAP: Record<BgColorVersion, IconVersion> = {
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
   ({ context, className, defaultLocation = '', bgColor = 'bg-white' }) => {
     const [city, getCity] = context.useGeolocation(defaultLocation);
+
     return (
       <div className={`flex items-center ${className || ''}`}>
         <TopItem

package/src/components/Headline/Headline.mobile.tsx

@@ -18,6 +18,7 @@ export const Headline = JSX<HeadlineProps>(
     align = 'left',
   }) => {
     const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
+
     return (
       <section className={`px-4 py-6 flex flex-col gap-2.5 ${STYLE_MAPS.background} ${className}`}>
         {title ? (

package/src/components/Insurance/Insurance.tsx

@@ -64,6 +64,7 @@ function renderInsuranceSumMonth(sum, monthLimit) {
 
 function renderValueBlock(title, sum, isAnotherBlock) {
   const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
+
   return (
     <div className={`flex justify-between items-center gap-2 w-full ${widthStyle}`}>
       <span className="text-secondary-text text-base">{title}</span>

package/src/components/Insurance/InsuranceContent.ts

@@ -1,5 +1,4 @@
 import type { Picture } from '../../model/Picture';
-import type { InsuranceProps } from '../../model/Insurance';
 
 /**
  * @title Преимущество
@@ -15,12 +14,16 @@ export interface InsuranceBenefit {
 /**
  * @title Страховка
  */
-export type InsuranceContent = InsuranceProps & {
+export type InsuranceContent = {
   /** @title Заголовок */
   title?: string;
   /** @title Описание */
   description?: string;
   image?: Picture;
+  /** @title Ежемесячный лимит */
+  monthLimit?: number;
+  /** @title Страховая сумма */
+  sum?: number;
   /**
    * @title Список преимуществ
    * @maxItems 6

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.example.json

@@ -6,8 +6,8 @@
   },
   "insuranceTabs": [
     {
-      "title": "Описание",
-      "card": [
+      "title": "Описание 1",
+      "cards": [
         {
           "sum": 200000,
           "fee": 2100,
@@ -21,8 +21,8 @@
       ]
     },
     {
-      "title": "Описание",
-      "card": [
+      "title": "Описание 2",
+      "cards": [
         {
           "sum": 200000,
           "fee": 2100,

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.fixture.tsx

@@ -38,11 +38,6 @@ export default {
                 fee: 3600,
                 icon: { icon: 'ActualBalanceIcon' },
               },
-              {
-                sum: 600000,
-                fee: 3600,
-                icon: { icon: 'MoneyInsuranceIcon' },
-              },
             ],
           },
         ]}

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -9,7 +9,6 @@ export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent,
 
 export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
   ({ className = '', context, title, insuranceTabs = [], button, anchor = null }) => {
-    const insuranceGalleries = insuranceTabs.map((_) => _.cards);
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
 
     return (
@@ -36,7 +35,7 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
           {renderInsuranceGalleries({
             context,
             className,
-            insuranceGalleries,
+            insuranceTabs,
           })}
         </div>
         {button?.text ? (
@@ -55,7 +54,13 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
   },
 );
 
-const renderInsuranceGalleries = ({ insuranceGalleries, context, className }: any) => {
+const renderInsuranceGalleries = ({
+  insuranceTabs,
+  context,
+  className = '',
+}: InsuranceAmountBlockProps) => {
+  const insuranceGalleries = insuranceTabs?.map((_) => _.cards);
+
   return insuranceGalleries?.length
     ? insuranceGalleries.map((cards) => (
         <InsuranceAmountBlockInner context={context} className={className} cards={cards} />

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -1,14 +1,16 @@
 import type { Picture } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
-import type { InsuranceProps } from '../../model/Insurance';
 
 /**
  * @title Кнопка выбора программы
  */
-export type cardItem = InsuranceProps & {
+export type CardItem = {
+  /** @title Иконка */
   icon?: Picture;
   /** @title Страховой взнос */
   fee?: number;
+  /** @title Страховая сумма */
+  sum?: number;
 };
 
 /**
@@ -18,7 +20,7 @@ export interface InsuranceAmountBlockTabs {
   /** @title Заголовок вкладки */
   title?: string;
   /** @title Содержимое вкладки */
-  cards?: cardItem[];
+  cards?: CardItem[];
 }
 
 /**

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps, FuncReturnVoid } from '../../types';
-import type { InsuranceAmountBlockTabs, cardItem } from './InsuranceAmountBlockContent';
+import type { InsuranceAmountBlockTabs, CardItem } from './InsuranceAmountBlockContent';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -9,14 +9,14 @@ export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs
 
 type InsuranceGalleryProps = {
   tabsShift: number;
-  cards: cardItem[];
+  cards: CardItem[];
   activeSlideIndex: number;
   isLastShift: boolean;
   setActiveSlideIndex: FuncReturnVoid<number>;
 };
 
 type InsuranceSlideProps = {
-  slide: cardItem;
+  slide: CardItem;
   i: number;
   activeSlideIndex: number;
   onClick: FuncReturnVoid<MouseEvent>;
@@ -30,7 +30,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
     const handleNextClick = () => setTabsShift(tabsShift + 1);
     const handlePrevClick = () => setTabsShift(tabsShift - 1);
 
-    const galleryLength = cards?.length;
+    const galleryLength = cards?.length ?? 0;
 
     const isGalleryScrollAvailable = cards?.length > 2;
     const showNextButton = isGalleryScrollAvailable && galleryLength > tabsShift + 2;
@@ -40,7 +40,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
     return (
       <section id={anchor} className={`min-w-full ${className}`}>
         <div className="relative mt-7 overflow-hidden">
-          {galleryLength > 1
+          {galleryLength
             ? renderGallery({
                 tabsShift,
                 cards,
@@ -75,6 +75,7 @@ function renderGallery({
   setActiveSlideIndex,
 }: InsuranceGalleryProps) {
   const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
+
   return (
     <div
       style={{ transform: `translateX(-${tabsShiftWidth}px)` }}

package/src/components/LinkDocs/LinkDocsListItemBase.tsx

@@ -18,6 +18,7 @@ export interface LinkDocsListItemBaseProps extends LinkDocsListItemProps {
 export const LinkDocsListItemBase = JSX<LinkDocsListItemBaseProps>(
   ({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
     const { text, fileSize, ...linkProps } = doc;
+
     return (
       <a className={className} role="link" {...linkProps}>
         {icon ? (
@@ -40,6 +41,7 @@ const formatSuffix = (ext?: string, fileSize?: string) => {
   const prefix = ext || fileSize ? ',' : '';
   const extension = ext ? ` ${ext}` : '';
   const size = fileSize ? ` (${fileSize})` : '';
+
   return prefix + extension + size;
 };
 
@@ -49,5 +51,6 @@ const getExtFromHref = (href: string) => {
   }
 
   const index = href.lastIndexOf('.');
+
   return index !== -1 ? href.substring(index + 1) : '';
 };

package/src/components/LinkList/LinkList.tsx

@@ -17,6 +17,7 @@ export const LinkList = JSX<LinkListProps>(({ className = '', documents, anchor
 const renderLinkListItem = (documents) => {
   return documents.map((doc, i) => {
     const { text, ...linkProps } = doc;
+
     return (
       <li key={`list_item_${String(i)}`} className="mb-4 list-none">
         <a className="hover:text-primary-main" role="link" {...linkProps}>

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

@@ -1,36 +1,92 @@
+import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 import { MobileAppTile } from './MobileAppTile';
 
+const image: Picture = {
+  src: 'icon-phone.png',
+  format: 'webp',
+  size: {
+    width: 529,
+    height: 345,
+  },
+};
+
+const listItems = [
+  'Оплачивайте товары и услуги',
+  'Следите за бонусным счетом онлайн',
+  'Покупайте товары и услуги',
+  'Копите бонусные баллы',
+];
+
+const button1: ButtonWithIconProps = {
+  aboveText: 'Загрузите в',
+  text: 'App Store',
+  icon: { icon: 'AppleIcon', iconVersion: 'white' },
+  href: 'apps.apple.com',
+  version: 'primary',
+};
+
+const button2: ButtonWithIconProps = {
+  aboveText: 'Доступно в',
+  text: 'Google Play',
+  icon: { icon: 'PlayMarketIcon' },
+  href: 'play.google.com',
+  version: 'secondary',
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <MobileAppTile
         context={context}
-        className="col-span-4"
+        className="col-span-12"
+        version="secondary"
+        title="Обновлённое мобильное приложение «Урожай»"
+        image={image}
         qr={{
           href: 'https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true',
           src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAACkCAYAAAAZtYVBAAAAAXNSR0IArs4c6QAACp1JREFUeF7tndtuKzkMBJ3//+gssG8aA1MoNDXWcTqvlCiqWSI1vuXn9/f399W/KnCIAj8F8pBMNIz/FSiQBeEoBQrkUeloMAWyDBylQIE8Kh0NpkCWgaMUKJBHpaPBFMgycJQCBfKodDSYAlkGjlKgQB6VjgZTIMvAUQoUyKPS0WAKZBk4SoECeVQ6GkwM5M/Pz6Mq2o9vUnxXf9fxtB75T8U5Pb7r/kgv0qNAXj6fXCAJmXt7gQT9qIKdXoFOj68VUn7jokCefaW6Aj3estOS/Rbg5Y5q/adAUgOjeNIrQOrfrk/7nc5PgbwoQC2REpQCkyaYgCM77Y/s0/5bIeGhhhJSINcrAelBehbIAkmM3Nr/uQpJdzh6SqMNk386sbvnU7bpymDt9gpA+0/zQ/t//A65e8Pkv0Det1TSr0DKF6pJ0AJZIJdDRcCkJ5D8F8gC+VEgCcD0jkV3Ojpg9k5l47Xj6UDTfuiOb/e7/Sl794ZTQWi+tVMCbYIsYHb87vzY/RZIeCeoQK5IUYewHerrn7KtIBY4SkgrZPbrjl9XIalFpEClAFNLTeOn/ZF9en3y9/UVkgSwCaHx1l4g7zPUCgmfeLfAUQUtkAVyUYAAozsgAUf2AvlhIKmFkp0STPbdAFD89gDYA2HH24c+2p/VH/2lvzE+HRABRAkmwadfdyOBKd7p+bQe6UPx2PxofwXyXjJKMAn+9Hxar0BSxsBOFZjsdKIpPErwafMp3j8HJCUotVvBCdi/Zk/1p/kp8OMv+1DAqb1Aru+E2AOV6k/zC+Twe9HfDjwBldoLZIFcGKIDlQJH8z8OJAW4225fxqF4bELjBAz/NlIaD+mz2x7fIXcHSP4L5KpQgSRiNtsLZIHcjJhzXyAL5KLA0y872JZEwNKdMbVfj1ca/3Q87vi/XjZ+6z++QxbI+9cFC6RDskCG3wOnilUgC+TtlYIAsRW/QDrgaPR4haQFUyCu8y1AFJ+9I02vT/GRfqQPzZ++c9v9FMiLYgXy/hd3qSNY/d4O0PTnIe2JSDc4XaGsoNPrp/q1QoZvfRVIi6B73TFtwbbF2wM9XiGtnFRR6ISnG0792wQ/rQ+tZwuAzRetT/b4DkkLTANQIFdF6YCkFa5AXhTcLYj1TwCkB2Y6ngIJJTMVPE34dMWmhD/dQWi9tmxZ8aaBpYpGQNF8m2B7IGh9AjDdH/kfLxDpyz4UcJoA2jABbBNKgNkEPx0/5cPuz/qj8WQ/7qGGAEsBJ0Fswmh8gSTFLw9prZCrIARYK+S9Xg6/99HbKyRVvNROFdMKRBXN+rPjSQ/yR/OnrzDTehXIS4anBSaA6EDZeAokKG4FopZJCbIVgFqwBSodT3qRf5pv9UnzQfG+Hcjdd0grUCqAFbxA3iOT5uM4IKklWSAIOKqgNh4r6PR+yJ898E/7s/ptv0NaAAioAjn72z62Ak7r/3jLLpD3/yaDEvx0RZuuuK2Qly9tkSAWCPJHANkDSv6mAZr2Z/Xa3rLtBne3EIqHgLFXCtqPTdi0P1qf1iM9yP/jLZsAmLanFaVArgoUyPB70gXS1qQ/9rLPdAWkE1sg/ziQ9qFg+s4xK//rRQfItnTyR/rRASQ7HVDaj52f5iN+qCFBn95QLAj8Ii8lkAAhO+k1DTjth+JJ9R5/qCmQ6xfrCTiyEwAFEo5AgSyQk1VyvGVTBZi2WzGowlALozsw+Se7XZ8KAulN+qX7Jf/bWzYJMG3XGx6+I6YApQkvkJcM0InfbS+Q2Y9DkX7pgSH/rZCtkIqRfw5I27JIDaqo0+uRv91PvdZ/Oj6db69clO/xCkkJpROWzrcAk0DpnYwSRuvb+XZ8gQw/DkZAF0j3o/sFskBSUVzstuLZ8QUSPr2jsvXi/5NCLZcSQvHYivz0eNof6WMBpw5Gen78DkmC0AZIAOuf/D19x00BLpAXBUhQCwwJTMCkgJN/Apr0mPZPepH+rZBEzMVuASD35G8aGFovBbhADldIShgBQgBau60YBATFn+4/jTfVx84//g6ZJiQVhICilkfzC+R9huJP+1iBKaEF8v573NN6pwfY5ovWK5CgUNoCKWH2zlggIWFU8WwL2y34bsCwAsA/mrLxEfCpnrvjGb9DFkhCcLWTXrsBoIps7WnBKZDhO0e2IlGFooRagOl4WOB2H5ACWSAXBgg4stOBogPyOJBUUT5dAaxglADaT7qenU/6k7+0opL/Ahn+99oC6X6fskDCVxSmK5htaTZB6fhWyIuCJAgBQvPpoWE3MLv9F0ipgL1jkHtKMNmppdL6dj8UDx0oOpAU7/R+d69H/uN3amwCKSCbYEooAZFWWBsvrUf6kD3dL/lPDwD5L5AXhewBK5DuvfcCOfydnhTYVsh7JLdXyDQB1IIsINRy6ApAJ5zipfm0vq3I5I/iIb3sfBpfIMN3bqYTRgAVSECaKlQrJNWE1V4gwx5TIFegQjnfflKaKjDpT4C748JfQ7b+3gpW+s83SRAbIAlILYvWI2BoP7vtaUeh/ZOd9KH47PwCCU/du4Ej/5RwAiq1W6Dsfii+xx9qMKDhT1RTyyMAqCJP2yke0i+1F8iLgm3Z7iEnBdAeWDowFujxlj0tiPWXtgyab+02fgLCrm+BSP3TfKtH3LLtgtPjU0FovrWn+9t9BbAVzu7fHohWSLgipEAUyOy97VZI+YFeArZAfhhIeghJE0R3LNuCpsdTfLblpXrRgUnttN80/rhCFsg1BdMJtwlO16f5BfKiAF2aqSK1QrovaVHBoXzYA9UKGf7fGqoYdEAo4TahVOFSO+3Xxjv+lE2CxwFufuigBKXxpxXEAmvXS/1P53+8QlpBKOG0YWunE24TRPGneth47Hqpf9Kf9GmFhDupTRAJbgGhO+70ena/1FHi/Z728TNKiBWEBCd/BADZ4wTJX9qw65E+tqPY9R+vkLs3TC1j2j4NIOlDCab5FC/Z7YGleGm97XdIKxgJ8Gk7CWoTQvqQP5pP8ZKd9KYKSv5bIeFLXTYBaUIIqAIpkbYtkdwTEJ+22/hpfIFcFfrzLXsaGDqgdr3pA2gfGtN4aX5bdvhLFtSiC+Rhn/ahE00nhuZP2yke21ILZIFcmLLAFsifW/2sPvQQhv52vzBOFSZtgeQ/Fki+l273Q+MxgfKFc7teWvEp/q+/Q1rBSTBKiD0QdryNj8ZbfWj/dj0a/3VP2VZwFKgVMmrppG8rpFSIKoSteHY8hUv+aD5daWj/5N/at1dIG9DbiQk/QEuC03o2fvtQRUCRv7Qj0Pqpf6tfgbwoZhNECaMKQ+sVSIk0CS7dvQ23/u34Vsj1ZR/Kl+045O/xO6QNiAAhQQqke2GaKjR1gDS/24GcDpAEIQBTuz0gtJ7Vh/yR3cZP8dn1yF+BlB8/swmdThj5I7uNnwCy65G/AlkgFwboCjQNNAE6/pRNC6Z2euqcttuETFcQ8kd2Gz/lx65H/sYrpF2w46vAnQJxhay8VWBSgQI5qWZ9xQoUyFjCOphUoEBOqllfsQIFMpawDiYVKJCTatZXrECBjCWsg0kFCuSkmvUVK1AgYwnrYFKBAjmpZn3FChTIWMI6mFSgQE6qWV+xAgUylrAOJhUokJNq1lesQIGMJayDSQX+AzMMbwXyi0XeAAAAAElFTkSuQmCC',
         }}
+        items={listItems}
         buttons={[
           {
-            aboveText: 'Загрузите в',
-            text: 'App Store',
+            ...button1,
             icon: { icon: 'AppleIcon' },
-            href: 'apps.apple.com',
-            asSVG: true,
-            version: 'secondary',
-          },
-          {
-            aboveText: 'Доступно в',
-            text: 'Google Play',
-            icon: { icon: 'PlayMarketIcon' },
-            href: 'play.google.com',
-            asSVG: true,
             version: 'secondary',
           },
+          button2,
         ]}
       />
     </div>
   ),
+  secondary: (
+    <div className="container grid grid-cols-12">
+      <MobileAppTile
+        context={context}
+        className="col-span-12"
+        title="Обновлённое мобильное приложение «Урожай»"
+        qr={{
+          href: 'https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true',
+          src: 'data:image/png;base64,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',
+        }}
+        items={listItems}
+        buttons={[button1, button2]}
+      />
+    </div>
+  ),
+  'without-image-and-list': (
+    <div className="container grid grid-cols-12">
+      <MobileAppTile
+        context={context}
+        className="col-span-4"
+        qr={{
+          href: 'https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true',
+          src: 'data:image/png;base64,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',
+        }}
+        buttons={[button1, button2]}
+      />
+    </div>
+  ),
 };

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

@@ -7,12 +7,10 @@ import { Logo } from '../../ui-kit/Logo/Logo';
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
 export const MobileAppTile = JSX<MobileAppTileProps>(
-  ({ className, title = 'Мобильное приложение', description, href = '#' }) => {
+  ({ className = '', title = 'Мобильное приложение', description, href = '#' }) => {
     return (
       <div
-        className={`col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light ${
-          className || ''
-        }`}
+        className={`col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light ${className}`}
       >
         {href ? (
           <div className="flex">