@redneckz/wildless-cms-uni-blocks 0.2.112 → 0.2.115

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

@@ -1,3 +1,6 @@
+/* eslint-disable max-lines-per-function */
+/* eslint-disable complexity */
+
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { ButtonProps, ButtonWithIconProps } from './ButtonProps';
@@ -13,7 +16,7 @@ const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   secondary: 'bg-secondary-light text-secondary-text',
 };
 
-const styleButton = 'inline-block text-center font-sans select-none';
+const styleButton = 'w-full text-center font-sans select-none';
 
 export interface ButtonCommonProps extends ButtonProps, ButtonWithIconProps {}
 
@@ -46,7 +49,7 @@ export const Button = JSX<ButtonCommonProps>(
           aria-disabled="true"
           aria-label={ariaLabel}
           tabIndex="-1"
-          className={`${styleButton} ${buttonDisabledStyleMap[version] || ''} ${
+          className={`inline-block ${styleButton} ${buttonDisabledStyleMap[version] || ''} ${
             rounded ? 'rounded-full' : 'rounded-md'
           } ${className || ''}`}
         >
@@ -57,9 +60,9 @@ export const Button = JSX<ButtonCommonProps>(
 
     return (
       <a
-        className={`${styleButton} cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${
-          rounded ? 'rounded-full' : 'rounded-md'
-        } ${className || ''}`}
+        className={`${styleButton} inline-block cursor-pointer no-underline ${
+          buttonStyleMap[version] || ''
+        } ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`}
         href={href}
         target={target}
         onClick={onClick}
@@ -77,18 +80,18 @@ export const ButtonInner = JSX<ButtonInner>(({ text, aboveText, appendLeft, roun
   const withoutText = !text && !aboveText && Boolean(appendLeft);
 
   const buttonInnerClasses = `flex items-center justify-center ${
-    withoutText ? 'h-12 w-12 min-h-12 min-w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[13px]'}`
+    withoutText ? 'h-12 w-12' : `px-9 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`
   } ${rounded ? 'rounded-full' : ''}`;
 
   return (
     <div className={buttonInnerClasses}>
       {appendLeft ? appendLeft : null}
-      {!withoutText ? (
+      {withoutText ? null : (
         <div>
-          <div className="text-2xs text-left">{aboveText}</div>
-          <div className="text-sm font-medium text-left">{text}</div>
+          <div className="text-m-2xs text-left">{aboveText}</div>
+          <div className="text-m-button font-medium text-left">{text}</div>
         </div>
-      ) : null}
+      )}
     </div>
   );
 });

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

@@ -4,27 +4,31 @@ import type { TopItemProps } from '../TopItem/TopItem';
 
 export type HeaderItemProps = TopItemProps;
 
-const TEXT_CLASSES = 'font-sans font-normal text-base';
-const BORDER_CLASSES = 'absolute left-0 -bottom-2 w-full h-[2px]';
+const TEXT_CLASSES = 'font-sans font-normal text-sm';
+const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
 
 export const HeaderItem = JSX<HeaderItemProps>(
-  ({ className, text, href, target, active, onClick, children, bgColor = 'bg-white' }) => (
-    <a
-      className={`relative inline-block bg-transparent text-center no-underline ${className || ''}`}
-      href={href}
-      target={target}
-      onClick={onClick}
-    >
-      <span className={getTextClasses(bgColor, active)}>{text || children}</span>
-      {active ? <div className={getBorderClasses(bgColor, active)} /> : null}
-    </a>
-  ),
+  ({ className, text, href, target, active, onClick, children, bgColor = 'bg-white' }) => {
+    return (
+      <a
+        className={`relative inline-block bg-transparent text-center no-underline ${
+          className || ''
+        }`}
+        href={href}
+        target={target}
+        onClick={onClick}
+      >
+        <span className={getTextClasses(bgColor, active)}>{text || children}</span>
+        {active ? <div className={getBorderClasses(bgColor, active)} /> : null}
+      </a>
+    );
+  },
 );
 
 const getTextClasses = (bgColor: BgColorVersion, active?: boolean) => {
   let classes = 'text-white';
   if (bgColor === 'bg-white') {
-    classes = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
+    classes = active ? 'text-primary-main' : 'text-secondary-text hover:text-primary-main';
   }
 
   return `${classes} ${TEXT_CLASSES}`;
@@ -35,5 +39,5 @@ const getBorderClasses = (bgColor: BgColorVersion, active?: boolean) => {
     return BORDER_CLASSES;
   }
 
-  return `${bgColor === 'bg-white' ? bgColor : 'bg-primary-main'} ${BORDER_CLASSES}`;
+  return `${bgColor === 'bg-white' ? 'bg-primary-main' : bgColor} ${BORDER_CLASSES}`;
 };

