@redneckz/wildless-cms-uni-blocks 0.6.32 → 0.6.34

package/src/components/AccordionItem/AccordionItem.mobile.tsx

@@ -1,20 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { getParentBlockContent } from '../../model/getParentBlockContent';
+import { getParentBlockContent } from '../../BlockRenderer/getParentBlockContent';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import type { AccordionContent } from '../Accordion/AccordionContent';
 import type { AccordionItemProps } from './AccordionItemProps';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
 
 export const AccordionItem: JSXBlock<AccordionItemProps> = JSX<AccordionItemProps>(
-  ({ className = '', ancestors, label = '', labelIcon, isExpanded, children }) => {
-    const { bordered } = getParentBlockContent(ancestors, {} as AccordionContent);
+  ({ className = '', label = '', labelIcon, isExpanded, ...rest }) => {
+    const { bordered } = getParentBlockContent(rest.options, {} as AccordionContent);
 
     return (
       <li
@@ -30,7 +32,7 @@ export const AccordionItem: JSXBlock<AccordionItemProps> = JSX<AccordionItemProp
               className="flex flex-wrap group-last:last:pb-0 gap-5 [&>*]:p-0"
               isUnfolded={isUnfolded}
             >
-              {children}
+              {renderChildren(rest)}
             </FoldableSection>
           )}
           renderFoldButton={({ isUnfolded, onToggle }) => (
@@ -63,7 +65,7 @@ const FoldButton = JSX<FoldButtonProps>(({ className, icon, label, primaryIcon,
     className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text group cursor-pointer ${className}`}
     onClick={onClick}
   >
-    <span className="text-m-title-xs font-medium pr-2.5 flex group-hover:text-primary-main">
+    <div className="flex group-hover:text-primary-main">
       {primaryIcon ? (
         <Img
           image={getIconWithVersion(primaryIcon)}
@@ -73,8 +75,10 @@ const FoldButton = JSX<FoldButtonProps>(({ className, icon, label, primaryIcon,
           asSVG
         />
       ) : null}
-      {label}
-    </span>
+      <Text size="text-m-title-xs" font="font-medium">
+        {label}
+      </Text>
+    </div>
     <Img
       className="flex-shrink-0"
       image={getIconWithVersion({ icon: icon })}

package/src/components/AccordionItem/AccordionItem.tsx

@@ -1,15 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock } from '../../model/JSXBlock';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
 import type { AccordionItemProps } from './AccordionItemProps';
 
 const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
 
 export const AccordionItem: JSXBlock<AccordionItemProps> = JSX<AccordionItemProps>(
-  ({ className = '', label = '', isExpanded, children }) => (
+  ({ className = '', label = '', isExpanded, ...rest }) => (
     <li
       className={`border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`}
     >
@@ -18,7 +20,7 @@ export const AccordionItem: JSXBlock<AccordionItemProps> = JSX<AccordionItemProp
         unfoldedByDefault={isExpanded}
         renderFoldableSection={({ isUnfolded }) => (
           <FoldableSection className="grid grid-cols-12 gap-5 [&>*]:p-0" isUnfolded={isUnfolded}>
-            {children}
+            {renderChildren(rest)}
           </FoldableSection>
         )}
         renderFoldButton={({ isUnfolded, onToggle }) => (
@@ -42,7 +44,9 @@ const FoldButton = JSX<FoldButtonProps>(({ label, icon, onClick }) => (
     className="border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer"
     onClick={onClick}
   >
-    <span className="text-xl font-medium pr-2.5">{label}</span>
+    <Text size="text-xl" font="font-medium">
+      {label}
+    </Text>
     <Img image={icon} className="text-primary-main flex-shrink-0" width="24" height="24" asSVG />
   </button>
 ));

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
 import { BenefitsBlock } from './BenefitsBlock';

package/src/components/Blocks.ts

@@ -1,7 +1,6 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
 import { Accordion } from './Accordion/Accordion';
 import { AccordionItem } from './AccordionItem/AccordionItem';
-import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
@@ -10,6 +9,7 @@ import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
 import { CarouselCard } from './CarouselCard/CarouselCard';
+import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { Catalog } from './Catalog/Catalog';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
@@ -46,6 +46,7 @@ import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
+import { Video } from './Video/Video';
 
 export const Blocks: BlocksRegistry = {
   Accordion,
@@ -95,4 +96,5 @@ export const Blocks: BlocksRegistry = {
   TextBlock,
   Tile,
   VerticalLayout,
+  Video,
 };

package/src/components/Bonus/Bonus.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Bonus } from './Bonus';
 import type { BonusContent } from './BonusContent';

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.example.json

@@ -3,6 +3,7 @@
     "title": "Вы можете оплатить бонусными баллами",
     "subtitle": "Удобный каталог с большим ассортиментом товаров и сервисов",
     "columnsCount": "4",
+    "cardTextAlign": "center",
     "bonusBenefits": [
       {
         "label": "Более 5000 товаров",

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 
 import { BonusBenefitsBlock } from './BonusBenefitsBlock';
 import { BonusBenefit } from './BonusBenefitsBlockContent';
@@ -60,4 +60,15 @@ export default {
       />
     </div>
   ),
+  '3-cols': (
+    <div className="container grid grid-cols-12">
+      <BonusBenefitsBlock
+        className="col-span-12"
+        title="Преимущества кредита"
+        subtitle="Удобный каталог с большим ассортиментом товаров и сервисов"
+        bonusBenefits={bonusBenefits}
+        columnsCount="3"
+      />
+    </div>
+  ),
 };

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
@@ -12,13 +13,21 @@ import type {
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
 export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', title, subtitle, bonusBenefits, columnsCount = '4', ...rest }) => (
+  ({
+    bonusBenefits,
+    cardTextAlign = 'center',
+    className = '',
+    columnsCount = '4',
+    subtitle,
+    title,
+    ...rest
+  }) => (
     <BlockWrapper
       className={`font-sans text-primary-text bg-white p-[50px] flex flex-col text-center ${className}`}
       {...rest}
     >
       <Headline
-        className="!p-0"
+        className="!p-0 mb-8"
         title={title}
         description={subtitle}
         headlineVersion="M"
@@ -26,7 +35,9 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
         {...rest}
       />
       {bonusBenefits?.length ? (
-        <div className={`grid gap-1 mt-8 ${getElementsColsValue(columnsCount)}`}>
+        <div
+          className={`grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`}
+        >
           {bonusBenefits.map(renderBonusBenefit)}
         </div>
       ) : null}
@@ -34,23 +45,25 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
   ),
 );
 
-const renderBonusBenefit = (bonusBenefit: BonusBenefit, i: number) => {
+const renderBonusBenefit = ({ icon, label, description }: BonusBenefit, i: number) => {
   return (
-    <div key={String(i)} className="flex flex-col items-center max-w-[292px]">
-      {bonusBenefit?.icon ? (
-        <Img
-          className="h-[160px] w-[180px] min-w-[180px] min-h-[160px]"
-          image={bonusBenefit.icon}
-          width="180"
-          height="160"
-        />
-      ) : null}
-      <div>
-        {bonusBenefit?.label ? <span className="text-h6 m-0">{bonusBenefit.label}</span> : null}
-      </div>
+    <div key={String(i)} className="flex flex-col items-center text-h6">
+      {description ? <span>{description}</span> : null}
+      {icon ? <Img image={icon} height="180" width="auto" className="h-[180px] w-auto" /> : null}
+      <div>{label ? <span>{label}</span> : null}</div>
     </div>
   );
 };
 
-const getElementsColsValue = (colValue: ColumnsCount) =>
-  colValue === '4' ? 'grid-cols-4' : 'grid-cols-5';
+const getElementsColsValue = (colValue: ColumnsCount) => {
+  switch (colValue) {
+    case '3':
+      return 'grid-cols-3';
+    case '4':
+      return 'grid-cols-4';
+    case '5':
+      return 'grid-cols-5';
+    default:
+      return 'grid-cols-5';
+  }
+};

package/src/components/BonusBenefitsBlock/BonusBenefitsBlockContent.ts

@@ -1,18 +1,20 @@
-import type { LabelProps, TitleProps } from '../../model/HeadlineType';
+import type { AlignType } from '../../model/AlignType';
+import type { DescriptionProps, LabelProps, TitleProps } from '../../model/HeadlineType';
 import type { IconProps } from '../../model/Picture';
 /**
  * @title Количество элементов в строке
  * @enumNames [
+ *   "Три колонки",
  *   "Четыре колонки",
  *   "Пять колонок",
  *  ]
  */
-export type ColumnsCount = '4' | '5';
+export type ColumnsCount = '3' | '4' | '5';
 
 /**
  * @title Бонус и преимущество
  */
-export type BonusBenefit = LabelProps & IconProps;
+export type BonusBenefit = LabelProps & IconProps & DescriptionProps;
 
 /**
  * @title Блок бонусов и преимуществ
@@ -23,4 +25,5 @@ export type BonusBenefitsBlockContent = TitleProps & {
   /** @title Список бонусов */
   bonusBenefits?: BonusBenefit[];
   columnsCount?: ColumnsCount;
+  cardTextAlign?: AlignType;
 };

package/src/components/BusinessBlock/BusinessBlock.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { BusinessBlock } from './BusinessBlock';
 import type {

package/src/components/Calculator/Calculator.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { Calculator } from './Calculator';
 
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';

package/src/components/Calculator/Calculator.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -9,19 +10,19 @@ import { renderCalculatorBlock } from './renderCalculatorBlock';
 
 export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
 
-type TabsProps = {
-  tabsShift: number;
+interface TabsProps {
+  activeIndex: number;
   tabsNav: CalculatorNav[];
-  activeSlideIndex: number;
-  setActiveSlideIndex: (index: number) => void;
-};
+  slideIndexShift: number;
+  onClick: (index: number) => void;
+}
 
-type NavButtonProps = {
+interface NavButtonProps {
   tab: CalculatorNav;
   i: number;
-  activeSlideIndex: number;
+  isActive: boolean;
   onClick: () => void;
-};
+}
 
 export const Calculator = JSX<CalculatorProps>(
   ({ className = '', calculatorTabs = [], ...rest }) => {
@@ -29,15 +30,14 @@ export const Calculator = JSX<CalculatorProps>(
     const calculatorBlocks = calculatorTabs.map(
       ({ calculatorBlock }) => calculatorBlock || ({} as CalculatorBlockDef),
     );
-    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-    const [tabsShift, setTabsShift] = useState(0);
-
-    const handleNextClick = () => setTabsShift(tabsShift + 1);
-    const handlePrevClick = () => setTabsShift(tabsShift - 1);
+    const [slideIndexShift, setSlideIndexShift] = useState(0);
+    const handleSlideIndexShift = useCallback((_: number) => setSlideIndexShift(_), []);
+    const COLUMNS_FOR_SCROLL = 3;
 
-    const isGalleryScrollAvailable = calculatorTabs?.length > 3;
-    const showNextButton = isGalleryScrollAvailable && calculatorTabs?.length > tabsShift + 3;
-    const showPrevButton = tabsShift > 0;
+    const [activeIndex, controls] = useCarouselControls({
+      itemCount: calculatorTabs?.length,
+      visibleItemCount: COLUMNS_FOR_SCROLL,
+    });
 
     return (
       <BlockWrapper
@@ -46,18 +46,17 @@ export const Calculator = JSX<CalculatorProps>(
       >
         <div className="bg-white">
           {tabsNav.length > 1
-            ? renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex })
+            ? renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })
             : null}
           {renderArrows({
-            handler: [handlePrevClick, handleNextClick],
-            isShown: [showPrevButton, showNextButton],
+            ...controls,
             btnClass: ['left-3', 'right-3'],
             className: 'top-8',
           })}
         </div>
         <div
           className="flex"
-          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          style={{ transform: `translateX(-${slideIndexShift}00%)` }}
           role="list"
         >
           {calculatorBlocks?.length ? calculatorBlocks.map(renderCalculatorBlock) : null}
@@ -67,19 +66,17 @@ export const Calculator = JSX<CalculatorProps>(
   },
 );
 
-function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps) {
-  const isActiveBtn = i === activeSlideIndex;
-
-  const btnClassName = isActiveBtn
+function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
+  const btnClassName = isActive
     ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
     : `h-[77px] w-[328px] min-w-[328px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
-  const btnTitleClassName = isActiveBtn ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
-  const btnDescClassName = isActiveBtn
+  const btnTitleClassName = isActive ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
+  const btnDescClassName = isActive
     ? 'text-l-light text-white'
     : `text-m-light text-secondary-text`;
-  const iconClassName = isActiveBtn ? '' : `text-primary-main`;
+  const iconClassName = isActive ? '' : `text-primary-main`;
   const iconVersion = tab?.icon?.iconVersion;
-  const activeIconStyle = isActiveBtn ? 'white' : 'normal';
+  const activeIconStyle = isActive ? 'white' : 'normal';
 
   return (
     <button
@@ -108,11 +105,13 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
   );
 }
 
-function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex }: TabsProps) {
+function renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick }: TabsProps) {
+  const CARD_SHIFT = 388;
+
   return (
     <div>
       <div
-        style={{ transform: `translateX(-${tabsShift * 388}px)` }}
+        style={{ transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }}
         className="flex flex-col justify-end items-center h-[126px] pt-9 box-border duration-1000"
       >
         <div className="w-full flex flex-nowrap items-end gap-2">
@@ -120,8 +119,8 @@ function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex
             renderNavButton({
               tab,
               i,
-              activeSlideIndex,
-              onClick: () => setActiveSlideIndex(i),
+              isActive: Boolean(i === slideIndexShift),
+              onClick: () => onClick(i),
             }),
           )}
         </div>

package/src/components/Calculator/CalculatorValueBlock.tsx

@@ -10,16 +10,14 @@ export interface CalculatorValueBlockProps {
 }
 
 export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
-  ({ title, value, postfix = '', prefix, className = '' }) => {
-    return (
-      <div className={`mb-7 ${className}`}>
-        {title ? <div className="text-l-light text-secondary-text">{title}</div> : null}
-        {value ? (
-          <div className="text-h3">
-            {prefix} {addSpacesBetweenNumbers(Math.round(value))} {postfix}
-          </div>
-        ) : null}
-      </div>
-    );
-  },
+  ({ title, value, postfix = '', prefix, className = '' }) => (
+    <div className={`mb-7 ${className}`}>
+      {title ? <div className="text-l-light text-secondary-text">{title}</div> : null}
+      {value ? (
+        <div className="text-h3">
+          {prefix} {addSpacesBetweenNumbers(Math.round(value))} {postfix}
+        </div>
+      ) : null}
+    </div>
+  ),
 );

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

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { CardTransfer } from './CardTransfer';
 

package/src/components/CardTransfer/CardTransfer.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -28,6 +28,7 @@ export const CardTransfer = JSX<CardTransferProps>(
     ...rest
   }) => {
     const [value, setValue] = useState<string>('');
+    const handleChange = useCallback((_: string) => setValue(_), []);
     const isDisabled = !Number(getSanitizedValue(value));
     const buttonStyle = isDisabled
       ? getDisabledButtonClasses({ version: button?.version })
@@ -45,7 +46,7 @@ export const CardTransfer = JSX<CardTransferProps>(
           <CurrencyInput
             name={AMOUNT_KEY}
             value={value}
-            onChange={setValue}
+            onChange={handleChange}
             valid={value === '' || !isDisabled}
             placeholder={placeholder}
             label={label}

package/src/components/Carousel/Carousel.example.json

@@ -1,6 +1,6 @@
 {
   "cardWidth": 1200,
   "isBlur": false,
-  "cardFullViewCount": 1,
+  "visibleItemCount": 1,
   "isCycle": false
-}
+}

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

@@ -1,76 +1,69 @@
-import '../../react/setup-fixture';
-import { CarouselCard } from '../CarouselCard/CarouselCard';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import '../../setup-fixture';
+import { Blocks } from '../Blocks';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
-import { CarouselTariffsCard } from '../CarouselTariffsCard/CarouselTariffsCard';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { Carousel } from './Carousel';
 
-const CAROUSEL_CARD_BLOCK = <CarouselCard className="col-span-12" {...CARD} />;
-
-const CAROUSEL_CARD_BLOCK_MINI = <CarouselCard className="col-span-3" {...CARD_MINI} />;
-
-const CAROUSEL_CARD_NEW = <CarouselCard className="col-span-12" {...CARD_NEW} />;
-
-const CAROUSEL_TARIFFS_CARD = <CarouselTariffsCard className="col-span-12" {...TARIFFS_CARD} />;
-
-const CAROUSEL_TARIFFS_CARD_HIT = (
-  <CarouselTariffsCard className="col-span-12" {...TARIFFS_CARD_HIT} />
-);
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        cardFullViewCount={1}
-        cardWidth="1007"
+        visibleItemCount={1}
         isBlur={false}
         isCyclic={true}
-        block={{ type: 'Carousel', blocks: new Array(2).fill(CARD).flat() }}
-      >
-        {[CAROUSEL_CARD_BLOCK, CAROUSEL_CARD_NEW]}
-      </Carousel>
+        block={{
+          type: 'Carousel',
+          blocks: [
+            { type: 'CarouselCard', content: CARD },
+            { type: 'CarouselCard', content: CARD_NEW },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
   'carousel with mini cards': (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        cardFullViewCount={3}
-        cardWidth="350"
         isBlur={true}
         isCyclic={false}
-        block={{ type: 'Carousel', blocks: new Array(5).fill(CARD_MINI).flat() }}
-      >
-        {[
-          CAROUSEL_CARD_BLOCK_MINI,
-          CAROUSEL_CARD_BLOCK_MINI,
-          CAROUSEL_CARD_BLOCK_MINI,
-          CAROUSEL_CARD_BLOCK_MINI,
-          CAROUSEL_CARD_BLOCK_MINI,
-          CAROUSEL_CARD_BLOCK_MINI,
-        ]}
-      </Carousel>
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6).fill({
+            type: 'CarouselCard',
+            content: CARD_MINI,
+            style: ['col-span-3'],
+          }),
+        }}
+        options={options}
+      />
     </div>
   ),
   tariffs: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        cardFullViewCount={3}
-        cardWidth="322"
+        visibleItemCount={3}
         isBlur={true}
         isCyclic={false}
-        block={{ type: 'Carousel', blocks: new Array(5).fill(TARIFFS_CARD).flat() }}
-      >
-        {[
-          CAROUSEL_TARIFFS_CARD,
-          CAROUSEL_TARIFFS_CARD_HIT,
-          CAROUSEL_TARIFFS_CARD,
-          CAROUSEL_TARIFFS_CARD,
-          CAROUSEL_TARIFFS_CARD,
-        ]}
-      </Carousel>
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6)
+            .fill({
+              type: 'CarouselTariffsCard',
+              content: TARIFFS_CARD,
+            })
+            .map((_, i) => (i === 1 ? { ..._, content: TARIFFS_CARD_HIT } : _)),
+        }}
+        options={options}
+      />
     </div>
   ),
 };