@redneckz/wildless-cms-uni-blocks 0.3.31 → 0.3.34

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -14,10 +14,24 @@ const steps = [
     label: 'Получение наличных',
     description: 'Получите наличные в отделении банка',
   },
+  {
+    label: 'Последний шаг!',
+    description: 'Получите наличные в отделении банка',
+  },
 ];
 
 export default {
   default: (
+    <div className="container grid grid-cols-12">
+      <StepsBlock
+        className="col-span-12"
+        context={context}
+        title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+        steps={steps.slice(0, 3)}
+      />
+    </div>
+  ),
+  '4 steps': (
     <div className="container grid grid-cols-12">
       <StepsBlock
         className="col-span-12"

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

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
-import type { BlockVersion } from '../../model/BlockVersion';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
@@ -16,6 +16,16 @@ type StyleType = {
   iconConnector: string;
 };
 
+const STEPS_SIZE_MAP: Record<SizeVersion, string> = {
+  normal: 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]',
+  small: 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]',
+};
+
+const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
+  normal: 'min-h-[70px]',
+  small: 'min-h-[50px]',
+};
+
 const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
   primary: {
     background: 'bg-white',
@@ -88,7 +98,9 @@ const renderStepTitle = (params: RenderStepTitleParams) => {
             <div className={`min-h-8 h-full w-[2px] ${style.iconConnector} ${margin}`} />
           )}
         </div>
-        <div className="flex flex-col justify-start relative">
+        <div
+          className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
+        >
           {step.label && (
             <div className="font-medium text-m-title-xs m-0 text-left">{step.label}</div>
           )}
@@ -110,10 +122,7 @@ const renderStepTitle = (params: RenderStepTitleParams) => {
 const renderIconArea = (params: RenderStepTitleParams) => {
   const { step, size, i, version } = params;
   const style = styleMaps(version);
-  const iconAreaSize =
-    size === 'normal'
-      ? 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]'
-      : 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]';
+  const iconAreaSize = STEPS_SIZE_MAP[size];
 
   const iconSize = size === 'normal' ? '38' : '27';
   const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