package/mobile/src/ui-kit/Icon/IconProps.ts

@@ -4,6 +4,10 @@
 export enum IconMap {
   'ActualBalanceIcon',
   'AppleIcon',
+  'AtmIcon',
+  'BankIcon',
+  'BurgerIcon',
+  'BurgerIconWhite',
   'Calendar2Icon',
   'CalendarCircleIcon',
   'CalendarIcon',
@@ -15,6 +19,7 @@ export enum IconMap {
   'CardWithGemIcon',
   'ChartSquareIcon',
   'ClockIcon',
+  'CloseIcon',
   'ComfortableCompIcon',
   'CreditCardsIcon',
   'DocIcon',
@@ -25,6 +30,7 @@ export enum IconMap {
   'EmptyWalletIcon',
   'EmptyWalletWhiteIcon',
   'EuroIcon',
+  'GeolocationIcon',
   'GlassIcon',
   'GlobalIcon',
   'GridIcon',
@@ -72,6 +78,10 @@ export enum IconMap {
  * @enumNames [
  *    "Деньги",
  *    "Лого «Apple»",
+ *    "Банкомат",
+ *    "Банк",
+ *    "Бургер",
+ *    "Бургер (белый)",
  *    "Календарь 2",
  *    "Скруглённый календарь",
  *    "Календарь",
@@ -83,6 +93,7 @@ export enum IconMap {
  *    "Карта с драгоценностями",
  *    "Деньги внутри кошелька",
  *    "Часы",
+ *    "Крестик",
  *    "Кресло",
  *    "Скидка",
  *    "Кредитные карты",
@@ -94,6 +105,7 @@ export enum IconMap {
  *    "Пустой кошелёк",
  *    "Пустой кошелёк (белый)",
  *    "Евро",
+ *    "Геолокация",
  *    "Зеркало",
  *    "Глобус",
  *    "Сетка",

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

@@ -6,14 +6,14 @@ export interface ImageProps {
   image: Picture;
 }
 
-export const Img = JSX<ImageProps>(({ className, image: { size, ...image } }) => {
+export const Img = JSX<ImageProps>(({ className = '', image: { size, ...image } }) => {
   const style = {
     width: size?.width ? `${size?.width}px` : '100%',
     height: size?.height ? `${size?.height}px` : '100%',
   };
 
   return (
-    <picture className={`flex-none ${className || ''}`}>
+    <picture className={className}>
       {image.sources?.length
         ? image.sources.map(({ src, format }, index) => (
             <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
@@ -21,6 +21,7 @@ export const Img = JSX<ImageProps>(({ className, image: { size, ...image } }) =>
         : null}
       <img
         src={image.src}
+        className={`m-auto ${image.className || ''}`}
         alt={image.alt || image.title}
         title={image.title}
         style={style}

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

@@ -7,6 +7,7 @@ export interface LogoProps {
   href: string;
   targetBlank: boolean;
   bgColor?: string;
+  hideTitle?: boolean;
 }
 
 const LOGO_PATHS = [
@@ -26,21 +27,23 @@ const TEXT_COLOR: Record<BgColorVersion, string> = {
 };
 
 export const Logo = JSX<Partial<LogoProps>>(
-  ({ className, href, children, targetBlank, bgColor = 'bg-white' }) => {
+  ({ className = '', href, children, targetBlank, bgColor = 'bg-white', hideTitle }) => {
     return (
       <a
-        className={`inline-flex items-center font-sans no-underline ${className || ''}`}
+        className={`inline-flex items-center font-sans no-underline ${className}`}
         href={href || 'https://rshb.ru/'}
         target={targetBlank ? '_blank' : '_self'}
       >
         <SVG
-          className={`${SVG_COLOR[bgColor]} w-10`}
+          className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`}
           viewBox="0 0 40 45"
           paths={LOGO_PATHS.map((d) => ({ d }))}
         />
-        <span className={`${TEXT_COLOR[bgColor]} text-base font-medium ml-2.5`}>
-          {children || 'Россельхозбанк'}
-        </span>
+        {!hideTitle && (
+          <span className={`${TEXT_COLOR[bgColor]} text-sm font-medium ml-2.5`}>
+            {children || 'Россельхозбанк'}
+          </span>
+        )}
       </a>
     );
   },

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

@@ -0,0 +1,46 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Button } from '../Button/Button';
+import { Icon } from '../Icon/Icon';
+
+export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
+  const { term, setTerm } = context.useSearch();
+  return (
+    <form className={`relative ${className || ''}`}>
+      <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
+        <div className="w-[20px] h-[20px]">
+          <Icon name="LoupeIcon" width="24" height="24" />
+        </div>
+        {!term && (
+          <label
+            htmlFor="search-bar-input"
+            className="font-sans font-normal text-sm text-secondary-text"
+          >
+            Поиск по сайту
+          </label>
+        )}
+      </div>
+      <input
+        id="search-bar-input"
+        className={
+          'h-12 pl-12 w-full peer font-sans font-normal text-base text-black border border-solid rounded h-full box-border outline-none pr-[6%] border-main-divider focus:border-primary-text'
+        }
+        value={term}
+        onChange={(e) => setTerm(e.target.value)}
+        type="text"
+        name="search-bar-input"
+      />
+      <Button
+        version="primary"
+        text="Найти"
+        className="w-auto invisible peer-focus:visible absolute top-1 right-1"
+        onClick={(e) => {
+          e.preventDefault();
+          console.log('click');
+        }}
+      >
+        <div className="font-normal text-sm px-9 py-[9px]">Найти</div>
+      </Button>
+    </form>
+  );
+});

package/mobile/src/utils/getAccordionItems.ts

@@ -0,0 +1,10 @@
+export const getAccordionItems = (items) =>
+  items?.map((item) => ({
+    label: item.text || '',
+    blocks: [
+      {
+        accordionBlockType: 'LinkDocs',
+        documents: item.items || [],
+      },
+    ],
+  }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.2.112",
+  "version": "0.2.115",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -73,14 +73,12 @@
     "start": "npm run cosmos",
     "start:mobile": "npm run cosmos:mobile",
     "prebuild": "rimraf ./mobile/src",
-    "build": "npm run build:lib && npm run build:commonjs && npm run bundle && npm run build:style && npm run build:design && npm run build:mobile && npm run build:design:mobile",
+    "build": "npm run build:lib && npm run build:commonjs && npm run bundle && npm run build:style && npm run build:design && npm run build:mobile",
     "prebuild:mobile": "rimraf ./mobile/src && node ./scripts/prebuild-mobile.js ./src ./mobile",
     "build:mobile": "npm run --prefix ./mobile build",
     "postbuild": "npm run size",
     "build:design": "npm run cosmos:export || exit 0",
     "postbuild:design": "copyfiles --up 1 \"./docs/**/*\" ./build || exit 0",
-    "build:design:mobile": "npm run cosmos:export:mobile || exit 0",
-    "postbuild:design:mobile": "copyfiles --up 1 \"./docs/mobile/**/*\" ./build || exit 0",
     "build:lib": "rimraf ./lib && tsc --build --verbose",
     "postbuild:lib": "replace-in-file --configFile=replace-config.lib.cjs --verbose",
     "build:commonjs": "rimraf ./dist && tsc --module commonjs --noImplicitUseStrict --outDir ./dist",
@@ -98,10 +96,8 @@
     "precosmos:mobile": "npm run build:icons",
     "cosmos:mobile": "cosmos --config cosmos.config.mobile.json",
     "precosmos:export": "npm run build:icons",
-    "cosmos:export": "rimraf ./build && cosmos-export",
-    "prepare": "husky install && npm run --prefix ./eslint-rules build || exit 0",
-    "precosmos:export:mobile": "npm run build:icons",
-    "cosmos:export:mobile": "rimraf ./build && cosmos-export --config cosmos.config.mobile.json"
+    "cosmos:export": "rimraf ./build && cosmos-export && cosmos-export --config cosmos.config.mobile.json",
+    "prepare": "husky install && npm run --prefix ./eslint-rules build || exit 0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

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

@@ -0,0 +1,65 @@
+import { context } from '../../setup-fixture';
+import { HEADLINE } from '../Headline/Headline.fixture';
+import { LINK_DOCS } from '../LinkDocs/LinkDocs.fixture';
+import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
+import type { AccordionProps } from './Accordion';
+import { Accordion } from './Accordion';
+import type {
+  HeadlineAccordionBlock,
+  LinkDocsAccordionBlock,
+  PictureTextAccordionBlock,
+  TextBlockAccordionBlock,
+} from './AccordionContent';
+
+const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockAccordionBlock = {
+  accordionBlockType: 'TextBlock',
+  ...TEXT_BLOCK,
+};
+
+const HEADLINE_ACCORDION_BLOCK: HeadlineAccordionBlock = {
+  accordionBlockType: 'Headline',
+  ...HEADLINE,
+};
+
+const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlock = {
+  accordionBlockType: 'PictureText',
+  ...PICTURE_TEXT,
+};
+
+const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlock = {
+  accordionBlockType: 'LinkDocs',
+  ...LINK_DOCS,
+  title: '',
+};
+
+const propsTextBlock: AccordionProps = {
+  title: 'Accordion title',
+  description: 'Accordion description 2',
+  bordered: true,
+  context,
+  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],
+    },
+  ],
+};
+
+export default (
+  <div className="container grid grid-cols-12">
+    <Accordion className="col-span-12" {...propsTextBlock} />
+  </div>
+);

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

@@ -30,6 +30,7 @@ const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlock = {
 const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlock = {
   accordionBlockType: 'LinkDocs',
   ...LINK_DOCS,
+  title: '',
 };
 
 const propsTextBlock: AccordionProps = {

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

@@ -0,0 +1,38 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Title } from '../../ui-kit/Title/Title';
+import type { AccordionContent } from './AccordionContent';
+import { AccordionItem } from './AccordionItem';
+
+export interface AccordionProps extends AccordionContent, UniBlockProps {}
+
+export const Accordion = JSX<AccordionProps>(
+  ({ title, description, accordionItems, context, className = '', bordered }) => {
+    return (
+      <section
+        className={`py-6 font-sans bg-white text-primary-text ${
+          bordered ? 'px-4' : ''
+        } ${className}`}
+      >
+        {title ? (
+          <Title className="m-0 mb-2 font-medium text-center" size="M">
+            {title}
+          </Title>
+        ) : null}
+        {description ? <div className="mb-5 text-m-md text-center">{description}</div> : null}
+        {accordionItems?.length ? (
+          <ul className="list-none m-0 p-0">
+            {accordionItems.map((item, i) => (
+              <AccordionItem
+                key={`AccordionItem${i}`}
+                {...item}
+                context={context}
+                bordered={bordered}
+              />
+            ))}
+          </ul>
+        ) : null}
+      </section>
+    );
+  },
+);

package/src/components/Accordion/AccordionContent.ts

@@ -66,6 +66,11 @@ export interface AccordionItemCommonProps {
   label?: string;
   /** @title Блоки */
   blocks?: AccordionBlockProps[];
+  /**
+   * @title Отображать/скрывать обводку элемента
+   * @default false
+   */
+  bordered?: boolean; // TODO: только для мобильной версии
 }
 
 /**
@@ -76,4 +81,11 @@ export interface AccordionContent {
   title?: string;
   /** @title Список */
   accordionItems?: AccordionItemCommonProps[];
+  /** @title Подзаголовок */
+  description?: string; // TODO: только для мобильной версии
+  /**
+   * @title Отображать/скрывать обводку у элемента списка
+   * @default false
+   */
+  bordered?: boolean; // TODO: только для мобильной версии
 }

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

@@ -0,0 +1,39 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { AccordionItemCommonProps } from './AccordionContent';
+import { AccordionItemInner } from './AccordionItemInner';
+import { isActiveHandler } from './utils/isActiveHandler';
+
+export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
+
+export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, bordered, context }) => {
+  const { hasContent, icon, handleToggle } = isActiveHandler({
+    context,
+    blocks,
+  });
+
+  return (
+    <li
+      className={`${
+        bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0 py-[14px]'
+      } border-solid border-main-divider`}
+    >
+      <button
+        className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
+        ${hasContent ? 'group cursor-pointer' : ''}`}
+        onClick={handleToggle}
+      >
+        <span
+          className={`text-m-title-xs pr-2.5 font-medium ${
+            hasContent ? 'group-hover:text-primary-main' : ''
+          }`}
+        >
+          {label}
+        </span>
+        {hasContent ? <Icon name={icon} width="24" height="24" /> : null}
+      </button>
+      {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
+    </li>
+  );
+});

package/src/components/Accordion/AccordionItem.tsx

@@ -1,29 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import type { JSXBlock } from '../ContentPage/ContentPage';
-import { ContentPageContext } from '../ContentPage/ContentPageContext';
-import { AccordionBlocks } from './AccordionBlocks';
-import type { AccordionBlockProps, AccordionItemCommonProps } from './AccordionContent';
+import type { AccordionItemCommonProps } from './AccordionContent';
+import { AccordionItemInner } from './AccordionItemInner';
+import { isActiveHandler } from './utils/isActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
 export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, context }) => {
-  const [isActive, setIsActive] = context.useState(false);
-  const hasContent = blocks?.length;
-  const icon = isActive ? 'MinusIcon' : 'PlusIcon';
-
-  const handleToggle = (e: MouseEvent) => {
-    if (!hasContent) {
-      return;
-    }
-
-    setIsActive(!isActive);
-    const contentBlock = getContentBlock(e);
-    contentBlock.style.maxHeight = contentBlock.style.maxHeight
-      ? null
-      : `${contentBlock.scrollHeight}px`;
-  };
+  const { hasContent, icon, handleToggle } = isActiveHandler({
+    context,
+    blocks,
+  });
 
   return (
     <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
@@ -33,7 +21,7 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, context }
         onClick={handleToggle}
       >
         <span
-          className={`m-0 text-xl pr-2.5 font-medium ${
+          className={`text-xl pr-2.5 font-medium ${
             hasContent ? 'group-hover:text-primary-main' : ''
           }`}
         >
@@ -41,32 +29,7 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, context }
         </span>
         {hasContent ? <Icon name={icon} width="24" height="24" /> : null}
       </button>
-      {hasContent ? (
-        <div
-          className={`${
-            isActive ? 'pb-5' : ''
-          } text-sm transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0 `}
-        >
-          {blocks?.length ? blocks.map((block, i) => renderBlock(block, i, context)) : null}
-        </div>
-      ) : null}
+      {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
     </li>
   );
 });
-
-const renderBlock = (block: AccordionBlockProps, i: number, context: ContentPageContext) => {
-  const type = block?.accordionBlockType;
-  if (!type || !(type in AccordionBlocks)) {
-    return null;
-  }
-
-  const AccordionBlock: JSXBlock = AccordionBlocks[type];
-  return (
-    <div className="mb-5 last:mb-0" key={`block_${i}`}>
-      <AccordionBlock context={context} {...block} />
-    </div>
-  );
-};
-
-const getContentBlock = ({ target }) =>
-  target.tagName === 'BUTTON' ? target.nextSibling : target.parentNode.nextSibling;

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

@@ -0,0 +1,28 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { JSXBlock } from '../ContentPage/ContentPage';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { AccordionBlocks } from './AccordionBlocks';
+import type { AccordionBlockProps } from './AccordionContent';
+import type { AccordionItemProps } from './AccordionItem';
+
+export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
+  return (
+    <div className={`transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0 `}>
+      {blocks?.length ? blocks.map(renderBlock(context)) : null}
+    </div>
+  );
+});
+
+const renderBlock = (context: ContentPageContext) => (block: AccordionBlockProps, i: number) => {
+  const type = block?.accordionBlockType;
+  if (!type || !(type in AccordionBlocks)) {
+    return null;
+  }
+
+  const AccordionBlock: JSXBlock = AccordionBlocks[type];
+  return (
+    <div className="mb-5 last:mb-0 py-2.5" key={`block_${i}`}>
+      <AccordionBlock context={context} {...block} className="!p-0" />
+    </div>
+  );
+};

package/src/components/Accordion/AccordionItemInner.tsx

@@ -0,0 +1,28 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { JSXBlock } from '../ContentPage/ContentPage';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { AccordionBlocks } from './AccordionBlocks';
+import type { AccordionBlockProps } from './AccordionContent';
+import type { AccordionItemProps } from './AccordionItem';
+
+export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
+  return (
+    <div className={'transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0'}>
+      {blocks?.length ? blocks.map(renderBlock(context)) : null}
+    </div>
+  );
+});
+
+const renderBlock = (context: ContentPageContext) => (block: AccordionBlockProps, i: number) => {
+  const type = block?.accordionBlockType;
+  if (!type || !(type in AccordionBlocks)) {
+    return null;
+  }
+
+  const AccordionBlock: JSXBlock = AccordionBlocks[type];
+  return (
+    <div className="mb-5 last:mb-0 pb-5" key={`block_${i}`}>
+      <AccordionBlock context={context} {...block} className="!p-0" />
+    </div>
+  );
+};

package/src/components/Accordion/utils/isActiveHandler.ts

@@ -0,0 +1,24 @@
+import type { IconName } from '../../../ui-kit/Icon/IconProps';
+
+export const isActiveHandler = ({ context, blocks }) => {
+  const [isActive, setIsActive] = context.useState(false);
+  const hasContent = blocks?.length;
+  const icon: IconName = isActive ? 'MinusIcon' : 'PlusIcon';
+
+  const getContentBlock = ({ target }) =>
+    target.tagName === 'BUTTON' ? target.nextSibling : target.parentNode.nextSibling;
+
+  const handleToggle = (e: MouseEvent) => {
+    if (!hasContent) {
+      return;
+    }
+
+    setIsActive(!isActive);
+    const contentBlock = getContentBlock(e);
+    contentBlock.style.maxHeight = contentBlock.style.maxHeight
+      ? null
+      : `${contentBlock.scrollHeight}px`;
+  };
+
+  return { isActive, hasContent, icon, handleToggle };
+};