@redneckz/wildless-cms-uni-blocks 0.3.84 → 0.3.85

package/src/components/Footer/HorizontalNavigationLink.tsx

@@ -0,0 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+
+interface HorizontalNavigationLinkProps extends LinkProps {
+  className: string;
+  index: number;
+  onClick: (ev: MouseEvent) => any;
+}
+
+export const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
+  ({ className = '', index, text, href, target, onClick }) => (
+    <a
+      className={`font-sans text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      {text || `Документ ${index}`}
+    </a>
+  ),
+);

package/src/components/Footer/MediaButton.tsx

@@ -54,6 +54,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
       : 'border-main-divider border-solid border-[1px] hover:bg-primary-main';
 
   const isPrimary = version === 'primary';
+  const imageClassName = isPrimary ? 'group-hover:text-white' : '';
 
   return (
     <a
@@ -66,13 +67,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
       rel="noopener noreferrer"
     >
       {icon ? (
-        <Img
-          image={icon}
-          imageClassName={isPrimary ? 'group-hover:text-white' : ''}
-          width="24"
-          height="24"
-          asSVG
-        />
+        <Img image={icon} imageClassName={imageClassName} width="24" height="24" asSVG />
       ) : null}
     </a>
   );

package/src/components/Footer/TextInformation.mobile.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { LinkProps } from '../../model/LinkProps';
 import type { FooterLink } from './FooterLink';
+import { TextInformationLink } from './TextInformationLink';
 
 export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
   const router = context.useRouter();
@@ -20,6 +20,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
             <TextInformationLink
               key={String(i)}
               index={i}
+              className="font-normal"
               {...useLink({ router, handlerDecorator }, _)}
             />
           ))}
@@ -28,24 +29,3 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
     </div>
   );
 });
-
-interface TextInformationLinkProps extends LinkProps {
-  className: string;
-  index: number;
-  onClick: (ev: MouseEvent) => any;
-}
-
-const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
-  ({ className, index, text, href, target, onClick }) => (
-    <a
-      className={`font-sans font-normal text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
-        className || ''
-      }`}
-      href={href}
-      target={target}
-      onClick={onClick}
-    >
-      {text || `Документ ${index}`}
-    </a>
-  ),
-);

package/src/components/Footer/TextInformation.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { LinkProps } from '../../model/LinkProps';
 import type { FooterLink } from './FooterLink';
+import { TextInformationLink } from './TextInformationLink';
 
 export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
   const router = context.useRouter();
@@ -20,6 +20,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
             <TextInformationLink
               key={String(i)}
               index={i}
+              className="font-light"
               {...useLink({ router, handlerDecorator }, _)}
             />
           ))}
@@ -28,24 +29,3 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
     </div>
   );
 });
-
-interface TextInformationLinkProps extends LinkProps {
-  className: string;
-  index: number;
-  onClick: (ev: MouseEvent) => any;
-}
-
-const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
-  ({ className, index, text, href, target, onClick }) => (
-    <a
-      className={`font-sans font-light text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
-        className || ''
-      }`}
-      href={href}
-      target={target}
-      onClick={onClick}
-    >
-      {text || `Документ ${index}`}
-    </a>
-  ),
-);

package/src/components/Footer/TextInformationLink.tsx

@@ -0,0 +1,23 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+
+interface TextInformationLinkProps extends LinkProps {
+  className: string;
+  index: number;
+  onClick: (ev: MouseEvent) => any;
+}
+
+export const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
+  ({ className = '', index, text, href, target, onClick }) => (
+    <a
+      className={`font-sans text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
+        className
+      }`}
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      {text || `Документ ${index}`}
+    </a>
+  ),
+);

package/src/components/Gallery/Gallery.mobile.tsx

@@ -17,17 +17,15 @@ const blockStyle: Record<BlockVersion, string> = {
 
 export const Gallery = JSX<GalleryProps>(
   ({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {
+    const headingClassName = description ? 'mb-2' : 'mb-5';
+
     return (
       <section
         className={`relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`}
       >
         <div className="flex flex-col items-center mb-5">
           {title ? (
-            <Heading
-              headingType="h3"
-              className={`text-center ${description ? 'mb-2' : 'mb-5'}`}
-              title={title}
-            />
+            <Heading headingType="h3" className={`text-center ${headingClassName}`} title={title} />
           ) : null}
           {description ? (
             <div className="font-normal text-m-md max-w-[600px] text-center mb-5">

package/src/components/GroupBlock/GroupBlockTabs.tsx

@@ -12,11 +12,11 @@ export interface GroupBlockTabsProps {
 }
 
 export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
-  const { tabs, currentTag, onTabClick, className = '', isShowCounter } = props;
+  const { tabs, currentTag, onTabClick, className = '', isShowCounter = false } = props;
 
   return (
     <div className={`mb-2 box-border flex gap-x-1 ${className}`} role="tablist">
-      {tabs?.map(renderTab(onTabClick, isShowCounter, currentTag))}
+      {tabs?.map(renderTab(onTabClick, currentTag, isShowCounter))}
     </div>
   );
 });
@@ -24,12 +24,12 @@ export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
 const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-m-sm';
 
 const renderTab =
-  (onTabClick: TabClickHandler, isShowCounter?: boolean, currentTag?: string) =>
+  (onTabClick: TabClickHandler, currentTag?: string, isShowCounter = false) =>
   (tab: TabsItemProps, i: number) => {
     const isActive = currentTag === tab.tag;
     const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
     const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
-    const counterBlockStyle = `${badgeStyle} 
+    const counterBlockStyle = `${badgeStyle}
       ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-light text-secondary-text'}`;
 
     return (

package/src/components/GroupBlock/GroupBlocksItem.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { JSXBlock } from '../../components/ContentPage/ContentPage';
-import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { JSXBlock } from '../ContentPage/ContentPage';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { UniBlockProps } from '../../types';
 import { style2className } from '../../utils/style2className';
 import type { GroupBlockDef } from './BlocksTypeProps';

package/src/components/GroupBlock/renderBlocksTypes.tsx

@@ -13,12 +13,15 @@ type EmbeddableBlocksProps = {
 export const renderBlock =
   ({ context, className }: EmbeddableBlocksProps) =>
   (block: GroupBlockDef, i: number) => {
-    const type = block?.blockType;
-    if (!type || !(type in EmbeddableGroupBlocks)) {
+    if (!block) {
       return null;
     }
 
-    const { style, ...rest } = block;
+    const { style, blockType: type, ...rest } = block;
+
+    if (!type || !(type in EmbeddableGroupBlocks)) {
+      return null;
+    }
 
     const classNameBlock = style2className(style);
     const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.example.json

@@ -1,9 +1,5 @@
 {
   "title": "Заголовок",
-  "button": {
-    "href": "https://rshb.ru",
-    "text": "Текст кнопки"
-  },
   "insuranceTabs": [
     {
       "title": "Описание 1",
@@ -11,12 +7,28 @@
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         },
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         }
       ]
     },
@@ -26,17 +38,41 @@
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         },
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         },
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         }
       ]
     }

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.fixture.tsx

