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

package/mobile/lib/model/BlocksRegistry.d.ts

@@ -1,5 +1,8 @@
 import type { UNIComponent } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from './ContentPageDef';
 import type { VNode } from './VNode';
-export declare type JSXBlock<BlockProps = Record<string, any>> = UNIComponent<BlockProps & UniBlockProps, any, VNode | VNode[]>;
+export declare type JSXBlock<BlockProps = Record<string, any>> = UNIComponent<BlockProps & UniBlockProps, any, VNode | VNode[]> & {
+    childrenTypes?: string[];
+    renderChild?: (child: VNode, i: number) => VNode;
+};
 export declare type BlocksRegistry<BlockProps = Record<string, any>> = Record<string, JSXBlock<BlockProps>>;

package/mobile/lib/ui-kit/Foldable/DefaultFoldButton.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { ColorPalette } from '../../model/ContentPageDef';
+import type { IconName } from '../Icon/IconProps';
+import type { FoldablePartProps } from './FoldablePartProps';
+interface DefaultFoldButtonProps {
+    className?: string;
+    label: string;
+    icon: IconName;
+    dataTheme?: ColorPalette;
+    onClick?: () => void;
+}
+export declare const DefaultFoldButton: import("@redneckz/uni-jsx").UNIComponent<DefaultFoldButtonProps, any, any>;
+export declare const renderDefaultFoldButton: ({ isUnfolded, onToggle }: FoldablePartProps) => JSX.Element;
+export {};

