@redneckz/wildless-cms-uni-blocks 0.11.1 → 0.11.2

package/mobile/src/components/Header/HeaderTop.tsx

@@ -1,34 +1,71 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LogoType } from '../../model/LogoType';
-import { Img } from '../../ui-kit/Img/Img';
 import { Logo } from '../../ui-kit/Logo/Logo';
+import { Button } from '../../ui-kit/Button/Button';
+import { style } from '../../utils/style';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { MobileHeaderProps, MobileHeaderType } from './HeaderContent';
+import { Img } from '../../ui-kit/Img/Img';
 
-export interface HeaderTopProps {
-  onClick: () => void;
+export interface HeaderTopProps extends MobileHeaderProps {
   bgColor?: BgColorVersion;
   logo?: LogoType;
+  internetBankUrl?: string;
+  version?: BlockVersion;
+  mobileHeaderType?: MobileHeaderType;
 }
 
-export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor, logo }) => (
-  <div className="flex items-center justify-between border-0 border-b border-main-divider h-12">
-    <div className="flex items-center">
-      <button
-        className="pl-0 pr-4 border-0 bg-transparent cursor-pointer"
-        onClick={onClick}
-        aria-label="Открыть меню"
-      >
-        <Img
-          image={{ icon: 'BurgerIcon', iconVersion: bgColor === 'bg-white' ? 'black' : 'white' }}
-          className="text-primary-text w-6 h-6"
-          width="24"
-          height="24"
-        />
-      </button>
-      <Logo className="mr-8" bgColor={bgColor} logo={logo} />
-    </div>
-    <button className="text-primary-main group-data-transparent:text-white group-data-transparent:hover:text-primary-hover text-s border-0 bg-transparent">
-      Войти
-    </button>
-  </div>
-));
+const BUTTON_STYLE = {
+  default: 'px-5 bg-main-divider rounded hover:text-primary-main',
+  transparent: 'text-white hover:text-primary-hover',
+};
+
+export const HeaderTop = JSX<HeaderTopProps>(
+  ({
+    bgColor,
+    logo,
+    internetBankUrl,
+    version,
+    mobileHeaderType,
+    mobileTitle,
+    mobileBackwardButtonTitle,
+  }) => {
+    const isTypeNone = mobileHeaderType === 'none';
+    const isTypeWithTitle = mobileHeaderType === 'withTitle';
+
+    return (
+      <div className="flex items-center justify-between w-full">
+        {isTypeNone || isTypeWithTitle ? (
+          <Logo bgColor={bgColor} logo={logo} showTitle={isTypeNone} />
+        ) : null}
+        {isTypeWithTitle ? mobileTitle : null}
+        {mobileHeaderType === 'backwardButton' ? (
+          <Button className="flex items-center text-l">
+            <Img
+              className="w-6 h-6"
+              image={{
+                icon: 'ChevronLeft',
+                iconVersion: 'black',
+              }}
+            />
+            {mobileBackwardButtonTitle}
+          </Button>
+        ) : null}
+        {internetBankUrl ? (
+          <Button
+            href={internetBankUrl}
+            ariaLabel="Войти"
+            target="_blank"
+            className={style(
+              'p-3 my-1 text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
+              BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
+            )}
+          >
+            Войти
+          </Button>
+        ) : null}
+      </div>
+    );
+  },
+);

package/mobile/src/components/Headline/headlineVersionStyles.ts

@@ -13,32 +13,32 @@ export const headlineVersionStyles: Record<
   XXL: {
     title: { headingType: 'h0', as: 'h1' },
     descriptionSize: 'text-h5',
-    descriptionStyle: 'mt-5',
+    descriptionStyle: 'mt-headline-xxl',
   },
   XL: {
     title: { headingType: 'h1', as: 'h1' },
     descriptionSize: 'text-xl-light',
-    descriptionStyle: 'mt-4',
+    descriptionStyle: 'mt-headline-l',
   },
   L: {
     title: { headingType: 'h2', as: 'h2' },
     descriptionSize: 'text-xl-light',
-    descriptionStyle: 'mt-4',
+    descriptionStyle: 'mt-headline-l',
   },
   M: {
     title: { headingType: 'h3', as: 'h3' },
     descriptionSize: 'text-xl-light',
-    descriptionStyle: 'mt-3',
+    descriptionStyle: 'mt-headline-m',
   },
   S: {
     title: { headingType: 'h4', as: 'h4' },
     descriptionSize: 'text-xl-light',
-    descriptionStyle: 'mt-2',
+    descriptionStyle: 'mt-headline-s',
   },
   XS: {
     title: { headingType: 'h5', as: 'h5' },
     descriptionSize: 'text-l-light',
-    descriptionStyle: 'mt-2',
+    descriptionStyle: 'mt-headline-s',
   },
 };
 

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

