@redneckz/wildless-cms-uni-blocks 0.6.31 → 0.6.32

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -0,0 +1,61 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { LinkProps } from '../../model/LinkProps';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { sliceArray } from '../../utils/sliceArray';
+import { Carousel } from '../Carousel/Carousel';
+import type { CarouselLinksContent } from './CarouselLinksContent';
+
+export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps {}
+
+const MAX_LINKS_COUNT = 12;
+
+export const CarouselLinks = JSX<CarouselLinksProps>(
+  ({ additionalDescription, block, description, links, title, className = '', ...rest }) => {
+    return (
+      <BlockWrapper
+        className={`bg-primary-main flex w-full p-10 overflow-hidden justify-between font-sans ${className}`}
+        {...rest}
+      >
+        <div className="flex flex-col max-w-96 pr-9 text-white text-xl-light">
+          {title ? <Heading title={title} as="h1" headingType="h0" className="pb-0.5" /> : null}
+          {description ? (
+            <Description description={description} className="text-xl-light pt-5" />
+          ) : null}
+          {additionalDescription ? (
+            <Description description={additionalDescription} className="pt-6" />
+          ) : null}
+        </div>
+        {links?.length ? renderLinks(links, block) : null}
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderLinks = (links: LinkProps[], block: any) => {
+  const slicedLinks = sliceArray(links, MAX_LINKS_COUNT);
+
+  const slides = slicedLinks.map((slide) => (
+    <div className="w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start">
+      {slide.map((link, index) => (
+        <LinkButton className="m-1" key={String(index)} {...link} />
+      ))}
+    </div>
+  ));
+
+  return (
+    <Carousel
+      className="min-w-[832px] w-[832px]"
+      isBlur={false}
+      cardFullViewCount={1}
+      cardWidth={'832'}
+      isCyclic={true}
+      block={{ type: 'Carousel', blocks: slides }}
+    >
+      {slides}
+    </Carousel>
+  );
+};

package/mobile/src/components/CarouselLinks/CarouselLinksContent.ts

@@ -0,0 +1,10 @@
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { LinkProps } from '../../model/LinkProps';
+
+/** @title Карусель с ссылками */
+export interface CarouselLinksContent extends HeadlineCommonProps {
+  /** @title Дополнительное описание */
+  additionalDescription?: string;
+  /** @title Ссылки */
+  links?: LinkProps[];
+}

package/mobile/src/components/ContactsBlock/ContactsBlock.example.json

@@ -2,26 +2,30 @@
   "content": {
     "version": "secondary",
     "info": [
-      {
-        "title": "Заголовок 1",
-        "description": "Описание 1",
-        "button": {
-          "href": "#",
-          "text": "Кнопка 1",
-          "target": "_blank",
-          "version": "secondary"
+      [
+        {
+          "title": "Заголовок 1",
+          "description": "Описание 1",
+          "button": {
+            "href": "#",
+            "text": "Кнопка 1",
+            "target": "_blank",
+            "version": "secondary"
+          }
         }
-      },
-      {
-        "title": "Заголовок 2",
-        "description": "Описание 2",
-        "button": {
-          "href": "#",
-          "text": "Кнопка 2",
-          "target": "_blank",
-          "version": "secondary"
+      ],
+      [
+        {
+          "title": "Заголовок 2ff",
+          "description": "Описание 2",
+          "button": {
+            "href": "#",
+            "text": "Кнопка 2",
+            "target": "_blank",
+            "version": "secondary"
+          }
         }
-      }
+      ]
     ],
     "contacts": [
       [

package/mobile/src/components/ContactsBlock/ContactsBlock.tsx

@@ -1,68 +1,58 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
 import { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Description } from '../../ui-kit/Description/Description';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import type { ContactItemProps, ContactsBlockContent, InfoItemProps } from './ContactsBlockContent';
+import { Headline } from '../Headline/Headline';
+import type { ContactBlockProps, ContactsBlockContent } from './ContactsBlockContent';
 
 export interface ContactsBlockProps extends ContactsBlockContent, UniBlockProps {}
 
 interface RenderContactsColumnProps {
-  contactsColumn?: ContactItemProps[];
+  version?: BlockVersion;
+  column?: ContactBlockProps[];
   index?: number;
 }
 
-const contactsBlockStyleMap = {
-  primary: 'bg-white',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const ContactsBlock = JSX<ContactsBlockProps>(
   ({ className = '', contacts, info, version = 'secondary', ...rest }) => {
     return (
-      <BlockWrapper
-        className={`${contactsBlockStyleMap[version]} flex p-12 ${className}`}
-        {...rest}
-      >
-        {info ? renderInfo(info) : null}
-        {contacts ? renderContacts(contacts) : null}
+      <BlockWrapper className={`${VersionStyleMap[version]} flex p-[50px] ${className}`} {...rest}>
+        {info?.length ? renderBlocks(info, version) : null}
+        {contacts?.length ? renderBlocks(contacts, version) : null}
       </BlockWrapper>
     );
   },
 );
 
-const renderInfo = (info: InfoItemProps[]) => (
-  <div className="flex grow basis-0 pr-11">
-    {info.map(({ title, description, button }, index) => (
-      <div className="grow basis-0 pr-11 last:pr-0" key={String(index)}>
-        <Heading as="h5" headingType="h5" title={title} className="pb-2.5" />
-        <Description className="text-l-light pb-6" description={description} />
-        {button ? <Button {...button} /> : null}
-      </div>
-    ))}
-  </div>
-);
-
-const renderContacts = (contacts: ContactItemProps[][]) => (
+const renderBlocks = (info: ContactBlockProps[][], version?: BlockVersion) => (
   <div className="flex grow basis-0">
-    {contacts.map((contactsColumn, index) => renderContactsColumn({ contactsColumn, index }))}
+    {info.map((column, index) => renderBlocksColumn({ column, index, version }))}
   </div>
 );
 
-const renderContactsColumn = ({ contactsColumn, index }: RenderContactsColumnProps) =>
-  contactsColumn ? (
-    <div className="flex flex-col grow basis-0 pr-11" key={String(index)}>
-      {contactsColumn.map(({ title, description, additionalDescription }, key) => (
-        <div className="pr-11 last:pr-0 last:mt-5" key={String(key)}>
-          <Heading as="h5" headingType="h5" title={title} />
-          <Description className="text-l-light mt-2.5" description={description} />
+const renderBlocksColumn = ({ column, index, version }: RenderContactsColumnProps) =>
+  column ? (
+    <div className="flex flex-col grow basis-0 pr-11 last:pr-0" key={`col-${String(index)}`}>
+      {column.map(({ title = '', description, additionalDescription, button }, key) => (
+        <div className="mt-6 first:mt-0" key={String(key)}>
+          <Headline
+            className="!p-0"
+            title={title}
+            description={description}
+            headlineVersion="XS"
+            align="left"
+            bgColorHeadline={version}
+          />
           {additionalDescription ? (
             <Description
               className="text-m-light mt-1.5 opacity-80"
               description={additionalDescription}
             />
           ) : null}
+          {button ? <Button className="mt-6" {...button} /> : null}
         </div>
       ))}
     </div>

package/mobile/src/components/ContactsBlock/ContactsBlockContent.ts

@@ -2,6 +2,16 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
+/**
+ * @title Элемент плитки
+ */
+export interface ContactBlockProps extends HeadlineCommonProps {
+  /** @title Дополнительное описание */
+  additionalDescription?: string;
+  /** @title Кнопка */
+  button?: ButtonProps;
+}
+
 /**
  * @title Контакты
  */
@@ -10,31 +20,11 @@ export interface ContactsBlockContent {
    * @title Данные
    * @maxItems 2
    * */
-  info?: InfoItemProps[];
+  info?: ContactBlockProps[][];
   /**
    * @title Контакты
    * @maxItems 2
    * */
-  contacts?: ContactItemProps[][];
+  contacts?: ContactBlockProps[][];
   version?: BlockVersion;
 }
-
-/**
- * @title Элемент плитки
- */
-export interface ContactItemProps {
-  /** @title Дополнительное описание */
-  additionalDescription?: string;
-  /** @title Описание */
-  description?: string;
-  /** @title Заголовок */
-  title?: string;
-}
-
-/**
- * @title Элемент плитки
- */
-export interface InfoItemProps extends HeadlineCommonProps {
-  /** @title Кнопка */
-  button?: ButtonProps;
-}

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

@@ -64,6 +64,12 @@ export const HEADLINE_VERSION: Record<HeadlineVersion, VersionStyleType> = {
     headingType: 'h4',
     as: 'h4',
   },
+  XS: {
+    descriptionFont: 'text-l-light',
+    gap: 'gap-2',
+    headingType: 'h5',
+    as: 'h5',
+  },
 };
 
 export const HEADLINE_SMALL_VERSION: Record<HeadlineSmallVersion, string> = {

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

@@ -13,7 +13,7 @@ export const renderStepContent =
   }: {
     styleMap: StyleType;
     isMainButton: boolean;
-    version: BlockVersion;
+    version?: BlockVersion;
   }) =>
   (step: Step, i: number, { length }: { length: number }): VNode => {
     const { label, description, button, items, isDotted } = step;

package/mobile/src/icons/ArrowLeftIcon.svg

@@ -1,4 +1,4 @@
-<svg title="Стрелка" isInverse="true" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg title="Стрелка 'Влево'" isInverse="true" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M7 11.834L3 8.00065L7 4.16732" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
   <path d="M14 9.00195C14.5523 9.00195 15 8.55424 15 8.00195C15 7.44967 14.5523 7.00195 14 7.00195L14 9.00195ZM8 7.00195C7.44772 7.00195 7 7.44967 7 8.00195C7 8.55424 7.44772 9.00195 8 9.00195L8 7.00195ZM14 7.00195L8 7.00195L8 9.00195L14 9.00195L14 7.00195Z" fill="currentColor"/>
 </svg>

package/mobile/src/icons/ArrowRightIcon.svg

@@ -0,0 +1 @@
+<svg title="Стрелка 'Вправо'" isInverse="true" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.43 5.93 20.5 12l-6.07 6.07M11.01 12h9.32M3.5 12h3.47" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/ArrowUpIcon.svg

@@ -1,4 +1,4 @@
-<svg title="Стрелка вверх" isInverse="true" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg title="Стрелка 'Вверх'" isInverse="true" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.3416 9.29163L11.1582 7.10829C10.5166 6.46662 9.46657 6.46662 8.8249 7.10829L3.3999 12.5416" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M16.6001 12.5416L15.7334 11.675" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/mobile/src/icons/IconName.ts

@@ -7,11 +7,11 @@ export const IconsWithoutInversion = new Set([
 ]);
 
 export enum IconMap {
-  ActualBalanceIcon = 'ActualBalanceIcon', AirPlaneIcon = 'AirPlaneIcon', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowLeftIcon = 'ArrowLeftIcon', 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', 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'
+  ActualBalanceIcon = 'ActualBalanceIcon', AirPlaneIcon = 'AirPlaneIcon', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowRightIcon = 'ArrowRightIcon', 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', 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'
 }
 
 export enum IconTitleMap {
-  ActualBalanceIcon = 'Деньги', AirPlaneIcon = 'Самолёт', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowLeftIcon = 'Стрелка', 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 = 'Проценты', 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 = 'Добавить продукт'
+  ActualBalanceIcon = 'Деньги', AirPlaneIcon = 'Самолёт', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowLeftIcon = 'Стрелка \'Влево\'', ArrowRightIcon = 'Стрелка \'Вправо\'', 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 = 'Проценты', 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 = 'Добавить продукт'
 }
 
 /**
@@ -19,7 +19,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кинотеатр', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
+ *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх\'', 'Банкомат', 'Банк', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кинотеатр', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
  * ]
  */
-export type IconName = '' | 'ActualBalanceIcon' | 'AirPlaneIcon' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowLeftIcon' | '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' | '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';
+export type IconName = '' | 'ActualBalanceIcon' | 'AirPlaneIcon' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowLeftIcon' | 'ArrowRightIcon' | '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' | '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';

package/mobile/src/model/HeadlineType.ts

@@ -1,8 +1,8 @@
 /**
  * @title Размер заголовка
- * @enumNames ["Самый большой", "Очень большой", "Большой", "Средний", "Маленький"]
+ * @enumNames ["Самый большой", "Очень большой", "Большой", "Средний", "Маленький", "Самый маленький"]
  */
-export type HeadlineVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S';
+export type HeadlineVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
 
 /**
  * @title Размер заголовка

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

@@ -0,0 +1,42 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+import { Img } from '../Img/Img';
+
+const LINK_CLASS_NAME = `absolute border border-primary-main ml-3 px-6 py-5
+  text-l-light bg-white text-primary-text flex w-[316px]
+  justify-between items-center group-hover:text-primary-main z-10`;
+
+const LINK_BORDER_CLASS_NAME =
+  'bg-transparent border-white border h-[70px] absolute w-[316px] top-0';
+
+export type LinkButtonProps = LinkProps & {
+  className?: string;
+};
+
+export const LinkButton = JSX<LinkButtonProps>(
+  ({ text, href = '', target = '', className = '' }) => {
+    if (!text) {
+      return null;
+    }
+
+    return (
+      <div className={`relative group cursor-pointer w-[328px] h-[82px] ${className}`}>
+        <a className={LINK_CLASS_NAME} role="link" href={href} target={target}>
+          <div className="p-0.5">{text}</div>
+          <div className="w-6 h-6">
+            <Img
+              className="w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover:brightness-100"
+              image={{ icon: 'ArrowRightIcon', iconVersion: 'black' }}
+              imageClassName="group-hover:text-primary-main"
+              width="24"
+              height="24"
+              asSVG
+            />
+          </div>
+        </a>
+        <div className={`${LINK_BORDER_CLASS_NAME} mx-1.5 mt-1.5`} />
+        <div className={`${LINK_BORDER_CLASS_NAME} mt-3 mr-3`} />
+      </div>
+    );
+  },
+);

package/mobile/src/utils/sliceArray.ts

@@ -0,0 +1,15 @@
+export const sliceArray = <T>(items: T[], size: number) => {
+  const result = items.reduce((resultArray: T[][], item: T, index: number) => {
+    const chunkIndex = Math.floor(index / (size - 1));
+
+    if (!resultArray[chunkIndex]) {
+      resultArray[chunkIndex] = [item];
+    }
+
+    resultArray[chunkIndex].push(item);
+
+    return resultArray;
+  }, []);
+
+  return result;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.31",
+  "version": "0.6.32",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -181,7 +181,7 @@
   },
   "size-limit": [
     {
-      "limit": "8 kB",
+      "limit": "9 kB",
       "path": "lib/common.css"
     },
     {

package/src/components/Blocks.ts

@@ -1,6 +1,7 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
 import { Accordion } from './Accordion/Accordion';
 import { AccordionItem } from './AccordionItem/AccordionItem';
+import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
@@ -49,6 +50,7 @@ import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 export const Blocks: BlocksRegistry = {
   Accordion,
   AccordionItem,
+  CarouselLinks,
   BenefitsBlock,
   BusinessBlock,
   Bonus,

package/src/components/CarouselLinks/CarouselLinks.example.json

@@ -0,0 +1,55 @@
+{
+  "title": "Заголовок",
+  "description": "Описание 1",
+  "additionalDescription": "Описание 2",
+  "links": [
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    }
+  ]
+}

package/src/components/CarouselLinks/CarouselLinks.fixture.tsx

@@ -0,0 +1,28 @@
+import { CarouselLinks } from './CarouselLinks';
+
+const link = {
+  text: 'Аудиторские заключения',
+  href: '#',
+};
+const links = Array(24).fill(link);
+
+const description = `Акционерное общество «Российский Сельскохозяйственный банк»* —
+  один из крупнейших банков в России. Был основан в 2000 году в целях развития
+  национальной кредитно-финансовой системы агропромышленного сектора и
+  сельских территорий Российской Федерации.`;
+
+const additionalDescription = `Сегодня это универсальный коммерческий банк,
+  предоставляющий все виды банковских услуг и занимающий лидирующие позиции
+  в финансировании агропромышленного комплекса России.`;
+
+export default {
+  default: (
+    <CarouselLinks
+      links={links}
+      title="О Банке"
+      description={description}
+      additionalDescription={additionalDescription}
+      block={{ type: 'Carousel', blocks: new Array(3).fill(link).flat() }}
+    />
+  ),
+};

package/src/components/CarouselLinks/CarouselLinks.json

@@ -0,0 +1,8 @@
+{
+  "content": {},
+  "style": {
+    "ui:options": {
+      "minCols": 12
+    }
+  }
+}