@@ -8,7 +8,6 @@ export default {
         className="col-span-12"
         context={context}
         title="Выбор страховой суммы"
-        button={{ href: 'https://rshb.ru', text: 'Выбрать программу' }}
         insuranceTabs={[
           {
             title: 'Индивидуальный',
@@ -16,17 +15,22 @@ export default {
               {
                 sum: 200000,
                 fee: 2100,
-                icon: { icon: 'ActualBalanceIcon' },
+                icon: {
+                  icon: 'ActualBalanceIcon',
+                },
+                href: '',
               },
               {
                 sum: 200000,
                 fee: 2100,
                 icon: { icon: 'ActualBalanceIcon' },
+                href: '',
               },
               {
                 sum: 200000,
                 fee: 2100,
                 icon: { icon: 'ActualBalanceIcon' },
+                href: ']',
               },
             ],
           },
@@ -37,6 +41,7 @@ export default {
                 sum: 400000,
                 fee: 3600,
                 icon: { icon: 'ActualBalanceIcon' },
+                href: '',
               },
             ],
           },

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -1,15 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
 import { InsuranceAmountBlockInner } from './InsuranceAmountBlockInner';
 
 export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent, UniBlockProps {}
 
 export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
-  ({ className = '', context, title, insuranceTabs = [], button, ...rest }) => {
+  ({ className = '', context, title, insuranceTabs = [], ...rest }) => {
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
 
     return (
@@ -19,16 +18,18 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
         {...rest}
       >
         {title ? <Heading className="text-center" title={title} headingType="h3" /> : null}
-        <div className="p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]">
-          {insuranceTabs.map((item, i) =>
-            renderNavButton({
-              title: item?.title,
-              i,
-              activeSlideIndex,
-              onClick: () => setActiveSlideIndex(i),
-            }),
-          )}
-        </div>
+        {insuranceTabs?.length > 1 ? (
+          <div className="p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]">
+            {insuranceTabs.map((item, i) =>
+              renderNavButton({
+                title: item?.title,
+                i,
+                activeSlideIndex,
+                onClick: () => setActiveSlideIndex(i),
+              }),
+            )}
+          </div>
+        ) : null}
         <div
           className="flex"
           style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
@@ -40,17 +41,6 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
             insuranceTabs,
           })}
         </div>
-        {button?.text ? (
-          <div className="flex justify-center">
-            <Button
-              className="box-border p-4 h-14 w-full max-w-[240px]"
-              version={button?.version || 'primary'}
-              href={button.href}
-            >
-              {button.text}
-            </Button>
-          </div>
-        ) : null}
       </BlockWrapper>
     );
   },
