@redneckz/wildless-cms-uni-blocks 0.6.22 → 0.6.24

package/src/components/Header/HeaderSubMenu.tsx

@@ -1,13 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useLink } from '../../hooks/useLink';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
-import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import { IntersectionObserverTag } from '../../ui-kit/IntersectionObserverTag';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { DropdownMenu } from './DropdownMenu';
+import { HeaderSubMenuItem } from './HeaderSubMenuItem';
 
 export interface HeaderSubMenuProps {
   context: ContentPageContext;
@@ -16,69 +14,52 @@ export interface HeaderSubMenuProps {
 }
 
 export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [], bgColor }) => {
-  const { handlerDecorator } = context;
   const router = context.useRouter();
 
-  const subItemsListRef = useRef<HTMLDivElement | null>(null);
-
-  const [menuVisible, setMenuVisible] = useState(false);
+  const activeSubItem = findActiveSubItem(router)(subItems);
 
   const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
   const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
+  const subItemsListRef = useRef<HTMLDivElement | null>(null);
   const observerOptions = useMemo(
     () => ({ threshold: 1, root: subItemsListRef.current }),
     [subItemsListRef.current],
   );
-
-  const observerCallbacks = useMemo(
+  const subItemsVisibilityHandlers = useMemo(
     () =>
-      subItems.map((_, index) => (entries: IntersectionObserverEntry[]) => {
-        if (!entries.length) {
-          return;
-        }
-
-        // Assumption about sorting entries by time
-        const entry = entries[entries.length - 1];
-
-        if (entry.isIntersecting) {
-          setVisibleItemsCount(handleIntersectionActivation(index));
-        } else {
-          setVisibleItemsCount(handleIntersectionDeactivation(index));
-        }
+      subItems.map((_, index) => (isIntersecting: boolean) => {
+        setVisibleItemsCount(
+          isIntersecting
+            ? handleIntersectionActivation(index)
+            : handleIntersectionDeactivation(index),
+        );
       }),
     [subItems],
   );
 
-  const activeSubItem = findActiveSubItem(router)(subItems);
-  const toggleMenu = () => setMenuVisible(!menuVisible);
-
   return (
     <nav className="relative mt-6">
       <div ref={subItemsListRef} className="overflow-hidden whitespace-nowrap mr-52 pb-3">
         {subItems.map((_, i) => (
-          <IntersectionObserverTag
+          <HeaderSubMenuItem
             key={String(i)}
-            tag="span"
-            observerCallback={observerCallbacks[i]}
+            context={context}
+            className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
+            active={_ === activeSubItem}
+            bgColor={bgColor}
             observerOptions={observerOptions}
-          >
-            <HeaderItem
-              className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
-              active={_ === activeSubItem}
-              {...useLink({ router, handlerDecorator }, _)}
-              bgColor={bgColor}
-            />
-          </IntersectionObserverTag>
+            onVisibilityChange={subItemsVisibilityHandlers[i]}
+            {..._}
+          />
         ))}
       </div>
       {dropDownMenuItems.length ? (
         <DropdownMenu
           context={context}
-          activeSubItem={activeSubItem}
-          menuVisible={menuVisible}
-          toggleMenu={toggleMenu}
-          menuItems={dropDownMenuItems}
+          className="absolute w-52 -top-4 right-0 pt-4 z-40"
+          items={dropDownMenuItems}
+          activeItem={activeSubItem}
           bgColor={bgColor}
         />
       ) : null}

package/src/components/Header/HeaderSubMenuItem.tsx

@@ -0,0 +1,61 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
+import { useLink } from '../../hooks/useLink';
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { LinkProps } from '../../model/LinkProps';
+import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+
+export interface HeaderSubMenuItemProps extends LinkProps {
+  context: ContentPageContext;
+  className?: string;
+  active?: boolean;
+  bgColor?: BgColorVersion;
+  observerOptions?: IntersectionObserverInit;
+  onVisibilityChange?: (isIntersecting: boolean) => void;
+}
+
+export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
+  ({
+    context,
+    className,
+    active,
+    bgColor,
+    observerOptions,
+    onVisibilityChange,
+    children,
+    ...linkProps
+  }) => {
+    const { handlerDecorator } = context;
+    const router = context.useRouter();
+
+    const observerCallback = useCallback(
+      (entries: IntersectionObserverEntry[]) => {
+        if (!entries.length || !onVisibilityChange) {
+          return;
+        }
+
+        // Assumption about entries order (by time)
+        const entry = entries[entries.length - 1];
+
+        onVisibilityChange(entry.isIntersecting);
+      },
+      [onVisibilityChange],
+    );
+    const ref = useIntersectionObserver<HTMLSpanElement>(observerCallback, observerOptions);
+
+    return (
+      <span ref={ref}>
+        <HeaderItem
+          className={className}
+          active={active}
+          bgColor={bgColor}
+          {...useLink({ router, handlerDecorator }, linkProps)}
+        >
+          {children}
+        </HeaderItem>
+      </span>
+    );
+  },
+);

package/src/components/Headline/Headline.example.json

@@ -1,16 +1,18 @@
 {
-  "title": "Заголовок",
-  "description": "Описание",
-  "align": "center",
-  "bgColorHeadline": "transparent",
-  "headlineVersion": "M",
-  "image": {
-    "format": "webp",
-    "size": {
-      "width": 180,
-      "height": 180
-    },
-    "alt": "",
-    "title": ""
+  "content": {
+    "title": "Заголовок",
+    "description": "Описание",
+    "align": "center",
+    "bgColorHeadline": "transparent",
+    "headlineVersion": "M",
+    "image": {
+      "format": "webp",
+      "size": {
+        "width": 180,
+        "height": 180
+      },
+      "alt": "",
+      "title": ""
+    }
   }
 }

package/src/components/Headline/HeadlineContent.ts

@@ -8,6 +8,7 @@ import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
  * @title Заголовок
  */
 export type HeadlineContent = HeadlineProps & {
+  /** @title Изображение (моб.) */
   image?: Picture;
   align?: AlignType;
   bgColorHeadline?: BlockVersionWithTransparent;

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

@@ -1,86 +1,88 @@
 {
-  "title": "Заголовок",
-  "insuranceTabs": [
-    {
-      "title": "Описание 1",
-      "cards": [
-        {
-          "sum": 200000,
-          "fee": 2100,
-          "icon": {
-            "format": "webp",
-            "size": {
-              "width": 70,
-              "height": 70
+  "content": {
+    "title": "Заголовок",
+    "insuranceTabs": [
+      {
+        "title": "Описание 1",
+        "cards": [
+          {
+            "sum": 200000,
+            "fee": 2100,
+            "icon": {
+              "format": "webp",
+              "size": {
+                "width": 70,
+                "height": 70
+              },
+              "icon": "ActualBalanceIcon"
             },
-            "icon": "ActualBalanceIcon"
+            "href": ""
           },
-          "href": ""
-        },
-        {
-          "sum": 200000,
-          "fee": 2100,
-          "icon": {
-            "format": "webp",
-            "size": {
-              "width": 70,
-              "height": 70
+          {
+            "sum": 200000,
+            "fee": 2100,
+            "icon": {
+              "format": "webp",
+              "size": {
+                "width": 70,
+                "height": 70
+              },
+              "icon": "ActualBalanceIcon"
             },
-            "icon": "ActualBalanceIcon"
-          },
-          "href": ""
-        }
-      ]
-    },
-    {
-      "title": "Описание 2",
-      "cards": [
-        {
-          "sum": 200000,
-          "fee": 2100,
-          "icon": {
-            "format": "webp",
-            "size": {
-              "width": 70,
-              "height": 70
+            "href": ""
+          }
+        ]
+      },
+      {
+        "title": "Описание 2",
+        "cards": [
+          {
+            "sum": 200000,
+            "fee": 2100,
+            "icon": {
+              "format": "webp",
+              "size": {
+                "width": 70,
+                "height": 70
+              },
+              "icon": "ActualBalanceIcon"
             },
-            "icon": "ActualBalanceIcon"
+            "href": ""
           },
-          "href": ""
-        },
-        {
-          "sum": 200000,
-          "fee": 2100,
-          "icon": {
-            "format": "webp",
-            "size": {
-              "width": 70,
-              "height": 70
+          {
+            "sum": 200000,
+            "fee": 2100,
+            "icon": {
+              "format": "webp",
+              "size": {
+                "width": 70,
+                "height": 70
+              },
+              "icon": "ActualBalanceIcon"
             },
-            "icon": "ActualBalanceIcon"
+            "href": ""
           },
-          "href": ""
-        },
-        {
-          "sum": 200000,
-          "fee": 2100,
-          "icon": {
-            "format": "webp",
-            "size": {
-              "width": 70,
-              "height": 70
+          {
+            "sum": 200000,
+            "fee": 2100,
+            "icon": {
+              "format": "webp",
+              "size": {
+                "width": 70,
+                "height": 70
+              },
+              "icon": "ActualBalanceIcon"
             },
-            "icon": "ActualBalanceIcon"
-          },
-          "href": ""
-        }
-      ]
+            "href": ""
+          }
+        ]
+      }
+    ],
+    "button": {
+      "href": "",
+      "text": "Выбрать программу",
+      "target": "_self",
+      "version": "primary"
     }
-  ],
-  "button": {
-    "href": "",
-    "text": "Выбрать программу",
-    "target": "_self",
-    "version": "primary"
   }
 }

package/src/components/InvestmentInfo/InvestmentInfo.example.json

@@ -1,48 +1,51 @@
 {
-  "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
-  "investmentZeroColumn": {
-    "title": "Название 1"
-  },
-  "investmentColumns": [
-    {
-      "title": "Название 2",
-      "cells": [
-        {
-          "text": "Ячейка 2-1",
-          "cellColor": "green-dark",
-          "cellSize": "S"
-        }
-      ]
+  "content": {
+    "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
+    "isDotted": true,
+    "investmentZeroColumn": {
+      "title": "Название 1"
     },
-    {
-      "title": "Название 3",
-      "cells": [
-        {
-          "text": "Ячейка 3-1",
-          "cellColor": "green-dark",
-          "cellSize": "S"
-        }
-      ]
-    },
-    {
-      "title": "Название 4",
-      "cells": [
-        {
-          "text": "Ячейка 4-1",
-          "cellColor": "green-dark",
-          "cellSize": "L"
-        }
-      ]
-    },
-    {
-      "title": "Название 5",
-      "cells": [
-        {
-          "text": "Ячейка 5-1",
-          "cellColor": "green-dark",
-          "cellSize": "XL"
-        }
-      ]
-    }
-  ]
+    "investmentColumns": [
+      {
+        "title": "Название 2",
+        "cells": [
+          {
+            "text": "Ячейка 2-1",
+            "cellColor": "green-dark",
+            "cellSize": "S"
+          }
+        ]
+      },
+      {
+        "title": "Название 3",
+        "cells": [
+          {
+            "text": "Ячейка 3-1",
+            "cellColor": "green-dark",
+            "cellSize": "S"
+          }
+        ]
+      },
+      {
+        "title": "Название 4",
+        "cells": [
+          {
+            "text": "Ячейка 4-1",
+            "cellColor": "green-dark",
+            "cellSize": "L"
+          }
+        ]
+      },
+      {
+        "title": "Название 5",
+        "cells": [
+          {
+            "text": "Ячейка 5-1",
+            "cellColor": "green-dark",
+            "cellSize": "XL"
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/InvestmentInfo/InvestmentInfo.fixture.tsx

@@ -4,10 +4,9 @@ import type { InvestmentInfoContent } from './InvestmentInfoContent';
 
 export const INVESTMENT_INFO: InvestmentInfoContent = {
   items: [
-    'Качественные фермерские продукты напрямую от производителей',
-    'Самая большая база сельских туров по России',
-    'Площадки для создания комфортной жизни за городом',
-    'Подробная база вакансий для жителей сельской местности',
+    'Пример с ежегодным взносом 400 000 ₽',
+    'Срок использования ИИС вы определяете сами. Но для получения налоговых вычетов он должен быть открыт не менее 3 лет',
+    'Вы можете возвращать до 52 000 ₽ каждый год',
   ],
   investmentZeroColumn: {
     title: 'Открытие ИИС',

package/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -46,21 +46,21 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
 
   return (
     <BlockWrapper
-      className={`font-sans bg-white p-9 pb-9 ${className}`}
+      className={`font-sans bg-white px-9 py-12 ${className}`}
       context={context}
       {...rest}
     >
       <div className="container text-m-light">
         {colums?.length ? (
           <div>
-            <div className="flex items-end px-9 text-white">
+            <div className="flex items-end relative pl-9 pr-5 text-white">
               {joinList(<div className="w-px h-4 bg-main-stroke" />)(
                 colums.map(renderInvestmentColumn),
               )}
-              <div className="w-px h-4 bg-main-stroke" />
+              <div className="absolute right-[30px] w-px h-4 bg-main-stroke" />
             </div>
-            <div className="border-t border-main-stroke -mt-2 mx-9" />
-            <div className="flex justify-between mt-3 -mx-10">
+            <div className="border-t border-main-stroke -mt-2 ml-9 mr-8" />
+            <div className="flex justify-between text-primary-text mt-3 -mx-10">
               {colums.map(renderInvestmentColumnTitle)}
             </div>
           </div>
@@ -68,7 +68,7 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
 
         {items?.length ? (
           <List
-            className="mt-9 text-h6"
+            className="mt-9 text-l-light max-w-[657px]"
             items={items}
             itemClassName="mb-[7px]"
             isDotted={isDotted}
@@ -93,8 +93,12 @@ const renderInvestmentColumn = (
       className={`${getColumnClasses(isSecondColumn, isLastColumn, column.cells)}`}
     >
       {column.cells?.length ? (
-        <div className={`w-full ${isLastColumn ? 'border-4 border-green-more-dark p-1' : ''}`}>
-          {column.cells.map(renderInvestmentCell)}
+        <div
+          className={`w-full ${
+            isLastColumn ? 'border-4 border-green-more-dark p-1.5 min-w-[290px]' : ''
+          }`}
+        >
+          {column.cells.reverse().map(renderInvestmentCell)}
         </div>
       ) : null}
     </div>
@@ -109,7 +113,7 @@ const getColumnClasses = (
   [
     cells.length ? 'flex-1' : 'flex-0',
     cells.length && !isSecondColumn && !isLastColumn ? 'pl-2.5' : '',
-    cells.length && !isLastColumn ? 'pr-2.5 pb-8' : 'pb-6',
+    cells.length && !isLastColumn ? 'pr-2.5 pb-8' : 'pb-[22px]',
   ].join(' ');
 
 const renderInvestmentCell = (cell: InvestmentCell, i: number) => {
@@ -140,7 +144,7 @@ const renderInvestmentColumnTitle = (
     <div
       key={`title_${i}`}
       className={`flex-1 max-w-[180px] text-center px-2 ${isFirstColumn ? 'pl-9' : ''} ${
-        isLastColumn ? 'pr-9' : ' '
+        isLastColumn ? 'mr-3.5' : ' '
       }`}
     >
       {column.title}

package/src/components/InvestmentInfo/InvestmentInfo.ui.json

@@ -1,16 +1,9 @@
 {
-  "content": {
-    "bonusItems": {
-      "items": {
-        "bonusItemContent": {
-          "bonusType": {
-            "ui:widget": "hidden"
-          },
-          "image": {
-            "ui:field": "icon"
-          }
-        }
-      }
+  "content": {},
+  "style": {
+    "ui:options": {
+      "minCols": 12,
+      "maxCols": 12
     }
   }
 }

package/src/components/InvestmentInfo/InvestmentInfoContent.ts

@@ -2,13 +2,12 @@ import type { ListContent } from '../../ui-kit/List/ListContent';
 
 /**
  * @title Цвет
- * @enumNames ["Желтый", "Светло-зеленый", "Зеленый", "Тёмно-зеленый"]
+ * @enumNames ["Оранжевый", "Светло-зеленый", "Зеленый", "Тёмно-зеленый"]
  */
 export type InvestmentCellColor = 'yellow' | 'green-light' | 'green' | 'green-dark';
 
 /**
  * @title Высота
- * @enumNames ["Очень большой", "Большой", "Средний", "Маленький", "Очень маленький"]
  */
 export type InvestmentCellSize = 'XL' | 'L' | 'M' | 'S' | 'XS';
 

package/src/components/LinkDocs/LinkDocs.example.json

@@ -1,32 +1,34 @@
 {
-  "title": "Список документов",
-  "description": "Описание",
-  "headlineVersion": "M",
-  "icon": {
-    "icon": "DocIcon"
-  },
-  "documents": [
-    {
-      "text": "Документ №1",
-      "href": "/documents/document1.doc",
-      "fileSize": "123КБ"
+  "content": {
+    "title": "Список документов",
+    "description": "Описание",
+    "headlineVersion": "M",
+    "icon": {
+      "icon": "DocIcon"
     },
-    {
-      "text": "Документ №2",
-      "href": "/documents/document2.rtf",
-      "target": "_blank"
-    },
-    {
-      "text": "Документ №3",
-      "href": "/abc3/map.jpeg",
-      "fileSize": "2МБ"
-    },
-    {
-      "text": "Документ №4",
-      "href": "/abc/map.rar"
-    }
-  ],
-  "columnsMode": "double",
-  "orientation": "vertical",
-  "hasBorder": true
+    "documents": [
+      {
+        "text": "Документ №1",
+        "href": "/documents/document1.doc",
+        "fileSize": "123КБ"
+      },
+      {
+        "text": "Документ №2",
+        "href": "/documents/document2.rtf",
+        "target": "_blank"
+      },
+      {
+        "text": "Документ №3",
+        "href": "/abc3/map.jpeg",
+        "fileSize": "2МБ"
+      },
+      {
+        "text": "Документ №4",
+        "href": "/abc/map.rar"
+      }
+    ],
+    "columnsMode": "double",
+    "orientation": "vertical",
+    "hasBorder": true
+  }
 }