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

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

@@ -0,0 +1,79 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+/**
+ * @title Размер текста
+ */
+export type TextSize =
+  | ''
+  | 'text-xs-light'
+  | 'text-s-light'
+  | 'text-s'
+  | 'text-m-light'
+  | 'text-m'
+  | 'text-l-light'
+  | 'text-l'
+  | 'text-xl-light'
+  | 'text-xl';
+
+/**
+ * @title Размер текста
+ */
+export type TitleSize =
+  | ''
+  | 'text-h6'
+  | 'text-h5'
+  | 'text-h5-light'
+  | 'text-h4'
+  | 'text-h3'
+  | 'text-h2'
+  | 'text-h1'
+  | 'text-h0'
+  | 'text-m-title'
+  | 'text-m-title-xs'
+  | 'title-extra'
+  | 'title-huge';
+
+/**
+ * @title Цвет текста
+ */
+export type TextColor =
+  | ''
+  | 'text-main'
+  | 'text-primary-text'
+  | 'text-primary-main'
+  | 'text-secondary-text'
+  | 'text-secondary-light'
+  | 'text-error'
+  | 'text-white'
+  | 'text-green';
+
+/**
+ * @title Выравнивание
+ * @enumNames [
+ *    "По умолчанию",
+ *    "По левому краю",
+ *    "По центру",
+ *    "По правому краю"
+ * ]
+ */
+export type TextAlign = '' | 'text-left' | 'text-center' | 'text-right';
+
+/**
+ * @title Насыщенность шрифта
+ */
+export type FontWeight = '' | 'font-light' | 'font-normal' | 'font-medium';
+
+interface TextProps {
+  size?: TextSize | TitleSize;
+  color?: TextColor;
+  align?: TextAlign;
+  font?: FontWeight;
+}
+
+export const Text = JSX<TextProps>((props) => {
+  const { size = '', color = '', align = '', font = '', children } = props;
+
+  const textClasses = `font-sans ${size} ${color} ${align} ${font}`;
+
+  return <span className={textClasses}>{children}</span>;
+});

package/package.json

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

package/src/BlockRenderer/BlockRendererOptions.ts

@@ -0,0 +1,12 @@
+import type { BlockAncestors, BlockDecorator } from '../model/BlockDecorator';
+import type { BlocksRegistry } from '../model/BlocksRegistry';
+import type { ContentPageDef, Slot } from '../model/ContentPageDef';
+
+export interface BlockRendererOptions {
+  key?: string;
+  page?: ContentPageDef;
+  blockDecorator?: BlockDecorator;
+  blocksRegistry?: BlocksRegistry;
+  parent?: Slot;
+  ancestors?: BlockAncestors;
+}

package/src/BlockRenderer/defaultBlockDecorator.ts

@@ -0,0 +1,4 @@
+import type { BlockDecorator } from '../model/BlockDecorator';
+
+export const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
+  render({ blockClassName, block });

package/src/{model → BlockRenderer}/getParentBlockContent.ts

@@ -1,11 +1,11 @@
-import type { BlockAncestors } from './BlockDecorator';
+import type { BlockRendererOptions } from './BlockRendererOptions';
 import { getParentBlockDef } from './getParentBlockDef';
 
 export function getParentBlockContent<C extends Record<string, any>>(
-  ancestors: BlockAncestors | undefined,
+  options: BlockRendererOptions | undefined,
   defaultContent: C,
 ): C {
-  const { content } = getParentBlockDef(ancestors);
+  const { content } = getParentBlockDef(options);
 
   return (content as C) || defaultContent;
 }

package/src/BlockRenderer/getParentBlockDef.ts

@@ -0,0 +1,6 @@
+import type { BlockRendererOptions } from '../BlockRenderer/BlockRendererOptions';
+import type { BlockDef } from '../model/ContentPageDef';
+
+export function getParentBlockDef(options: BlockRendererOptions | undefined): BlockDef {
+  return options?.parent || {};
+}

package/src/BlockRenderer/renderBlock.tsx

