@redneckz/wildless-cms-uni-blocks 0.14.814 → 0.14.816

package/src/ui-kit/BaseProductTile/BaseProductTile.tsx

@@ -1,17 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Headline } from '../../components/Headline/Headline';
+import { type Align } from '../../model/Align';
 import { type HeadlineVersion } from '../../model/HeadlineType';
+import { type IconVersion } from '../../model/IconVersion';
 import { type VNode } from '../../model/VNode';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { BaseTile } from '../BaseTile/BaseTile';
+import { type BenefitItemContent } from '../BenefitItem/BenefitItemContent';
 import { BenefitsList } from '../BenefitsList/BenefitsList';
 import { Img } from '../Img/Img';
 import { renderButtonsSection } from '../LinkButton/renderButtonsSection';
 import { PriceList } from '../PriceList/PriceList';
 import { RichText } from '../RichText/RichText';
-import { type RichTextItemSize } from '../RichText/RichTextProps';
+import { type RichTextItemSize, type RichVersion } from '../RichText/RichTextProps';
 import { Tags } from '../Tags/Tags';
-import { type BaseProductTileContent } from './BaseProductTileContent';
+import { type BaseProductTileContent, type PriceItem } from './BaseProductTileContent';
 
 const RICHTEXT_SIZE: Record<HeadlineVersion, RichTextItemSize> = {
   XXL: 'list-l',
@@ -47,7 +50,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     buttons,
     image,
     imageOptions: {
-      imageAlign = 'center',
+      imageAlign = 'center' as Align,
       directionRight = true,
       isImageAlwaysOnRight,
       isImageSecondary = false,
@@ -84,31 +87,65 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
         backwardButton={backwardButton}
         {...rest}
       >
-        <div className="flex flex-col sm:gap-xl gap-4xl">
-          {filteredBenefits?.length ? (
-            <BenefitsList
-              benefitsVersion={benefitsVersion}
-              isTabularBenefits={isTabularBenefits}
-              benefits={filteredBenefits}
-            />
-          ) : null}
-          {__html ? (
-            <RichText
-              richVersion={richVersion}
-              __html={__html}
-              isDotted={isDotted}
-              itemSize={RICHTEXT_SIZE[headlineVersion]}
-            />
-          ) : null}
-          {children}
-          {priceList?.length ? <PriceList priceList={priceList} /> : null}
-          {renderTags(tags)}
-        </div>
+        {renderChildList(
+          renderBenefits(filteredBenefits, { benefitsVersion, isTabularBenefits }),
+          renderRichText(__html, { richVersion, isDotted, headlineVersion }),
+          children,
+          renderPriceList(priceList),
+          renderTags(tags),
+        )}
       </BaseTile>
     );
   },
 );
 
+const renderBenefits = (
+  benefits?: BenefitItemContent[],
+  {
+    benefitsVersion,
+    isTabularBenefits,
+  }: { benefitsVersion?: IconVersion; isTabularBenefits?: boolean } = {},
+) =>
+  benefits?.length ? (
+    <BenefitsList
+      benefitsVersion={benefitsVersion}
+      isTabularBenefits={isTabularBenefits}
+      benefits={benefits}
+    />
+  ) : null;
+
+const renderRichText = (
+  __html?: string,
+  {
+    richVersion,
+    isDotted,
+    headlineVersion,
+  }: { richVersion?: RichVersion; isDotted?: boolean; headlineVersion?: HeadlineVersion } = {},
+) =>
+  __html ? (
+    <RichText
+      __html={__html}
+      richVersion={richVersion}
+      isDotted={isDotted}
+      itemSize={RICHTEXT_SIZE[headlineVersion ?? 'L']}
+    />
+  ) : null;
+
+const renderPriceList = (priceList?: PriceItem[]) =>
+  priceList?.length ? <PriceList priceList={priceList} /> : null;
+
+const renderChildList = (...elements: VNode[]) => {
+  const cleanElements = elements.filter(Boolean);
+
+  return cleanElements.length ? (
+    <div className="flex flex-col sm:gap-xl gap-4xl">
+      {cleanElements.map((_, i) => (
+        <div key={String(i)}>{_}</div>
+      ))}
+    </div>
+  ) : null;
+};
+
 export const leftOrRightImage = (img: VNode, directionRight: boolean) =>
   directionRight ? { rightImage: img } : { leftImage: img };
 

package/src/ui-kit/BaseTile/BaseTile.tsx

@@ -55,7 +55,7 @@ export const BaseTile = JSX<BaseTileProps>(
         )}
       >
         {isBackBtn && renderBackwardButton({ version, handleClick, text: backwardButtonText })}
-        {title ? <div className="relative h-full">{title}</div> : null}
+        {title ? <div className="relative">{title}</div> : null}
         <div
           className={style('grow relative flex flex-col @xl:flex-row gap-3xl w-full', {
             'self-start @xl:w-auto': leftImage,
@@ -69,14 +69,10 @@ export const BaseTile = JSX<BaseTileProps>(
                 '@xl:grid-cols-2 auto-cols-fr': rightImage,
                 grow: !leftImage,
               },
-              'h-full', //? fix issue https://github.com/redneckz/temp_wcms/issues/1254
-              'auto-rows-[max-content_1fr]', //? fix issue https://github.com/redneckz/temp_wcms/issues/1324
+              'h-auto',
             )}
           >
-            <div className="grow space-y-lg min-w-fit">
-              {insetTitle}
-              {children}
-            </div>
+            {renderMiddleContent(insetTitle, children)}
             {renderUnitContainer(
               renderChildren({ ...rest, extraProps: { className: '@container-normal' } }),
             )}
@@ -96,6 +92,14 @@ export const BaseTile = JSX<BaseTileProps>(
   },
 );
 
+const renderMiddleContent = (insetTitle: VNode, children: VNode) =>
+  insetTitle || children ? (
+    <div className="grow space-y-lg min-w-fit">
+      {insetTitle}
+      {children}
+    </div>
+  ) : null;
+
 const imageAlwaysOnRightContainerStyle = (isImage: boolean) =>
   style(isImage ? 'row-span-2' : '@xl:row-span-2');