@redneckz/wildless-cms-uni-blocks 0.11.2 → 0.11.3

package/mobile/src/components/Footer/FooterDataProps.ts

@@ -1,12 +1,12 @@
 import type { LinkCommonProps, LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
-import type { ContactInfo, SubMenuItem } from './FooterContent';
+import type { ContactGroup, SubMenuItem } from './FooterContent';
 
 export interface FooterDataProps extends SitemapData {
   documents?: LinkProps[];
   relatedEnterprises?: LinkProps[];
-  contacts?: ContactInfo[];
+  contacts?: ContactGroup[];
   socialMedia?: LinkCommonProps[];
   mobileApps?: LinkCommonProps[];
   horizontalNavigationTitle?: string; // TODO: для мобильной версии

package/mobile/src/components/PictureText/PictureText.tsx

@@ -2,10 +2,12 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
-import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 import { Headline } from '../Headline/Headline';
 import type { PictureTextContent } from './PictureTextContent';
 import { renderBenefit } from './renderBenefit';
+import { style } from '../../utils/style';
+import { positionStyle } from './positionStyle';
+import { renderInsuranceSumMonth } from './renderInsuranceSumMonth';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
@@ -22,11 +24,17 @@ export const PictureText = JSX<PictureTextProps>(
     version = 'primary',
     ...rest
   }) => (
-    <BlockWrapper className={`relative py-12 px-24 ${className}`} version={version} {...rest}>
-      <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
-      <div className={'flex justify-center gap-[122px] mt-[30px]'}>
+    <BlockWrapper className={style('relative p-default', className)} version={version} {...rest}>
+      <Headline
+        className="!p-0"
+        title={title}
+        description={description}
+        headlineVersion="M" // TODO: Сверить с макетом после влития мобильных правок Headline (DRAFT)
+        align="text-left"
+      />
+      <div className={style('flex mt-6', positionStyle)}>
         {image?.src ? <Img className={directionRight ? 'order-2' : ''} image={image} /> : null}
-        <div className="w-[558px] m-auto">
+        <div>
           {benefits?.length ? (
             <div className="flex flex-col gap-4">{benefits.map(renderBenefit(version))}</div>
           ) : null}
@@ -36,25 +44,3 @@ export const PictureText = JSX<PictureTextProps>(
     </BlockWrapper>
   ),
 );
-
-function renderInsuranceSumMonth(sum?: number, monthLimit?: number) {
-  return sum || monthLimit ? (
-    <div className="bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4">
-      {Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
-      {Number(monthLimit) > 0
-        ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
-        : null}
-    </div>
-  ) : null;
-}
-
-function renderValueBlock(title: string, sum = 0, isAnotherBlock = false) {
-  const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
-
-  return (
-    <div className={`flex justify-between items-center gap-2 w-full whitespace-pre ${widthStyle}`}>
-      <span className="text-secondary-text text-l-light">{title}</span>
-      <span className="text-primary-main text-h6">{toLocalNumberFormat(2)(sum)} ₽</span>
-    </div>
-  );
-}

package/mobile/src/components/PictureText/positionStyle.tsx

@@ -0,0 +1 @@
+export const positionStyle = 'justify-end flex-col-reverse gap-4';

package/mobile/src/components/PictureText/renderInsuranceSumMonth.tsx

@@ -0,0 +1,28 @@
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import { styleInsuranceSum } from './styleInsuranceSum';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { styleValueBlock, styleValueBlockText } from './styleValueBlock';
+
+export const renderInsuranceSumMonth = (sum = 0, monthLimit = 0) =>
+  sum || monthLimit ? (
+    <div className={style('flex mt-6', styleInsuranceSum)}>
+      {sum > 0 ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
+      {monthLimit > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum)) : null}
+    </div>
+  ) : null;
+
+const renderValueBlock = (title: string, sum = 0, isAnotherBlock = false) => {
+  const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
+
+  return (
+    <div className={style(`flex w-full whitespace-pre`, styleValueBlock, widthStyle)}>
+      <Text font="font-light" size="text-l">
+        {title}
+      </Text>
+      <Text size="text-h6" color={styleValueBlockText}>
+        {toLocalNumberFormat(2)(sum)} ₽
+      </Text>
+    </div>
+  );
+};

package/mobile/src/components/PictureText/styleInsuranceSum.tsx

@@ -0,0 +1 @@
+export const styleInsuranceSum = 'flex-col gap-2';

package/mobile/src/components/PictureText/styleValueBlock.tsx

@@ -0,0 +1,2 @@
+export const styleValueBlock = 'flex-col gap-1';
+export const styleValueBlockText = '';

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -9,8 +9,8 @@ import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName, IconProps } from '../../ui-kit/Icon/IconProps';
-import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
+import type { IconBgVersion, IconName, IconProps } from '../../ui-kit/Icon/IconProps';
+import { renderRoundedIcon } from './renderRoundedIcon';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { foldableSectionStyles } from './foldableSectionStyles';
@@ -27,6 +27,7 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
     className = '',
     label = 'Развернуть',
     labelIcon,
