@redneckz/wildless-cms-uni-blocks 0.2.116 → 0.3.2

package/src/icons/WalletAdd2Icon.svg

@@ -1 +1 @@
-<svg title="Пополнение карты" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.19 7.06C6.45 7.02 6.72 7 7 7h10c.26 0 .51.01.75.05C20.33 7.35 22 9.26 22 12v5c0 3-2 5-5 5H7.63c.31-.26.58-.58.79-.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4-1.2 0-2.27.53-3 1.36V12c0-.87.17-1.66.48-2.33" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.75 7.05C17.51 7.01 17.26 7 17 7H7c-.28 0-.55.02-.81.06.14-.28.34-.54.58-.78l3.25-3.26a3.525 3.525 0 0 1 4.96 0l1.75 1.77c.64.63.98 1.43 1.02 2.26Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 19c0 .75-.21 1.46-.58 2.06A3.97 3.97 0 0 1 5 23a3.97 3.97 0 0 1-3.42-1.94A3.92 3.92 0 0 1 1 19c0-2.21 1.79-4 4-4s4 1.79 4 4ZM6.49 18.98H3.51M5 17.52v2.99" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 12.5h-3c-1.1 0-2 .9-2 2s.9 2 2 2h3" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Пополнение карты" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.19 7.06C6.45 7.02 6.72 7 7 7h10c.26 0 .51.01.75.05C20.33 7.35 22 9.26 22 12v5c0 3-2 5-5 5H7.63c.31-.26.58-.58.79-.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4-1.2 0-2.27.53-3 1.36V12c0-.87.17-1.66.48-2.33" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.75 7.05C17.51 7.01 17.26 7 17 7H7c-.28 0-.55.02-.81.06.14-.28.34-.54.58-.78l3.25-3.26a3.525 3.525 0 0 1 4.96 0l1.75 1.77c.64.63.98 1.43 1.02 2.26Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 19c0 .75-.21 1.46-.58 2.06A3.97 3.97 0 0 1 5 23a3.97 3.97 0 0 1-3.42-1.94A3.92 3.92 0 0 1 1 19c0-2.21 1.79-4 4-4s4 1.79 4 4ZM6.49 18.98H3.51M5 17.52v2.99" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 12.5h-3c-1.1 0-2 .9-2 2s.9 2 2 2h3" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/WalletAddIcon.svg

@@ -1 +1 @@
-<svg title="Кошелёк с плюсом" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 15.44h-5M12 13v5" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22H8.1c-.24 0-.48-.02-.71-.05-3.18-.21-4.88-1.91-5.09-5.09-.03-.23-.05-.47-.05-.71V14.2c0-2.01 1.22-3.74 2.96-4.49.6-.25 1.24-.39 1.92-.39h9.76c.49 0 .97.07 1.41.2 2 .6 3.46 2.47 3.46 4.67v1.95c0 .2-.01.4-.02.6-.19 3.5-2.14 5.26-5.84 5.26" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m12.9 2.52-.03.07-2.9 6.73H7.12c-.68 0-1.33.14-1.92.39l1.75-4.18.04-.1.07-.16c.02-.06.04-.12.07-.17 1.31-3.03 2.79-3.72 5.77-2.58Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.29 9.52c-.45-.14-.93-.2-1.41-.2H9.97l2.9-6.73.03-.07c.15.05.29.12.44.18l2.21.93c1.23.51 2.09 1.04 2.61 1.68.1.12.18.23.25.36.09.14.16.28.2.43.04.09.07.18.09.26.27.84.11 1.87-.41 3.16ZM6.95 5.53 5.2 9.71a4.894 4.894 0 0 0-2.96 4.49v-2.93c0-2.84 2.02-5.21 4.71-5.74Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.76 11.27v2.93c0-2.2-1.46-4.07-3.46-4.67.52-1.3.67-2.32.42-3.17-.02-.09-.05-.18-.09-.26 1.86.96 3.13 2.93 3.13 5.17Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Кошелёк с плюсом" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 15.44h-5M12 13v5" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22H8.1c-.24 0-.48-.02-.71-.05-3.18-.21-4.88-1.91-5.09-5.09-.03-.23-.05-.47-.05-.71V14.2c0-2.01 1.22-3.74 2.96-4.49.6-.25 1.24-.39 1.92-.39h9.76c.49 0 .97.07 1.41.2 2 .6 3.46 2.47 3.46 4.67v1.95c0 .2-.01.4-.02.6-.19 3.5-2.14 5.26-5.84 5.26" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m12.9 2.52-.03.07-2.9 6.73H7.12c-.68 0-1.33.14-1.92.39l1.75-4.18.04-.1.07-.16c.02-.06.04-.12.07-.17 1.31-3.03 2.79-3.72 5.77-2.58Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.29 9.52c-.45-.14-.93-.2-1.41-.2H9.97l2.9-6.73.03-.07c.15.05.29.12.44.18l2.21.93c1.23.51 2.09 1.04 2.61 1.68.1.12.18.23.25.36.09.14.16.28.2.43.04.09.07.18.09.26.27.84.11 1.87-.41 3.16ZM6.95 5.53 5.2 9.71a4.894 4.894 0 0 0-2.96 4.49v-2.93c0-2.84 2.02-5.21 4.71-5.74Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.76 11.27v2.93c0-2.2-1.46-4.07-3.46-4.67.52-1.3.67-2.32.42-3.17-.02-.09-.05-.18-.09-.26 1.86.96 3.13 2.93 3.13 5.17Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/WalletIcon.svg

