@redneckz/wildless-cms-uni-blocks 0.2.111 → 0.2.114

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

@@ -0,0 +1,285 @@
+import { context } from '../../setup-fixture';
+import { Footer } from './Footer.mobile';
+
+const DEFAULT_ORIGIN = 'https://rshb.ru/';
+
+export default (
+  <div className="container grid grid-cols-12">
+    <Footer
+      className="col-span-12"
+      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: 'Залоговое имущество',
+            },
+          ],
+        },
+      ]}
+      subMenu={[
+        {
+          text: 'Офисы',
+          href: '#',
+          icon: 'BankIcon',
+        },
+        {
+          text: 'Банкоматы',
+          href: '#',
+          icon: 'AtmIcon',
+        },
+      ]}
+      socialMedia={[
+        { href: 'https://t.me' },
+        { href: 'https://vk.com' },
+        { href: 'https://ok.ru' },
+      ]}
+      contacts={[
+        {
+          text: '+7 (495) 787-7-787',
+          description: 'Для звонков из-за границы',
+          type: 'tel',
+        },
+        {
+          text: 'example@example.com',
+          description: 'Для писем',
+          type: 'email',
+        },
+        {
+          text: '7787',
+          description: 'Абонентам МТС, Мегафон, Билайн и Tele2',
+          type: 'tel',
+        },
+      ]}
+      horizontalNavigationTitle="Компании Россельхозбанка"
+      relatedEnterprises={[
+        {
+          text: 'РСХБ Страхование',
+          href: DEFAULT_ORIGIN,
+          target: '_blank',
+        },
+        {
+          text: 'РСХБ Страхование жизни',
+          href: DEFAULT_ORIGIN,
+          target: '_blank',
+        },
+        {
+          text: 'РСХБ Управление активами',
+          href: DEFAULT_ORIGIN,
+          target: '_blank',
+        },
+        {
+          text: 'РСХБ Лизинг',
+          href: DEFAULT_ORIGIN,
+          target: '_blank',
+        },
+        {
+          text: 'РСХБ Факторинг',
+          href: DEFAULT_ORIGIN,
+          target: '_blank',
+        },
+      ]}
+      documents={[
+        {
+          text: 'Информация о процентных ставках по договорам банковского вклада с физическими лицами',
+          href: DEFAULT_ORIGIN,
+          target: '_blank',
+        },
+        {
+          text: 'Раскрытие информации профессиональным участником рынка ценных бумаг',
+          href: DEFAULT_ORIGIN,
+          target: '_blank',
+        },
+        {
+          text: 'Раскрытие информации',
+          href: DEFAULT_ORIGIN,
+          target: '_blank',
+        },
+        {
+          text: 'Удостоверяющий центр',
+          href: DEFAULT_ORIGIN,
+          target: '_blank',
+        },
+        {
+          text: 'Финансовая культура',
+          href: DEFAULT_ORIGIN,
+          target: '_blank',
+        },
+      ]}
+      context={context}
+    />
+  </div>
+);

package/src/components/Footer/Footer.mobile.tsx

@@ -1,12 +1,66 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { FooterContent } from './FooterContent';
+import type { AccordionProps } from '../Accordion/Accordion';
+import { Accordion } from '../Accordion/Accordion';
+import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
+import { Contacts } from './Contacts';
+import type { FooterContent, SubMenuItem } from './FooterContent';
+import { HorizontalNavigation } from './HorizontalNavigation';
+import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
 
