@redneckz/wildless-cms-uni-blocks 0.6.29 → 0.6.31

package/src/components/Carousel/CarouselContainer.tsx

@@ -1,9 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { CardWidth } from './CarouselContent';
 
 export interface CarouselContainerProps {
   activeItem: number;
   cardFullViewCount: number;
-  cardWidth: number;
+  cardWidth: CardWidth;
 }
 
 export const CarouselContainer = JSX<CarouselContainerProps>(
@@ -11,7 +12,7 @@ export const CarouselContainer = JSX<CarouselContainerProps>(
     const cardFullViewStyles =
       cardFullViewCount === 1
         ? `translateX(-${activeItem}00%)`
-        : `translateX(-${activeItem * cardWidth}px)`;
+        : `translateX(-${activeItem * Number(cardWidth)}px)`;
 
     return (
       <div

package/src/components/Carousel/CarouselContent.ts

@@ -1,10 +1,18 @@
 /**
  * @title Карусель
  */
+
+/**
+ * @title Ширина карточек
+ * @enumNames [ "1007", "833", "350", "322" ]
+ */
+export type CardWidth = '322' | '350' | '832' | '1007';
 export interface CarouselContent {
-  /** @title Блоки */
+  /** @title Количество видимых карточек */
   cardFullViewCount?: number;
-  cardWidth?: number;
+  cardWidth?: CardWidth;
+  /** @title Добавление  блюра */
   isBlur?: boolean;
+  /** @title Цикличность */
   isCyclic?: boolean;
 }

package/src/components/Carousel/CarouselNavButtons.tsx

@@ -0,0 +1,51 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { VNode } from '../../model/VNode';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
+
+interface CarouselNavButtonsProps {
+  cardsCount: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (index: number) => void;
+  cardFullViewCount: number;
+  cards?: VNode[];
+  isCycle?: boolean;
+}
+
+export const CarouselNavButtons = JSX<CarouselNavButtonsProps>(
+  ({ cardsCount, activeCardIndex, setActiveCardIndex, cardFullViewCount, isCycle }) => {
+    const isGalleryScrollAvailable = cardsCount > cardFullViewCount;
+
+    const showNextButton =
+      (isCycle && isGalleryScrollAvailable) ||
+      (isGalleryScrollAvailable && cardsCount - activeCardIndex > cardFullViewCount);
+
+    const showPrevButton =
+      (isCycle && isGalleryScrollAvailable) || (isGalleryScrollAvailable && activeCardIndex > 0);
+
+    const handleNextClick = useCallback(() => {
+      if (isCycle) {
+        const nextIndex = activeCardIndex + 1;
+        setActiveCardIndex(cardsCount === nextIndex ? 0 : nextIndex);
+      } else {
+        setActiveCardIndex(activeCardIndex + 1);
+      }
+    }, []);
+
+    const handlePrevClick = useCallback(() => {
+      if (isCycle && cardsCount > 0) {
+        const prevIndex = activeCardIndex - 1;
+        setActiveCardIndex(prevIndex < 0 ? cardsCount - 1 : prevIndex);
+      } else {
+        setActiveCardIndex(activeCardIndex - 1);
+      }
+    }, []);
+
+    return renderArrows({
+      handler: [handlePrevClick, handleNextClick],
+      isShown: [showPrevButton, showNextButton],
+      btnClass: ['left-8', 'right-8'],
+      className: 'top-1/2 z-10',
+    });
+  },
+);

package/src/components/CarouselCard/CarouselCard.fixture.tsx

@@ -11,24 +11,21 @@ const button: ButtonProps = {
 
 export const CARD: CarouselCardContent = {
   title: 'Хочешь попасть на практику в РСХБ?',
-  description:
-    'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты под руководством опытных наставников, внести свой вклад в развитие перспективных цифровых продуктов.',
+  description: 'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты.',
   button,
   version: 'normal',
 };
 
 export const CARD_NEW: CarouselCardContent = {
   title: 'РСХБ?',
-  description:
-    'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты под руководством опытных наставников, внести свой вклад в развитие перспективных цифровых продуктов.',
+  description: 'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты.',
   button,
   version: 'normal',
 };
 
 export const CARD_MINI: CarouselCardContent = {
   title: 'Хочешь попасть на практику в РСХБ?',
-  description:
-    'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты под руководством опытных наставников, внести свой вклад в развитие перспективных цифровых продуктов.',
+  description: 'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты.',
   button,
   version: 'mini',
 };

package/src/components/CarouselCard/CarouselCard.tsx

@@ -1,9 +1,9 @@
-import { Headline } from '../Headline/Headline';
 import { JSX } from '@redneckz/uni-jsx';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
-import type { CarouselCardContent } from './CarouselCardContent';
 import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { Headline } from '../Headline/Headline';
+import type { CarouselCardContent } from './CarouselCardContent';
 
 export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {
   version?: CarouselCardVersion;
@@ -13,7 +13,7 @@ const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-[100%]
 
 const CARD_STYLE_MAP: Record<CarouselCardVersion, string> = {
   normal: 'min-w-[100%] justify-center items-center my-7 col-span-12',
-  mini: 'w-1/3 justify-center items-center mx-4 my-9 col-span-4',
+  mini: 'justify-center items-center mx-4 my-9 col-span-4',
 };
 
 const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {

package/src/components/CarouselCard/CarouselCardContent.ts

@@ -1,7 +1,10 @@
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
+/**
+ * @title Карточка какусели
+ */
 export interface CarouselCardContent extends HeadlineCommonProps {
   /**
    * @title Кнопка

package/src/components/CarouselCard/constants.ts

@@ -0,0 +1,11 @@
+import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
+
+export const cardStyleMap: Record<CarouselCardVersion, string> = {
+  normal: 'min-w-[100%] justify-center items-center m-7 col-span-12',
+  mini: 'min-w-auto justify-center items-center m-9 col-span-4',
+};
+
+export const cardWidthMap: Record<CarouselCardVersion, string> = {
+  normal: 'w-[1007px]',
+  mini: 'w-[350px]',
+};

package/src/components/CarouselTariffsCard/CarouselTariffsCard.example.json

@@ -0,0 +1,24 @@
+{
+  "title": "Заголовок",
+  "button": {
+    "href": "",
+    "text": "Кнопка",
+    "target": "_self",
+    "version": "primary"
+  },
+  "isHighlighting": false,
+  "rows": [
+    {
+      "title": "Ячейка 1-1",
+      "description": "Описание 1-1"
+    },
+    {
+      "title": "Ячейка 1-2",
+      "description": "Описание 1-2"
+    },
+    {
+      "title": "Ячейка 1-3",
+      "description": "Описание 1-3"
+    }
+  ]
+}

package/src/components/CarouselTariffsCard/CarouselTariffsCard.fixture.tsx

@@ -0,0 +1,64 @@
+import type { Picture } from '../../model/Picture';
+import { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { CarouselTariffsCard } from './CarouselTariffsCard';
+import { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+
+const imageMonth: Picture = {
+  src: 'monthly-payment.png',
+  format: 'webp',
+  size: {
+    width: 266,
+    height: 73,
+  },
+  title: 'money',
+};
+
+const button: ButtonProps = {
+  href: '/',
+  text: 'Открыть расчетный счет',
+  target: '_blank',
+  version: 'primary',
+};
+
+const buttonSecondary: ButtonProps = {
+  href: '/',
+  text: 'Открыть расчетный счет',
+  target: '_blank',
+  version: 'secondary',
+};
+
+const rows = [
+  { title: 'Открытие расчетного счета', description: 'Бесплатно' },
+  { title: 'Внутрибанковские платежи', description: '0 ₽' },
+  { title: 'Внешние платежи, до 10 шт.', description: '0 ₽' },
+  { title: 'От 11 платежей', description: '50 ₽/шт.' },
+  {
+    title: 'Внесение наличных',
+    description: '0% - до 100 000 ₽/мес., далее согласно п.2.4. Тарифов Банка',
+  },
+  { title: 'Зарплатный проект', description: 'Бесплатно' },
+];
+
+export const TARIFFS_CARD: CarouselTariffsCardContent = {
+  title: 'Расчётный эконом',
+  icon: imageMonth,
+  button: buttonSecondary,
+  rows,
+};
+
+export const TARIFFS_CARD_HIT: CarouselTariffsCardContent = {
+  icon: imageMonth,
+  title: 'Расчётный эконом',
+  button,
+  rows,
+  isHighlighting: true,
+};
+
+const CAROUSEL_TARIFFS_CARD = <CarouselTariffsCard {...TARIFFS_CARD} />;
+
+const CAROUSEL_TARIFFS_CARD_HIT = <CarouselTariffsCard {...TARIFFS_CARD_HIT} />;
+
+export default {
+  default: <div className="container grid grid-cols-12">{CAROUSEL_TARIFFS_CARD}</div>,
+  hit: <div className="container grid grid-cols-12">{CAROUSEL_TARIFFS_CARD_HIT}</div>,
+};

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -0,0 +1,93 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { VNode } from '../../model/VNode';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Button } from '../../ui-kit/Button/Button';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
+import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+
+export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
+
+export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
+  ({ className = '', title, icon, isHighlighting, button, rows = [], ...rest }) => {
+    const hitStyle = getHitStyle(Boolean(isHighlighting));
+    const rowsNode = rows.map(renderCardInfo);
+    const VISIBLE_ROWS_COUNT = 1;
+    const [visibleRows, hiddenRows] = [
+      rowsNode.slice(0, VISIBLE_ROWS_COUNT),
+      rowsNode.slice(VISIBLE_ROWS_COUNT),
+    ];
+
+    return (
+      <BlockWrapper
+        className={`font-sans bg-white p-[50px] p-8 border border-main-stroke relative w-[322px] min-w-[322px] -ml-[1px] ${hitStyle} ${className}`}
+        {...rest}
+      >
+        {isHighlighting ? renderHitIcon() : null}
+        {icon?.src ? <Img className="flex justify-center" image={icon} /> : null}
+        {title ? (
+          <Heading className="text-primary-text text-center pt-2" headingType="h5" title={title} />
+        ) : null}
+        {button ? <Button className="w-full mt-4" {...button} /> : null}
+        {rows?.length ? (
+          <Foldable
+            renderFoldableSection={({ isUnfolded }) => (
+              <div>
+                {visibleRows}
+                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+              </div>
+            )}
+            renderFoldButton={rows.length > 1 ? renderFoldButton : null}
+          />
+        ) : null}
+      </BlockWrapper>
+    );
+  },
+);
+
+const getHitStyle = (isHighlighting: boolean): string =>
+  isHighlighting ? 'mt-9 pt-[71px]' : 'mt-[70px] pt-9';
+
+const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
+  <button
+    className="w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center"
+    onClick={onToggle}
+  >
+    <div>{isUnfolded ? 'Скрыть' : 'Подробнее о тарифе'}</div>
+    <Icon
+      className="text-primary-text"
+      name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+      width="16"
+      height="16"
+      asSVG
+    />
+  </button>
+);
+
+const renderCardInfo = (cell: HeadlineCommonProps): VNode => (
+  <div className="py-5 border-b border-main-divider flex flex-col gap-1">
+    {cell?.title ? (
+      <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
+    ) : null}
+    {cell?.description ? <div className="text-primary-text text-h6">{cell.description}</div> : null}
+  </div>
+);
+
+const renderHitIcon = (): VNode => {
+  const POSITION_STYLE = 'absolute -top-7 -right-4';
+
+  return (
+    <div
+      className={`h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)] ${POSITION_STYLE}`}
+    >
+      <Icon iconVersion="black" name="HeartIcon" width="23" height="22" asSVG />
+      <div className="text-center">Хит</div>
+    </div>
+  );
+};

package/src/components/CarouselTariffsCard/CarouselTariffsCard.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/CarouselTariffsCard/CarouselTariffsCardContent.ts

@@ -0,0 +1,16 @@
+import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Карточка тарифной карусели
+ */
+export type CarouselTariffsCardContent = TitleProps & {
+  icon?: Picture;
+  /** @title Выделить карточку */
+  isHighlighting?: boolean;
+  /** @title Кнопка */
+  button?: ButtonProps;
+  /** @title Ячейка */
+  rows?: HeadlineCommonProps[];
+};

package/src/components/ComparisonTable/ComparisonTableBody.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCarouselControl } from '../../hooks/useCarousel';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { ComparisonTableColumnHeaders } from './ComparisonTableColumnHeaders';
 import type { Column, RowHeader } from './ComparisonTableContent';
 import { ComparisonTableRows } from './ComparisonTableRows';
@@ -26,7 +26,7 @@ export const ComparisonTableBody = JSX<ComparisonTableBodyProps>(
 
     const isScrollAvailable = colData.length > COLS_LENGTH_FOR_SCROLL;
 
-    const [activeIndex, controls] = useCarouselControl({
+    const [activeIndex, controls] = useCarouselControls({
       itemsCount: colData.length,
       visibleItemCount: COLS_LENGTH_FOR_SCROLL,
     });

package/src/components/ComparisonTable/ComparisonTableRows.tsx

@@ -1,15 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { CarouselControls } from '../../hooks/useCarouselControls';
 import type { TitleProps } from '../../model/HeadlineType';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import type { CellData } from './ComparisonTableContent';
 import { TableRow } from './TableRow';
-import type { Controls } from '../../hooks/useCarousel';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
 type ComparisonTableRowsProps = {
   rowData: { header: TitleProps; data: CellData[][] }[];
   activeCardIndex: number;
   isColoredFirstColumn: boolean;
-  controls: Controls;
+  controls: CarouselControls;
   isScrollAvailable: boolean;
 };
 

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -48,7 +48,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
                 headingType={headingType}
                 as="h3"
                 title={title}
-                className={`whitespace-pre-wrap max-w-[509px] mb-6
+                className={`whitespace-pre-wrap mb-6 w-full
                   ${textColorClass} ${AlignText[alignTitle]}`}
               />
             ) : null

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -85,6 +85,7 @@ export default {
         headlineVersion="L"
         title="Потребительский кредит наличными"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefitsCountOfRow={2}
         benefits={benefits}
         benefitsVersion="normal"
         buttons={buttons}

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -25,6 +25,12 @@ export type ProductBlockInnerContent = HeadlineProps &
      * }
      */
     image?: Picture;
+    /**
+     * @title Количество преимуществ в строке
+     * @default 3
+     * @enumNames ["2", "3"]
+     */
+    benefitsCountOfRow?: 2 | 3;
     /**
      * @title Список преимуществ
      * @minItems 2

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -16,6 +16,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     title,
     headlineVersion = 'L',
     description,
+    benefitsCountOfRow = 3,
     benefits,
     benefitsVersion,
     buttons,
@@ -27,7 +28,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     ...rest
   }) => {
     const benefitsCount = benefits?.filter((_) => _.label)?.length;
-    const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCount);
+    const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCountOfRow);
 
     return (
       <div className={`flex grow justify-between items-stretch h-full ${className}`}>
@@ -70,5 +71,9 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   },
 );
 
-const getBenefitsContainerStyles = (benefitsCount = 0) =>
-  `gap-6 mt-6 ${benefitsCount > 3 ? 'inline-grid grid-cols-[auto_auto]' : 'flex'}`;
+const getBenefitsContainerStyles = (benefitsCountOfRow = 2) =>
+  `gap-6 mt-6 ${
+    benefitsCountOfRow > 2
+      ? 'inline-grid grid-cols-[auto_auto_auto]'
+      : 'inline-grid grid-cols-[auto_auto]'
+  }`;

package/src/components/TariffsTable/TariffsTable.tsx

@@ -1,23 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCarouselControl } from '../../hooks/useCarousel';
+import type { CarouselControls } from '../../hooks/useCarouselControls';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { renderDefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { TableArrowScrollControl } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControl';
-import type { TableArrowScrollControlProps } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControlProps';
 import { COLS_LENGTH_FOR_SCROLL } from './constants';
 import type { TariffsTableContent } from './TariffsTableContent';
 import { TariffsTableRow } from './TariffsTableRow';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
-import type { Controls } from '../../hooks/useCarousel';
 
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
 interface WrapperProps {
-  controls: Controls;
+  controls: CarouselControls;
   isScrollAvailable: boolean;
 }
 
@@ -39,7 +37,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
     const columnsLength = colData.length;
 
-    const [activeIndex, controls] = useCarouselControl({
+    const [activeIndex, controls] = useCarouselControls({
       itemsCount: colData.length,
       visibleItemCount: COLS_LENGTH_FOR_SCROLL,
     });

package/src/hooks/{useCarousel.ts → useCarouselControls.ts}

@@ -1,8 +1,6 @@
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 
-export type CarouselControlProps = [number, Controls];
-
-export interface Controls {
+export interface CarouselControls {
   inc: () => void;
   dec: () => void;
   canInc: boolean;
@@ -15,23 +13,22 @@ interface CarouselProps {
   isCyclic?: boolean;
 }
 
-export const useCarouselControl = ({
+export const useCarouselControls = ({
   itemsCount,
   visibleItemCount = itemsCount,
   isCyclic,
-}: CarouselProps): Required<CarouselControlProps> => {
+}: CarouselProps): [number, CarouselControls] => {
   const [activeIndex, setActiveIndex] = useState(0);
 
   const inc = useCallback(
     () =>
       setActiveIndex((_) => (isCyclic ? (_ + 1) % itemsCount : Math.min(_ + 1, itemsCount - 1))),
-    [],
+    [isCyclic, itemsCount],
   );
-
   const dec = useCallback(
     () =>
       setActiveIndex((_) => (isCyclic ? (itemsCount + _ - 1) % itemsCount : Math.max(_ - 1, 0))),
-    [],
+    [isCyclic, itemsCount],
   );
 
   const isScrollAvailable = itemsCount > visibleItemCount;
@@ -40,7 +37,6 @@ export const useCarouselControl = ({
   const canInc =
     isCyclicAndScrollAvailable ||
     (isScrollAvailable && itemsCount - activeIndex > visibleItemCount);
-
   const canDec = isCyclicAndScrollAvailable || Boolean(isScrollAvailable && activeIndex > 0);
 
   return [

package/src/icons/HeartIcon.svg

@@ -0,0 +1,3 @@
+<svg title="Сердце" width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.87565 3.66675C5.09122 3.66675 2.83398 5.92398 2.83398 8.70841C2.83398 13.7501 8.79232 18.3334 12.0007 19.3996C15.209 18.3334 21.1673 13.7501 21.1673 8.70841C21.1673 5.92398 18.9101 3.66675 16.1257 3.66675C14.4205 3.66675 12.9131 4.51324 12.0007 5.80893C11.0882 4.51324 9.5808 3.66675 7.87565 3.66675Z" fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>