@@ -1 +1 @@
-<svg title="Кошелёк" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.75 16.86v2.03c0 1.72-1.6 3.11-3.57 3.11-1.97 0-3.58-1.39-3.58-3.11v-2.03c0 1.72 1.6 2.94 3.58 2.94 1.97 0 3.57-1.23 3.57-2.94Z" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.75 14.11c0 .5-.14.96-.38 1.36-.59.97-1.8 1.58-3.2 1.58-1.4 0-2.61-.62-3.2-1.58-.24-.4-.38-.86-.38-1.36 0-.86.4-1.63 1.04-2.19.65-.57 1.54-.91 2.53-.91.99 0 1.88.35 2.53.91.66.55 1.06 1.33 1.06 2.19Z" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.75 14.11v2.75c0 1.72-1.6 2.94-3.57 2.94-1.97 0-3.58-1.23-3.58-2.94v-2.75C3.6 12.39 5.2 11 7.18 11c.99 0 1.88.35 2.53.91.64.56 1.04 1.34 1.04 2.2Z" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 10.97v2.06c0 .55-.44 1-1 1.02h-1.96c-1.08 0-2.07-.79-2.16-1.87-.06-.63.18-1.22.6-1.63.37-.38.88-.6 1.44-.6H21c.56.02 1 .47 1 1.02Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 3.5c.26 0 .51.01.75.05C19.33 3.85 21 5.76 21 8.5v1.45h-2.08c-.56 0-1.07.22-1.44.6-.42.41-.66 1-.6 1.63.09 1.08 1.08 1.87 2.16 1.87H21v1.45c0 3-2 5-5 5h-2.5M2 10.5v-2c0-2.72 1.64-4.62 4.19-4.94.26-.04.53-.06.81-.06h5" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Кошелёк" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.75 16.86v2.03c0 1.72-1.6 3.11-3.57 3.11-1.97 0-3.58-1.39-3.58-3.11v-2.03c0 1.72 1.6 2.94 3.58 2.94 1.97 0 3.57-1.23 3.57-2.94Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.75 14.11c0 .5-.14.96-.38 1.36-.59.97-1.8 1.58-3.2 1.58-1.4 0-2.61-.62-3.2-1.58-.24-.4-.38-.86-.38-1.36 0-.86.4-1.63 1.04-2.19.65-.57 1.54-.91 2.53-.91.99 0 1.88.35 2.53.91.66.55 1.06 1.33 1.06 2.19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.75 14.11v2.75c0 1.72-1.6 2.94-3.57 2.94-1.97 0-3.58-1.23-3.58-2.94v-2.75C3.6 12.39 5.2 11 7.18 11c.99 0 1.88.35 2.53.91.64.56 1.04 1.34 1.04 2.2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 10.97v2.06c0 .55-.44 1-1 1.02h-1.96c-1.08 0-2.07-.79-2.16-1.87-.06-.63.18-1.22.6-1.63.37-.38.88-.6 1.44-.6H21c.56.02 1 .47 1 1.02Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 3.5c.26 0 .51.01.75.05C19.33 3.85 21 5.76 21 8.5v1.45h-2.08c-.56 0-1.07.22-1.44.6-.42.41-.66 1-.6 1.63.09 1.08 1.08 1.87 2.16 1.87H21v1.45c0 3-2 5-5 5h-2.5M2 10.5v-2c0-2.72 1.64-4.62 4.19-4.94.26-.04.53-.06.81-.06h5" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/WalletWithMoneyIcon.svg

