@redneckz/wildless-cms-uni-blocks 0.3.69 → 0.3.71

package/src/components/Header/DropdownMenu.tsx

@@ -0,0 +1,72 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { LinkProps } from '../../model/LinkProps';
+import type { UniBlockProps } from '../../types';
+import type {
+  ContentPageContext,
+  HandlerDecorator,
+  Router,
+} from '../ContentPage/ContentPageContext';
+
+const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
+  'bg-white': 'bg-primary-text',
+  transparent: 'bg-white',
+};
+
+interface DropdownMenuProps extends UniBlockProps {
+  menuVisible: boolean;
+  toggleMenu: () => void;
+  menuItems: LinkProps[];
+  bgColor?: BgColorVersion;
+  context: ContentPageContext;
+}
+
+export const DropdownMenu = JSX<DropdownMenuProps>((props) => {
+  const { menuVisible, toggleMenu, menuItems, bgColor, context } = props;
+
+  const { useRouter, handlerDecorator } = context;
+
+  const router = useRouter();
+
+  return (
+    <div
+      className={`absolute w-52 -top-4 right-0 pt-4 z-40 ${
+        menuVisible ? 'bg-white rounded-md shadow-blue-gray/24' : ''
+      }`}
+    >
+      <button
+        className="flex justify-between items-center cursor-pointer h-6 ml-6"
+        onClick={toggleMenu}
+        aria-label={`${menuVisible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
+      >
+        {Array(3).fill(bgColor).map(renderDot)}
+      </button>
+      <div
+        className={`flex flex-col rounded-md bg-white p-6 pb-2 ${menuVisible ? '' : 'hidden'}`}
+        aria-hidden={!menuVisible}
+      >
+        {renderDotsSubMenuItems(menuItems, router, handlerDecorator)}
+      </div>
+    </div>
+  );
+});
+
+const renderDotsSubMenuItems = (
+  menuItems: LinkProps[],
+  router: Router,
+  handlerDecorator: HandlerDecorator | undefined,
+) =>
+  menuItems?.map((_) => (
+    <a
+      key={_.href}
+      {...useLink({ router, handlerDecorator }, _)}
+      className="text-base font-light pb-4 hover:text-primary-main"
+    >
+      {_.text}
+    </a>
+  ));
+
+const renderDot = (bgColor: BgColorVersion, i: number) => (
+  <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />
+);

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

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { Header } from './Header.mobile';
 
 export default {

package/src/components/Header/Header.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { Header } from './Header';
 
 export default {

package/src/components/Header/HeaderSubMenu.tsx

@@ -4,14 +4,8 @@ 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 { isSSR } from '../../utils/isSSR';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
-import { headerSubMenuObserver } from './HeaderSubMenuObserver';
-
-const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'bg-primary-text',
-  transparent: 'bg-white',
-};
+import { DropdownMenu } from './DropdownMenu';
 
 export interface HeaderSubMenuProps {
   context: ContentPageContext;
@@ -19,95 +13,59 @@ export interface HeaderSubMenuProps {
   bgColor?: BgColorVersion;
 }
 
-export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems, bgColor }) => {
-  const [subMenuIsShow, setHiddenMenuIsShow] = context.useState(false);
+export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [], bgColor }) => {
+  const [menuVisible, setMenuVisible] = context.useState(false);
   const router = context.useRouter();
-  const { handlerDecorator } = context;
+  const { handlerDecorator, IntersectionObserverTag } = context;
+
+  const [visibleItemsCount, setVisibleItemsCount] = context.useState<number>(subItems.length);
+  const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
-  setTimeout(() => {
-    if (isSSR()) {
+  const activeSubItem = findActiveSubItem(router)(subItems);
+  const toggleMenu = () => setMenuVisible(!menuVisible);
+
+  const observerCallback = (itemIndex: number) => (entries: IntersectionObserverEntry[]) => {
+    if (!entries.length) {
       return;
     }
 
-    const headerSubMenu = globalThis.document.querySelectorAll('[data-item-name=header-submenu]');
-    headerSubMenu.forEach((_) => {
-      headerSubMenuObserver?.observe(_);
-    });
-  }, 200);
-
-  const activeSubItem = findActiveSubItem(router)(subItems);
-  const toggleSubMenu = () => setHiddenMenuIsShow(!subMenuIsShow);
+    const entry = entries[0];
 
-  const subMenu = subItems?.map((_) => (
-    <HeaderItem
-      key={_.href}
-      className="mr-8"
-      active={_ === activeSubItem}
-      {...useLink({ router, handlerDecorator }, _)}
-      dataItemName="header-submenu"
-      bgColor={bgColor}
-    />
-  ));
+    if (entry.intersectionRatio < 1) {
+      setVisibleItemsCount((prev) => Math.min(prev, itemIndex));
+    } else {
+      setVisibleItemsCount((prev) => Math.max(prev, itemIndex + 1));
+    }
+  };
 
   return (
     <nav className="relative mt-5">
-      <div className="overflow-hidden whitespace-nowrap mr-52">{subMenu}</div>
-      {renderDotsSubMenu({
-        subMenuIsShow,
-        toggleSubMenu,
-        subItems,
-        bgColor,
-        router,
-        handlerDecorator,
-      })}
+      <div className="overflow-hidden whitespace-nowrap mr-52">
+        {subItems.map((_, i) => (
+          <IntersectionObserverTag
+            Tag="span"
+            observerCallback={observerCallback(i)}
+            observerOptions={{ threshold: 1 }}
+            key={String(i)}
+          >
+            <HeaderItem
+              className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
+              active={_ === activeSubItem}
+              {...useLink({ router, handlerDecorator }, _)}
+              bgColor={bgColor}
+            />
+          </IntersectionObserverTag>
+        ))}
+      </div>
+      {dropDownMenuItems.length ? (
+        <DropdownMenu
+          context={context}
+          menuVisible={menuVisible}
+          toggleMenu={toggleMenu}
+          menuItems={dropDownMenuItems}
+          bgColor={bgColor}
+        />
+      ) : null}
     </nav>
   );
 });
-
-// TODO: add types
-const renderDotsSubMenu = ({
-  subMenuIsShow,
-  toggleSubMenu,
-  subItems,
-  bgColor,
-  router,
-  handlerDecorator,
-}) => (
-  <div
-    className={`absolute w-52 -top-4 right-0 pt-4 z-40 ${
-      subMenuIsShow ? 'bg-white rounded-md shadow-blue-gray/24' : ''
-    }`}
-    data-header-submenu-visible="toggled"
-  >
-    <button
-      className="flex justify-between items-center cursor-pointer h-6 ml-6"
-      onClick={toggleSubMenu}
-      aria-label={`${subMenuIsShow ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
-    >
-      {Array(3).fill(bgColor).map(renderDot)}
-    </button>
-    <div
-      className={`flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`}
-      aria-hidden={!subMenuIsShow}
-    >
-      {renderDotsSubMenuItems(subItems, router, handlerDecorator)}
-    </div>
-  </div>
-);
-
-// TODO: add types
-const renderDotsSubMenuItems = (subItems, router, handlerDecorator) =>
-  subItems?.map((_) => (
-    <a
-      key={_.href}
-      {...useLink({ router, handlerDecorator }, _)}
-      data-item-name="dots-header-submenu"
-      className="text-base font-light pb-4 hover:text-primary-main"
-    >
-      {_.text}
-    </a>
-  ));
-
-const renderDot = (bgColor: BgColorVersion, i: number) => (
-  <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />
-);

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

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { Picture } from '../../model/Picture';
 import { Headline } from './Headline';
@@ -38,19 +38,39 @@ const secondaryProps: HeadlineContent = {
 };
 
 export default {
-  default: (
+  'default left alignment': (
     <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...defaultProps} align="left" />
+    </div>
+  ),
+  'default center alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...defaultProps} align="center" />
+    </div>
+  ),
+  'default right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...defaultProps} align="right" />
     </div>
   ),
 
-  primary: (
+  'primary left alignment': (
     <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...primaryProps} align="left" />
+    </div>
+  ),
+  'primary center alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...primaryProps} align="center" />
+    </div>
+  ),
+  'primary right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...primaryProps} align="right" />
+    </div>
+  ),
+  'primary without description': (
+    <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
         context={context}
@@ -58,6 +78,10 @@ export default {
         image={image}
         bgColorHeadline="primary"
       />
+    </div>
+  ),
+  'primary without title': (
+    <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
         context={context}
@@ -67,11 +91,24 @@ export default {
       />
     </div>
   ),
-  secondary: (
+
+  'secondary left alignment': (
     <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...secondaryProps} align="left" />
+    </div>
+  ),
+  'secondary center alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...secondaryProps} align="center" />
+    </div>
+  ),
+  'secondary right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...secondaryProps} align="right" />
+    </div>
+  ),
+  'secondary without description': (
+    <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
         context={context}
@@ -79,6 +116,10 @@ export default {
         image={image}
         bgColorHeadline="secondary"
       />
+    </div>
+  ),
+  'secondary without title': (
+    <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
         context={context}

package/src/components/Headline/Headline.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { Headline } from './Headline';
 import { HeadlineContent } from './HeadlineContent';
@@ -20,24 +20,48 @@ export const HEADLINE_SECONDARY: HeadlineContent = {
 };
 
 export default {
-  default: (
+  'default left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE} />
       <Headline className="col-span-12" context={context} {...HEADLINE} align="left" />
+    </div>
+  ),
+  'default center alignment': (
+    <div className="container grid grid-cols-12">
+      <Headline className="col-span-12" context={context} {...HEADLINE} />
+    </div>
+  ),
+  'default right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...HEADLINE} align="right" />
     </div>
   ),
-  primary: (
+  'primary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} />
       <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} align="left" />
+    </div>
+  ),
+  'primary center alignment': (
+    <div className="container grid grid-cols-12">
+      <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} />
+    </div>
+  ),
+  'primary right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} align="right" />
     </div>
   ),
