@redneckz/wildless-cms-uni-blocks 0.2.109 → 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/Gallery/Gallery.example.json

@@ -53,19 +53,6 @@
       "description": "Описание 4",
       "href": "/credit-cards",
       "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
-    },
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 140,
-          "height": 140
-        }
-      },
-      "title": "Заголовок 5",
-      "description": "Описание 5",
-      "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
     }
   ]
 }

package/src/components/Gallery/Gallery.fixture.tsx

@@ -1,8 +1,8 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import type { ButtonCommonProps } from '../../ui-kit/Button/Button';
-import { Gallery, GalleryProps } from './Gallery';
-import { Gallery as MobileGallery } from './Gallery.mobile';
+import { Gallery } from './Gallery';
+import type { GalleryProps } from './GalleryProps';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -211,9 +211,4 @@ export default {
       <Gallery className="col-span-12" {...onlyTitleProps} />
     </div>
   ),
-  mobile: (
-    <div className="container grid grid-cols-12">
-      <MobileGallery className="col-span-12" {...defaultProps} />
-    </div>
-  ),
 };

package/src/components/Gallery/Gallery.mobile.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { GalleryProps } from './Gallery';
-import type { GalleryCard } from './GalleryContent';
 import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img';
 import { Title } from '../../ui-kit/Title/Title';
+import type { GalleryCard } from './GalleryContent';
+import type { GalleryProps } from './GalleryProps';
 
 export const Gallery = JSX<GalleryProps>(({ title, description, cards = [], className }) => {
   return (

package/src/components/Gallery/Gallery.tsx

@@ -1,8 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { GalleryContent } from './GalleryContent';
 import { GalleryInner } from './GalleryInner';
-import type { UniBlockProps } from '../../types';
-
-export interface GalleryProps extends GalleryContent, UniBlockProps {}
+import type { GalleryProps } from './GalleryProps';
 
 export const Gallery = JSX<GalleryProps>((props) => <GalleryInner {...props} version="normal" />);

package/src/components/Gallery/GalleryCardInner.tsx

@@ -28,7 +28,7 @@ export const GalleryCardInner = JSX<GalleryCard>(
             </section>
           ) : null}
         </div>
-        {button?.href && <Button className="mt-6" {...button} />}
+        {button?.text && <Button className="mt-6" {...button} />}
       </div>
     );
   },

package/src/components/Gallery/GalleryContent.ts

@@ -11,12 +11,9 @@ export interface GalleryCard {
   /** @title Описание */
   description?: string;
   image?: Picture;
-  /** @title Ссылка */
+  /** @title Кнопка */
   button?: BaseTileIconButton;
-  /**
-   * @title Список
-   * @minItems 4
-   */
+  /** @title Список */
   items?: string[];
   version?: BlockVersion;
 }
@@ -29,6 +26,9 @@ export interface GalleryContent {
   title?: string;
   /** @title Описание */
   description?: string;
-  /** @title Карточки */
+  /**
+   * @title Карточки
+   * @minItems 4
+   */
   cards?: GalleryCard[];
 }

package/src/components/Gallery/GalleryProps.ts

@@ -0,0 +1,4 @@
+import type { UniBlockProps } from '../../types';
+import { GalleryContent } from './GalleryContent';
+
+export interface GalleryProps extends GalleryContent, UniBlockProps {}

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>
+    );
+  },
+);