@redneckz/wildless-cms-uni-blocks 0.2.112 → 0.2.113

package/mobile/src/components/ProductBlock/ProductBlock.tsx

@@ -7,13 +7,11 @@ export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
 export const ProductBlock = JSX<ProductBlockProps>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ({ titleSize, image, benefits, ...props } /* Get rid of image and benefits */) => {
+  (props /* Get rid of image and benefits */) => {
     const { className } = props;
     return (
-      <section
-        className={`font-sans bg-white pt-10 pl-[50px] pb-[50px] pr-[7.5rem] ${className || ''}`}
-      >
-        <ProductBlockInner {...props} titleSize="L" />
+      <section className={`font-sans bg-white px-4 py-6 ${className || ''}`}>
+        <ProductBlockInner {...props} />
       </section>
     );
   },

package/mobile/src/components/ProductBlock/ProductBlockInner.tsx

@@ -1,27 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img';
 import { BaseTile } from '../BaseTile/BaseTile';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 import type { ProductBlockInnerCommonProps } from './ProductBlockContent';
+import { renderBenefit } from './renderBenefit';
 
 export interface ProductBlockInnerProps extends ProductBlockInnerCommonProps, UniBlockProps {}
 
-const benefitIconBgStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-main',
-  secondary: 'bg-white/30',
-};
-const benefitTitleStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-primary-text',
-  secondary: 'text-white',
-};
-const benefitDescStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white',
-};
-
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   ({
     className,
@@ -36,8 +21,8 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     version = 'primary',
   }) => {
     return (
-      <div className={`flex grow justify-between items-stretch ${className || ''}`}>
-        <div className={'flex flex-col'}>
+      <div className={`${className || ''}`}>
+        <div>
           <BaseTile
             context={context}
             title={title}
@@ -45,42 +30,20 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             description={description}
             items={items}
             buttons={buttons}
-            version={version}
           >
             {benefits?.length ? (
-              <div className="flex gap-6 mt-6 mb-3.5">
+              <div className="mt-[19px]">
                 {benefits.map((_, i) => renderBenefit(_, i, version))}
               </div>
             ) : null}
           </BaseTile>
         </div>
-        {image?.src && <Img className="mt-auto" image={image} />}
+        {image?.src && (
+          <div className="mt-5">
+            <Img image={{ className: 'block', ...image }} />
+          </div>
+        )}
       </div>
     );
   },
 );
