@redneckz/wildless-cms-uni-blocks 0.7.5 → 0.7.7

package/mobile/src/components/Tabs/Tabs.tsx

@@ -2,9 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../../EventBus/EventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import type { TabData, TabsContent } from './TabsContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderTab } from './renderTab';
-import type { TabData, TabsContent } from './TabsContent';
+import { ScrollableTabs } from './ScrollableTabs';
 
 export interface TabActivationEvent {
   type?: TabData['type'];
@@ -14,7 +15,7 @@ export interface TabActivationEvent {
 export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
 export const Tabs = JSX<TabsBlockProps>((props) => {
-  const { className = '', tabs, showCounter, isSticky, ...rest } = props;
+  const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
@@ -25,6 +26,8 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
         if (event.type === 'link' && tab) {
           setCurrentTab(tab);
         }
+
+        return [];
       }),
     [tabs],
   );
@@ -46,11 +49,30 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
 
   return (
     <BlockWrapper
-      className={`${isSticky ? 'sticky top-1 z-20 ' : ''}box-border flex gap-x-1 ${className}`}
+      className={`relative box-border flex gap-x-1 w-full ${
+        isSticky ? 'sticky top-1 z-20 ' : ''
+      } ${className}`}
       role="tablist"
       {...rest}
     >
-      {tabs?.map(renderTab({ onClick: handleClick, currentTab, showCounter, ...rest }))}
+      {tabsMode === 'scrollable' ? (
+        <ScrollableTabs
+          tabs={tabs}
+          onClick={handleClick}
+          currentTab={currentTab}
+          showCounter={showCounter}
+          {...rest}
+        />
+      ) : (
+        tabs?.map(
+          renderTab({
+            onClick: handleClick,
+            currentTab,
+            showCounter,
+            ...rest,
+          }),
+        )
+      )}
     </BlockWrapper>
   );
 });

package/mobile/src/components/Tabs/TabsContent.ts

