@redneckz/wildless-cms-uni-blocks 0.3.85 → 0.3.87

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlList.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { SwipeListControlItem } from './SwipeListControlItem';
-import { getContainerStyle } from './utils/getContainerStyle';
 import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { SwipeListControlItem } from './SwipeListControlItem';
 import { SwipeContainer } from './SwipeListControlProps';
+import { getContainerStyle } from './utils/getContainerStyle';
 
 /**
  * @title Список
@@ -10,7 +10,7 @@ import { SwipeContainer } from './SwipeListControlProps';
 export interface SwipeListControlListProps extends SwipeContainer {
   className?: string;
   activeIndex: number;
-  onScroll?: (e: UIEvent) => void;
+  onScroll?: (e) => void;
 }
 
 export const SwipeListControlList = JSX<SwipeListControlListProps>(

package/mobile/src/ui-kit/TableArrowScrollControl/TableArrowScrollControlProps.ts

@@ -1,9 +1,7 @@
-import { FuncReturnVoid } from '../../types';
-
 export interface TableArrowScrollControlProps {
   isScrollAvailable?: boolean;
-  handleNextClick: FuncReturnVoid<MouseEvent>;
-  handlePrevClick: FuncReturnVoid<MouseEvent>;
+  handleNextClick: () => void;
+  handlePrevClick: () => void;
   showNextButton: boolean;
   showPrevButton: boolean;
 }

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

@@ -28,7 +28,7 @@ const renderTab =
         }`}
         role="tab"
         onClick={() => onTabClick(index)}
-        aria-selected={String(isActive)}
+        aria-selected={isActive}
       >
         {tab?.icon ? renderIcon(tab, isActive) : null}
         <div>

package/mobile/src/ui-kit/Tabs/TabsProps.ts

@@ -1,5 +1,4 @@
 import type { Picture } from '../../model/Picture';
-import { FuncReturnVoid } from '../../types';
 
 /**
  * @title Вкладка
@@ -12,7 +11,7 @@ export interface Tab {
   icon?: Picture;
 }
 
-export type TabClickHandler = FuncReturnVoid<number>;
+export type TabClickHandler = (tabIndex: number) => void;
 
 export interface TabsProps {
   tabs?: Tab[];

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

@@ -10,7 +10,7 @@ export interface TopItemProps extends TopItemContent {
   className?: string;
   flat?: boolean;
   ariaLabel?: string;
-  onClick?: (ev: MouseEvent) => any;
+  onClick?: () => void;
   bgColor?: BgColorVersion;
   dataItemName?: string;
 }

package/mobile/src/utils/url.ts

@@ -24,3 +24,5 @@ export const getHash = (href?: string) => {
 
   return hashIndex !== -1 ? href.substring(hashIndex, href.length) : undefined;
 };
+
+export const isHash = (href?: string) => href?.startsWith('#');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.85",
+  "version": "0.3.87",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -121,6 +121,8 @@
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.3",
     "@size-limit/file": "^7.0.8",
+    "@testing-library/react": "^12.1.5",
+    "@types/glob": "^8.0.0",
     "@types/jest": "^28.1.5",
     "@typescript-eslint/eslint-plugin": "^5.30.6",
     "@typescript-eslint/experimental-utils": "^5.30.6",
@@ -133,10 +135,12 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-local-eslint-rules": "./eslint-rules",
     "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-sonarjs": "^0.15.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
     "jest": "^28.1.3",
+    "jest-environment-jsdom": "^29.0.3",
     "lint-staged": "^13.0.1",
     "postcss": "^8.4.14",
     "postcss-cli": "^9.1.0",

package/src/common.css

@@ -10,8 +10,8 @@ html {
   --color-primary-main: 66, 171, 68;
   --color-primary-hover: 36, 131, 65;
   --color-primary-active: 36, 95, 52;
-  --color-secondary-hover: 216, 242, 217;
-  --color-secondary-active: 197, 226, 198;
+  --color-secondary-hover: 36, 131, 65;
+  --color-secondary-active: 36, 95, 52;
   --color-gradient-from: 141, 189, 76;
   --color-gradient-to: 69, 172, 69;
 }
@@ -20,18 +20,18 @@ html {
   --color-primary-main: 131, 184, 62;
   --color-primary-hover: 92, 146, 29;
   --color-primary-active: 60, 94, 16;
-  --color-secondary-hover: 232, 244, 217;
-  --color-secondary-active: 216, 227, 202;
+  --color-secondary-hover: 92, 146, 29;
+  --color-secondary-active: 60, 94, 16;
   --color-gradient-from: 141, 189, 76; /* TODO: change color to theme bc */
   --color-gradient-to: 69, 172, 69; /* TODO: change color to theme bc */
 }
 /* Ecosystem own | Yellow */
 [data-theme='eo'] {
-  --color-primary-main: 225, 186, 30;
+  --color-primary-main: 221, 182, 61;
   --color-primary-hover: 187, 151, 39;
   --color-primary-active: 126, 99, 12;
-  --color-secondary-hover: 241, 236, 221;
-  --color-secondary-active: 229, 222, 199;
+  --color-secondary-hover: 187, 151, 39;
+  --color-secondary-active: 126, 99, 12;
   --color-gradient-from: 141, 189, 76; /* TODO: change color to theme eo */
   --color-gradient-to: 69, 172, 69; /* TODO: change color to theme eo */
 }

