@redneckz/wildless-cms-uni-blocks 0.9.8 → 0.9.9

package/mobile/lib/components/CarouselRecommendationCard/CarouselRecommendationCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselRecommendationCard.js","sourceRoot":"","sources":["../../../src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CarouselRecommendationCard.js","sourceRoot":"","sources":["../../../src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGhD,MAAM,YAAY,GAChB,0GAA0G,CAAC;AAI7G,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAC3C,CAAC,EACC,SAAS,GAAG,EAAE,EACd,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,WAAW,GAAG,EAAE,EAChB,MAAM,EACN,KAAK,EACL,KAAK,GAAG,WAAW,EACnB,OAAO,GAAG,SAAS,EACnB,GAAG,IAAI,EACR,EAAE,EAAE;IACH,OAAO,CACL,KAAC,YAAY,IACX,SAAS,EAAE,KAAK,CACd,+FAA+F,EAC/F,YAAY,EACZ,SAAS,CACV,EACD,OAAO,EAAE,OAAO,KACZ,IAAI,YAER,MAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,aACrC,KAAC,QAAQ,IACP,SAAS,EAAC,MAAM,EAChB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,eAAe,EAAC,GAAG,EACnB,SAAS,EAAE,KAAK,EAChB,KAAK,EAAE,KAAK,GACZ,EACF,eAAK,SAAS,EAAC,+CAA+C,aAC3D,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACd,KAAC,IAAI,IAAC,SAAS,EAAC,qBAAqB,EAAC,aAAa,EAAC,cAAc,EAAC,KAAK,EAAE,KAAK,GAAI,CACpF,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,WAAW,GAAI,CAAC,CAAC,CAAC,IAAI,IAC9E,EACL,eAAe,CAAC,IAAI,CAAC,IACV,GACD,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,IAAyB,EAAE,EAAE,CAAC,CACrD,eAAK,SAAS,EAAC,2BAA2B,aACvC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,KAAC,GAAG,IAAC,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,EAAE,KAAK,SAAG,CAAC,CAAC,CAAC,IAAI,EAClE,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,KAAC,GAAG,IAAC,KAAK,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI,IACpC,CACP,CAAC"}

package/mobile/lib/components/CarouselRecommendationCard/CarouselRecommendationCardContent.d.ts