@@ -27,6 +27,14 @@ export type LinkTabData = LinkProps & {
  */
 export type TabData = GroupTabData | LinkTabData;
 
+/**
+ * @enumNames [
+ *   "По ширине экрана",
+ *   "С прокруткой"
+ * ]
+ */
+export type TabsMode = 'wideScreen' | 'scrollable';
+
 /**
  * @title Вкладки
  */
@@ -37,4 +45,9 @@ export interface TabsContent {
   isSticky?: boolean;
   /** @title Показывать счетчик блоков во вкладках */
   showCounter?: boolean;
+  /**
+   * @title Режим вкладок
+   * @default "wideScreen"
+   */
+  tabsMode?: TabsMode;
 }

package/mobile/src/components/Tabs/renderGroupTab.tsx

@@ -1,13 +1,12 @@
+import type { GroupTabData } from './TabsContent';
 import type { RenderTabProps } from './renderTab';
 import {
-  ACTIVE_LINK_CLASSES,
   ACTIVE_TEXT_CLASSES,
-  INACTIVE_LINK_CLASSES,
   INACTIVE_TEXT_CLASSES,
-  LINK_CLASSES,
   TEXT_CLASSES,
+  WHITE_ACTIVE_TEXT_CLASSES,
+  getGroupTabClassName,
 } from './tabItemClasses';
-import type { GroupTabData } from './TabsContent';
 
 const BADGE_CLASSES =
   'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
@@ -16,7 +15,7 @@ const INACTIVE_BADGE_CLASSES =
   'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
 
 export const renderGroupTab =
-  ({ page, currentTab, showCounter, onClick }: RenderTabProps) =>
+  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
   (tab: GroupTabData, i: number) => {
     const active = currentTab === tab;
 
@@ -27,28 +26,39 @@ export const renderGroupTab =
 
     return (
       <div
-        key={String(i)}
-        className={`${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`}
+        key={`group-${String(i)}`}
+        className={getGroupTabClassName('div', active, isScrollable)}
         role="tab"
         aria-selected={active}
         onClick={() => onClick(tab)}
       >
-        <div className="flex flex-1 items-center justify-center">
-          {tab?.title ? renderTitle(tab.title, active) : null}
-          {showCounter && count ? renderCount(count, active) : null}
+        <div
+          className={`flex flex-1 items-center justify-center ${getGroupTabClassName(
+            'text',
+            active,
+            isScrollable,
+          )}`}
+        >
+          {renderTitle(tab.title, active, isScrollable)}
+          {renderCount(showCounter, count, active)}
         </div>
       </div>
     );
   };
 
-const renderTitle = (title: string, active: boolean) => (
-  <h3 className={`${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`}>
-    {title}
-  </h3>
-);
+const renderTitle = (title: string | undefined, active: boolean, isScrollable: boolean) => {
+  const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
+  const titleClassName = isScrollable
+    ? `${TEXT_CLASSES} ${activeClassName}`
+    : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
+
+  return title ? <h3 className={titleClassName}>{title}</h3> : null;
+};
 
-const renderCount = (count: number, active: boolean) => (
-  <div className={`${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`}>
-    {count}
-  </div>
-);
+const renderCount = (showCounter: boolean | undefined, count: number, active: boolean) => {
+  return showCounter && count ? (
+    <div className={`${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`}>
+      {count}
+    </div>
+  ) : null;
+};

package/mobile/src/components/Tabs/renderTab.tsx

@@ -9,12 +9,11 @@ export interface RenderTabProps {
   currentTab?: TabData;
   showCounter?: boolean;
   onClick: (tab: TabData) => void;
+  isScrollable?: boolean;
 }
 
 export const renderTab =
-  ({ page, currentTab, showCounter, onClick }: RenderTabProps) =>
-  // Linter doesn't understand that switch processes all cases
-  // eslint-disable-next-line consistent-return
+  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
   (tab: TabData, i: number) => {
     const type = tab.type;
 
@@ -24,11 +23,15 @@ export const renderTab =
 
     switch (type) {
       case 'group':
-        return renderGroupTab({ page, currentTab, showCounter, onClick })(tab, i);
+        return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
       case 'link': {
-        return <LinkTab key={String(i)} tab={tab} currentTab={currentTab} />;
+        return (
+          <LinkTab key={String(i)} tab={tab} currentTab={currentTab} isScrollable={isScrollable} />
+        );
       }
       default:
         assertUnreachable(type);
     }
+
+    return null;
   };

package/mobile/src/components/Tabs/tabItemClasses.ts

@@ -2,6 +2,70 @@ export const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor
 export const ACTIVE_LINK_CLASSES = 'bg-primary-main';
 export const INACTIVE_LINK_CLASSES = 'group/btn bg-white';
 
-export const TEXT_CLASSES = 'font-sans text-m';
+export const SCROLLABLE_ACTIVE_LINK_CLASSES = 'bg-white text-primary-main';
+export const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
+
+export const TEXT_CLASSES = 'font-sans text-m text-center';
 export const ACTIVE_TEXT_CLASSES = 'text-white';
 export const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
+
+export const WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
+
+const GROUP_TAB_CLASSES = {
+  div: {
+    scrollable: {
+      active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
+      default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+    },
+    default: {
+      active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+      default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
+    },
+  },
+  text: {
+    scrollable: {
+      active: `h-full border-0 border-b-2`,
+      default: ``,
+    },
+    default: {
+      active: '',
+      default: '',
+    },
+  },
+};
+const LINK_TAB_CLASSES = {
+  link: {
+    scrollable: {
+      active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
+      default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+    },
+    default: {
+      active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
+      default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+    },
+  },
+  text: {
+    scrollable: {
+      active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
+      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+    },
+    default: {
+      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
+      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+    },
+  },
+};
+
+export const getGroupTabClassName = (type: string, active: boolean, isScrollable: boolean) => {
+  const styleType = isScrollable ? 'scrollable' : 'default';
+  const styleActive = active ? 'active' : 'default';
+
+  return GROUP_TAB_CLASSES[type][styleType][styleActive];
+};
+
+export const getLinkTabClassName = (type: string, active: boolean, isScrollable: boolean) => {
+  const styleType = isScrollable ? 'scrollable' : 'default';
+  const styleActive = active ? 'active' : 'default';
+
+  return LINK_TAB_CLASSES[type][styleType][styleActive];
+};

package/mobile/src/hooks/useBool.ts

@@ -0,0 +1,19 @@
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+export function useBool(defaultValue = false): [
+  boolean,
+  {
+    setValue: (_: boolean) => void;
+    setTrue: () => void;
+    setFalse: () => void;
+    toggle: () => void;
+  },
+] {
+  const [value, setValue] = useState<boolean>(defaultValue);
+
+  const setTrue = useCallback(() => setValue(true), []);
+  const setFalse = useCallback(() => setValue(false), []);
+  const toggle = useCallback(() => setValue((_) => !_), []);
+
+  return [value, { setValue, setTrue, setFalse, toggle }];
+}

package/mobile/src/icons/HeadphonesIcon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" name="Наушники" fill="none" viewBox="0 0 24 23">
+  <path fill="currentColor" fill-rule="evenodd"
+    d="M2.002 19.612a3.025 3.025 0 0 1-2-2.965V13.48a2.948 2.948 0 0 1 1.53-2.561v-.272C1.504 5.437 5.237.98 10.334.14c5.098-.841 10.044 2.182 11.664 7.128.124.34.058.718-.17.995a.997.997 0 0 1-1.71-.299 8.484 8.484 0 0 0-3.999-4.85 8.505 8.505 0 0 0-8.417.215 8.657 8.657 0 0 0-4.17 7.378v1.009c0 .557-.448 1.008-1 1.008-.17 0-.5.393-.5.767v3.267c0 .557.447 1.008 1 1.008.552 0 1-.451 1-1.008v-2.26c0-.556.447-1.007 1-1.007.551 0 .999.45.999 1.008v2.259c.004.99-.472 1.92-1.276 2.488a2.978 2.978 0 0 1-2.753.366Zm19.876.222a3.022 3.022 0 0 0 2.12-2.885v-2.924a3.025 3.025 0 0 0-2-2.965 2.978 2.978 0 0 0-2.74.388 3.034 3.034 0 0 0-1.259 2.486v2.017c0 .557.448 1.008 1 1.008s1-.451 1-1.008v-2.017c0-.557.447-1.008 1-1.008.552 0 1 .451 1 1.008v3.025c0 .557-.448 1.009-1 1.009a.996.996 0 0 0-.73.316c-.189.203-.287.475-.27.753a2.008 2.008 0 0 1-2 1.956h-4v-.716c0-.557-.447-1.008-1-1.008-.551 0-.999.451-.999 1.008v1.715c0 .556.448 1.008 1 1.008h4.999a4.007 4.007 0 0 0 3.91-3.166h-.03Z"
+    clip-rule="evenodd" />
+</svg>

package/mobile/src/icons/IconName.ts

@@ -3,15 +3,15 @@
 /* eslint-disable max-len, max-lines */
 
 export const IconsWithoutInversion = new Set([
-  'ActualBalanceIcon', 'AirPlaneIcon', 'CardWithGemIcon', 'CarIcon', 'CinemaIcon', 'ClockIcon', 'ComfortableCompIcon', 'CreditCardsIcon', 'DocsIcon', 'DollarIcon', 'DoneIcon', 'EarthIcon', 'EuroIcon', 'FullScreenIcon', 'GlassIcon', 'HeartIcon', 'HuaweiIcon', 'InterestGrowthIcon', 'JCBIcon', 'MapMarkerClusterIcon', 'MapMarkerSingleIcon', 'MasterCardIcon', 'MirIcon', 'MoneyInsuranceIcon', 'NewDocIcon', 'OfficeIcon', 'PackA4Icon', 'PassSendIcon', 'PercentIcon', 'PowerIcon', 'PumpkinIcon', 'SignDocsIcon', 'SoundIcon', 'UnionPayIcon', 'UserGeoLocationIcon', 'VisaIcon', 'WateringCanIcon'
+  'ActualBalanceIcon', 'AirPlaneIcon', 'CardWithGemIcon', 'CarIcon', 'CinemaIcon', 'ClockIcon', 'ComfortableCompIcon', 'CreditCardsIcon', 'DocsIcon', 'DollarIcon', 'DoneIcon', 'EarthIcon', 'EuroIcon', 'FullScreenIcon', 'GlassIcon', 'HeadphonesIcon', 'HeartIcon', 'HuaweiIcon', 'InterestGrowthIcon', 'JCBIcon', 'MapMarkerClusterIcon', 'MapMarkerSingleIcon', 'MasterCardIcon', 'MirIcon', 'MoneyInsuranceIcon', 'NewDocIcon', 'OfficeIcon', 'PackA4Icon', 'PassSendIcon', 'PercentIcon', 'PowerIcon', 'PumpkinIcon', 'SignDocsIcon', 'SoundIcon', 'UnionPayIcon', 'UserGeoLocationIcon', 'VisaIcon', 'WateringCanIcon'
 ]);
 
 export enum IconMap {
-  ActualBalanceIcon = 'ActualBalanceIcon', AirPlaneIcon = 'AirPlaneIcon', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowRightIcon = 'ArrowRightIcon', ArrowTopRightIcon = 'ArrowTopRightIcon', ArrowUpIcon = 'ArrowUpIcon', AtmIcon = 'AtmIcon', BankIcon = 'BankIcon', BuildingIcon = 'BuildingIcon', BurgerIcon = 'BurgerIcon', Calendar2Icon = 'Calendar2Icon', CalendarCircleIcon = 'CalendarCircleIcon', CalendarIcon = 'CalendarIcon', CalendarTickIcon = 'CalendarTickIcon', Car2Icon = 'Car2Icon', CardIcon = 'CardIcon', CardPosIcon = 'CardPosIcon', CardTickIcon = 'CardTickIcon', CardWithGemIcon = 'CardWithGemIcon', CarIcon = 'CarIcon', ChartSquareIcon = 'ChartSquareIcon', CinemaIcon = 'CinemaIcon', ClockIcon = 'ClockIcon', CloseIcon = 'CloseIcon', ComfortableCompIcon = 'ComfortableCompIcon', CreditCardsIcon = 'CreditCardsIcon', DiscountShapeIcon = 'DiscountShapeIcon', DocDownloadIcon = 'DocDownloadIcon', DocIcon = 'DocIcon', DocIconMonoColor = 'DocIconMonoColor', DocsIcon = 'DocsIcon', DocumentText2Icon = 'DocumentText2Icon', DocumentTextIcon = 'DocumentTextIcon', DollarIcon = 'DollarIcon', DoneIcon = 'DoneIcon', DoneSimpleIcon = 'DoneSimpleIcon', EarthIcon = 'EarthIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', EmptyWalletIcon = 'EmptyWalletIcon', EuroIcon = 'EuroIcon', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'GeolocationIcon', GlassIcon = 'GlassIcon', GlobalIcon = 'GlobalIcon', GpsIcon = 'GpsIcon', GridIcon = 'GridIcon', HeartIcon = 'HeartIcon', HuaweiIcon = 'HuaweiIcon', InterestGrowthIcon = 'InterestGrowthIcon', InterestIcon = 'InterestIcon', JCBIcon = 'JCBIcon', LogoIcon = 'LogoIcon', LoupeIcon = 'LoupeIcon', MapMarkerClusterIcon = 'MapMarkerClusterIcon', MapMarkerSingleIcon = 'MapMarkerSingleIcon', MasterCardIcon = 'MasterCardIcon', MetroIcon = 'MetroIcon', MinusIcon = 'MinusIcon', MirIcon = 'MirIcon', MoneyIcon = 'MoneyIcon', MoneyInsuranceIcon = 'MoneyInsuranceIcon', MoneysIcon = 'MoneysIcon', MonitorMobileIcon = 'MonitorMobileIcon', NewDocIcon = 'NewDocIcon', OfficeIcon = 'OfficeIcon', OkIcon = 'OkIcon', PackA4Icon = 'PackA4Icon', PassSendIcon = 'PassSendIcon', PercentageRoundIcon = 'PercentageRoundIcon', PercentageSquareIcon = 'PercentageSquareIcon', PercentIcon = 'PercentIcon', PersonalCardIcon = 'PersonalCardIcon', PlayMarketIcon = 'PlayMarketIcon', PlusIcon = 'PlusIcon', PowerIcon = 'PowerIcon', Profile2UserIcon = 'Profile2UserIcon', ProfileIcon = 'ProfileIcon', PumpkinIcon = 'PumpkinIcon', RoundRubleIcon = 'RoundRubleIcon', SafeIcon = 'SafeIcon', ShieldTickIcon = 'ShieldTickIcon', SignDocsIcon = 'SignDocsIcon', SmallClockIcon = 'SmallClockIcon', SoundIcon = 'SoundIcon', StrongBoxIcon = 'StrongBoxIcon', TelegramIcon = 'TelegramIcon', UnionPayIcon = 'UnionPayIcon', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'UserSquareIcon', UserTickIcon = 'UserTickIcon', VisaIcon = 'VisaIcon', VKIcon = 'VKIcon', WalletAdd2Icon = 'WalletAdd2Icon', WalletAddIcon = 'WalletAddIcon', WalletIcon = 'WalletIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WateringCanIcon = 'WateringCanIcon', YoutubeIcon = 'YoutubeIcon'
+  ActualBalanceIcon = 'ActualBalanceIcon', AirPlaneIcon = 'AirPlaneIcon', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowRightIcon = 'ArrowRightIcon', ArrowTopRightIcon = 'ArrowTopRightIcon', ArrowUpIcon = 'ArrowUpIcon', AtmIcon = 'AtmIcon', BankIcon = 'BankIcon', BuildingIcon = 'BuildingIcon', BurgerIcon = 'BurgerIcon', Calendar2Icon = 'Calendar2Icon', CalendarCircleIcon = 'CalendarCircleIcon', CalendarIcon = 'CalendarIcon', CalendarTickIcon = 'CalendarTickIcon', Car2Icon = 'Car2Icon', CardIcon = 'CardIcon', CardPosIcon = 'CardPosIcon', CardTickIcon = 'CardTickIcon', CardWithGemIcon = 'CardWithGemIcon', CarIcon = 'CarIcon', ChartSquareIcon = 'ChartSquareIcon', CinemaIcon = 'CinemaIcon', ClockIcon = 'ClockIcon', CloseIcon = 'CloseIcon', ComfortableCompIcon = 'ComfortableCompIcon', CreditCardsIcon = 'CreditCardsIcon', DiscountShapeIcon = 'DiscountShapeIcon', DocDownloadIcon = 'DocDownloadIcon', DocIcon = 'DocIcon', DocIconMonoColor = 'DocIconMonoColor', DocsIcon = 'DocsIcon', DocumentText2Icon = 'DocumentText2Icon', DocumentTextIcon = 'DocumentTextIcon', DollarIcon = 'DollarIcon', DoneIcon = 'DoneIcon', DoneSimpleIcon = 'DoneSimpleIcon', EarthIcon = 'EarthIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', EmptyWalletIcon = 'EmptyWalletIcon', EuroIcon = 'EuroIcon', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'GeolocationIcon', GlassIcon = 'GlassIcon', GlobalIcon = 'GlobalIcon', GpsIcon = 'GpsIcon', GridIcon = 'GridIcon', HeadphonesIcon = 'HeadphonesIcon', HeartIcon = 'HeartIcon', HuaweiIcon = 'HuaweiIcon', InterestGrowthIcon = 'InterestGrowthIcon', InterestIcon = 'InterestIcon', JCBIcon = 'JCBIcon', LogoIcon = 'LogoIcon', LoupeIcon = 'LoupeIcon', MapMarkerClusterIcon = 'MapMarkerClusterIcon', MapMarkerSingleIcon = 'MapMarkerSingleIcon', MasterCardIcon = 'MasterCardIcon', MetroIcon = 'MetroIcon', MinusIcon = 'MinusIcon', MirIcon = 'MirIcon', MoneyIcon = 'MoneyIcon', MoneyInsuranceIcon = 'MoneyInsuranceIcon', MoneysIcon = 'MoneysIcon', MonitorMobileIcon = 'MonitorMobileIcon', NewDocIcon = 'NewDocIcon', OfficeIcon = 'OfficeIcon', OkIcon = 'OkIcon', PackA4Icon = 'PackA4Icon', PassSendIcon = 'PassSendIcon', PercentageRoundIcon = 'PercentageRoundIcon', PercentageSquareIcon = 'PercentageSquareIcon', PercentIcon = 'PercentIcon', PersonalCardIcon = 'PersonalCardIcon', PlayMarketIcon = 'PlayMarketIcon', PlusIcon = 'PlusIcon', PowerIcon = 'PowerIcon', Profile2UserIcon = 'Profile2UserIcon', ProfileIcon = 'ProfileIcon', PumpkinIcon = 'PumpkinIcon', RoundRubleIcon = 'RoundRubleIcon', SafeIcon = 'SafeIcon', ShieldTickIcon = 'ShieldTickIcon', SignDocsIcon = 'SignDocsIcon', SmallClockIcon = 'SmallClockIcon', SoundIcon = 'SoundIcon', StrongBoxIcon = 'StrongBoxIcon', TelegramIcon = 'TelegramIcon', UnionPayIcon = 'UnionPayIcon', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'UserSquareIcon', UserTickIcon = 'UserTickIcon', VisaIcon = 'VisaIcon', VKIcon = 'VKIcon', WalletAdd2Icon = 'WalletAdd2Icon', WalletAddIcon = 'WalletAddIcon', WalletIcon = 'WalletIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WateringCanIcon = 'WateringCanIcon', YoutubeIcon = 'YoutubeIcon'
 }
 
 export enum IconTitleMap {
-  ActualBalanceIcon = 'Деньги', AirPlaneIcon = 'Самолёт', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowLeftIcon = 'Стрелка \'Влево\'', ArrowRightIcon = 'Стрелка \'Вправо\'', ArrowTopRightIcon = 'Стрелка \'Вверх-право\'', ArrowUpIcon = 'Стрелка \'Вверх\'', AtmIcon = 'Банкомат', BankIcon = 'Банк', BuildingIcon = 'Здание с деревом', BurgerIcon = 'Бургер', Calendar2Icon = 'Календарь 2', CalendarCircleIcon = 'Скруглённый календарь', CalendarIcon = 'Календарь', CalendarTickIcon = 'Календарь с галочкой', Car2Icon = 'Машина2', CardIcon = 'Кред. карта', CardPosIcon = 'Кред. карта под наклоном', CardTickIcon = 'Кред. карта с галочкой', CardWithGemIcon = 'Карта с драгоценностями', CarIcon = 'Машина', ChartSquareIcon = 'Деньги внутри кошелька', CinemaIcon = 'Кинотеатр', ClockIcon = 'Часы', CloseIcon = 'Крестик', ComfortableCompIcon = 'Кресло', CreditCardsIcon = 'Кредитные карты', DiscountShapeIcon = 'Скидка', DocDownloadIcon = 'Скачать документ', DocIcon = 'Документ', DocIconMonoColor = 'Документ (одноцветный)', DocsIcon = 'Документы', DocumentText2Icon = 'Документы-2', DocumentTextIcon = 'Документ с текстом', DollarIcon = 'Доллар', DoneIcon = 'Зелёная \'галочка\' в круге', DoneSimpleIcon = 'Зелёная \'галочка\'', EarthIcon = 'Земля', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', EmptyWalletIcon = 'Пустой кошелёк', EuroIcon = 'Евро', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'Геолокация', GlassIcon = 'Зеркало', GlobalIcon = 'Глобус', GpsIcon = 'Gps', GridIcon = 'Сетка (белая)', HeartIcon = 'Сердце', HuaweiIcon = 'Лого «Huawei»', InterestGrowthIcon = 'Диаграмма роста', InterestIcon = 'Скидка', JCBIcon = 'JCB', LogoIcon = 'Logo', LoupeIcon = 'Лупа', MapMarkerClusterIcon = 'Маркер карты', MapMarkerSingleIcon = 'Маркер карты РСХБ', MasterCardIcon = 'MasterCard', MetroIcon = 'Лого Метро', MinusIcon = 'Минус', MirIcon = 'МИР', MoneyIcon = 'Деньги', MoneyInsuranceIcon = 'Денежное страхование', MoneysIcon = 'Купюры', MonitorMobileIcon = 'Монитор и мобильный', NewDocIcon = 'Новый документ', OfficeIcon = 'Офис', OkIcon = 'Лого «Одноклассники»', PackA4Icon = 'Пачка бумаги А4', PassSendIcon = 'Бизнес', PercentageRoundIcon = 'Проценты (круг.)', PercentageSquareIcon = 'Проценты', PercentIcon = 'PercentIcon', PersonalCardIcon = 'Персональная карта', PlayMarketIcon = 'Лого «PlayMarket»', PlusIcon = 'Плюс', PowerIcon = 'Щит', Profile2UserIcon = 'Профиль, 2 персоны', ProfileIcon = 'Профиль', PumpkinIcon = 'Тыква', RoundRubleIcon = 'Рубль (круг.)', SafeIcon = 'Сейф', ShieldTickIcon = 'Безопасность', SignDocsIcon = 'Подписанные документы', SmallClockIcon = 'Маленькие часы', SoundIcon = 'Звук', StrongBoxIcon = 'Ящик с замочной скважиной', TelegramIcon = 'Лого «Telegram»', UnionPayIcon = 'UnionPay', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'Пользователь в рамке', UserTickIcon = 'Пользователь', VisaIcon = 'Visa', VKIcon = 'Лого «VK»', WalletAdd2Icon = 'Пополнение карты', WalletAddIcon = 'Кошелёк с плюсом', WalletIcon = 'Кошелёк', WalletWithMoneyIcon = 'Кошелёк с деньгами', WateringCanIcon = 'Добавить продукт', YoutubeIcon = 'Лого «Youtube»'
+  ActualBalanceIcon = 'Деньги', AirPlaneIcon = 'Самолёт', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowLeftIcon = 'Стрелка \'Влево\'', ArrowRightIcon = 'Стрелка \'Вправо\'', ArrowTopRightIcon = 'Стрелка \'Вверх-право\'', ArrowUpIcon = 'Стрелка \'Вверх\'', AtmIcon = 'Банкомат', BankIcon = 'Банк', BuildingIcon = 'Здание с деревом', BurgerIcon = 'Бургер', Calendar2Icon = 'Календарь 2', CalendarCircleIcon = 'Скруглённый календарь', CalendarIcon = 'Календарь', CalendarTickIcon = 'Календарь с галочкой', Car2Icon = 'Машина2', CardIcon = 'Кред. карта', CardPosIcon = 'Кред. карта под наклоном', CardTickIcon = 'Кред. карта с галочкой', CardWithGemIcon = 'Карта с драгоценностями', CarIcon = 'Машина', ChartSquareIcon = 'Деньги внутри кошелька', CinemaIcon = 'Кинотеатр', ClockIcon = 'Часы', CloseIcon = 'Крестик', ComfortableCompIcon = 'Кресло', CreditCardsIcon = 'Кредитные карты', DiscountShapeIcon = 'Скидка', DocDownloadIcon = 'Скачать документ', DocIcon = 'Документ', DocIconMonoColor = 'Документ (одноцветный)', DocsIcon = 'Документы', DocumentText2Icon = 'Документы-2', DocumentTextIcon = 'Документ с текстом', DollarIcon = 'Доллар', DoneIcon = 'Зелёная \'галочка\' в круге', DoneSimpleIcon = 'Зелёная \'галочка\'', EarthIcon = 'Земля', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', EmptyWalletIcon = 'Пустой кошелёк', EuroIcon = 'Евро', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'Геолокация', GlassIcon = 'Зеркало', GlobalIcon = 'Глобус', GpsIcon = 'Gps', GridIcon = 'Сетка (белая)', HeadphonesIcon = 'HeadphonesIcon', HeartIcon = 'Сердце', HuaweiIcon = 'Лого «Huawei»', InterestGrowthIcon = 'Диаграмма роста', InterestIcon = 'Скидка', JCBIcon = 'JCB', LogoIcon = 'Logo', LoupeIcon = 'Лупа', MapMarkerClusterIcon = 'Маркер карты', MapMarkerSingleIcon = 'Маркер карты РСХБ', MasterCardIcon = 'MasterCard', MetroIcon = 'Лого Метро', MinusIcon = 'Минус', MirIcon = 'МИР', MoneyIcon = 'Деньги', MoneyInsuranceIcon = 'Денежное страхование', MoneysIcon = 'Купюры', MonitorMobileIcon = 'Монитор и мобильный', NewDocIcon = 'Новый документ', OfficeIcon = 'Офис', OkIcon = 'Лого «Одноклассники»', PackA4Icon = 'Пачка бумаги А4', PassSendIcon = 'Бизнес', PercentageRoundIcon = 'Проценты (круг.)', PercentageSquareIcon = 'Проценты', PercentIcon = 'PercentIcon', PersonalCardIcon = 'Персональная карта', PlayMarketIcon = 'Лого «PlayMarket»', PlusIcon = 'Плюс', PowerIcon = 'Щит', Profile2UserIcon = 'Профиль, 2 персоны', ProfileIcon = 'Профиль', PumpkinIcon = 'Тыква', RoundRubleIcon = 'Рубль (круг.)', SafeIcon = 'Сейф', ShieldTickIcon = 'Безопасность', SignDocsIcon = 'Подписанные документы', SmallClockIcon = 'Маленькие часы', SoundIcon = 'Звук', StrongBoxIcon = 'Ящик с замочной скважиной', TelegramIcon = 'Лого «Telegram»', UnionPayIcon = 'UnionPay', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'Пользователь в рамке', UserTickIcon = 'Пользователь', VisaIcon = 'Visa', VKIcon = 'Лого «VK»', WalletAdd2Icon = 'Пополнение карты', WalletAddIcon = 'Кошелёк с плюсом', WalletIcon = 'Кошелёк', WalletWithMoneyIcon = 'Кошелёк с деньгами', WateringCanIcon = 'Добавить продукт', YoutubeIcon = 'Лого «Youtube»'
 }
 
 /**
@@ -19,7 +19,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Банкомат', 'Банк', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кинотеатр', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'PercentIcon', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт', 'Лого «Youtube»'
+ *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Банкомат', 'Банк', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кинотеатр', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'HeadphonesIcon', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'PercentIcon', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт', 'Лого «Youtube»'
  * ]
  */
-export type IconName = '' | 'ActualBalanceIcon' | 'AirPlaneIcon' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowLeftIcon' | 'ArrowRightIcon' | 'ArrowTopRightIcon' | 'ArrowUpIcon' | 'AtmIcon' | 'BankIcon' | 'BuildingIcon' | 'BurgerIcon' | 'Calendar2Icon' | 'CalendarCircleIcon' | 'CalendarIcon' | 'CalendarTickIcon' | 'Car2Icon' | 'CardIcon' | 'CardPosIcon' | 'CardTickIcon' | 'CardWithGemIcon' | 'CarIcon' | 'ChartSquareIcon' | 'CinemaIcon' | 'ClockIcon' | 'CloseIcon' | 'ComfortableCompIcon' | 'CreditCardsIcon' | 'DiscountShapeIcon' | 'DocDownloadIcon' | 'DocIcon' | 'DocIconMonoColor' | 'DocsIcon' | 'DocumentText2Icon' | 'DocumentTextIcon' | 'DollarIcon' | 'DoneIcon' | 'DoneSimpleIcon' | 'EarthIcon' | 'EmptyWalletChangeIcon' | 'EmptyWalletIcon' | 'EuroIcon' | 'FullScreenIcon' | 'GeolocationIcon' | 'GlassIcon' | 'GlobalIcon' | 'GpsIcon' | 'GridIcon' | 'HeartIcon' | 'HuaweiIcon' | 'InterestGrowthIcon' | 'InterestIcon' | 'JCBIcon' | 'LogoIcon' | 'LoupeIcon' | 'MapMarkerClusterIcon' | 'MapMarkerSingleIcon' | 'MasterCardIcon' | 'MetroIcon' | 'MinusIcon' | 'MirIcon' | 'MoneyIcon' | 'MoneyInsuranceIcon' | 'MoneysIcon' | 'MonitorMobileIcon' | 'NewDocIcon' | 'OfficeIcon' | 'OkIcon' | 'PackA4Icon' | 'PassSendIcon' | 'PercentageRoundIcon' | 'PercentageSquareIcon' | 'PercentIcon' | 'PersonalCardIcon' | 'PlayMarketIcon' | 'PlusIcon' | 'PowerIcon' | 'Profile2UserIcon' | 'ProfileIcon' | 'PumpkinIcon' | 'RoundRubleIcon' | 'SafeIcon' | 'ShieldTickIcon' | 'SignDocsIcon' | 'SmallClockIcon' | 'SoundIcon' | 'StrongBoxIcon' | 'TelegramIcon' | 'UnionPayIcon' | 'UserGeoLocationIcon' | 'UserSquareIcon' | 'UserTickIcon' | 'VisaIcon' | 'VKIcon' | 'WalletAdd2Icon' | 'WalletAddIcon' | 'WalletIcon' | 'WalletWithMoneyIcon' | 'WateringCanIcon' | 'YoutubeIcon';
+export type IconName = '' | 'ActualBalanceIcon' | 'AirPlaneIcon' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowLeftIcon' | 'ArrowRightIcon' | 'ArrowTopRightIcon' | 'ArrowUpIcon' | 'AtmIcon' | 'BankIcon' | 'BuildingIcon' | 'BurgerIcon' | 'Calendar2Icon' | 'CalendarCircleIcon' | 'CalendarIcon' | 'CalendarTickIcon' | 'Car2Icon' | 'CardIcon' | 'CardPosIcon' | 'CardTickIcon' | 'CardWithGemIcon' | 'CarIcon' | 'ChartSquareIcon' | 'CinemaIcon' | 'ClockIcon' | 'CloseIcon' | 'ComfortableCompIcon' | 'CreditCardsIcon' | 'DiscountShapeIcon' | 'DocDownloadIcon' | 'DocIcon' | 'DocIconMonoColor' | 'DocsIcon' | 'DocumentText2Icon' | 'DocumentTextIcon' | 'DollarIcon' | 'DoneIcon' | 'DoneSimpleIcon' | 'EarthIcon' | 'EmptyWalletChangeIcon' | 'EmptyWalletIcon' | 'EuroIcon' | 'FullScreenIcon' | 'GeolocationIcon' | 'GlassIcon' | 'GlobalIcon' | 'GpsIcon' | 'GridIcon' | 'HeadphonesIcon' | 'HeartIcon' | 'HuaweiIcon' | 'InterestGrowthIcon' | 'InterestIcon' | 'JCBIcon' | 'LogoIcon' | 'LoupeIcon' | 'MapMarkerClusterIcon' | 'MapMarkerSingleIcon' | 'MasterCardIcon' | 'MetroIcon' | 'MinusIcon' | 'MirIcon' | 'MoneyIcon' | 'MoneyInsuranceIcon' | 'MoneysIcon' | 'MonitorMobileIcon' | 'NewDocIcon' | 'OfficeIcon' | 'OkIcon' | 'PackA4Icon' | 'PassSendIcon' | 'PercentageRoundIcon' | 'PercentageSquareIcon' | 'PercentIcon' | 'PersonalCardIcon' | 'PlayMarketIcon' | 'PlusIcon' | 'PowerIcon' | 'Profile2UserIcon' | 'ProfileIcon' | 'PumpkinIcon' | 'RoundRubleIcon' | 'SafeIcon' | 'ShieldTickIcon' | 'SignDocsIcon' | 'SmallClockIcon' | 'SoundIcon' | 'StrongBoxIcon' | 'TelegramIcon' | 'UnionPayIcon' | 'UserGeoLocationIcon' | 'UserSquareIcon' | 'UserTickIcon' | 'VisaIcon' | 'VKIcon' | 'WalletAdd2Icon' | 'WalletAddIcon' | 'WalletIcon' | 'WalletWithMoneyIcon' | 'WateringCanIcon' | 'YoutubeIcon';

package/mobile/src/model/ButtonVersion.ts

@@ -1,6 +1,13 @@
 /**
  * @title Тема кнопки
- * @enumNames ["Основная", "Второстепенная", "Белая", "Ссылка", "Прозрачная", "Наследуемая"]
+ * @enumNames ["Основная", "Второстепенная", "Белая", "Ссылка", "Прозрачная", "Серая", "Наследуемая"]
  * @default primary
  */
-export type ButtonVersion = 'primary' | 'secondary' | 'white' | 'link' | 'transparent' | '';
+export type ButtonVersion =
+  | 'primary'
+  | 'secondary'
+  | 'white'
+  | 'link'
+  | 'transparent'
+  | 'gray'
+  | '';

package/mobile/src/setup-fixture.ts

@@ -27,6 +27,5 @@ useRouter.setup(() => {
 
 handlerDecorator.setup((handler, targetContent): any => (ev) => {
   ev.preventDefault();
-  console.log(ev.target, ev, targetContent);
   handler(ev);
 });

package/mobile/src/ui-kit/Button/buttonClassNameConstants.ts

@@ -8,6 +8,7 @@ export const buttonStyleMap: Record<ButtonVersion, string> = {
     'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
   link: '',
   transparent: '',
+  gray: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
   '': '',
 };
 
@@ -19,6 +20,7 @@ export const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   white: DisabledStyle,
   link: '',
   transparent: '',
+  gray: DisabledStyle,
   '': '',
 };
 
@@ -30,5 +32,6 @@ export const iconStyleMap: Record<ButtonVersion, string> = {
   white: 'group-hover/btn:brightness-0 group-hover/btn:invert',
   link: '',
   transparent: '',
+  gray: 'group-hover/btn:brightness-0 group-hover/btn:invert',
   '': '',
 };

package/mobile/src/ui-kit/Img/ImgProps.ts

@@ -4,6 +4,7 @@ import type { IconCompatibilityFields } from '../Icon/IconProps';
 export interface ImageContent {
   image?: Picture;
 }
+
 export interface ImageProps extends ImageContent, IconCompatibilityFields {
   className?: string;
   imageClassName?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -20,7 +20,6 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors, ...rest }) => (
     <BlockWrapper
       className={`border box-border border-gray p-7 min-w-[392px] flex flex-col justify-left ${className}`}
-      role="listitem"
       {...rest}
     >
       {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -37,7 +37,6 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
           align,
           className,
         )}
-        role="listitem"
         version={version}
         {...rest}
       >

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -10,9 +10,12 @@
   "title": "Заголовок 1",
   "description": "Описание 1",
   "socialMedia": [
-    { "href": "https://t.me" },
-    { "href": "https://vk.com" },
-    { "href": "https://ok.ru" }
+    {
+      "href": "https://t.me",
+      "target": "_blank",
+      "version": "gray",
+      "rounded": false
+    }
   ],
   "version": "primary"
   }

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx

