@redneckz/wildless-cms-uni-blocks 0.3.32 → 0.3.35

package/src/components/Header/HeaderContent.ts

@@ -1,13 +1,13 @@
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapProps } from '../../services/sitemap/SitemapProps';
-import type { IconName } from '../../icons/IconName';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Пункт подменю
  */
 export interface SubMenuItem extends LinkProps {
-  icon?: IconName;
+  icon?: Picture;
 }
 
 /**
@@ -16,7 +16,7 @@ export interface SubMenuItem extends LinkProps {
  */
 export interface DispositionItem extends LinkProps {
   /** @hidden */
-  icon?: IconName;
+  icon?: Picture;
 }
 
 /**

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { IconName } from '../../icons/IconName';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { UniBlockProps } from '../../types';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName } from '../../icons/IconName';
+import { Img } from '../../ui-kit/Img/Img';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
@@ -17,11 +17,11 @@ const COLORS_MAP: Record<BgColorVersion, string> = {
   'bg-white': 'text-primary-text hover:text-primary-main',
   transparent: 'text-white',
 };
-const DOP_LINKS_COLORS_MAP: Record<BgColorVersion, string> = {
+const LINKS_COLORS_MAP: Record<BgColorVersion, string> = {
   'bg-white': 'text-secondary-light hover:text-secondary-hover',
   transparent: 'text-white',
 };
-const DOP_LINKS_ICON_NAME_MAP: Record<BgColorVersion, IconName> = {
+const LINKS_ICON_NAME_MAP: Record<BgColorVersion, IconName> = {
   'bg-white': 'GridIcon',
   transparent: 'GridIconWhite',
 };
@@ -52,16 +52,13 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           className={`mr-5 ${COLORS_MAP[bgColor]}`}
           ariaLabel="Поиск по сайту"
         >
-          <Icon name="LoupeIcon" className="h-full" asSVG color="none" />
-        </HeaderSecondaryMenuButton>
-        <HeaderSecondaryMenuButton className={`mr-5 ${COLORS_MAP[bgColor]}`} ariaLabel="Профиль">
-          <Icon name="ProfileIcon" className="h-full" asSVG color="none" />
+          <Img image="LoupeIcon" className="h-full" asSVG color="none" />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
-          className={`${DOP_LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
+          className={`${LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
           ariaLabel="Дополнительные ссылки"
         >
-          <Icon name={DOP_LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG color="none" />
+          <Img image={LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG color="none" />
         </HeaderSecondaryMenuButton>
       </div>
     );

package/src/components/Header/HeaderSubMenu.tsx

@@ -0,0 +1,93 @@
+import { JSX } from '@redneckz/uni-jsx';
+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 type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { headerSubMenuObserver } from './HeaderSubMenuObserver';
+
+export interface HeaderSubMenuProps {
+  context: ContentPageContext;
+  subItems?: LinkProps[];
+  bgColor?: BgColorVersion;
+}
+
+export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems, bgColor }) => {
+  const [subMenuIsShow, setHiddenMenuIsShow] = context.useState(false);
+  const router = context.useRouter();
+  const { handlerDecorator } = context;
+
+  setTimeout(() => {
+    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 subMenu = subItems?.map((_) => (
+    <HeaderItem
+      key={_.href}
+      className="mr-8"
+      active={_ === activeSubItem}
+      {...useLink({ router, handlerDecorator }, _)}
+      dataItemName="header-submenu"
+      bgColor={bgColor}
+    />
+  ));
+
+  return (
+    <nav className="relative mt-5">
+      <div className="overflow-hidden whitespace-nowrap mr-52">{subMenu}</div>
+      {renderDotsSubMenu({
+        subMenuIsShow,
+        toggleSubMenu,
+        subItems,
+        router,
+        handlerDecorator,
+      })}
+    </nav>
+  );
+});
+
+// TODO: add types
+const renderDotsSubMenu = ({
+  subMenuIsShow,
+  toggleSubMenu,
+  subItems,
+  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}
+    >
+      {Array(3).fill(<div className="w-[3px] h-[3px] rounded bg-black mr-1" />)}
+    </button>
+    <div className={`flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`}>
+      {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>
+  ));

package/src/components/Header/HeaderSubMenuObserver.ts

@@ -0,0 +1,44 @@
+import { isSSR } from '../../utils/isSSR';
+
+export const headerSubMenuObserver = isSSR()
+  ? undefined
+  : new IntersectionObserver(
+      (entries) => {
+        const headerSubMenuButtonElement = window.document.querySelector(
+          '[data-header-submenu-visible=toggled]',
+        );
+        const headerSubMenuItems = Array.from(
+          window.document.querySelectorAll('[data-item-name=header-submenu]'),
+        );
+        const dotsHeaderSubMenuItems = Array.from(
+          window.document.querySelectorAll('[data-item-name=dots-header-submenu]'),
+        );
+        const visibilityList = {};
+        entries.forEach((j) => {
+          visibilityList[String(j.target.toString())] = j.isIntersecting;
+        });
+        const isHeaderSubMenuButtonShow = toggleVisibilityInItems(
+          visibilityList,
+          dotsHeaderSubMenuItems,
+          'hidden',
+        );
+        toggleVisibilityInItems(visibilityList, headerSubMenuItems, 'invisible');
+        if (headerSubMenuButtonElement) {
+          isHeaderSubMenuButtonShow
+            ? headerSubMenuButtonElement.classList.remove('hidden')
+            : headerSubMenuButtonElement.classList.add('hidden');
+        }
+      },
+      { root: window.document, threshold: 1.0 },
+    );
+
+// TODO: add types
+const toggleVisibilityInItems = (visibilityList, items, className) => {
+  const isReversed = className !== 'hidden';
+  return items.some((item) => {
+    const key = item.toString();
+    const option = isReversed ? !visibilityList[key] : visibilityList[key];
+    key in visibilityList ? item.classList.toggle(className, option) : null;
+    return isReversed ? item.classList.contains('hidden') : !item.classList.contains('hidden');
+  });
+};

package/src/components/Header/HeaderTop.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BgColorVersion } from '../../model/BgColorVersion';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 import { Logo } from '../../ui-kit/Logo/Logo';
 
 export interface HeaderTopProps {
@@ -16,8 +16,8 @@ export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
         onClick={onClick}
         aria-label="Открыть меню"
       >
-        <Icon
-          name={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
+        <Img
+          image={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
           width="24"
           height="24"
           asSVG

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

@@ -1,7 +1,9 @@
 {
   "title": "Список документов",
   "subtitle": "Описание",
-  "icon": "DocIcon",
+  "icon": {
+    "icon": "DocIcon"
+  },
   "documents": [
     {
       "text": "Документ №1",

package/src/components/LinkDocs/LinkDocs.fixture.tsx

@@ -24,13 +24,18 @@ export default {
         className="col-span-12"
         context={context}
         {...linkDocsContentExample}
-        icon="GlassIcon"
+        icon={{ icon: 'GlassIcon' }}
       />
     </div>
   ),
   'no icon': (
     <div className="container grid grid-cols-12">
-      <LinkDocs className="col-span-12" context={context} {...linkDocsContentExample} icon="" />
+      <LinkDocs
+        className="col-span-12"
+        context={context}
+        {...linkDocsContentExample}
+        icon={{ icon: '' }}
+      />
     </div>
   ),
 };

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -13,7 +13,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     context,
     title,
     subtitle,
-    icon = 'DocIconMonoColor',
+    icon = { icon: 'DocIconMonoColor' },
     documents,
     orientation = 'vertical',
     hasBorder = true,

package/src/components/LinkDocs/LinkDocs.tsx

@@ -30,7 +30,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     subtitle,
     align,
     documents,
-    icon = 'DocIcon',
+    icon = { icon: 'DocIcon' },
     columnsMode = 'double',
     anchor = null,
   }) => {

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,7 +1,7 @@
 import type { LinkProps } from '../../model/LinkProps';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { AlignType } from '../BaseTile/BaseTileProps';
 import type { ListOrientation } from '../../model/ListOrientation';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Отображение списка
@@ -29,7 +29,7 @@ export interface LinkDocsContent {
   /** @title Описание */
   subtitle?: string;
   /** @title Название иконки */
