@redneckz/wildless-cms-uni-blocks 0.6.23 → 0.6.25

package/mobile/src/services/sitemap/useSitemap.ts

@@ -1,11 +1,11 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
-import type { HeaderContent } from '../../components/Header/HeaderContent';
-import { projectSettings } from '../../ProjectSettings';
 import type { Fallback } from '../../model/Fallback';
+import { projectSettings } from '../../ProjectSettings';
 import { fetchJSONUnsafe } from '../../utils/fetchJSON';
+import type { SitemapProps } from './SitemapProps';
 
-export function useSitemap(fallback: Fallback = {}): HeaderContent {
-  const { data } = useAsyncData<HeaderContent>(
+export function useSitemap(fallback: Fallback = {}): SitemapProps {
+  const { data } = useAsyncData<SitemapProps>(
     `/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`,
     fetchJSONUnsafe,
     { fallback },

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

@@ -1,21 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
-import type { Picture } from '../../model/Picture';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { Img } from '../Img/Img';
 import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
 
-export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
-
 const titleStyleMap: Record<BlockVersion, string> = {
   primary: 'text-primary-text',
   secondary: 'text-white',
 };
+
 const descStyleMap: Record<BlockVersion, string> = {
   primary: 'text-secondary-text',
   secondary: 'text-white',
 };
 
+export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
+
 export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
   const {
     className = '',
@@ -25,16 +26,14 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
     version = 'primary',
     benefitsVersion = 'normal',
   } = props;
-
-  const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
   const listItemAlign = description ? 'items-start' : 'items-center';
-  const iconVersion = getIconVersion(isIconWhite, icon);
+  const calcVersion = benefitsVersion === 'white' ? 'secondary' : 'primary';
 
   return (
     <div className={`flex gap-5 ${listItemAlign} ${className}`}>
       {icon ? (
-        <div className={renderBenefitIconBgStyle(version, benefitsVersion)}>
-          <Img className="w-6 h-6" image={{ ...icon, iconVersion }} asSVG />
+        <div className={getBenefitIconBgStyle(version, benefitsVersion)}>
+          <Img className="w-6 h-6" image={getIconWithVersion(icon, calcVersion)} asSVG />
         </div>
       ) : null}
       <div className="gap-0.5">
@@ -47,7 +46,7 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
   );
 });
 
-function renderBenefitIconBgStyle(version: BlockVersion, benefitsVersion: IconVersion) {
+function getBenefitIconBgStyle(version: BlockVersion, benefitsVersion: IconVersion) {
   let bgColorStyle = 'bg-primary-main text-black';
 
   if (version === 'secondary') {
@@ -58,6 +57,3 @@ function renderBenefitIconBgStyle(version: BlockVersion, benefitsVersion: IconVe
 
   return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
 }
-
-const getIconVersion = (isIconWhite: boolean, icon?: Picture) =>
-  icon?.iconVersion || isIconWhite ? 'white' : 'normal';

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

@@ -2,9 +2,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { AnchorClickScrollingEvent } from '../components/Tabs/Tabs';
 import { EventBus } from '../EventBus/EventBus';
+import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
 import type { UniBlockProps } from '../model/JSXBlock';
 import { changeHashOnObserve } from '../utils/changeHashOnObserve';
-import { IntersectionObserverTag } from './IntersectionObserverTag';
 
 interface BlockWrapperProps extends UniBlockProps, Record<string, any> {
   anchor?: string;
@@ -24,57 +24,42 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
   ({ anchor, className, children, tag = 'section', labels, role }) => {
     const Tag: any = tag;
 
-    const [shouldRenderBlock, setShouldRenderBlock] = useState(true);
+    const [isVisible, setVisible] = useState(true);
     const anchorClickRef = useRef<AnchorClickScrollingEvent>({});
 
     const observerCallback = useMemo(
       () => changeHashOnObserve({ anchor, anchorClickRef }),
       [anchor],
     );
+    const ref = useIntersectionObserver(observerCallback, OBSERVER_OPTIONS);
 
-    useEffect(() => {
-      const anchorClickCleanup = EventBus.inst.subscribe('anchorClick', (e) => {
-        setShouldRenderBlock(true);
-        anchorClickRef.current = e;
-      });
-      const tabCleanup = EventBus.inst.subscribe('tab', (event) => {
-        if (event.type === 'group') {
-          const blockHasSettgins = labels?.length || anchor;
-          setShouldRenderBlock(
-            event.label ? !blockHasSettgins || Boolean(labels?.includes(event.label)) : true,
-          );
-        } else {
-          changeHash(event.label);
-          setShouldRenderBlock(true);
-        }
-      });
-
-      return () => {
-        anchorClickCleanup();
-        tabCleanup();
-      };
-    }, []);
-
-    if (!shouldRenderBlock) {
-      return null;
-    }
+    useEffect(
+      () =>
+        EventBus.inst.subscribe('anchorClick', (e) => {
+          setVisible(true);
+          anchorClickRef.current = e;
+        }),
+      [],
+    );
+    useEffect(
+      () =>
+        EventBus.inst.subscribe('tab', (event) => {
+          if (event.type === 'group') {
+            const hasSettings = labels?.length || anchor;
+            setVisible(event.label ? !hasSettings || Boolean(labels?.includes(event.label)) : true);
+          } else {
+            changeHash(event.label);
+            setVisible(true);
+          }
+        }),
+      [],
+    );
 
-    return anchor ? (
-      <IntersectionObserverTag
-        tag={tag}
-        className={className}
-        observerCallback={observerCallback}
-        observerOptions={OBSERVER_OPTIONS}
-        anchor={anchor}
-        role={role}
-      >
-        {children}
-      </IntersectionObserverTag>
-    ) : (
-      <Tag className={className} role={role}>
+    return isVisible ? (
+      <Tag className={className} role={role} {...(anchor ? { id: anchor, ref } : {})}>
         {children}
       </Tag>
-    );
+    ) : null;
   },
 );
 

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

@@ -7,15 +7,12 @@ export interface BreadcrumbProps extends LinkProps {
 }
 
 export const Breadcrumb = JSX<BreadcrumbProps>(
-  ({ text, href, target, onClick, className = '', children }) => {
-    if (href) {
-      return (
-        <a className={`no-underline ${className}`} href={href} target={target} onClick={onClick}>
-          <span className={className}>{text || children}</span>
-        </a>
-      );
-    } else {
-      return <span className={className}>{text || children}</span>;
-    }
-  },
+  ({ text, href, target, onClick, className = '', children }) =>
+    href ? (
+      <a className={`no-underline ${className}`} href={href} target={target} onClick={onClick}>
+        <span className={className}>{text || children}</span>
+      </a>
+    ) : (
+      <span className={className}>{text || children}</span>
+    ),
 );

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

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { IconVersion } from '../../model/IconVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../Img/Img';
@@ -14,12 +13,6 @@ interface RenderButtonProps {
   buttonClassName?: string;
   index?: number;
 }
-
-interface RenderButtonIconProps {
-  icon?: Picture;
-  iconVersion?: IconVersion;
-}
-
 export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '', buttons }) => {
   const { handlerDecorator } = context;
   const router = context.useRouter();
@@ -36,10 +29,10 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
 export function renderButton({ button, buttonClassName, index }: RenderButtonProps) {
   const { icon, iconRight, version, ...rest } = button;
 
-  const iconVersion = version === 'secondary' ? 'normal' : 'white';
+  const iconVersion = version === 'secondary' ? 'color' : 'white';
 
-  const leftIcon = renderButtonIcon({ icon, iconVersion });
-  const rightIcon = renderButtonIcon({ icon: iconRight, iconVersion });
+  const leftIcon = renderButtonIcon({ ...icon, iconVersion: iconVersion } as Picture);
+  const rightIcon = renderButtonIcon({ ...iconRight, iconVersion: iconVersion } as Picture);
 
   return (
     <Button
@@ -53,11 +46,11 @@ export function renderButton({ button, buttonClassName, index }: RenderButtonPro
   );
 }
 
-const renderButtonIcon = ({ icon, iconVersion }: RenderButtonIconProps) => {
+const renderButtonIcon = (icon: Picture) => {
   if (!icon?.icon && !icon?.src) {
     return null;
   }
   const iconWidth = icon?.size?.width ? `${icon.size.width}` : '24';
 
-  return <Img image={{ ...icon, iconVersion: iconVersion }} width={iconWidth} height="24" asSVG />;
+  return <Img image={{ ...icon }} width={iconWidth} height="24" asSVG />;
 };

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { clamp } from '../../utils/clamp';
-import { adjustValue, localNumberFormat } from './adjustValue ';
+import { adjustValue, localNumberFormat } from './adjustValue';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { Input } from '../Input/Input';
 import type { CurrencyInputProps } from './CurrencyInputProps';

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

@@ -4,7 +4,8 @@ import { projectSettings } from '../../ProjectSettings';
 import type { IconProps } from './IconProps';
 
 const svgUseStyleMap: Record<IconVersion, string> = {
-  normal: 'text-primary-main',
+  normal: '',
+  color: 'text-primary-main',
   black: 'text-black',
   white: 'text-black',
 };
@@ -16,13 +17,13 @@ export const Icon = JSX<IconProps>(
     name = '',
     alt = `Иконка ${name}`,
     title = alt,
-    iconVersion = 'normal',
+    iconVersion = 'color',
     asSVG,
     ...imgProps
   }) => {
     const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
 
-    if (asSVG) {
+    if (asSVG && iconVersion !== 'normal') {
       return (
         <Background className={className}>
           <svg

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

@@ -10,10 +10,16 @@ export interface LogoProps {
   showTitle?: boolean;
 }
 
+const ICON_VERSION_MAP: Record<BgColorVersion, string> = {
+  'bg-white': 'color',
+  transparent: 'white',
+};
+
 const SVG_COLOR: Record<BgColorVersion, string> = {
   'bg-white': 'text-primary-main',
   transparent: 'text-white',
 };
+
 const TEXT_COLOR: Record<BgColorVersion, string> = {
   'bg-white': 'text-black',
   transparent: 'text-white',
@@ -29,8 +35,10 @@ export const Logo = JSX<Partial<LogoProps>>(
         aria-label="Россельхозбанк"
       >
         <Img
-          image={{ icon: 'LogoIcon', iconVersion: SVG_COLOR[bgColor] }}
-          className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`}
+          image={{ icon: 'LogoIcon', iconVersion: ICON_VERSION_MAP[bgColor] }}
+          className={`${SVG_COLOR[bgColor]}`}
+          width="34"
+          height="34"
           asSVG
         />
         {showTitle ? (

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { Icon } from '../Icon/Icon';
 
@@ -23,9 +23,8 @@ export const Select = JSX<SelectProps>(
     const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
     const [isOpen, setIsOpen] = useState(false);
 
-    const wrapperRef = useRef<HTMLInputElement | null>(null);
-
-    useOutsideClick(wrapperRef, setIsOpen);
+    const handleClickOutside = useCallback(() => setIsOpen(false), []);
+    const wrapperRef = useOutsideClick<HTMLDivElement>(handleClickOutside);
 
     const choiceOption = (option: OptionProps) => {
       setSelectedItem(option);

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

@@ -10,15 +10,13 @@ export const Tags = JSX<TagsProps>((props) => {
   const { tags, className = '' } = props;
 
   return tags?.length ? (
-    <div className={`flex flex-wrap gap-2 ${className}`}>
-      {tags.map((_, i) => renderTag(_, String(i)))}
-    </div>
+    <div className={`flex flex-wrap gap-2 ${className}`}>{tags.map(renderTag)}</div>
   ) : null;
 });
 
-const renderTag = (tag: string, key: string) => (
+const renderTag = (tag: string, key: number) => (
   <span
-    key={key}
+    key={String(key)}
     className="text-m-light py-2 px-2.5 border-solid border rounded-md border-color-stroke"
   >
     {tag}

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

@@ -10,9 +10,9 @@ export interface TopItemProps extends TopItemContent {
   className?: string;
   flat?: boolean;
   ariaLabel?: string;
-  onClick?: () => void;
   bgColor?: BgColorVersion;
   dataItemName?: string;
+  onClick?: () => void;
 }
 
 const TEXT_CLASSES = 'font-sans text-s-light';

package/mobile/src/utils/getIconWithVersion.ts

@@ -0,0 +1,7 @@
+import type { Picture } from '../model/Picture';
+import type { BlockVersion } from '../model/BlockVersion';
+
+export const getIconWithVersion = (icon: Picture, version: BlockVersion = 'primary'): Picture => ({
+  ...icon,
+  iconVersion: icon?.iconVersion ?? (version === 'secondary' ? 'white' : 'color'),
+});

package/package.json

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

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

@@ -8,6 +8,7 @@ import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
 import type { AccordionContent } from '../Accordion/AccordionContent';
 import type { AccordionItemProps } from './AccordionItemProps';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
 
@@ -64,10 +65,22 @@ const FoldButton = JSX<FoldButtonProps>(({ className, icon, label, primaryIcon,
   >
     <span className="text-m-title-xs font-medium pr-2.5 flex group-hover:text-primary-main">
       {primaryIcon ? (
-        <Img image={primaryIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
+        <Img
+          image={getIconWithVersion(primaryIcon)}
+          className="mr-3 flex-shrink-0"
+          width="24"
+          height="24"
+          asSVG
+        />
       ) : null}
       {label}
     </span>
-    <Img className="flex-shrink-0" image={icon} width="24" height="24" asSVG />
+    <Img
+      className="flex-shrink-0"
+      image={getIconWithVersion({ icon: icon })}
+      width="24"
+      height="24"
+      asSVG
+    />
   </button>
 ));

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -61,7 +61,7 @@ export default {
             icon: image,
           },
         ]}
-        benefitsBlockVersion="primary"
+        version="primary"
       />
     </div>
   ),
@@ -105,7 +105,7 @@ export default {
             icon: { icon: 'GlobalIcon' },
           },
         ]}
-        benefitsBlockVersion="primary"
+        version="primary"
       />
     </div>
   ),
@@ -150,7 +150,7 @@ export default {
               items: itemsList,
               benefitType: 'list',
             },
-            icon: { icon: 'ActualBalanceIcon' },
+            icon: { icon: 'ActualBalanceIcon', iconVersion: 'normal' },
           },
         ]}
       />
@@ -197,10 +197,10 @@ export default {
               items: itemsList,
               benefitType: 'list',
             },
-            icon: { icon: 'ActualBalanceIcon' },
+            icon: { icon: 'ActualBalanceIcon', iconVersion: 'normal' },
           },
         ]}
-        benefitsBlockVersion="secondary"
+        version="secondary"
       />
     </div>
   ),
@@ -244,7 +244,7 @@ export default {
             icon: { icon: 'GlobalIcon', iconVersion: 'black' },
           },
         ]}
-        benefitsBlockVersion="secondary"
+        version="secondary"
       />
     </div>
   ),

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,20 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
+import { BlockVersion, VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import type { BenefitsBlockContent, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
 import { BenefitBlockItemProps, DescriptionDef } from './BenefitsBlockContent';
 
-export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
-
-const benefitsBlockStyleMap = {
-  primary: 'bg-white',
-  secondary: 'bg-primary-main',
-};
-
 const benefitsTextStyleMap = {
   primary: '',
   secondary: 'text-white',
@@ -30,81 +23,59 @@ const benefitsIconStyleMap = {
   secondary: 'bg-white/30 text-black',
 };
 
+interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
+
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', title, benefitList, benefitsBlockVersion = 'primary', ...rest }) => {
-    return (
-      <BlockWrapper
-        className={`font-sans text-primary-text p-12 flex flex-col items-center ${className} ${benefitsBlockStyleMap[benefitsBlockVersion]}`}
-        {...rest}
-      >
-        {title ? (
-          <Heading
-            headingType="h3"
-            as="h2"
-            className={`max-w-[47rem] text-center ${benefitsTextStyleMap[benefitsBlockVersion]}`}
-            title={title}
-          />
-        ) : null}
-        {benefitList?.length ? renderBenefits(benefitList, benefitsBlockVersion) : null}
-      </BlockWrapper>
-    );
-  },
+  ({ className = '', title, benefitList, version = 'primary', ...rest }) => (
+    <BlockWrapper
+      className={`font-sans text-primary-text p-12 flex flex-col items-center ${className} ${VersionStyleMap[version]}`}
+      {...rest}
+    >
+      {title ? (
+        <Heading
+          headingType="h3"
+          as="h2"
+          className={`max-w-[47rem] text-center ${benefitsTextStyleMap[version]}`}
+          title={title}
+        />
+      ) : null}
+      {benefitList?.length ? (
+        <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
+          {benefitList.map(renderStep(version))}
+        </div>
+      ) : null}
+    </BlockWrapper>
+  ),
 );
 
-const renderBenefits = (
-  benefitList: BenefitBlockItemProps[],
-  benefitsBlockVersion: BlockVersion,
-) => {
+const renderStep = (version: BlockVersion) => (benefit: BenefitBlockItemProps, i: number) => {
+  const description = benefit.description;
+
   return (
-    <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
-      {benefitList.map(renderStep(benefitsBlockVersion))}
+    <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
+      {benefit?.icon?.icon ? (
+        <Img
+          className={`w-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[version]}`}
+          image={getIconWithVersion(benefit.icon, version)}
+          asSVG
+        />
+      ) : null}
+      {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
+      <div className="ml-5">
+        {benefit?.label ? (
+          <h3 className={`text-h6 m-0 ${benefitsTextStyleMap[version]}`}>{benefit.label}</h3>
+        ) : null}
+        {renderDescription(description, version)}
+      </div>
     </div>
   );
 };
 
-const setIconVersion = (benefitIcon: Picture, benefitsBlockVersion: BlockVersion) => {
-  if (!benefitIcon.icon || benefitIcon?.iconVersion) {
-    return benefitIcon;
-  }
-  benefitIcon.iconVersion = benefitsBlockVersion === 'secondary' ? 'white' : 'normal';
-
-  return benefitIcon;
-};
-
-const renderStep =
-  (benefitsBlockVersion: BlockVersion) => (benefit: BenefitBlockItemProps, i: number) => {
-    const description = (benefit?.description || undefined) as DescriptionDef;
-
-    return (
-      <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
-        {benefit?.icon?.icon ? (
-          <Img
-            className={`w-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[benefitsBlockVersion]}`}
-            image={setIconVersion(benefit.icon, benefitsBlockVersion)}
-            asSVG
-          />
-        ) : null}
-        {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
-        <div className="ml-5">
-          {benefit?.label ? (
-            <h3 className={`text-h6 m-0 ${benefitsTextStyleMap[benefitsBlockVersion]}`}>
-              {benefit.label}
-            </h3>
-          ) : null}
-          {renderDescription(description, benefitsBlockVersion)}
-        </div>
-      </div>
-    );
-  };
-
-const renderDescription = (description: DescriptionDef, benefitsBlockVersion: BlockVersion) => {
-  const benefitType = description ? description?.benefitType : null;
-  if (!benefitType) {
-    return null;
-  }
+const renderDescription = (description: DescriptionDef | undefined, version: BlockVersion) => {
+  const benefitType = description?.benefitType || null;
 
-  return description ? (
-    <div className={`text-l-light mt-2 ${benefitsDescriptionStyleMap[benefitsBlockVersion]}`}>
+  return description && benefitType ? (
+    <div className={`text-l-light mt-2 ${benefitsDescriptionStyleMap[version]}`}>
       {benefitType === 'list'
         ? renderListBenefit(description as ListBenefitDef)
         : renderTextBenefit(description as TextBenefitDef)}
@@ -112,7 +83,7 @@ const renderDescription = (description: DescriptionDef, benefitsBlockVersion: Bl
   ) : null;
 };
 
-const renderTextBenefit = (description?: TextBenefitDef) => (description ? description.name : null);
+const renderTextBenefit = (description?: TextBenefitDef) => description?.name || null;
 
 const renderListBenefit = (description?: ListBenefitDef) => {
   const listStyleType = description?.bullets ? 'list-disc pl-6' : '';

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -54,5 +54,5 @@ export type BenefitsBlockContent = TitleProps & {
    */
   benefitList?: BenefitBlockItemProps[];
   /** @default primary */
-  benefitsBlockVersion?: BlockVersion;
+  version?: BlockVersion;
 };

package/src/components/Blocks.ts

@@ -38,6 +38,7 @@ import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
+import { InvestmentGallery } from './InvestmentGallery/InvestmentGallery';
 
 export const Blocks: BlocksRegistry = {
   Accordion,
@@ -79,4 +80,5 @@ export const Blocks: BlocksRegistry = {
   SafeDepositRental,
   Tabs,
   ErrorBlock,
+  InvestmentGallery,
 };