@redneckz/wildless-cms-uni-blocks 0.6.50 → 0.7.2

package/src/components/CarouselCard/CarouselCard.fixture.tsx

@@ -13,21 +13,21 @@ export const CARD: CarouselCardContent = {
   title: 'Хочешь попасть на практику в РСХБ?',
   description: 'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты.',
   button,
-  version: 'normal',
+  carouselVersion: 'normal',
 };
 
 export const CARD_NEW: CarouselCardContent = {
   title: 'РСХБ?',
   description: 'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты.',
   button,
-  version: 'normal',
+  carouselVersion: 'normal',
 };
 
 export const CARD_MINI: CarouselCardContent = {
   title: 'Хочешь попасть на практику в РСХБ?',
   description: 'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты.',
   button,
-  version: 'mini',
+  carouselVersion: 'mini',
 };
 
 export default {

package/src/components/CarouselCard/CarouselCard.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Headline } from '../Headline/Headline';
 import type { CarouselCardContent } from './CarouselCardContent';
 
@@ -10,20 +10,28 @@ export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
 
 const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
-  normal: 'min-w-[1007px]',
+  normal: 'min-w-[970px]',
   mini: 'min-w-[355px]',
 };
 
 export const CarouselCard = JSX<CarouselCardProps>(
-  ({ className = '', button, description, title, version = 'normal' }) => (
-    <section className={`flex pb-9 pl-12 ${CARD_WIDTH_MAP[version]} ${className}`}>
+  ({ className = '', button, description, title, carouselVersion = 'normal' }) => (
+    <section
+      className={`flex pb-9 pl-12 border-box ${CARD_WIDTH_MAP[carouselVersion]} ${className}`}
+    >
       <div className="relative w-full">
         <div className={`${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark`} />
         <div className={`${BLOCK_CLASSES} z-10 top-6 right-8 bg-green`} />
         <div className={`${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light`} />
-        <div className="relative bg-white z-10 py-6 px-10 border border-solid border-green-light">
-          <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
-          {button ? <div className="mt-6">{renderButton({ button })}</div> : null}
+        <div className="relative bg-white z-10 p-10 border border-solid border-green-light">
+          <Headline
+            className="!p-0"
+            title={title}
+            description={description}
+            headlineVersion="L"
+            align="text-left"
+          />
+          {renderButtonsSection([button], { className: 'mt-14' })}
         </div>
       </div>
     </section>

package/src/components/CarouselCard/CarouselCardContent.ts

@@ -14,5 +14,5 @@ export interface CarouselCardContent extends HeadlineCommonProps {
    * }
    */
   button?: ButtonWithIconProps;
-  version?: CarouselCardVersion;
+  carouselVersion?: CarouselCardVersion;
 }

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -1,18 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionStyleMap } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 import type { CarouselCatalogCardContent } from './CarouselCatalogCardContent';
 
-export interface CarouselCatalogCardProps extends CarouselCatalogCardContent {
-  className?: string;
-  version?: BlockVersion;
-}
+export interface CarouselCatalogCardProps extends CarouselCatalogCardContent, UniBlockProps {}
 
 const cardStyleMap: Record<ProductColorVersion, string> = {
   black: 'bg-black',
@@ -20,10 +17,11 @@ const cardStyleMap: Record<ProductColorVersion, string> = {
 };
 
 export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
-  ({ className = '', title, description, image, price, button, colors, version = 'primary' }) => (
-    <section
-      className={`border box-border border-gray p-7 min-w-[392px] flex flex-col justify-left ${VersionStyleMap[version]} ${className}`}
+  ({ className = '', title, description, image, price, button, colors, ...rest }) => (
+    <BlockWrapper
+      className={`border box-border border-gray p-7 min-w-[392px] flex flex-col justify-left ${className}`}
       role="listitem"
+      {...rest}
     >
       {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}
       {title ? (
@@ -49,8 +47,8 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
           {price}&nbsp;₽
         </Text>
       ) : null}
-      {button ? renderButton({ button, buttonClassName: 'mt-5 w-full' }) : null}
-    </section>
+      {renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })}
+    </BlockWrapper>
   ),
 );
 

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -1,12 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { VersionAdditionalStyleMap, VersionStyleMap } from '../../model/BlockVersion';
-import { BorderVersionStyleMap } from '../../model/BorderVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
-import type { TextColor } from '../../ui-kit/Text/TextProps';
 import { BaseTile } from '../BaseTile/BaseTile';
 import type {
   CardColumnsMode,
@@ -19,8 +16,8 @@ export interface CarouselInvestmentCardProps extends CarouselInvestmentCardConte
 const getItemListFontSize = (colValue?: number) => (colValue === 1 ? 'text-h6' : 'text-l');
 
 const cardColumnsModeStyleMap: Record<CardColumnsMode, string> = {
-  1: 'flex gap-y-2 flex-col',
-  2: 'flex gap-y-2 gap-x-10 flex-wrap',
+  1: 'flex-col',
+  2: 'gap-x-10 flex-wrap',
 };
 
 export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
@@ -32,7 +29,6 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
     description,
     image,
     title,
-    version = 'primary',
     ...rest
   }) => {
     const tileTitle = title ? (
@@ -46,9 +42,8 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
     return (
       <BlockWrapper
         className={[
-          'relative text-left border border-solid box-border p-9 w-[697px]',
-          VersionStyleMap[version],
-          BorderVersionStyleMap[version],
+          'relative box-border text-left p-9 w-[697px]',
+          'border border-solid border-gray group-data-secondary:border-white/50',
           className,
         ].join(' ')}
         {...rest}
@@ -61,17 +56,15 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
               </div>
             ) : null}
             {additionalDescription ? (
-              <Text
-                size="text-m"
-                font="font-light"
-                color={VersionAdditionalStyleMap[version] as TextColor}
-              >
+              <Text size="text-m" font="font-light" color="group-data-primary:text-secondary-text">
                 {additionalDescription}
               </Text>
             ) : null}
           </div>
           {cardsList.length ? (
-            <ul className={`list-none m-0 p-0 ${cardColumnsModeStyleMap[columnsMode]}`}>
+            <ul
+              className={`list-none m-0 p-0 flex gap-y-2 ${cardColumnsModeStyleMap[columnsMode]}`}
+            >
               {renderCardList(cardsList, columnsMode)}
             </ul>
           ) : null}

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -13,20 +13,28 @@ export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps
 const MAX_LINKS_COUNT = 12;
 
 export const CarouselLinks = JSX<CarouselLinksProps>(
-  ({ className = '', additionalDescription, description, links, title, ...rest }) => {
+  ({
+    className = '',
+    additionalDescription,
+    description,
+    links,
+    title,
+    version = 'secondary',
+    ...rest
+  }) => {
     return (
       <BlockWrapper
-        className={`bg-primary-main flex w-full p-10 overflow-hidden justify-between font-sans ${className}`}
+        className={`flex w-full p-10 overflow-hidden justify-between ${className}`}
+        version={version}
         {...rest}
       >
         <div className="flex flex-col max-w-96 pr-9 text-white text-xl-light">
           <Headline
+            className="p-0"
             title={title}
-            as="h1"
             description={description}
+            as="h1"
             align="text-left"
-            className="p-0"
-            bgColorHeadline="secondary"
           />
           {additionalDescription ? (
             <div className="pt-6">
@@ -45,6 +53,7 @@ const renderLinks = (links: LinkProps[]) => {
 
   return (
     <Carousel
+      version=""
       className="min-w-[832px] w-[832px]"
       isBlur={false}
       isCyclic={true}

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -1,29 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { style } from '../../utils/style';
 import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
 
-const descriptionStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white/80',
-};
-
-const BORDER_STYLE = 'box-border border-solid border border-gray ';
-
 export const CarouselProductCard = JSX<CarouselProductCardProps>(
   ({
+    className = '',
     title,
     headlineSmallVersion = 'H6',
     description,
@@ -33,40 +26,39 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
     button = {},
     version = 'primary',
     isDotted = true,
-    align = 'center',
+    align = 'text-center',
+    ...rest
   }) => {
     return (
-      <section
-        className={[
+      <BlockWrapper
+        className={style(
           'flex flex-col justify-between items-stretch min-w-[260px] h-full w-full p-6',
-          BORDER_STYLE,
-          AlignText[align],
-          VersionStyleMap[version],
-        ].join(' ')}
+          'box-border border-solid border border-gray',
+          align,
+          className,
+        )}
         role="listitem"
+        version={version}
+        {...rest}
       >
         <div className="flex flex-col h-full">
-          {renderImage(icon, version)}
+          {renderImage(icon)}
           {renderCardTitle(headlineSmallVersion, title)}
           {renderDescription(description, title)}
           {renderItems(items, isDotted, version)}
-          {renderAdditionalDescription(additionalDescription, version)}
+          {renderAdditionalDescription(additionalDescription)}
         </div>
-        {renderButton({ button, buttonClassName: 'mt-6' })}
-      </section>
+        {renderButtonsSection([button], { buttonClassName: 'mt-6 w-full' })}
+      </BlockWrapper>
     );
   },
 );
 
-const renderImage = (image?: Picture, version?: BlockVersion) => (
+const renderImage = (image?: Picture) => (
   <div className="flex justify-center">
     {image?.src ? <Img className="mb-5" image={image} /> : null}
     {image?.icon ? (
-      <Img
-        className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`}
-        image={getIconWithVersion(image, version)}
-        asSVG
-      />
+      <Img className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`} image={image} asSVG />
     ) : null}
   </div>
 );
@@ -81,10 +73,14 @@ const renderDescription = (description?: string, title?: string) =>
     </div>
   ) : null;
 
-const renderAdditionalDescription = (additionalDescription?: string, version = 'primary') =>
+const renderAdditionalDescription = (additionalDescription?: string) =>
   additionalDescription ? (
     <div className="mt-auto">
-      <Text size="text-m" font="font-light" color={descriptionStyleMap[version]}>
+      <Text
+        size="text-m"
+        font="font-light"
+        color="text-secondary-text group-data-secondary:text-white/80"
+      >
         {additionalDescription}
       </Text>
     </div>
@@ -97,6 +93,5 @@ const renderItems = (items: ListProps[], isDotted: boolean, version: BlockVersio
       itemClassName="text-left"
       items={items.filter((item) => item?.text).map((item) => item.text as string)}
       isDotted={isDotted}
-      version={version}
     />
   ) : null;

package/src/components/CarouselProductCard/CarouselProductCardContent.ts

@@ -1,8 +1,8 @@
-import type { AlignType } from '../../model/AlignType';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineSmallProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Элемент списка
@@ -45,7 +45,7 @@ export type CarouselProductCardContent = HeadlineSmallProps & {
   version?: BlockVersion;
   /**
    * @title Выравнивание
-   * @default center
+   * @default text-center
    */
-  align?: AlignType;
+  align?: TextAlign;
 };

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -11,12 +10,9 @@ import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent'
 export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
 
 export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (
-    <BlockWrapper
-      className={`font-sans border border-gray flex min-w-[536px] ${VersionStyleMap[version]} ${className}`}
-      {...rest}
-    >
-      <div className="w-[200px] min-w-[200px] self-end">
+  ({ className = '', title, icon, list = [], ...rest }) => (
+    <BlockWrapper className={`border border-gray flex min-w-[536px] ${className}`} {...rest}>
+      <div className="w-[200px] min-w-[200px] self-center">
         {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
         {icon?.src ? <Img image={icon} /> : null}
       </div>

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -1,17 +1,14 @@
-import { BaseTile } from '../BaseTile/BaseTile';
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { BorderVersionStyleMap } from '../../model/BorderVersion';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { JSX } from '@redneckz/uni-jsx';
 import { List } from '../../ui-kit/List/List';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { BaseTile } from '../BaseTile/BaseTile';
 import { SocialMedia } from '../Footer/SocialMedia';
-import type { BlockVersion, BlockVersionWithGray } from '../../model/BlockVersion';
-import { VersionWithGrayStyleMap } from '../../model/BlockVersion';
-
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
-import type { UniBlockProps } from '../../model/JSXBlock';
+import { style } from '../../utils/style';
 
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 
@@ -24,7 +21,6 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     items = [],
     socialMedia = [],
     title,
-    version = 'primary',
     ...rest
   }) => {
     const tileTitle = title ? (
@@ -33,13 +29,16 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     const tileImage = image?.src ? (
       <Img className="absolute bottom-0 right-0 m-0" image={image} />
     ) : null;
+    const BORDER_STYLE =
+      'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
 
     return (
       <BlockWrapper
-        className={`relative text-left border border-solid box-border p-7 min-w-[524px]
-        ${BorderVersionStyleMap[getOmitVersion(version)]}
-        ${VersionWithGrayStyleMap[version]}
-        ${className}`}
+        className={style(
+          'relative p-7 min-w-[524px] text-left box-border group-data-gray:bg-main-divider/50',
+          BORDER_STYLE,
+          className,
+        )}
         {...rest}
       >
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
@@ -49,23 +48,13 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
               <List
                 className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
                 items={items}
-                version={version}
               />
             ) : null}
-            {socialMedia.length ? (
-              <SocialMedia
-                className="pt-10 pb-0"
-                media={socialMedia}
-                version={getOmitVersion(version)}
-              />
-            ) : null}
-            {button?.text ? <div className="pt-2 mt-16">{renderButton({ button })}</div> : null}
+            {socialMedia.length ? <SocialMedia className="pt-10 pb-0" media={socialMedia} /> : null}
+            {renderButtonsSection([button], { className: 'pt-2 mt-16' })}
           </div>
         </BaseTile>
       </BlockWrapper>
     );
   },
 );
-
-const getOmitVersion = (version: BlockVersionWithGray): BlockVersion =>
-  version === 'gray' ? 'primary' : version;

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -1,4 +1,3 @@
-import type { BlockVersionWithGray } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
@@ -41,5 +40,4 @@ export interface CarouselRecommendationCardContent extends HeadlineCommonProps,
    * }
    */
   button?: ButtonProps;
-  version?: BlockVersionWithGray;
 }

package/src/components/CarouselTariffsCard/CarouselTariffsCard.example.json

@@ -1,13 +1,21 @@
 {
-  "title": "Заголовок",
+  "title": "Заголовок карточки",
   "button": {
     "href": "",
     "text": "Кнопка",
     "target": "_self",
-    "version": "primary"
+    "version": "secondary"
+  },
+  "icon": {
+    "icon": "",
+    "format": "webp",
+    "size": {
+      "width": 267,
+      "height": 73
+    }
   },
   "isHighlighting": false,
-  "rows": [
+  "cardCells": [
     {
       "title": "Ячейка 1-1",
       "description": "Описание 1-1"

package/src/components/CarouselTariffsCard/CarouselTariffsCard.fixture.tsx

@@ -27,7 +27,7 @@ const buttonSecondary: ButtonProps = {
   version: 'secondary',
 };
 
-const rows = [
+const cardCells = [
   { title: 'Открытие расчетного счета', description: 'Бесплатно' },
   { title: 'Внутрибанковские платежи', description: '0 ₽' },
   { title: 'Внешние платежи, до 10 шт.', description: '0 ₽' },
@@ -43,14 +43,14 @@ export const TARIFFS_CARD: CarouselTariffsCardContent = {
   title: 'Расчётный эконом',
   icon: imageMonth,
   button: buttonSecondary,
-  rows,
+  cardCells,
 };
 
 export const TARIFFS_CARD_HIT: CarouselTariffsCardContent = {
   icon: imageMonth,
   title: 'Расчётный эконом',
   button,
-  rows,
+  cardCells,
   isHighlighting: true,
 };
 

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,49 +1,53 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { VNode } from '../../model/VNode';
+import type { Picture } from '../../model/Picture';
+import type { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
+import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { style } from '../../utils/style';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
-const VISIBLE_ROWS_COUNT = 1;
+const VISIBLE_CELLS_COUNT = 1;
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, isHighlighting, button, rows = [], ...rest }) => {
-    const rowsNode = rows.map(renderCardInfo);
-    const visibleRows = rowsNode.slice(0, VISIBLE_ROWS_COUNT);
-    const hiddenRows = rowsNode.slice(VISIBLE_ROWS_COUNT);
+  ({ className = '', title, icon, isHighlighting, button, cardCells = [], ...rest }) => {
+    const cellsNode = cardCells.map(renderCardInfo);
+    const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
+    const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
 
     return (
       <BlockWrapper
-        className={`font-sans relative bg-white border border-gray min-w-[322px] p-8
-        ${getHitStyle(isHighlighting)}
-        ${className}`}
+        className={style(
+          'relative border border-gray min-w-[322px] p-8 flex flex-col',
+          getHitStyle(isHighlighting),
+          className,
+        )}
         {...rest}
       >
         {isHighlighting ? renderHitIcon() : null}
-        {icon?.src ? <Img image={icon} /> : null}
-        {title ? (
-          <Heading className="text-primary-text text-center pt-2" headingType="h5" title={title} />
-        ) : null}
+        {renderIconBlock(icon)}
+        {title ? <Heading className="text-center pt-2" headingType="h5" title={title} /> : null}
         {button ? <Button className="w-full mt-4" {...button} /> : null}
-        {rows.length ? (
+        {cardCells.length ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (
               <div>
-                {visibleRows}
-                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+                {visibleCells}
+                <FoldableSection isUnfolded={isUnfolded}>{hiddenCells}</FoldableSection>
               </div>
             )}
-            renderFoldButton={rows.length > 1 ? renderFoldButton : null}
+            renderFoldButton={cardCells.length > 1 ? renderFoldButton : null}
           />
         ) : null}
       </BlockWrapper>
@@ -51,8 +55,15 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   },
 );
 
+const renderIconBlock = (icon?: Picture) => (
+  <div className="w-[267px] min-w-[267px] self-center">
+    {icon?.src ? <Img image={icon} /> : null}
+    {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+  </div>
+);
+
 const getHitStyle = (isHighlighting?: boolean): string =>
-  isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-9';
+  isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-7';
 
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button
@@ -82,8 +93,10 @@ const renderCardInfo = (cell: HeadlineCommonProps, i: number): VNode => (
 );
 
 const renderHitIcon = (): VNode => (
-  <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+  <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
     <Icon iconVersion="black" name="HeartIcon" width="23" height="22" asSVG />
-    <div className="text-center">Хит</div>
+    <Paragraph size="text-s" font="font-normal" align="text-center" color="text-primary-text">
+      ХИТ
+    </Paragraph>
   </div>
 );

package/src/components/CarouselTariffsCard/CarouselTariffsCardContent.ts

@@ -12,5 +12,5 @@ export type CarouselTariffsCardContent = TitleProps & {
   /** @title Кнопка */
   button?: ButtonProps;
   /** @title Ячейка */
-  rows?: HeadlineCommonProps[];
+  cardCells?: HeadlineCommonProps[];
 };