@redneckz/wildless-cms-uni-blocks 0.3.34 → 0.3.37

package/src/components/Header/HeaderSubMenuObserver.ts

@@ -0,0 +1,46 @@
+import { isSSR } from '../../utils/isSSR';
+
+const isClient = !isSSR();
+
+export const headerSubMenuObserver = isClient
+  ? 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 },
+    )
+  : undefined;
+
+// 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/LinkDocs/LinkDocsList.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { LinkDocsListItem } from './LinkDocsListItem';
-import type { LinkColumnsMode, LinkDocsItem } from './LinkDocsContent';
 import type { Picture } from '../../model/Picture';
+import type { LinkColumnsMode, LinkDocsItem } from './LinkDocsContent';
+import { LinkDocsListItem } from './LinkDocsListItem';
 
 export interface LinkDocsListProps {
   className?: string;
@@ -21,7 +21,7 @@ export const LinkDocsList = JSX<LinkDocsListProps>(
             role="listitem"
           >
             <LinkDocsListItem
-              className="group flex text-sm align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main"
+              className="group flex align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main"
               doc={doc}
               icon={icon}
             />

package/src/components/LinkDocs/LinkDocsListItem.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { LinkDocsListItemBase } from './LinkDocsListItemBase';
 import type { LinkDocsListItemProps } from './LinkDocsListItemBase';
+import { LinkDocsListItemBase } from './LinkDocsListItemBase';
 
 export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
   <LinkDocsListItemBase
     className={`flex h-full box-border ${className}`}
-    iconClassName="mr-2.5 min-w-6 min-h-6 text-primary-text"
-    textClassName="self-center"
+    iconClassName="mr-3.5 min-w-6 min-h-6 text-primary-text"
+    textClassName="self-center font-light"
     suffixClassName="text-secondary-text group-hover:text-primary-main"
     doc={doc}
     icon={icon}

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

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

package/src/components/NavigatorTabs/NavigatorTabItem.tsx

@@ -8,22 +8,24 @@ export interface NavigatorTabItemProps extends NavigatorTab {
 }
 
 const TEXT_CLASSES = 'font-sans font-normal text-sm';
-const LINK_CLASSES = 'flex-1 flex items-center justify-center';
+const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
 
 export const NavigatorTabItem = JSX<NavigatorTabItemProps>(
-  ({ className = '', label, active, children, onClick, anchor }) => (
-    <a className={getLinkClasses(className, active)} href={`#${anchor}`} onClick={onClick}>
+  ({ className = '', label, active, children, onClick, href, target = '_self' }) => (
+    <a className={getLinkClasses(className, active)} target={target} href={href} onClick={onClick}>
       <span className={getTextClasses(active)}>{label || children}</span>
     </a>
   ),
 );
 
 const getLinkClasses = (className: string, active?: boolean) => {
-  const classes = active ? 'bg-primary-main' : 'bg-white';
+  const classes = active ? 'bg-primary-main' : 'group bg-white';
+
   return `${classes} ${LINK_CLASSES} ${className}`;
 };
 
 const getTextClasses = (active?: boolean) => {
-  const classes = active ? 'text-white' : 'text-secondary-text hover:text-primary-main';
+  const classes = active ? 'text-white' : 'text-secondary-text group-hover:text-primary-main ';
+
   return `${classes} ${TEXT_CLASSES}`;
 };

package/src/components/NavigatorTabs/NavigatorTabs.example.json

@@ -1,7 +1,7 @@
 {
   "navigatorTabs": [
-    { "label": "Tab1", "anchor": "tab1" },
-    { "label": "Tab2", "anchor": "tab2" },
-    { "label": "Tab3", "anchor": "tab3" }
+    { "label": "Tab1", "href": "#tab1" },
+    { "label": "Tab2", "href": "#tab2" },
+    { "label": "Link", "href": "https://rshb.ru", "target": "_blank" }
   ]
 }

package/src/components/NavigatorTabs/NavigatorTabs.tsx

@@ -1,36 +1,44 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { getHash } from '../../utils/url';
+import { getHash, isURL } from '../../utils/url';
 import type { Router } from '../ContentPage/ContentPageContext';
 import { NavigatorTabItem } from './NavigatorTabItem';
 import type { NavigatorTab, NavigatorTabsContent } from './NavigatorTabsContent';
 
-export interface TabsBlockProps extends NavigatorTabsContent, UniBlockProps {}
+export interface TabsBlockProps extends UniBlockProps, NavigatorTabsContent {}
 
 export const NavigatorTabs = JSX<TabsBlockProps>(
   ({ className = '', navigatorTabs, context, anchor = null }) => {
     const router = context.useRouter();
-    const hash = getHash(router.href);
+    const href = globalThis.location.href;
+
     return (
       <section
         className={`sticky top-0 z-20 box-border flex gap-x-1 h-12 ${className}`}
         id={anchor}
       >
-        {navigatorTabs ? navigatorTabs.map(renderTab(hash, router)) : null}
+        {navigatorTabs ? navigatorTabs.map(renderTab(href, router)) : null}
       </section>
     );
   },
 );
 
-const renderTab = (hash?: string, router?: Router) => (tab: NavigatorTab, i: number) => {
-  const anchorHash = `#${tab.anchor}`;
-  const active = hash ? anchorHash === hash : i === 0;
+const renderTab = (href?: string, router?: Router) => (tab: NavigatorTab, i: number) => {
+  const hash = getHash(href);
+  const active = hash ? tab.href === hash : i === 0;
+
   return (
     <NavigatorTabItem
-      key={tab.anchor}
+      key={tab.href}
       active={active}
-      onClick={() => router?.replace(anchorHash)}
+      onClick={() => handleRoute(router, tab.href)}
       {...tab}
     />
   );
 };
+
+const handleRoute = (router?: Router, href?: string) => {
+  if (isURL(href)) return; // if href if full URL - move to HTML href action, do not touch router
+
+  router?.replace(href || '');
+};

package/src/components/NavigatorTabs/NavigatorTabsContent.ts

@@ -5,7 +5,9 @@ export interface NavigatorTab {
   /** @title Название */
   label?: string;
   /** @title Якорь */
-  anchor?: string;
+  href?: string;
+  /** @title Таргет (target) */
+  target?: string;
 }
 
 /**

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,20 +15,6 @@ const image: Picture = {
   },
 };
 
-const breadcrumbs = [
-  {
-    text: 'Главная',
-    href: '/',
-  },
-  {
-    text: 'Кредитные карты',
-    href: '/credit',
-  },
-  {
-    text: 'Кредитная карта Своя Union Pay',
-  },
-];
-
 const benefits: Benefit[] = [
   {
     label: 'До 5 млн ₽',
@@ -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,7 +75,6 @@ export default {
         title={'Потребительский кредит наличными'}
         headingType="h2"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        breadcrumbs={breadcrumbs}
         benefits={benefits}
         buttons={buttons}
         image={image}
@@ -100,31 +90,42 @@ export default {
         headingType="h2"
         version={'secondary'}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        breadcrumbs={breadcrumbs}
         benefits={benefits}
-        buttons={buttons}
+        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>
   ),

package/src/components/ProductBlock/ProductBlock.tsx

@@ -6,6 +6,7 @@ import { Breadcrumb } from '../../ui-kit/Breadcrumb';
 import { joinList } from '../../utils/joinList';
 import type { ProductBlockContent } from './ProductBlockContent';
 import { ProductBlockInner } from './ProductBlockInner';
+import { renderBackwardButton } from './renderBackwardButton';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
@@ -36,6 +37,7 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
       className={`font-sans pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap[version]} ${className}`}
       id={anchor}
     >
+      {renderBackwardButton('Все дебетовые карты', version, 'mb-10')}
       {breadcrumbs?.length ? (
         <div className="text-xs mb-6">
           {joinList(<span className={`mx-2 ${breadcrumbsStyleMap[version]}`}>/</span>)(

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,6 +1,6 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonContent, ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -32,6 +32,8 @@ export type ProductBlockInnerContent = HeadingContent &
      * @hidden
      */
     textBlockClassName?: string;
+    /** @title Текст кнопки возврата */
+    backwardButton?: ButtonProps;
   };
 
 /**

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -4,6 +4,7 @@ import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Description } from '../../ui-kit/Description/Description';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTile } from '../BaseTile/BaseTile';
 import type { ProductBlockInnerContent } from './ProductBlockContent';
 import { renderBenefit } from './renderBenefit';
@@ -31,12 +32,12 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
         <div className={`flex flex-col ${textBlockClassName}`}>
           <BaseTile
             context={context}
-            title={getTitle(title, headingType, textColor)}
+            title={getTitle(title, headingType)}
             buttons={getButtons(context, buttons)}
           >
             {description && (
               <Description
-                className={`mt-[18px] max-w-[600px] text-title-new-sm font-light ${textColor}`}
+                className={`mt-4 max-w-[600px] text-md font-light ${textColor}`}
                 description={description}
               />
             )}
@@ -47,9 +48,9 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             ) : null}
             {items?.length ? (
               <List
-                className="mt-5 text-title-new-sm font-light"
+                className="mt-5 text-title-2xs font-light"
                 items={items}
-                itemClassName="mb-[10px]"
+                itemClassName="mb-[7px]"
                 version={version}
                 isDotted={isDotted}
               />
@@ -62,15 +63,20 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   },
 );
 
-const getTitle = (title, headingType, textColor) => {
-  const Tag = headingType;
+const getTitle = (title, headingType) => {
   return (
-    title && <Tag className={`font-sans font-medium m-0 text-title-xl ${textColor}`}>{title}</Tag>
+    title && (
+      <Heading
+        headingType={headingType}
+        title={title}
+        className="whitespace-pre-wrap max-w-[600px]"
+      />
+    )
   );
 };
 
 const getButtons = (context, buttons) => {
   return buttons?.length ? (
-    <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+    <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-4" />
   ) : null;
 };

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -0,0 +1,35 @@
+import { Img } from '../../ui-kit/Img/Img';
+import { Button } from '../../ui-kit/Button/Button';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+const backwardBgStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-primary-main',
+  secondary: 'bg-white',
+};
+
+const backwardIconStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-white',
+  secondary: 'text-primary-text',
+};
+
+export function renderBackwardButton(text: string, version: BlockVersion, className: string) {
+  return (
+    <div className={`flex items-center ${className}`}>
+      <Button
+        rounded
+        className={`w-12 h-12 min-h-12 max-h-12 flex items-center justify-center mr-3 ${backwardBgStyleMap[version]}`}
+        ariaLabel={text}
+      >
+        <Img
+          className={`w-4 h-4 min-w-4 min-h-4 rounded-full box-border ${backwardIconStyleMap[version]}`}
+          image={{ icon: 'ArrowLeftIcon' }}
+          color="none"
+          width="24"
+          height="24"
+          asSVG
+        />
+      </Button>
+      {text ? <span className="text-m-md">{text}</span> : null}
+    </div>
+  );
+}

package/src/components/ProductBlock/renderBenefit.tsx

@@ -3,7 +3,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 const benefitIconBgStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-main',
+  primary: 'bg-primary-main',
   secondary: 'bg-white/30',
 };
 const benefitTitleStyleMap: Record<BlockVersion, string> = {
@@ -20,19 +20,19 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
     <div key={String(i)} className="flex gap-4 items-center">
       {benefit.icon ? (
         <Img
-          className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${benefitIconBgStyleMap[version]}`}
+          className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border text-white ${benefitIconBgStyleMap[version]}`}
           image={benefit.icon}
           width="24"
           height="24"
           asSVG
         />
       ) : null}
-      <div className="flex gap-1 flex-col h-full max-w-[149px]">
+      <div className="flex gap-0.5 flex-col h-full max-w-[149px]">
         <div className={`font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`}>
           {benefit.label}
         </div>
         {benefit.description && (
-          <div className={`font-normal text-sm ${benefitDescStyleMap[version]}`}>
+          <div className={`font-normal text-m-md ${benefitDescStyleMap[version]}`}>
             {benefit.description}
           </div>
         )}

package/src/components/Recommendation/RecommendationCard.tsx

@@ -6,6 +6,7 @@ import { BaseTile } from '../BaseTile/BaseTile';
 import { SocialMedia } from '../Footer/SocialMedia';
 import type { UniBlockProps } from '../../types';
 import type { RecommendationCardTypes } from './RecommendationContent';
+import { Heading } from '../../ui-kit/Heading/Heading';
 
 export interface RecommendationCardProps extends RecommendationCardTypes, UniBlockProps {}
 
@@ -21,7 +22,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
           className="flex justify-between"
           title={
             title ? (
-              <h4 className={`font-sans text-title-xs font-normal m-0 mb-3.5`}>{title}</h4>
+              <Heading headingType="h4" as="h3" className="font-normal mb-3.5" title={title} />
             ) : null
           }
           image={image?.src && <Img className="mt-auto ml-7" image={image} />}

package/src/components/Recommendation/RecommendationContent.ts

@@ -17,5 +17,9 @@ export interface RecommendationContent extends HeadingContent {
   /** @title Карточки */
   recommendations?: RecommendationCardTypes[];
   version?: BlockVersion;
+  /**
+   * @title Ссылка
+   * @minItems 3
+   */
   socialMedia?: LinkProps[];
 }

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

@@ -31,6 +31,65 @@ export default {
       />
     </div>
   ),
+  'steps-img': (
+    <div className="container grid grid-cols-12">
+      <StepsBlock
+        className="col-span-12"
+        context={context}
+        title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+        showLines={false}
+        steps={[
+          {
+            label: 'В мобильном приложении или интернет-банке',
+            description: 'Для всех клиентов Россельхозбанка',
+            icon: { icon: 'SignDocsIcon' },
+            button: { text: 'Войти в интернет-банк' },
+          },
+          {
+            label: 'Через Госуслуги',
+            description: 'При наличии данных в Единой биометрической системе',
+            icon: { icon: 'ClockIcon' },
+            button: { text: 'Оформить' },
+          },
+          {
+            label: 'В офисах Россельхозбанка',
+            description: 'Откройте вклад',
+            icon: { icon: 'ComfortableCompIcon' },
+            button: { text: 'Офисы на карте' },
+          },
+        ]}
+      />
+    </div>
+  ),
+  'steps-with-btn': (
+    <div className="container grid grid-cols-12">
+      <StepsBlock
+        className="col-span-12"
+        context={context}
+        title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+        showLines={false}
+        steps={[
+          {
+            label: 'В мобильном приложении или интернет-банке',
+            description: 'Для всех клиентов Россельхозбанка',
+            icon: { icon: 'SignDocsIcon' },
+          },
+          {
+            label: 'Через Госуслуги',
+            description: 'При наличии данных в Единой биометрической системе',
+            icon: { icon: 'ClockIcon' },
+          },
+          {
+            label: 'В офисах Россельхозбанка',
+            description: 'Откройте вклад',
+            icon: { icon: 'ComfortableCompIcon' },
+          },
+        ]}
+        button={{ text: 'Отправить заявку' }}
+      />
+    </div>
+  ),
+
   '4 steps': (
     <div className="container grid grid-cols-12">
       <StepsBlock