+    labelIconBgVersion,
     isExpanded,
     isFoldButtonOnTop = true,
     version = 'primary',
@@ -51,7 +52,14 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
             </FoldableSection>
           )}
           renderFoldButton={({ isUnfolded, onToggle }) =>
-            renderFoldButton({ version, label, labelIcon, isUnfolded, onToggle })
+            renderFoldButton({
+              version,
+              label,
+              labelIcon,
+              labelIconBgVersion,
+              isUnfolded,
+              onToggle,
+            })
           }
         />
       </BlockWrapper>
@@ -67,6 +75,7 @@ interface FoldButtonProps extends FoldablePartProps {
   version?: BlockVersion;
   label?: string;
   labelIcon?: IconProps;
+  labelIconBgVersion?: IconBgVersion;
   isPadding?: boolean;
 }
 
@@ -74,6 +83,7 @@ const renderFoldButton = ({
   version,
   label: defaultLabel,
   labelIcon,
+  labelIconBgVersion,
   isUnfolded,
   onToggle,
 }: FoldButtonProps) => {
@@ -83,6 +93,7 @@ const renderFoldButton = ({
     renderPrimaryFoldButton({
       label,
       labelIcon,
+      labelIconBgVersion,
       icon: getIconName(isUnfolded),
       onToggle,
     })
@@ -97,33 +108,29 @@ const renderFoldButton = ({
 
 interface PrimaryFoldButtonProps {
   label?: string;
+  labelIcon?: Picture;
+  labelIconBgVersion?: IconBgVersion;
   icon?: IconName;
   onToggle?: () => void;
-  labelIcon?: Picture;
 }
 
-const renderPrimaryFoldButton = ({ label, icon, onToggle, labelIcon }: PrimaryFoldButtonProps) => {
-  const iconWidth = String(labelIcon?.size?.width || 24);
-  const iconHeight = String(labelIcon?.size?.height || 24);
-  const iconName = labelIcon?.icon;
-
+const renderPrimaryFoldButton = ({
+  label,
+  labelIconBgVersion,
+  icon,
+  onToggle,
+  labelIcon,
+}: PrimaryFoldButtonProps) => {
   return (
     <button
       className={style(
         'border-none bg-transparent px-0 flex justify-between items-center w-full cursor-pointer group/button',
-        iconName ? 'py-2' : 'py-5',
+        labelIcon?.icon ? 'py-2' : 'py-5',
       )}
       onClick={onToggle}
     >
       <div className="flex items-center group-hover/button:text-primary-main">
-        {iconName ? (
-          <RoundedIcon
-            name={iconName}
-            width={iconWidth}
-            height={iconHeight}
-            iconVersion={labelIcon?.iconVersion}
-          />
-        ) : null}
+        {renderRoundedIcon(labelIcon, labelIconBgVersion)}
         {label ? (
           <Text size={labelSize} font="font-normal">
             {label}

package/mobile/src/components/RollupItem/RollupItem.ui.json

@@ -1 +1,7 @@
-{}
+{
+  "content": {
+    "labelIcon": {
+      "ui:field": "icon"
+    }
+  }
+}

package/mobile/src/components/RollupItem/RollupItemContent.ts

@@ -1,6 +1,7 @@
 import type { LabelProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { IconProps } from '../../ui-kit/Icon/IconProps';
+import type { Picture } from '../../model/Picture';
+import type { IconBgVersion } from '../../ui-kit/Icon/IconProps';
 
 /**
  * @title Сворачивающаяся секция
@@ -11,5 +12,6 @@ export type RollupItemContent = UniBlockContent &
     isExpanded?: boolean;
     /** @title Кнопка сверху */
     isFoldButtonOnTop?: boolean;
-    labelIcon?: IconProps; // TODO: только для мобильной версии
+    labelIcon?: Picture; // TODO: только для мобильной версии
+    labelIconBgVersion?: IconBgVersion;
   };

package/mobile/src/components/RollupItem/renderRoundedIcon.tsx

@@ -0,0 +1,7 @@
+import type { Picture } from '../../model/Picture';
+import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
+import type { IconBgVersion } from '../../ui-kit/Icon/IconProps';
+
+export const renderRoundedIcon = (icon?: Picture, iconBgVersion?: IconBgVersion) => (
+  <RoundedIcon {...icon} iconBgVersion={iconBgVersion} />
+);

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

@@ -1,34 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
-import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
+import { style } from '../../utils/style';
+import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
+import { labelSize } from './labelSize';
 import { Paragraph } from '../Paragraph/Paragraph';
 import { Text } from '../Text/Text';
-import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
 
 export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
 
-export const BenefitItem = JSX<BenefitGeneralProps>(
-  ({ className, icon, label, description, version = 'primary', benefitsVersion = 'normal' }) => (
-    <div className={style('flex gap-5', description ? 'items-start' : 'items-center', className)}>
+export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
+  const { className = '', icon, label, description, benefitsVersion = 'normal' } = props;
+  const listItemAlign = description ? 'items-start' : 'items-center';
+
+  return (
+    <div className={`flex gap-5 ${listItemAlign} ${className}`}>
       {icon ? (
-        <div className={getBenefitIconBgStyle(version, benefitsVersion)}>
+        <div className={getBenefitIconBgStyle(benefitsVersion)}>
           <Img
             className="w-6 h-6"
             image={{ ...icon, iconVersion: icon.iconVersion || benefitsVersion }}
           />
         </div>
       ) : null}
-      <div>
+      <div className="gap-0.5">
         {label ? (
-          <Text size="text-h6" color="text-primary-text group-data-secondary:text-white">
+          <Text color="text-primary-text group-data-secondary:text-white" size={labelSize}>
             {label}
           </Text>
         ) : null}
         {description ? (
           <Paragraph
-            size="text-m-light"
+            font="font-light"
+            size="text-m"
             color="text-secondary-text group-data-secondary:text-white"
           >
             {description}
@@ -36,17 +40,17 @@ export const BenefitItem = JSX<BenefitGeneralProps>(
         ) : null}
       </div>
     </div>
-  ),
-);
-
-function getBenefitIconBgStyle(version: BlockVersion, benefitsVersion: IconVersion) {
-  let bgColorStyle = 'bg-primary-main text-black';
+  );
+});
 
-  if (version === 'secondary') {
-    bgColorStyle = 'bg-white/30 text-black';
-  } else if (benefitsVersion === 'normal') {
-    bgColorStyle = 'bg-secondary-light text-primary-main';
-  }
+  function getBenefitIconBgStyle(benefitsVersion: IconVersion) {
+          const bgColorStyle =
+          benefitsVersion === 'normal'
+          ? 'bg-secondary-light text-primary-main'
+          : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black';
 
-  return `w-12 h-12 min-w-12 rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
-}
+          return style(
+          'w-12 h-12 min-w-12 p-2.5 box-border flex items-center justify-center rounded-icon',
+          bgColorStyle,
+          );
+        }

package/mobile/src/ui-kit/BenefitItem/labelSize.tsx

@@ -0,0 +1 @@
+export const labelSize = 'text-l';

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

@@ -15,7 +15,13 @@ export const renderButtonsSection = (
   { className = '', buttonClassName, isVertical }: ButtonsSectionOptions = {},
 ) =>
   buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (
-    <div className={style('flex', isVertical ? 'flex-col gap-2' : 'flex-wrap gap-4', className)}>
+    <div
+      className={style(
+        'flex',
+        isVertical ? 'flex-col gap-2 justify-items-stretch' : 'flex-wrap gap-4',
+        className,
+      )}
+    >
       {buttons.map(renderButton(buttonClassName))}
     </div>
   ) : null;
@@ -30,7 +36,7 @@ const renderButton =
     return text || icon?.icon ? (
       <Button
         key={index ? String(index) : ''}
-        className={buttonClassName}
+        className={style('basis-full sm:basis-auto', buttonClassName)}
         appendLeft={renderButtonIcon({ ...icon, iconVersion })}
         appendRight={renderButtonIcon({ ...iconRight, iconVersion })}
         version={version}

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

@@ -2,6 +2,15 @@ import type { IconName } from '../../icons/IconName';
 import type { IconVersion } from '../../model/IconVersion';
 
 export type { IconName };
+
+/**
+ * @title Цвет фона иконки
+ * @enumNames [
+ *    "Основной",
+ *    "Второстепенный",
+ *    "Второстепенный светлый"
+ * ]
+ */
 export type IconBgVersion = 'primary' | 'secondary' | 'secondary-light';
 
 export interface IconCompatibilityFields {
@@ -21,7 +30,3 @@ export type IconProps = IconCompatibilityFields & {
   name?: IconName;
   iconVersion?: IconVersion;
 };
-
-export interface RoundedIconProps extends IconProps {
-  iconBgVersion?: IconBgVersion;
-}

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

@@ -1,7 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Icon } from './Icon';
-import type { IconBgVersion, RoundedIconProps } from './IconProps';
+import type { IconBgVersion } from './IconProps';
 import { style } from '../../utils/style';
+import type { Picture } from '../../model/Picture';
+
+export interface RoundedIconProps extends Picture {
+  iconBgVersion?: IconBgVersion;
+}
 
 const iconBgStyles: Record<IconBgVersion, string> = {
   primary: 'bg-main-divider',
@@ -9,8 +14,15 @@ const iconBgStyles: Record<IconBgVersion, string> = {
   'secondary-light': 'bg-secondary-light',
 };
 
-export const RoundedIcon = JSX<RoundedIconProps>(({ iconBgVersion = 'primary', ...rest }) => (
-  <div className={style('rounded-icon p-2.5 mr-3', iconBgStyles[iconBgVersion])}>
-    <Icon {...rest} />
-  </div>
-));
+export const RoundedIcon = JSX<RoundedIconProps>(
+  ({ iconBgVersion = 'primary', size, icon, ...rest }) => {
+    const width = String(size?.width || 24);
+    const height = String(size?.height || 24);
+
+    return icon ? (
+      <div className={style('rounded-icon p-2.5 mr-3', iconBgStyles[iconBgVersion])}>
+        <Icon {...rest} width={width} height={height} name={icon} />
+      </div>
+    ) : null;
+  },
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -35,7 +35,7 @@ const renderStep = (benefit: BenefitBlockItemProps, i: number) => {
     <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
       {benefit?.icon?.icon ? (
         <Img
-          className="w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black"
+          className="w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black"
           image={benefit.icon}
         />
       ) : null}

package/src/components/Blocks.mobile.ts

@@ -1,4 +1,6 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
+import { ButtonsBlock } from './ButtonsBlock/ButtonsBlock';
+import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
 import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
@@ -10,6 +12,7 @@ import { Headline } from './Headline/Headline';
 import { ImgBlock } from './ImgBlock/ImgBlock';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
+import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
@@ -21,6 +24,8 @@ import { TextBlock } from './TextBlock/TextBlock';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 
 export const Blocks: BlocksRegistry = {
+  ButtonsBlock,
+  CardTransfer,
   Carousel,
   CarouselTariffsCard,
   ComparisonTable,
@@ -30,6 +35,7 @@ export const Blocks: BlocksRegistry = {
   ImgBlock,
   LinkDocs,
   MobileAppTile,
+  PictureText,
   Placeholder,
   ProductBlock,
   StepsBlock,

package/src/components/Blocks.ts

@@ -4,7 +4,7 @@ import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { BusinessBlock } from './BusinessBlock/BusinessBlock';
-import { ButtonBlock } from './ButtonBlock/ButtonBlock';
+import { ButtonsBlock } from './ButtonsBlock/ButtonsBlock';
 import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
@@ -64,7 +64,7 @@ export const Blocks: BlocksRegistry = {
   Bonus,
   BonusBenefitsBlock,
   BusinessBlock,
-  ButtonBlock,
+  ButtonsBlock,
   Calculator,
   CardTransfer,
   Carousel,

package/src/components/Bonus/Bonus.tsx

@@ -72,4 +72,4 @@ const renderBonusCount = (_: BonusCountDef) => (
 );
 
 const renderBonusImage = (_: BonusImageDef) =>
-  _.image ? <Img className={`w-12 h-12 min-w-12 p-3 rounded-full`} image={_.image} /> : null;
+  _.image ? <Img className={`w-12 h-12 min-w-12 p-3 rounded-icon`} image={_.image} /> : null;

package/src/components/BusinessBlock/BusinessCard.tsx

@@ -28,7 +28,7 @@ const renderItem = (item: BusinessCardItemProps, key: string) => {
   return (
     <li key={key} className="flex items-center gap-3.5 mb-3 last:mb-0">
       {icon?.icon ? (
-        <Img image={icon} className="w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider" />
+        <Img image={icon} className="w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider" />
       ) : null}
       {icon?.src ? <Img image={icon} /> : null}
       <span className="text-xl-light">{text}</span>

package/src/components/ButtonsBlock/ButtonsBlock.example.json

@@ -0,0 +1,14 @@
+{
+  "content": {
+    "buttons": [
+      {
+        "href": "#",
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary",
+        "icon": { "format": "webp", "size": { "width": 24, "height": 24 } },
+        "iconRight": { "format": "webp", "size": { "width": 24, "height": 24 } }
+      }
+    ]
+  }
+}

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

@@ -0,0 +1,26 @@
+import '../../setup-fixture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { ButtonsBlock } from './ButtonsBlock';
+
+const buttons: ButtonWithIconProps[] = [
+  {
+    href: '/credit-cards',
+    text: 'Оформить',
+    target: '_blank',
+    version: 'primary',
+  },
+  {
+    href: '/details',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
+  },
+];
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12 p-4">
+      <ButtonsBlock className="col-span-12" buttons={buttons} />
+    </div>
+  ),
+};

package/src/components/ButtonsBlock/ButtonsBlock.fixture.tsx

@@ -0,0 +1,26 @@
+import '../../setup-fixture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { ButtonsBlock } from './ButtonsBlock';
+
+const buttons: ButtonWithIconProps[] = [
+  {
+    href: '/credit-cards',
+    text: 'Оформить',
+    target: '_blank',
+    version: 'primary',
+  },
+  {
+    href: '/details',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
+  },
+];
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12 p-4">
+      <ButtonsBlock className="col-span-12" buttons={buttons} />
+    </div>
+  ),
+};

package/src/components/{ButtonBlock/ButtonBlock.tsx → ButtonsBlock/ButtonsBlock.tsx}

@@ -3,12 +3,12 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
-import type { ButtonBlockContent } from './ButtonBlockContent';
+import type { ButtonsBlockContent } from './ButtonsBlockContent';
 
-interface ButtonBlockProps extends ButtonBlockContent, UniBlockProps {}
+interface ButtonsBlockProps extends ButtonsBlockContent, UniBlockProps {}
 
-export const ButtonBlock = JSX<ButtonBlockProps>(({ button, className, ...rest }) => (
+export const ButtonsBlock = JSX<ButtonsBlockProps>(({ buttons, className, ...rest }) => (
   <BlockWrapper className={style('!bg-transparent', className)} {...rest}>
-    {renderButtonsSection([button])}
+    {renderButtonsSection(buttons)}
   </BlockWrapper>
 ));

package/src/components/ButtonsBlock/ButtonsBlock.ui.json

@@ -0,0 +1,14 @@
+{
+  "content": {
+    "buttons": {
+      "items": {
+        "icon": {
+          "ui:field": "icon"
+        },
+        "iconRight": {
+          "ui:field": "icon"
+        }
+      }
+    }
+  }
+}

package/src/components/ButtonsBlock/ButtonsBlockContent.ts

@@ -0,0 +1,9 @@
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Блок кнопок
+ */
+export interface ButtonsBlockContent {
+  /** @title Кнопки */
+  buttons?: ButtonWithIconProps[];
+}

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

@@ -0,0 +1,18 @@
+import '../../setup-fixture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { CardTransfer } from './CardTransfer';
+
+const button: ButtonProps = {
+  href: '',
+  text: 'Далее',
+  target: '_blank',
+  version: 'primary',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CardTransfer className="col-span-12" button={button} />
+    </div>
+  ),
+};