-
-function renderBenefit(benefit: Benefit, i: number, version: string) {
-  return (
-    <div key={String(i)} className="flex gap-4 items-center">
-      {benefit.icon && (
-        <Icon
-          className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${benefitIconBgStyleMap[version]}`}
-          name={benefit.icon}
-          width="24"
-          height="24"
-        />
-      )}
-      <div className="flex gap-1 flex-col h-full max-w-[149px]">
-        <h4 className={`font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`}>
-          {benefit.label}
-        </h4>
-        {benefit.description && (
-          <div className={`font-normal text-sm ${benefitDescStyleMap[version]}`}>
-            {benefit.description}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/mobile/src/components/ProductBlock/renderBenefit.tsx

@@ -0,0 +1,35 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+
+const benefitTitleStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-white',
+};
+const benefitDescStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white',
+};
+
+export function renderBenefit(benefit: Benefit, i: number, version: string) {
+  return (
+    <div key={String(i)} className="flex gap-3 items-center mb-2.5 last:mb-0">
+      {benefit.icon && (
+        <Icon
+          className="w-[25px] h-[25px] rounded-full box-border"
+          name={benefit.icon}
+          width="24"
+          height="24"
+        />
+      )}
+      <h4 className={`font-medium text-m-base m-0 ${benefitTitleStyleMap[version]}`}>
+        {benefit.label}
+      </h4>
+      {benefit.description && (
+        <div className={`font-normal text-m-sm ${benefitDescStyleMap[version]}`}>
+          {benefit.description}
+        </div>
+      )}
+    </div>
+  );
+}

package/mobile/src/components/ProductGallery/ProductGallery.tsx

@@ -1,14 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
-import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+import { ProductGalleryBlock } from './ProductGalleryBlock';
 import type { ProductGalleryContent } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
 export const ProductGallery = JSX<ProductGalleryProps>(
   ({ className, context, duration = 0, slides = [] }) => {
-    const galleryNav = slides.map((s) => s.nav);
     const galleryBlocks = slides.map((s) => s.productBlock);
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
 
@@ -19,13 +17,14 @@ export const ProductGallery = JSX<ProductGalleryProps>(
           style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
           role="list"
         >
-          {galleryBlocks.map((_, i) => renderProductBlock(_, i, context))}
+          {galleryBlocks.map((block, i) => (
+            <ProductGalleryBlock key={String(i)} block={block} context={context} />
+          ))}
         </div>
 
-        <div className="flex">
-          {galleryNav.map((slide, i) =>
+        <div className="flex px-4 py-6">
+          {slides.map((_, i) =>
             renderNavButton({
-              slide,
               i,
               activeSlideIndex,
               onClick: () => setActiveSlideIndex(i),
@@ -38,41 +37,18 @@ export const ProductGallery = JSX<ProductGalleryProps>(
   },
 );
 
-function renderProductBlock(block: ProductBlockInnerCommonProps, i: number, context) {
-  return (
-    <section key={String(i)} className="flex grow-0 shrink-0 basis-full" role="listitem">
-      <div className="p-10 flex grow">
-        <ProductBlockInner
-          className="pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem]"
-          context={context}
-          {...block}
-        />
-      </div>
-    </section>
-  );
-}
-
-function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
+function renderNavButton({ i, activeSlideIndex, onClick, duration }) {
   const isActiveBtn = i === activeSlideIndex;
-  const progressBarClassName = isActiveBtn ? 'animate-slide' : '';
-  const btnTitleClassName = isActiveBtn ? 'text-primary-text' : 'text-secondary-text';
+  const progressBarClassName = isActiveBtn ? 'animate-slide bg-primary-main' : 'bg-main-divider';
   return (
     <button
       type="button"
       key={String(i)}
       onClick={onClick}
-      className={`font-sans group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 pt-4 pb-5 grow basis-0`}
+      className={`relative overflow-hidden border-0 bg-inherit cursor-pointer pl-0 mr-1.5 pt-4 pb-5 last:mr-0 grow basis-0`}
     >
-      <div className="border-0 border-r border-solid border-main-divider px-6">
-        <div
-          className={`text-sm font-medium pb-1 group-hover:text-primary-text ${btnTitleClassName}`}
-        >
-          {slide?.title}
-        </div>
-        <div className="text-xs text-secondary-text pb-[2px]">{slide.desc}</div>
-      </div>
       <div
-        className={`absolute bottom-0 left-0 w-full h-[3px] bg-primary-main -translate-x-full ${progressBarClassName}`}
+        className={`absolute bottom-0 left-0 w-full h-[3px] ${progressBarClassName}`}
         style={{ animationDuration: `${duration}s`, animationFillMode: 'forwards' }}
       ></div>
     </button>

package/mobile/src/components/ProductGallery/ProductGalleryBlock.tsx

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { TitleSize } from '../../ui-kit/Title/TitleProps';
+import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
+import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+
+export interface ProductGalleryBlockProps extends UniBlockProps {
+  titleSize?: TitleSize;
+  block?: ProductBlockInnerCommonProps;
+}
+
+export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
+  ({ block, titleSize, context }) => {
+    return (
+      <section className="flex grow-0 shrink-0 basis-full px-4 py-6" role="listitem">
+        <div className="flex grow">
+          <ProductBlockInner context={context} titleSize={titleSize} {...block} />
+        </div>
+      </section>
+    );
+  },
+);

package/mobile/src/components/ProductGallery/ProductGalleryContent.ts

@@ -12,7 +12,8 @@ interface ProductGalleryNav {
  * @title Слайд
  */
 export interface ProductSlide {
-  nav: ProductGalleryNav;
+  /** @title Превью содержимого слайда на навигации */
+  nav?: ProductGalleryNav;
   /** @title Содержимое слайда */
   productBlock: ProductBlockInnerCommonProps;
 }

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

@@ -1,5 +1,6 @@
 {
   "title": "Шаги",
+  "description": "Описание",
   "showLines": true,
   "steps": [
     {

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -10,7 +10,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
   ({ className, title, description, steps, size = 'normal' }) => {
     return (
       <section
-        className={`box-border font-sans text-primary-text bg-white px-20 py-[50px] flex flex-col ${
+        className={`box-border font-sans text-primary-text bg-white px-4 py-6 flex flex-col ${
           className || ''
         }`}
       >

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -19,6 +19,7 @@ export interface Step {
 export interface StepsBlockContent {
   /** @title Заголовок */
   title?: string;
+  /** @title Описание */
   description?: string; // TODO: mobile content
   /** @title Линии */
   showLines?: boolean;

package/mobile/src/components/TextBlock/TextBlock.tsx

@@ -1,15 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+import { Img } from '../../ui-kit/Img';
+
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import type { UniBlockProps } from '../../types';
-import { Img } from '../../ui-kit/Img';
 import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
 
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 
-const textBlockStyleMaps: Record<
-  TextBlockVersion,
-  { background: string; icon: string; title: string; description: string }
-> = {
+const textBlockStyleMaps: Record<TextBlockVersion, Record<string, string>> = {
   primary: {
     background: 'bg-white',
     icon: 'bg-primary-main text-white',
@@ -31,35 +31,46 @@ const textBlockStyleMaps: Record<
 };
 
 export const TextBlock = JSX<TextBlockProps>(
-  ({ title, description, blockVersion = 'primary', iconVersion, image, className }) => {
+  ({ title, description, blockVersion = 'primary', iconVersion, image, className = '', items }) => {
     const textBlockStyleMap = textBlockStyleMaps[blockVersion];
     return (
       <section
-        className={`font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`}
+        className={`font-sans px-4 py-[18px] flex flex-col ${textBlockStyleMap.background} ${className}`}
       >
-        {iconVersion && iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
-        {iconVersion && iconVersion === 'big' ? renderImage(image) : null}
+        {iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
+        {iconVersion === 'big' ? renderImage(image) : null}
         <div className="py-0.5">
-          {title && (
+          {title ? (
             <div className={`font-medium text-base mb-1 ${textBlockStyleMap.title}`}>{title}</div>
-          )}
-          {description && (
+          ) : null}
+          {description ? (
             <div className={`text-sm ${textBlockStyleMap.description}`}>{description}</div>
-          )}
+          ) : null}
+          {items?.length ? renderItems(items) : null}
         </div>
       </section>
     );
   },
 );
 
+function renderItems(items: string[] = [], version?: BlockVersion) {
+  return (
+    <section className="mt-1" role="list">
+      {items.map((_, i) => (
+        <BlockItem key={String(i)} text={_} version={version} />
+      ))}
+    </section>
+  );
+}
+
 function renderIcon(className: string) {
   return (
-    <div className={`pt-1.5 pl-1 pr-4`}>
+    <div className="mb-3">
       <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
     </div>
   );
 }
 
 function renderImage(image?: Picture) {
-  return image?.src ? <Img className="pt-0.5 pr-3" image={image} /> : null;
+  return image?.src ? <Img className="pb-3 mr-auto" image={image} /> : null;
 }

package/mobile/src/components/TextBlock/TextBlockContent.ts

@@ -23,4 +23,5 @@ export interface TextBlockContent {
   iconVersion?: TextBlockIconVersion;
   image?: Picture;
   blockVersion?: TextBlockVersion;
+  items?: string[]; // TODO: mobile content
 }

package/mobile/src/components/Tile/Tile.tsx

@@ -19,7 +19,7 @@ export const Tile = JSX<TileProps>((props) => {
 
   return (
     <section
-      className={`font-sans p-9 box-border ${className} ${
+      className={`font-sans p-9 box-border ${className || ''} ${
         tileStyleMap[version]
       } ${getContainerPaddingRight(className)} ${getContainerMinHeight(className)} `}
       role={role}

package/mobile/src/content-page-repository/transformPicture.ts

@@ -45,7 +45,12 @@ async function transformImg(
   )}`;
 
   await mkdir(path.dirname(transformedImgPath), { recursive: true });
-  await chain.toFile(transformedImgPath);
+
+  try {
+    await chain.toFile(transformedImgPath);
+  } catch (e) {
+    console.error(e);
+  }
 
   return transformedSrc;
 }

package/mobile/src/icons/AtmIcon.svg

@@ -0,0 +1,7 @@
+<svg id="icon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.6665 10.441V12.916C1.6665 15.8327 3.33317 17.0827 5.83317 17.0827H14.1665C16.6665 17.0827 18.3332 15.8327 18.3332 12.916V7.08268C18.3332 4.16602 16.6665 2.91602 14.1665 2.91602H5.83317C3.33317 2.91602 1.6665 4.16602 1.6665 7.08268V7.49935H2.49984C4.99984 7.49935 5.83317 6.66602 5.83317 4.16602V3.33268" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5 10C12.5 8.61667 11.3833 7.5 10 7.5C8.61667 7.5 7.5 8.61667 7.5 10C7.5 11.3833 8.61667 12.5 10 12.5" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.3332 7.50065H17.4998C14.9998 7.50065 14.1665 6.66732 14.1665 4.16732V3.33398" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.6665 12.5H2.49984C4.99984 12.5 5.83317 13.3333 5.83317 15.8333V16.6667" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.3332 12.5H17.4998C14.9998 12.5 14.1665 13.3333 14.1665 15.8333V16.6667" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/mobile/src/icons/BankIcon.svg

@@ -0,0 +1,11 @@
+<svg id="icon" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.19151 4.79217C2.89984 4.90883 2.6665 5.25883 2.6665 5.56716V8.33383C2.6665 8.79217 3.0415 9.16717 3.49984 9.16717H18.4998C18.9582 9.16717 19.3332 8.79217 19.3332 8.33383V5.56716C19.3332 5.25883 19.0998 4.90883 18.8082 4.79217L11.3082 1.79219C11.1415 1.72552 10.8582 1.72552 10.6915 1.79219L6.65815 3.40886" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.3332 18.3333H2.6665V15.8333C2.6665 15.375 3.0415 15 3.49984 15H18.4998C18.9582 15 19.3332 15.375 19.3332 15.8333V18.3333Z" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.3335 14.9993V9.16602" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.6665 14.9993V9.16602" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 14.9993V9.16602" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.3335 14.9993V9.16602" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.6665 14.9993V9.16602" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.8335 18.334H20.1668" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 7.08398C11.6904 7.08398 12.25 6.52434 12.25 5.83398C12.25 5.14363 11.6904 4.58398 11 4.58398C10.3096 4.58398 9.75 5.14363 9.75 5.83398C9.75 6.52434 10.3096 7.08398 11 7.08398Z" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/mobile/src/icons/BurgerIcon.svg

@@ -0,0 +1,6 @@
+<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6H21" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/>
+<path d="M9.49023 12H21.0002" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/>
+<path d="M3 12H5.99" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/>
+<path d="M3 18H21" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/mobile/src/icons/BurgerIconWhite.svg

@@ -0,0 +1,6 @@
+<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6H21" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
+<path d="M9.49023 12H21.0002" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
+<path d="M3 12H5.99" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
+<path d="M3 18H21" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/mobile/src/icons/CloseIcon.svg

@@ -0,0 +1,6 @@
+<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.70304 5.11173C3.31449 4.72318 3.31449 4.09322 3.70304 3.70468C4.09159 3.31613 4.72155 3.31613 5.1101 3.70467L11.3313 9.92584C11.7198 10.3144 11.7198 10.9444 11.3313 11.3329C10.9427 11.7214 10.3128 11.7214 9.92421 11.3329L3.70304 5.11173Z" fill="#1C1C1C"/>
+<path d="M12.6679 14.0766C12.2793 13.688 12.2793 13.0581 12.6679 12.6695C13.0564 12.281 13.6864 12.281 14.0749 12.6695L20.2961 18.8907C20.6847 19.2792 20.6847 19.9092 20.2961 20.2977C19.9076 20.6863 19.2776 20.6863 18.8891 20.2977L12.6679 14.0766Z" fill="#1C1C1C"/>
+<path d="M14.0746 11.3316C13.6861 11.7202 13.0561 11.7202 12.6676 11.3316C12.279 10.9431 12.279 10.3131 12.6676 9.92457L18.8887 3.70341C19.2773 3.31486 19.9072 3.31486 20.2958 3.70341C20.6843 4.09195 20.6843 4.72191 20.2958 5.11046L14.0746 11.3316Z" fill="#1C1C1C"/>
+<path d="M5.11027 20.2262C4.72172 20.6147 4.09176 20.6147 3.70321 20.2262C3.31466 19.8376 3.31466 19.2077 3.70321 18.8191L9.92438 12.5979C10.3129 12.2094 10.9429 12.2094 11.3314 12.5979C11.72 12.9865 11.72 13.6164 11.3314 14.005L5.11027 20.2262Z" fill="#1C1C1C"/>
+</svg>

package/mobile/src/icons/GeolocationIcon.svg

@@ -0,0 +1,4 @@
+<svg id="icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5999 8.59219C12.5999 10.0255 11.4416 11.1922 9.9999 11.1922C8.55824 11.1922 7.3999 10.0339 7.3999 8.59219C7.3999 7.15052 8.56657 5.99219 9.9999 5.99219C10.2832 5.99219 10.5582 6.03385 10.8082 6.11719" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.98314 3.58338C8.62481 0.158384 15.6831 1.33338 16.9831 7.09172C17.9415 11.3251 15.3081 14.9084 12.9998 17.1251C11.3248 18.7417 8.67481 18.7417 6.99147 17.1251C4.69147 14.9001 2.04981 11.3167 3.01647 7.08338" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/mobile/src/model/Picture.ts

@@ -27,4 +27,5 @@ export interface ImgSource {
 export interface Picture extends Img, ImgSource {
   /** @title Другие форматы */
   sources?: ImgSource[];
+  className?: string;
 }

package/mobile/src/ui-kit/BlockItem/BlockItem.tsx

@@ -17,7 +17,7 @@ const LIST_STYLE_MAP: Record<BlockItemVersion, string> = {
 export const BlockItem = JSX<BlockItemProps>(
   ({ className = '', isDotted = true, text, children, version = 'primary', white }) => {
     return (
-      <div className={`font-sans inline-block flex items-baseline ${className}`} role="listitem">
+      <div className={`font-sans flex items-baseline ${className}`} role="listitem">
         {isDotted && <div className={getListStyle(version, white)} />}
         <span className={white ? 'text-white' : TEXT_STYLE_MAP[version]}>{text || children}</span>
       </div>
@@ -29,7 +29,7 @@ const getListStyle = (version: BlockVersion, white?: boolean) => {
   const color = white ? 'bg-white' : LIST_STYLE_MAP[version];
   const size =
     version === 'primary'
-      ? 'w-[8px] h-[8px] min-w-[8px] min-h-[8px] mt-2'
+      ? 'w-2 h-2 min-w-2 min-h-2 mt-2'
       : 'w-[6px] h-[6px] min-w-[6px] min-h-[6px] mt-2.5';
 
   return `${LIST_STYLE_CLASSES} ${color} ${size}`;

package/mobile/src/ui-kit/Breadcrumb.tsx

@@ -7,20 +7,15 @@ export interface BreadcrumbProps extends LinkProps {
 }
 
 export const Breadcrumb = JSX<BreadcrumbProps>(
-  ({ text, href, target, onClick, className, children }) => {
+  ({ text, href, target, onClick, className = '', children }) => {
     if (href) {
       return (
-        <a
-          className={`no-underline ${className || ''}`}
-          href={href}
-          target={target}
-          onClick={onClick}
-        >
-          <span className={`${className || ''}`}>{text || children}</span>
+        <a className={`no-underline ${className}`} href={href} target={target} onClick={onClick}>
+          <span className={className}>{text || children}</span>
         </a>
       );
     } else {
-      return <span className={`${className || ''}`}>{text || children}</span>;
+      return <span className={className}>{text || children}</span>;
     }
   },
 );

package/mobile/src/ui-kit/Button/Button.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable max-lines-per-function */
+/* eslint-disable complexity */
+
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { ButtonProps, ButtonWithIconProps } from './ButtonProps';
@@ -13,7 +16,7 @@ const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   secondary: 'bg-secondary-light text-secondary-text',
 };
 
-const styleButton = 'inline-block text-center font-sans select-none';
+const styleButton = 'w-full text-center font-sans select-none';
 
 export interface ButtonCommonProps extends ButtonProps, ButtonWithIconProps {}
 
@@ -46,7 +49,7 @@ export const Button = JSX<ButtonCommonProps>(
           aria-disabled="true"
           aria-label={ariaLabel}
           tabIndex="-1"
-          className={`${styleButton} ${buttonDisabledStyleMap[version] || ''} ${
+          className={`inline-block ${styleButton} ${buttonDisabledStyleMap[version] || ''} ${
             rounded ? 'rounded-full' : 'rounded-md'
           } ${className || ''}`}
         >
@@ -57,9 +60,9 @@ export const Button = JSX<ButtonCommonProps>(
 
     return (
       <a
-        className={`${styleButton} cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${
-          rounded ? 'rounded-full' : 'rounded-md'
-        } ${className || ''}`}
+        className={`${styleButton} inline-block cursor-pointer no-underline ${
+          buttonStyleMap[version] || ''
+        } ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`}
         href={href}
         target={target}
         onClick={onClick}
@@ -77,18 +80,18 @@ export const ButtonInner = JSX<ButtonInner>(({ text, aboveText, appendLeft, roun
   const withoutText = !text && !aboveText && Boolean(appendLeft);
 
   const buttonInnerClasses = `flex items-center justify-center ${
-    withoutText ? 'h-12 w-12 min-h-12 min-w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[13px]'}`
+    withoutText ? 'h-12 w-12' : `px-9 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`
   } ${rounded ? 'rounded-full' : ''}`;
 
   return (
     <div className={buttonInnerClasses}>
       {appendLeft ? appendLeft : null}
-      {!withoutText ? (
+      {withoutText ? null : (
         <div>
-          <div className="text-2xs text-left">{aboveText}</div>
-          <div className="text-sm font-medium text-left">{text}</div>
+          <div className="text-m-2xs text-left">{aboveText}</div>
+          <div className="text-m-button font-medium text-left">{text}</div>
         </div>
-      ) : null}
+      )}
     </div>
   );
 });

package/mobile/src/ui-kit/HeaderItem/HeaderItem.tsx

@@ -4,27 +4,31 @@ import type { TopItemProps } from '../TopItem/TopItem';
 
 export type HeaderItemProps = TopItemProps;
 
-const TEXT_CLASSES = 'font-sans font-normal text-base';
-const BORDER_CLASSES = 'absolute left-0 -bottom-2 w-full h-[2px]';
+const TEXT_CLASSES = 'font-sans font-normal text-sm';
+const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
 
 export const HeaderItem = JSX<HeaderItemProps>(
-  ({ className, text, href, target, active, onClick, children, bgColor = 'bg-white' }) => (
-    <a
-      className={`relative inline-block bg-transparent text-center no-underline ${className || ''}`}
-      href={href}
-      target={target}
-      onClick={onClick}
-    >
-      <span className={getTextClasses(bgColor, active)}>{text || children}</span>
-      {active ? <div className={getBorderClasses(bgColor, active)} /> : null}
-    </a>
-  ),
+  ({ className, text, href, target, active, onClick, children, bgColor = 'bg-white' }) => {
+    return (
+      <a
+        className={`relative inline-block bg-transparent text-center no-underline ${
+          className || ''
+        }`}
+        href={href}
+        target={target}
+        onClick={onClick}
+      >
+        <span className={getTextClasses(bgColor, active)}>{text || children}</span>
+        {active ? <div className={getBorderClasses(bgColor, active)} /> : null}
+      </a>
+    );
+  },
 );
 
 const getTextClasses = (bgColor: BgColorVersion, active?: boolean) => {
   let classes = 'text-white';
   if (bgColor === 'bg-white') {
-    classes = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
+    classes = active ? 'text-primary-main' : 'text-secondary-text hover:text-primary-main';
   }
 
   return `${classes} ${TEXT_CLASSES}`;
@@ -35,5 +39,5 @@ const getBorderClasses = (bgColor: BgColorVersion, active?: boolean) => {
     return BORDER_CLASSES;
   }
 
-  return `${bgColor === 'bg-white' ? bgColor : 'bg-primary-main'} ${BORDER_CLASSES}`;
+  return `${bgColor === 'bg-white' ? 'bg-primary-main' : bgColor} ${BORDER_CLASSES}`;
 };