@redneckz/wildless-cms-uni-blocks 0.9.5 → 0.9.6

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -1,17 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
+import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { style } from '../../utils/style';
 import { Text } from '../../ui-kit/Text/Text';
-import { useLink } from '../../hooks/useLink';
-import type { BlockVersion } from '../../model/BlockVersion';
+import { style } from '../../utils/style';
+import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
-import type { Picture } from '../../model/Picture';
-import type { UniBlockProps } from '../../model/JSXBlock';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
 
@@ -32,31 +32,25 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
     version = 'primary',
     ...rest
   }) => {
-    const link = useLink();
-    const adjustedProps = link({ href, target });
-    const tagName = href ? 'a' : 'section';
-
     return (
       <BlockWrapper
         className={style(
-          'flex flex-col justify-between items-stretch min-w-[260px] h-full w-full p-6',
+          'justify-between min-w-[260px]',
           'box-border border-solid border border-gray',
           align,
           className,
         )}
-        extraProps={adjustedProps}
-        tag={tagName}
         version={version}
         {...rest}
       >
-        <div className="flex flex-col h-full">
+        <LinkWrapper className="p-6" href={href} target={target}>
           {renderImage(icon)}
           {renderCardTitle(headlineSmallVersion, title)}
           {renderDescription(description, title)}
           {renderItems(items, isDotted, version)}
           {renderAdditionalDescription(additionalDescription)}
-        </div>
-        {renderButtonsSection([button], { buttonClassName: 'mt-6 w-full' })}
+        </LinkWrapper>
+        {renderButtonsSection([button], { className: 'p-6 pt-0', isVertical: true })}
       </BlockWrapper>
     );
   },
@@ -72,7 +66,11 @@ const renderImage = (image?: Picture) => (
 );
 
 const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
-  title ? <Text size={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</Text> : null;
+  title ? (
+    <div>
+      <Text size={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</Text>
+    </div>
+  ) : null;
 
 const renderDescription = (description?: string, title?: string) =>
   description ? (

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -4,34 +4,29 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
-import { useLink } from '../../hooks/useLink';
 import { style } from '../../utils/style';
+import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
 
 export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
 
 export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
   ({ className = '', title, icon, list = [], href, target, ...rest }) => {
-    const link = useLink();
-    const adjustedProps = link({ href, target });
-    const tagName = href ? 'a' : 'section';
-
     return (
-      <BlockWrapper
-        tag={tagName}
-        className={style('border border-gray flex min-w-[536px]', className)}
-        extraProps={adjustedProps}
-        {...rest}
-      >
-        <div className="w-[200px] min-w-[200px] self-center">
-          {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
-          {icon?.src ? <Img image={icon} /> : null}
-        </div>
-        <div className="p-8 pl-3 w-full">
-          {title ? <Heading className=" mb-3.5" headingType="h5" title={title} /> : null}
-          {list.length ? <div className="flex flex-col gap-3">{list?.map(renderList)}</div> : null}
-        </div>
+      <BlockWrapper className={style('border border-gray min-w-[536px]', className)} {...rest}>
+        <LinkWrapper className="flex" href={href} target={target}>
+          <div className="w-[200px] min-w-[200px] self-center">
+            {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+            {icon?.src ? <Img image={icon} /> : null}
+          </div>
+          <div className="p-8 pl-3 w-full">
+            {title ? <Heading className=" mb-3.5" headingType="h5" title={title} /> : null}
+            {list.length ? (
+              <div className="flex flex-col gap-3">{list?.map(renderList)}</div>
+            ) : null}
+          </div>
+        </LinkWrapper>
       </BlockWrapper>
     );
   },

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -1,16 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { SocialMedia } from '../Footer/SocialMedia';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
-import { useLink } from '../../hooks/useLink';
+import { SocialMedia } from '../Footer/SocialMedia';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 
 const BORDER_STYLE =
   'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
@@ -33,10 +33,6 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     version = 'primary',
     ...rest
   }) => {
-    const link = useLink();
-    const adjustedProps = link({ href, target });
-    const tagName = href ? 'a' : 'section';
-
     return (
       <BlockWrapper
         className={style(
@@ -44,30 +40,34 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
           BORDER_STYLE,
           className,
         )}
-        extraProps={adjustedProps}
-        tag={tagName}
         version={version}
         {...rest}
       >
-        <div className="self-center">
-          {title ? <Heading headingType="h3" as="h3" className="mb-8" title={title} /> : null}
-        </div>
-        <div className="mb-5">
-          {description ? (
-            <Paragraph size="text-xl" font="font-light" color="group-data-gray:text-secondary-text">
-              {description}
-            </Paragraph>
-          ) : null}
-        </div>
-        <div className="flex align-center w-full">
-          <div className="w-1/2 h-full flex flex-col flex-1 justify-end">
-            {items.length ? (
-              <List className="text-xl-light flex flex-col gap-2 pb-16 mb-3" items={items} />
+        <LinkWrapper className="flex flex-col" href={href} target={target}>
+          <div className="self-center">
+            {title ? <Heading headingType="h3" as="h3" className="mb-8" title={title} /> : null}
+          </div>
+          <div className="mb-5">
+            {description ? (
+              <Paragraph
+                size="text-xl"
+                font="font-light"
+                color="group-data-gray:text-secondary-text"
+              >
+                {description}
+              </Paragraph>
             ) : null}
-            {socialMedia.length ? <SocialMedia className="pb-0" media={socialMedia} /> : null}
           </div>
-          {renderIconBlock(icon, items)}
-        </div>
+          <div className="flex align-center w-full">
+            <div className="w-1/2 h-full flex flex-col flex-1 justify-end">
+              {items.length ? (
+                <List className="text-xl-light flex flex-col gap-2 pb-16 mb-3" items={items} />
+              ) : null}
+              {socialMedia.length ? <SocialMedia className="pb-0" media={socialMedia} /> : null}
+            </div>
+            {renderIconBlock(icon, items)}
+          </div>
+        </LinkWrapper>
       </BlockWrapper>
     );
   },

package/src/components/VerticalLayout/VerticalLayout.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderBlock } from '../../BlockRenderer/renderBlock';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { AlignTypeWithStretch } from '../../model/AlignType';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
@@ -25,7 +26,6 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
     isInnerPadding = true,
     version = 'transparent',
     isTheme = false,
-    options,
     ...rest
   }) => {
     const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
@@ -43,7 +43,11 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
         isTheme={isTheme}
         {...rest}
       >
-        {renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } })}
+        {renderChildren({
+          ...rest,
+          renderProps: (block, options) =>
+            renderBlock(block, options, { className: innerPaddingStyle }),
+        })}
       </BlockWrapper>
     );
   },