-  icon?: IconName;
+  icon?: Picture;
   /** @title Список */
   documents?: LinkDocsItem[];
   columnsMode?: LinkColumnsMode;

package/src/components/LinkDocs/LinkDocsList.tsx

@@ -1,13 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { LinkDocsListItem } from './LinkDocsListItem';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { LinkColumnsMode, LinkDocsItem } from './LinkDocsContent';
+import type { Picture } from '../../model/Picture';
 
 export interface LinkDocsListProps {
   className?: string;
   documents?: LinkDocsItem[];
   columnsMode?: LinkColumnsMode;
-  icon?: IconName;
+  icon?: Picture;
 }
 
 export const LinkDocsList = JSX<LinkDocsListProps>(

package/src/components/LinkDocs/LinkDocsListItemBase.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { Img } from '../../ui-kit/Img/Img';
 import type { LinkDocsItem } from './LinkDocsContent';
+import type { Picture } from '../../model/Picture';
 
 export interface LinkDocsListItemProps {
   className?: string;
   doc: LinkDocsItem;
-  icon?: IconName;
+  icon?: Picture;
 }
 
 export interface LinkDocsListItemBaseProps extends LinkDocsListItemProps {
@@ -21,7 +21,7 @@ export const LinkDocsListItemBase = JSX<LinkDocsListItemBaseProps>(
     return (
       <a className={className} role="link" {...linkProps}>
         {icon ? (
-          <Icon className={iconClassName} name={icon} width="24px" height="24px" asSVG />
+          <Img className={iconClassName} image={icon} width="24px" height="24px" asSVG />
         ) : null}
         {text ? (
           <span className={textClassName}>

package/src/components/LinkDocs/LinkDocsVerticalList.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { IconName } from '../../icons/IconName';
 import type { LinkDocsItem } from './LinkDocsContent';
+import type { Picture } from '../../model/Picture';
 import { LinkDocsListItem } from './LinkDocsListItem';
 
 export interface LinkDocsVerticalListProps {
   hasBorder?: boolean;
   documents?: LinkDocsItem[];
-  icon?: IconName;
+  icon?: Picture;
 }
 
 export const LinkDocsVerticalList = JSX<LinkDocsVerticalListProps>(

package/src/components/MobileAppTile/MobileAppTile.example.json

@@ -7,13 +7,17 @@
     {
       "aboveText": "Загрузите в",
       "text": "App Store",
-      "icon": "AppleIcon",
+      "icon": {
+        "icon": "AppleIcon"
+      },
       "version": "secondary"
     },
     {
       "aboveText": "Доступно в",
       "text": "Google Play",
-      "icon": "PlayMarketIcon",
+      "icon": {
+        "icon": "PlayMarketIcon"
+      },
       "version": "secondary"
     }
   ],

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -16,16 +16,16 @@ export default {
           {
             aboveText: 'Загрузите в',
             text: 'App Store',
-            icon: 'AppleIcon',
-            href: '#',
+            icon: { icon: 'AppleIcon' },
+            href: 'apps.apple.com',
             asSVG: true,
             version: 'secondary',
           },
           {
             aboveText: 'Доступно в',
             text: 'Google Play',
-            icon: 'PlayMarketIcon',
-            href: '#',
+            icon: { icon: 'PlayMarketIcon' },
+            href: 'play.google.com',
             asSVG: true,
             version: 'secondary',
           },

package/src/components/PictureText/PictureText.example.json

@@ -12,11 +12,15 @@
   "benefits": [
     {
       "label": "Преимущество №1",
-      "icon": "DocumentTextIcon"
+      "icon": {
+        "icon": "DocumentTextIcon"
+      }
     },
     {
       "label": "Преимущество №2",
-      "icon": "DocumentTextIcon"
+      "icon": {
+        "icon": "DocumentTextIcon"
+      }
     }
   ]
 }

package/src/components/PictureText/PictureText.fixture.tsx

@@ -20,12 +20,12 @@ export const PICTURE_TEXT: PictureTextContent = {
     {
       label: 'Кредит по одному документу',
       description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
-      icon: 'DocumentTextIcon',
+      icon: { icon: 'DocumentTextIcon' },
     },
     {
       label: 'Кредит на общих условиях',
       description: 'До 5 млн ₽ на общих условиях получения кредита',
-      icon: 'DocumentTextIcon',
+      icon: { icon: 'DocumentTextIcon' },
     },
   ],
   image,

package/src/components/PictureText/PictureText.tsx

@@ -4,7 +4,6 @@ import type { PictureTextContent } from './PictureTextContent';
 
 import { BlockVersion } from '../../model/BlockVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
@@ -47,15 +46,15 @@ export const PictureText = JSX<PictureTextProps>(
 function renderBenefit(benefit: Benefit, i: number, version: string) {
   return (
     <div key={String(i)} className="flex flex-row mb-8">
-      {benefit.icon && (
-        <Icon
+      {benefit.icon ? (
+        <Img
           className="w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]"
-          name={benefit.icon}
+          image={benefit.icon}
           width="48"
           height="48"
           asSVG
         />
-      )}
+      ) : null}
       <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
         {benefit.label && (
           <div

package/src/components/ProductBlock/ProductBlock.example.json

@@ -8,7 +8,11 @@
       "height": 234
     }
   },
-  "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+  "items": [
+    "Элемент списка 1",
+    "Элемент списка 2",
+    "Элемент списка 3"
+  ],
   "isDotted": true,
   "buttons": [
     {
@@ -20,11 +24,15 @@
   "benefits": [
     {
       "label": "Преимущество №1",
-      "icon": "ClockIcon"
+      "icon": {
+        "icon": "ClockIcon"
+      }
     },
     {
       "label": "Преимущество №2",
-      "icon": "SignDocsIcon"
+      "icon": {
+        "icon": "SignDocsIcon"
+      }
     }
   ]
 }

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

@@ -29,17 +29,17 @@ const benefits: Benefit[] = [
   {
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
-    icon: 'EmptyWalletIcon',
+    icon: { icon: 'EmptyWalletIcon' },
   },
   {
     label: 'От 16,9%',
     description: 'Ставка по кредиту',
-    icon: 'PercentageSquareIcon',
+    icon: { icon: 'PercentageSquareIcon' },
   },
   {
     label: 'До 5 лет',
     description: 'Срок кредитования',
-    icon: 'CalendarIcon',
+    icon: { icon: 'CalendarIcon' },
   },
 ];
 

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

@@ -2,7 +2,7 @@ import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { ProductBlock } from './ProductBlock';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonWithIconProps, ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { ProductBlockContent } from './ProductBlockContent';
 
 const image: Picture = {
@@ -15,35 +15,21 @@ const image: Picture = {
   },
 };
 
-const breadcrumbs = [
-  {
-    text: 'Главная',
-    href: '/',
-  },
-  {
-    text: 'Кредитные карты',
-    href: '/credit',
-  },
-  {
-    text: 'Кредитная карта Своя Union Pay',
-  },
-];
-
-const benefits = [
+const benefits: Benefit[] = [
   {
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
-    icon: 'EmptyWalletIcon',
+    icon: { icon: 'EmptyWalletIcon' },
   },
   {
     label: 'От 16,9%',
     description: 'Ставка по кредиту',
-    icon: 'PercentageSquareIcon',
+    icon: { icon: 'PercentageSquareIcon' },
   },
   {
     label: 'До 5 лет',
     description: 'Срок кредитования',
-    icon: 'CalendarIcon',
+    icon: { icon: 'CalendarIcon' },
   },
 ];
 
@@ -62,16 +48,21 @@ const buttons: ButtonWithIconProps[] = [
   },
 ];
 
+const items = [
+  'Совершайте любые личные покупки',
+  'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
+  'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
+];
+
+const backwardButton: ButtonProps = {
+  href: 'https://rshb.ru',
+  text: 'Все кредитные карты',
+};
+
 export const PRODUCT_BLOCK: ProductBlockContent = {
   title: 'Оплата проходит в 180 странах мира',
   headingType: 'h2',
-  description:
-    'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
-  items: [
-    'Совершайте любые личные покупки',
-    'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
-    'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
-  ],
+  items,
   buttons: buttons,
 };
 
@@ -84,8 +75,7 @@ export default {
         title={'Потребительский кредит наличными'}
         headingType="h2"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        breadcrumbs={breadcrumbs}
-        benefits={benefits as Benefit[]}
+        benefits={benefits}
         buttons={buttons}
         image={image}
       />
@@ -100,31 +90,42 @@ export default {
         headingType="h2"
         version={'secondary'}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        breadcrumbs={breadcrumbs}
-        benefits={benefits as Benefit[]}
-        buttons={buttons as ButtonWithIconProps[]}
+        benefits={benefits}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+        items={items}
         image={image}
       />
     </div>
   ),
   'with items': (
     <div className="container grid grid-cols-12">
-      <ProductBlock
-        className="col-span-12"
-        context={context}
-        breadcrumbs={breadcrumbs}
-        {...PRODUCT_BLOCK}
-        image={image}
-      />
+      <ProductBlock className="col-span-12" context={context} {...PRODUCT_BLOCK} image={image} />
     </div>
   ),
   'without image': (
+    <div className="container grid grid-cols-12">
+      <ProductBlock className="col-span-12" context={context} {...PRODUCT_BLOCK} />
+    </div>
+  ),
+  'default-h1': (
     <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
-        breadcrumbs={breadcrumbs}
-        {...PRODUCT_BLOCK}
+        title={'Потребительский кредит наличными'}
+        headingType="h1"
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefits={benefits}
+        buttons={buttons}
+        image={image}
+        backwardButton={backwardButton}
       />
     </div>
   ),