@@ -0,0 +1,47 @@
+import type { BlockAncestors } from '../model/BlockDecorator';
+import type { BlockDef } from '../model/ContentPageDef';
+import { style2className } from '../utils/style2className';
+import type { BlockRendererOptions } from './BlockRendererOptions';
+import { defaultBlockDecorator } from './defaultBlockDecorator';
+
+const DEFAULT_ANCESTORS: BlockAncestors = [];
+const DEFAULT_STYLE = ['col-span-12'];
+
+export function renderBlock(block: BlockDef, options: BlockRendererOptions) {
+  const {
+    key,
+    blockDecorator = defaultBlockDecorator,
+    blocksRegistry = {},
+    ancestors = DEFAULT_ANCESTORS,
+  } = options;
+  const { type } = block;
+
+  if (!(type && type in blocksRegistry)) {
+    console.warn(`No block with "${type}" is registered`);
+  }
+
+  const BlockComponent = type && blocksRegistry[type];
+
+  return blockDecorator(
+    {
+      blockClassName: `scroll-mt-12 ${style2className(block.style || DEFAULT_STYLE)}`, // TODO scroll-mt-12 ? here?
+      block,
+      ancestors,
+      // Adjusted by decorator block and blockClassName
+      render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
+        const { content } = adjustedBlock;
+
+        return BlockComponent ? (
+          <BlockComponent
+            key={key}
+            className={adjustedBlockClassName}
+            block={block}
+            options={options}
+            {...content}
+          />
+        ) : null;
+      },
+    },
+    key,
+  );
+}

package/src/BlockRenderer/renderBlockList.tsx

@@ -0,0 +1,33 @@
+import type { BlockAncestors, SlotName } from '../model/BlockDecorator';
+import { DEFAULT_SLOT_NAME } from '../model/BlockDecorator';
+import type { BlockDef } from '../model/ContentPageDef';
+import type { VNode } from '../model/VNode';
+import type { BlockRendererOptions } from './BlockRendererOptions';
+import { renderBlock } from './renderBlock';
+
+export interface BlocksListRendererProps extends BlockRendererOptions {
+  slotName?: SlotName;
+  renderChild?: (block: BlockDef, options: BlockRendererOptions) => VNode;
+}
+
+const EMPTY_ANCESTORS: BlockAncestors = [];
+
+export const renderBlocksList = (
+  blocks: BlockDef[] | undefined,
+  {
+    key,
+    ancestors = EMPTY_ANCESTORS,
+    slotName = DEFAULT_SLOT_NAME,
+    renderChild = renderBlock,
+    ...options
+  }: BlocksListRendererProps,
+): VNode[] =>
+  (blocks || []).map((_: BlockDef, j: number) =>
+    renderChild(_, {
+      ...options,
+      key: `${key ? key : _.type}-${j}`,
+      ancestors: options.parent
+        ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
+        : ancestors,
+    }),
+  );

package/src/BlockRenderer/renderChildren.ts

@@ -0,0 +1,25 @@
+import type { BlockDef } from '../model/ContentPageDef';
+import type { UniBlockProps } from '../model/JSXBlock';
+import type { VNode } from '../model/VNode';
+import type { BlockRendererOptions } from './BlockRendererOptions';
+import { renderBlocksList } from './renderBlockList';
+
+interface ChildrenRendererProps extends UniBlockProps {
+  children?: VNode;
+  renderChild?: (block: BlockDef, options: BlockRendererOptions) => VNode;
+}
+
+export function renderChildren({
+  children,
+  block,
+  options,
+  renderChild,
+}: ChildrenRendererProps): VNode[] | null {
+  if (children) {
+    return children;
+  }
+
+  return block && options
+    ? renderBlocksList(block.blocks, { ...options, parent: block, renderChild })
+    : null;
+}

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

@@ -1,70 +1,55 @@
-import { DEFAULT_SLOT_NAME } from '../../model/BlockDecorator';
-import type { BlockDef, ContentPageDef } from '../../model/ContentPageDef';
-import '../../react/setup-fixture';
-import { AccordionItem } from '../AccordionItem/AccordionItem';
-import { Headline } from '../Headline/Headline';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import type { BlockDef } from '../../model/ContentPageDef';
+import '../../setup-fixture';
+import { Blocks } from '../Blocks';
 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 page = {} as ContentPageDef;
-
-const TEXT_BLOCK_ACCORDION_BLOCK = <TextBlock {...TEXT_BLOCK} />;
-
-const HEADLINE_ACCORDION_BLOCK = <Headline {...HEADLINE} />;
-
-const LINK_DOCS_ACCORDION_BLOCK = <LinkDocs {...linkDocsContentExample} title="" />;
-
-const ACCORDION_BLOCK_DEF: BlockDef = {
-  type: 'Accordion',
+export const ACCORDION_ITEM: BlockDef = {
+  type: 'AccordionItem',
   content: {
-    title: 'Accordion title',
-    description: 'Accordion description 2',
-    bordered: true,
-  } as AccordionProps,
+    label: 'Accordion label 1',
+    labelIcon: { icon: 'CardIcon' },
+    isExpanded: true,
+  },
+  blocks: [
+    { type: 'TextBlock', content: TEXT_BLOCK },
+    { type: 'TextBlock', content: TEXT_BLOCK },
+  ],
 };
 