@@ -1,75 +1,34 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { style } from '../../utils/style';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
-import type { ProductGalleryContent, ProductSlide } from './ProductGalleryContent';
+import type { ProductGalleryContent } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
 export const ProductGallery = JSX<ProductGalleryProps>(
   ({ className = '', slides = [], ...rest }) => {
-    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+    const galleryBlocks = slides.map((s) => s.productBlock);
 
     return (
-      <BlockWrapper className={style('box-border py-default overflow-hidden', className)} {...rest}>
-        <div
-          className="flex duration-1000"
-          style={{ transform: `translateX(-${activeSlideIndex * 100}%)` }}
-          role="list"
-        >
-          {slides.map(({ productBlock }, i) => (
-            <div key={String(i)} className="box-border grow-0 shrink-0 basis-full" role="listitem">
-              <ProductBlockInner
-                className="pl-default h-full"
-                headlineVersion="XXL"
-                {...productBlock}
-                {...rest}
-              />
-            </div>
-          ))}
-        </div>
-        <div className="h-28 px-6 mt-6 -mb-6 flex items-center gap-2 box-border">
-          {slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex }))}
-        </div>
+      <BlockWrapper
+        className={`box-border py-6 overflow-hidden relative w-100 mb-6 ${className}`}
+        {...rest}
+      >
+        <SwipeListControl gap={0} padding={0}>
+          {galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest }, i))}
+        </SwipeListControl>
       </BlockWrapper>
     );
   },
 );
 
-interface NavButtonProps {
-  activeSlideIndex: number;
-  onClick: (i: number) => void;
-}
-
-const renderNavButton =
-  ({ activeSlideIndex, onClick }: NavButtonProps) =>
-  ({ nav }: ProductSlide, i: number) => {
-    const isActive = i === activeSlideIndex;
-    const btnClassName = isActive
-      ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
-      : 'min-w-[290px] ease-in duration-300 bg-white/10 px-6 py-5 hover:py-6 backdrop-blur';
-    const btnTitleClassName = isActive
-      ? 'text-primary-text text-h6 py-2'
-      : 'text-l pb-1 text-secondary-text group-data-secondary:text-white';
-    const btnDescClassName = isActive
-      ? 'text-secondary-text text-l-light'
-      : 'text-m-light text-secondary-text group-data-secondary:text-white/80';
-
-    return (
-      <button
-        type="button"
-        key={String(i)}
-        onClick={() => onClick(i)}
-        aria-label={nav?.title}
-        className={style(
-          'relative px-6 box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50',
-          btnClassName,
-        )}
-      >
-        <div className={btnTitleClassName}>{nav?.title}</div>
-        <div className={btnDescClassName}>{nav?.description}</div>
-      </button>
-    );
-  };
+const renderProductBlock = (block: ProductBlockInnerContent, i: number) => (
+  <ProductBlockInner
+    key={String(i)}
+    className="z-10 px-5 group-data-secondary:text-white"
+    {...block}
+  />
+);

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

