@redneckz/wildless-cms-uni-blocks 0.5.13 → 0.5.15

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

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { AnchorClickScrollingEvent } from '../components/Tabs/Tabs';
 import { EventBus } from '../EventBus/EventBus';
-import type { UniBlockProps } from '../model/ContentPageDef';
+import type { UniBlockProps } from '../model/JSXBlock';
 import { changeHashOnObserve } from '../utils/changeHashOnObserve';
 import { IntersectionObserverTag } from './IntersectionObserverTag';
 
@@ -30,11 +30,15 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
 
     useEffect(() => {
       const anchorClickCleanup = EventBus.inst.subscribe('anchorClick', (e) => {
+        setShouldRenderBlock(true);
         anchorClickRef.current = e;
       });
       const tabCleanup = EventBus.inst.subscribe('tab', (event) => {
         if (event.type === 'group') {
-          setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
+          const blockHasSettgins = labels?.length || anchor;
+          setShouldRenderBlock(
+            event.label ? !blockHasSettgins || Boolean(labels?.includes(event.label)) : true,
+          );
         } else {
           changeHash(event.label);
           setShouldRenderBlock(true);

package/mobile/src/ui-kit/Button/ButtonSection.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { HandlerDecorator, Router } from '../../components/ContentPage/ContentPageContext';
 import { useLink } from '../../hooks/useLink';
-import { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { Button } from './Button';
 import type { ButtonContent, ButtonWithIconProps } from './ButtonProps';
 

package/mobile/src/ui-kit/Foldable/FoldableSection.tsx

@@ -16,7 +16,7 @@ export const FoldableSection = JSX<FoldableSectionProps>(
           ? `${containerRef.current.scrollHeight}px`
           : '';
       }
-    }, [isUnfolded]);
+    }, [isUnfolded, children?.length]);
 
     return (
       <div

package/mobile/src/ui-kit/Img/getIconVersion.tsx

@@ -1,3 +1,5 @@
-export function getIconVersion(image) {
-  return typeof image === 'string' ? 'normal' : image.iconVersion || 'normal';
+import type { Image } from './ImgProps';
+
+export function getIconVersion(image?: Image) {
+  return typeof image === 'string' ? 'normal' : image?.iconVersion || 'normal';
 }

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useTariffsInnerTableData } from '../../hooks/useTariffsInnerTableData';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { InnerTableBody } from './InnerTableBody';
 import { TableInnerButton } from './InnerTableButton';
 import { InnerTableHeader } from './InnerTableHeader';

package/mobile/src/ui-kit/InnerTable/InnerTableBody.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import { type UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { Img } from '../Img/Img';
 import { InnerTableBodyItem } from './InnerTableBodyItem';
 import type { DataItem } from './InnerTableProps';

package/mobile/src/ui-kit/InnerTable/InnerTableBodyItem.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { renderArrows } from '../Button/renderArrows';
 import type { RowsData } from './InnerTableProps';
 

package/mobile/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { EventBus } from '../../EventBus/EventBus';
-import { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 import type { TariffsTableInnerEvent } from './InnerTableProps';

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

@@ -18,7 +18,7 @@ export const InputRange = JSX<InputRangeProps>(
     disabled = false,
     onChange,
   }) => {
-    const handleChange = (e) => {
+    const handleChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
       if (!onChange) {
         return;
       }
@@ -62,7 +62,7 @@ export const InputRange = JSX<InputRangeProps>(
   },
 );
 
-function renderRangeCaption(items) {
+function renderRangeCaption(items: string[]) {
   return (
     <div className="flex justify-between my-2">
       {items.map((item, i) => (

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { Checkbox } from '../Checkbox/Checkbox';
 
-interface RadioButtonItem {
+export interface RadioButtonItem {
   id: string;
   text: string;
 }

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { SearchBarInner } from './SearchBarInner';
 
 export const SearchBar = JSX<UniBlockProps>(({ className = '' }) => {

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../Icon/Icon';
-import { useState, useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
+import { Icon } from '../Icon/Icon';
 
 export interface OptionProps {
   key: string;
@@ -33,7 +33,7 @@ export const Select = JSX<SelectProps>(
       onChange(option);
     };
 
-    const isSelected = (option) => Boolean(option.key === selectedItem.key);
+    const isSelected = (option: OptionProps) => Boolean(option.key === selectedItem.key);
 
     useEffect(() => {
       setSelectedItem(value || { key: '', text: '' });
@@ -73,10 +73,15 @@ export const Select = JSX<SelectProps>(
   },
 );
 
-const renderOptionsStyle = (isOpen) => (isOpen ? '' : 'overflow-hidden');
+const renderOptionsStyle = (isOpen: boolean) => (isOpen ? '' : 'overflow-hidden');
 
 const renderOption =
-  (choiceOption, isOpen: boolean, isSelected) => (option: OptionProps, i: number) => {
+  (
+    choiceOption: (option: OptionProps) => void,
+    isOpen: boolean,
+    isSelected: (option: OptionProps) => boolean,
+  ) =>
+  (option: OptionProps, i: number) => {
     return (
       <div
         key={String(i)}
@@ -98,5 +103,5 @@ const renderOption =
     );
   };
 
-const getBorderStyle = (isBorder) =>
+const getBorderStyle = (isBorder: boolean) =>
   isBorder ? 'border border-main-stroke rounded-md hover:border-primary-hover' : '';

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

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
 import { SwipeListControlDots } from './SwipeListControlDots';
-import { SwipeListControlList } from './SwipeListControlList';
+import { SwipeListControlList, SwipeListControlListProps } from './SwipeListControlList';
 import type { SwipeListControlProps } from './SwipeListControlProps';
 import { getIndexParts } from './utils/getIndexParts';
 import { getScrollPoints } from './utils/getScrollPoints';
@@ -26,7 +26,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
       children,
     };
 
-    const handleScroll = (e) => {
+    const handleScroll: SwipeListControlListProps['onScroll'] = (e) => {
       const {
         scrollLeft,
         clientWidth,

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlList.tsx

@@ -10,7 +10,7 @@ import { getContainerStyle } from './utils/getContainerStyle';
 export interface SwipeListControlListProps extends SwipeContainer {
   className?: string;
   activeIndex: number;
-  onScroll?: (e) => void;
+  onScroll?: JSX.IntrinsicElements['div']['onScroll'];
 }
 
 export const SwipeListControlList = JSX<SwipeListControlListProps>(

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlProps.ts

@@ -1,4 +1,4 @@
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 
 /**
  * @title Контейнер

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.5.13",
+  "version": "0.5.15",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -129,6 +129,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.19.4",
     "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-replace": "^5.0.1",
     "@rollup/plugin-typescript": "^8.3.3",
     "@size-limit/file": "^7.0.8",
     "@testing-library/react": "^12.1.5",
@@ -182,7 +183,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "37 kB",
+      "limit": "39 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/components/Accordion/Accordion.example.json

@@ -1,66 +1,4 @@
 {
   "title": "Аккордеон",
-  "accordionAlignTitle": "center",
-  "accordionItems": [
-    {
-      "label": "Аккордеон 1",
-      "labelIcon": {
-        "icon": "CardIcon"
-      },
-      "blocks": [
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок",
-          "description": "Описание текстового блока",
-          "style": ["col-span-12"]
-        },
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2",
-          "style": ["col-span-12"]
-        }
-      ]
-    },
-    {
-      "label": "Аккордеон 2",
-      "labelIcon": {
-        "icon": "CardIcon"
-      },
-      "blocks": [
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок",
-          "description": "Описание текстового блока",
-          "style": ["col-span-6"]
-        },
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2",
-          "style": ["col-span-6"]
-        }
-      ]
-    },
-    {
-      "label": "Аккордеон 3",
-      "labelIcon": {
-        "icon": "CardIcon"
-      },
-      "blocks": [
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок",
-          "description": "Описание текстового блока",
-          "style": ["col-span-12"]
-        },
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2",
-          "style": ["col-span-12"]
-        }
-      ]
-    }
-  ]
+  "accordionAlignTitle": "center"
 }

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

@@ -1,59 +1,63 @@
+import type { BlockDef } from '../../model/ContentPageDef';
 import { context } from '../../react/setup-fixture';
-import type {
-  HeadlineBlockListDef,
-  LinkDocsBlockListDef,
-  TextBlockBlockListDef,
-} from '../../ui-kit/BlocksList/BlocksListProps';
+import { AccordionItem } from '../AccordionItem/AccordionItem';
+import { Headline } from '../Headline/Headline';
 import { HEADLINE } from '../Headline/Headline.fixture';
+import { LinkDocs } from '../LinkDocs/LinkDocs';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
+import { TextBlock } from '../TextBlock/TextBlock';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import type { AccordionProps } from './Accordion';
 import { Accordion } from './Accordion';
 
-const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockBlockListDef = {
-  blockListType: 'TextBlock',
-  ...TEXT_BLOCK,
-};
+const TEXT_BLOCK_ACCORDION_BLOCK = <TextBlock context={context} {...TEXT_BLOCK} />;
 
-const HEADLINE_ACCORDION_BLOCK: HeadlineBlockListDef = {
-  blockListType: 'Headline',
-  ...HEADLINE,
-};
+const HEADLINE_ACCORDION_BLOCK = <Headline context={context} {...HEADLINE} />;
 
-const LINK_DOCS_ACCORDION_BLOCK: LinkDocsBlockListDef = {
-  blockListType: 'LinkDocs',
-  ...linkDocsContentExample,
-  title: '',
-};
+const LINK_DOCS_ACCORDION_BLOCK = (
+  <LinkDocs context={context} {...linkDocsContentExample} title="" />
+);
 
-const propsTextBlock: AccordionProps = {
-  title: 'Accordion title',
-  description: 'Accordion description 2',
-  bordered: true,
-  context,
-  accordionItems: [
-    {
-      label: 'Accordion label 1',
-      labelIcon: {
-        icon: 'CardIcon',
-      },
-      blocks: [TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 2',
-      blocks: [HEADLINE_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 3',
-      blocks: [LINK_DOCS_ACCORDION_BLOCK],
-    },
-  ],
+const ACCORDION_BLOCK_DEF: BlockDef = {
+  type: 'Accordion',
+  content: {
+    title: 'Accordion title',
+    description: 'Accordion description 2',
+    bordered: true,
+  } as AccordionProps,
 };
 
+export const ACCORDION_ITEM = (
+  <AccordionItem
+    context={context}
+    ancestors={[null, ACCORDION_BLOCK_DEF]}
+    label="Accordion label 1"
+    labelIcon={{ icon: 'CardIcon' }}
+  >
+    {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
+  </AccordionItem>
+);
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Accordion className="col-span-12" {...propsTextBlock} />
+      <Accordion className="col-span-12" context={context} {...ACCORDION_BLOCK_DEF.content}>
+        {ACCORDION_ITEM}
+        <AccordionItem
+          context={context}
+          ancestors={[null, ACCORDION_BLOCK_DEF]}
+          label="Accordion label 2"
+        >
+          {[HEADLINE_ACCORDION_BLOCK]}
+        </AccordionItem>
+        <AccordionItem
+          context={context}
+          ancestors={[null, ACCORDION_BLOCK_DEF]}
+          label="Accordion label 3"
+        >
+          {[LINK_DOCS_ACCORDION_BLOCK]}
+        </AccordionItem>
+      </Accordion>
     </div>
   ),
 };

package/src/components/Accordion/Accordion.fixture.tsx

@@ -1,140 +1,105 @@
 import { context } from '../../react/setup-fixture';
-import type {
-  GalleryBlockListDef,
-  HeadlineBlockListDef,
-  LinkDocsBlockListDef,
-  MiniGalleryBlockListDef,
-  PictureTextBlockListDef,
-  ProductTileBlockListDef,
-  TextBlockBlockListDef,
-  TileBlockListDef,
-} from '../../ui-kit/BlocksList/BlocksListProps';
+import { AccordionItem } from '../AccordionItem/AccordionItem';
+import { Gallery } from '../Gallery/Gallery';
 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 { PictureText } from '../PictureText/PictureText';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { ProductTile } from '../ProductTile/ProductTile';
 import { 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 } from '../Tile/Tile.fixture';
-import type { AccordionProps } from './Accordion';
 import { Accordion } from './Accordion';
 
-const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockBlockListDef = {
-  blockListType: 'TextBlock',
-  style: ['col-span-12'],
-  ...TEXT_BLOCK,
-};
+const TEXT_BLOCK_ACCORDION_BLOCK = (
+  <TextBlock className="col-span-12" context={context} {...TEXT_BLOCK} />
+);
 
-const HEADLINE_ACCORDION_BLOCK: HeadlineBlockListDef = {
-  blockListType: 'Headline',
-  style: ['col-span-12'],
-  ...HEADLINE,
-};
+const HEADLINE_ACCORDION_BLOCK = (
+  <Headline className="col-span-12" context={context} {...HEADLINE} />
+);
 
-const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextBlockListDef = {
-  blockListType: 'PictureText',
-  style: ['col-span-12'],
-  ...PICTURE_TEXT,
-};
+const PICTURE_TEXT_ACCORDION_BLOCK = (
+  <PictureText className="col-span-12" context={context} {...PICTURE_TEXT} />
+);
 
-const LINK_DOCS_ACCORDION_BLOCK: LinkDocsBlockListDef = {
-  blockListType: 'LinkDocs',
-  style: ['col-span-12'],
-  ...linkDocsContentExample,
-  title: '',
-};
+const LINK_DOCS_ACCORDION_BLOCK = (
+  <LinkDocs className="col-span-12" context={context} {...linkDocsContentExample} title="" />
+);
 
-const TILES_ACCORDION_BLOCK: TileBlockListDef = {
-  blockListType: 'Tile',
-  style: ['col-span-6'],
-  ...TILE,
-};
+const TILES_ACCORDION_BLOCK = <Tile className="col-span-6" context={context} {...TILE} />;
 
-const PRODUCT_TILES_ACCORDION_BLOCK: ProductTileBlockListDef = {
-  blockListType: 'ProductTile',
-  style: ['col-span-6'],
-  ...PRODUCT_TILE,
-};
+const PRODUCT_TILES_ACCORDION_BLOCK = (
+  <ProductTile className="col-span-6" context={context} {...PRODUCT_TILE} />
+);
 
-const GALLERY_ACCORDION_BLOCK: GalleryBlockListDef = {
-  blockListType: 'Gallery',
-  style: ['col-span-12'],
-  ...GALLERY,
-};
+const GALLERY_ACCORDION_BLOCK = <Gallery className="col-span-12" {...GALLERY} />;
 
-const MINI_GALLERY_ACCORDION_BLOCK: MiniGalleryBlockListDef = {
-  blockListType: 'MiniGallery',
-  style: ['col-span-12'],
-  ...MINI_GALLERY,
-};
+const MINI_GALLERY_ACCORDION_BLOCK = <MiniGallery className="col-span-12" {...MINI_GALLERY} />;
 
-const propsDefaultBlock: AccordionProps = {
-  context,
-  title: 'Accordion title',
-  description: 'Accordion description',
-  accordionItems: [
-    {
-      label: 'Accordion label 1',
-      blocks: [TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 2',
-      blocks: [PICTURE_TEXT_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 3',
-      blocks: [HEADLINE_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 4',
-      blocks: [LINK_DOCS_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 5',
-      blocks: [TILES_ACCORDION_BLOCK, TILES_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 6',
-      blocks: [PRODUCT_TILES_ACCORDION_BLOCK, PRODUCT_TILES_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 7',
-      blocks: [GALLERY_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 8',
-      blocks: [MINI_GALLERY_ACCORDION_BLOCK],
-    },
-  ],
-};
-
-const propsRightAlignTitleBlock: AccordionProps = {
-  context,
-  title: 'Accordion title',
-  accordionAlignTitle: 'right',
-  description: 'Accordion description',
-  accordionItems: [
-    {
-      label: 'Accordion label 1',
-      blocks: [TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 2',
-      blocks: [PICTURE_TEXT_ACCORDION_BLOCK],
-    },
-  ],
-};
+export const ACCORDION_ITEM = (
+  <AccordionItem context={context} label="Accordion label 1">
+    {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
+  </AccordionItem>
+);
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Accordion className="col-span-12" {...propsDefaultBlock} />
+      <Accordion
+        className="col-span-12"
+        context={context}
+        title="Accordion title"
+        description="Accordion description"
+      >
+        {ACCORDION_ITEM}
+        <AccordionItem context={context} label="Accordion label 2">
+          {[PICTURE_TEXT_ACCORDION_BLOCK]}
+        </AccordionItem>
+        <AccordionItem context={context} label="Accordion label 3">
+          {[HEADLINE_ACCORDION_BLOCK]}
+        </AccordionItem>
+        <AccordionItem context={context} label="Accordion label 4">
+          {[LINK_DOCS_ACCORDION_BLOCK]}
+        </AccordionItem>
+        <AccordionItem context={context} label="Accordion label 5">
+          {[TILES_ACCORDION_BLOCK, TILES_ACCORDION_BLOCK]}
+        </AccordionItem>
+        <AccordionItem context={context} label="Accordion label 6">
+          {[PRODUCT_TILES_ACCORDION_BLOCK, PRODUCT_TILES_ACCORDION_BLOCK]}
+        </AccordionItem>
+        <AccordionItem context={context} label="Accordion label 7">
+          {[GALLERY_ACCORDION_BLOCK]}
+        </AccordionItem>
+        <AccordionItem context={context} label="Accordion label 8">
+          {[MINI_GALLERY_ACCORDION_BLOCK]}
+        </AccordionItem>
+      </Accordion>
     </div>
   ),
   'right-align-title': (
     <div className="container grid grid-cols-12">
-      <Accordion className="col-span-12" {...propsRightAlignTitleBlock} />
+      <Accordion
+        className="col-span-12"
+        context={context}
+        title="Accordion title"
+        accordionAlignTitle="right"
+        description="Accordion description"
+      >
+        <AccordionItem context={context} label="Accordion label 1">
+          {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
+        </AccordionItem>
+        <AccordionItem context={context} label="Accordion label 2">
+          {[PICTURE_TEXT_ACCORDION_BLOCK]}
+        </AccordionItem>
+      </Accordion>
     </div>
   ),
 };