@redneckz/wildless-cms-uni-blocks 0.2.116 → 0.3.0

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

@@ -1,36 +1,33 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { BlockItemProps, BlockItemVersion } from './BlockItemProps';
+import type { BlockItemProps, BlockItemVersion } from './BlockItemProps';
 
 const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
 
 const TEXT_STYLE_MAP: Record<BlockItemVersion, string> = {
   primary: 'text-primary-text',
-  secondary: '',
+  secondary: 'text-white',
+  gray: 'text-secondary-text',
 };
 
 const LIST_STYLE_MAP: Record<BlockItemVersion, string> = {
   primary: 'bg-primary-main',
   secondary: 'bg-white',
+  gray: 'bg-secondary-text',
 };
 
 export const BlockItem = JSX<BlockItemProps>(
-  ({ className = '', isDotted = true, text, children, version = 'primary', white }) => {
+  ({ className = '', isDotted = true, text, children, version = 'primary' }) => {
     return (
-      <div className={`font-sans flex items-baseline ${className}`} role="listitem">
-        {isDotted && <div className={getListStyle(version, white)} />}
-        <span className={white ? 'text-white' : TEXT_STYLE_MAP[version]}>{text || children}</span>
+      <div className={`font-sans flex items-center ${className}`} role="listitem">
+        {isDotted && <div className={getListStyle(version)} />}
+        <span className={TEXT_STYLE_MAP[version]}>{text || children}</span>
       </div>
     );
   },
 );
 
-const getListStyle = (version: BlockVersion, white?: boolean) => {
-  const color = white ? 'bg-white' : LIST_STYLE_MAP[version];
+const getListStyle = (version: BlockItemVersion) => {
   const size =
-    version === 'primary'
-      ? 'w-2 h-2 min-w-2 min-h-2 mt-2'
-      : 'w-[6px] h-[6px] min-w-[6px] min-h-[6px] mt-2.5';
-
-  return `${LIST_STYLE_CLASSES} ${color} ${size}`;
+    version === 'gray' ? 'w-[6px] h-[6px] min-w-[6px] min-h-[6px]' : 'w-2 h-2 min-w-2 min-h-2';
+  return `${LIST_STYLE_CLASSES} ${LIST_STYLE_MAP[version]} ${size}`;
 };

package/mobile/src/ui-kit/BlockItem/BlockItemProps.ts

@@ -1,7 +1,8 @@
 /**
  * @title Версия списка
+ * @enumNames ["Основной", "Второстепенный", "Белый"]
  */
-export type BlockItemVersion = 'primary' | 'secondary';
+export type BlockItemVersion = 'primary' | 'secondary' | 'gray';
 
 /**
  * @title Содержимое элемента блока
@@ -17,7 +18,6 @@ export interface BlockItemContent {
 export interface BlockItemProps extends BlockItemContent {
   className?: string;
   version?: BlockItemVersion;
-  white?: boolean;
   /** @title Маркер */
   isDotted?: boolean;
 }

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

@@ -4,24 +4,25 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { ButtonProps, ButtonWithIconProps } from './ButtonProps';
+import { ButtonInner } from './ButtonInner';
 
 const buttonStyleMap: Record<ButtonVersion, string> = {
   primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
   secondary:
     'text-primary-main bg-secondary-light hover:bg-secondary-hover active:bg-secondary-active',
+  link: 'text-primary-main',
 };
 
 const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   primary: 'bg-secondary-dark text-secondary-text',
   secondary: 'bg-secondary-light text-secondary-text',
+  link: '',
 };
 
 const styleButton = 'w-full text-center font-sans select-none';
 
 export interface ButtonCommonProps extends ButtonProps, ButtonWithIconProps {}
 