-  secondary: (
+  'secondary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} />
       <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} align="left" />
+    </div>
+  ),
+  'secondary center alignment': (
+    <div className="container grid grid-cols-12">
+      <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} />
+    </div>
+  ),
+  'secondary right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} align="right" />
     </div>
   ),

package/src/components/Insurance/Insurance.example.json

@@ -0,0 +1,21 @@
+{
+  "title": "Заголовок",
+  "description": "Описание",
+  "insurance": 500000,
+  "benefits": [
+    {
+      "label": "Заголовок 1",
+      "description": "Описание 1",
+      "icon": {
+        "icon": "ShieldTickIcon"
+      }
+    },
+    {
+      "label": "Заголовок 2",
+      "description": "Описание 2",
+      "icon": {
+        "icon": "ShieldTickIcon"
+      }
+    }
+  ]
+}

package/src/components/Insurance/Insurance.fixture.tsx

@@ -1,11 +1,12 @@
-import { Insurance } from './Insurance';
-import { context } from '../../setup-fixture';
-import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 import { Picture } from '../../model/Picture';
+import { context } from '../../react/setup-fixture';
+import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import { Insurance } from './Insurance';
 
 const benefits: Benefit[] = [
   {
     label: 'Телесное повреждение',
+    description: 'Описание',
     icon: { icon: 'ShieldTickIcon' },
   },
   {
@@ -39,7 +40,7 @@ const image: Picture = {
 };
 
 export default {
-  default: (
+  'without monthly payment': (
     <div className="container grid grid-cols-12">
       <Insurance
         context={context}
@@ -48,8 +49,12 @@ export default {
         description="Покрываемые риски программы «Защита вас и ваших близких»"
         benefits={benefits}
         image={image}
-        insuranceSum={500000}
+        sum={500000}
       />
+    </div>
+  ),
+  'with monthly payment': (
+    <div className="container grid grid-cols-12">
       <Insurance
         context={context}
         className="col-span-12"
@@ -57,7 +62,7 @@ export default {
         description="Покрываемые риски программы «Защита вас и ваших близких»"
         benefits={benefits}
         image={image}
-        insuranceSum={500000}
+        sum={500000}
         monthLimit={25000}
       />
     </div>

package/src/components/Insurance/Insurance.tsx

@@ -1,15 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { InsuranceContent } from './InsuranceContent';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import type { InsuranceContent } from './InsuranceContent';
 
 export interface InsuranceProps extends InsuranceContent, UniBlockProps {}
 
 export const Insurance = JSX<InsuranceProps>(
-  ({ className = '', title, description, image, benefits, insuranceSum, monthLimit }) => {
+  ({ className = '', title, description, image, benefits, sum, monthLimit }) => {
     return (
       <section className={`px-[100px] py-[50px] bg-white text-primary-text ${className}`}>
         {title ? <Heading headingType="h3" title={title} className="text-center" /> : null}
@@ -23,11 +23,9 @@ export const Insurance = JSX<InsuranceProps>(
               ) : null}
 
               <div className="bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4">
-                {insuranceSum
-                  ? renderValueBlock('Страховая сумма:', insuranceSum, Boolean(monthLimit))
-                  : null}
+                {sum ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
                 {monthLimit
-                  ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(insuranceSum))
+                  ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
                   : null}
               </div>
             </div>
@@ -50,8 +48,11 @@ function renderBenefit(benefit: Benefit, i: number) {
           asSVG
         />
       ) : null}
-      <div className="flex">
-        <div className="text-title-2xs">{benefit.label}</div>
+      <div>
+        {benefit?.label ? <div className="text-title-2xs">{benefit.label}</div> : null}
+        {benefit?.description ? (
+          <div className="mt-2 font-light text-secondary-text">{benefit.description}</div>
+        ) : null}
       </div>
     </div>
   );

package/src/components/Insurance/InsuranceContent.ts

@@ -1,14 +1,12 @@
 import type { Picture } from '../../model/Picture';
 import type { BenefitsBlockContent } from '../BenefitsBlock/BenefitsBlockContent';
+import type { InsuranceProps } from '../../model/Insurance';
 
-export type InsuranceContent = BenefitsBlockContent & {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Описание */
-  description?: string;
-  /** @title Ежемесячный лимит */
-  monthLimit?: number;
-  /** @title Страховая сумма */
-  insuranceSum?: number;
-  image?: Picture;
-};
+export type InsuranceContent = BenefitsBlockContent &
+  InsuranceProps & {
+    /** @title Заголовок */
+    title?: string;
+    /** @title Описание */
+    description?: string;
+    image?: Picture;
+  };

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

@@ -0,0 +1,44 @@
+{
+  "title": "Заголовок",
+  "button": {
+    "href": "https://rshb.ru",
+    "text": "Текст кнопки"
+  },
+  "insuranceTabs": [
+    {
+      "title": "Описание",
+      "card": [
+        {
+          "sum": 200000,
+          "fee": 2100,
+          "icon": { "icon": "ActualBalanceIcon" }
+        },
+        {
+          "sum": 200000,
+          "fee": 2100,
+          "icon": { "icon": "ActualBalanceIcon" }
+        }
+      ]
+    },
+    {
+      "title": "Описание",
+      "card": [
+        {
+          "sum": 200000,
+          "fee": 2100,
+          "icon": { "icon": "ActualBalanceIcon" }
+        },
+        {
+          "sum": 200000,
+          "fee": 2100,
+          "icon": { "icon": "ActualBalanceIcon" }
+        },
+        {
+          "sum": 200000,
+          "fee": 2100,
+          "icon": { "icon": "ActualBalanceIcon" }
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,52 @@
+import { context } from '../../react/setup-fixture';
+import { InsuranceAmountBlock } from './InsuranceAmountBlock';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <InsuranceAmountBlock
+        className="col-span-12"
+        context={context}
+        title="Выбор страховой суммы"
+        button={{ href: 'https://rshb.ru', text: 'Выбрать программу' }}
+        insuranceTabs={[
+          {
+            title: 'Индивидуальный',
+            cards: [
+              {
+                sum: 200000,
+                fee: 2100,
+                icon: { icon: 'ActualBalanceIcon' },
+              },
+              {
+                sum: 200000,
+                fee: 2100,
+                icon: { icon: 'ActualBalanceIcon' },
+              },
+              {
+                sum: 200000,
+                fee: 2100,
+                icon: { icon: 'ActualBalanceIcon' },
+              },
+            ],
+          },
+          {
+            title: 'Семейный',
+            cards: [
+              {
+                sum: 400000,
+                fee: 3600,
+                icon: { icon: 'ActualBalanceIcon' },
+              },
+              {
+                sum: 600000,
+                fee: 3600,
+                icon: { icon: 'MoneyInsuranceIcon' },
+              },
+            ],
+          },
+        ]}
+      />
+    </div>
+  ),
+};