package/mobile/lib/ui-kit/Foldable/DefaultFoldButton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+import { Img } from '../Img/Img.js';
+export const DefaultFoldButton = JSX(({ className, label, icon, dataTheme = '', onClick }) => (_jsxs("button", { className: `border-none bg-primary-main hover:bg-primary-hover px-0 py-5 mb-[1px] w-full font-sans text-white flex justify-center cursor-pointer ${className || ''}`, "data-theme": dataTheme, onClick: onClick, children: [_jsx("span", { className: "text-h4 pr-3", children: label }), icon ? (_jsx(Img, { image: {
+                icon,
+                iconVersion: 'white',
+            }, className: "flex-shrink-0 my-auto", width: "20", height: "20", asSVG: true })) : null] })));
+export const renderDefaultFoldButton = ({ isUnfolded, onToggle }) => {
+    const labels = ['Развернуть', 'Скрыть'];
+    const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
+    return (_jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
+};
+//# sourceMappingURL=DefaultFoldButton.js.map

package/mobile/lib/ui-kit/Foldable/DefaultFoldButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultFoldButton.js","sourceRoot":"","sources":["../../../src/ui-kit/Foldable/DefaultFoldButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAWjC,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAClC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CACvD,kBACE,SAAS,EAAE,wIACT,SAAS,IAAI,EACf,EAAE,gBACU,SAAS,EACrB,OAAO,EAAE,OAAO,aAEhB,eAAM,SAAS,EAAC,cAAc,YAAE,KAAK,GAAQ,EAC5C,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,GAAG,IACF,KAAK,EAAE;gBACL,IAAI;gBACJ,WAAW,EAAE,OAAO;aACrB,EACD,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,KAAK,SACL,CACH,CAAC,CAAC,CAAC,IAAI,IACD,CACV,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAqB,EAAE,EAAE;IACrF,MAAM,MAAM,GAAG,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IACxC,MAAM,KAAK,GAAe,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IAE3D,OAAO,CACL,KAAC,iBAAiB,IAChB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EAC/B,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EACjC,OAAO,EAAE,QAAQ,GACjB,CACH,CAAC;AACJ,CAAC,CAAC"}

package/mobile/lib/ui-kit/Foldable/Foldable.d.ts

@@ -1,16 +1,9 @@
 import type { VNode } from '../../model/VNode';
-interface RenderFoldButtonProps {
-    isUnfolded: boolean;
-    onToggle: () => void;
-}
+import type { FoldablePartProps } from './FoldablePartProps';
 export interface FoldableProps {
-    blocks?: VNode[];
-    hiddenBlocksNum?: number;
     unfoldedByDefault?: boolean;
     isFoldButtonOnTop?: boolean;
-    containerClassName?: string;
-    blockWrapper?: (children: VNode) => VNode;
-    renderFoldButton?: (props: RenderFoldButtonProps) => VNode;
+    renderFoldableSection: (props: FoldablePartProps) => VNode;
+    renderFoldButton?: (props: FoldablePartProps) => VNode;
 }
 export declare const Foldable: import("@redneckz/uni-jsx").UNIComponent<FoldableProps, any, any>;
-export {};

package/mobile/lib/ui-kit/Foldable/Foldable.js

@@ -1,29 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
-import { useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { clamp } from '../../utils/clamp.js';
-import { DefaultButton } from './DefaultButton.js';
-export const Foldable = JSX(({ blocks = [], hiddenBlocksNum = 0, isFoldButtonOnTop = false, unfoldedByDefault = false, containerClassName = '', blockWrapper = (_) => _, renderFoldButton = renderDefaultFoldButton, }) => {
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+export const Foldable = JSX(({ isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
     const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
-    const blocksToHide = clamp(hiddenBlocksNum, 0, blocks?.length);
-    const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
-    const hiddenBlocks = blocksToHide > 0 ? blocks.slice(-blocksToHide) : [];
-    const containerRef = useRef(null);
-    const onToggle = () => {
-        setIsUnfolded(!isUnfolded);
-        if (containerRef.current) {
-            containerRef.current.style.maxHeight = isUnfolded
-                ? ''
-                : `${containerRef.current.scrollHeight}px`;
-        }
-    };
-    const buttonNode = hiddenBlocksNum ? renderFoldButton({ isUnfolded, onToggle }) : null;
-    const blocksNode = blockWrapper(_jsxs("div", { children: [visibleBlocks, _jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden max-h-0 ${containerClassName}`, children: hiddenBlocks })] }));
-    return (_jsx("div", { children: isFoldButtonOnTop ? (_jsxs("div", { children: [buttonNode, blocksNode] })) : (_jsxs("div", { children: [blocksNode, buttonNode] })) }));
+    const onToggle = useCallback(() => {
+        setIsUnfolded((_) => !_);
+    }, []);
+    const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
+    const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
+    return isFoldButtonOnTop ? (_jsxs("div", { children: [buttonNode, sectionNode] })) : (_jsxs("div", { children: [sectionNode, buttonNode] }));
 });
-const renderDefaultFoldButton = (props) => {
-    const labels = ['Развернуть', 'Скрыть'];
-    const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
-    return (_jsx(DefaultButton, { icon: icons[Number(props.isUnfolded)], label: labels[Number(props.isUnfolded)], onClick: props.onToggle }));
-};
 //# sourceMappingURL=Foldable.js.map

package/mobile/lib/ui-kit/Foldable/Foldable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Foldable.js","sourceRoot":"","sources":["../../../src/ui-kit/Foldable/Foldable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAE/D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAgBhD,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CACzB,CAAC,EACC,MAAM,GAAG,EAAE,EACX,eAAe,GAAG,CAAC,EACnB,iBAAiB,GAAG,KAAK,EACzB,iBAAiB,GAAG,KAAK,EACzB,kBAAkB,GAAG,EAAE,EACvB,YAAY,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EACvB,gBAAgB,GAAG,uBAAuB,GAC3C,EAAE,EAAE;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAChE,MAAM,YAAY,GAAG,KAAK,CAAC,eAAe,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/D,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,YAAY,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACzE,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEzD,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;QAC3B,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU;gBAC/C,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,YAAY,IAAI,CAAC;SAC9C;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACvF,MAAM,UAAU,GAAG,YAAY,CAC7B,0BACG,aAAa,EACd,cACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,yDAAyD,kBAAkB,EAAE,YAEvF,YAAY,GACT,IACF,CACP,CAAC;IAEF,OAAO,CACL,wBACG,iBAAiB,CAAC,CAAC,CAAC,CACnB,0BACG,UAAU,EACV,UAAU,IACP,CACP,CAAC,CAAC,CAAC,CACF,0BACG,UAAU,EACV,UAAU,IACP,CACP,GACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,KAA4B,EAAE,EAAE;IAC/D,MAAM,MAAM,GAAG,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IACxC,MAAM,KAAK,GAAe,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IAE3D,OAAO,CACL,KAAC,aAAa,IACZ,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,EACrC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,EACvC,OAAO,EAAE,KAAK,CAAC,QAAQ,GACvB,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Foldable.js","sourceRoot":"","sources":["../../../src/ui-kit/Foldable/Foldable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAWpE,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CACzB,CAAC,EACC,iBAAiB,GAAG,KAAK,EACzB,iBAAiB,GAAG,KAAK,EACzB,qBAAqB,EACrB,gBAAgB,GACjB,EAAE,EAAE;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAEhE,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,qBAAqB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;IACpE,MAAM,UAAU,GAAG,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAExF,OAAO,iBAAiB,CAAC,CAAC,CAAC,CACzB,0BACG,UAAU,EACV,WAAW,IACR,CACP,CAAC,CAAC,CAAC,CACF,0BACG,WAAW,EACX,UAAU,IACP,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/mobile/lib/ui-kit/Foldable/FoldablePartProps.d.ts

@@ -0,0 +1,4 @@
+export interface FoldablePartProps {
+    isUnfolded: boolean;
+    onToggle?: () => void;
+}

package/mobile/lib/ui-kit/Foldable/FoldablePartProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=FoldablePartProps.js.map

package/mobile/lib/ui-kit/Foldable/FoldablePartProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FoldablePartProps.js","sourceRoot":"","sources":["../../../src/ui-kit/Foldable/FoldablePartProps.ts"],"names":[],"mappings":""}

package/mobile/lib/ui-kit/Foldable/FoldableSection.d.ts

@@ -0,0 +1,5 @@
+export interface FoldableSectionProps {
+    className?: string;
+    isUnfolded?: boolean;
+}
+export declare const FoldableSection: import("@redneckz/uni-jsx").UNIComponent<FoldableSectionProps, any, any>;

package/mobile/lib/ui-kit/Foldable/FoldableSection.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+export const FoldableSection = JSX(({ className = '', isUnfolded, children }) => {
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (containerRef.current) {
+            containerRef.current.style.maxHeight = isUnfolded
+                ? `${containerRef.current.scrollHeight}px`
+                : '';
+        }
+    }, [isUnfolded]);
+    return (_jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden max-h-0 ${className}`, children: children }));
+});
+//# sourceMappingURL=FoldableSection.js.map

package/mobile/lib/ui-kit/Foldable/FoldableSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FoldableSection.js","sourceRoot":"","sources":["../../../src/ui-kit/Foldable/FoldableSection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAOhE,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAChC,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3C,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU;gBAC/C,CAAC,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,YAAY,IAAI;gBAC1C,CAAC,CAAC,EAAE,CAAC;SACR;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,cACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,yDAAyD,SAAS,EAAE,YAE9E,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/mobile/src/common.css

@@ -5,9 +5,17 @@ html {
   scroll-behavior: smooth;
 }
 
+* {
+  --color-green: 78, 190, 81;
+  --color-green-light: 131, 184, 62;
+  --color-green-dark: 66, 171, 68;
+  --color-green-more-dark: 39, 148, 41;
+  --color-yellow: 221, 182, 61;
+}
+
 /* Private clients | Green */
 [data-theme='pc'] {
-  --color-primary-main: 66, 171, 68;
+  --color-primary-main: var(--color-green-dark);
   --color-primary-hover: 36, 131, 65;
   --color-primary-active: 36, 95, 52;
   --color-secondary-hover: 36, 131, 65;
@@ -17,7 +25,7 @@ html {
 }
 /* Business clients | Light-Green */
 [data-theme='bc'] {
-  --color-primary-main: 131, 184, 62;
+  --color-primary-main: var(--color-green-light);
   --color-primary-hover: 92, 146, 29;
   --color-primary-active: 60, 94, 16;
   --color-secondary-hover: 92, 146, 29;
@@ -27,7 +35,7 @@ html {
 }
 /* Ecosystem own | Yellow */
 [data-theme='eo'] {
-  --color-primary-main: 221, 182, 61;
+  --color-primary-main: var(--color-yellow);
   --color-primary-hover: 187, 151, 39;
   --color-primary-active: 126, 99, 12;
   --color-secondary-hover: 187, 151, 39;

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

@@ -1,30 +1,40 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/ContentPageDef';
+import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItem } from './AccordionItem';
+import { AccordionItemsList } from './AccordionItemsList';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
 export const Accordion = JSX<AccordionProps>(
-  ({ title, description, accordionItems, context, className = '', bordered }) => {
+  ({ title, description, accordionItems, context, className = '', bordered, ...rest }) => {
     return (
-      <section className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}>
+      <BlockWrapper
+        context={context}
+        className={`py-6 px-4 font-sans 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}
         {accordionItems?.length ? (
-          <ul className="list-none m-0 p-0">
+          <AccordionItemsList>
             {accordionItems.map((item, i) => (
               <AccordionItem
                 key={`AccordionItem_${i}`}
-                {...item}
                 context={context}
                 bordered={bordered}
-              />
+                hasContent={Boolean(item.blocks?.length)}
+                {...item}
+              >
+                {renderBlocksList({ blocks: item.blocks, context, className: '!p-0 mb-5' })}
+              </AccordionItem>
             ))}
-          </ul>
+          </AccordionItemsList>
         ) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/mobile/src/components/Accordion/AccordionContent.ts

@@ -1,12 +1,9 @@
 import type { AlignType } from '../../model/AlignType';
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
-/**
- * @title Элемент списка
- */
 export interface AccordionItemCommonProps {
   /**
    * @title Название
@@ -15,8 +12,6 @@ export interface AccordionItemCommonProps {
   label?: string;
   /** @title Отображать в раскрытом виде */
   isExpanded?: boolean;
-  /** @title Блоки */
-  blocks?: BlockDef[];
   /**
    * @title Отображать/скрывать обводку элемента
    * @default false
@@ -25,6 +20,14 @@ export interface AccordionItemCommonProps {
   labelIcon?: Picture; // TODO: только для мобильной версии
 }
 
+/**
+ * @title Элемент списка
+ */
+export interface AccordionItem extends AccordionItemCommonProps {
+  /** @title Блоки */
+  blocks?: BlockDef[];
+}
+
 /**
  * @title Аккордеон
  */
@@ -36,7 +39,7 @@ export type AccordionContent = HeadlineCommonProps & {
   accordionAlignTitle?: AlignType;
   version?: BlockVersion;
   /** @title Список */
-  accordionItems?: AccordionItemCommonProps[];
+  accordionItems?: AccordionItem[];
   /**
    * @title Отображать/скрывать обводку у элемента списка
    * @default false

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

@@ -1,43 +1,47 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { UniBlockProps } from '../../model/ContentPageDef';
-import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+import type { Picture } from '../../model/Picture';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import type { FoldButtonProps } from '../../ui-kit/Foldable/FoldButtonProps';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
-import type { AccordionItemCommonProps } from './AccordionContent';
-
-export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
+import type { AccordionItemProps } from './AccordionItemProps';
 
 const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
 
 export const AccordionItem = JSX<AccordionItemProps>(
-  ({ label = '', labelIcon, blocks, bordered, context }) => {
-    const foldableBlocks = blocks ? renderBlocksList({ context, blocks, className: '!px-0' }) : [];
-
-    return (
-      <li className={`${borderedLiClass(bordered)} border-solid border-main-divider`}>
-        <Foldable
-          hiddenBlocksNum={foldableBlocks.length}
-          blocks={foldableBlocks}
-          isFoldButtonOnTop
-          containerClassName="flex flex-wrap group-last:last:pb-0"
-          renderFoldButton={(props) => (
-            <FoldButton
-              className={bordered ? '' : 'py-[14px] px-0'}
-              icon={icons[Number(props.isUnfolded)]}
-              label={label}
-              primaryIcon={labelIcon}
-              hasContent={Boolean(blocks?.length)}
-              onClick={props.onToggle}
-            />
-          )}
-        />
-      </li>
-    );
-  },
+  ({ label = '', labelIcon, bordered, children, hasContent = true }) => (
+    <li className={`${borderedLiClass(bordered)} border-solid border-main-divider`}>
+      <Foldable
+        isFoldButtonOnTop={true}
+        renderFoldableSection={({ isUnfolded }) => (
+          <FoldableSection className="flex flex-wrap group-last:last:pb-0" isUnfolded={isUnfolded}>
+            {children}
+          </FoldableSection>
+        )}
+        renderFoldButton={({ isUnfolded, onToggle }) => (
+          <FoldButton
+            className={bordered ? '' : 'py-[14px] px-0'}
+            label={label}
+            icon={icons[Number(isUnfolded)]}
+            primaryIcon={labelIcon}
+            hasContent={hasContent}
+            onClick={onToggle}
+          />
+        )}
+      />
+    </li>
+  ),
 );
 
+interface FoldButtonProps {
+  className?: string;
+  label: string;
+  icon: IconName;
+  primaryIcon?: Picture;
+  hasContent: boolean;
+  onClick?: () => void;
+}
+
 const FoldButton = JSX<FoldButtonProps>(
   ({ className, hasContent, icon, label, primaryIcon, onClick }) => (
     <button

package/mobile/src/components/Accordion/AccordionItemProps.ts

@@ -0,0 +1,6 @@
+import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { AccordionItemCommonProps } from './AccordionContent';
+
+export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {
+  hasContent?: boolean;
+}

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

@@ -0,0 +1,5 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export const AccordionItemsList = JSX(({ children }) => (
+  <ul className="list-none m-0 p-0">{children}</ul>
+));

package/mobile/src/components/ContentPage/filterBlocks.ts

@@ -1,13 +1,11 @@
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { BlockDef } from '../../model/ContentPageDef';
-import { isBlockInRegistry } from './isBlockInRegistry';
 import { normalizeBlock } from './normalizeBlock';
 
 export const filterBlocks = (blocks: BlockDef[], blocksRegistry: BlocksRegistry) =>
   blocks
     ?.filter(
       (block) =>
-        isBlockInRegistry(block?.type || block?.mobile?.type, blocksRegistry) &&
-        !block.mobile?.hidden,
+        (block?.type || block?.mobile?.type || '') in blocksRegistry && !block.mobile?.hidden,
     )
     .map(normalizeBlock);

package/mobile/src/components/ContentPage/renderBlock.tsx

@@ -1,4 +1,4 @@
-import { BlockAncestors, BlockDecorator, DEFAULT_SLOT_NAME } from '../../model/BlockDecorator';
+import { BlockAncestors, BlockDecorator, DEFAULT_ANCESTORS } from '../../model/BlockDecorator';
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { BlockDef, ContentPageDef } from '../../model/ContentPageDef';
 import { style2className } from '../../utils/style2className';
@@ -15,7 +15,7 @@ interface RenderBlockOptions {
 export function renderBlock(
   block: BlockDef,
   options: RenderBlockOptions,
-  ancestors: BlockAncestors = [DEFAULT_SLOT_NAME], // Recursion context
+  ancestors: BlockAncestors = DEFAULT_ANCESTORS, // Recursion context
 ) {
   const { key, page, blockDecorator, blocksRegistry, context } = options;
   const { type } = block;

package/mobile/src/components/ExchangeRateTile/ExchangeRateTile.ui.json

@@ -1 +1,8 @@
-{}
+{
+  "content": {},
+  "style": {
+    "ui:options": {
+      "minCols": 6
+    }
+  }
+}

package/mobile/src/components/Footer/Footer.tsx

@@ -1,6 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/ContentPageDef';
-import { Accordion } from '../Accordion/Accordion';
+import type { Fallback } from '../../model/Fallback';
+import { useSitemap } from '../../services/sitemap/useSitemap';
+import { Button } from '../../ui-kit/Button/Button';
+import { Img } from '../../ui-kit/Img/Img';
+import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
+import { AccordionItem } from '../Accordion/AccordionItem';
+import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+import { LinkList } from '../LinkList/LinkList';
 import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
 import { Contacts } from './Contacts';
 import type { FooterContent, SubMenuItem } from './FooterContent';
@@ -8,13 +15,6 @@ import { HorizontalNavigation } from './HorizontalNavigation';
 import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
 
-import { useSitemap } from '../../services/sitemap/useSitemap';
-import type { Fallback } from '../../model/Fallback';
-import { Button } from '../../ui-kit/Button/Button';
-import { Img } from '../../ui-kit/Img/Img';
-import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
-import { getAccordionItems } from '../../utils/getAccordionItems';
-
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
 export const Footer = JSX<FooterProps>(
@@ -35,11 +35,13 @@ export const Footer = JSX<FooterProps>(
     return (
       <footer className={`font-sans px-4 py-[26px] bg-white ${className}`}>
         <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
-        <Accordion
-          context={context}
-          className="!p-0 mb-4"
-          accordionItems={getAccordionItems(sitemap.topItems)}
-        />
+        <AccordionItemsList>
+          {sitemap.topItems?.map((item, i) => (
+            <AccordionItem key={String(i)} context={context} label={item.text}>
+              <LinkList context={context} documents={item.items} />
+            </AccordionItem>
+          ))}
+        </AccordionItemsList>
         <div>{dispositions?.map(renderSubMenuItem)}</div>
         <MobileAppTile
           context={context}

package/mobile/src/components/GracePeriod/GracePeriod.ui.json

@@ -11,5 +11,10 @@
         }
       }
     }
+  },
+  "style": {
+    "ui:options": {
+      "minCols": 6
+    }
   }
 }

package/mobile/src/components/Header/Header.tsx

@@ -2,15 +2,16 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { Fallback } from '../../model/Fallback';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
-import type { Fallback } from '../../model/Fallback';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
-import { getAccordionItems } from '../../utils/getAccordionItems';
-import { Accordion } from '../Accordion/Accordion';
+import { AccordionItem } from '../Accordion/AccordionItem';
+import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+import { LinkList } from '../LinkList/LinkList';
 import { HeaderBurger } from './HeaderBurger';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderTop } from './HeaderTop';
@@ -19,17 +20,19 @@ export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
   ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, page }) => {
+    const { handlerDecorator } = context;
     const router = context.useRouter();
+
     const fallback: Fallback | undefined = page?.fallback;
     const sitemap = useSitemap(fallback);
-    const dispositions = sitemap?.dispositions;
-    const { handlerDecorator } = context;
 
     const mergedItems = mergeTopItems(sitemap.topItems, topItems);
     const activeTopItem = mergedItems.find(isTopItemActive(router));
     const subItems = activeTopItem?.items;
     const activeSubItem = findActiveSubItem(router)(subItems);
+
     const [burgerMenuShow, setBurgerMenuShow] = useState(false);
+
     const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
 
     return (
@@ -55,14 +58,16 @@ export const Header = JSX<HeaderProps>(
           <HeaderBurger
             context={context}
             onClick={toggleBurgerMenu}
-            burgerSubMenu={dispositions}
+            burgerSubMenu={sitemap?.dispositions}
             defaultLocation={defaultLocation}
           >
-            <Accordion
-              context={context}
-              accordionItems={getAccordionItems(sitemap.topItems)}
-              className="!p-0 mb-4"
-            />
+            <AccordionItemsList>
+              {sitemap.topItems?.map((item, i) => (
+                <AccordionItem key={String(i)} context={context} label={item.text}>
+                  <LinkList context={context} documents={item.items} />
+                </AccordionItem>
+              ))}
+            </AccordionItemsList>
           </HeaderBurger>
         ) : null}
       </header>

package/mobile/src/components/InvestmentInfo/InvestmentInfo.example.json

@@ -0,0 +1,48 @@
+{
+  "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
+  "investmentZeroColumn": {
+    "title": "Название 1"
+  },
+  "investmentColumns": [
+    {
+      "title": "Название 2",
+      "cells": [
+        {
+          "text": "Ячейка 2-1",
+          "cellColor": "green-dark",
+          "cellSize": "S"
+        }
+      ]
+    },
+    {
+      "title": "Название 3",
+      "cells": [
+        {
+          "text": "Ячейка 3-1",
+          "cellColor": "green-dark",
+          "cellSize": "S"
+        }
+      ]
+    },
+    {
+      "title": "Название 4",
+      "cells": [
+        {
+          "text": "Ячейка 4-1",
+          "cellColor": "green-dark",
+          "cellSize": "L"
+        }
+      ]
+    },
+    {
+      "title": "Название 5",
+      "cells": [
+        {
+          "text": "Ячейка 5-1",
+          "cellColor": "green-dark",
+          "cellSize": "XL"
+        }
+      ]
+    }
+  ]
+}