+import { Button } from '../../ui-kit/Button/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
+import { getAccordionItems } from '../../utils/getAccordionItems';
+
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
-export const Footer = JSX<FooterProps>(({ className, context }) => (
-  <footer className={`${className} px-9 py-2 bg-white rounded-bl-3xl rounded-br-3xl`}>
-    <TextInformation context={context} />
-  </footer>
-));
+export const Footer = JSX<FooterProps>(
+  ({
+    className = '',
+    documents,
+    relatedEnterprises,
+    contacts,
+    socialMedia,
+    topItems,
+    context,
+    horizontalNavigationTitle,
+    subMenu,
+  }) => {
+    const propsTextBlock: AccordionProps = {
+      context,
+      accordionItems: getAccordionItems(topItems),
+    };
+    return (
+      <footer className={`px-4 py-[26px] bg-white ${className}`}>
+        <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
+        <Accordion className="p-0 pt-0 pb-0 mb-4" {...propsTextBlock} />
+        <div>{subMenu?.map(renderSubMenuItem)}</div>
+        <MobileAppTile
+          context={context}
+          title="Мобильное приложение"
+          description="Загрузить для IOS и Android"
+        />
+        <SearchBar context={context} className="grow" />
+        <SocialMedia className="pb-4" media={socialMedia} context={context} />
+        <HorizontalNavigation
+          title={horizontalNavigationTitle}
+          links={relatedEnterprises}
+          context={context}
+        />
+        <TextInformation links={documents} context={context} />
+      </footer>
+    );
+  },
+);
+
+const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
+  const { icon, href, text } = menu;
+  return (
+    <Button key={`footer-${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/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Logo } from '../../ui-kit/Logo/Logo';
-import { SearchBar } from '../../ui-kit/SearchBar';
+import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import { Contacts } from './Contacts';
 import type { FooterContent } from './FooterContent';
 import { HorizontalNavigation } from './HorizontalNavigation';

package/src/components/Footer/FooterContent.ts

@@ -1,5 +1,6 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapProps } from '../../services/sitemap/SitemapProps';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
 
 /**
  * @title Тип контакта
@@ -26,6 +27,14 @@ export interface ContactInfo {
  */
 export type SocialMedia = Omit<LinkProps, 'text'>;
 
+/**
+ * @title Пункт подменю
+ */
+export interface SubMenuItem extends LinkProps {
+  /** @title Иконка подменю */
+  icon?: IconName;
+}
+
 /**
  * @title Подвал
  * @required ["topItems"]
@@ -39,4 +48,8 @@ export interface FooterContent extends SitemapProps {
   contacts?: ContactInfo[];
   /** @title Социальные сети */
   socialMedia?: SocialMedia[];
+  /** @title Заголовок для меню */
+  horizontalNavigationTitle?: string; // TODO: для мобильной версии
+  /** @title Подменю */
+  subMenu?: SubMenuItem[]; // TODO: для мобильной версии
 }

package/src/components/Footer/HorizontalNavigation.mobile.tsx

@@ -0,0 +1,52 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { LinkProps } from '../../model/LinkProps';
+import type { UniBlockProps } from '../../types';
+import type { FooterLink } from './FooterLink';
+
+export interface HorizontalNavigationProps extends FooterLink, UniBlockProps {
+  title?: string;
+}
+
+export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
+  ({ title, links, className = '', context }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
+
+    return (
+      <div className={className}>
+        <span className="text-primary-text font-sans font-medium text-sm">{title}</span>
+        {links?.length ? (
+          <div className="flex flex-col gap-5 py-5">
+            {links.map((_, i) => (
+              <HorizontalNavigationLink
+                key={String(i)}
+                index={i}
+                {...useLink({ router, handlerDecorator }, _)}
+              />
+            ))}
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+interface HorizontalNavigationLinkProps extends LinkProps {
+  className: string;
+  index: number;
+  onClick: (ev: MouseEvent) => any;
+}
+
+const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
+  ({ className = '', index, text, href, target, onClick }) => (
+    <a
+      className={`font-sans font-normal text-sm text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      {text || `Документ ${index}`}
+    </a>
+  ),
+);

package/src/components/Footer/HorizontalNavigation.tsx

@@ -1,28 +1,35 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { LinkProps } from '../../model/LinkProps';
+import type { LinkProps } from '../../model/LinkProps';
+import type { UniBlockProps } from '../../types';
 import type { FooterLink } from './FooterLink';
 
