@redneckz/wildless-cms-uni-blocks 0.13.5 → 0.13.7

package/src/components/CarouselProductCard/CarouselProductCardContent.ts

@@ -1,9 +1,12 @@
 import type { BulletsProps } from '../../model/Bullets';
-import type { AdditionalDescriptionProps, HeadlineSmallProps } from '../../model/HeadlineType';
+import type {
+  AdditionalDescriptionProps,
+  AlignProps,
+  HeadlineSmallProps,
+} from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
 import type { LinkCommonProps } from '../../model/LinkProps';
-import type { TextAlign } from '../../ui-kit/Text/TextProps';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 
 /**
@@ -22,10 +25,10 @@ export type CarouselProductCardContent = UniBlockContent &
   AdditionalDescriptionProps &
   IconProps &
   BulletsProps &
-  LinkCommonProps & {
+  LinkCommonProps &
+  AlignProps & {
     /** @title Список */
     items?: ListProps[];
-    align?: TextAlign;
     /** @title  Изображение на всю ширину */
     isImageFullWidth?: boolean;
     /**  @title  Картинка сверху над текстом */

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -1,9 +1,8 @@
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { AlignProps, HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
 import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { TextAlign } from '../../ui-kit/Text/TextProps';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 
 export type RecommendationSocialMedia = LinkCommonProps & IconProps & ButtonContent;
@@ -15,8 +14,8 @@ export type CarouselRecommendationCardContent = UniBlockContent &
   HeadlineCommonProps &
   ListContent &
   IconProps &
-  LinkCommonProps & {
+  LinkCommonProps &
+  AlignProps & {
     /** @title Соц сети */
     socialMedia?: RecommendationSocialMedia[];
-    align?: TextAlign;
   };

package/src/components/ErrorBlock/ErrorBlock.tsx

@@ -1,12 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { Text } from '../../ui-kit/Text/Text';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 import type { ErrorBlockContent } from './ErrorBlockContent';
+import { Headline } from '../Headline/Headline';
 
 export interface ErrorBlockProps extends ErrorBlockContent, UniBlockProps {}
 
@@ -33,14 +32,7 @@ export const ErrorBlock = JSX<ErrorBlockProps>(
       {...rest}
     >
       <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
-      {title ? <Heading headingType="h1" className="text-left" title={title} /> : null}
-      {subtitle ? (
-        <div className="max-w-[613px] text-center">
-          <Text size="text-xl" font="font-light">
-            {subtitle}
-          </Text>
-        </div>
-      ) : null}
+      <Headline title={title} description={subtitle} headlineVersion="XL" isEmbedded={true} />
       {button?.text ? (
         <Button className="py-4 px-9" version={button?.version} {...button}>
           {button.text}

package/src/components/Footer/TextInformation.tsx

@@ -2,16 +2,17 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Text } from '../../ui-kit/Text/Text';
 import type { FooterLink } from './FooterLink';
 import { TextInformationLink } from './TextInformationLink';
+import { style } from '../../utils/style';
 
 export const TextInformation = JSX<FooterLink>(({ className = '', links }) => (
-  <div className={className}>
+  <div className={style('@container', className)}>
     <div className="pt-lg">
       <Text size="text-xs" font="font-light" color="text-secondary-text">
         {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
       </Text>
     </div>
     {links?.length ? (
-      <div className="flex flex-col sm:flex-row justify-start items-start gap-x-lg gap-y-xs pt-lg">
+      <div className="flex flex-col @lg:flex-row justify-start items-start gap-x-lg gap-y-xs pt-lg">
         {links.map((_, i) => (
           <TextInformationLink key={String(i)} index={i} {..._} />
         ))}

package/src/components/Header/HeaderSubMenu.tsx

@@ -1,16 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useRouter } from '../../hooks/useRouter';
-import { findActiveSubItem } from './findActiveSubItem';
-import { DropdownMenu } from './DropdownMenu';
-import { HeaderSubMenuItem } from './HeaderSubMenuItem';
 import { projectSettings } from '../../ProjectSettings';
-import { HeaderChatBotButton } from './HeaderChatBotButton';
-import { InternetBankButton } from './InternetBankButton';
-import type { LinkProps } from '../../model/LinkProps';
 import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
+import { useRouter } from '../../hooks/useRouter';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
+import type { LinkProps } from '../../model/LinkProps';
+import { DropdownMenu } from './DropdownMenu';
+import { HeaderChatBotButton } from './HeaderChatBotButton';
+import { HeaderSubMenuItem } from './HeaderSubMenuItem';
+import { InternetBankButton } from './InternetBankButton';
+import { findActiveSubItem } from './findActiveSubItem';
 
 export interface HeaderSubMenuProps {
   version?: BlockVersion;
@@ -68,14 +68,16 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
             activeItem={activeSubItem}
           />
         ) : null}
-        {projectSettings.CHAT_BOT ? (
-          <HeaderChatBotButton
-            className="ml-4xl"
-            iconVersion={iconVersion}
-            chat={projectSettings.CHAT_BOT}
-          />
-        ) : null}
-        <InternetBankButton version={version} internetBankUrl={internetBankUrl} />
+        <div className="flex">
+          {projectSettings.CHAT_BOT ? (
+            <HeaderChatBotButton
+              className="ml-4xl"
+              iconVersion={iconVersion}
+              chat={projectSettings.CHAT_BOT}
+            />
+          ) : null}
+          <InternetBankButton version={version} internetBankUrl={internetBankUrl} />
+        </div>
       </nav>
     );
   },

package/src/components/Headline/Headline.example.json

@@ -2,7 +2,7 @@
   "content": {
     "title": "Заголовок",
     "description": "Описание",
-    "align": "center",
+    "align": "text-center",
     "headlineVersion": "M"
   }
 }

package/src/components/HorizontalLayout/HorizontalLayout.fixture.tsx

@@ -82,4 +82,25 @@ export default {
       />
     </div>
   ),
+  'with card border': (
+    <div className="container grid grid-cols-12">
+      <HorizontalLayout
+        className="col-span-12"
+        isCardBorder={true}
+        block={{
+          type: 'HorizontalLayout',
+          blocks: [
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+          ],
+        }}
+        options={options}
+        version="primary"
+      />
+    </div>
+  ),
 };

package/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -6,7 +6,7 @@ import { style } from '../../utils/style';
 import { gapStyles } from './gapStyles';
 import type { HorizontalLayoutContent } from './HorizontalLayoutContent';
 
-export interface HorizontalLayoutProps extends HorizontalLayoutContent, UniBlockProps {}
+interface HorizontalLayoutProps extends HorizontalLayoutContent, UniBlockProps {}
 
 export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalLayoutProps>(
   ({
@@ -15,6 +15,7 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
     isPadding = false,
     version = 'transparent',
     isTheme = false,
+    isCardBorder,
     ...rest
   }) => (
     <BlockWrapper
@@ -24,7 +25,14 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
       isTheme={isTheme}
       {...rest}
     >
-      {renderChildren(rest)}
+      {renderChildren({
+        ...rest,
+        extraProps: {
+          className: isCardBorder
+            ? 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'
+            : '',
+        },
+      })}
     </BlockWrapper>
   ),
 );

package/src/components/HorizontalLayout/HorizontalLayoutContent.ts

@@ -13,6 +13,8 @@ export type GapVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS' | '';
 export type HorizontalLayoutContent = UniBlockContent & {
   colorPalette?: ColorPalette;
   gap?: GapVersion;
+  /** @title контур на дочерних элементах */
+  isCardBorder?: boolean;
   /** @title Внутренний отступ компоновщика */
   isPadding?: boolean;
 };

package/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -83,7 +83,7 @@ const renderInvestmentColumn = (
       {column.cells?.length ? (
         <div
           className={`w-full ${
-            isLastColumn ? 'border-4 border-green-more-dark p-2xs min-w-[292px]' : ''
+            isLastColumn ? 'border-4 border-green-more-dark p-2xs min-w-72' : ''
           }`}
         >
           {column.cells.reverse().map(renderInvestmentCell)}

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,10 +1,9 @@
 import { Attachment } from '../../model/Attachment';
 import { EmptyOption } from '../../model/EmptyOptionType';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { AlignProps, HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps, Target } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
-import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Отображение списка
@@ -52,10 +51,9 @@ export type DocBlockDef = EmptyOption | LinkDocDef | AttachmentDocDef;
  */
 export type LinkDocsContent = UniBlockContent &
   HeadlineCommonProps &
-  IconProps & {
+  IconProps &
+  AlignProps & {
     /** @title Список */
     documents?: DocBlockDef[];
     columnsMode?: LinkColumnsMode;
-    /** @title Выравнивание */
-    align?: TextAlign;
   };

package/src/components/MortgageFiltration/MortgageFiltration.fixture.tsx

@@ -4,7 +4,10 @@ import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOpti
 import { Blocks } from '../Blocks';
 import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
 import { MortgageFiltration } from './MortgageFiltration';
-import type { HotFilterButton, MortgageFiltrationContent } from './MortgageFiltrationContent';
+import type {
+  MortgageFiltrationContent,
+  MortgageFiltrationHotFilter,
+} from './MortgageFiltrationContent';
 
 const PROPERTY_APARTMENT = {
   propertyType: ['apartment'],
@@ -101,7 +104,7 @@ const SCHEMA: MortgageFiltrationContent['filtrationSchema'] = {
   },
 };
 
-const HOT_FILTERS: HotFilterButton[] = [
+const HOT_FILTERS: MortgageFiltrationHotFilter[] = [
   { text: 'Все программы' },
   {
     text: 'Льготные программы',

package/src/components/MortgageFiltration/MortgageFiltration.tsx

@@ -1,60 +1,45 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BaseFiltrationInner } from '../../ui-kit/BaseFiltration/BaseFiltrationInner';
 import { renderFiltrationForm } from '../../ui-kit/BaseFiltration/renderFiltrationForm';
+import { useHotFilters } from '../../ui-kit/BaseFiltration/useHotFilters';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import type { TabItemBase } from '../../ui-kit/TabsControl/TabItem';
 import { TabsControl } from '../../ui-kit/TabsControl/TabsControl';
 import { style } from '../../utils/style';
-import { hotFilterRecordCmp } from './HotFilterRecord';
 import type {
   MortgageFiltrationContent,
   MortgageFiltrationSchema,
 } from './MortgageFiltrationContent';
 
-interface MortgageFiltrationProps extends MortgageFiltrationContent, UniBlockProps {}
+type MortgageFiltrationState = Partial<Record<keyof MortgageFiltrationSchema, string[]>>;
 
-const initialFiltrationState: Partial<Record<keyof MortgageFiltrationSchema, string[]>> = {
+const initialFiltrationState: MortgageFiltrationState = {
   categories: [],
   extraOptions: [],
   propertyType: [],
   stage: [],
 };
 
+interface MortgageFiltrationProps extends MortgageFiltrationContent, UniBlockProps {}
+
 export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<MortgageFiltrationProps>(
-  ({ className, hotFilters = [], filtrationSchema = {}, resetButton, ...rest }) => {
+  ({ className, hotFilters, filtrationSchema = {}, resetButton, ...rest }) => {
     const [filtrationState, { field, reset, update: replaceFiltrationState }] =
       useForm(initialFiltrationState);
 
-    const tabsControlItems: TabItemBase[] = useMemo(
-      () =>
-        hotFilters.map(({ text }) => ({
-          text,
-        })),
-      [hotFilters],
+    const handleFiltrationStateChange = useCallback(
+      (_: MortgageFiltrationState = initialFiltrationState) => replaceFiltrationState(_),
+      [],
     );
 
-    const [hotFilterIndex, setHotFilterIndex] = useState(0);
-
-    const handleHotFilterSelect = useCallback(
-      (_: TabItemBase) => {
-        setHotFilterIndex(tabsControlItems.indexOf(_));
-        replaceFiltrationState(
-          hotFilters[tabsControlItems.indexOf(_)].filter || initialFiltrationState,
-        );
-      },
-      [hotFilters, tabsControlItems],
-    );
-
-    useEffect(() => {
-      const suggestedHotFilterIndex = hotFilters.findIndex((_) =>
-        hotFilterRecordCmp(_.filter, filtrationState),
-      );
-
-      setHotFilterIndex(suggestedHotFilterIndex !== -1 ? suggestedHotFilterIndex : 0);
-    }, [hotFilters, filtrationState]);
+    const tabsControlProps = useHotFilters({
+      hotFilters,
+      filtrationState,
+      blocks: rest.block?.blocks,
+      onFiltrationStateChange: handleFiltrationStateChange,
+    });
 
     return (
       <BlockWrapper
@@ -63,12 +48,7 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
         version="transparent"
         {...rest}
       >
-        <TabsControl
-          className="mb-2xs"
-          items={tabsControlItems}
-          value={tabsControlItems[hotFilterIndex]}
-          onChange={handleHotFilterSelect}
-        />
+        <TabsControl {...tabsControlProps} />
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton })}
         <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
       </BlockWrapper>

package/src/components/MortgageFiltration/MortgageFiltrationContent.ts

@@ -2,7 +2,7 @@ import type {
   BaseFiltrationInnerContent,
   StringArray,
 } from '../../ui-kit/BaseFiltration/BaseFiltrationContent';
-import type { HotFilterRecord } from './HotFilterRecord';
+import type { HotFilterBase } from '../../ui-kit/BaseFiltration/HotFilterBase';
 
 export type MortgageFiltrationSchema = {
   /** @title Тип недвижимости */
@@ -15,14 +15,18 @@ export type MortgageFiltrationSchema = {
   extraOptions?: StringArray;
 };
 
-/**
- * @title Кнопка фильтрации
- */
-export interface HotFilterButton {
-  /** @title Текст */
-  text?: string;
+export interface MortgageFiltrationHotFilter extends HotFilterBase {
   /** @title Применяемые фильтры */
-  filter?: HotFilterRecord;
+  filter?: {
+    /** @title Тип недвижимости */
+    propertyType?: string[];
+    /** @title Этап строительства */
+    stage?: string[];
+    /** @title Категории */
+    categories?: string[];
+    /** @title Дополнительно */
+    extraOptions?: string[];
+  };
 }
 
 /**
@@ -32,5 +36,5 @@ export interface MortgageFiltrationContent extends BaseFiltrationInnerContent {
   /** @title Параметры фильтрации */
   filtrationSchema?: MortgageFiltrationSchema;
   /** @title Горячие фильтры */
-  hotFilters?: HotFilterButton[];
+  hotFilters?: MortgageFiltrationHotFilter[];
 }

package/src/components/ParagraphBlock/ParagraphBlockContent.ts

@@ -1,13 +1,14 @@
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { FontWeight, TextAlign, TextSize } from '../../ui-kit/Text/TextProps';
+import type { FontWeight, TextSize } from '../../ui-kit/Text/TextProps';
+import type { AlignProps } from '../../model/HeadlineType';
 
 /**
  * @title Параграф
  */
-export type ParagraphBlockContent = UniBlockContent & {
-  size?: TextSize;
-  align?: TextAlign;
-  font?: FontWeight;
-  /** @title Текст */
-  text?: string;
-};
+export type ParagraphBlockContent = UniBlockContent &
+  AlignProps & {
+    size?: TextSize;
+    font?: FontWeight;
+    /** @title Текст */
+    text?: string;
+  };

package/src/icons/CourtHouseIcon.svg

@@ -0,0 +1 @@
+<svg title="Здание суда" isInverse="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#1C1C1C" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M2 22h20M12 2c1.6.64 3.4.64 5 0v3c-1.6.64-3.4.64-5 0V2ZM12 5v3M4 15.91V22h16V11c0-2-1-3-3-3H7c-2 0-3 1-3 3v1M4 12h15.42"/><path stroke="#1C1C1C" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M7.992 12v10M11.992 12v10M15.992 12v10"/></svg>

package/src/icons/IconName.ts

@@ -86,6 +86,7 @@ export enum IconMap {
   ClockIcon = 'ClockIcon',
   CloseIcon = 'CloseIcon',
   ComfortableCompIcon = 'ComfortableCompIcon',
+  CourtHouseIcon = 'CourtHouseIcon',
   CreditCardsIcon = 'CreditCardsIcon',
   DiscountShapeIcon = 'DiscountShapeIcon',
   DocDownloadIcon = 'DocDownloadIcon',
@@ -201,6 +202,7 @@ export enum IconTitleMap {
   ClockIcon = 'Часы',
   CloseIcon = 'Крестик',
   ComfortableCompIcon = 'Кресло',
+  CourtHouseIcon = 'Здание суда',
   CreditCardsIcon = 'Кредитные карты',
   DiscountShapeIcon = 'Скидка',
   DocDownloadIcon = 'Скачать документ',
@@ -286,7 +288,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 =
@@ -325,6 +327,7 @@ export type IconName =
   | 'ClockIcon'
   | 'CloseIcon'
   | 'ComfortableCompIcon'
+  | 'CourtHouseIcon'
   | 'CreditCardsIcon'
   | 'DiscountShapeIcon'
   | 'DocDownloadIcon'

package/src/model/HeadlineType.ts

@@ -37,7 +37,7 @@ export type LabelProps = {
 };
 
 export type AlignProps = {
-  /** @title Выравнивание заголовка */
+  /** @title Выравнивание */
   align?: TextAlign;
 };
 

package/src/ui-kit/Badge/Badge.fixture.tsx

@@ -0,0 +1,24 @@
+import '../../setup-fixture';
+
+import { Badge } from './Badge';
+
+export default {
+  default: (
+    <div className="container grid-cols-12">
+      <section className="col-span-12 bg-white p-6xl">
+        <button className="p-xs border-2 border-green rounded-md flex justify-center w-52 mb-3xs">
+          <div className="mr-2xs">
+            <span>Какой-то текст</span>
+          </div>
+          <Badge count={3} />
+        </button>
+        <button className="p-xs border-2 border-green bg-green rounded-md flex justify-center w-52 text-white">
+          <div className="mr-2xs">
+            <span>Какой-то текст</span>
+          </div>
+          <Badge count={3} version="primary" />
+        </button>
+      </section>
+    </div>
+  ),
+};

package/src/ui-kit/Badge/Badge.tsx

@@ -0,0 +1,34 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { Text } from '../Text/Text';
+import type { TextColor } from '../Text/TextProps';
+
+interface BadgeProps {
+  count?: number;
+  version?: 'primary' | 'secondary';
+}
+
+const badgeBgStyleMap: Record<string, string> = {
+  primary: 'bg-white/30',
+  secondary: 'bg-main-divider',
+};
+
+const badgeTextColorStyleMap: Record<string, TextColor> = {
+  primary: 'text-white',
+  secondary: 'text-secondary-text',
+};
+
+export const Badge = JSX<BadgeProps>(({ count, version = 'secondary' }) => {
+  return (
+    <div
+      className={style(
+        'w-6 h-6 rounded-full flex items-center justify-center',
+        badgeBgStyleMap[version],
+      )}
+    >
+      <Text size="text-xs" color={badgeTextColorStyleMap[version]}>
+        {count}
+      </Text>
+    </div>
+  );
+});

package/src/ui-kit/BaseFiltration/BaseFiltrationInner.tsx

@@ -8,8 +8,7 @@ import { checkShouldRenderBlock } from '../BaseFiltration/checkShouldRenderBlock
 import { DefaultFoldButton } from '../Foldable/DefaultFoldButton';
 import { Foldable } from '../Foldable/Foldable';
 import { FoldableSection } from '../Foldable/FoldableSection';
-import { Paragraph } from '../Paragraph/Paragraph';
-import { Text } from '../Text/Text';
+import { Headline } from '../../components/Headline/Headline';
 
 const ICONS: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
 
@@ -34,17 +33,14 @@ export const BaseFiltrationInner = JSX<BaseFiltrationInnerProps>(
         <div className={style(blocksToRender.length ? 'hidden' : 'block')}>
           {notFound ? renderNotFound(notFound) : null}
         </div>
-        <div className={style(blocksToRender.length ? '' : 'hidden')}>
-          <div className={style('mb-2xs', resultsGridStyle)}>
+        <div className={style('space-y-2xs', blocksToRender.length ? '' : 'hidden')}>
+          <div className={style(resultsGridStyle)}>
             {renderBlocksList(visibleBlocks, { ...rest.options, parent: block })}
           </div>
           <Foldable
             renderFoldableSection={({ isUnfolded }) => {
               return (
-                <FoldableSection
-                  className={style(resultsGridStyle, isUnfolded ? 'mb-2xs' : '')}
-                  isUnfolded={isUnfolded}
-                >
+                <FoldableSection className={style(resultsGridStyle)} isUnfolded={isUnfolded}>
                   {renderBlocksList(hiddenBlocks, { ...rest.options, parent: block })}
                 </FoldableSection>
               );
@@ -69,18 +65,7 @@ export const BaseFiltrationInner = JSX<BaseFiltrationInnerProps>(
 function renderNotFound({ title, description }: NotFound) {
   return (
     <div className="bg-white py-20">
-      {title ? (
-        <div className="mb-xs">
-          <Paragraph align="text-center">
-            <Text size="text-h4">{title}</Text>
-          </Paragraph>
-        </div>
-      ) : null}
-      {description ? (
-        <Paragraph size="text-xl" font="font-light" align="text-center">
-          {description}
-        </Paragraph>
-      ) : null}
+      <Headline title={title} description={description} headlineVersion="S" isEmbedded={true} />
     </div>
   );
 }

package/src/ui-kit/BaseFiltration/HotFilterBase.ts

@@ -0,0 +1,7 @@
+/**
+ * @title Кнопка фильтрации
+ */
+export interface HotFilterBase {
+  /** @title Текст */
+  text?: string;
+}

package/src/ui-kit/BaseFiltration/getBadgeCount.ts

@@ -0,0 +1,6 @@
+import type { BlockDef } from '../../model/ContentPageDef';
+import { checkShouldRenderBlock } from '../../ui-kit/BaseFiltration/checkShouldRenderBlock';
+import type { BaseFilter } from './useHotFilters';
+
+export const getBadgeCount = (blocks: BlockDef[] = [], filter: BaseFilter = {}) =>
+  blocks.filter(({ content = {} }) => checkShouldRenderBlock(filter, content)).length;

package/src/ui-kit/BaseFiltration/hotFilterRecordCmp.ts

@@ -0,0 +1,3 @@
+import { arrCmp, combineBoolCmps, objCmp, scalarCmp } from '../../utils/BoolComparator';
+
+export const hotFilterRecordCmp = objCmp<string[]>(combineBoolCmps(scalarCmp, arrCmp()));