@@ -77,7 +77,7 @@ const computeTransformationChain = ({
   pipe(
     resizeImg(isPictureSizeEmpty(size) ? containerSize : size),
     alignImg({ containerSize, alignment }),
-    (_) => (format ? _.toFormat(format, options) : _),
+    (_) => (format ? _.toFormat(format, { ...options, nearLossless: true }) : _),
   );
 
 const pipe = (...operations: Array<(chain: Sharp) => Promise<Sharp> | Sharp>) =>

package/mobile/src/icons/ChevronLeft.svg

@@ -0,0 +1,3 @@
+<svg title="Стрелка 'Вправо'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7071 6.29289C15.0976 6.68342 15.0976 7.31658 14.7071 7.70711L10.4142 12L14.7071 16.2929C15.0976 16.6834 15.0976 17.3166 14.7071 17.7071C14.3166 18.0976 13.6834 18.0976 13.2929 17.7071L8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L13.2929 6.29289C13.6834 5.90237 14.3166 5.90237 14.7071 6.29289Z" fill="currentColor"/>
+</svg>

package/mobile/src/icons/IconName.ts

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

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

@@ -1,22 +1,23 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { HeadingProps, HeadingType } from './HeadingProps';
+import { headingTag } from './headingTag';
 
-const HeadingClass: Record<HeadingType, string> = {
-  h0: 'text-m-title',
-  h1: 'text-m-title',
-  h2: 'text-m-title',
-  h3: 'text-h6',
-  h4: 'text-m-title-xs',
-  h5: 'text-m-title-xs',
-  h6: 'text-m-title-xs',
+const styles: Record<HeadingType, string> = {
+  h0: 'text-h0', // 56
+  h1: 'text-h1', // 50
+  h2: 'text-h2', // 40
+  h3: 'text-h3', // 32
+  h4: 'text-h4', // 28
+  h5: 'text-h5', // 24
+  h6: 'text-h6', // 20
 };
 
-export const Heading = JSX<HeadingProps>((props) => {
-  const { className, headingType = 'h3', title, as: Tag = 'h3' } = props;
+export const Heading = JSX<HeadingProps>(
+  ({ className = '', headingType = 'h3', as = 'h3', title, children }) => {
+    const Tag = headingTag(as);
 
-  return (
-    <Tag className={`font-sans font-medium m-0 ${HeadingClass[headingType]} ${className || ''}`}>
-      {title}
-    </Tag>
-  );
-});
+    return (
+      <Tag className={`font-sans m-0 ${styles[headingType]} ${className}`}>{title || children}</Tag>
+    );
+  },
+);

package/mobile/src/ui-kit/Heading/headingTag.ts

@@ -0,0 +1,12 @@
+import { HeadingTagType } from './HeadingProps';
+
+const mobileHeadingTagMap: Record<HeadingTagType, HeadingTagType> = {
+  h1: 'h1',
+  h2: 'h1',
+  h3: 'h2',
+  h4: 'h2',
+  h5: 'h3',
+  h6: 'h3',
+};
+
+export const headingTag = (tag: HeadingTagType): HeadingTagType => mobileHeadingTagMap[tag] || 'h3';

package/package.json

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

package/src/components/BaseTile/BaseTile.tsx

@@ -26,15 +26,18 @@ export const BaseTile = JSX<BaseTileProps>(
     <div className={style('relative flex flex-col font-sans', className)}>
       {backImage ? <div className="absolute bottom-0 right-0 z-0">{backImage}</div> : null}
       {title}
-      <div className="grow relative flex flex-wrap md:flex-nowrap justify-between items-stretch gap-8">
-        {leftImage}
+      <div className="grow relative flex flex-wrap sm:flex-nowrap justify-between items-stretch gap-8">
+        {renderImageContainer(leftImage)}
         <div className={style('flex flex-col gap-8', leftImage ? '' : 'grow')}>
           {insetTitle}
           <div className="grow">{children}</div>
           {buttons}
         </div>
-        {rightImage ? <div className="-order-1 lg:order-1">{rightImage}</div> : null}
+        {renderImageContainer(rightImage, { className: '-order-1 sm:order-1' })}
       </div>
     </div>
   ),
 );
+
+const renderImageContainer = (image: VNode, { className }: { className?: string } = {}) =>
+  image ? <div className={style('flex-none', className)}>{image}</div> : null;

package/src/components/Blocks.mobile.ts

@@ -1,5 +1,6 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
 import { Carousel } from './Carousel/Carousel';
+import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
@@ -11,6 +12,7 @@ import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
+import { ProductGallery } from './ProductGallery/ProductGallery';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { StepsBlock } from './StepsBlock/StepsBlock';
@@ -37,4 +39,6 @@ export const Blocks: BlocksRegistry = {
   RollupItem,
   VerticalLayout,
   CarouselRecommendationCard,
+  CarouselProgramsCard,
+  ProductGallery,
 };

package/src/components/Header/Header.fixture.mobile.tsx

@@ -5,4 +5,8 @@ import { Header } from './Header.mobile';
 export default {
   default: <Header />,
   transparent: <Header bgColor="transparent" />,
+  withTitle: <Header mobileHeaderType="withTitle" mobileTitle="Все кредитные карты" />,
+  backButton: (
+    <Header mobileHeaderType="backwardButton" mobileBackwardButtonTitle="Кредитные карты" />
+  ),
 };

package/src/components/Header/Header.mobile.tsx

@@ -1,78 +1,47 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useRouter } from '../../hooks/useRouter';
 import { useSWRResource } from '../../hooks/useSWRResource';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { projectSettings } from '../../ProjectSettings';
-import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
-import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import { LinkList } from '../../ui-kit/LinkList/LinkList';
-import { RollupItem } from '../RollupItem/RollupItem';
-import { HeaderBurger } from './HeaderBurger';
-import type { HeaderContent } from './HeaderContent';
 import { HeaderTop } from './HeaderTop';
+import type { HeaderContent } from './HeaderContent';
 
-export interface HeaderProps extends HeaderContent, UniBlockProps {}
+export interface HeaderMobileProps extends HeaderContent, UniBlockProps {}
 
 const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
   'bg-white': 'primary',
   transparent: 'transparent',
 };
 
