@redneckz/wildless-cms-uni-blocks 0.13.3 → 0.13.4

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -53,16 +53,16 @@ const renderLinks = (links: LinkProps[], maxLinksCount: number) => {
 
   return (
     <Carousel
-      className="@container-normal sm:w-2/3 w-full p-0 sm:p-2xl"
+      className="sm:w-2/3 w-full p-0 sm:p-xs"
       version="secondary"
       itemCount={itemCount}
       arrowsPadded={false}
-      showDots={true}
+      showDots={false}
     >
       {new Array(itemCount).fill(null).map((_, groupIndex) => (
         <div
           key={String(groupIndex)}
-          className={style('flex flex-wrap self-start sm:w-[672px] w-full sm:mx-5xl')}
+          className={style('flex flex-wrap self-start w-full sm:w-[672px]')}
         >
           {links
             .slice(groupIndex * maxLinksCount, (groupIndex + 1) * maxLinksCount)

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -10,10 +10,8 @@ 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 { style } from '../../utils/style';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
-import { getPaddingStyle } from './getPaddingStyle';
 import { renderCardInfo } from './renderCardInfo';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
@@ -21,27 +19,13 @@ export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, Un
 const VISIBLE_CELLS_COUNT = 1;
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
-  ({
-    className = '',
-    title,
-    align = 'text-center',
-    icon,
-    isHighlighting = false,
-    button,
-    cardCells = [],
-    ...rest
-  }) => {
+  ({ className = '', title, align = 'text-center', icon, 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={style('relative flex flex-col', className)}
-        defaultPadding={getPaddingStyle(isHighlighting)}
-        {...rest}
-      >
-        {isHighlighting ? renderHitIcon() : null}
+      <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-3xl" {...rest}>
         {renderIconBlock(icon)}
         {title ? (
           <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
@@ -64,9 +48,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 );
 
 const renderIconBlock = (icon?: Picture) => (
-  <div className="basis-full self-center">
-    {icon?.src || icon?.icon ? <Img image={icon} /> : null}
-  </div>
+  <div className="self-center">{icon?.src || icon?.icon ? <Img image={icon} /> : null}</div>
 );
 
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
@@ -83,12 +65,3 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
     />
   </button>
 );
-
-const renderHitIcon = (): VNode => (
-  <div className="absolute -top-6 -right-4 h-14 w-14 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="24" height="24" />
-    <Paragraph size="text-s" font="font-normal" align="text-center" color="text-primary-text">
-      ХИТ
-    </Paragraph>
-  </div>
-);

package/mobile/src/components/MobileAppTile/MobileAppTile.tsx

@@ -3,13 +3,13 @@ import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 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 { style } from '../../utils/style';
 import type { MobileAppTileContent } from './MobileAppTileContent';
 import { renderDescription } from './renderDescription';
 import { renderList } from './renderList';
+import { buttonsConditionStyle } from './buttonsConditionStyle';
 
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
@@ -51,7 +51,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
             ) : null
           }
           rightImage={image?.src ? <Img className="hidden lg:block" image={image} /> : null}
-          buttons={renderButtonsSection(buttons, { isVertical: buttons.length > 4 })}
+          buttons={buttonsConditionStyle(buttons)}
         >
           {renderDescription(description)}
           <div className="flex flex-1 flex-wrap gap-m items-center">

package/mobile/src/components/MobileAppTile/buttonsConditionStyle.tsx

@@ -0,0 +1,12 @@
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { style } from '../../utils/style';
+
+export const buttonsConditionStyle = (buttons: ButtonProps[]) => {
+  const buttonsLengthMoreThanTwo = buttons.length > 2;
+
+  return renderButtonsSection(buttons, {
+    className: style(buttonsLengthMoreThanTwo ? 'w-full' : 'flex-nowrap'),
+    isVertical: buttonsLengthMoreThanTwo,
+  });
+};

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

@@ -2,33 +2,36 @@ import { JSX } from '@redneckz/uni-jsx';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 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 { IconBgVersion, IconName, IconProps } from '../../ui-kit/Icon/IconProps';
+import type { IconName, IconBgVersion, IconProps } from '../../ui-kit/Icon/IconProps';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { foldableSectionStyles } from './foldableSectionStyles';
 import { getIconName } from './getIconName';
-import { renderRoundedIcon } from './renderRoundedIcon';
 import { rollupIconVersion } from './rollupIconVersion';
 import type { RollupItemContent } from './RollupItemContent';
 import { rollupItemStyles } from './rollupItemStyles';
+import type { Picture } from '../../model/Picture';
+import { renderRoundedIcon } from './renderRoundedIcon';
 
-export interface RollupItemProps extends RollupItemContent, UniBlockProps {}
+interface RollupItemProps extends RollupItemContent, UniBlockProps {
+  labelIcon?: Picture;
+  labelIconBgVersion?: IconBgVersion;
+}
 
 export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
   ({
     className = '',
+    isExpanded,
+    isFoldButtonOnTop = true,
     label = 'Развернуть',
     labelIcon,
     labelIconBgVersion,
-    isExpanded,
-    isFoldButtonOnTop = true,
     version = 'primary',
     ...rest
   }) => {

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

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

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

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

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -17,7 +17,7 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
         {renderTotal('Аренда за', days)}
         {renderTotal('Цена', price + ' ₽')}
       </div>
-      <span className="sm:hidden order-3 mb-xs text-s-light text-secondary-text">
+      <span className="sm:hidden order-3 mb-xs text-s font-light text-secondary-text">
         {imageDescription}
       </span>
       <div className="flex flex-col items-center gap-s order-3 sm:order-none mb-xl sm:mb-0 bg-primary-main py-s sm:p-3xl text-center">

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

@@ -46,7 +46,7 @@ export const BaseTile = JSX<BaseTileProps>(
         {renderImageContainer(leftImage, { imageAlign })}
         <div
           className={style(
-            'flex flex-col gap-3xl max-w-[600px] xl:max-w-[728px]',
+            'flex flex-col gap-3xl max-w-[600px] @xl:max-w-[728px]',
             leftImage ? '' : 'grow',
           )}
         >
@@ -66,9 +66,20 @@ export const BaseTile = JSX<BaseTileProps>(
 const renderImageContainer = (
   image: VNode | undefined,
   { className, imageAlign }: { className?: string; imageAlign?: Align },
-) =>
-  image ? (
-    <div className={style('flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className)}>
+) => {
+  //TODO Спорное решение
+  const fullWidth = image?.props?.image.size?.width > 400;
+
+  return image ? (
+    <div
+      className={style(
+        'flex-shrink-0',
+        fullWidth ? 'w-full @xl:w-auto' : '',
+        imageAlign && imageAlignmentMap[imageAlign],
+        className,
+      )}
+    >
       {image}
     </div>
   ) : null;
+};

package/mobile/src/utils/style.ts

@@ -1,4 +1,5 @@
-type Atom = string | null | undefined;
+type Falsy = null | undefined | false | 0;
+type Atom = string | Falsy;
 
 export const style = (...atoms: Array<Atom | Atom[]>): string =>
   atoms

package/package.json

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

package/src/components/Bonus/Bonus.tsx

@@ -3,8 +3,8 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Headline } from '../Headline/Headline';
 import type { BonusContent, BonusCountDef, BonusImageDef } from './BonusContent';
 
@@ -12,7 +12,7 @@ export interface BonusProps extends BonusContent, UniBlockProps {}
 
 export const Bonus = JSX<BonusProps>(
   ({ className = '', title, description, bonusItems = [], ...rest }) => (
-    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <div className="container">
         <Headline
           className="mb-xl"
@@ -26,20 +26,23 @@ export const Bonus = JSX<BonusProps>(
             ? bonusItems.map((_, i) => (
                 <div
                   key={String(i)}
-                  className="space-y-xs flex-grow w-full sm:w-[49%] border border-gray p-m"
+                  className="space-y-xs flex flex-col grow w-full sm:w-[49%] border border-gray p-m"
                 >
-                  {_?.title ? (
-                    <div>
-                      <Text size="text-h4">{_.title}</Text>
-                    </div>
-                  ) : null}
-                  {_?.description ? (
-                    <Paragraph size="text-xl" font="font-light">
-                      {_.description}
-                    </Paragraph>
-                  ) : null}
-
-                  <div className="flex justify-between items-end">
+                  <div className="grow">
+                    {_?.title ? (
+                      <div className="mb-xs last:mb-0">
+                        <Text size="text-h4">{_.title}</Text>
+                      </div>
+                    ) : null}
+                    {_?.description ? (
+                      <div className="mb-text last:mb-0">
+                        <Paragraph size="text-xl" font="font-light">
+                          {_.description}
+                        </Paragraph>
+                      </div>
+                    ) : null}
+                  </div>
+                  <div className="flex justify-center sm:justify-between sm:items-end">
                     <div className="hidden sm:block">{renderButtonsSection(_?.buttons)}</div>
                     {_.bonusItemContent?.bonusType
                       ? renderBonusItemContent(_.bonusItemContent)
@@ -56,18 +59,19 @@ export const Bonus = JSX<BonusProps>(
 
 const renderBonusItemContent = (bonusItemContent: BonusImageDef | BonusCountDef) =>
   bonusItemContent.bonusType === 'count'
-    ? renderBonusCount(bonusItemContent)
+    ? renderBonusCount(bonusItemContent as BonusCountDef)
     : renderBonusImage(bonusItemContent as BonusImageDef);
 
 const renderBonusCount = (_: BonusCountDef) => (
-  <div className="w-full pt-default mt-s flex items-end">
+  <div className="w-full pt-default mt-s flex justify-center sm:justify-end items-end">
     {_.bonusCount ? (
-      <span className="shrink-0 w-1/2 sm:w-auto font-mohave text-title-extra -tracking-[5px] bg-clip-text text-transparent bg-green-to-yellow mt-lg">
-        {_.bonusCount}
-      </span>
+      // -mb-10 добавлен для выравнивания bonusCount относительно bonusName, тк шрифт font-mohave неправильно высчитывает line-height
+      <div className="shrink-0 -mb-10">
+        <span className="font-mohave text-title-extra gradient-color-text">{_.bonusCount}</span>
+      </div>
     ) : null}
     {_.bonusName ? (
-      <div className="w-1/2 sm:w-auto bg-clip-text text-transparent bg-green-to-yellow">
+      <div className="shrink-0 gradient-color-text">
         <Text size="text-h2">{_.bonusName}</Text>
       </div>
     ) : null}

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -19,8 +19,7 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
   }) => (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <Headline
-        className="mb-m sm:mb-3xl"
-        isEmbedded={true}
+        className="mb-4xl sm:mb-3xl"
         title={title}
         description={subtitle}
         headlineVersion="M"

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -71,6 +71,7 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
           {renderDepositResults(finalSum, income)}
           {renderButtonsSection(buttons, { isVertical: true })}
           {renderFootnote(footnote)}
+          {renderFootnote(bottomFootnote)}
         </div>
       </section>
     );

package/src/components/CardTransfer/CardTransfer.example.json

@@ -8,6 +8,7 @@
       "text": "Далее",
       "target": "_blank",
       "version": "primary"
-    }
+    },
+    "formType": "private"
   }
 }

package/src/components/CardTransfer/CardTransfer.tsx

@@ -14,10 +14,14 @@ const DEFAULT_TITLE = 'Укажите сумму перевода';
 const DEFAULT_LABEL = 'Сумма перевода';
 const DEFAULT_PLACEHOLDER = '1500';
 
-const FORM_URL = 'https://www.rshb.ru/p2p/';
-const AMOUNT_KEY = 'amount';
+const FORM_URL_MAP = {
+  private: 'https://old.rshb.ru/p2p/',
+  business: 'https://old.rshb.ru/smallbusiness/p2p/',
+};
+
 const INITIAL_FORM_STATE = {
-  [AMOUNT_KEY]: 1500,
+  amount: 1500,
+  _amount: 1500,
 };
 
 export interface CardTransferProps extends CardTransferContent, UniBlockProps {}
@@ -29,9 +33,10 @@ export const CardTransfer = JSX<CardTransferProps>(
     label = DEFAULT_LABEL,
     placeholder = DEFAULT_PLACEHOLDER,
     button,
+    formType = 'private',
     ...rest
   }) => {
-    const [{ amount }, { field }] = useForm(INITIAL_FORM_STATE);
+    const [{ amount, _amount }, { field }] = useForm(INITIAL_FORM_STATE);
 
     const isDisabled = amount <= 0;
 
@@ -54,14 +59,15 @@ export const CardTransfer = JSX<CardTransferProps>(
             title={title}
           />
         ) : null}
-        <form className="w-full xl:max-w-[468px]" method="POST" action={FORM_URL}>
+        <form className="w-full xl:max-w-[468px]" method="POST" action={FORM_URL_MAP[formType]}>
           <CurrencyInput
-            name={AMOUNT_KEY}
+            name="_amount"
             valid={!isDisabled}
             placeholder={placeholder}
             label={label}
-            {...field(AMOUNT_KEY, { parse: Number, format: String })}
+            {...field('_amount', { parse: Number, format: String })}
           />
+          <input type="hidden" name="amount" value={_amount} />
           {button?.text ? (
             <button
               type="submit"

package/src/components/CardTransfer/CardTransferContent.ts

@@ -11,4 +11,9 @@ export type CardTransferContent = UniBlockContent &
     /** @title Плейсхолдер */
     placeholder?: string;
     button?: ButtonContent;
+    /**
+     * @title Тип формы
+     * @enumNames ['Частные клиенты', 'Бизнес-клиенты']
+     */
+    formType?: 'private' | 'business';
   };

package/src/components/Carousel/Carousel.tsx

@@ -1,18 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { renderBlock } from '../../BlockRenderer/renderBlock';
-import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
 import { SwipeListControlDots } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
+import type { CarouselContent } from './CarouselContent';
 import { CarouselScrollButtons } from './CarouselScrollButtons';
 import { ITEMS_GAP } from './itemsGap';
-import type { CarouselContent } from './CarouselContent';
-import type { BlockDef } from '../../model/ContentPageDef';
-import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
-import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { renderCarouselCards } from './renderCarouselCards';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -58,20 +55,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             gap={isGap ? ITEMS_GAP : undefined}
             onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
           >
-            {renderChildren({
-              ...rest,
-              renderProps: (block: BlockDef, options: BlockRendererOptions, blockIndex) =>
-                renderBlock(block, options, {
-                  className: style(
-                    'h-full min-w-80 sm:min-w-96',
-                    noCardBorder
-                      ? ''
-                      : 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider',
-                  ),
-                  blockIndex,
-                  isActive: activeIndex === blockIndex,
-                }),
-            })}
+            {renderCarouselCards({ noCardBorder, activeIndex, ...rest })}
           </SwipeListContainer>
           <CarouselScrollButtons
             scroll={scroll}
@@ -109,3 +93,10 @@ Carousel.childrenTypes = [
   'CarouselInvestmentCard',
   'CarouselEventCard',
 ];
+
+Carousel.childSchema = () => ({
+  isHighlighting: {
+    title: 'Выделить карточку',
+    type: 'boolean',
+  },
+});

package/src/components/Carousel/renderCardHighlight.tsx

@@ -0,0 +1,22 @@
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { style } from '../../utils/style';
+
+interface CardHighlightProps {
+  className?: string;
+  text?: string;
+}
+
+export const renderCardHighlight = ({ className, text = 'ХИТ' }: CardHighlightProps = {}) => (
+  <div
+    className={style(
+      'w-14 h-14 bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]',
+      className,
+    )}
+  >
+    <Icon iconVersion="black" name="HeartIcon" width="24" height="24" />
+    <Paragraph size="text-s" font="font-normal" align="text-center" color="text-primary-text">
+      {text}
+    </Paragraph>
+  </div>
+);

package/src/components/Carousel/renderCarouselCards.tsx

@@ -0,0 +1,58 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { renderBlock } from '../../BlockRenderer/renderBlock';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
+import type { BlockDef } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { style } from '../../utils/style';
+import { renderCardHighlight } from './renderCardHighlight';
+
+const cardBaseStyle = 'relative h-full';
+
+export const renderCarouselCards = ({
+  noCardBorder,
+  activeIndex,
+  ...rest
+}: UniBlockProps & { noCardBorder?: boolean; activeIndex?: number }) => {
+  const { blocks: childBlocks } = rest.block || {};
+  const someCardsHighlighted = childBlocks?.some(isCardHighlighted);
+
+  return renderChildren({
+    ...rest,
+    renderProps: (block: BlockDef, options: BlockRendererOptions, blockIndex) => (
+      <div className={cardWrapperStyle(block, { someCardsHighlighted })}>
+        {renderBlock(block, options, {
+          className: cardStyle(block, { someCardsHighlighted, showBorder: !noCardBorder }),
+          blockIndex,
+          isActive: blockIndex === activeIndex,
+        })}
+        {isCardHighlighted(block)
+          ? renderCardHighlight({ className: 'absolute top-0 -right-4 z-40' })
+          : null}
+      </div>
+    ),
+  });
+};
+
+const cardWrapperStyle = (
+  _: BlockDef | undefined,
+  { someCardsHighlighted }: { someCardsHighlighted?: boolean },
+) =>
+  style(
+    cardBaseStyle,
+    someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl' : 'pt-3xl sm:pt-16'),
+  );
+
+const cardStyle = (
+  _: BlockDef | undefined,
+  { someCardsHighlighted, showBorder }: { someCardsHighlighted?: boolean; showBorder?: boolean },
+) =>
+  style(
+    cardBaseStyle,
+    'min-w-80 sm:min-w-96',
+    someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'),
+    showBorder &&
+      'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider',
+  );
+
+const isCardHighlighted = (_: BlockDef | undefined) =>
+  _?.content && 'isHighlighting' in _.content && _.content.isHighlighting;

package/src/components/Carousel/visibleItemCountStyle.mobile.tsx

@@ -0,0 +1 @@
+export const visibleItemCountStyle = 'auto';

package/src/components/Carousel/visibleItemCountStyle.tsx

@@ -0,0 +1 @@
+export const visibleItemCountStyle = 0;

package/src/components/CarouselCard/CarouselCard.tsx

@@ -23,7 +23,9 @@ export const CarouselCard = JSX<CarouselCardProps>(
         <div className={style(layerStyle, 'top-9 right-12 bg-green-dark')} />
         <div className={style(layerStyle, 'top-6 right-8 bg-green')} />
         <div className={style(layerStyle, 'top-3 right-4 bg-green-light')} />
-        <div className={style(layerBaseStyle, 'relative p-5xl bg-white border-green-light')}>
+        <div
+          className={style(layerBaseStyle, 'relative p-xl sm:p-5xl bg-white border-green-light')}
+        >
           <Headline
             title={title}
             description={description}
@@ -32,7 +34,7 @@ export const CarouselCard = JSX<CarouselCardProps>(
             isEmbedded={true}
           />
           {renderButtonsSection([button], {
-            className: 'mt-6xl sm:justify-center',
+            className: 'mt-m sm:mt-6xl sm:justify-center',
             isVertical: true,
           })}
         </div>

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.fixture.tsx

@@ -17,27 +17,27 @@ const five: Picture = {
 const cardsList = [
   {
     parameter: 'IR',
-    parameterDesccription: 'cтрана эмитента',
+    parameterDescription: 'cтрана эмитента',
   },
   {
     parameter: 'RU',
-    parameterDesccription: 'страна риска',
+    parameterDescription: 'страна риска',
   },
   {
     parameter: '09.03.2022',
-    parameterDesccription: 'дата погашения',
+    parameterDescription: 'дата погашения',
   },
   {
     parameter: 'Ba3',
-    parameterDesccription: 'рейтинг MOODY’S',
+    parameterDescription: 'рейтинг MOODY’S',
   },
   {
     parameter: 'BB-',
-    parameterDesccription: 'рейтинг FITCH',
+    parameterDescription: 'рейтинг FITCH',
   },
   {
     parameter: 'Borets Finance Designated Activity Company',
-    parameterDesccription: 'эмитент',
+    parameterDescription: 'эмитент',
   },
 ];