@redneckz/wildless-cms-uni-blocks 0.6.15 → 0.6.17

package/src/components/Header/HeaderSubMenu.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
@@ -16,39 +16,52 @@ export interface HeaderSubMenuProps {
 }
 
 export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [], bgColor }) => {
-  const [menuVisible, setMenuVisible] = useState(false);
-  const router = context.useRouter();
   const { handlerDecorator } = context;
+  const router = context.useRouter();
+
+  const subItemsListRef = useRef<HTMLDivElement | null>(null);
+
+  const [menuVisible, setMenuVisible] = useState(false);
 
   const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
   const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
-  const activeSubItem = findActiveSubItem(router)(subItems);
-  const toggleMenu = () => setMenuVisible(!menuVisible);
+  const observerOptions = useMemo(
+    () => ({ threshold: 1, root: subItemsListRef.current }),
+    [subItemsListRef.current],
+  );
+
+  const observerCallbacks = useMemo(
+    () =>
+      subItems.map((_, index) => (entries: IntersectionObserverEntry[]) => {
+        if (!entries.length) {
+          return;
+        }
 
-  const observerCallback = (itemIndex: number) => (entries: IntersectionObserverEntry[]) => {
-    if (!entries.length) {
-      return;
-    }
+        // Assumption about sorting entries by time
+        const entry = entries[entries.length - 1];
 
-    const entry = entries[0];
+        if (entry.isIntersecting) {
+          setVisibleItemsCount(handleIntersectionActivation(index));
+        } else {
+          setVisibleItemsCount(handleIntersectionDeactivation(index));
+        }
+      }),
+    [subItems],
+  );
 
-    if (entry.intersectionRatio < 1) {
-      setVisibleItemsCount((prev) => Math.min(prev, itemIndex));
-    } else {
-      setVisibleItemsCount((prev) => Math.max(prev, itemIndex + 1));
-    }
-  };
+  const activeSubItem = findActiveSubItem(router)(subItems);
+  const toggleMenu = () => setMenuVisible(!menuVisible);
 
   return (
     <nav className="relative mt-6">
-      <div className="overflow-hidden whitespace-nowrap mr-52 pb-3">
+      <div ref={subItemsListRef} className="overflow-hidden whitespace-nowrap mr-52 pb-3">
         {subItems.map((_, i) => (
           <IntersectionObserverTag
-            tag="span"
-            observerCallback={observerCallback(i)}
-            observerOptions={{ threshold: 1 }}
             key={String(i)}
+            tag="span"
+            observerCallback={observerCallbacks[i]}
+            observerOptions={observerOptions}
           >
             <HeaderItem
               className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
@@ -72,3 +85,6 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [],
     </nav>
   );
 });
+
+const handleIntersectionActivation = (index: number) => (prev: number) => Math.max(prev, index + 1);
+const handleIntersectionDeactivation = (index: number) => (prev: number) => Math.min(prev, index);

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

@@ -1,8 +1,6 @@
-import type { IconVersion } from '../../model/IconVersion';
 import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { Img } from '../../ui-kit/Img/Img';
 import { MobileAppTile } from './MobileAppTile';
 
 const image: Picture = {
@@ -34,14 +32,7 @@ const listItems = [
 const button1: ButtonWithIconProps = {
   aboveText: 'Загрузите в',
   text: 'App Store',
-  appendLeft: (
-    <Img
-      image={{ icon: 'AppleIcon', iconVersion: 'white' as IconVersion }}
-      width="24"
-      height="24"
-      asSVG
-    />
-  ),
+  icon: { icon: 'AppleIcon', iconVersion: 'white' },
   href: 'apps.apple.com',
   version: 'primary',
 };
@@ -49,13 +40,11 @@ const button1: ButtonWithIconProps = {
 const button2: ButtonWithIconProps = {
   aboveText: 'Доступно в',
   text: 'Google Play',
-  appendLeft: <Img image={{ icon: 'PlayMarketIcon' }} width="24" height="24" asSVG />,
+  icon: { icon: 'PlayMarketIcon' },
   href: 'play.google.com',
   version: 'secondary',
 };
 
-const icon = <Img image={{ icon: 'AppleIcon' }} width="24" height="24" asSVG />;
-
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -72,7 +61,7 @@ export default {
         buttons={[
           {
             ...button1,
-            appendLeft: icon,
+            icon: { icon: 'AppleIcon' },
             version: 'secondary',
           },
           button2,

package/src/components/OfficeMap/OfficeMap.tsx

@@ -1,21 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useOfficeMap } from '../../hooks/useOfficeMap';
+import { useOfficeMap } from './useOfficeMap';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { OFFICE_MAP } from './mockOfficeMap';
-import type { NearbyOffices, OfficeMapProps, WorkScheduleWeek } from './OfficeMapContent';
+import type { OfficeMapProps, WorkScheduleWeek } from './OfficeMapContent';
 import { renderCurrentDaySchedule, renderDay, renderNearbyOffice } from './renderFunctions';
-import { YandexMap } from './YandexMap';
+import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
+import { nearbyOffices } from './nearbyOffices';
 
 export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
   const resultOfficeMap = useOfficeMap('063') || OFFICE_MAP;
   const { name, address, gpsLatitude, gpsLongitude, workSchedule } =
     resultOfficeMap as OfficeMapProps;
   const {
-    workTime,
-    lunchHour,
-    workTimeSaturday,
-    lunchHourSaturday,
     workingMonday,
     workingTuesday,
     workingWednesday,
@@ -24,8 +21,8 @@ export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
     workingSaturday,
     workingSunday,
   } = workSchedule;
+  const { workTime, lunchHour, workTimeSaturday, lunchHourSaturday } = workSchedule;
   const point = gpsLatitude && gpsLongitude ? [gpsLatitude, gpsLongitude] : null;
-
   const workScheduleWeek: WorkScheduleWeek[] = [
     { title: 'Понедельник', status: workingMonday, workTime, lunchHour },
     { title: 'Вторник', status: workingTuesday, workTime, lunchHour },
@@ -46,12 +43,6 @@ export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
     },
     { title: 'Воскресенье', status: workingSunday },
   ];
-  // Добавлено для проверки
-  const nearbyOffices: NearbyOffices[] = [
-    { title: 'Деловой центр', time: '1 мин', distance: '~30 м.', icon: 'MetroIcon' },
-    { title: 'Выставочная', time: '5 мин', distance: '~120 м.', icon: 'MetroIcon' },
-    { title: 'Деловой центр', time: '8 мин', distance: '~350 м.', icon: 'MetroIcon' },
-  ];
   const currentWeekDayInd = new Date().getDay();
   const currentWeekDay =
     currentWeekDayInd > 0 ? workScheduleWeek[currentWeekDayInd - 1] : workScheduleWeek[6];
@@ -70,9 +61,11 @@ export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
         <div className="flex pt-4">{nearbyOffices.map(renderNearbyOffice)}</div>
       </div>
       <div className="flex justify-between pt-8">
-        <div className="flex-grow h-full bg-gray">{point ? <YandexMap point={point} /> : null}</div>
-        <div className="w-[434px] pl-9 pr-12 pb-14">
-          <div className="flex flex-col">{workScheduleWeek.map(renderDay)}</div>
+        <div className="flex-grow h-full w-full overflow-hidden">
+          {point ? <YandexMap points={[point]} className="h-full" /> : null}
+        </div>
+        <div className="w-[434px] min-w-[434px] pl-9 pr-12 pb-14 flex flex-col">
+          {workScheduleWeek.map(renderDay)}
         </div>
       </div>
     </div>

package/src/components/OfficeMap/nearbyOffices.ts

@@ -0,0 +1,8 @@
+import { NearbyOffices } from './OfficeMapContent';
+
+// Добавлено для проверки
+export const nearbyOffices: NearbyOffices[] = [
+  { title: 'Деловой центр', time: '1 мин', distance: '~30 м.', icon: 'MetroIcon' },
+  { title: 'Выставочная', time: '5 мин', distance: '~120 м.', icon: 'MetroIcon' },
+  { title: 'Деловой центр', time: '8 мин', distance: '~350 м.', icon: 'MetroIcon' },
+];

package/src/components/OfficeMap/renderFunctions.tsx

@@ -23,8 +23,11 @@ export const renderCurrentDaySchedule = ({ lunchHour, status, workTime }: WorkSc
   );
 };
 
-export const renderNearbyOffice = ({ icon, title, distance, time }: NearbyOffices, inx: number) => (
-  <div className="flex mr-4" key={`nearbyOffice${inx}`}>
+export const renderNearbyOffice = (
+  { icon, title, distance, time }: NearbyOffices,
+  index: number,
+) => (
+  <div className="flex mr-4" key={`nearbyOffice${index}`}>
     <Icon name={icon} width="16" height="16" asSVG className="mr-1" />
     {title ? <span className="text-m">{title}&nbsp;</span> : null}
     <span className="text-m-light">

package/src/{hooks → components/OfficeMap}/useOfficeMap.ts

@@ -1,5 +1,5 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
-import { fetchJSON } from '../utils/fetchJSON';
+import { fetchJSON } from '../../utils/fetchJSON';
 
 const OFFICE_MAP_URL = '/api/v1/branches';
 

package/src/components/PictureText/PictureText.tsx

@@ -47,7 +47,7 @@ export const PictureText = JSX<PictureTextProps>(
             {benefits?.length ? (
               <div className="flex flex-col gap-4">{benefits.map(renderBenefit(version))}</div>
             ) : null}
-            {renderInsuranceSumMonth(sum, monthLimit)}
+            {renderInsuranceSumMonth(Number(sum), Number(monthLimit))}
           </div>
         </div>
       </BlockWrapper>

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -9,7 +9,7 @@ import { SafeDepositRentalForm } from './SafeDepositRentalForm';
 import { HandleChangeState, SafeDepositRentalState } from './SafeDepositRentalTypes';
 import { Region, useGetRegions } from './useGetRegions';
 import { getBranch, getCoordinates } from './utils';
-import { YandexMap } from './YandexMap';
+import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
 
 export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlockProps {}
 
@@ -58,7 +58,7 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
           />
           {footnote ? <p className="text-s-light text-secondary-text">{footnote}</p> : null}
         </div>
-        {points.length && showMap ? <YandexMap points={points} /> : null}
+        {points.length && showMap ? <YandexMap points={points} className="h-[640px]" /> : null}
       </BlockWrapper>
     );
   },

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -113,6 +113,8 @@ export default {
           text: 'Отправить заявку',
           href: 'https://www.rshb.ru/',
           target: '_blank',
+          icon: { icon: 'ComfortableCompIcon' },
+          iconRight: { icon: 'ComfortableCompIcon' },
         }}
       />
     </div>

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

@@ -1,5 +1,5 @@
-import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import { List } from '../../ui-kit/List/List';
@@ -15,16 +15,12 @@ export type EmbeddableCellDataType =
 const renderButtonsCellData = ({ buttons }: ButtonContent) =>
   buttons && buttons?.length ? (
     <div>
-      {buttons.map(({ rounded, appendLeft, ariaLabel, ...buttonProps }, idx) => (
-        <Button
-          className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${appendLeft ? 'w-12 h-12' : ''}`}
-          key={String(idx)}
-          appendLeft={appendLeft}
-          rounded={rounded}
-          ariaLabel={ariaLabel}
-          {...buttonProps}
-        />
-      ))}
+      {buttons.map(({ rounded, icon, ...buttonProps }, idx) =>
+        renderButton({
+          button: { rounded, icon, ...buttonProps },
+          buttonClassName: `mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`,
+        }),
+      )}
     </div>
   ) : null;
 

package/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../../EventBus/EventBus';
-import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import { TableInnerButton, TableInnerButtonProps } from '../../ui-kit/InnerTable/InnerTableButton';
@@ -21,14 +21,12 @@ export type EmbeddableCellDataType =
 const renderButtonsCellData = ({ buttons }: ButtonContent) =>
   buttons && buttons?.length ? (
     <div>
-      {buttons.map(({ rounded, ...buttonProps }, idx) => (
-        <Button
-          className={`${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`}
-          key={String(idx)}
-          rounded={rounded}
-          {...buttonProps}
-        />
-      ))}
+      {buttons.map(({ rounded, ...buttonProps }, idx) =>
+        renderButton({
+          button: { rounded, ...buttonProps },
+          buttonClassName: `${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`,
+        }),
+      )}
     </div>
   ) : null;
 

package/src/components/TariffsTable/dataFixture.tsx

@@ -1,5 +1,4 @@
 import type { Picture } from '../../model/Picture';
-import { Img } from '../../ui-kit/Img/Img';
 import type {
   InnerTableBlockDef,
   LabelDescriptionCellDef,
@@ -94,14 +93,14 @@ export const columns: TariffsTableColumn[] = [
           tableCellType: 'Buttons',
           buttons: [
             {
-              appendLeft: <Img image={{ icon: 'AppleIcon' }} width="24" height="24" asSVG />,
+              icon: { icon: 'AppleIcon' },
               rounded: true,
               version: 'secondary',
               href: '/',
               target: '_blank',
             },
             {
-              appendLeft: <Img image={{ icon: 'PlayMarketIcon' }} width="24" height="24" asSVG />,
+              icon: { icon: 'PlayMarketIcon' },
               rounded: true,
               version: 'secondary',
               href: '/',

package/src/icons/FullScreenIcon.svg

@@ -0,0 +1,8 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5 3.33333V2H10.5" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5 5.99917V5.3125" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.5 12.6641V13.9974H6.5" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.5 10V10.6867" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5 2L9.5 7" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 9L2.5 14" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/IconName.ts

@@ -15,6 +15,7 @@ export const IconsWithoutInversion = new Set([
   'DoneIcon',
   'EarthIcon',
   'EuroIcon',
+  'FullScreenIcon',
   'GlassIcon',
   'InterestGrowthIcon',
   'JCBIcon',
@@ -32,6 +33,7 @@ export const IconsWithoutInversion = new Set([
   'SignDocsIcon',
   'SoundIcon',
   'UnionPayIcon',
+  'UserGeoLocationIcon',
   'VisaIcon',
   'WateringCanIcon',
 ]);
@@ -76,6 +78,7 @@ export enum IconMap {
   EmptyWalletChangeIcon = 'EmptyWalletChangeIcon',
   EmptyWalletIcon = 'EmptyWalletIcon',
   EuroIcon = 'EuroIcon',
+  FullScreenIcon = 'FullScreenIcon',
   GeolocationIcon = 'GeolocationIcon',
   GlassIcon = 'GlassIcon',
   GlobalIcon = 'GlobalIcon',
@@ -119,6 +122,7 @@ export enum IconMap {
   StrongBoxIcon = 'StrongBoxIcon',
   TelegramIcon = 'TelegramIcon',
   UnionPayIcon = 'UnionPayIcon',
+  UserGeoLocationIcon = 'UserGeoLocationIcon',
   UserSquareIcon = 'UserSquareIcon',
   UserTickIcon = 'UserTickIcon',
   VisaIcon = 'VisaIcon',
@@ -170,6 +174,7 @@ export enum IconTitleMap {
   EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом',
   EmptyWalletIcon = 'Пустой кошелёк',
   EuroIcon = 'Евро',
+  FullScreenIcon = 'FullScreenIcon',
   GeolocationIcon = 'Геолокация',
   GlassIcon = 'Зеркало',
   GlobalIcon = 'Глобус',
@@ -213,6 +218,7 @@ export enum IconTitleMap {
   StrongBoxIcon = 'Ящик с замочной скважиной',
   TelegramIcon = 'Лого «Telegram»',
   UnionPayIcon = 'UnionPay',
+  UserGeoLocationIcon = 'UserGeoLocationIcon',
   UserSquareIcon = 'Пользователь в рамке',
   UserTickIcon = 'Пользователь',
   VisaIcon = 'Visa',
@@ -229,7 +235,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кинотеатр', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
+ *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кинотеатр', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
  * ]
  */
 export type IconName =
@@ -273,6 +279,7 @@ export type IconName =
   | 'EmptyWalletChangeIcon'
   | 'EmptyWalletIcon'
   | 'EuroIcon'
+  | 'FullScreenIcon'
   | 'GeolocationIcon'
   | 'GlassIcon'
   | 'GlobalIcon'
@@ -316,6 +323,7 @@ export type IconName =
   | 'StrongBoxIcon'
   | 'TelegramIcon'
   | 'UnionPayIcon'
+  | 'UserGeoLocationIcon'
   | 'UserSquareIcon'
   | 'UserTickIcon'
   | 'VisaIcon'

package/src/icons/UserGeoLocationIcon.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8314 14.9996H10.5631C9.83003 14.9139 9.24781 14.4212 9.12944 13.7863L8.45478 9.69953C8.39086 9.30917 8.522 8.91367 8.81511 8.61284L10.9081 6.46613C11.1812 6.18446 11.6652 6.14864 11.9891 6.38613C12.313 6.62362 12.3542 7.04448 12.0811 7.32615L9.9881 9.47286L10.6474 13.5729C10.6615 13.6299 10.7184 13.6712 10.7854 13.6729C10.8794 13.6883 10.9726 13.6436 11.0077 13.5663L17.3327 2.55938C17.367 2.50242 17.3568 2.43287 17.3071 2.38521C17.2575 2.33755 17.1789 2.32191 17.1103 2.34605L3.77052 6.73947C3.68052 6.76366 3.62065 6.83764 3.62485 6.91947C3.62336 6.98384 3.67498 7.03995 3.74752 7.05281L6.53815 7.61282C6.8052 7.66641 7.01909 7.83982 7.09924 8.06773C7.1794 8.29564 7.11364 8.54343 6.92674 8.71775C6.73985 8.89207 6.4602 8.96644 6.19315 8.91285L3.35653 8.3395C2.63532 8.17249 2.12473 7.61477 2.09921 6.96614C2.0674 6.31238 2.52658 5.71612 3.23386 5.49278L16.5737 1.09935C17.234 0.878256 17.9827 1.03374 18.4569 1.49044C18.9311 1.94713 19.0328 2.61066 18.7126 3.1594L12.4107 14.173C12.1119 14.6905 11.4972 15.0123 10.8314 14.9996Z" fill="#1C1C1C" stroke="#1C1C1C" stroke-width="0.3"/>
+</svg>

package/src/ui-kit/Button/ButtonProps.ts

@@ -1,6 +1,6 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { IconProps } from '../../model/Picture';
+import type { IconProps, Picture } from '../../model/Picture';
 import type { VNode } from '../../model/VNode';
 
 /**
@@ -29,6 +29,10 @@ export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
 }
 
 export interface ButtonWithIconProps extends ButtonProps {
+  /** @title Иконка слева */
+  icon?: Picture;
+  /** @title Иконка справа */
+  iconRight?: Picture;
   /** @title Верхний текст */
   aboveText?: string;
   /** @hidden */

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

@@ -1,16 +1,23 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { HandlerDecorator, Router } from '../../components/ContentPage/ContentPageContext';
 import { useLink } from '../../hooks/useLink';
+import type { IconVersion } from '../../model/IconVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
+import { Img } from '../Img/Img';
 import { Button } from './Button';
 import type { ButtonContent, ButtonWithIconProps } from './ButtonProps';
 
 export interface ButtonSectionProps extends ButtonContent, UniBlockProps {}
 
-interface ButtonSectionItemProps {
+interface RenderButtonProps {
   button: ButtonWithIconProps;
-  router: Router;
-  handlerDecorator?: HandlerDecorator;
+  buttonClassName?: string;
+  index?: number;
+}
+
+interface RenderButtonIconProps {
+  icon?: Picture;
+  iconVersion?: IconVersion;
 }
 
 export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '', buttons }) => {
@@ -19,20 +26,38 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
 
   return buttons && buttons?.length ? (
     <div className={className}>
-      {buttons.map((button, index) => (
-        <ButtonSectionItem
-          button={button}
-          handlerDecorator={handlerDecorator}
-          key={String(index)}
-          router={router}
-        />
-      ))}
+      {buttons.map((button, index) =>
+        renderButton({ button: useLink({ router, handlerDecorator }, button), index }),
+      )}
     </div>
   ) : null;
 });
 
-const ButtonSectionItem = JSX<ButtonSectionItemProps>(({ router, handlerDecorator, button }) => {
-  const buttonProps = useLink({ router, handlerDecorator }, button);
+export function renderButton({ button, buttonClassName, index }: RenderButtonProps) {
+  const { icon, iconRight, version, ...rest } = button;
 
-  return <Button {...button} {...buttonProps} />;
-});
+  const iconVersion = version === 'secondary' ? 'normal' : 'white';
+
+  const leftIcon = renderButtonIcon({ icon, iconVersion });
+  const rightIcon = renderButtonIcon({ icon: iconRight, iconVersion });
+
+  return (
+    <Button
+      className={buttonClassName}
+      appendLeft={leftIcon}
+      appendRight={rightIcon}
+      version={version}
+      key={index ? String(index) : ''}
+      {...rest}
+    />
+  );
+}
+
+const renderButtonIcon = ({ icon, iconVersion }: RenderButtonIconProps) => {
+  if (!icon?.icon && !icon?.src) {
+    return null;
+  }
+  const iconWidth = icon?.size?.width ? `${icon.size.width}` : '24';
+
+  return <Img image={{ ...icon, iconVersion: iconVersion }} width={iconWidth} height="24" asSVG />;
+};

package/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -13,29 +13,38 @@ interface DefaultFoldButtonProps {
 }
 
 export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
-  ({ className, label, icon, dataTheme = '', onClick }) => (
-    <button
-      className={`border-none bg-primary-main hover:bg-primary-hover px-0 py-5 mb-[1px] w-full font-sans text-white flex justify-center cursor-pointer ${
-        className || ''
-      }`}
-      data-theme={dataTheme}
-      onClick={onClick}
-    >
-      <span className="text-h4 pr-3">{label}</span>
-      {icon ? (
-        <Img
-          image={{
-            icon,
-            iconVersion: 'white',
-          }}
-          className="flex-shrink-0 my-auto"
-          width="20"
-          height="20"
-          asSVG
-        />
-      ) : null}
-    </button>
-  ),
+  ({ className = '', label, icon, dataTheme = '', onClick }) => {
+    const STATE_STYLE =
+      'hover:bg-primary-hover focus:border-primary-text active:bg-primary-active outline-none';
+    const DIMENSIONS_STYLE = 'flex justify-center w-full px-0 py-5 mb-[1px]';
+
+    return (
+      <button
+        className={[
+          'border border-transparent bg-primary-main font-sans text-white cursor-pointer',
+          STATE_STYLE,
+          DIMENSIONS_STYLE,
+          className,
+        ].join(' ')}
+        data-theme={dataTheme}
+        onClick={onClick}
+      >
+        <span className="text-h4 pr-3">{label}</span>
+        {icon ? (
+          <Img
+            image={{
+              icon,
+              iconVersion: 'white',
+            }}
+            className="flex-shrink-0 my-auto"
+            width="20"
+            height="20"
+            asSVG
+          />
+        ) : null}
+      </button>
+    );
+  },
 );
 
 export const renderDefaultFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps) => {