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

package/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/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/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/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/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/src/icons/IconName.ts

@@ -1,250 +1,17 @@
+
 // Generated. Do not touch
 /* 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»'
 }
 
 /**
@@ -252,108 +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/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/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/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',
   '': '',
 };