@redneckz/wildless-cms-uni-blocks 0.2.112 → 0.2.113

package/src/components/Footer/TextInformation.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
-import { FooterLink } from './FooterLink';
+import type { FooterLink } from './FooterLink';
 
 export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
   const router = context.useRouter();

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

@@ -0,0 +1,209 @@
+import { context } from '../../setup-fixture';
+import { Header } from './Header.mobile';
+
+const DEFAULT_ORIGIN = 'https://rshb.ru/';
+
+export default {
+  default: (
+    <Header
+      context={context}
+      defaultLocation="Москва"
+      topItems={[
+        {
+          href: DEFAULT_ORIGIN,
+          text: 'Частным клиентам',
+          target: '_blank',
+          items: [
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Кредитные карты',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Дебетовые карты',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Кредиты',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Ипотека',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Вклады и сбережения',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Инвестиции',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Страхование',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Премиальным клиентам',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Биометрическая регистрация',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Перевод денег',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Обмен денег',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Акции',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Тарифы',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Архивная информация',
+            },
+          ],
+        },
+        {
+          href: DEFAULT_ORIGIN,
+          text: 'Бизнес клиентам',
+          target: '_blank',
+          items: [
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'РКО',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Кредиты',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Депозиты',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Эквайринг',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Банковские карты',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'ВЭД',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Инвестиции',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Обмен валюты',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Страхование',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Партнёрские программы',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Онлайн-сервисы',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Акции',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Тарифы',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Архивная информация',
+            },
+          ],
+        },
+        {
+          href: DEFAULT_ORIGIN,
+          text: 'О банке',
+          target: '_blank',
+          items: [
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'О банке',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Новости',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Офисы и отделения',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Карьера в банке',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Пресс-центр',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Кредитным организациям',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Закупки',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Непрофильные/Профильные нецелевые активы',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Инсайдерам',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Противодействие коррупции',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Меры безопасности',
+            },
+            {
+              href: DEFAULT_ORIGIN,
+              text: 'Залоговое имущество',
+            },
+          ],
+        },
+      ]}
+      burgerSubMenu={[
+        {
+          text: 'Офисы',
+          href: '#',
+          icon: 'BankIcon',
+        },
+        {
+          text: 'Банкоматы',
+          href: '#',
+          icon: 'AtmIcon',
+        },
+      ]}
+    />
+  ),
+  transparent: <Header context={context} defaultLocation="Москва" bgColor="transparent" />,
+};

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

@@ -0,0 +1,73 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
+import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
+import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
+import { useSitemap } from '../../services/sitemap/useSitemap';
+import type { UniBlockProps } from '../../types';
+import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
+import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
+import { getAccordionItems } from '../../utils/getAccordionItems';
+import { Accordion } from '../Accordion/Accordion';
+import { HeaderBurger } from './HeaderBurger';
+import type { HeaderContent } from './HeaderContent';
+import { HeaderTop } from './HeaderTop';
+
+export interface HeaderProps extends HeaderContent, UniBlockProps {}
+
+export const Header = JSX<HeaderProps>(
+  ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, burgerSubMenu }) => {
+    const router = context.useRouter();
+    const sitemap = useSitemap(context.useAsyncData);
+    const { handlerDecorator } = context;
+
+    const mergedItems = mergeTopItems(sitemap.topItems, topItems);
+    const activeTopItem = mergedItems.find(isTopItemActive(router));
+    const subItems = activeTopItem?.items;
+    const activeSubItem = findActiveSubItem(router)(subItems);
+
+    const [burgerMenuShow, setBurgerMenuShow] = context.useState(false);
+
+    const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
+
+    return (
+      <header className={`${bgColor} ${className}`}>
+        <div className="container px-4 py-0">
+          <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
+          <nav className="flex items-center m-0 p-0 overflow-x-scroll overflow-y-hidden w-full h-[50px]">
+            <div className="flex">
+              {subItems?.map((_, i) =>
+                renderSubItem(
+                  {
+                    ...useLink({ router, handlerDecorator }, _),
+                    active: _ === activeSubItem,
+                    bgColor,
+                  },
+                  i,
+                ),
+              )}
+            </div>
+          </nav>
+        </div>
+        {burgerMenuShow ? (
+          <HeaderBurger
+            context={context}
+            onClick={toggleBurgerMenu}
+            burgerSubMenu={burgerSubMenu}
+            defaultLocation={defaultLocation}
+          >
+            <Accordion
+              context={context}
+              accordionItems={getAccordionItems(topItems)}
+              className="p-0 pt-0 pb-0 mb-4"
+            />
+          </HeaderBurger>
+        ) : null}
+      </header>
+    );
+  },
+);
+
+const renderSubItem = (item: TopItemProps, i: number) => (
+  <HeaderItem key={String(i)} className="mr-8 whitespace-nowrap text-sm" {...item} />
+);

package/src/components/Header/HeaderBurger.tsx