@@ -5,6 +5,7 @@ import type { LinkCommonProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 export declare type RecommendationSocialMedia = LinkCommonProps & IconProps & ButtonWithIconProps & {
     version: ButtonVersion;
     rounded?: boolean;
@@ -15,4 +16,5 @@ export declare type RecommendationSocialMedia = LinkCommonProps & IconProps & Bu
 export declare type CarouselRecommendationCardContent = UniBlockContent & HeadlineCommonProps & ListContent & IconProps & LinkCommonProps & {
     /** @title Соц сети */
     socialMedia?: RecommendationSocialMedia[];
+    align?: TextAlign;
 };

package/mobile/lib/components/StepsBlock/StepsBlockContent.d.ts

@@ -1,6 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { BulletsProps } from '../../model/Bullets';
 import type { ButtonCommonIconProps } from '../../model/Button';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { DefaultListItemType } from '../../model/DefaultListItemType';
 import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
@@ -27,7 +28,7 @@ export declare type Step = DefaultStep | RichTextStep;
 /**
  * @title Блок шаги
  */
-export declare type StepsBlockContent = UniBlockContent & HeadlineCommonProps & ButtonCommonIconProps & {
+export declare type StepsBlockContent = UniBlockContent & HeadlineCommonProps & {
     /** @title Линии */
     showLines?: boolean;
     /**
@@ -36,8 +37,16 @@ export declare type StepsBlockContent = UniBlockContent & HeadlineCommonProps &
      * @maxItems 5
      */
     steps?: Step[];
+    /**
+     * @title Тема шагов
+     */
     stepVersion?: BlockVersion;
     /** @title Размер шагов */
     size?: SizeVersion;
+    /**
+     * @title Кнопки
+     * @maxItems 2
+     */
+    buttons?: ButtonWithIconProps[];
 };
 export {};

package/mobile/lib/components/StepsBlock/StepsBlockStyleMaps.js

@@ -1,6 +1,6 @@
 export const STEPS_BLOCK_STYLE = {
-    description: 'text-white/80 text-l-light group-data-primary:text-secondary-text',
-    iconText: 'text-white group-data-primary:text-secondary-text',
+    description: 'text-white/80 text-l-light group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
+    iconText: 'text-white group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
     iconBackground: 'bg-white/30 group-data-primary:bg-main-divider',
     iconConnector: 'bg-white group-data-primary:bg-secondary-light',
     dot: 'bg-white/80 group-data-primary:bg-secondary-text',

package/mobile/lib/components/StepsBlock/StepsBlockStyleMaps.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepsBlockStyleMaps.js","sourceRoot":"","sources":["../../../src/components/StepsBlock/StepsBlockStyleMaps.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,MAAM,iBAAiB,GAAc;IAC1C,WAAW,EAAE,mEAAmE;IAChF,QAAQ,EAAE,mDAAmD;IAC7D,cAAc,EAAE,gDAAgD;IAChE,aAAa,EAAE,gDAAgD;IAC/D,GAAG,EAAE,kDAAkD;CACxD,CAAC"}
+{"version":3,"file":"StepsBlockStyleMaps.js","sourceRoot":"","sources":["../../../src/components/StepsBlock/StepsBlockStyleMaps.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,MAAM,iBAAiB,GAAc;IAC1C,WAAW,EACT,uGAAuG;IACzG,QAAQ,EAAE,uFAAuF;IACjG,cAAc,EAAE,gDAAgD;IAChE,aAAa,EAAE,gDAAgD;IAC/D,GAAG,EAAE,kDAAkD;CACxD,CAAC"}

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -18,6 +18,7 @@
     },
     "title": "Заголовок 1",
     "description": "Описание 1",
+    "align": "text-left",
     "socialMedia": [
       {
         "href": "https://t.me",

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -2,22 +2,18 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
+import { Headline } from '../Headline/Headline';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 
 const BORDER_STYLE =
   'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
 
-const setAdditionalIconStyles = (items: string[]) =>
-  items.length ? 'w-1/2 flex-1 justify-center' : 'w-full justify-end';
-
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 
 export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
@@ -30,13 +26,14 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     socialMedia = [],
     target,
     title,
+    align = 'text-left',
     version = 'primary',
     ...rest
   }) => {
     return (
       <BlockWrapper
         className={style(
-          'relative p-12 min-w-[524px] h-full box-border group-data-gray:bg-main-divider/50',
+          'relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50',
           BORDER_STYLE,
           className,
         )}
@@ -44,42 +41,29 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
         {...rest}
       >
         <LinkWrapper href={href} target={target}>
-          {title ? (
-            <Heading headingType="h3" as="h3" className="text-center mb-8" title={title} />
-          ) : null}
-          <div className="mb-5">
-            {description ? (
-              <Paragraph
-                size="text-xl"
-                font="font-light"
-                color="group-data-gray:text-secondary-text"
-              >
-                {description}
-              </Paragraph>
+          <Headline
+            className="mb-4"
+            title={title}
+            description={description}
+            headlineVersion="S"
+            isPadding={false}
+            align={align}
+          />
+          <div className="w-1/2 h-full flex flex-col flex-1 justify-end">
+            {items.length ? (
+              <List className="flex flex-col gap-2" itemClassName="text-l-light" items={items} />
             ) : null}
+            {socialMedia.length ? <SocialMedia className="pt-10" media={socialMedia} /> : null}
           </div>
-          <div className="flex">
-            <div
-              className={style(
-                'flex flex-col w-1/2',
-                items?.length ? 'justify-between' : 'justify-end',
-              )}
-            >
-              {items.length ? (
-                <List className="text-xl-light flex flex-col gap-2 mt-14" items={items} />
-              ) : null}
-              {socialMedia.length ? <SocialMedia className="pb-0" media={socialMedia} /> : null}
-            </div>
-            {renderIconBlock(icon, items)}
-          </div>
+          {renderIconBlock(icon)}
         </LinkWrapper>
       </BlockWrapper>
     );
   },
 );
 
-const renderIconBlock = (icon: Picture | undefined, items: string[]) => (
-  <div className={style('flex', setAdditionalIconStyles(items))}>
+const renderIconBlock = (icon: Picture | undefined) => (
+  <div className="absolute bottom-0 right-0">
     {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
     {icon?.src ? <Img image={icon} /> : null}
   </div>

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -5,6 +5,7 @@ import type { LinkCommonProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 export type RecommendationSocialMedia = LinkCommonProps &
   IconProps &
@@ -23,4 +24,5 @@ export type CarouselRecommendationCardContent = UniBlockContent &
   LinkCommonProps & {
     /** @title Соц сети */
     socialMedia?: RecommendationSocialMedia[];
+    align?: TextAlign;
   };

package/mobile/src/components/StepsBlock/StepsBlock.example.json

@@ -63,11 +63,13 @@
         }
       }
     ],
-    "button": {
-      "text": "Кнопка",
-      "target": "_blank",
-      "version": "primary"
-    },
+    "buttons": [
+      {
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary"
+      }
+    ],
     "isDotted": true
   }
 }

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

@@ -1,5 +1,15 @@
 {
   "content": {
+    "buttons": {
+      "items": {
+        "icon": {
+          "ui:field": "icon"
+        },
+        "iconRight": {
+          "ui:field": "icon"
+        }
+      }
+    },
     "steps": {
       "items": {
         "icon": {

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,6 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { BulletsProps } from '../../model/Bullets';
 import type { ButtonCommonIconProps } from '../../model/Button';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { DefaultListItemType } from '../../model/DefaultListItemType';
 import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
@@ -33,8 +34,7 @@ export type Step = DefaultStep | RichTextStep;
  * @title Блок шаги
  */
 export type StepsBlockContent = UniBlockContent &
-  HeadlineCommonProps &
-  ButtonCommonIconProps & {
+  HeadlineCommonProps & {
     /** @title Линии */
     showLines?: boolean;
     /**
@@ -43,7 +43,15 @@ export type StepsBlockContent = UniBlockContent &
      * @maxItems 5
      */
     steps?: Step[];
+    /**
+     * @title Тема шагов
+     */
     stepVersion?: BlockVersion;
     /** @title Размер шагов */
     size?: SizeVersion; // TODO: mobile content
+    /**
+     * @title Кнопки
+     * @maxItems 2
+     */
+    buttons?: ButtonWithIconProps[];
   };

package/mobile/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -7,8 +7,9 @@ export type StyleType = {
 };
 
 export const STEPS_BLOCK_STYLE: StyleType = {
-  description: 'text-white/80 text-l-light group-data-primary:text-secondary-text',
-  iconText: 'text-white group-data-primary:text-secondary-text',
+  description:
+    'text-white/80 text-l-light group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
+  iconText: 'text-white group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
   iconBackground: 'bg-white/30 group-data-primary:bg-main-divider',
   iconConnector: 'bg-white group-data-primary:bg-secondary-light',
   dot: 'bg-white/80 group-data-primary:bg-secondary-text',

package/package.json

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

package/src/components/Blocks.ts

@@ -42,7 +42,6 @@ import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
-import { Recommendation } from './Recommendation/Recommendation';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
@@ -99,7 +98,6 @@ export const Blocks: BlocksRegistry = {
   ProductGallery,
   ProductTile,
   PromoTile,
-  Recommendation,
   RichTextBlock,
   RollupItem,
   SafeDepositRental,

package/src/components/Carousel/Carousel.fixture.tsx

@@ -8,7 +8,10 @@ import { CAROUSEL_EVENT_CARD } from '../CarouselEventCard/CarouselEventCard.fixt
 import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
 import { PRODUCT_CARD } from '../CarouselProductCard/CarouselProductCard.fixture';
 import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
-import { CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
+import {
+  CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
+  CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST,
+} from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { Carousel } from './Carousel';
 
@@ -165,7 +168,7 @@ export default {
         className="col-span-12"
         isBlur={false}
         isCyclic={false}
-        visibleItemCount={2}
+        visibleItemCount={0}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
@@ -178,6 +181,26 @@ export default {
       />
     </div>
   ),
+  recommendationsSecondary: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        isBlur={false}
+        isCyclic={false}
+        visibleItemCount={0}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6).fill({
+            type: 'CarouselRecommendationCard',
+            content: CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
+            style: ['col-span-2'],
+          }),
+        }}
+        options={options}
+      />
+    </div>
+  ),
+
   events: (
     <div className="container grid grid-cols-12">
       <Carousel

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -18,6 +18,7 @@
     },
     "title": "Заголовок 1",
     "description": "Описание 1",
+    "align": "text-left",
     "socialMedia": [
       {
         "href": "https://t.me",

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx

@@ -1,11 +1,11 @@
 import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
+import { Icon } from '../../ui-kit/Icon/Icon';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard';
 import type {
   CarouselRecommendationCardContent,
   RecommendationSocialMedia,
 } from './CarouselRecommendationCardContent';
-import { Icon } from '../../ui-kit/Icon/Icon';
 
 const icon: Picture = {
   src: 'product-basket.png',
@@ -92,6 +92,23 @@ export const CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST: CarouselRecommendationCa
   socialMedia: socialMediaWithoutText,
 };
 
+export const CAROUSEL_RECOMMENDATION_CARD_SECONDARY: CarouselRecommendationCardContent = {
+  title: 'Россельхозбанк',
+  description: 'Описание',
+  align: 'text-left',
+  icon: {
+    src: 'cow-card.png',
+    format: 'webp',
+    size: {
+      width: 290,
+      height: 290,
+    },
+  },
+  items: ['Свежие новости', 'Акции и предложенияа', 'Ставки и катировки'],
+  version: 'secondary',
+  socialMedia: socialMediaWithoutText,
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12 mb-1">
@@ -107,6 +124,16 @@ export default {
       />
     </div>
   ),
+  secondaryCenter: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        version="secondary"
+        align="text-center"
+        {...CAROUSEL_RECOMMENDATION_CARD_SECONDARY}
+      />
+    </div>
+  ),
   gray: (
     <div className="container grid grid-cols-12 mb-1">
       <CarouselRecommendationCard

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -2,22 +2,18 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
+import { Headline } from '../Headline/Headline';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 
 const BORDER_STYLE =
   'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
 
-const setAdditionalIconStyles = (items: string[]) =>
-  items.length ? 'w-1/2 flex-1 justify-center' : 'w-full justify-end';
-
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 
 export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
@@ -30,13 +26,14 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     socialMedia = [],
     target,
     title,
+    align = 'text-left',
     version = 'primary',
     ...rest
   }) => {
     return (
       <BlockWrapper
         className={style(
-          'relative p-12 min-w-[524px] h-full box-border group-data-gray:bg-main-divider/50',
+          'relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50',
           BORDER_STYLE,
           className,
         )}
@@ -44,42 +41,29 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
         {...rest}
       >
         <LinkWrapper href={href} target={target}>
-          {title ? (
-            <Heading headingType="h3" as="h3" className="text-center mb-8" title={title} />
-          ) : null}
-          <div className="mb-5">
-            {description ? (
-              <Paragraph
-                size="text-xl"
-                font="font-light"
-                color="group-data-gray:text-secondary-text"
-              >
-                {description}
-              </Paragraph>
+          <Headline
+            className="mb-4"
+            title={title}
+            description={description}
+            headlineVersion="S"
+            isPadding={false}
+            align={align}
+          />
+          <div className="w-1/2 h-full flex flex-col flex-1 justify-end">
+            {items.length ? (
+              <List className="flex flex-col gap-2" itemClassName="text-l-light" items={items} />
             ) : null}
+            {socialMedia.length ? <SocialMedia className="pt-10" media={socialMedia} /> : null}
           </div>
-          <div className="flex">
-            <div
-              className={style(
-                'flex flex-col w-1/2',
-                items?.length ? 'justify-between' : 'justify-end',
-              )}
-            >
-              {items.length ? (
-                <List className="text-xl-light flex flex-col gap-2 mt-14" items={items} />
-              ) : null}
-              {socialMedia.length ? <SocialMedia className="pb-0" media={socialMedia} /> : null}
-            </div>
-            {renderIconBlock(icon, items)}
-          </div>
+          {renderIconBlock(icon)}
         </LinkWrapper>
       </BlockWrapper>
     );
   },
 );
 
-const renderIconBlock = (icon: Picture | undefined, items: string[]) => (
-  <div className={style('flex', setAdditionalIconStyles(items))}>
+const renderIconBlock = (icon: Picture | undefined) => (
+  <div className="absolute bottom-0 right-0">
     {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
     {icon?.src ? <Img image={icon} /> : null}
   </div>

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -5,6 +5,7 @@ import type { LinkCommonProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 export type RecommendationSocialMedia = LinkCommonProps &
   IconProps &
@@ -23,4 +24,5 @@ export type CarouselRecommendationCardContent = UniBlockContent &
   LinkCommonProps & {
     /** @title Соц сети */
     socialMedia?: RecommendationSocialMedia[];
+    align?: TextAlign;
   };

package/src/components/StepsBlock/StepsBlock.example.json

@@ -63,11 +63,13 @@
         }
       }
     ],
-    "button": {
-      "text": "Кнопка",
-      "target": "_blank",
-      "version": "primary"
-    },
+    "buttons": [
+      {
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary"
+      }
+    ],
     "isDotted": true
   }
 }

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

@@ -83,11 +83,14 @@ const STEPS_WITH_BUTTON_PROPS: StepsBlockProps = {
   ...COMMON_PROPS,
   steps: STEPS.map((step) => ({
     ...step,
-    button: { text: 'Оформить' },
   })),
   title: TITLE,
   stepVersion: 'primary',
   size: 'small',
+  buttons: [
+    { text: 'Оформить', version: 'primary' },
+    { text: 'Оформить', version: 'primary' },
+  ],
 };
 
 export default {
@@ -108,13 +111,16 @@ export default {
         showLines={false}
         steps={STEPS_WITH_ICONS}
         version="secondary"
-        button={{
-          text: 'Отправить заявку',
-          href: 'https://www.rshb.ru/',
-          target: '_blank',
-          icon: { icon: 'ComfortableCompIcon' },
-          iconRight: { icon: 'ComfortableCompIcon' },
-        }}
+        buttons={[
+          {
+            text: 'Отправить заявку',
+            href: 'https://www.rshb.ru/',
+            target: '_blank',
+            icon: { icon: 'ComfortableCompIcon' },
+            iconRight: { icon: 'ComfortableCompIcon' },
+            version: 'secondary',
+          },
+        ]}
       />
     </div>
   ),

package/src/components/StepsBlock/StepsBlock.tsx

@@ -25,7 +25,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
     className = '',
     showLines = true,
     steps = [],
-    button,
+    buttons,
     size = 'normal',
     version = 'primary',
     stepVersion = 'gray',
@@ -39,6 +39,8 @@ export const StepsBlock = JSX<StepsBlockProps>(
     const lineOpacity = getLineOpacity(showLines);
     const paddingX = getPaddingX(steps.length);
 
+    const isMainButton = Boolean(buttons?.every((b) => b?.text));
+
     return (
       <BlockWrapper
         className={style(
@@ -66,11 +68,11 @@ export const StepsBlock = JSX<StepsBlockProps>(
                 shortGaps ? 'gap-x-3' : 'gap-x-[101px]',
               )}
             >
-              {steps.map(renderStep({ styleMap, isMainButton: Boolean(button?.text), version }))}
+              {steps.map(renderStep({ styleMap, isMainButton, version }))}
             </div>
           </div>
         ) : null}
-        {button?.text ? renderButtonsSection([button], { className: 'mt-8 min-w-60' }) : null}
+        {renderButtonsSection(buttons, { className: 'mt-8' })}
       </BlockWrapper>
     );
   },
@@ -80,6 +82,8 @@ const renderStepIcon =
   (styleMap: StyleType, size: string, stepVersion: BlockVersion) =>
   ({ icon }: Step, i: number) => {
     const styleStepIconSize = size === 'normal' ? 'h-[100px] w-[100px]' : 'h-[63px] w-[63px]';
+    const stepVersionIconTextStyles =
+      stepVersion === 'secondary' ? 'group-data-primary:text-white' : 'text-secondary-text';
 
     return (
       <BlockWrapper
@@ -90,7 +94,12 @@ const renderStepIcon =
         {checkCanRenderIcon(icon) ? (
           <Img image={getIconWithVersion(icon || {}, stepVersion)} width="48" height="48" asSVG />
         ) : (
-          <span className={`text-h4 group-data-transparent:${styleMap.iconText} text-primary-text`}>
+          <span
+            className={style(
+              'text-h4',
+              stepVersion === 'transparent' ? styleMap.iconText : stepVersionIconTextStyles,
+            )}
+          >
             {i + 1}
           </span>
         )}