package/src/components/Accordion/Accordion.tsx

@@ -37,7 +37,7 @@ export const Accordion = JSX<AccordionProps>(
             title={title}
           />
         ) : null}
-        {description ? <div className="mb-2.5 text-base">{description}</div> : null}
+        {description ? <div className="mb-2.5 text-l">{description}</div> : null}
         {accordionItems?.length ? (
           <ul className="list-none m-0 p-0">
             {accordionItems.map((item, i) => (

package/src/components/Accordion/useActiveHandler.ts

@@ -6,17 +6,17 @@ export const useActiveHandler = ({ context, blocks, initialState = false }: Acti
   const hasContent = blocks?.length;
   const icon: IconName = isActive ? 'MinusIcon' : 'PlusIcon';
 
-  const getContentBlock = ({ currentTarget }) => currentTarget.nextSibling;
+  const handleToggle = (e) => {
+    const currentTarget = e.currentTarget as HTMLElement;
 
-  const handleToggle = (e: MouseEvent) => {
-    if (!hasContent) {
+    if (!currentTarget) {
       return;
     }
 
     setIsActive(!isActive);
-    const contentBlock = getContentBlock(e);
+    const contentBlock = currentTarget.nextSibling as HTMLElement;
     contentBlock.style.maxHeight = contentBlock.style.maxHeight
-      ? null
+      ? ''
       : `${contentBlock.scrollHeight}px`;
   };
 

package/src/components/BaseTile/BaseTile.tsx

@@ -5,7 +5,7 @@ import type { BaseTileCommonProps } from './BaseTileProps';
 export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}
 
 export const BaseTile = JSX<BaseTileProps>(
-  ({ className = '', title, children, buttons, image }) => {
+  ({ className = '', title = '', children, buttons, image }) => {
     return (
       <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
         {title}

package/src/components/BaseTile/BaseTileProps.ts

@@ -1,39 +1,16 @@
-import type { BlockVersion } from '../../model/BlockVersion';
-import type { Picture } from '../../model/Picture';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { HeadingType } from '../../ui-kit/Heading/HeadingContent';
 import type { AlignType } from '../../model/AlignType';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { HeadingType } from '../../ui-kit/Heading/HeadingProps';
+import type { VNode } from '../../model/VNode';
 
-/**
- * @title Общий компонент плиток
- */
-export type BaseTileCommonProps = BaseTileTitleProps & BaseTileMainProps;
-
-/**
- * @title Заголовк плитки
- */
-export interface BaseTileTitleProps {
-  /** @title Заголовок */
-  title?: string;
-  /**
-   * @title Тип заголовка
-   */
+export interface BaseTileCommonProps {
+  title?: VNode;
   headingType?: HeadingType;
-}
-
-export interface BaseTileMainProps {
   description?: string;
-  image?: Picture;
-  /** @title Список */
+  image?: VNode;
   items?: string[];
-
   list?: string;
-
-  /**
-   * @title Кнопки
-   * @maxItems 4
-   */
-  buttons?: ButtonWithIconProps[];
+  buttons?: VNode;
   version?: BlockVersion;
   align?: AlignType;
 }

package/src/components/BaseTile/getTileHeadingType.ts

@@ -3,10 +3,10 @@ import { getColSpan } from '../../utils/getColSpan';
 export function getTileHeadingType(className = '') {
   const colSpan = getColSpan(className);
   if (colSpan <= 4) {
-    return 'h4';
+    return 'S';
   } else if (colSpan <= 8) {
-    return 'h3';
+    return 'M';
   } else {
-    return 'h2';
+    return 'L';
   }
 }

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -65,7 +65,7 @@ const renderDescription = (description?: DescriptionType) => {
   }
 
   return description ? (
-    <div className="font-light text-base text-secondary-text mt-2">
+    <div className="text-l-light text-secondary-text mt-2">
       {benefitType === 'list'
         ? renderListBenefit(description as ListBenefitDef)
         : renderTextBenefit(description as TextBenefitDef)}

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
+import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import type { EmptyOption } from '../../model/EmptyOptionType';
 
 /**
@@ -48,11 +48,10 @@ export interface BenefitItem {
 /**
  * @title Блок преимущества
  */
-export type BenefitsBlockContent = HeadingContent &
-  HeadingTypeContent & {
-    /**
-     * @title Список преимуществ
-     * @maxItems 6
-     */
-    benefitList?: BenefitItem[];
-  };
+export type BenefitsBlockContent = HeadingCommonProps & {
+  /**
+   * @title Список преимуществ
+   * @maxItems 6
+   */
+  benefitList?: BenefitItem[];
+};

package/src/components/Blocks.spec.tsx

@@ -0,0 +1,71 @@
+import { setup } from '@redneckz/uni-jsx';
+import { render } from '@testing-library/react';
+import { useState } from 'react';
+import runtime from 'react/jsx-runtime';
+import { Blocks } from './Blocks';
+import type { ContentPageContext } from './ContentPage/ContentPageContext';
+
+const { jsx, jsxs } = runtime as any;
+
+setup(jsx, jsxs);
+
+const emptyFn = () => {
+  /* For sure */
+};
+
+const context: ContentPageContext = {
+  useState,
+  useRouter: () => ({
+    pathname: '/credits',
+    query: {},
+    push: emptyFn,
+    replace: emptyFn,
+  }),
+  useAsyncData: () => ({}),
+  useGeolocation: (defaultLocation) => [defaultLocation, emptyFn],
+  useLikeService: () => ({
+    likeCount: 0,
+    like: emptyFn,
+    dislike: emptyFn,
+  }),
+  handlerDecorator: (): any => emptyFn,
+  useSearch: () => ({
+    term: '',
+    setTerm: emptyFn,
+  }),
+  IntersectionObserverTag: ({ children }) => children,
+};
+
+describe('Blocks', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  for (const [key, BlockComponent] of Object.entries(Blocks)) {
+    describe(key, () => {
+      it(`should render block "${key}" without content`, () => {
+        expect.assertions(2);
+
+        const { container } = render(<BlockComponent context={context} />);
+        expect(container.firstChild).toBeTruthy();
+        expect(container.firstChild).toMatchSnapshot();
+      });
+
+      it(`should render block "${key}" with demo content`, async () => {
+        expect.assertions(1);
+
+        let data = {};
+
+        try {
+          const { default: example } = await import(`./${key}/${key}.example.json`);
+          data = example;
+        } catch (ex) {
+          // Do nothing
+        }
+
+        const { container } = render(<BlockComponent context={context} {...data} />);
+        expect(container.firstChild).toBeTruthy();
+      });
+    });
+  }
+});

package/src/components/Bonus/Bonus.fixture.tsx

@@ -5,6 +5,7 @@ import type { BonusContent } from './BonusContent';
 export const BONUS: BonusContent = {
   title: 'Начисление баллов',
   description:
+    /* eslint-disable max-len */
     'Получайте 1% бонусными баллами с любых покупок и 1,5% баллами с покупок в категории «Путешествия». Обменивайте бонусные баллы на авиа и ж/д билеты, бронирование отелей и прокат автомобилей.',
   bonusItems: [
     {

package/src/components/Bonus/Bonus.tsx

@@ -14,7 +14,7 @@ export const Bonus = JSX<BonusProps>((props) => {
       <div className="container">
         {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
         {description ? (
-          <div className="text-md font-light text-center mt-[10px]">{description}</div>
+          <div className="text-xl-light text-center mt-[10px]">{description}</div>
         ) : null}
         <div className="flex flex-wrap w-full mt-9">
           {bonusItems
@@ -26,10 +26,8 @@ export const Bonus = JSX<BonusProps>((props) => {
                   >
                     <div className="flex justify-between w-full">
                       <div className="mr-4">
-                        <div className="text-title-sm">{_.title}</div>
-                        <div className="text-md font-light mt-[14px] max-w-[488px]">
-                          {_.description}
-                        </div>
+                        <div className="text-h4">{_.title}</div>
+                        <div className="text-xl-light mt-[14px] max-w-[488px]">{_.description}</div>
                       </div>
                       {_.bonusCount ? (
                         <div className="relative -bottom-3 h-auto flex items-end mt-14 shrink-0">

package/src/components/Bonus/BonusContent.ts

@@ -1,5 +1,4 @@
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /** @title Плитка */
 interface BonusItems {
@@ -16,8 +15,7 @@ interface BonusItems {
 /**
  * @title Блок Бонусы
  */
-export type BonusContent = HeadingContent &
-  DescriptionContent & {
-    /** @title Список плиток */
-    bonusItems?: BonusItems[];
-  };
+export type BonusContent = HeadlineCommonProps & {
+  /** @title Список плиток */
+  bonusItems?: BonusItems[];
+};

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -39,7 +39,7 @@ const renderBonusBenefit = (bonusBenefit: BonusBenefit, i: number) => {
         />
       ) : null}
       <div>
-        {bonusBenefit?.label ? <span className="title-2xs m-0">{bonusBenefit.label}</span> : null}
+        {bonusBenefit?.label ? <span className="text-h6 m-0">{bonusBenefit.label}</span> : null}
       </div>
     </div>
   );

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -6,12 +6,12 @@ import { DEFAULT_REST_MIN_SUM, DEFAULT_TRAVEL_MIN_SUM } from './constants';
 import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
 import { renderWantedSumInput } from './renderWantedSumInput';
-import { getBonusCalculatorParams } from './useBonusCalculatorParams';
+import { useBonusCalculatorParams } from './useBonusCalculatorParams';
 
 export interface BonusCalculatorProps extends CommonCalculatorProps, UniBlockProps {}
 
 export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
-  ({ context, className = '', sourceBookDir, buttons }) => {
+  ({ context, className = '', sourceBookDir = '', buttons }) => {
     const [travelExpenseValue, setTravelExpenseValue] = context.useState(DEFAULT_TRAVEL_MIN_SUM);
     const [restExpenseValue, setRestExpenseValue] = context.useState(DEFAULT_REST_MIN_SUM);
     const userInputParams = {
@@ -19,7 +19,7 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
       restExpenseValue,
     };
     const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } =
-      getBonusCalculatorParams(context, userInputParams, sourceBookDir);
+      useBonusCalculatorParams(context, userInputParams, sourceBookDir);
 
     return (
       <section className={className}>

package/src/components/Calculator/Calculator.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { FuncReturnVoid, UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
@@ -12,14 +12,14 @@ type TabsProps = {
   tabsShift: number;
   tabsNav: CalculatorNav[];
   activeSlideIndex: number;
-  setActiveSlideIndex: FuncReturnVoid<number>;
+  setActiveSlideIndex: (index: number) => void;
 };
 
 type NavButtonProps = {
   tab: CalculatorNav;
   i: number;
   activeSlideIndex: number;
-  onClick: FuncReturnVoid<MouseEvent>;
+  onClick: () => void;
 };
 
 export const Calculator = JSX<CalculatorProps>(
@@ -75,8 +75,8 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
   const btnClassName = isActiveBtn
     ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
     : `h-[77px] w-[322px] min-w-[322px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
-  const btnTitleClassName = isActiveBtn ? 'text-md-new mb-1.5' : `text-base mb-[3px]`;
-  const btnDescClassName = isActiveBtn ? 'text-base text-white' : `text-m-md`;
+  const btnTitleClassName = isActiveBtn ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
+  const btnDescClassName = isActiveBtn ? 'text-l text-white' : `text-m-md`;
   const iconClassName = isActiveBtn ? '' : `text-primary-main`;
 
   return (

package/src/components/Calculator/CalculatorValueBlock.tsx

@@ -13,9 +13,9 @@ export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
   ({ title, value, postfix = '', prefix, className = '' }) => {
     return (
       <div className={`mb-5 ${className}`}>
-        {title ? <div className="text-base font-light">{title}</div> : null}
+        {title ? <div className="text-l-light">{title}</div> : null}
         {value ? (
-          <div className="text-title font-normal">
+          <div className="text-h3">
             {prefix} {addSpacesBetweenNumbers(Math.round(value))} {postfix}
           </div>
         ) : null}

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -9,7 +9,7 @@ import { renderButtonSection } from './renderButtonSection';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderPaymentTypeSelector } from './renderPaymentTypeSelector';
 import { renderWantedSumInput } from './renderWantedSumInput';
-import { getCreditCalculatorParams } from './useCreditCalculatorParams';
+import { useCreditCalculatorParams } from './useCreditCalculatorParams';
 
 export const ANNUITY = 'annuity';
 export const DIFFERENTIAL = 'differential';
@@ -43,7 +43,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
       moneyValue,
       monthsValue,
     };
-    const calculatorParams = getCreditCalculatorParams(context, userInputParams, sourceBookDir);
+    const calculatorParams = useCreditCalculatorParams(context, userInputParams, sourceBookDir);
 
     return (
       <section className={className}>

package/src/components/Calculator/Rate.tsx

@@ -9,10 +9,10 @@ export interface RateProps {
 
 export const Rate = JSX<RateProps>(({ rate, title = 'Ставка', unit, rateBlockClassName }) => (
   <div>
-    <div className="text-sm font-light ml-3">{title}</div>
+    <div className="text-l-light ml-3">{title}</div>
     <div className="flex justify-start">
       <span
-        className={`block calc-rate-text font-mohave text-highlighted pr-6 -mt-4 ${rateBlockClassName}`}
+        className={`block calc-rate-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`}
       >
         {String(rate).replace('.', ',')}
       </span>

package/src/components/Calculator/renderProposal.tsx

@@ -4,10 +4,8 @@ import { Button } from '../../ui-kit/Button/Button';
 export function renderProposal(monthlyPayment: number) {
   return (
     <div className="box-border ">
-      <div className="text-base font-light">Ежемесячный платёж</div>
-      <div className="text-title mb-3 font-normal">
-        {addSpacesBetweenNumbers(Math.round(monthlyPayment))} ₽
-      </div>
+      <div className="text-l-light">Ежемесячный платёж</div>
+      <div className="text-h3 mb-3">{addSpacesBetweenNumbers(Math.round(monthlyPayment))} ₽</div>
       <Button className="mt-[50px] w-full" text="Отправить заявку" version="primary" href="#" />
     </div>
   );

package/src/components/Calculator/useBonusCalculatorParams.ts

@@ -28,10 +28,10 @@ export interface BonusCalculatorParams
   yearBonus: number;
 }
 
-export const getBonusCalculatorParams = (
+export const useBonusCalculatorParams = (
   context: ContentPageContext,
   userInputParams: BonusCalculatorUserInputParams,
-  sourceBookDir,
+  sourceBookDir: string,
 ) => {
   const { travelExpenseValue, restExpenseValue } = userInputParams;
   const bonusCalculatorSourceBookParams =

package/src/components/Calculator/useCreditCalculatorParams.ts

@@ -35,7 +35,7 @@ export type CreditCalculatorData = {
   rows: CreditCalculatorSourceBookParams[];
 };
 
-export const getCreditCalculatorParams = (
+export const useCreditCalculatorParams = (
   context: ContentPageContext,
   userInputParams: CreditCalculatorUserInputParams,
   sourceBookDir?: string,

package/src/components/Catalog/Catalog.tsx

@@ -21,10 +21,10 @@ export const Catalog = JSX<CatalogProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`bg-white relative font-sans p-9 overflow-hidden text-center ${className}`}
+        className={`bg-white relative font-sans p-12 overflow-hidden text-center ${className}`}
         {...rest}
       >
-        {title ? <Heading headingType="h2" className="mb-6" title={title} /> : null}
+        {title ? <Heading headingType="h3" className="mb-6" title={title} /> : null}
         {description ? <Description className="mb-6" description={description} /> : null}
         <div
           className="flex duration-1000 gap-3.5"

package/src/components/Catalog/CatalogCard.tsx

@@ -22,18 +22,21 @@ export const CatalogCard = JSX<CatalogCardProps>(
         className={`border border-solid box-border p-[30px] min-w-[402px] flex flex-col justify-left ${className}`}
         role="listitem"
       >
-        {image?.src ? <Img className="mb-5" image={image} /> : null}
+        {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}
         {title ? (
-          <Heading headingType="h6" as="h5" className="text-left mb-1.5" title={title} />
+          <Heading headingType="h6" as="h4" className="text-left mb-1.5" title={title} />
+        ) : null}
+        {description ? (
+          <div className="text-m-md text-left mb-4 font-light">{description}</div>
         ) : null}
-        {description ? <div className="text-m-md text-left mb-4">{description}</div> : null}
         {colors?.length ? (
-          <div className="flex mb-4 text-m-md text-secondary-text">
-            Доступные цвета: {colors.map(renderColorOption)}
+          <div className="flex mb-4 text-m-md text-secondary-text font-light">
+            <div className="mr-1.5">Доступные цвета: </div>
+            {colors.map(renderColorOption)}
           </div>
         ) : null}
-        {price ? <div className="text-title-sm text-left">{price}&nbsp;₽</div> : null}
-        {button?.text ? <Button className="mt-6 w-full" {...button} /> : null}
+        {price ? <div className="text-h3 text-left">{price}&nbsp;₽</div> : null}
+        {button?.text ? <Button className="mt-5 w-full" {...button} /> : null}
       </section>
     );
   },

package/src/components/Catalog/CatalogContent.ts

@@ -1,14 +1,13 @@
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
  * @enumNames ["Черный", "Белый"]
  */
 export type CatalogProductColor = 'black' | 'white';
 
-export interface CatalogCardType extends HeadingContent, DescriptionContent, ImageContent {
+export interface CatalogCardType extends HeadlineCommonProps, ImageContent {
   /** @title Цена в рублях */
   price?: number;
   /** @title Доступные цвета */
@@ -20,8 +19,7 @@ export interface CatalogCardType extends HeadingContent, DescriptionContent, Ima
 /**
  * @title Каталог
  */
-export type CatalogContent = HeadingContent &
-  DescriptionContent & {
-    /** @title Список карточек */
-    cards?: CatalogCardType[];
-  };
+export type CatalogContent = HeadlineCommonProps & {
+  /** @title Список карточек */
+  cards?: CatalogCardType[];
+};