@@ -0,0 +1,45 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from '../../ui-kit/Button/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import type { SubMenuItem } from './HeaderContent';
+
+export interface HeaderBurgerProps {
+  context: ContentPageContext;
+  onClick: () => void;
+  burgerSubMenu?: SubMenuItem[];
+  defaultLocation?: string;
+  children?: any;
+}
+
+export const HeaderBurger = JSX<HeaderBurgerProps>(
+  ({ context, burgerSubMenu, onClick, defaultLocation = '', children }) => {
+    const [city, getCity] = context.useGeolocation(defaultLocation);
+
+    return (
+      <div className="absolute top-0 left-0 w-full h-full bg-white p-4">
+        <button className="absolute top-4 right-4" onClick={onClick}>
+          <Icon name="CloseIcon" width="24" height="24" asSVG />
+        </button>
+        <Button onClick={getCity} className="flex items-center text-sm text-secondary-text mb-4">
+          <Icon name="GeolocationIcon" width="24" height="24" className="box-border mr-2" asSVG />
+          {city}
+        </Button>
+        {children}
+        <div className="mb-7">{burgerSubMenu?.map(renderBurgerSubMenuItem)}</div>
+        <SearchBar context={context} className="grow" />
+      </div>
+    );
+  },
+);
+
+const renderBurgerSubMenuItem = (menu: SubMenuItem, i: number) => {
+  const { icon, href, text } = menu;
+  return (
+    <Button key={`headerSubMenu-${i}`} href={href} className="flex text-sm mb-4">
+      {icon ? <Icon className="pr-1" name={icon} width="24" height="24" asSVG /> : null}
+      <span className="pl-0.5 font-medium">{text}</span>
+    </Button>
+  );
+};

package/src/components/Header/HeaderContent.ts

@@ -1,6 +1,14 @@
-import { BgColorVersion } from '../../model/BgColorVersion';
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapProps } from '../../services/sitemap/SitemapProps';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
 
+/**
+ * @title Пункт подменю
+ */
+export interface SubMenuItem extends LinkProps {
+  icon?: IconName;
+}
 /**
  * @title Шапка
  * @required ["defaultLocation", "topItems"]
@@ -17,4 +25,6 @@ export interface HeaderContent extends SitemapProps {
    * @default white
    */
   bgColor?: BgColorVersion;
+  /** @title Подменю */
+  burgerSubMenu?: SubMenuItem[]; // TODO: для мобильной версии
 }

package/src/components/Header/HeaderTop.tsx

@@ -0,0 +1,28 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Logo } from '../../ui-kit/Logo/Logo';
+
+export interface HeaderTopProps {
+  onClick: () => void;
+  bgColor?: BgColorVersion;
+}
+
+export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
+  <div className="flex items-center justify-between border-0 border-b border-main-divider h-[50px]">
+    <div className="flex items-center">
+      <button className="pr-4" onClick={onClick}>
+        <Icon
+          name={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
+          width="24"
+          height="24"
+          asSVG
+        />
+      </button>
+      <Logo bgColor={bgColor} />
+    </div>
+    <button className={`${bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'} text-sm`}>
+      Войти
+    </button>
+  </div>
+));

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

@@ -0,0 +1,67 @@
+import { context } from '../../setup-fixture';
+
+import { Picture } from '../../model/Picture';
+import { Headline } from './Headline';
+import { HeadlineContent } from './HeadlineContent';
+
+export const HEADLINE: HeadlineContent = {
+  title: 'Своя кредитная карта',
+  description: 'Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.',
+  align: 'center',
+  bgColor: 'transparent',
+};
+
+const image: Picture = {
+  src: 'globe-1.png',
+  format: 'webp',
+  size: {
+    width: 180,
+    height: 180,
+  },
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Headline
+        className="col-span-12"
+        context={context}
+        title="Копите в нескольких валютах"
+        description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
+        image={image}
+      />
+    </div>
+  ),
+  'title-img': (
+    <div className="container grid grid-cols-12">
+      <Headline
+        className="col-span-12"
+        context={context}
+        title="Копите в нескольких валютах"
+        image={image}
+      />
+    </div>
+  ),
+  'desc-img': (
+    <div className="container grid grid-cols-12">
+      <Headline
+        className="col-span-12"
+        context={context}
+        description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
+        image={image}
+      />
+    </div>
+  ),
+  white: (
+    <div className="container grid grid-cols-12">
+      <Headline
+        className="col-span-12"
+        context={context}
+        title="Копите в нескольких валютах"
+        description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
+        bgColor="bg-white"
+        image={image}
+      />
+    </div>
+  ),
+};

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

@@ -1,7 +1,9 @@
 import { context } from '../../setup-fixture';
 
 import { Headline } from './Headline';
+import { Headline as MobileHeadline } from './Headline';
 import { HeadlineContent } from './HeadlineContent';