@@ -1 +1 @@
-<svg title="Кошелёк с деньгами" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 12.063V11a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1.063" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m5 7 8.571-5L15 4.308M10 7l8-4 2 2.91" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.56 18H21a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v3" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/></svg>
+<svg title="Кошелёк с деньгами" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 12.063V11a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1.063" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m5 7 8.571-5L15 4.308M10 7l8-4 2 2.91" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.56 18H21a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v3" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/></svg>

package/src/index.ts

@@ -15,7 +15,7 @@ export type {
   Search,
 } from './components/ContentPage/ContentPageContext';
 export { ContentPageHead } from './components/ContentPage/ContentPageHead';
-export { toMobilePage } from './components/ContentPage/toMobilePage';
+export { normalizePage } from './components/ContentPage/normalizePage';
 export { Header } from './components/Header/Header';
 export type { Img, ImgSource, Picture } from './model/Picture';
 export { projectSettings } from './ProjectSettings';

package/src/model/ButtonVersion.ts

@@ -3,4 +3,4 @@
  * @default primary
  * @enumNames ["Основная", "Второстепенная"]
  */
-export type ButtonVersion = 'primary' | 'secondary';
+export type ButtonVersion = 'primary' | 'secondary' | 'link';

package/src/types.ts

@@ -4,15 +4,16 @@ import type { BlockVersion } from './model/BlockVersion';
 
 export type ColorPalette = 'pc' | 'bc' | 'eo' | 'eo2' | 'eo3' | 'eo4';
 