@@ -123,7 +132,8 @@ const renderIconArea = (params: RenderStepTitleParams) => {
       className={`${iconAreaSize} ${style.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
     >
       <span className={`font-medium flex self-center ${style.title} ${iconTextSize}`}>
-        {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} asSVG />) || i + 1}
+        {(step.icon?.icon && <Img image={step.icon} width={iconSize} height={iconSize} asSVG />) ||
+          i + 1}
       </span>
     </div>
   );

package/src/components/StepsBlock/StepsBlock.tsx

@@ -1,19 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 import { joinList } from '../../utils/joinList';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
 export const StepsBlock = JSX<StepsBlockProps>(
-  ({ className, title, showLines = true, steps, anchor = null }) => {
+  ({ className = '', title, showLines = true, steps = [], anchor = null }) => {
+    const shortGaps = steps.length > 3;
+
     return (
       <section
-        className={`box-border font-sans text-primary-text bg-white px-20 py-[50px] flex flex-col items-center ${
-          className || ''
-        }`}
+        className={[
+          'box-border font-sans text-primary-text bg-white',
+          shortGaps ? 'px-20' : 'px-[70px]',
+          'py-[50px] flex flex-col items-center',
+          className,
+        ].join(' ')}
         id={anchor}
       >
         <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
@@ -24,9 +29,11 @@ export const StepsBlock = JSX<StepsBlockProps>(
                 <div
                   className={`h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}`}
                 />,
-              )(steps.map((step, i) => renderStepIcon(step, i)))}
+              )(steps.map(renderStepIcon))}
+            </div>
+            <div className={`flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`}>
+              {steps.map(renderStepTitle)}
             </div>
-            <div className="flex justify-between gap-x-[101px]">{steps.map(renderStepTitle)}</div>
           </div>
         ) : null}
       </section>
@@ -38,7 +45,7 @@ const renderStepIcon = (step: Step, i: number) => {
   return (
     <div key={String(i)} className="flex flex-col items-center text-center relative">
       <div className="h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10">
-        {(step.icon && <Icon name={step.icon} width="48" height="48" />) || (
+        {(step.icon?.icon && <Img image={step.icon} width="48" height="48" />) || (
           <span className="font-medium text-title-sm text-secondary-text">{i + 1}</span>
         )}
       </div>

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,6 +1,6 @@
-import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Шаг
@@ -10,7 +10,7 @@ export interface Step {
   label?: string;
   /** @title Описание */
   description?: string;
-  icon?: IconName;
+  icon?: Picture;
 }
 
 /**
@@ -26,9 +26,10 @@ export interface StepsBlockContent {
   /**
    * @title Шаги
    * @minItems 2
-   * @maxItems 3
+   * @maxItems 4
    */
   steps?: Step[];
+  /** @title Размер шагов (моб.) */
   size?: SizeVersion; // TODO: mobile content
   version?: BlockVersion; // TODO: mobile content
 }

package/src/components/TariffsTable/TableTileHeader.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 import type { TariffsTableRowHeader } from './TariffsTableContent';
 
 export const TableTileHeader = JSX<TariffsTableRowHeader>(({ title, icon }) => {
@@ -8,7 +8,7 @@ export const TableTileHeader = JSX<TariffsTableRowHeader>(({ title, icon }) => {
     <div className="flex gap-2.5 mb-2">
       {title ? <Heading headingType="h3" className="font-medium" title={title} /> : null}
       {icon ? (
-        <Icon className="ml-auto max-w-6 max-h-6" name={icon} width="24px" height="24px" />
+        <Img className="ml-auto max-w-6 max-h-6" image={icon} width="24px" height="24px" />
       ) : null}
     </div>
   );

package/src/components/TariffsTable/TariffsTable.example.json

@@ -5,11 +5,15 @@
   "rowHeaders": [
     {
       "title": "Параметр 1",
-      "icon": "MoneyIcon"
+      "icon": {
+        "icon": "MoneyIcon"
+      }
     },
     {
       "title": "Параметр 2",
-      "icon": "DollarIcon"
+      "icon": {
+        "icon": "DollarIcon"
+      }
     },
     {
       "title": "Параметр 3"
@@ -45,7 +49,9 @@
             "label": "Ячейка 3-2",
             "buttons": [
               {
-                "icon": "AppleIcon",
+                "icon": {
+                  "icon": "AppleIcon"
+                },
                 "rounded": true,
                 "version": "secondary",
                 "href": "/",
@@ -53,7 +59,9 @@
                 "text": ""
               },
               {
-                "icon": "PlayMarketIcon",
+                "icon": {
+                  "icon": "PlayMarketIcon"
+                },
                 "rounded": true,
                 "version": "secondary",
                 "href": "/",

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

@@ -1,9 +1,6 @@
 import { mobileContext } from '../../setup-fixture';
 import { TariffsTable } from './TariffsTable';
-import type {
-  TariffsTableColumn,
-  TariffsTableRowHeader,
-} from '../TariffsTable/TariffsTableContent';
+import type { TariffsTableColumn, TariffsTableRowHeader } from './TariffsTableContent';
 import type { Picture } from '../../model/Picture';
 
 const image: Picture = {
@@ -18,9 +15,9 @@ const image: Picture = {
 };
 
 const rowHeaders: TariffsTableRowHeader[] = [
-  { title: 'Начисление процентов на остаток по счету', icon: 'OkIcon' },
-  { title: 'Снятие наличных', icon: 'GlassIcon' },
-  { title: 'Оформление онлайн', icon: 'ShieldTickIcon' },
+  { title: 'Начисление процентов на остаток по счету', icon: { icon: 'OkIcon' } },
+  { title: 'Снятие наличных', icon: { icon: 'GlassIcon' } },
+  { title: 'Оформление онлайн', icon: { icon: 'ShieldTickIcon' } },
   { title: 'Кэшбэк баллами' },
   { title: 'Кнопки-иконки' },
   { title: 'Стоимость SMS-сервиса' },
@@ -51,14 +48,14 @@ const columns: TariffsTableColumn[] = [
         {
           buttons: [
             {
-              icon: 'AppleIcon',
+              icon: { icon: 'AppleIcon' },
               rounded: true,
               version: 'secondary',
               href: '/',
               target: '_blank',
             },
             {
-              icon: 'PlayMarketIcon',
+              icon: { icon: 'PlayMarketIcon' },
               rounded: true,
               version: 'secondary',
               href: '/',

package/src/components/TariffsTable/TariffsTable.fixture.tsx

@@ -15,9 +15,9 @@ const image: Picture = {
 };
 
 const rowHeaders: TariffsTableRowHeader[] = [
-  { title: 'Начисление процентов на остаток по счету', icon: 'OkIcon' },
-  { title: 'Снятие наличных', icon: 'GlassIcon' },
-  { title: 'Оформление онлайн', icon: 'ShieldTickIcon' },
+  { title: 'Начисление процентов на остаток по счету', icon: { icon: 'OkIcon' } },
+  { title: 'Снятие наличных', icon: { icon: 'GlassIcon' } },
+  { title: 'Оформление онлайн', icon: { icon: 'ShieldTickIcon' } },
   { title: 'Кэшбэк баллами' },
   { title: 'Стоимость обслуживания' },
   { title: 'Стоимость SMS-сервиса' },
@@ -45,14 +45,14 @@ const columns: TariffsTableColumn[] = [
         {
           buttons: [
             {
-              icon: 'AppleIcon',
+              icon: { icon: 'AppleIcon' },
               rounded: true,
               version: 'secondary',
               href: '/',
               target: '_blank',
             },
             {
-              icon: 'PlayMarketIcon',
+              icon: { icon: 'PlayMarketIcon' },
               rounded: true,
               version: 'secondary',
               href: '/',

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -1,10 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import type { TariffsTableCellData, TariffsTableList } from './TariffsTableContent';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 export interface TariffsTableCellProps {
   cell: TariffsTableCellData[];
@@ -55,7 +54,7 @@ const renderButtons = (buttons: ButtonWithIconProps[]) => (
         className={`${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`}
         key={String(idx)}
         rounded={rounded}
-        appendLeft={icon && <Icon name={icon} width="24px" height="24px" asSVG />}
+        appendLeft={icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null}
         {...buttonProps}
       />
     ))}

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,4 +1,3 @@
-import type { IconName } from '../../icons/IconName';
 import type { CellData } from '../ComparisonTable/ComparisonTableContent';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -6,6 +5,7 @@ import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
+import { Picture } from '../../model/Picture';
 
 /**
  * @title Ряд
@@ -44,7 +44,7 @@ export type TariffsTableCellData = CellData &
  * @title Параметр
  */
 export type TariffsTableRowHeader = HeadingContent & {
-  icon?: IconName;
+  icon?: Picture;
 };
 
 /**

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Img } from '../../ui-kit/Img/Img';
+import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
+import { TableRowContainer } from '../ComparisonTable/TableRowContainer';
 import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { TariffsTableCell } from './TariffsTableCell';
-import { TableRowContainer } from '../ComparisonTable/TableRowContainer';
-import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
 import type { TariffsTableRowData } from './TariffsTableContent';
 
 export interface TariffsTableRowProps {
@@ -23,15 +23,15 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
           }`}
         >
           <div className="flex items-center text-primary-text">
-            {header?.icon && (
-              <Icon
+            {header?.icon ? (
+              <Img
                 className="mr-[14px] max-w-6 max-h-6"
-                name={header.icon}
+                image={header.icon}
                 width="24px"
                 height="24px"
                 asSVG
               />
-            )}
+            ) : null}
             {header?.title}
           </div>
         </div>

package/src/components/TariffsTable/TariffsTableTileCell.tsx

@@ -1,15 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { TableTileHeader } from './TableTileHeader';
-import { Img } from '../../ui-kit/Img/Img';
 import { Button } from '../../ui-kit/Button/Button';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
+import { TableTileHeader } from './TableTileHeader';
 import type {
   TariffsTableCellData,
   TariffsTableList,
   TariffsTableTileCellProps,
 } from './TariffsTableContent';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ header, data }) => {
   return (
@@ -54,7 +53,7 @@ const renderButtons = (buttons: ButtonWithIconProps[]) => (
         className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`}
         key={String(idx)}
         rounded={rounded}
-        appendLeft={icon && <Icon name={icon} width="24px" height="24px" asSVG />}
+        appendLeft={icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null}
         {...buttonProps}
         aria-label={icon}
       />

package/src/content-page-repository/transformContentPage.ts

@@ -16,7 +16,7 @@ export async function transformContentPage(
   const content = await readFile(pagePath, 'utf8');
   return mapJSON<ContentPageDef>(JSON.parse(content), async (value: any, [key]) => {
     const isMarkdown = typeof value === 'string' && key?.endsWith('__md');
-    const isPicture = value && isLocalPath(value.src);
+    const isPicture = value && isLocalPath(value?.src);
     if (isMarkdown) {
       return await transformMarkdown(value);
     } else if (isPicture) {

package/src/model/Picture.ts

@@ -1,3 +1,5 @@
+import type { IconName } from '../icons/IconName';
+
 export interface Img {
   /** @title Картинка */
   src?: string;
@@ -8,6 +10,8 @@ export interface Img {
 }
 
 export interface ImgSource {
+  /** @title Иконка */
+  icon?: IconName;
   /** @title Картинка */
   src?: string;
   /** @title Формат */

package/src/model/SitemapProps.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from './LinkProps';
-import { IconName } from '../icons/IconName';
+import type { Picture } from './Picture';
 
 /**
  * @title Меню
@@ -16,7 +16,7 @@ export interface TopMenuItem extends LinkProps {
  */
 export interface DispositionItem extends LinkProps {
   /** @hidden */
-  icon?: IconName;
+  icon?: Picture;
 }
 
 export interface SitemapProps {

package/src/services/sitemap/SitemapProps.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
-import { IconName } from '../../icons/IconName';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Ссылка
@@ -16,7 +16,7 @@ export interface TopMenuItem extends LinkProps {
  */
 export interface DispositionItem extends LinkProps {
   /** @hidden */
-  icon?: IconName;
+  icon?: Picture;
 }
 
 export interface SitemapProps {

package/src/setup-fixture.ts

@@ -18,13 +18,11 @@ const Router = () => {
     href: href,
     pathname: '/credits',
     query: {},
-    push: (url?: string) => {
-      if (!url) return;
+    push: (url: string) => {
       globalThis.history.pushState(null, '', url);
       setHref(globalThis.location.href);
     },
-    replace: (url?: string) => {
-      if (!url) return;
+    replace: (url: string) => {
       globalThis.history.replaceState(null, '', url);
       setHref(globalThis.location.href);
     },
@@ -88,10 +86,10 @@ export const mobileContext: ContentPageContext = {
     href: `${TEST_ORIGIN}/mobile/credits`,
     pathname: '/mobile/credits',
     query: {},
-    push: (url?: string) => {
+    push: (url: string) => {
       console.log(url);
     },
-    replace: (url?: string) => {
+    replace: (url: string) => {
       console.log(url);
     },
   }),

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

@@ -1,5 +1,5 @@
 import '../../setup-fixture';
-import { Icon } from '../Icon/Icon';
+import { Img } from '../Img/Img';
 import { Button } from './Button';
 
 export default {
@@ -66,7 +66,7 @@ export default {
             appendLeft={
               /** Div need for perfect pixel */
               <div>
-                <Icon name="PlayMarketIcon" width="24" height="24" asSVG />
+                <Img image={{ icon: 'PlayMarketIcon' }} width="24" height="24" asSVG />
               </div>
             }
             text="Google Play"
@@ -78,7 +78,7 @@ export default {
             aboveText="Загрузите в"
             appendLeft={
               <div>
-                <Icon name="AppleIcon" width="24" height="24" asSVG />
+                <Img image={{ icon: 'AppleIcon' }} width="24" height="24" asSVG />
               </div>
             }
             text="App Store"
@@ -94,14 +94,14 @@ export default {
             href="https://www.rshb.ru/"
             target="_blank"
             version="secondary"
-            appendLeft={<Icon name="PlayMarketIcon" width="20" height="21" asSVG />}
+            appendLeft={<Img image={{ icon: 'PlayMarketIcon' }} width="20" height="21" asSVG />}
           />
           <Button
             rounded
             href="https://www.rshb.ru/"
             target="_blank"
             version="secondary"
-            appendLeft={<Icon name="AppleIcon" width="18" height="20" asSVG />}
+            appendLeft={<Img image={{ icon: 'AppleIcon' }} width="18" height="20" asSVG />}
           />
         </div>
       </div>

package/src/ui-kit/Button/ButtonInner.tsx

@@ -13,8 +13,8 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {appendLeft ? appendLeft : null}
       {isWithText(props) ? (
         <div>
-          <div className="text-m-2xs text-left">{aboveText}</div>
-          <div className="text-m-button font-medium text-left">{text}</div>
+          <div className="text-m-2xs font-light text-left">{aboveText}</div>
+          <div className="text-base text-left">{text}</div>
         </div>
       ) : null}
     </div>
@@ -28,7 +28,7 @@ const getButtonStyle = (props: ButtonInnerProps) => {
     return '';
   }
 
-  const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`;
+  const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-4'}`;
 
   return [
     'flex items-center justify-center',

package/src/ui-kit/Button/ButtonProps.ts

@@ -1,6 +1,6 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { IconName } from '../Icon/IconProps';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @hidden
@@ -24,7 +24,7 @@ export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
 
 export interface ButtonWithIconProps extends ButtonProps {
   /** @title Иконка */
-  icon?: IconName;
+  icon?: Picture;
   /** @title Верхний текст */
   aboveText?: string;
   /** @hidden */

package/src/ui-kit/Button/ButtonSection.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import { UniBlockProps } from '../../types';
-import { Icon } from '../Icon/Icon';
+import { Img } from '../Img/Img';
 import { Button } from './Button';
 import type { ButtonContent, ButtonWithIconProps } from './ButtonProps';
 
@@ -25,7 +25,7 @@ function renderButton({ icon, ...button }: ButtonWithIconProps, i: number) {
   return icon ? (
     <Button
       key={String(i)}
-      appendLeft={<Icon name={icon} width="24" height="24" asSVG />}
+      appendLeft={<Img image={icon} width="24" height="24" asSVG />}
       {...button}
     />
   ) : (

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

@@ -22,8 +22,6 @@ export const Heading = JSX<HeadingProps>((props) => {
   const Tag = headingType;
 
   return (
-    <Tag className={`font-sans font-medium m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`}>
-      {title}
-    </Tag>
+    <Tag className={`font-sans m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`}>{title}</Tag>
   );
 });

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

@@ -12,7 +12,7 @@ const svgColorsMap: Record<IconColor, string> = {
 export const Icon = JSX<IconProps>(
   ({
     className = '',
-    name,
+    name = '',
     alt = `Иконка ${IconTitleMap[name] || name}`,
     title = alt,
     asSVG,

package/src/ui-kit/Icon/IconProps.ts

@@ -8,13 +8,22 @@ export type { IconName };
  */
 export type IconColor = 'none' | 'primary' | 'secondary';
 
-export interface IconProps {
-  className?: string;
-  name: IconName;
+export interface IconCompatibilityFields {
+  /** @title Альтернативный текст (alt) */
   alt?: string;
+  /** @title Текст подсказки (title) */
   title?: string;
+  /** @title Ширина */
   width?: string;
+  /** @title Высота */
   height?: string;
+  /** @hidden */
   asSVG?: boolean;
+  /** @hidden */
   color?: IconColor;
 }
+
+export type IconProps = IconCompatibilityFields & {
+  className?: string;
+  name?: IconName;
+};