@redneckz/wildless-cms-uni-blocks 0.14.533 → 0.14.535

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -2,6 +2,7 @@ import '../../setup-fixture';
 
 import { type Picture } from '../../model/Picture';
 import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
+import { type ProductBlockContent } from '../ProductBlock/ProductBlockContent';
 import { ProductGallery } from './ProductGallery';
 
 const percentImage: Picture = {
@@ -14,24 +15,6 @@ const percentImage: Picture = {
   alt: 'Ставка от 3,6% годовых',
 };
 
-const worker: Picture = {
-  src: 'money-2.png',
-  format: 'webp',
-  size: {
-    width: 280,
-    height: 280,
-  },
-};
-
-const creditCard: Picture = {
-  src: 'credit-card-1.png',
-  format: 'webp',
-  size: {
-    width: 280,
-    height: 280,
-  },
-};
-
 const __html = `
   <ul>
     <li>Потребительский кредит по специальной процентной ставке</li>
@@ -49,14 +32,14 @@ const buttons: LinkButtonContent[] = [
   },
 ];
 
-const buttonsSecondary: LinkButtonContent[] = [
-  {
-    href: 'https://rshb.ru',
-    text: 'Подробнее',
-    target: '_blank',
-    version: 'white',
-  },
-];
+const productBlock: ProductBlockContent = {
+  title: 'Кредит по одному документу',
+  description: 'Ставка от 5,5% годовых',
+  headlineVersion: 'L',
+  __html,
+  buttons,
+  image: percentImage,
+};
 
 export default {
   default: (
@@ -69,53 +52,28 @@ export default {
               title: 'Кредит по одному документу',
               description: 'Ставка от 5,5% годовых',
             },
-            productBlock: {
-              title: 'Кредит по одному документу',
-              description: 'Ставка от 5,5% годовых',
-              headlineVersion: 'L',
-              __html,
-              buttons,
-              image: percentImage,
-            },
+            productBlock,
           },
           {
             nav: {
               title: 'Для людей в возрасте',
               description: 'Ставка до 7% годовых',
             },
-            productBlock: {
-              title: 'Ставка от 12,5% годовых на срок до 3 лет!',
-              headlineVersion: 'L',
-              __html,
-              buttons,
-              image: worker,
-            },
+            productBlock,
           },
           {
             nav: {
               title: 'Выгодно покупать',
               description: 'Ставка от 5% годовых',
             },
-            productBlock: {
-              title: 'Дополнительные бонусные баллы за покупки!',
-              headlineVersion: 'L',
-              __html,
-              buttons,
-              image: creditCard,
-            },
+            productBlock,
           },
           {
             nav: {
               title: 'Карты Unionpay',
               description: '120 дней льготный период',
             },
-            productBlock: {
-              title: 'Карты Unionpay',
-              headlineVersion: 'L',
-              __html,
-              buttons,
-              image: creditCard,
-            },
+            productBlock,
           },
         ]}
       />
@@ -132,53 +90,28 @@ export default {
               title: 'Кредит по одному документу',
               description: 'Ставка от 5,5% годовых',
             },
-            productBlock: {
-              title: 'Кредит по одному документу',
-              description: 'Кредит наличными без залога и поручительства, только по паспорту',
-              headlineVersion: 'L',
-              __html,
-              buttons: buttonsSecondary,
-              image: percentImage,
-            },
+            productBlock,
           },
           {
             nav: {
               title: 'Для людей в возрасте',
               description: 'Ставка до 7% годовых',
             },
-            productBlock: {
-              title: 'Ставка от 12,5% годовых на срок до 3 лет!',
-              headlineVersion: 'L',
-              __html,
-              buttons: buttonsSecondary,
-              image: worker,
-            },
+            productBlock,
           },
           {
             nav: {
               title: 'Выгодно покупать',
               description: 'Ставка от 5% годовых',
             },
-            productBlock: {
-              title: 'Дополнительные бонусные баллы за покупки!',
-              headlineVersion: 'L',
-              __html,
-              buttons: buttonsSecondary,
-              image: creditCard,
-            },
+            productBlock,
           },
           {
             nav: {
               title: 'Карты Unionpay',
               description: '120 дней льготный период',
             },
-            productBlock: {
-              title: 'Карты Unionpay',
-              headlineVersion: 'L',
-              __html,
-              buttons: buttonsSecondary,
-              image: creditCard,
-            },
+            productBlock,
           },
         ]}
       />

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

@@ -1,15 +1,8 @@
-import { type Picture } from '../../model/Picture';
 import '../../setup-fixture';
 
 import { StepsBlock } from './StepsBlock';
 import { type StepProps } from './StepsBlockContent';
 
-const percentImage: Picture = {
-  src: '3-6-percent.png',
-  format: 'webp',
-  alt: 'Ставка от 3,6% годовых',
-};
-
 const steps: StepProps[] = [
   {
     label: 'Заявка на кредит',
@@ -41,7 +34,6 @@ const STEPS_WITH_ICONS: StepProps[] = [
   {
     label: 'В офисах Россельхозбанка',
     description: 'Откройте вклад',
-    image: percentImage,
   },
 ];
 

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -2,7 +2,6 @@ import { type BlockVersion } from '../../model/BlockVersion';
 import { type BulletsProps } from '../../model/Bullets';
 import { type DescriptionProps, type LabelProps, type TitleProps } from '../../model/HeadlineType';
 import { type IconProps } from '../../model/Picture';
-import { type ImageContent } from '../../ui-kit/Img/ImgProps';
 import { type ButtonsSectionContent } from '../../ui-kit/LinkButton/ButtonsSectionContent';
 import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
@@ -12,7 +11,6 @@ import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
  * @title Шаг
  */
 export type StepProps = DescriptionProps &
-  ImageContent &
   LabelProps &
   RichTextProps &
   IconProps &

package/src/components/StepsBlock/renderStep.tsx

@@ -1,5 +1,4 @@
 import { type BlockVersion } from '../../model/BlockVersion';
-import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { type VNode } from '../../model/VNode';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { RichText } from '../../ui-kit/RichText/RichText';
@@ -43,7 +42,7 @@ export const renderStep =
         {button?.text ? (
           <LinkButton
             className="box-border py-s w-full max-w-60 mt-auto"
-            version={version as LinkButtonVersion}
+            version={version}
             {...button}
           >
             {button?.text}

package/src/components/StepsBlock/renderStepMobile.tsx

@@ -1,6 +1,5 @@
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type IconVersion } from '../../model/IconVersion';
-import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
@@ -17,14 +16,11 @@ const styleMap = STEPS_BLOCK_STYLE;
 export const renderStepMobile =
   (stepsSize: boolean, version: BlockVersion, stepVersion: BlockVersion) =>
   (step: StepProps, i: number) => {
-    const { button, image } = step;
-
-    const styleStepMobile = button?.text && image?.src;
+    const { button } = step;
 
     return (
       <div key={String(i)} className="contents">
-        <div className={style('flex items-center relative', image?.src ? 'flex-col' : 'flex-row')}>
-          {image?.src ? renderText(step) : null}
+        <div className="flex items-center relative flex-row">
           <div className="overflow-hidden flex flex-shrink-0 items-center">
             {renderIconArea(stepsSize, stepVersion)(step, i)}
           </div>
@@ -33,11 +29,11 @@ export const renderStepMobile =
               'min-h-6xl': stepsSize,
             })}
           >
-            {image?.src ? null : renderText(step)}
-            {styleStepMobile ? (
+            {renderText(step)}
+            {button?.text ? (
               <LinkButton
                 className="box-border py-s w-full max-w-60 mt-lg"
-                version={version as LinkButtonVersion}
+                version={version}
                 {...button}
               >
                 {button?.text}
@@ -55,15 +51,10 @@ const renderIconArea =
     const isImg = Boolean(step?.icon?.src);
     const iconAreaSize = getIconAreaSize(stepsSize, isImg);
     const containerVersion = isImg ? stepVersion === 'transparent' : stepVersion;
-    const isImgSrc = step.image?.src;
 
     return (
       <BlockWrapper
-        className={style(
-          { 'w-32': Boolean(isImgSrc) },
-          'z-10 mr-s flex justify-center content-center rounded-md',
-          !isImgSrc && iconAreaSize,
-        )}
+        className={style('z-10 mr-s flex justify-center content-center rounded-md', iconAreaSize)}
         defaultPadding=""
         version={containerVersion as BlockVersion}
       >
@@ -75,14 +66,8 @@ const renderIconArea =
   };
 
 const renderText = (step: StepProps) => {
-  const visibleStyle = Boolean(step.button?.text && step.image?.src);
-
   return (
-    <div
-      className={style({
-        'mb-lg w-full': visibleStyle,
-      })}
-    >
+    <div>
       {step?.label ? (
         <Paragraph size="text-l" align="text-left">
           {step.label}
@@ -112,21 +97,15 @@ const renderIcon = ({
   iconVersion: IconVersion;
   i: number;
   stepVersion: BlockVersion;
-}) => {
-  if (isIcon(step?.icon)) {
-    return (
-      <Img
-        image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
-        imageClassName="max-w-full max-h-full"
-        width="24"
-        height="24"
-      />
-    );
-  } else if (isIcon(step.image)) {
-    return <Img image={{ ...step.image, size: { width: 120, height: 120 } }} />;
-  }
-
-  return (
+}) =>
+  isIcon(step?.icon) ? (
+    <Img
+      image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
+      imageClassName="max-w-full max-h-full"
+      width="24"
+      height="24"
+    />
+  ) : (
     <span
       className={style(
         'text-h4',
@@ -136,4 +115,3 @@ const renderIcon = ({
       {i + 1}
     </span>
   );
-};

package/src/ui-kit/LinkButton/ButtonInner.tsx

@@ -10,7 +10,7 @@ export const ButtonInner = JSX<LinkButtonProps>((props) => {
   const iconHideStyle = isWithText(props) ? 'hidden lg:block' : '';
 
   return (
-    <div className={style(getButtonStyle(props), 'flex gap-xs')}>
+    <div className={style(buttonStyle(props), 'flex gap-xs')}>
       {appendLeft ? (
         <div className={style(iconHideStyle, iconStyleMap[version])}>{appendLeft}</div>
       ) : null}
@@ -27,7 +27,7 @@ export const ButtonInner = JSX<LinkButtonProps>((props) => {
   );
 });
 
-const getButtonStyle = (props: LinkButtonContent) => {
+const buttonStyle = (props: LinkButtonContent) => {
   const { version, aboveText, rounded } = props;
 
   if (version === 'link') {

package/src/ui-kit/SwipeListControl/NavButtonProp.ts

@@ -0,0 +1,11 @@
+import { type DescriptionProps, type TitleProps } from '../../model/HeadlineType';
+import type { SwipeListControlType } from './SwipeListControlContent';
+
+export interface DotProp {
+  activeIndex?: number;
+  onClick: (i: number) => void;
+  listType?: SwipeListControlType;
+}
+
+/** @title Кнопка под слайдом */
+export type NavButtonProp = TitleProps & DescriptionProps;

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type BlockVersion } from '../../model/BlockVersion';
 import { style } from '../../utils/style';
+import { type NavButtonProp } from './NavButtonProp';
 import { SwipeListContainer, type SnapAlign } from './SwipeListContainer';
 import { type SwipeListControlContent } from './SwipeListControlContent';
 import { SwipeListDots } from './SwipeListDots';
@@ -24,6 +25,7 @@ interface SwipeListControlProps extends SwipeListControlContent {
   snapAlign?: SnapAlign;
   hasBlur?: boolean;
   onVisibleIndicesChange?: (indices: number[]) => void;
+  navButtons?: NavButtonProp[];
 }
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
@@ -42,6 +44,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     showDots,
     children,
     onVisibleIndicesChange,
+    navButtons,
   }) => {
     const itemCount = Array.isArray(children) ? children.length : 0;
 
@@ -71,14 +74,17 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
           scroll={scroll}
           hasBlur={hasBlur}
           arrowsPadded={arrowsPadded}
+          isBottom={Boolean(navButtons?.length)}
         />
         <SwipeListDots
           className={style(!showDots && 'lg:hidden')}
-          containerRef={containerRef}
           activeIndex={activeIndex}
           dotCount={itemCount}
           listType={listType}
           version={version}
+          navButtons={navButtons}
+          containerRef={containerRef}
+          containerScroll={scroll}
         />
       </div>
     );

package/src/ui-kit/SwipeListControl/SwipeListDots.tsx

@@ -1,74 +1,97 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useMobileMode } from '../../hooks/useMobileMode';
 import { type BlockVersion } from '../../model/BlockVersion';
 import { style } from '../../utils/style';
+import { type NavButtonProp } from './NavButtonProp';
+import { renderDotButton } from './renderDotButton';
+import { renderNavButton } from './renderNavButton';
+import { SwipeListContainer } from './SwipeListContainer';
 import { type SwipeListControlType } from './SwipeListControlContent';
+import { useSwipeListScroll, type SwipeListScroll } from './useSwipeListScroll';
 
 const containerStyles: Record<SwipeListControlType, string> = {
   'horizontal-list': 'mx-auto mt-lg w-fit',
   'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
 };
 
-const activeDotStyles: Record<SwipeListControlType, string> = {
-  'horizontal-list': 'w-6',
-  'vertical-list': 'h-6',
-};
-
-const dotStyle =
-  'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white';
-
-const inactiveDotStyle = 'w-2 h-2 opacity-30';
-
 interface SwipeListDotsProps {
   className?: string;
-  containerRef?: { current: HTMLDivElement | null };
   activeIndex?: number;
   dotCount?: number;
   listType?: SwipeListControlType;
   version?: BlockVersion;
+  navButtons?: NavButtonProp[];
+  onVisibleIndicesChange?: (indices: number[]) => void;
+  containerRef?: { current: HTMLDivElement | null };
+  containerScroll?: SwipeListScroll;
 }
-
 export const SwipeListDots = JSX<SwipeListDotsProps>(
   ({
     className = '',
-    containerRef,
-    activeIndex,
+    activeIndex = 0,
     dotCount = 0,
     listType = 'horizontal-list',
     version,
+    navButtons = [],
+    containerRef,
+    containerScroll,
   }) => {
-    const handleClick = (idx: number) => {
-      if (idx !== activeIndex && containerRef?.current) {
-        containerRef.current.children[idx]?.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-        });
+    const isMobileMode = useMobileMode();
+    const [navRef, navScroll] = useSwipeListScroll<HTMLDivElement>({
+      itemCount: navButtons.length,
+    });
+    const scrollOption = getOptions(Boolean(navButtons?.length));
+
+    useEffect(() => {
+      if (navButtons?.length && activeIndex >= 0 && navRef?.current) {
+        navScroll.scrollTo(activeIndex, scrollOption);
       }
-    };
+    }, [activeIndex]);
 
-    return dotCount ? (
-      <div
-        className={style(
-          'flex gap-xs',
-          containerStyles[listType],
-          version ? 'group' : '',
-          className,
-        )}
-        data-ver={version}
-      >
-        {Array.from({ length: dotCount })
-          .fill(null)
-          .map((_, idx: number) => (
-            <div
-              key={String(idx)}
-              className={`${dotStyle} ${
-                idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle
-              }`}
-              role="button"
-              aria-hidden
-              onClick={() => handleClick(idx)}
-            />
-          ))}
-      </div>
-    ) : null;
+    const onChangeActiveIndex = useCallback(
+      (idx: number) => {
+        if (idx !== activeIndex && containerRef?.current) {
+          containerScroll?.scrollTo(idx, scrollOption);
+        }
+      },
+      [containerRef?.current],
+    );
+
+    if (navButtons?.length && !isMobileMode) {
+      return (
+        <SwipeListContainer
+          containerRef={navRef}
+          snapAlign="snap-start"
+          itemClassName="h-36 flex items-stretch w-screen"
+          gap={8}
+        >
+          {navButtons.map(renderNavButton({ activeIndex, onClick: onChangeActiveIndex }))}
+        </SwipeListContainer>
+      );
+    } else if (dotCount) {
+      return (
+        <div
+          className={style(
+            'flex gap-xs',
+            containerStyles[listType],
+            version ? 'group' : '',
+            className,
+            { 'pb-xl': navButtons?.length && isMobileMode },
+          )}
+          data-ver={version}
+        >
+          {Array.from({ length: dotCount })
+            .fill(null)
+            .map(renderDotButton({ activeIndex, onClick: onChangeActiveIndex, listType }))}
+        </div>
+      );
+    }
+
+    return null;
   },
 );
+
+const getOptions = (isAuto = false): ScrollIntoViewOptions => ({
+  behavior: isAuto ? 'auto' : 'smooth',
+});

package/src/ui-kit/SwipeListControl/SwipeListScrollButtons.tsx

@@ -4,31 +4,32 @@ import { ScrollLeftButton, ScrollRightButton } from '../LinkButton/ArrowButton';
 import { type SwipeListScrollButtonsContent } from './SwipeListControlContent';
 import { type SwipeListScroll } from './useSwipeListScroll';
 
-const scrollButtonStyle = 'absolute top-[calc(50%-24px)] z-40';
 const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
 
 export interface SwipeListScrollButtonsProps extends SwipeListScrollButtonsContent {
   className?: string;
   scroll: SwipeListScroll;
   hasBlur?: boolean;
+  isBottom?: boolean;
 }
 
 export const SwipeListScrollButtons = JSX<SwipeListScrollButtonsProps>(
-  ({ className, scroll, hasBlur, arrowsPadded }) => {
+  ({ className, scroll, hasBlur, arrowsPadded, isBottom }) => {
     const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
+    const isArrowPadded = arrowsPadded && !isBottom;
 
     return (
-      <div className={style(className)}>
+      <div className={className}>
         {hasBlur ? renderBlur(scroll) : null}
         {canScrollLeft ? (
           <ScrollLeftButton
-            className={style(scrollButtonStyle, arrowsPadded ? 'left-1' : 'left-0')}
+            className={style(buttonStyle(isBottom), isArrowPadded ? 'left-1' : 'left-0')}
             onClick={scrollLeft}
           />
         ) : null}
         {canScrollRight ? (
           <ScrollRightButton
-            className={style(scrollButtonStyle, arrowsPadded ? 'right-1' : 'right-0')}
+            className={style(buttonStyle(isBottom), isArrowPadded ? 'right-1' : 'right-0')}
             onClick={scrollRight}
           />
         ) : null}
@@ -54,3 +55,6 @@ const renderBlur = (scroll: SwipeListScroll) => (
     ) : null}
   </div>
 );
+
+const buttonStyle = (isBottom = false) =>
+  style('absolute z-40', isBottom ? 'bottom-[56px]' : 'top-[calc(50%-24px)]');

package/src/ui-kit/SwipeListControl/renderDotButton.tsx

@@ -0,0 +1,29 @@
+import { style } from '../../utils/style';
+import type { DotProp } from './NavButtonProp';
+import type { SwipeListControlType } from './SwipeListControlContent';
+
+const activeDotStyles: Record<SwipeListControlType, string> = {
+  'horizontal-list': 'w-6',
+  'vertical-list': 'h-6',
+};
+
+const dotStyle =
+  'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white';
+
+const inactiveDotStyle = 'w-2 h-2 opacity-30';
+
+export const renderDotButton =
+  ({ activeIndex, onClick, listType = 'horizontal-list' }: DotProp) =>
+  (_: any, idx: number) =>
+    (
+      <div
+        key={String(idx)}
+        className={style(
+          dotStyle,
+          idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle,
+        )}
+        role="button"
+        aria-hidden
+        onClick={() => onClick(idx)}
+      />
+    );

package/src/ui-kit/SwipeListControl/renderNavButton.tsx

@@ -0,0 +1,33 @@
+import { style } from '../../utils/style';
+import { type DotProp, type NavButtonProp } from './NavButtonProp';
+
+export const renderNavButton =
+  ({ activeIndex, onClick }: DotProp) =>
+  (nav: NavButtonProp, i: number) => {
+    const isActive = i === activeIndex;
+    const btnClassName = isActive
+      ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
+      : 'min-w-72 ease-in duration-300 bg-white/10 px-xl py-lg hover:backdrop-blur';
+    const btnTitleClassName = isActive
+      ? 'text-primary-text text-h6 py-xs'
+      : 'text-l pb-2xs text-secondary-text group-data-secondary:text-white';
+    const btnDescClassName = isActive ? 'text-l' : 'text-m group-data-secondary:text-white/80';
+
+    return (
+      <button
+        type="button"
+        key={String(i)}
+        onClick={() => onClick(i)}
+        aria-label={nav?.title}
+        className={style(
+          'max-h-28 mt-xs ml-xs relative px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50 whitespace-nowrap',
+          btnClassName,
+        )}
+      >
+        <div className={btnTitleClassName}>{nav?.title}</div>
+        <div className={style('text-secondary-text font-light', btnDescClassName)}>
+          {nav?.description}
+        </div>
+      </button>
+    );
+  };

package/src/ui-kit/SwipeListControl/useSwipeListScroll.ts

@@ -35,7 +35,7 @@ export const useSwipeListScroll = <E extends HTMLElement>({
       );
       onVisibleIndicesChange && onVisibleIndicesChange(indices);
     },
-    [itemCount],
+    [onVisibleIndicesChange],
   );
 
   const [minIndex, maxIndex] = visibleIndices.length