@redneckz/wildless-cms-uni-blocks 0.6.23 → 0.6.25

package/mobile/src/components/InvestmentGallery/InvestmentGallery.tsx

@@ -0,0 +1,103 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { InvestmentGalleryCard } from './InvestmentGalleryCard';
+import type {
+  InvestmentGalleryCardTypes,
+  InvestmentGalleryContent,
+} from './InvestmentGalleryContent';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+
+const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
+const CARD_FULL_VIEW_COUNT = 1;
+
+export interface InvestmentGalleryProps extends InvestmentGalleryContent, UniBlockProps {}
+
+interface NavButtonsProps {
+  cardsCount: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (number: number) => void;
+}
+
+export const InvestmentGallery = JSX<InvestmentGalleryProps>(
+  ({ context, cards = [], className = '', title, version = 'primary', ...rest }) => {
+    const [activeCardIndex, setActiveCardIndex] = useState(0);
+    const cardWidth = 525;
+
+    return (
+      <BlockWrapper
+        context={context}
+        className={`relative font-sans p-9 overflow-hidden text-center 
+        ${VersionStyleMap[version]} 
+        ${className}`}
+        {...rest}
+      >
+        {title ? <Heading headingType="h3" className="mb-9" title={title} /> : null}
+        <div>
+          <div
+            className="flex duration-1000 gap-3.5"
+            style={{ transform: `translateX(-${activeCardIndex * cardWidth}px)` }}
+            role="list"
+          >
+            {cards?.length
+              ? cards.map(renderInvestmentGalleryCard(context, className, version))
+              : null}
+          </div>
+          {renderNavButtons({
+            cardsCount: cards.length,
+            activeCardIndex,
+            setActiveCardIndex,
+          })}
+        </div>
+        <div
+          className={`${BLUR_BLOCK_CLASSES} left-0 ${
+            version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'
+          }`}
+        />
+        <div
+          className={`${BLUR_BLOCK_CLASSES} right-0 ${
+            version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'
+          }`}
+        />
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderInvestmentGalleryCard =
+  (context: ContentPageContext, className: string, version?: BlockVersion) =>
+  (card: InvestmentGalleryCardTypes, i: number) =>
+    (
+      <InvestmentGalleryCard
+        key={String(i)}
+        className={className}
+        context={context}
+        version={version}
+        {...card}
+      />
+    );
+
+const renderNavButtons = ({ cardsCount, activeCardIndex, setActiveCardIndex }: NavButtonsProps) => {
+  const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
+  const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
+  const showPrevButton = isUseSlider && activeCardIndex > 0;
+
+  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+
+  return (
+    <div>
+      {renderArrows({
+        handler: [handlePrevClick, handleNextClick],
+        isShown: [showPrevButton, showNextButton],
+        btnClass: ['left-8', 'right-8'],
+        className: 'top-1/2 mt-3',
+      })}
+    </div>
+  );
+};

package/mobile/src/components/InvestmentGallery/InvestmentGallery.ui.json

@@ -0,0 +1,11 @@
+{
+  "content": {
+    "recommendations": {
+      "items": {
+        "image": {
+          "ui:field": "picture"
+        }
+      }
+    }
+  }
+}

package/mobile/src/components/InvestmentGallery/InvestmentGalleryCard.tsx

@@ -0,0 +1,91 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { BorderVersionStyleMap } from '../../model/BorderVersion';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { BaseTile } from '../BaseTile/BaseTile';
+import type {
+  CardColumnsMode,
+  CardListItem,
+  InvestmentGalleryCardTypes,
+} from './InvestmentGalleryContent';
+
+export interface RecommendationCardProps extends InvestmentGalleryCardTypes, UniBlockProps {
+  version?: BlockVersion;
+}
+const getItemListFontSize = (colValue?: string) => (colValue === 'single' ? 'text-h6' : 'text-l');
+
+const cardColumnsModeStyleMap: Record<CardColumnsMode, string> = {
+  double: 'flex gap-y-2 gap-x-10 flex-wrap',
+  single: 'flex gap-y-2 flex-col',
+};
+
+export const InvestmentGalleryCard = JSX<RecommendationCardProps>(
+  ({
+    className = '',
+    columnsMode = 'double',
+    context,
+    description,
+    additionalDescription,
+    image,
+    cardList,
+    title,
+    version = 'primary',
+  }) => {
+    const tileTitle = title ? (
+      <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} />
+    ) : null;
+    const tileImage = image?.src ? (
+      <Img className="absolute bottom-0 right-0 m-0" image={image} />
+    ) : null;
+
+    return (
+      <section
+        className={`relative overflow-hidden text-left border border-solid box-border
+          p-9 min-w-[697px] min-h-[319px]
+          ${BorderVersionStyleMap[version]}
+          ${className}`}
+        role="listitem"
+      >
+        <BaseTile
+          context={context}
+          className="flex justify-between"
+          title={tileTitle}
+          image={tileImage}
+        >
+          <div className="flex flex-col justify-between">
+            <div className="flex itens-center justify-between mb-4">
+              {description ? <Description className="text-h6" description={description} /> : null}
+              {additionalDescription ? (
+                <div className="text-m-light text-secondary-text"> {additionalDescription} </div>
+              ) : null}
+            </div>
+            {cardList?.length ? (
+              <div className={`${cardColumnsModeStyleMap[columnsMode]}`} role="list">
+                {renderCardList(cardList, columnsMode)}
+              </div>
+            ) : null}
+          </div>
+        </BaseTile>
+      </section>
+    );
+  },
+);
+
+const renderCardList = (cardList: CardListItem[], columnsMode: string) =>
+  cardList.map((item, i) => (
+    <div
+      key={String(i)}
+      className={columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}
+      role="listitem"
+    >
+      {item?.parameter ? (
+        <span className={`pr-2.5 ${getItemListFontSize(columnsMode)}`}>{item.parameter}</span>
+      ) : null}
+      {item?.parameterDesccription ? (
+        <span className="text-m-light text-secondary-text">{item.parameterDesccription}</span>
+      ) : null}
+    </div>
+  ));

package/mobile/src/components/InvestmentGallery/InvestmentGalleryContent.ts

@@ -0,0 +1,54 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
+import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+
+/**
+ * @title Количество колонок в списке
+ * @enumNames [
+ *   "1 колонка",
+ *   "2 колонки",
+ *  ]
+ */
+export type CardColumnsMode = 'single' | 'double';
+
+/**
+ * @title Карточка
+ */
+export interface InvestmentGalleryCardTypes extends HeadlineCommonProps {
+  /** @title Доп. описание карточки  */
+  additionalDescription?: string;
+  /**
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 290
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 174,
+   *       "format": "webp",
+   *       "alignment": "southeast"
+   *   }]
+   * }
+   */
+  image?: Picture;
+  columnsMode?: CardColumnsMode;
+  /** @title Описание пункта */
+  cardList?: CardListItem[];
+}
+
+export interface CardListItem {
+  /** @title Параметр */
+  parameter?: string;
+  /** @title Описание */
+  parameterDesccription?: string;
+}
+
+/**
+ * @title Карточка
+ */
+export interface InvestmentGalleryContent extends TitleProps {
+  /** @title Карточки */
+  cards?: InvestmentGalleryCardTypes[];
+  version?: BlockVersion;
+}

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

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
 import type { LinkDocsItem } from './LinkDocsContent';
 import type { Picture } from '../../model/Picture';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export interface LinkDocsListItemProps {
   className?: string;
@@ -22,7 +23,13 @@ export const LinkDocsListItemBase = JSX<LinkDocsListItemBaseProps>(
     return (
       <a className={className} role="link" {...linkProps}>
         {icon ? (
-          <Img className={iconClassName} image={icon} width="24px" height="24px" asSVG />
+          <Img
+            className={iconClassName}
+            image={getIconWithVersion(icon)}
+            width="24px"
+            height="24px"
+            asSVG
+          />
         ) : null}
         {text ? (
           <span className={textClassName}>

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

@@ -15,7 +15,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
         {href ? (
           <div className="flex">
             <div className="flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]">
-              <Logo className="w-[33px]" bgColor="transparent" showTitle />
+              <Logo className="w-8" bgColor="transparent" showTitle />
             </div>
             <a href={href} target="_blank" className="flex flex-col justify-center pl-3">
               <div className="text-s font-medium mb-[3px]">{title}</div>

package/mobile/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -7,6 +7,7 @@ import type {
   OfficeServicesBlockContent,
   OfficeServicesBlockList,
 } from './OfficeServicesBlockContent';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export interface OfficeServicesBlockProps extends OfficeServicesBlockContent, UniBlockProps {}
 
@@ -36,7 +37,7 @@ const renderListItems = (itemList: OfficeServicesBlockList, i: number) => (
         width="24"
         height="24"
         asSVG
-        image={itemList.icon}
+        image={getIconWithVersion(itemList.icon)}
       />
     ) : null}
     {itemList.label ? <span className="text-l-light">{itemList.label}</span> : null}

package/mobile/src/components/PictureText/PictureText.tsx

@@ -69,8 +69,8 @@ const renderBenefit = (version: BlockVersion) => (benefit: BenefitItemProps, i:
 function renderInsuranceSumMonth(sum?: number, monthLimit?: number) {
   return sum || monthLimit ? (
     <div className="bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4">
-      {Number.isFinite(sum) ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
-      {Number.isFinite(monthLimit)
+      {Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
+      {Number(monthLimit) > 0
         ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
         : null}
     </div>
@@ -81,7 +81,7 @@ function renderValueBlock(title: string, sum = 0, isAnotherBlock = false) {
   const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
 
   return (
-    <div className={`flex justify-between items-center gap-2 w-full ${widthStyle}`}>
+    <div className={`flex justify-between items-center gap-2 w-full whitespace-pre ${widthStyle}`}>
       <span className="text-secondary-text text-l-light">{title}</span>
       <span className="text-primary-main text-h6">{addSpacesBetweenNumbers(sum)} ₽</span>
     </div>

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

@@ -5,8 +5,8 @@ import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
 
 export const renderBenefit =
   (version: BlockVersion = 'primary', benefitsVersion: IconVersion = 'normal') =>
-  ({ icon, label, description }: BenefitItemProps, i: number) => {
-    return (
+  ({ icon, label, description }: BenefitItemProps, i: number) =>
+    (
       <BenefitItem
         key={String(i)}
         icon={icon}
@@ -16,4 +16,3 @@ export const renderBenefit =
         benefitsVersion={benefitsVersion}
       />
     );
-  };

package/mobile/src/components/Recommendation/Recommendation.tsx

@@ -1,7 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { BorderVersionStyleMap } from '../../model/BorderVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { VersionStyleMap } from '../../model/BlockVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -16,17 +18,15 @@ const CARD_SHIFT = 525;
 export interface RecommendationProps extends RecommendationContent, UniBlockProps {}
 
 export const Recommendation = JSX<RecommendationProps>(
-  ({ context, recommendations = [], className = '', title, version, ...rest }) => {
+  ({ context, recommendations = [], className = '', title, version = 'primary', ...rest }) => {
     const [activeCardIndex, setActiveCardIndex] = useState(0);
 
-    const blockClassName =
-      version === 'secondary' ? 'bg-primary-main text-white' : 'bg-white text-primary-text';
-    const cardClassName = version === 'secondary' ? 'border-white/50' : 'border-main-stroke';
-
     return (
       <BlockWrapper
         context={context}
-        className={`relative font-sans p-9 overflow-hidden text-center ${blockClassName} ${className}`}
+        className={`relative font-sans p-9 overflow-hidden text-center 
+          ${VersionStyleMap[version]} 
+          ${className}`}
         {...rest}
       >
         {title ? <Heading headingType="h3" className="mb-6" title={title} /> : null}
@@ -37,7 +37,9 @@ export const Recommendation = JSX<RecommendationProps>(
             role="list"
           >
             {recommendations?.length
-              ? recommendations.map(renderRecommendationCard(context, cardClassName, version))
+              ? recommendations.map(
+                  renderRecommendationCard(context, BorderVersionStyleMap[version], version),
+                )
               : null}
           </div>
           {renderNavButtons({

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

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { IconVersion } from '../../model/IconVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { SizeVersion } from '../../model/SizeVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
 
@@ -21,11 +21,6 @@ const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
   small: 'min-h-[50px]',
 };
 
-const STEPS_SVG_VERSION_MAP: Record<BlockVersion, IconVersion> = {
-  primary: 'normal',
-  secondary: 'white',
-};
-
 export const StepsBlock = JSX<StepsBlockProps>(
   ({
     className,
@@ -112,7 +107,7 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
       <span className={`font-medium flex self-center ${styleMap.title} ${iconTextSize}`}>
         {checkIsIconRenderable(step?.icon) ? (
           <Img
-            image={{ ...step.icon, iconVersion: STEPS_SVG_VERSION_MAP[version] }}
+            image={getIconWithVersion({ ...step.icon }, version)}
             width={iconSize}
             height={iconSize}
             asSVG

package/mobile/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -19,11 +19,11 @@ const renderButtonsCellData = ({ buttons }: ButtonContent) =>
         renderButton({
           button: { rounded, icon, ...buttonProps },
           buttonClassName: `mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`,
+          index: idx,
         }),
       )}
     </div>
   ) : null;
-
 const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => {
   const labelClassName = `text-xl font-medium m-0 ${description ? 'mb-1' : ''}`;
 

package/mobile/src/components/TariffsTable/TariffsTableRow.tsx

@@ -8,6 +8,7 @@ import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
 import { TariffsTableCell } from './TariffsTableCell';
 import type { Data } from './TariffsTableContent';
 import { TariffsTableRowContainer } from './TariffsTableRowContainer';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export interface TariffsTableRowProps extends UniBlockProps {
   row: Data;
@@ -33,7 +34,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
             {header?.icon ? (
               <Img
                 className="mr-[14px] max-w-6 max-h-6"
-                image={header.icon}
+                image={getIconWithVersion(header.icon)}
                 width="24px"
                 height="24px"
                 asSVG

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

@@ -16,67 +16,49 @@ const not =
   (_: Arg) =>
     !predicate(_);
 
-export function ContentPageRepository({
-  contentDir = 'content',
-  publicDir = 'public',
-}: Partial<TransformationOptions> = {}) {
-  function listAllContentPages(): Promise<string[]> {
-    return find(`${contentDir}/**/*.page.json`);
-  }
+export class ContentPageRepository {
+  public static readonly inst = new ContentPageRepository();
+
+  private cache: Record<string, ContentPageDef> = {};
+
+  constructor(
+    private readonly options: TransformationOptions = {
+      contentDir: 'content',
+      publicDir: 'public',
+    },
+  ) {}
 
-  async function getAllContentPagesMap(): Promise<Record<string, ContentPageDef>> {
-    const pagePaths = await listAllContentPages();
-    const pages = await Promise.all(pagePaths.map(readPage));
-
-    return pagePaths.reduce(
-      (result, path, i) => ({
-        ...result,
-        [path]: pages[i],
-      }),
-      {},
-    );
+  async listAllContentPages(): Promise<string[]> {
+    return find(`${this.options.contentDir}/**/*.page.json`);
   }
 
-  async function getAllContentPages(): Promise<ContentPageDef[]> {
-    return Object.values(await getAllContentPagesMap());
+  async getAllContentPages(): Promise<ContentPageDef[]> {
+    const pagePaths = await this.listAllContentPages();
+
+    return Promise.all(pagePaths.map((_) => this.readPage(_)));
   }
 
-  async function getSecondaryContentPages(customPageType?: string) {
-    const pages = await getAllContentPages();
+  async getSecondaryContentPages(customPageType?: string): Promise<ContentPageDef[]> {
+    const pages = await this.getAllContentPages();
 
     return pages.filter(not(bySlug(INDEX_PAGE_SLUG))).filter(byCustomPageType(customPageType));
   }
 
-  async function getContentPageBySlug(slug: string): Promise<ContentPageDef | undefined> {
-    const pages = await getAllContentPages();
+  async getContentPageBySlug(slug: string): Promise<ContentPageDef | undefined> {
+    const pages = await this.getAllContentPages();
 
     return pages.find(bySlug(slug));
   }
 
-  async function getIndexPage() {
-    return await getContentPageBySlug(INDEX_PAGE_SLUG);
+  async getIndexPage(): Promise<ContentPageDef | undefined> {
+    return this.getContentPageBySlug(INDEX_PAGE_SLUG);
   }
 
-  const cache: Record<string, ContentPageDef> = {};
-
-  async function readPage(filePath: string): Promise<ContentPageDef> {
-    if (!(filePath in cache)) {
-      cache[filePath] = await transformContentPage(filePath, {
-        contentDir,
-        publicDir,
-      });
+  async readPage(filePath: string): Promise<ContentPageDef> {
+    if (!(filePath in this.cache)) {
+      this.cache[filePath] = await transformContentPage(filePath, this.options);
     }
 
-    return cache[filePath];
+    return this.cache[filePath];
   }
-
-  return {
-    listAllContentPages,
-    getAllContentPagesMap,
-    getAllContentPages,
-    getContentPageBySlug,
-    getSecondaryContentPages,
-    getIndexPage,
-    readPage,
-  };
 }

package/mobile/src/hooks/useIntersectionObserver.ts

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+
+export function useIntersectionObserver<R extends Element>(
+  observerCallback: IntersectionObserverCallback,
+  observerOptions?: IntersectionObserverInit,
+) {
+  const ref = useRef<R | null>(null);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return undefined;
+    }
+
+    const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
+    intersectionObserver.observe(ref.current);
+
+    return () => {
+      intersectionObserver.disconnect();
+    };
+  }, [observerCallback, observerOptions]);
+
+  return ref;
+}

package/mobile/src/hooks/useOutsideClick.ts

@@ -1,25 +1,25 @@
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
 
-interface Ref {
-  current: HTMLInputElement | null;
-}
+export function useOutsideClick<R extends Node>(onClick: () => void) {
+  const targetRef = useRef<R | null>(null);
 
-export function useOutsideClick(wrapperRef: Ref, setIsOpen: (_: boolean) => void) {
   useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
+    const handleClickOutside = (event: { target?: any }) => {
       if (
-        wrapperRef &&
-        wrapperRef.current &&
-        event.target instanceof HTMLElement &&
-        !wrapperRef.current.contains(event.target)
+        targetRef &&
+        targetRef.current &&
+        event.target instanceof Node &&
+        !targetRef.current.contains(event.target)
       ) {
-        setIsOpen(false);
+        onClick();
       }
-    }
+    };
     document.addEventListener('click', handleClickOutside);
 
     return () => {
       document.removeEventListener('click', handleClickOutside);
     };
-  }, []);
+  }, [onClick]);
+
+  return targetRef;
 }

package/mobile/src/index.ts

@@ -7,4 +7,4 @@ export { ContentPage } from './components/ContentPage/ContentPage';
 export { projectSettings } from './ProjectSettings';
 export { joinList } from './utils/joinList';
 export * as url from './utils/url';
-export const packageVersion = process?.env?.UNI_BLOCKS_VERSION;
+export const packageVersion = globalThis.process?.env?.UNI_BLOCKS_VERSION;

package/mobile/src/model/BorderVersion.ts

@@ -0,0 +1,10 @@
+/**
+ * @title Цвет бордера
+ * @enumNames ["Основной", "Второстепенный"]
+ */
+export type BorderVersion = 'primary' | 'secondary';
+
+export const BorderVersionStyleMap: Record<BorderVersion, string> = {
+  primary: 'border-main-stroke',
+  secondary: 'border-white/50',
+};

package/mobile/src/model/IconVersion.ts

@@ -1,9 +1,12 @@
 /**
  * @title Цвет иконки
+ * @default normal
  * @enumNames [
- *    "Нормальный",
+ *    "по умолчанию",
+ *    "Цветной",
  *    "Белый",
  *    "Чёрный"
  * ]
  */
-export type IconVersion = 'normal' | 'white' | 'black';
+
+export type IconVersion = 'normal' | 'color' | 'white' | 'black';