-export interface BlockDef {
+export interface BaseBlockDef {
   type: string;
   style?: string[];
   content?: BlockContent;
   version?: BlockVersion;
-  blocks?: BlockDef[];
-  mobile?: Pick<BlockDef, 'content' | 'style'> & {
-    hidden?: boolean;
-  };
+  hidden?: boolean;
+}
+
+export interface BlockDef extends BaseBlockDef {
+  mobile?: BaseBlockDef;
 }
 
 export interface Slot {

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

@@ -1,36 +1,33 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { BlockItemProps, BlockItemVersion } from './BlockItemProps';
+import type { BlockItemProps, BlockItemVersion } from './BlockItemProps';
 
 const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
 
 const TEXT_STYLE_MAP: Record<BlockItemVersion, string> = {
   primary: 'text-primary-text',
-  secondary: '',
+  secondary: 'text-white',
+  gray: 'text-secondary-text',
 };
 
 const LIST_STYLE_MAP: Record<BlockItemVersion, string> = {
   primary: 'bg-primary-main',
   secondary: 'bg-white',
+  gray: 'bg-secondary-text',
 };
 
 export const BlockItem = JSX<BlockItemProps>(
-  ({ className = '', isDotted = true, text, children, version = 'primary', white }) => {
+  ({ className = '', isDotted = true, text, children, version = 'primary' }) => {
     return (
-      <div className={`font-sans flex items-baseline ${className}`} role="listitem">
-        {isDotted && <div className={getListStyle(version, white)} />}
-        <span className={white ? 'text-white' : TEXT_STYLE_MAP[version]}>{text || children}</span>
+      <div className={`font-sans flex items-center ${className}`} role="listitem">
+        {isDotted && <div className={getListStyle(version)} />}
+        <span className={TEXT_STYLE_MAP[version]}>{text || children}</span>
       </div>
     );
   },
 );
 
-const getListStyle = (version: BlockVersion, white?: boolean) => {
-  const color = white ? 'bg-white' : LIST_STYLE_MAP[version];
+const getListStyle = (version: BlockItemVersion) => {
   const size =
-    version === 'primary'
-      ? 'w-2 h-2 min-w-2 min-h-2 mt-2'
-      : 'w-[6px] h-[6px] min-w-[6px] min-h-[6px] mt-2.5';
-
-  return `${LIST_STYLE_CLASSES} ${color} ${size}`;
+    version === 'gray' ? 'w-[6px] h-[6px] min-w-[6px] min-h-[6px]' : 'w-2 h-2 min-w-2 min-h-2';
+  return `${LIST_STYLE_CLASSES} ${LIST_STYLE_MAP[version]} ${size}`;
 };

package/src/ui-kit/BlockItem/BlockItemProps.ts

@@ -1,7 +1,8 @@
 /**
  * @title Версия списка
+ * @enumNames ["Основной", "Второстепенный", "Белый"]
  */
-export type BlockItemVersion = 'primary' | 'secondary';
+export type BlockItemVersion = 'primary' | 'secondary' | 'gray';
 
 /**
  * @title Содержимое элемента блока
@@ -17,7 +18,6 @@ export interface BlockItemContent {
 export interface BlockItemProps extends BlockItemContent {
   className?: string;
   version?: BlockItemVersion;
-  white?: boolean;
   /** @title Маркер */
   isDotted?: boolean;
 }

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

@@ -70,7 +70,7 @@ export default {
             appendLeft={
               /** Div need for perfect pixel */
               <div>
-                <Icon name="PlayMarketIcon" width="24" height="24" />
+                <Icon name="PlayMarketIcon" width="24" height="24" asSVG />
               </div>
             }
             text="Google Play"
@@ -82,7 +82,7 @@ export default {
             aboveText="Загрузите в"
             appendLeft={
               <div>
-                <Icon name="AppleIcon" width="24" height="24" />
+                <Icon name="AppleIcon" width="24" height="24" asSVG />
               </div>
             }
             text="App Store"

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

@@ -4,24 +4,25 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { ButtonProps, ButtonWithIconProps } from './ButtonProps';
+import { ButtonInner } from './ButtonInner';
 
 const buttonStyleMap: Record<ButtonVersion, string> = {
   primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
   secondary:
     'text-primary-main bg-secondary-light hover:bg-secondary-hover active:bg-secondary-active',
+  link: 'text-primary-main',
 };
 
 const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   primary: 'bg-secondary-dark text-secondary-text',
   secondary: 'bg-secondary-light text-secondary-text',
+  link: '',
 };
 
 const styleButton = 'w-full text-center font-sans select-none';
 
 export interface ButtonCommonProps extends ButtonProps, ButtonWithIconProps {}
 
-export type ButtonInner = Pick<ButtonCommonProps, 'text' | 'aboveText' | 'appendLeft' | 'rounded'>;
-
 export const Button = JSX<ButtonCommonProps>(
   ({
     className,
@@ -34,12 +35,18 @@ export const Button = JSX<ButtonCommonProps>(
     children,
     disabled,
     rounded,
-    version = 'none',
+    version = 'primary',
     ariaLabel,
     ...rest
   }) => {
     const buttonInner = children ?? (
-      <ButtonInner text={text} aboveText={aboveText} appendLeft={appendLeft} rounded={rounded} />
+      <ButtonInner
+        text={text}
+        aboveText={aboveText}
+        appendLeft={appendLeft}
+        rounded={rounded}
+        version={version}
+      />
     );
 
     if (disabled) {
@@ -75,23 +82,3 @@ export const Button = JSX<ButtonCommonProps>(
     );
   },
 );
-
-export const ButtonInner = JSX<ButtonInner>(({ text, aboveText, appendLeft, rounded }) => {
-  const withoutText = !text && !aboveText && Boolean(appendLeft);
-
-  const buttonInnerClasses = `flex items-center justify-center ${
-    withoutText ? 'h-12 w-12' : `px-9 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`
-  } ${rounded ? 'rounded-full' : ''}`;
-
-  return (
-    <div className={buttonInnerClasses}>
-      {appendLeft ? appendLeft : null}
-      {withoutText ? null : (
-        <div>
-          <div className="text-m-2xs text-left">{aboveText}</div>
-          <div className="text-m-button font-medium text-left">{text}</div>
-        </div>
-      )}
-    </div>
-  );
-});

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

@@ -1,27 +1,25 @@
-/* eslint-disable max-lines-per-function */
-/* eslint-disable complexity */
-
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
+import { ButtonInner } from './ButtonInner';
 import type { ButtonProps, ButtonWithIconProps } from './ButtonProps';
 
 const buttonStyleMap: Record<ButtonVersion, string> = {
   primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
   secondary:
     'text-primary-main bg-secondary-light hover:bg-secondary-hover active:bg-secondary-active',
+  link: '',
 };
 
 const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   primary: 'bg-secondary-dark text-secondary-text',
   secondary: 'bg-secondary-light text-secondary-text',
+  link: '',
 };
 
 const styleButton = 'text-center font-sans select-none';
 
 export interface ButtonCommonProps extends ButtonProps, ButtonWithIconProps {}
 
-export type ButtonInner = Pick<ButtonCommonProps, 'text' | 'aboveText' | 'appendLeft' | 'rounded'>;
-
 export const Button = JSX<ButtonCommonProps>(
   ({
     className,
@@ -42,56 +40,62 @@ export const Button = JSX<ButtonCommonProps>(
       <ButtonInner text={text} aboveText={aboveText} appendLeft={appendLeft} rounded={rounded} />
     );
 
-    if (disabled) {
-      return (
-        <div
-          role="button"
-          aria-disabled="true"
-          aria-label={ariaLabel}
-          tabIndex="-1"
-          className={`inline-block ${styleButton} ${buttonDisabledStyleMap[version] || ''} ${
-            rounded ? 'rounded-full' : 'rounded-md'
-          } ${className || ''}`}
-        >
-          {buttonInner}
-        </div>
-      );
-    }
-
-    return (
-      <a
-        className={`${styleButton} inline-block cursor-pointer no-underline ${
-          buttonStyleMap[version] || ''
-        } ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`}
-        href={href}
-        target={target}
-        onClick={onClick}
-        aria-label={ariaLabel}
-        role={!href ? 'button' : 'link'}
-        {...rest}
-      >
-        {buttonInner}
-      </a>
-    );
+    return disabled
+      ? renderDisabledButton({ buttonInner, ariaLabel, className, version, rounded })
+      : renderButton({
+          buttonInner,
+          ariaLabel,
+          className,
+          version,
+          rounded,
+          href,
+          target,
+          onClick,
+          rest,
+        });
   },
 );
 
-export const ButtonInner = JSX<ButtonInner>(({ text, aboveText, appendLeft, rounded }) => {
-  const withoutText = !text && !aboveText && Boolean(appendLeft);
-
-  const buttonInnerClasses = `flex items-center justify-center ${
-    withoutText ? 'h-12 w-12' : `px-9 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`
-  } ${rounded ? 'rounded-full' : ''}`;
+function renderButton({
+  className,
+  buttonInner,
+  ariaLabel,
+  version,
+  rounded,
+  href,
+  target,
+  onClick,
+  rest,
+}) {
+  return (
+    <a
+      className={`${styleButton} inline-block cursor-pointer no-underline ${
+        buttonStyleMap[version] || ''
+      } ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`}
+      href={href}
+      target={target}
+      onClick={onClick}
+      aria-label={ariaLabel}
+      role={!href ? 'button' : 'link'}
+      {...rest}
+    >
+      {buttonInner}
+    </a>
+  );
+}
 
+function renderDisabledButton({ className, buttonInner, ariaLabel, version, rounded }) {
   return (
-    <div className={buttonInnerClasses}>
-      {appendLeft ? appendLeft : null}
-      {withoutText ? null : (
-        <div>
-          <div className="text-2xs text-left">{aboveText}</div>
-          <div className="text-button font-medium text-left">{text}</div>
-        </div>
-      )}
+    <div
+      role="button"
+      aria-disabled="true"
+      aria-label={ariaLabel}
+      tabIndex="-1"
+      className={`inline-block ${styleButton} ${buttonDisabledStyleMap[version] || ''} ${
+        rounded ? 'rounded-full' : 'rounded-md'
+      } ${className || ''}`}
+    >
+      {buttonInner}
     </div>
   );
-});
+}

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

@@ -0,0 +1,37 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ButtonVersion } from '../../model/ButtonVersion';
+import type { ButtonWithIconProps } from './ButtonProps';
+
+interface ButtonInnerProps extends ButtonWithIconProps {
+  version?: ButtonVersion;
+}
+
+export const ButtonInner = JSX<ButtonInnerProps>(
+  ({ text, aboveText, appendLeft, rounded, version }) => {
+    const withoutText = !text && !aboveText && Boolean(appendLeft);
+
+    const buttonInnerClasses =
+      version !== 'link'
+        ? `flex items-center justify-center
+          ${withoutText ? 'h-12 w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`} ${
+            rounded ? 'rounded-full' : ''
+          }`
+        : null;
+
+    return renderButtonInner({ buttonInnerClasses, appendLeft, withoutText, aboveText, text });
+  },
+);
+
+function renderButtonInner({ buttonInnerClasses, appendLeft, withoutText, aboveText, text }) {
+  return (
+    <div className={buttonInnerClasses}>
+      {appendLeft ? appendLeft : null}
+      {withoutText ? null : (
+        <div>
+          <div className="text-m-2xs text-left">{aboveText}</div>
+          <div className="text-m-button font-medium text-left">{text}</div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,5 +1,6 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { LinkProps } from '../../model/LinkProps';
+import type { IconName } from '../Icon/IconProps';
 
 /**
  * @hidden
@@ -22,6 +23,8 @@ export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
 }
 
 export interface ButtonWithIconProps extends ButtonProps {
+  /** @title Иконка */
+  icon?: IconName;
   /** @title Верхний текст */
   aboveText?: string;
   /** @hidden */
@@ -31,3 +34,11 @@ export interface ButtonWithIconProps extends ButtonProps {
   /** @hidden */
   asSVG?: boolean;
 }
+
+export interface ButtonContent {
+  /**
+   * @title Кнопки
+   * @maxItems 4
+   */
+  buttons?: ButtonWithIconProps[];
+}

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

@@ -0,0 +1,34 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import { UniBlockProps } from '../../types';
+import { Icon } from '../Icon/Icon';
+import { Button } from './Button';
+import type { ButtonContent, ButtonWithIconProps } from './ButtonProps';
+
+export interface ButtonSectionProps extends ButtonContent, UniBlockProps {}
+
+export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '', buttons }) => {
+  const { handlerDecorator } = context;
+  const router = context.useRouter();
+  return buttons?.length ? (
+    <div className={`${className}`}>
+      {buttons.map((button, index) =>
+        renderButton(useLink({ router, handlerDecorator }, button), index),
+      )}
+    </div>
+  ) : null;
+});
+
+function renderButton({ icon, ...button }: ButtonWithIconProps, i: number) {
+  if (!button?.text) return;
+
+  return icon ? (
+    <Button
+      key={String(i)}
+      appendLeft={<Icon name={icon} width="24" height="24" asSVG />}
+      {...button}
+    />
+  ) : (
+    <Button key={String(i)} {...button} />
+  );
+}

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

@@ -0,0 +1,8 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DescriptionProps } from './DescriptionProps';
+
+export const Description = JSX<DescriptionProps>((props) => {
+  const { className, description } = props;
+
+  return <div className={`font-normal text-base ${className || ''}`}>{description}</div>;
+});

package/src/ui-kit/Description/DescriptionProps.ts

@@ -0,0 +1,8 @@
+export interface DescriptionContent {
+  /** @title Описание */
+  description?: string;
+}
+
+export interface DescriptionProps extends DescriptionContent {
+  className?: string;
+}

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Heading } from './Heading';
 
 export default {
@@ -5,22 +6,22 @@ export default {
     <div className="p-2 w-full h-full">
       <div className="bg-slate-100 w-full h-full">
         <div className="pb-3">
-          <Heading type="h1" text="Копите в нескольких валютах" />
+          <Heading headingType="h1" title="Копите в нескольких валютах" />
         </div>
         <div className="pb-3">
-          <Heading type="h2" text="Копите в нескольких валютах" />
+          <Heading headingType="h2" title="Копите в нескольких валютах" />
         </div>
         <div className="pb-3">
-          <Heading type="h3" text="Дополнительные документы" />
+          <Heading headingType="h3" title="Дополнительные документы" />
         </div>
         <div className="pb-3">
-          <Heading type="h4" text="Вклады в любой валюте" />
+          <Heading headingType="h4" title="Вклады в любой валюте" />
         </div>
         <div className="pb-3">
-          <Heading type="h5" text="Вклады в любой валюте" />
+          <Heading headingType="h5" title="Вклады в любой валюте" />
         </div>
         <div className="pb-3">
-          <Heading type="h6" text="Вклады в любой валюте" />
+          <Heading headingType="h6" title="Вклады в любой валюте" />
         </div>
       </div>
     </div>

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

@@ -5,22 +5,22 @@ export default {
     <div className="p-2 w-full h-full">
       <div className="bg-slate-100 w-full h-full">
         <div className="pb-3">
-          <Heading type="h1" text="«Своя» дебетовая карта" />
+          <Heading headingType="h1" title="«Своя» дебетовая карта" />
         </div>
         <div className="pb-3">
-          <Heading type="h2" text="Рефинансирование кредитов" />
+          <Heading headingType="h2" title="Рефинансирование кредитов" />
         </div>
         <div className="pb-3">
-          <Heading type="h3" text="Потребительский кредит" />
+          <Heading headingType="h3" title="Потребительский кредит" />
         </div>
         <div className="pb-3">
-          <Heading type="h4" text="Курсы обмена валют" />
+          <Heading headingType="h4" title="Курсы обмена валют" />
         </div>
         <div className="pb-3">
-          <Heading type="h5" text="Своё Родное" />
+          <Heading headingType="h5" title="Своё Родное" />
         </div>
         <div className="pb-3">
-          <Heading type="h6" text="Своё Родное" />
+          <Heading headingType="h6" title="Своё Родное" />
         </div>
       </div>
     </div>

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

@@ -1,7 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { HeadingProps } from './HeadingProps';
+import { HeadingContent, HeadingType, HeadingTypeContent } from './HeadingContent';
 
-const HeadingClass: Record<HeadingProps['type'], string> = {
+export interface HeadingProps extends HeadingContent, HeadingTypeContent {
+  className?: string;
+}
+
+const HeadingClass: Record<HeadingType, string> = {
   h1: 'text-m-title',
   h2: 'text-m-title',
   h3: 'text-m-title-md',
@@ -11,10 +15,15 @@ const HeadingClass: Record<HeadingProps['type'], string> = {
 };
 
 export const Heading = JSX<HeadingProps>((props) => {
-  const { className, type, text } = props;
-  const Tag = type;
+  const { className, headingType, title } = props;
+  if (!headingType) {
+    return;
+  }
+  const Tag = headingType;
 
   return (
-    <Tag className={`font-sans font-medium ${HeadingClass[type]} ${className || ''}`}>{text}</Tag>
+    <Tag className={`font-sans font-medium ${HeadingClass[headingType]} ${className || ''}`}>
+      {title}
+    </Tag>
   );
 });

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

@@ -1,7 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { HeadingProps } from './HeadingProps';
+import { HeadingContent, HeadingType, HeadingTypeContent } from './HeadingContent';
 
-const HeadingClass: Record<HeadingProps['type'], string> = {
+export interface HeadingProps extends HeadingContent, HeadingTypeContent {
+  className?: string;
+}
+
+const HEADING_STYLE_MAP: Record<HeadingType, string> = {
   h1: 'text-title-lg tracking-[-0.3px]',
   h2: 'text-title',
   h3: 'text-title-sm',
@@ -11,10 +15,15 @@ const HeadingClass: Record<HeadingProps['type'], string> = {
 };
 
 export const Heading = JSX<HeadingProps>((props) => {
-  const { className, type, text } = props;
-  const Tag = type;
+  const { className, headingType, title } = props;
+  if (!headingType) {
+    return;
+  }
+  const Tag = headingType;
 
   return (
-    <Tag className={`font-sans font-medium ${HeadingClass[type]} ${className || ''}`}>{text}</Tag>
+    <Tag className={`font-sans font-medium ${HEADING_STYLE_MAP[headingType]} ${className || ''}`}>
+      {title}
+    </Tag>
   );
 });

package/src/ui-kit/Heading/{HeadingProps.ts → HeadingContent.ts}

@@ -7,8 +7,11 @@
  */
 export type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
-export interface HeadingProps {
-  className?: string;
-  type: HeadingType;
-  text?: string;
+export interface HeadingTypeContent {
+  headingType?: HeadingType;
+}
+
+export interface HeadingContent {
+  /** @title Заголовок */
+  title?: string;
 }