@@ -64,8 +54,13 @@ const renderInsuranceGalleries = ({
   const insuranceGalleries = insuranceTabs?.map((_) => _.cards);
 
   return insuranceGalleries?.length
-    ? insuranceGalleries.map((cards) => (
-        <InsuranceAmountBlockInner context={context} className={className} cards={cards} />
+    ? insuranceGalleries.map((cards, i) => (
+        <InsuranceAmountBlockInner
+          key={String(i)}
+          context={context}
+          className={className}
+          cards={cards}
+        />
       ))
     : null;
 };
@@ -83,7 +78,7 @@ function renderNavButton({ title, i, activeSlideIndex, onClick }) {
       key={String(i)}
       onClick={onClick}
       aria-label={title}
-      className={`box-border px-4 py-3 text-m-md ${btnClassName}`}
+      className={`box-border px-4 py-3 text-m ${btnClassName}`}
     >
       {title}
     </button>

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -1,5 +1,4 @@
 import type { Picture } from '../../model/Picture';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
  * @title Кнопка выбора программы
@@ -11,6 +10,8 @@ export type CardItem = {
   fee?: number;
   /** @title Страховая сумма */
   sum?: number;
+  /** @title Ссылка на программу*/
+  href?: string;
 };
 
 /**
@@ -31,5 +32,4 @@ export interface InsuranceAmountBlockContent {
   title?: string;
   /** @title Список вкладок */
   insuranceTabs?: InsuranceAmountBlockTabs[];
-  button?: ButtonProps;
 }

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { FuncReturnVoid, UniBlockProps } from '../../types';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
+import { Button } from '../../ui-kit/Button/Button';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import type { CardItem, InsuranceAmountBlockTabs } from './InsuranceAmountBlockContent';
 
@@ -36,9 +37,10 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
     const showNextButton = isGalleryScrollAvailable && galleryLength > tabsShift + 2;
     const isLastShift = galleryLength === tabsShift + 2;
     const showPrevButton = tabsShift > 0;
+    const activeHref = cards[activeSlideIndex]?.href;
 
     return (
-      <section className={`min-w-full ${className}`}>
+      <section className={`min-w-full text-center ${className}`}>
         <div className="relative mt-7 overflow-hidden">
           {galleryLength
             ? renderGallery({
@@ -62,6 +64,9 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
             <div className="absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" />
           ) : null}
         </div>
+        <Button className="w-[240px] p-4 text-center" version="primary" href={activeHref}>
+          Выбрать программу
+        </Button>
       </section>
     );
   },
@@ -111,10 +116,10 @@ function renderSlide({ slide, i, activeSlideIndex, onClick }: InsuranceSlideProp
     >
       {slide?.icon ? (
         <Img
-          className={`h-[108px] w-[108px] p-3 rounded-full bg-secondary-light mr-[30px]`}
+          className="p-3 rounded-full bg-secondary-light mr-[30px]"
           image={slide.icon}
-          width="24"
-          height="24"
+          width="70"
+          height="70"
         />
       ) : null}
 
@@ -129,9 +134,9 @@ function renderSlide({ slide, i, activeSlideIndex, onClick }: InsuranceSlideProp
 
 function renderValueBlock(title, sum) {
   return (
-    <div className="flex flex-col text-left">
-      <span className="whitespace-pre text-title-2xs">{addSpacesBetweenNumbers(sum)} ₽</span>
-      <span className="whitespace-pre text-secondary-text font-light text-base mt-1">{title}</span>
+    <div className="flex flex-col text-left whitespace-pre">
+      <span className="text-h6">{addSpacesBetweenNumbers(sum)} ₽</span>
+      <span className="text-secondary-text text-l mt-1">{title}</span>
     </div>
   );
 }

package/src/components/LinkDocs/LinkDocs.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Headline } from '../Headline/Headline';
 import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsList } from './LinkDocsList';

package/src/components/NavigatorTabs/NavigatorTabItem.tsx

@@ -18,13 +18,13 @@ export const NavigatorTabItem = JSX<NavigatorTabItemProps>(
   ),
 );
 
-const getLinkClasses = (className: string, active?: boolean) => {
+const getLinkClasses = (className: string, active = false) => {
   const classes = active ? 'bg-primary-main' : 'group bg-white';
 
   return `${classes} ${LINK_CLASSES} ${className}`;
 };
 
-const getTextClasses = (active?: boolean) => {
+const getTextClasses = (active = false) => {
   const classes = active ? 'text-white' : 'text-secondary-text group-hover:text-primary-main ';
 
   return `${classes} ${TEXT_CLASSES}`;

package/src/components/ProductBlock/ProductBlock.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Breadcrumb } from '../../ui-kit/Breadcrumb';
 import { joinList } from '../../utils/joinList';
 import type { ProductBlockContent } from './ProductBlockContent';
@@ -39,7 +39,13 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
       className={`font-sans overflow-hidden pt-[50px] pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap[version]} ${className}`}
       {...otherProps}
     >
-      {backwardButton?.text ? renderBackwardButton(backwardButton, version, 'mb-10 -mt-2.5') : null}
+      {backwardButton?.text
+        ? renderBackwardButton(
+            useLink({ router, handlerDecorator }, backwardButton),
+            version,
+            'mb-10 -mt-2.5',
+          )
+        : null}
       {breadcrumbs?.length ? (
         <div className="text-xs mb-6">
           {joinList(<span className={`mx-2 ${breadcrumbsStyleMap[version]}`}>/</span>)(

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -8,6 +8,7 @@ export function renderBackwardButton(
   version: BlockVersion,
   className: string,
 ) {
+  const { text, href, target, onClick } = button;
   const iconVersion = version === 'primary' ? 'white' : 'black';
   const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
 
@@ -17,12 +18,14 @@ export function renderBackwardButton(
         version={version}
         rounded
         className="w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3"
-        ariaLabel={button?.text}
-        href={button?.href}
+        ariaLabel={text}
+        href={href}
+        target={target}
+        onClick={onClick}
       >
         <Img className="w-4 h-4" image={{ ...backwardIcon, iconVersion }} asSVG />
       </Button>
-      {button?.text ? <span className="text-m-md font-light">{button.text}</span> : null}
+      {text ? <span className="text-m-md font-light">{text}</span> : null}
     </div>
   );
 }

package/src/components/ProductGallery/ProductGalleryBlock.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { HeadingType } from '../../ui-kit/Heading/HeadingContent';
-import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import type { UniBlockProps } from '../../types';
+import { HeadingType } from '../../ui-kit/Heading/HeadingContent';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 
 const productGalleryStyleMap: Record<BlockVersion, string> = {
   primary: 'bg-white text-primary-text',
@@ -21,16 +21,11 @@ export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
 
     return (
       <section
-        className={`flex grow-0 shrink-0 basis-full ${productGalleryStyleMap[version]} ${className}`}
+        className={`flex grow-0 shrink-0 basis-full px-4 pt-6 ${productGalleryStyleMap[version]} ${className}`}
         role="listitem"
       >
-        <div className="p-10 flex grow">
-          <ProductBlockInner
-            className="pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem]"
-            context={context}
-            headingType={headingType || 'h2'}
-            {...block}
-          />
+        <div className="flex grow">
+          <ProductBlockInner context={context} headingType={headingType || 'h2'} {...block} />
         </div>
       </section>
     );

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -81,14 +81,10 @@ const renderStepTitle =
             className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
           >
             {step.label ? (
-              <div className="font-medium text-m-title-xs m-0 text-left">{step.label}</div>
+              <div className="font-medium text-m-title-xs m-0 text-left mb-1">{step.label}</div>
             ) : null}
             {step.description ? (
-              <div
-                className={`font-normal text-sm ${styleMap.description} text-left ${
-                  step.label ? 'mt-1' : ''
-                }`}
-              >
+              <div className={`font-normal text-sm ${styleMap.description} text-left`}>
                 {step.description}
               </div>
             ) : null}