@@ -1,4 +1,4 @@
-import type { LinkProps } from '../../model/LinkProps';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard';
@@ -14,10 +14,25 @@ const image: Picture = {
   title: 'product-basket',
 };
 
-const socialMedia: LinkProps[] = [
-  { href: 'https://t.me' },
-  { href: 'https://vk.com' },
-  { href: 'https://ok.ru' },
+const socialMedia: ButtonWithIconProps[] = [
+  {
+    href: 'https://t.me',
+    target: '_blank',
+    version: 'gray',
+    rounded: false,
+  },
+  {
+    href: 'https://vk.com',
+    target: '_blank',
+    version: 'gray',
+    rounded: false,
+  },
+  {
+    href: 'https://ok.ru',
+    target: '_blank',
+    version: 'gray',
+    rounded: false,
+  },
 ];
 
 const items = ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'];

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -21,6 +21,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     items = [],
     socialMedia = [],
     title,
+    version = 'primary',
     ...rest
   }) => {
     const tileTitle = title ? (
@@ -39,6 +40,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
           BORDER_STYLE,
           className,
         )}
+        version={version}
         {...rest}
       >
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.ui.json

@@ -3,6 +3,13 @@
     "items": {
       "image": {
         "ui:field": "picture"
+      }, 
+      "socialMedia": {
+        "items": {
+          "icon": {
+            "ui:field": "picture"
+          }
+        }
       }
     }
   }

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -1,7 +1,7 @@
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { LinkCommonProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonWithIconProps, ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
 /**
@@ -10,14 +10,9 @@ import type { ListContent } from '../../ui-kit/List/ListContent';
 export interface CarouselRecommendationCardContent extends HeadlineCommonProps, ListContent {
   /**
    * @title Соц сети
-   * @minItems 3
-   * @default [
-   * { "href": "https://t.me" },
-   * { "href": "https://vk.com" },
-   * { "href": "https://ok.ru" },
-   * ]
+   * @minItems 1
    */
-  socialMedia?: LinkCommonProps[];
+  socialMedia?: ButtonWithIconProps[];
   /**
    * @default {
    *   "format": "webp",
@@ -40,4 +35,5 @@ export interface CarouselRecommendationCardContent extends HeadlineCommonProps,
    * }
    */
   button?: ButtonProps;
+  version?: BlockVersion;
 }

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { projectSettings } from '../../ProjectSettings';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { SitemapDataProps } from '../../services/sitemap/SitemapProps';
 import { useSWRResource } from '../../services/sitemap/useSWRResource';
 import { Button } from '../../ui-kit/Button/Button';

package/src/components/Footer/Footer.tsx

@@ -20,7 +20,7 @@ export interface FooterProps extends FooterContent, UniBlockProps {}
 export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
   const fallback = rest.options?.page?.fallback;
 
-  const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, logo } =
+  const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, logo } =
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
   return (
@@ -37,7 +37,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
             Мобильное приложение
           </SocialMedia>
         </div>
-        <Sitemap className="pt-[3px]" items={topItems} fallback={fallback} />
+        <Sitemap className="pt-[3px]" fallback={fallback} />
       </div>
       <HorizontalNavigation className="mt-[98px]" links={relatedEnterprises} />
       <TextInformation links={documents} />