-export type ButtonInner = Pick<ButtonCommonProps, 'text' | 'aboveText' | 'appendLeft' | 'rounded'>;
-
 export const Button = JSX<ButtonCommonProps>(
   ({
     className,
@@ -34,12 +35,18 @@ export const Button = JSX<ButtonCommonProps>(
     children,
     disabled,
     rounded,
-    version = 'none',
+    version = 'primary',
     ariaLabel,
     ...rest
   }) => {
     const buttonInner = children ?? (
-      <ButtonInner text={text} aboveText={aboveText} appendLeft={appendLeft} rounded={rounded} />
+      <ButtonInner
+        text={text}
+        aboveText={aboveText}
+        appendLeft={appendLeft}
+        rounded={rounded}
+        version={version}
+      />
     );
 
     if (disabled) {
@@ -75,23 +82,3 @@ export const Button = JSX<ButtonCommonProps>(
     );
   },
 );
-
-export const ButtonInner = JSX<ButtonInner>(({ text, aboveText, appendLeft, rounded }) => {
-  const withoutText = !text && !aboveText && Boolean(appendLeft);
-
-  const buttonInnerClasses = `flex items-center justify-center ${
-    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 ? null : (
-        <div>
-          <div className="text-m-2xs text-left">{aboveText}</div>
-          <div className="text-m-button font-medium text-left">{text}</div>
-        </div>
-      )}
-    </div>
-  );
-});

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

@@ -0,0 +1,37 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ButtonVersion } from '../../model/ButtonVersion';
+import type { ButtonWithIconProps } from './ButtonProps';
+
+interface ButtonInnerProps extends ButtonWithIconProps {
+  version?: ButtonVersion;
+}
+
+export const ButtonInner = JSX<ButtonInnerProps>(
+  ({ text, aboveText, appendLeft, rounded, version }) => {
+    const withoutText = !text && !aboveText && Boolean(appendLeft);
+
+    const buttonInnerClasses =
+      version !== 'link'
+        ? `flex items-center justify-center
+          ${withoutText ? 'h-12 w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`} ${
+            rounded ? 'rounded-full' : ''
+          }`
+        : null;
+
+    return renderButtonInner({ buttonInnerClasses, appendLeft, withoutText, aboveText, text });
+  },
+);
+
+function renderButtonInner({ buttonInnerClasses, appendLeft, withoutText, aboveText, text }) {
+  return (
+    <div className={buttonInnerClasses}>
+      {appendLeft ? appendLeft : null}
+      {withoutText ? null : (
+        <div>
+          <div className="text-m-2xs text-left">{aboveText}</div>
+          <div className="text-m-button font-medium text-left">{text}</div>
+        </div>
+      )}
+    </div>
+  );
+}

package/mobile/src/ui-kit/Button/ButtonProps.ts

@@ -1,5 +1,6 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { LinkProps } from '../../model/LinkProps';
+import type { IconName } from '../Icon/IconProps';
 
 /**
  * @hidden
@@ -22,6 +23,8 @@ export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
 }
 
 export interface ButtonWithIconProps extends ButtonProps {
+  /** @title Иконка */
+  icon?: IconName;
   /** @title Верхний текст */
   aboveText?: string;
   /** @hidden */
@@ -31,3 +34,11 @@ export interface ButtonWithIconProps extends ButtonProps {
   /** @hidden */
   asSVG?: boolean;
 }
+
+export interface ButtonContent {
+  /**
+   * @title Кнопки
+   * @maxItems 4
+   */
+  buttons?: ButtonWithIconProps[];
+}

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

@@ -0,0 +1,34 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import { UniBlockProps } from '../../types';
+import { Icon } from '../Icon/Icon';
+import { Button } from './Button';
+import type { ButtonContent, ButtonWithIconProps } from './ButtonProps';
+
+export interface ButtonSectionProps extends ButtonContent, UniBlockProps {}
+
+export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '', buttons }) => {
+  const { handlerDecorator } = context;
+  const router = context.useRouter();
+  return buttons?.length ? (
+    <div className={`${className}`}>
+      {buttons.map((button, index) =>
+        renderButton(useLink({ router, handlerDecorator }, button), index),
+      )}
+    </div>
+  ) : null;
+});
+
+function renderButton({ icon, ...button }: ButtonWithIconProps, i: number) {
+  if (!button?.text) return;
+
+  return icon ? (
+    <Button
+      key={String(i)}
+      appendLeft={<Icon name={icon} width="24" height="24" asSVG />}
+      {...button}
+    />
+  ) : (
+    <Button key={String(i)} {...button} />
+  );
+}

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

@@ -0,0 +1,8 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DescriptionProps } from './DescriptionProps';
+
+export const Description = JSX<DescriptionProps>((props) => {
+  const { className, description } = props;
+
+  return <div className={`font-normal text-base ${className || ''}`}>{description}</div>;
+});

package/mobile/src/ui-kit/Description/DescriptionProps.ts

@@ -0,0 +1,8 @@
+export interface DescriptionContent {
+  /** @title Описание */
+  description?: string;
+}
+
+export interface DescriptionProps extends DescriptionContent {
+  className?: string;
+}

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

@@ -1,7 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { HeadingProps } from './HeadingProps';
+import { HeadingContent, HeadingType, HeadingTypeContent } from './HeadingContent';
 
-const HeadingClass: Record<HeadingProps['type'], string> = {
+export interface HeadingProps extends HeadingContent, HeadingTypeContent {
+  className?: string;
+}
+
+const HeadingClass: Record<HeadingType, string> = {
   h1: 'text-m-title',
   h2: 'text-m-title',
   h3: 'text-m-title-md',
@@ -11,10 +15,15 @@ const HeadingClass: Record<HeadingProps['type'], string> = {
 };
 
 export const Heading = JSX<HeadingProps>((props) => {
-  const { className, type, text } = props;
-  const Tag = type;
+  const { className, headingType, title } = props;
+  if (!headingType) {
+    return;
+  }
+  const Tag = headingType;
 
   return (
-    <Tag className={`font-sans font-medium ${HeadingClass[type]} ${className || ''}`}>{text}</Tag>
+    <Tag className={`font-sans font-medium ${HeadingClass[headingType]} ${className || ''}`}>
+      {title}
+    </Tag>
   );
 });

package/mobile/src/ui-kit/Heading/{HeadingProps.ts → HeadingContent.ts}

@@ -7,8 +7,11 @@
  */
 export type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
-export interface HeadingProps {
-  className?: string;
-  type: HeadingType;
-  text?: string;
+export interface HeadingTypeContent {
+  headingType?: HeadingType;
+}
+
+export interface HeadingContent {
+  /** @title Заголовок */
+  title?: string;
 }

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

@@ -1,14 +1,27 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { projectSettings } from '../../ProjectSettings';
-import type { IconProps } from './IconProps';
+import type { IconColor, IconProps } from './IconProps';
+
+const svgColorsMap: Record<IconColor, string> = {
+  none: '',
+  primary: 'text-primary-main',
+};
 
 export const Icon = JSX<IconProps>(
-  ({ className = '', name, alt = `Icon ${name}`, title = alt, asSVG, ...imgProps }) => {
+  ({
+    className = '',
+    name,
+    alt = `Icon ${name}`,
+    title = alt,
+    asSVG,
+    color = 'primary',
+    ...imgProps
+  }) => {
     const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
 
     if (asSVG) {
       return (
-        <svg className={className} {...imgProps} aria-hidden="true">
+        <svg className={`${svgColorsMap[color]} ${className}`} {...imgProps} aria-hidden="true">
           {title ? <title>{title}</title> : null}
           {alt ? <desc>{alt}</desc> : null}
           <use href={`${href}#icon`} xlinkHref={`${href}#icon`} />

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

@@ -2,6 +2,12 @@ import type { IconName } from '../../icons/IconName';
 
 export type { IconName };
 
+/**
+ * @title Цвет иконки (svg)
+ * @enumNames ["Нет", "Основной"]
+ */
+export type IconColor = 'none' | 'primary';
+
 export interface IconProps {
   className?: string;
   name: IconName;
@@ -10,4 +16,5 @@ export interface IconProps {
   width?: string;
   height?: string;
   asSVG?: boolean;
+  color?: IconColor;
 }

package/mobile/src/ui-kit/{Img.tsx → Img/Img.tsx}

@@ -1,15 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ImgSource, Picture } from '../model/Picture';
+import type { ImgSource } from '../../model/Picture';
+import { ImageProps } from './ImgProps';
 
-export interface ImageProps {
-  className?: string;
-  image: Picture;
-}
-
-export const Img = JSX<ImageProps>(({ className = '', image: { size, ...image } }) => {
+export const Img = JSX<ImageProps>(({ className = '', image }) => {
+  if (!image) {
+    return null;
+  }
   const style = {
-    width: size?.width ? `${size?.width}px` : '100%',
-    height: size?.height ? `${size?.height}px` : '100%',
+    width: image.size?.width ? `${image.size?.width}px` : '100%',
+    height: image.size?.height ? `${image.size?.height}px` : '100%',
   };
 
   return (
@@ -25,7 +24,7 @@ export const Img = JSX<ImageProps>(({ className = '', image: { size, ...image }
         alt={image.alt || image.title}
         title={image.title}
         style={style}
-        {...size}
+        {...image.size}
       />
     </picture>
   );

package/mobile/src/ui-kit/Img/ImgProps.ts

@@ -0,0 +1,9 @@
+import type { Picture } from '../../model/Picture';
+
+export interface ImageContent {
+  image?: Picture;
+}
+
+export interface ImageProps extends ImageContent {
+  className?: string;
+}

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

@@ -0,0 +1,24 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ListItem } from './ListItem';
+import { ListProps } from './ListProps';
+
+export const List = JSX<ListProps>((props) => {
+  const { className = '', itemClassName, isDotted, items, version } = props;
+
+  return (
+    <section className={`${className}`} role="list">
+      {items?.length
+        ? items.map((_, i) => (
+            <ListItem
+              key={String(i)}
+              className={itemClassName}
+              isDotted={isDotted}
+              version={version}
+            >
+              {_}
+            </ListItem>
+          ))
+        : null}
+    </section>
+  );
+});

package/mobile/src/ui-kit/List/ListContent.ts

@@ -0,0 +1,4 @@
+export interface ListContent {
+  /** @title Список */
+  items?: string[];
+}

package/mobile/src/ui-kit/List/ListItem.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ListItemVersion } from './ListProps';
+
+/**
+ * @title Параметры элемента списка
+ */
+export interface ListItemProps {
+  className?: string;
+  version?: ListItemVersion;
+  text?: string;
+  isDotted?: boolean;
+}
+
+const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
+
+const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-white',
+  gray: 'text-secondary-text',
+};
+
+const LIST_STYLE_MAP: Record<ListItemVersion, string> = {
+  primary: 'bg-primary-main',
+  secondary: 'bg-white',
+  gray: 'bg-secondary-text',
+};
+
+export const ListItem = JSX<ListItemProps>(
+  ({ className = '', isDotted = true, children, version = 'primary' }) => {
+    return (
+      <div className={`font-sans flex items-center ${className}`} role="listitem">
+        {isDotted && <div className={getListStyle(version)} />}
+        <span className={TEXT_STYLE_MAP[version]}>{children}</span>
+      </div>
+    );
+  },
+);
+
+const getListStyle = (version: ListItemVersion) => {
+  const size =
+    version === 'gray' ? 'w-[6px] h-[6px] min-w-[6px] min-h-[6px]' : 'w-2 h-2 min-w-2 min-h-2';
+  return `${LIST_STYLE_CLASSES} ${LIST_STYLE_MAP[version]} ${size}`;
+};

package/mobile/src/ui-kit/List/ListProps.ts

@@ -0,0 +1,16 @@
+import type { ListContent } from './ListContent';
+
+/**
+ * @title Версия списка
+ */
+export type ListItemVersion = 'primary' | 'secondary' | 'gray';
+
+/**
+ * @title Содержимое списка
+ */
+export interface ListProps extends ListContent {
+  className?: string;
+  isDotted?: boolean;
+  version?: ListItemVersion;
+  itemClassName?: string;
+}

package/package.json

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

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

@@ -6,28 +6,28 @@ import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import type { AccordionProps } from './Accordion';
 import { Accordion } from './Accordion';
 import type {
-  HeadlineAccordionBlock,
-  LinkDocsAccordionBlock,
-  PictureTextAccordionBlock,
-  TextBlockAccordionBlock,
+  HeadlineAccordionBlockDef,
+  LinkDocsAccordionBlockDef,
+  PictureTextAccordionBlockDef,
+  TextBlockAccordionBlockDef,
 } from './AccordionContent';
 
-const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockAccordionBlock = {
+const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockAccordionBlockDef = {
   accordionBlockType: 'TextBlock',
   ...TEXT_BLOCK,
 };
 
-const HEADLINE_ACCORDION_BLOCK: HeadlineAccordionBlock = {
+const HEADLINE_ACCORDION_BLOCK: HeadlineAccordionBlockDef = {
   accordionBlockType: 'Headline',
   ...HEADLINE,
 };
 
-const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlock = {
+const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlockDef = {
   accordionBlockType: 'PictureText',
   ...PICTURE_TEXT,
 };
 
-const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlock = {
+const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlockDef = {
   accordionBlockType: 'LinkDocs',
   ...linkDocsContentExample,
   title: '',

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

@@ -3,36 +3,64 @@ import { HEADLINE } from '../Headline/Headline.fixture';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
+import { TILE } from '../Tile/Tile.fixture';
+import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
+import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
 import type { AccordionProps } from './Accordion';
 import { Accordion } from './Accordion';
 import type {
-  HeadlineAccordionBlock,
-  LinkDocsAccordionBlock,
-  PictureTextAccordionBlock,
-  TextBlockAccordionBlock,
+  HeadlineAccordionBlockDef,
+  LinkDocsAccordionBlockDef,
+  PictureTextAccordionBlockDef,
+  TextBlockAccordionBlockDef,
+  TileAccordionBlockDef,
+  ProductTileAccordionBlockDef,
+  GalleryAccordionBlockDef,
+  MiniGalleryAccordionBlockDef,
 } from './AccordionContent';
 
-const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockAccordionBlock = {
+const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockAccordionBlockDef = {
   accordionBlockType: 'TextBlock',
   ...TEXT_BLOCK,
 };
 
-const HEADLINE_ACCORDION_BLOCK: HeadlineAccordionBlock = {
+const HEADLINE_ACCORDION_BLOCK: HeadlineAccordionBlockDef = {
   accordionBlockType: 'Headline',
   ...HEADLINE,
 };
 
-const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlock = {
+const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlockDef = {
   accordionBlockType: 'PictureText',
   ...PICTURE_TEXT,
 };
 
-const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlock = {
+const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlockDef = {
   accordionBlockType: 'LinkDocs',
   ...linkDocsContentExample,
   title: '',
 };
 
+const TILES_ACCORDION_BLOCK: TileAccordionBlockDef = {
+  accordionBlockType: 'Tile',
+  ...TILE,
+};
+
+const PRODUCT_TILES_ACCORDION_BLOCK: ProductTileAccordionBlockDef = {
+  accordionBlockType: 'ProductTile',
+  ...PRODUCT_TILE,
+};
+
+const GALLERY_ACCORDION_BLOCK: GalleryAccordionBlockDef = {
+  accordionBlockType: 'Gallery',
+  ...GALLERY,
+};
+
+const MINI_GALLERY_ACCORDION_BLOCK: MiniGalleryAccordionBlockDef = {
+  accordionBlockType: 'MiniGallery',
+  ...MINI_GALLERY,
+};
+
 const propsTextBlock: AccordionProps = {
   title: 'Accordion title',
   context,
@@ -53,6 +81,22 @@ const propsTextBlock: AccordionProps = {
       label: 'Accordion label 4',
       blocks: [LINK_DOCS_ACCORDION_BLOCK],
     },
+    {
+      label: 'Accordion label 5',
+      blocks: [TILES_ACCORDION_BLOCK],
+    },
+    {
+      label: 'Accordion label 6',
+      blocks: [PRODUCT_TILES_ACCORDION_BLOCK],
+    },
+    {
+      label: 'Accordion label 7',
+      blocks: [GALLERY_ACCORDION_BLOCK],
+    },
+    {
+      label: 'Accordion label 8',
+      blocks: [MINI_GALLERY_ACCORDION_BLOCK],
+    },
   ],
 };
 

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

@@ -14,7 +14,7 @@ export const Accordion = JSX<AccordionProps>(
           bordered ? 'px-4' : ''
         } ${className}`}
       >
-        {title ? <Heading type="h3" className="mb-2 text-center" text={title} /> : null}
+        {title ? <Heading headingType="h3" className="mb-2 text-center" 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">

package/src/components/Accordion/Accordion.tsx

@@ -9,7 +9,7 @@ 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 type="h4" className="mb-2.5" text={title} /> : null}
+      {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) => (