@redneckz/wildless-cms-uni-blocks 0.3.22 → 0.3.23

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

@@ -3,7 +3,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Icon } from '../Icon/Icon.js';
 export const SearchBar = JSX(({ className, context }) => {
     const { term, setTerm } = context.useSearch();
-    return (_jsxs("form", { className: `relative ${className || ''}`, children: [_jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [_jsx("div", { className: "w-[20px] h-[20px]", children: _jsx(Icon, { name: "LoupeIcon", width: "24", height: "24" }) }), !term && (_jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-normal text-sm text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), _jsx("input", { id: "search-bar-input", className: 'h-12 pl-12 w-full peer placeholder-transparent font-sans font-normal text-base text-black border border-solid rounded 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", placeholder: "some search" }), _jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer", onClick: (e) => {
+    return (_jsxs("form", { className: `relative ${className || ''}`, children: [_jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [_jsx("div", { className: "w-[20px] h-[20px]", children: _jsx(Icon, { name: "LoupeIcon", width: "24", height: "24" }) }), !term && (_jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-normal text-sm text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), _jsx("input", { id: "search-bar-input", className: 'h-12 pl-12 w-full peer placeholder-transparent font-sans font-normal text-base text-black border border-solid rounded 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", placeholder: "some search" }), _jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
                     e.preventDefault();
                     setTerm('');
                 }, children: _jsx(Icon, { name: "CloseIcon", width: "24", height: "24" }) })] }));

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../src/ui-kit/SearchBar/SearchBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAgB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE;IACrE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,SAAS,EAAE,CAAC;IAC9C,OAAO,CACL,gBAAM,SAAS,EAAE,YAAY,SAAS,IAAI,EAAE,EAAE,aAC5C,eAAK,SAAS,EAAC,yGAAyG,aACtH,cAAK,SAAS,EAAC,mBAAmB,YAChC,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,GAC5C,EACL,CAAC,IAAI,IAAI,CACR,gBACE,OAAO,EAAC,kBAAkB,EAC1B,SAAS,EAAC,mDAAmD,2FAGvD,CACT,IACG,EACN,gBACE,EAAE,EAAC,kBAAkB,EACrB,SAAS,EACP,qMAAqM,EAEvM,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACxC,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,kBAAkB,EACvB,WAAW,EAAC,aAAa,GACzB,EACF,iBACE,SAAS,EAAC,2GAA2G,EACrH,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,OAAO,CAAC,EAAE,CAAC,CAAC;gBACd,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,GACzC,IACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../src/ui-kit/SearchBar/SearchBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAgB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE;IACrE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,SAAS,EAAE,CAAC;IAC9C,OAAO,CACL,gBAAM,SAAS,EAAE,YAAY,SAAS,IAAI,EAAE,EAAE,aAC5C,eAAK,SAAS,EAAC,yGAAyG,aACtH,cAAK,SAAS,EAAC,mBAAmB,YAChC,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,GAC5C,EACL,CAAC,IAAI,IAAI,CACR,gBACE,OAAO,EAAC,kBAAkB,EAC1B,SAAS,EAAC,mDAAmD,2FAGvD,CACT,IACG,EACN,gBACE,EAAE,EAAC,kBAAkB,EACrB,SAAS,EACP,qMAAqM,EAEvM,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACxC,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,kBAAkB,EACvB,WAAW,EAAC,aAAa,GACzB,EACF,iBACE,SAAS,EAAC,uHAAuH,EACjI,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,OAAO,CAAC,EAAE,CAAC,CAAC;gBACd,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,GACzC,IACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC"}

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

@@ -1,5 +1,5 @@
 import type { BlockDef, ColumnsCount } from '../../ui-kit/BlocksList/BlocksListProps';
-
+import type { BlockVersion } from '../../model/BlockVersion';
 /**
  * @title Элемент списка
  */
@@ -9,6 +9,10 @@ export interface AccordionItemCommonProps {
    * @default Список
    */
   label?: string;
+  /**
+   * @title Отображать в раскрытом виде
+   */
+  isExpanded?: boolean;
   /** @title Блоки */
   blocks?: BlockDef[];
   /**
@@ -16,6 +20,8 @@ export interface AccordionItemCommonProps {
    * @default false
    */
   bordered?: boolean; // TODO: только для мобильной версии
+  version?: BlockVersion;
+
   columns?: ColumnsCount;
 }
 
@@ -25,6 +31,7 @@ export interface AccordionItemCommonProps {
 export interface AccordionContent {
   /** @title Заголовок */
   title?: string;
+  version?: BlockVersion;
   /** @title Список */
   accordionItems?: AccordionItemCommonProps[];
   /** @title Описание */

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

@@ -3,7 +3,7 @@ import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { AccordionItemCommonProps } from './AccordionContent';
 import { AccordionItemInner } from './AccordionItemInner';
-import { useActiveHandler } from './utils/useActiveHandler';
+import { useActiveHandler } from './useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 

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

@@ -2,12 +2,14 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { AccordionItemProps } from './AccordionItem';
 import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
 
-export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
-  const className = 'mb-5 last:mb-0 first:mt-2';
-  const columns = 1;
-  return (
-    <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
-      {renderBlocksList({ context, className, columns, blocks })}
-    </div>
-  );
-});
+export const AccordionItemInner = JSX<AccordionItemProps>(
+  ({ blocks, context, version = 'primary' }) => {
+    const className = 'mb-5 last:mb-0 first:mt-2';
+    const columns = 1;
+    return (
+      <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
+        {renderBlocksList({ context, className, columns, blocks, version })}
+      </div>
+    );
+  },
+);

package/mobile/src/components/Accordion/{utils/useActiveHandler.ts → useActiveHandler.ts}

@@ -1,7 +1,8 @@
-import type { IconName } from '../../../icons/IconName';
+import type { IconName } from '../../icons/IconName';
+import { ActiveHandler } from '../../ui-kit/BlocksList/BlocksListProps';
 
-export const useActiveHandler = ({ context, blocks }) => {
-  const [isActive, setIsActive] = context.useState(false);
+export const useActiveHandler = ({ context, blocks, initialState = false }: ActiveHandler) => {
+  const [isActive, setIsActive] = context.useState(initialState);
   const hasContent = blocks?.length;
   const icon: IconName = isActive ? 'MinusIcon' : 'PlusIcon';
 

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -19,7 +19,9 @@ export const LinkDocs = JSX<LinkDocsProps>(
     hasBorder = true,
   }) => {
     return (
-      <section className={`font-sans text-primary-text py-6 px-4 bg-white ${className}`}>
+      <section
+        className={`font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`}
+      >
         {title ? (
           <Heading
             headingType="h2"

package/mobile/src/components/OtherProducts/OtherProductsContent.ts

@@ -9,6 +9,10 @@ export interface blockItemCommonProps {
    * @default Список
    */
   label?: string;
+  /**
+   * @title Отображать в раскрытом виде
+   */
+  isExpanded?: boolean;
   /** @title Блоки */
   blocks?: BlockDef[];
   /**
@@ -17,7 +21,6 @@ export interface blockItemCommonProps {
    */
   bordered?: boolean; // TODO: только для мобильной версии
   columns?: ColumnsCount;
-  isActive?: boolean;
 }
 
 /**

package/mobile/src/components/OtherProducts/OtherProductsItem.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useActiveHandler } from './utils/useActiveHandler';
+import { useActiveHandler } from './useActiveHandler';
 import type { UniBlockProps } from '../../types';
 import type { blockItemCommonProps } from './OtherProductsContent';
 import { Icon } from '../../ui-kit/Icon/Icon';
@@ -7,30 +7,32 @@ import { OtherProductsItemInner } from './OtherProductsItemInner';
 
 export interface BlockItemProps extends blockItemCommonProps, UniBlockProps {}
 
-export const OtherProductsItem = JSX<BlockItemProps>(({ label, blocks, columns, context }) => {
-  const { hasContent, icon, handleToggle, isActive } = useActiveHandler({
-    context,
-    blocks,
-  });
+export const OtherProductsItem = JSX<BlockItemProps>(
+  ({ label, isExpanded, blocks, columns, context }) => {
+    const { hasContent, icon, handleToggle, isActive } = useActiveHandler({
+      context,
+      blocks,
+      initialState: isExpanded,
+    });
 
-  return (
-    <div className="border-0 border-b border-solid border-main-divider">
-      {hasContent ? (
-        <OtherProductsItemInner
-          columns={columns}
-          blocks={blocks}
-          context={context}
-          isActive={isActive}
-        />
-      ) : null}
-      <button
-        className={`border-none bg-primary-main px-0 py-[25px] text-center w-full font-sans text-white text-base
-        ${hasContent ? 'group cursor-pointer' : ''}`}
-        onClick={handleToggle}
-      >
-        <span className="pr-3">{isActive ? 'Скрыть' : label}</span>
-        {hasContent ? <Icon name={icon} width="20" height="20" asSVG /> : null}
-      </button>
-    </div>
-  );
-});
+    return (
+      <div className="border-0 border-b border-solid border-main-divider">
+        {hasContent ? (
+          <OtherProductsItemInner
+            isExpanded={isActive}
+            columns={columns}
+            blocks={blocks}
+            context={context}
+          />
+        ) : null}
+        <button
+          className="border-none bg-primary-main px-0 py-[25px] w-full font-sans text-white text-base flex justify-center cursor-pointer"
+          onClick={handleToggle}
+        >
+          <span className="pr-3">{isActive ? 'Скрыть' : label}</span>
+          {hasContent ? <Icon name={icon} width="20" height="20" asSVG /> : null}
+        </button>
+      </div>
+    );
+  },
+);

package/mobile/src/components/OtherProducts/{utils/useActiveHandler.ts → useActiveHandler.ts}

@@ -1,7 +1,8 @@
-import type { IconName } from '../../../icons/IconName';
+import type { IconName } from '../../icons/IconName';
+import { ActiveHandler } from '../../ui-kit/BlocksList/BlocksListProps';
 
-export const useActiveHandler = ({ context, blocks }) => {
-  const [isActive, setIsActive] = context.useState(false);
+export const useActiveHandler = ({ context, blocks, initialState = false }: ActiveHandler) => {
+  const [isActive, setIsActive] = context.useState(initialState);
   const hasContent = blocks?.length;
   const icon: IconName = isActive ? 'ArrowUpIcon' : 'ArrowDownIcon';
 

package/mobile/src/components/TariffsTable/TariffsTable.tsx

@@ -18,7 +18,9 @@ export const TariffsTable = JSX<TariffsTableProps>(
     const tiles = getTiles(rowHeaders, colData);
 
     return (
-      <section className={`px-4 py-6 bg-white font-sans text-primary-text ${className}`}>
+      <section
+        className={`px-4 py-6 bg-white font-sans text-primary-text overflow-x-hidden ${className}`}
+      >
         {title ? (
           <Heading
             headingType="h2"

package/mobile/src/content-page-repository/transformPicture.ts

@@ -13,8 +13,9 @@ export async function transformPicture(
   options: TransformationOptions,
 ): Promise<Picture> {
   const sources = picture.sources || [];
+  const src = picture?.src || '';
   const [transformedPicture, ...transformedSources] = await Promise.all(
-    [picture].concat(sources).map((_) => transformImg(pagePath, picture.src, { ...options, ..._ })),
+    [picture].concat(sources).map((_) => transformImg(pagePath, src, { ...options, ..._ })),
   );
   return {
     ...picture,

package/mobile/src/model/Picture.ts

@@ -1,6 +1,6 @@
 export interface Img {
   /** @title Картинка */
-  src: string;
+  src?: string;
   /** @title Альтернативный текст (alt) */
   alt?: string;
   /** @title Текст подсказки (title) */
@@ -9,7 +9,7 @@ export interface Img {
 
 export interface ImgSource {
   /** @title Картинка */
-  src: string;
+  src?: string;
   /** @title Формат */
   format?: 'jpeg' | 'jpg' | 'png' | 'gif' | 'webp' | 'heif' | 'avif';
   /** @hidden */

package/mobile/src/ui-kit/BlocksList/BlocksListProps.ts

@@ -8,6 +8,13 @@ import type { ProductTileContent } from '../../components/ProductTile/ProductTil
 import type { TextBlockContent } from '../../components/TextBlock/TextBlockContent';
 import type { TileContent } from '../../components/Tile/TileContent';
 import type { LinkListContent } from '../../components/LinkList/LinkListContent';
+import { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+
+export interface ActiveHandler {
+  context: ContentPageContext;
+  blocks?: BlockDef[];
+  initialState?: boolean;
+}
 
 /**
  * @title Количество колонок
@@ -15,74 +22,65 @@ import type { LinkListContent } from '../../components/LinkList/LinkListContent'
  */
 export type ColumnsCount = 1 | 2;
 
-/**
- * @title Тип блока
- */
-export type BlockDefType =
-  | 'Headline'
-  | 'LinkDocs'
-  | 'TextBlock'
-  | 'PictureText'
-  | 'Tile'
-  | 'ProductTile'
-  | 'ProductBlock'
-  | 'Gallery'
-  | 'MiniGallery'
-  | 'LinkList';
-
-interface BaseBlockDef {
-  blockListType: BlockDefType;
-}
-
 /**
  * @title Заголовок
+ * @default {"blockListType": "Headline"}
  */
-export type HeadlineBlockListDef = HeadlineContent & BaseBlockDef;
+export type HeadlineBlockListDef = HeadlineContent & { blockListType: 'Headline' };
 
 /**
  * @title Список документов
+ * @default {"blockListType": "LinkDocs"}
  */
-export type LinkDocsBlockListDef = LinkDocsContent & BaseBlockDef;
+export type LinkDocsBlockListDef = LinkDocsContent & { blockListType: 'LinkDocs' };
 
 /**
  * @title Текстовый блок
+ * @default {"blockListType": "TextBlock"}
  */
-export type TextBlockBlockListDef = TextBlockContent & BaseBlockDef;
+export type TextBlockBlockListDef = TextBlockContent & { blockListType: 'TextBlock' };
 
 /**
  * @title Картинка с текстом
+ * @default {"blockListType": "PictureText"}
  */
-export type PictureTextBlockListDef = PictureTextContent & BaseBlockDef;
+export type PictureTextBlockListDef = PictureTextContent & { blockListType: 'PictureText' };
 
 /**
  * @title Продуктовый блок
+ * @default {"blockListType": "ProductBlock"}
  */
-export type ProductBlockBlockListDef = ProductBlockContent & BaseBlockDef;
+export type ProductBlockBlockListDef = ProductBlockContent & { blockListType: 'ProductBlock' };
 
 /**
  * @title Плитка
+ * @default {"blockListType": "Tile"}
  */
-export type TileBlockListDef = TileContent & BaseBlockDef;
+export type TileBlockListDef = TileContent & { blockListType: 'Tile' };
 
 /**
  * @title Продуктовая плитка
+ * @default {"blockListType": "ProductTile"}
  */
-export type ProductTileBlockListDef = ProductTileContent & BaseBlockDef;
+export type ProductTileBlockListDef = ProductTileContent & { blockListType: 'ProductTile' };
 
 /**
  * @title Галлерея
+ * @default {"blockListType": "Gallery"}
  */
-export type GalleryBlockListDef = GalleryContent & BaseBlockDef;
+export type GalleryBlockListDef = GalleryContent & { blockListType: 'Gallery' };
 
 /**
  * @title Мини-галлерея
+ * @default {"blockListType": "MiniGallery"}
  */
-export type MiniGalleryBlockListDef = MiniGalleryContent & BaseBlockDef;
+export type MiniGalleryBlockListDef = MiniGalleryContent & { blockListType: 'MiniGallery' };
 
 /**
  * @title Список ссылок
+ * @default {"blockListType": "LinkList"}
  */
-export type LinkListBlockListDef = LinkListContent & BaseBlockDef;
+export type LinkListBlockListDef = LinkListContent & { blockListType: 'LinkList' };
 
 /**
  * @title Выберите блок

package/mobile/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -2,19 +2,27 @@ import type { JSXBlock } from '../../components/ContentPage/ContentPage';
 import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
 import type { BlockDef, ColumnsCount } from './BlocksListProps';
 import { EmbeddableBlocks } from './EmbeddableBlocks';
+import { BlockVersion } from '../../model/BlockVersion';
 
 type EmbeddableBlocksProps = {
   blocks?: BlockDef[];
   context: ContentPageContext;
   columns?: ColumnsCount;
   className?: string;
+  version?: BlockVersion;
 };
 
-export const renderBlocksList = ({ blocks, context, className, columns }: EmbeddableBlocksProps) =>
-  blocks?.length ? blocks.map(renderBlock({ context, className, columns })) : null;
+export const renderBlocksList = ({
+  blocks,
+  context,
+  className,
+  columns,
+  version,
+}: EmbeddableBlocksProps) =>
+  blocks?.length ? blocks.map(renderBlock({ context, className, columns, version })) : null;
 
 export const renderBlock =
-  ({ context, columns, className }: EmbeddableBlocksProps) =>
+  ({ context, columns, className, version }: EmbeddableBlocksProps) =>
   (block: BlockDef, i: number) => {
     const type = block?.blockListType;
     if (!type || !(type in EmbeddableBlocks)) {
@@ -24,7 +32,7 @@ export const renderBlock =
     const EmbeddedBlock: JSXBlock = EmbeddableBlocks[type];
     return (
       <div className={`${className} ${columnsCountClass}`} key={`block_${i}`}>
-        <EmbeddedBlock context={context} {...block} className="!p-0" />
+        <EmbeddedBlock context={context} {...block} blockVersion={version} className="!p-0" />
       </div>
     );
   };

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

@@ -31,7 +31,7 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
         placeholder="some search"
       />
       <button
-        className="visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer"
+        className="visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none"
         onClick={(e) => {
           e.preventDefault();
           setTerm('');

package/package.json

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

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
@@ -6,17 +7,29 @@ import { AccordionItem } from './AccordionItem';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
-export const Accordion = JSX<AccordionProps>(({ title, accordionItems, context, className }) => {
-  return (
-    <section className={`p-[50px] font-sans bg-white text-primary-text ${className || ''}`}>
-      {title ? <Heading headingType="h4" className="mb-2.5" title={title} /> : null}
-      {accordionItems?.length ? (
-        <ul className="list-none m-0 p-0">
-          {accordionItems.map((item, i) => (
-            <AccordionItem key={`AccordionItem${i}`} {...item} context={context} />
-          ))}
-        </ul>
-      ) : null}
-    </section>
-  );
-});
+const accordionStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
+export const Accordion = JSX<AccordionProps>(
+  ({ title, accordionItems, context, className = '', version = 'primary' }) => {
+    return (
+      <section className={`p-[50px] font-sans ${className} ${accordionStyleMap[version]}`}>
+        {title ? <Heading headingType="h4" className="mb-2.5" title={title} /> : null}
+        {accordionItems?.length ? (
+          <ul className="list-none m-0 p-0">
+            {accordionItems.map((item, i) => (
+              <AccordionItem
+                key={`AccordionItem${i}`}
+                {...item}
+                version={version}
+                context={context}
+              />
+            ))}
+          </ul>
+        ) : null}
+      </section>
+    );
+  },
+);

package/src/components/Accordion/AccordionContent.ts

@@ -1,5 +1,5 @@
 import type { BlockDef, ColumnsCount } from '../../ui-kit/BlocksList/BlocksListProps';
-
+import type { BlockVersion } from '../../model/BlockVersion';
 /**
  * @title Элемент списка
  */
@@ -9,6 +9,10 @@ export interface AccordionItemCommonProps {
    * @default Список
    */
   label?: string;
+  /**
+   * @title Отображать в раскрытом виде
+   */
+  isExpanded?: boolean;
   /** @title Блоки */
   blocks?: BlockDef[];
   /**
@@ -16,6 +20,8 @@ export interface AccordionItemCommonProps {
    * @default false
    */
   bordered?: boolean; // TODO: только для мобильной версии
+  version?: BlockVersion;
+
   columns?: ColumnsCount;
 }
 
@@ -25,6 +31,7 @@ export interface AccordionItemCommonProps {
 export interface AccordionContent {
   /** @title Заголовок */
   title?: string;
+  version?: BlockVersion;
   /** @title Список */
   accordionItems?: AccordionItemCommonProps[];
   /** @title Описание */

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

@@ -3,7 +3,7 @@ import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { AccordionItemCommonProps } from './AccordionContent';
 import { AccordionItemInner } from './AccordionItemInner';
-import { useActiveHandler } from './utils/useActiveHandler';
+import { useActiveHandler } from './useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 

package/src/components/Accordion/AccordionItem.tsx

@@ -1,37 +1,59 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { AccordionItemCommonProps } from './AccordionContent';
 import { AccordionItemInner } from './AccordionItemInner';
-import { useActiveHandler } from './utils/useActiveHandler';
+import { useActiveHandler } from './useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
-export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, columns, context }) => {
-  const { hasContent, icon, handleToggle } = useActiveHandler({
-    context,
-    blocks,
-  });
+const buttonStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-white',
+};
 
-  return (
-    <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
-      <button
-        className={`border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans text-primary-text
+const buttonHoverStyleMap: Record<BlockVersion, string> = {
+  primary: 'group-hover:text-primary-main',
+  secondary: 'group-hover:text-white',
+};
+
+export const AccordionItem = JSX<AccordionItemProps>(
+  ({ label, isExpanded, blocks, columns, context, version = 'primary' }) => {
+    const { isActive, hasContent, icon, handleToggle } = useActiveHandler({
+      context,
+      blocks,
+      initialState: isExpanded,
+    });
+
+    return (
+      <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
+        <button
+          className={`border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans ${
+            buttonStyleMap[version]
+          }
         ${hasContent ? 'group cursor-pointer' : ''}`}
-        onClick={handleToggle}
-      >
-        <span
-          className={`text-xl pr-2.5 font-medium ${
-            hasContent ? 'group-hover:text-primary-main' : ''
-          }`}
+          onClick={handleToggle}
         >
-          {label}
-        </span>
-        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
-      </button>
-      {hasContent ? (
-        <AccordionItemInner columns={columns} blocks={blocks} context={context} />
-      ) : null}
-    </li>
-  );
-});
+          <span
+            className={`text-xl pr-2.5 font-medium ${
+              hasContent ? buttonHoverStyleMap[version] : ''
+            }`}
+          >
+            {label}
+          </span>
+          {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
+        </button>
+        {hasContent ? (
+          <AccordionItemInner
+            isExpanded={isActive}
+            columns={columns}
+            blocks={blocks}
+            version={version}
+            context={context}
+          />
+        ) : null}
+      </li>
+    );
+  },
+);

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

@@ -2,12 +2,14 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { AccordionItemProps } from './AccordionItem';
 import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
 
-export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
-  const className = 'mb-5 last:mb-0 first:mt-2';
-  const columns = 1;
-  return (
-    <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
-      {renderBlocksList({ context, className, columns, blocks })}
-    </div>
-  );
-});
+export const AccordionItemInner = JSX<AccordionItemProps>(
+  ({ blocks, context, version = 'primary' }) => {
+    const className = 'mb-5 last:mb-0 first:mt-2';
+    const columns = 1;
+    return (
+      <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
+        {renderBlocksList({ context, className, columns, blocks, version })}
+      </div>
+    );
+  },
+);