package/src/ui-kit/BlockWrapper.tsx

@@ -1,15 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../EventBus/defaultEventBus';
-import { useBlockIntersectionObserver } from '../services/BlockRouter/useBlockIntersectionObserver';
-import { style } from '../utils/style';
 import type { BlockVersion } from '../model/BlockVersion';
 import type { UniBlockProps } from '../model/JSXBlock';
+import { useBlockIntersectionObserver } from '../services/BlockRouter/useBlockIntersectionObserver';
+import { style } from '../utils/style';
 
 interface BlockWrapperProps extends UniBlockProps {
   tag?: keyof HTMLElementTagNameMap;
   role?: string;
-  extraProps?: Record<string, any>;
 }
 
 export const blockStyles: Record<BlockVersion, string> = {
@@ -24,11 +23,10 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
   ({
     className = '',
     version = 'primary',
+    isTheme = true,
     block,
     tag = 'section',
     role,
-    isTheme = true,
-    extraProps = {},
     children,
   }) => {
     const Tag: any = tag;
@@ -57,7 +55,6 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
         {...(version && isTheme ? { 'data-ver': version } : {})}
         {...(block?.anchor ? { id: block.anchor, ref } : {})}
         role={role}
-        {...extraProps}
       >
         {children}
       </Tag>

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

@@ -0,0 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { Target } from '../../model/LinkProps';
+
+interface LinkWrapperProps {
+  className?: string;
+  href?: string;
+  target?: Target;
+}
+
+export const LinkWrapper = JSX<LinkWrapperProps>(({ className = '', href, target, children }) => {
+  const link = useLink();
+  const linkProps = link({ href, target });
+  const Tag = href ? 'a' : 'div';
+
+  return (
+    <Tag className={className} {...(href ? linkProps : {})}>
+      {children}
+    </Tag>
+  );
+});