@redneckz/wildless-cms-uni-blocks 0.6.33 → 0.6.35

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -34,7 +34,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
 
     return (
       <BlockWrapper
-        className={`flex justify-between font-sans p-9 box-border relative min-h-[320px]
+        className={`flex justify-between font-sans p-[50px] box-border relative min-h-[320px]
         ${getTileMinHeight(className)}
         ${VersionStyleMap[version]}
         ${className}`}
@@ -48,19 +48,19 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
                 headingType={headingType}
                 as="h3"
                 title={title}
-                className={`whitespace-pre-wrap mb-6 w-full
+                className={`whitespace-pre-wrap mb-7 w-full
                   ${textColorClass} ${AlignText[alignTitle]}`}
               />
             ) : null
           }
           buttons={
             buttons?.length ? (
-              <ButtonSection buttons={buttonsWithClass} className="flex gap-4" {...rest} />
+              <ButtonSection buttons={buttonsWithClass} className="flex gap-4 mt-8" {...rest} />
             ) : null
           }
         >
           {renderDescription(description)}
-          <div className="flex flex-1 items-center">
+          <div className="flex flex-1 items-center mb-3">
             {qr?.src ? (
               <div className={`flex justify-center mr-5 bg-white rounded-md ${containerStyle}`}>
                 <Img className="w-fit" image={qr} />
@@ -90,4 +90,4 @@ const renderList = (version: ListItemVersion, items?: string[]) => {
 };
 
 const renderDescription = (description?: string) =>
-  description ? <p className="text-xl-light mb-5">{description}</p> : null;
+  description ? <p className="text-xl-light mb-5 pt-0.5">{description}</p> : null;

package/src/components/OfficeMap/OfficeMap.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { OfficeMap } from './OfficeMap';
 
 export default {

package/src/components/OfficeServicesBlock/OfficeServicesBlock.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { OfficeServicesBlock } from './OfficeServicesBlock';
 
 export default {

package/src/components/OtherProducts/OtherProducts.fixture.tsx

@@ -1,95 +1,105 @@
-import '../../react/setup-fixture';
-import { Gallery } from '../Gallery/Gallery';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import type { BlockDef } from '../../model/ContentPageDef';
+import '../../setup-fixture';
+import { Blocks } from '../Blocks';
 import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
-import { Headline } from '../Headline/Headline';
 import { HEADLINE } from '../Headline/Headline.fixture';
-import { LinkDocs } from '../LinkDocs/LinkDocs';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
-import { MiniGallery } from '../MiniGallery/MiniGallery';
 import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
-import { OtherProductsItem } from '../OtherProductsItem/OtherProductsItem';
-import { PictureText } from '../PictureText/PictureText';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
-import { ProductBlock } from '../ProductBlock/ProductBlock';
 import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
-import { ProductTile } from '../ProductTile/ProductTile';
 import { PRODUCT_PENSION_TILE, PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
-import { TextBlock } from '../TextBlock/TextBlock';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
-import { Tile } from '../Tile/Tile';
 import { TILE, TILE_PREMIUM } from '../Tile/Tile.fixture';
 import { OtherProducts } from './OtherProducts';
 
-const TEXT_BLOCK_OTHER_BLOCK = <TextBlock className="col-span-12" {...TEXT_BLOCK} />;
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
-const PRODUCT_BLOCK_OTHER_BLOCK = <ProductBlock className="col-span-6" {...PRODUCT_BLOCK} />;
-
-const TILES_OTHER_BLOCK = <Tile className="col-span-12" {...TILE} />;
-
-const TILES_PREMIUM_OTHER_BLOCK = <Tile className="col-span-6" {...TILE_PREMIUM} />;
-
-const PRODUCT_TILES_OTHER_BLOCK = <ProductTile className="col-span-6" {...PRODUCT_TILE} />;
-
-const PRODUCT_PENSION_TILES_OTHER_BLOCK = (
-  <ProductTile className="col-span-6" {...PRODUCT_PENSION_TILE} />
-);
-
-const HEADLINE_OTHER_BLOCK = <Headline className="col-span-12" {...HEADLINE} />;
-
-const PICTURE_TEXT_OTHER_BLOCK = <PictureText className="col-span-12" {...PICTURE_TEXT} />;
-
-const LINK_DOCS_OTHER_BLOCK = <LinkDocs className="col-span-12" {...linkDocsContentExample} />;
-
-const GALLERY_OTHER_BLOCK = <Gallery className="col-span-12" {...GALLERY} />;
-
-const MINI_GALLERY_OTHER_BLOCK = <MiniGallery className="col-span-12" {...MINI_GALLERY} />;
-
-export const OTHER_PRODUCTS_ITEM = (
-  <OtherProductsItem label="OtherProducts №1 Tiles">
-    {[TILES_PREMIUM_OTHER_BLOCK, TILES_PREMIUM_OTHER_BLOCK, TILES_OTHER_BLOCK, TILES_OTHER_BLOCK]}
-  </OtherProductsItem>
-);
+export const OTHER_PRODUCTS_ITEM: BlockDef = {
+  type: 'OtherProductsItem',
+  content: { label: 'OtherProducts №1 Tiles' },
+  blocks: [
+    { type: 'Tile', content: TILE_PREMIUM, style: ['col-span-6'] },
+    { type: 'Tile', content: TILE_PREMIUM, style: ['col-span-6'] },
+    { type: 'Tile', content: TILE },
+    { type: 'Tile', content: TILE },
+  ],
+};
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <OtherProducts className="col-span-12">
-        {OTHER_PRODUCTS_ITEM}
-        <OtherProductsItem label="OtherProducts №2 Product_Tiles">
-          {[
-            PRODUCT_TILES_OTHER_BLOCK,
-            PRODUCT_TILES_OTHER_BLOCK,
-            PRODUCT_PENSION_TILES_OTHER_BLOCK,
-            PRODUCT_PENSION_TILES_OTHER_BLOCK,
-          ]}
-        </OtherProductsItem>
-        <OtherProductsItem label="OtherProducts №3 Product_Block">
-          {[PRODUCT_BLOCK_OTHER_BLOCK, PRODUCT_BLOCK_OTHER_BLOCK]}
-        </OtherProductsItem>
-        <OtherProductsItem label="OtherProducts №4 Text_Block">
-          {[
-            TEXT_BLOCK_OTHER_BLOCK,
-            TEXT_BLOCK_OTHER_BLOCK,
-            TEXT_BLOCK_OTHER_BLOCK,
-            TEXT_BLOCK_OTHER_BLOCK,
-          ]}
-        </OtherProductsItem>
-        <OtherProductsItem label="OtherProducts №5 Picture_Text">
-          {[PICTURE_TEXT_OTHER_BLOCK]}
-        </OtherProductsItem>
-        <OtherProductsItem label="OtherProducts №6 Headline">
-          {[HEADLINE_OTHER_BLOCK]}
-        </OtherProductsItem>
-        <OtherProductsItem label="OtherProducts №7 Link_Docs">
-          {[LINK_DOCS_OTHER_BLOCK]}
-        </OtherProductsItem>
-        <OtherProductsItem label="OtherProducts №8 Gallery">
-          {[GALLERY_OTHER_BLOCK, GALLERY_OTHER_BLOCK]}
-        </OtherProductsItem>
-        <OtherProductsItem label="OtherProducts №9 Mini_Gallery">
-          {[MINI_GALLERY_OTHER_BLOCK, MINI_GALLERY_OTHER_BLOCK]}
-        </OtherProductsItem>
-      </OtherProducts>
+      <OtherProducts
+        className="col-span-12"
+        block={{
+          type: 'OtherProducts',
+          blocks: [
+            OTHER_PRODUCTS_ITEM,
+            {
+              type: 'OtherProductsItem',
+              content: { label: 'OtherProducts №2 Product_Tiles' },
+              blocks: [
+                { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+                { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+                { type: 'ProductTile', content: PRODUCT_PENSION_TILE },
+                { type: 'ProductTile', content: PRODUCT_PENSION_TILE },
+              ],
+            },
+            {
+              type: 'OtherProductsItem',
+              content: { label: 'OtherProducts №3 Product_Block' },
+              blocks: [
+                { type: 'ProductBlock', content: PRODUCT_BLOCK, style: ['col-span-6'] },
+                { type: 'ProductBlock', content: PRODUCT_BLOCK, style: ['col-span-6'] },
+              ],
+            },
+            {
+              type: 'OtherProductsItem',
+              content: { label: 'OtherProducts №4 Text_Block' },
+              blocks: [
+                { type: 'TextBlock', content: TEXT_BLOCK },
+                { type: 'TextBlock', content: TEXT_BLOCK },
+                { type: 'TextBlock', content: TEXT_BLOCK },
+                { type: 'TextBlock', content: TEXT_BLOCK },
+              ],
+            },
+            {
+              type: 'OtherProductsItem',
+              content: { label: 'OtherProducts №5 Picture_Text' },
+              blocks: [{ type: 'PictureText', content: PICTURE_TEXT }],
+            },
+            {
+              type: 'OtherProductsItem',
+              content: { label: 'OtherProducts №6 Headline' },
+              blocks: [{ type: 'Headline', content: HEADLINE }],
+            },
+            {
+              type: 'OtherProductsItem',
+              content: { label: 'OtherProducts №7 Link_Docs' },
+              blocks: [{ type: 'LinkDocs', content: linkDocsContentExample }],
+            },
+            {
+              type: 'OtherProductsItem',
+              content: { label: 'OtherProducts №8 Gallery' },
+              blocks: [
+                { type: 'Gallery', content: GALLERY },
+                { type: 'Gallery', content: GALLERY },
+              ],
+            },
+            {
+              type: 'OtherProductsItem',
+              content: { label: 'OtherProducts №9 Mini_Gallery' },
+              blocks: [
+                { type: 'MiniGallery', content: MINI_GALLERY },
+                { type: 'MiniGallery', content: MINI_GALLERY },
+              ],
+            },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
 };

package/src/components/OtherProducts/OtherProducts.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { OtherProductsContent } from './OtherProductsContent';
@@ -6,9 +7,9 @@ import type { OtherProductsContent } from './OtherProductsContent';
 export interface OtherProductsProps extends OtherProductsContent, UniBlockProps {}
 
 export const OtherProducts: JSXBlock<OtherProductsProps> = JSX<OtherProductsProps>(
-  ({ className = '', children, ...rest }) => (
+  ({ className = '', ...rest }) => (
     <BlockWrapper className={`font-sans text-primary-text ${className}`} {...rest}>
-      {children}
+      {renderChildren(rest)}
     </BlockWrapper>
   ),
 );

package/src/components/OtherProductsItem/OtherProductsItem.fixture.tsx

@@ -1,5 +1,20 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { Blocks } from '../Blocks';
 import { OTHER_PRODUCTS_ITEM } from '../OtherProducts/OtherProducts.fixture';
+import { OtherProductsItem } from './OtherProductsItem';
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
-  default: <div className="container">{OTHER_PRODUCTS_ITEM}</div>,
+  default: (
+    <div className="container">
+      <OtherProductsItem
+        {...OTHER_PRODUCTS_ITEM.content}
+        block={OTHER_PRODUCTS_ITEM}
+        options={options}
+      />
+    </div>
+  ),
 };

package/src/components/OtherProductsItem/OtherProductsItem.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { getParentBlockContent } from '../../model/getParentBlockContent';
+import { getParentBlockContent } from '../../BlockRenderer/getParentBlockContent';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
@@ -13,8 +14,8 @@ export interface OtherProductsItemProps extends OtherProductsItemContent, UniBlo
 const icons: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
 
 export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProductsItemProps>(
-  ({ className, page, ancestors, label = '', isUnfolded: unfoldedByDefault, children }) => {
-    const { colorPalette } = getParentBlockContent(ancestors, {} as OtherProductsContent);
+  ({ className, label = '', isUnfolded: unfoldedByDefault, ...rest }) => {
+    const { colorPalette } = getParentBlockContent(rest.options, {} as OtherProductsContent);
 
     return (
       <div className={`border-0 border-b border-solid border-main-divider ${className}`}>
@@ -26,7 +27,7 @@ export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProd
                 className="grid grid-cols-12 gap-1 border-box"
                 isUnfolded={isUnfolded}
               >
-                {children}
+                {renderChildren(rest)}
               </FoldableSection>
             </div>
           )}
@@ -34,7 +35,7 @@ export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProd
             <DefaultFoldButton
               label={label}
               icon={icons[Number(isUnfolded)]}
-              dataTheme={page?.colorPalette || colorPalette}
+              dataTheme={colorPalette || rest.options?.page?.colorPalette}
               onClick={onToggle}
             />
           )}

package/src/components/PictureText/PictureText.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { PictureText } from './PictureText';
 import type { PictureTextContent } from './PictureTextContent';
 

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

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 
 import { Placeholder } from './Placeholder';
 

package/src/components/Placeholder/Placeholder.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 
 import { Placeholder } from './Placeholder';
 

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

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

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import type { BackwardButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductBlock } from './ProductBlock';
@@ -184,4 +184,16 @@ export default {
       />
     </div>
   ),
+  'secondary with footnote': (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        footnote="*в соответствии с Указанием Банка России от 28.12.2015 № 3921-У"
+        headlineVersion="L"
+        image={image}
+        title="Оплата проходит в 180 странах мира"
+        version="secondary"
+      />
+    </div>
+  ),
 };

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,4 +1,5 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { Footnote } from '../../model/Footnote';
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { IconVersion } from '../../model/IconVersion';
 import type { LinkProps } from '../../model/LinkProps';
@@ -9,7 +10,8 @@ import type { ListContent } from '../../ui-kit/List/ListContent';
 
 export type ProductBlockInnerContent = HeadlineProps &
   ListContent &
-  ButtonContent & {
+  ButtonContent &
+  Footnote & {
     /**
      * @default {
      *   "format": "webp",

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -20,6 +20,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     benefits,
     benefitsVersion,
     buttons,
+    footnote,
     image,
     items,
     version = 'primary',
@@ -42,28 +43,31 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             align="left"
             {...rest}
           />
-          <BaseTile
-            buttons={
-              buttons?.length ? (
-                <ButtonSection buttons={buttons} className="flex gap-4" {...rest} />
-              ) : null
-            }
-          >
-            {benefitsCount ? (
-              <div className={benefitsContainerStyles}>
-                {benefits.map(renderBenefit(version, benefitsVersion))}
-              </div>
-            ) : null}
-            {items?.length ? (
-              <List
-                className="mt-5 text-h6"
-                items={items}
-                itemClassName="mb-[7px]"
-                version={version}
-                isDotted={isDotted}
-              />
-            ) : null}
-          </BaseTile>
+          <div className="flex flex-col justify-between h-full">
+            <BaseTile
+              buttons={
+                buttons?.length ? (
+                  <ButtonSection buttons={buttons} className="flex gap-4" {...rest} />
+                ) : null
+              }
+            >
+              {benefitsCount ? (
+                <div className={benefitsContainerStyles}>
+                  {benefits.map(renderBenefit(version, benefitsVersion))}
+                </div>
+              ) : null}
+              {items?.length ? (
+                <List
+                  className="mt-5 text-h6"
+                  items={items}
+                  itemClassName="mb-[7px]"
+                  version={version}
+                  isDotted={isDotted}
+                />
+              ) : null}
+            </BaseTile>
+            {footnote ? <p className="text-m-light pt-12">{footnote}</p> : null}
+          </div>
         </div>
         {image?.src && <Img className="mt-[-50px]" image={image} />}
       </div>

package/src/components/ProductGallery/ProductGallery.fixture.tsx

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

package/src/components/ProductTile/ProductTile.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 { ProductTile } from './ProductTile';
 import type { ProductTileContent } from './ProductTileContent';

package/src/components/PromoTile/PromoTile.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { getCurrentDate } from '../../utils/getCurrentDate';
 import { PromoTile } from './PromoTile';
 

package/src/components/Recommendation/Recommendation.fixture.tsx

@@ -1,6 +1,6 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { Recommendation, RecommendationProps } from './Recommendation';
 
 const cowCard: Picture = {

package/src/components/Recommendation/Recommendation.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { VersionStyleMap } from '../../model/BlockVersion';
 import { BorderVersionStyleMap } from '../../model/BorderVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
@@ -10,14 +10,17 @@ import { RecommendationCard } from './RecommendationCard';
 import type { RecommendationContent } from './RecommendationContent';
 
 const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
-const CARD_FULL_VIEW_COUNT = 2;
+const CARD_VIEW_COUNT = 2;
 const CARD_SHIFT = 525;
 
 export interface RecommendationProps extends RecommendationContent, UniBlockProps {}
 
 export const Recommendation = JSX<RecommendationProps>(
   ({ recommendations = [], className = '', title, version = 'primary', ...rest }) => {
-    const [activeCardIndex, setActiveCardIndex] = useState(0);
+    const [activeIndex, controls] = useCarouselControls({
+      itemCount: recommendations.length,
+      visibleItemCount: CARD_VIEW_COUNT,
+    });
 
     return (
       <BlockWrapper
@@ -28,10 +31,10 @@ export const Recommendation = JSX<RecommendationProps>(
         <div>
           <div
             className="flex duration-1000 gap-3.5"
-            style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
+            style={{ transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }}
             role="list"
           >
-            {recommendations?.length
+            {recommendations.length
               ? recommendations.map((card, i) => (
                   <RecommendationCard
                     key={String(i)}
@@ -42,10 +45,10 @@ export const Recommendation = JSX<RecommendationProps>(
                 ))
               : null}
           </div>
-          {renderNavButtons({
-            cardsCount: recommendations.length,
-            activeCardIndex,
-            setActiveCardIndex,
+          {renderArrows({
+            ...controls,
+            btnClass: ['left-8', 'right-8'],
+            className: 'top-1/2 mt-3',
           })}
         </div>
         <div
@@ -62,30 +65,3 @@ export const Recommendation = JSX<RecommendationProps>(
     );
   },
 );
-
-const renderNavButtons = ({
-  cardsCount,
-  activeCardIndex,
-  setActiveCardIndex,
-}: {
-  cardsCount: number;
-  activeCardIndex: number;
-  setActiveCardIndex: (index: number) => void;
-}) => {
-  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
-  const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
-  const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
-  const showPrevButton = isUseSlider && activeCardIndex > 0;
-
-  return (
-    <div>
-      {renderArrows({
-        handler: [handlePrevClick, handleNextClick],
-        isShown: [showPrevButton, showNextButton],
-        btnClass: ['left-8', 'right-8'],
-        className: 'top-1/2 mt-3',
-      })}
-    </div>
-  );
-};

package/src/components/RollupItem/RollupItem.fixture.tsx

@@ -1,23 +1,56 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { Blocks } from '../Blocks';
 import { RollupItem } from '../RollupItem/RollupItem';
-import { TextBlock } from '../TextBlock/TextBlock';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 
-const TEXT_BLOCK_ACCORDION_BLOCK = <TextBlock className="col-span-12" {...TEXT_BLOCK} />;
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
   default: (
-    <RollupItem label="Rollup button 1">
-      {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-    </RollupItem>
+    <RollupItem
+      label="Rollup button 1"
+      isExpanded={true}
+      block={{
+        type: 'RollupItem',
+        blocks: [
+          { type: 'TextBlock', content: TEXT_BLOCK },
+          { type: 'TextBlock', content: TEXT_BLOCK },
+        ],
+      }}
+      options={options}
+    />
   ),
   secondary: (
-    <RollupItem label="Rollup button 2" version="secondary" isFoldButtonOnTop={false}>
-      {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-    </RollupItem>
+    <RollupItem
+      label="Rollup button 2"
+      version="secondary"
+      isFoldButtonOnTop={false}
+      isExpanded={true}
+      block={{
+        type: 'RollupItem',
+        blocks: [
+          { type: 'TextBlock', content: TEXT_BLOCK },
+          { type: 'TextBlock', content: TEXT_BLOCK },
+        ],
+      }}
+      options={options}
+    />
   ),
   'secondary default-open': (
-    <RollupItem isExpanded={true} version="secondary" label="Rollup button 2">
-      {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-    </RollupItem>
+    <RollupItem
+      version="secondary"
+      label="Rollup button 2"
+      isExpanded={true}
+      block={{
+        type: 'RollupItem',
+        blocks: [
+          { type: 'TextBlock', content: TEXT_BLOCK },
+          { type: 'TextBlock', content: TEXT_BLOCK },
+        ],
+      }}
+      options={options}
+    />
   ),
 };