-export const ACCORDION_ITEM = (
-  <AccordionItem
-    ancestors={[
-      [page, DEFAULT_SLOT_NAME],
-      [ACCORDION_BLOCK_DEF, DEFAULT_SLOT_NAME],
-    ]}
-    label="Accordion label 1"
-    labelIcon={{ icon: 'CardIcon' }}
-  >
-    {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-  </AccordionItem>
-);
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Accordion className="col-span-12" {...ACCORDION_BLOCK_DEF.content}>
-        {ACCORDION_ITEM}
-        <AccordionItem
-          ancestors={[
-            [page, DEFAULT_SLOT_NAME],
-            [ACCORDION_BLOCK_DEF, DEFAULT_SLOT_NAME],
-          ]}
-          label="Accordion label 2"
-        >
-          {[HEADLINE_ACCORDION_BLOCK]}
-        </AccordionItem>
-        <AccordionItem
-          ancestors={[
-            [page, DEFAULT_SLOT_NAME],
-            [ACCORDION_BLOCK_DEF, DEFAULT_SLOT_NAME],
-          ]}
-          label="Accordion label 3"
-        >
-          {[LINK_DOCS_ACCORDION_BLOCK]}
-        </AccordionItem>
-      </Accordion>
+      <Accordion
+        className="col-span-12"
+        title="Accordion title"
+        description="Accordion description 2"
+        bordered={true}
+        block={{
+          type: 'Accordion',
+          blocks: [
+            ACCORDION_ITEM,
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 2', isExpanded: true },
+              blocks: [{ type: 'Headline', content: HEADLINE }],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 3', isExpanded: true },
+              blocks: [{ type: 'LinkDocs', content: { ...linkDocsContentExample, title: '' } }],
+            },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
 };

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

@@ -1,46 +1,29 @@
-import '../../react/setup-fixture';
-import { AccordionItem } from '../AccordionItem/AccordionItem';
-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 { 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 { Accordion } from './Accordion';
 
-const TEXT_BLOCK_ACCORDION_BLOCK = <TextBlock className="col-span-12" {...TEXT_BLOCK} />;
-
-const HEADLINE_ACCORDION_BLOCK = <Headline className="col-span-12" {...HEADLINE} />;
-
-const PICTURE_TEXT_ACCORDION_BLOCK = <PictureText className="col-span-12" {...PICTURE_TEXT} />;
-
-const LINK_DOCS_ACCORDION_BLOCK = (
-  <LinkDocs className="col-span-12" {...linkDocsContentExample} title="" />
-);
-
-const TILES_ACCORDION_BLOCK = <Tile className="col-span-6" {...TILE} />;
-
-const PRODUCT_TILES_ACCORDION_BLOCK = <ProductTile className="col-span-6" {...PRODUCT_TILE} />;
-
-const GALLERY_ACCORDION_BLOCK = <Gallery className="col-span-12" {...GALLERY} />;
-
-const MINI_GALLERY_ACCORDION_BLOCK = <MiniGallery className="col-span-12" {...MINI_GALLERY} />;
+export const ACCORDION_ITEM: BlockDef = {
+  type: 'AccordionItem',
+  content: { label: 'Accordion label 1', isExpanded: true },
+  blocks: [
+    { type: 'TextBlock', content: TEXT_BLOCK },
+    { type: 'TextBlock', content: TEXT_BLOCK },
+  ],
+};
 
-export const ACCORDION_ITEM = (
-  <AccordionItem label="Accordion label 1">
-    {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-  </AccordionItem>
-);
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
   default: (
@@ -49,20 +32,55 @@ export default {
         className="col-span-12"
         title="Accordion title"
         description="Accordion description"
-      >
-        {ACCORDION_ITEM}
-        <AccordionItem label="Accordion label 2">{[PICTURE_TEXT_ACCORDION_BLOCK]}</AccordionItem>
-        <AccordionItem label="Accordion label 3">{[HEADLINE_ACCORDION_BLOCK]}</AccordionItem>
-        <AccordionItem label="Accordion label 4">{[LINK_DOCS_ACCORDION_BLOCK]}</AccordionItem>
-        <AccordionItem label="Accordion label 5">
-          {[TILES_ACCORDION_BLOCK, TILES_ACCORDION_BLOCK]}
-        </AccordionItem>
-        <AccordionItem label="Accordion label 6">
-          {[PRODUCT_TILES_ACCORDION_BLOCK, PRODUCT_TILES_ACCORDION_BLOCK]}
-        </AccordionItem>
-        <AccordionItem label="Accordion label 7">{[GALLERY_ACCORDION_BLOCK]}</AccordionItem>
-        <AccordionItem label="Accordion label 8">{[MINI_GALLERY_ACCORDION_BLOCK]}</AccordionItem>
-      </Accordion>
+        block={{
+          type: 'Accordion',
+          blocks: [
+            ACCORDION_ITEM,
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 2', isExpanded: true },
+              blocks: [{ type: 'PictureText', content: PICTURE_TEXT }],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 3', isExpanded: true },
+              blocks: [{ type: 'Headline', content: HEADLINE }],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 4' },
+              blocks: [{ type: 'LinkDocs', content: { ...linkDocsContentExample, title: '' } }],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 5' },
+              blocks: [
+                { type: 'Tile', content: TILE, style: ['col-span-6'] },
+                { type: 'Tile', content: TILE, style: ['col-span-6'] },
+              ],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 6' },
+              blocks: [
+                { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+                { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+              ],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 7' },
+              blocks: [{ type: 'Gallery', content: GALLERY }],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 8' },
+              blocks: [{ type: 'MiniGallery', content: MINI_GALLERY }],
+            },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
   'right-align-title': (
@@ -72,12 +90,21 @@ export default {
         title="Accordion title"
         accordionAlignTitle="right"
         description="Accordion description"
-      >
-        <AccordionItem label="Accordion label 1">
-          {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-        </AccordionItem>
-        <AccordionItem label="Accordion label 2">{[PICTURE_TEXT_ACCORDION_BLOCK]}</AccordionItem>
-      </Accordion>
+        block={{
+          type: 'Accordion',
+          blocks: [
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 1', isExpanded: true },
+              blocks: [
+                { type: 'TextBlock', content: TEXT_BLOCK },
+                { type: 'TextBlock', content: TEXT_BLOCK },
+              ],
+            },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
 };

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

@@ -1,21 +1,26 @@
 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 { Heading } from '../../ui-kit/Heading/Heading';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItemsList } from './AccordionItemsList';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
 export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
-  ({ title, description, className = '', children, ...rest }) => (
-    <BlockWrapper
-      className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}
-      {...rest}
-    >
+  ({ title, description, className = '', ...rest }) => (
+    <BlockWrapper className={`py-6 px-4 bg-white text-primary-text ${className}`} {...rest}>
       {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
-      {description ? <div className="mb-5 text-m-light text-center">{description}</div> : null}
-      <AccordionItemsList>{children}</AccordionItemsList>
+      {description ? (
+        <div className="mb-5">
+          <Paragraph size="text-m" font="font-light" align="text-center">
+            {description}
+          </Paragraph>
+        </div>
+      ) : null}
+      <AccordionItemsList>{renderChildren(rest)}</AccordionItemsList>
     </BlockWrapper>
   ),
 );

package/src/components/Accordion/Accordion.tsx

@@ -1,17 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { AlignText } from '../../model/AlignText';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItemsList } from './AccordionItemsList';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
 export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
-  ({ className = '', title, accordionAlignTitle = 'center', description, children, ...rest }) => (
+  ({ className = '', title, accordionAlignTitle = 'center', description, ...rest }) => (
     <BlockWrapper
-      className={`p-[50px] mb-1 last:mb-0 font-sans bg-white text-primary-text ${className}`}
+      className={`p-[50px] mb-1 last:mb-0 bg-white text-primary-text ${className}`}
       {...rest}
     >
       {title ? (
@@ -22,8 +24,12 @@ export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
           title={title}
         />
       ) : null}
-      {description ? <div className="mb-2.5 text-l">{description}</div> : null}
-      <AccordionItemsList>{children}</AccordionItemsList>
+      {description ? (
+        <div className="mb-2.5">
+          <Paragraph size="text-l">{description}</Paragraph>
+        </div>
+      ) : null}
+      <AccordionItemsList>{renderChildren(rest)}</AccordionItemsList>
     </BlockWrapper>
   ),
 );

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

@@ -1,6 +1,17 @@
-import { ACCORDION_ITEM } from '../Accordion/Accordion.fixture.mobile';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { ACCORDION_ITEM } from '../Accordion/Accordion.fixture';
 import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+import { Blocks } from '../Blocks';
+import { AccordionItem } from './AccordionItem';
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
-  default: <AccordionItemsList>{ACCORDION_ITEM}</AccordionItemsList>,
+  default: (
+    <AccordionItemsList>
+      <AccordionItem {...ACCORDION_ITEM.content} block={ACCORDION_ITEM} options={options} />
+    </AccordionItemsList>
+  ),
 };

package/src/components/AccordionItem/AccordionItem.fixture.tsx

@@ -1,6 +1,17 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { ACCORDION_ITEM } from '../Accordion/Accordion.fixture';
 import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+import { Blocks } from '../Blocks';
+import { AccordionItem } from './AccordionItem';
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
-  default: <AccordionItemsList>{ACCORDION_ITEM}</AccordionItemsList>,
+  default: (
+    <AccordionItemsList>
+      <AccordionItem {...ACCORDION_ITEM.content} block={ACCORDION_ITEM} options={options} />
+    </AccordionItemsList>
+  ),
 };