-export const HorizontalNavigation = JSX<FooterLink>(({ className, links, context }) => {
-  const router = context.useRouter();
-  const { handlerDecorator } = context;
+export interface HorizontalNavigationProps extends FooterLink, UniBlockProps {
+  title?: string;
+}
+
+export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
+  ({ links, className = '', context }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
 
-  return (
-    <div className={`${className || ''}`}>
-      {links?.length ? (
-        <div className="flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider">
-          {links.map((_, i) => (
-            <HorizontalNavigationLink
-              key={String(i)}
-              index={i}
-              {...useLink({ router, handlerDecorator }, _)}
-            />
-          ))}
-        </div>
-      ) : null}
-    </div>
-  );
-});
+    return (
+      <div className={className}>
+        {links?.length ? (
+          <div className="flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider">
+            {links.map((_, i) => (
+              <HorizontalNavigationLink
+                key={String(i)}
+                index={i}
+                {...useLink({ router, handlerDecorator }, _)}
+              />
+            ))}
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
 
 interface HorizontalNavigationLinkProps extends LinkProps {
   className: string;
@@ -31,11 +38,9 @@ interface HorizontalNavigationLinkProps extends LinkProps {
 }
 
 const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
-  ({ className, index, text, href, target, onClick }) => (
+  ({ className = '', index, text, href, target, onClick }) => (
     <a
-      className={`font-sans font-normal text-sm text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${
-        className || ''
-      }`}
+      className={`font-sans font-normal text-sm text-secondary-text hover:text-primary-main inline-block no-underline  max-w-[292px] ${className}`}
       href={href}
       target={target}
       onClick={onClick}

package/src/components/Footer/MediaButton.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { IconName } from '../../ui-kit/Icon/IconProps';
+
+const ICONS_MAP: Array<{
+  origins: string[];
+  icon: IconName;
+  label: string;
+  width: string;
+  height: string;
+}> = [
+  {
+    origins: ['t.me', 'telegram.org'],
+    icon: 'TelegramIcon',
+    label: 'Телеграм',
+    width: '20px',
+    height: '16px',
+  },
+  { origins: ['vk.com'], icon: 'VKIcon', label: 'ВКонтакте', width: '24px', height: '12px' },
+  { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники', width: '12px', height: '20px' },
+];
+
+interface MediaButtonProps {
+  href?: string;
+}
+
+export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
+  const { icon, width, height } =
+    ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+
+  if (!icon) return null;
+
+  return (
+    <a
+      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:fill-primary-main"
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {Icon && <Icon name={icon} width={width} height={height} asSVG className="block" />}
+    </a>
+  );
+});

package/src/components/Footer/SocialMedia.mobile.tsx

@@ -0,0 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { LinkProps } from '../../model/LinkProps';
+import type { UniBlockProps } from '../../types';
+import { MediaButton } from './MediaButton';
+
+export interface SocialMediaProps extends UniBlockProps {
+  media?: Omit<LinkProps, 'text'>[];
+}
+
+export const SocialMedia = JSX<SocialMediaProps>(({ className, media, context }) => {
+  const router = context.useRouter();
+  const { handlerDecorator } = context;
+  return (
+    <div className={`flex gap-2 items-start justify-start pt-6 pb-6 ${className || ''}`}>
+      {media?.map((_, index) => (
+        <MediaButton key={String(index)} {...useLink({ router, handlerDecorator }, _)} />
+      ))}
+    </div>
+  );
+});

package/src/components/Footer/SocialMedia.tsx

@@ -2,27 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
-import { Button } from '../../ui-kit/Button/Button';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
-
-const ICONS_MAP: Array<{
-  origins: string[];
-  icon: IconName;
-  label: string;
-  width: string;
-  height: string;
-}> = [
-  {
-    origins: ['t.me', 'telegram.org'],
-    icon: 'TelegramIcon',
-    label: 'Телеграм',
-    width: '20px',
-    height: '16px',
-  },
-  { origins: ['vk.com'], icon: 'VKIcon', label: 'ВКонтакте', width: '24px', height: '12px' },
-  { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники', width: '12px', height: '20px' },
-];
+import { MediaButton } from './MediaButton';
 
 export interface SocialMediaProps extends UniBlockProps {
   media?: Omit<LinkProps, 'text'>[];
@@ -39,25 +19,3 @@ export const SocialMedia = JSX<SocialMediaProps>(({ className, media, context })
     </div>
   );
 });
-
-interface MediaButtonProps {
-  href?: string;
-}
-
-const MediaButton = JSX<MediaButtonProps>(({ href }) => {
-  const { icon, label, width, height } =
-    ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
-
-  if (!icon) return null;
-
-  return (
-    <a
-      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:fill-primary-main"
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      {Icon && <Icon name={icon} width={width} height={height} asSVG className="block" />}
-    </a>
-  );
-});

package/src/components/Footer/TextInformation.mobile.tsx

@@ -0,0 +1,50 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { LinkProps } from '../../model/LinkProps';
+import type { FooterLink } from './FooterLink';
+
+export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
+  const router = context.useRouter();
+  const { handlerDecorator } = context;
+  return (
+    <div className={`${className || ''}`}>
+      <div className="pt-5 pb-[5px]">
+        <span className="font-sans font-normal text-xs text-secondary-text">
+          {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
+        </span>
+      </div>
+      {links?.length ? (
+        <div className={`flex flex-col justify-start items-start gap-5 pt-[5px]`}>
+          {links.map((_, i) => (
+            <TextInformationLink
+              key={String(i)}
+              index={i}
+              {...useLink({ router, handlerDecorator }, _)}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+});
+
+interface TextInformationLinkProps extends LinkProps {
+  className: string;
+  index: number;
+  onClick: (ev: MouseEvent) => any;
+}
+
+const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
+  ({ className, index, text, href, target, onClick }) => (
+    <a
+      className={`font-sans font-normal text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
+        className || ''
+      }`}
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      {text || `Документ ${index}`}
+    </a>
+  ),
+);