+import { Picture } from '../../model/Picture';
 
 export const HEADLINE: HeadlineContent = {
   title: 'Своя кредитная карта',
@@ -10,6 +12,15 @@ export const HEADLINE: HeadlineContent = {
   bgColor: 'transparent',
 };
 
+const image: Picture = {
+  src: 'globe-1.png',
+  format: 'webp',
+  size: {
+    width: 180,
+    height: 180,
+  },
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -38,4 +49,47 @@ export default {
       />
     </div>
   ),
+  mobile: (
+    <div className="container grid grid-cols-12">
+      <MobileHeadline
+        className="col-span-12"
+        context={context}
+        title="Копите в нескольких валютах"
+        description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
+        image={image}
+      />
+    </div>
+  ),
+  'mobile title-img': (
+    <div className="container grid grid-cols-12">
+      <MobileHeadline
+        className="col-span-12"
+        context={context}
+        title="Копите в нескольких валютах"
+        image={image}
+      />
+    </div>
+  ),
+  'mobile desc-img': (
+    <div className="container grid grid-cols-12">
+      <MobileHeadline
+        className="col-span-12"
+        context={context}
+        description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
+        image={image}
+      />
+    </div>
+  ),
+  'mobile white': (
+    <div className="container grid grid-cols-12">
+      <MobileHeadline
+        className="col-span-12"
+        context={context}
+        title="Копите в нескольких валютах"
+        description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
+        bgColor="bg-white"
+        image={image}
+      />
+    </div>
+  ),
 };

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

@@ -0,0 +1,30 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+import type { UniBlockProps } from '../../types';
+import { Img } from '../../ui-kit/Img';
+import { Title } from '../../ui-kit/Title/Title';
+import type { HeadlineContent } from './HeadlineContent';
+
+export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
+
+export const Headline = JSX<HeadlineProps>(
+  ({ bgColor = 'transparent', className = '', title, description, image }) => {
+    return (
+      <section className={`px-4 py-6 ${bgColor} ${className}`}>
+        {title && (
+          <Title size="L" className="text-primary-text mt-0 font-medium">
+            {title}
+          </Title>
+        )}
+        {description && (
+          <p className={`font-normal text-m-md ${title ? 'mt-2.5' : ''}`}>{description}</p>
+        )}
+        {image?.src && (
+          <div className="mt-5 mx-auto flex justify-center">
+            <Img image={image} />
+          </div>
+        )}
+      </section>
+    );
+  },
+);

package/src/components/Headline/Headline.tsx

@@ -2,8 +2,8 @@ import { JSX } from '@redneckz/uni-jsx';
 
 import type { UniBlockProps } from '../../types';
 import { Title } from '../../ui-kit/Title/Title';
-import type { HeadlineContent } from './HeadlineContent';
 import { AlignType } from '../BaseTile/BaseTileProps';
+import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
@@ -14,10 +14,10 @@ const alignText: Record<AlignType, string> = {
 };
 
 export const Headline = JSX<HeadlineProps>(
-  ({ bgColor = 'transparent', align = 'left', className, title, description }) => {
+  ({ bgColor = 'transparent', align = 'left', className = '', title, description }) => {
     const textClasses = alignText[align];
     return (
-      <section className={`p-[50px] ${bgColor} ${className || ''} `}>
+      <section className={`p-[50px] ${bgColor} ${className}`}>
         {title && (
           <Title size="L" className={`text-primary-text mt-0 font-medium ${textClasses}`}>
             {title}

package/src/components/Headline/HeadlineContent.ts

@@ -5,6 +5,7 @@ import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
  * @title Заголовок
  */
 export interface HeadlineContent
-  extends Pick<BaseTileCommonProps, 'title' | 'titleSize' | 'description' | 'align'> {
+  extends Pick<BaseTileCommonProps, 'title' | 'titleSize' | 'description' | 'align' | 'image'> {
+  //TODO: image for mobile
   bgColor?: BgColorVersion;
 }

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

@@ -1,7 +1,6 @@
 import { context } from '../../setup-fixture';
 import { LinkDocs } from './LinkDocs';
 import type { LinkDocsContent } from './LinkDocsContent';
-import { Accordion } from '../Accordion/Accordion';
 
 export const LINK_DOCS: LinkDocsContent = {
   title: 'Дополнительные документы',

package/src/components/LinkDocs/LinkDocs.tsx

@@ -24,7 +24,7 @@ const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
 export const LinkDocs = JSX<LinkDocsProps>(
-  ({ className, title, align, documents, icon, columnsMode = 'double' }) => {
+  ({ className = '', title, align, documents, icon, columnsMode = 'single' }) => {
     const containerClasses = linkColumnsModeStyleMap[columnsMode];
 
     return (

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

@@ -16,5 +16,7 @@
       "icon": "PlayMarketIcon",
       "version": "secondary"
     }
-  ]
+  ],
+  "title": "Мобильное приложение",
+  "description": "Загрузить для IOS и Android"
 }

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

@@ -0,0 +1,13 @@
+import { context } from '../../setup-fixture';
+
+import { MobileAppTile as MobileAppTileMobile } from './MobileAppTile.mobile';
+
+export default (
+  <div className="container grid grid-cols-12">
+    <MobileAppTileMobile
+      context={context}
+      title="Мобильное приложение!"
+      description="Загрузить для IOS и Android"
+    />
+  </div>
+);