-export const Header = JSX<HeaderProps>(
-  ({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
-    const router = useRouter();
-
+export const Header = JSX<HeaderMobileProps>(
+  ({
+    bgColor = 'bg-white',
+    version = BG_COLOR_TO_BLOCK_VERSION[bgColor],
+    mobileHeaderType = 'none',
+    ...rest
+  }) => {
     const fallback: Fallback | undefined = rest.options?.page?.fallback;
-    const { topItems, dispositions, defaultLocation, logo } = useSWRResource<SitemapData>(
+    const { logo, internetBankUrl } = useSWRResource<SitemapData>(
       projectSettings.SITEMAP || 'sitemap',
       fallback,
     );
 
-    const activeTopItem = topItems?.find(isTopItemActive(router));
-    const subItems = activeTopItem?.items;
-    const activeSubItem = findActiveSubItem(router)(subItems);
-    const [burgerMenuShow, setBurgerMenuShow] = useState(false);
-    const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
-
     return (
       <BlockWrapper tag="header" version={version} {...rest}>
-        <div className="container px-4 py-0 box-border">
-          <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} logo={logo} />
-          <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-12">
-            <div className="flex no-scrollbar horizontal-list h-full items-center">
-              {subItems?.map((_, i) => (
-                <HeaderItem
-                  key={String(i)}
-                  className="mr-8 whitespace-nowrap text-s"
-                  active={_ === activeSubItem}
-                  {..._}
-                />
-              ))}
-            </div>
-          </nav>
+        <div className="container px-4 py-1 box-border">
+          <HeaderTop
+            bgColor={bgColor}
+            logo={logo}
+            internetBankUrl={internetBankUrl}
+            version={version}
+            mobileHeaderType={mobileHeaderType}
+            {...rest}
+          />
         </div>
-        {burgerMenuShow ? (
-          <HeaderBurger
-            onClick={handleBurgerMenuShow}
-            burgerSubMenu={dispositions}
-            defaultLocation={defaultLocation}
-          >
-            <div className="list-none m-0 p-0">
-              {topItems?.map((item, i) => (
-                <RollupItem key={String(i)} label={item.text}>
-                  <LinkList className="mt-2.5" items={item.items} />
-                </RollupItem>
-              ))}
-            </div>
-          </HeaderBurger>
-        ) : null}
       </BlockWrapper>
     );
   },

package/src/components/Header/HeaderContent.ts

@@ -25,10 +25,24 @@ export type Logo = ImageContent & {
   title?: string;
 };
 
+/**
+ * @title Мобильный тип шапки
+ * @enumNames ["Не выбрано", "Название", "Кнопка возврата"]
+ */
+export type MobileHeaderType = 'none' | 'withTitle' | 'backwardButton';
+
+export interface MobileHeaderProps {
+  mobileHeaderType?: MobileHeaderType;
+  /** @title Название (мобильная версия) */
+  mobileTitle?: string;
+  /** @title Кнопка возврата (мобильная версия) */
+  mobileBackwardButtonTitle?: string;
+}
+
 /**
  * @title Шапка (для мобильных горизонтальная прокрутка shift+mouseScroll)
  */
-export interface HeaderContent {
+export interface HeaderContent extends MobileHeaderProps {
   /** @hidden */
   showSubMenu?: boolean;
   /** @hidden */