@redneckz/wildless-cms-uni-blocks 0.2.75 → 0.2.76

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

@@ -0,0 +1,265 @@
+import { context } from '../../setup-fixture';
+import { Footer } from './Footer';
+
+const DEFAULT_ORIGIN = 'https://rshb.ru/';
+
+export default (
+  <Footer
+    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: 'Залоговое имущество',
+          },
+        ],
+      },
+    ]}
+    socialMedia={[{ href: 'https://vk.com' }, { href: 'https://ok.ru' }, { href: 'https://t.me' }]}
+    contacts={[
+      {
+        text: '+7 (495) 787-7-787',
+        description: 'Для звонков из-за границы',
+        type: 'tel',
+      },
+      {
+        text: 'example@example.com',
+        description: 'Для писем',
+        type: 'email',
+      },
+      {
+        text: '7787',
+        description: 'Абонентам МТС, Мегафон, Билайн и Tele2',
+        type: 'tel',
+      },
+    ]}
+    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}
+  />
+);

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

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { FooterContent } from './FooterContent';
+import { TextInformation } from './TextInformation';
+
+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>
+));

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,40 @@
+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 { Contacts } from './Contacts';
+import type { FooterContent } from './FooterContent';
+import { HorizontalNavigation } from './HorizontalNavigation';
+import { Sitemap } from './Sitemap';
+import { SocialMedia } from './SocialMedia';
+import { TextInformation } from './TextInformation';
+
+const LEFT_COL_WIDTH_FULL_HD = 'w-[280px]';
+const LEFT_COL_WIDTH_SMALL_DESKTOP = 'xl:w-[220px]';
+
+export interface FooterProps extends FooterContent, UniBlockProps {}
+
+export const Footer = JSX<FooterProps>(
+  ({ className, documents, relatedEnterprises, contacts, socialMedia, topItems, context }) => {
+    return (
+      <footer className={`${className} px-9 py-10 bg-white`}>
+        <div className="flex items-stretch gap-32 pb-8 xl:gap-8">
+          <Logo className={`${LEFT_COL_WIDTH_FULL_HD} ${LEFT_COL_WIDTH_SMALL_DESKTOP}`} />
+          <SearchBar context={context} className="grow" />
+        </div>
+        <div className="flex items-stretch gap-32 xl:gap-8">
+          <Contacts
+            className={`${LEFT_COL_WIDTH_FULL_HD} shrink-0 overflow-hidden ${LEFT_COL_WIDTH_SMALL_DESKTOP}`}
+            items={contacts}
+            context={context}
+            hasButton
+          />
+          <Sitemap className="pt-[3px]" context={context} items={topItems} />
+        </div>
+        <SocialMedia media={socialMedia} context={context} />
+        <HorizontalNavigation links={relatedEnterprises} context={context} />
+        <TextInformation links={documents} context={context} />
+      </footer>
+    );
+  },
+);

package/src/components/Footer/FooterContent.ts

@@ -0,0 +1,15 @@
+import type { LinkContent } from '../../model/LinkContent';
+import type { SitemapContent } from '../../model/SitemapContent';
+
+export interface ContactInfo {
+  text: string;
+  type: 'tel' | 'email';
+  description: string;
+}
+
+export interface FooterContent extends SitemapContent {
+  documents?: LinkContent[];
+  relatedEnterprises?: LinkContent[];
+  contacts?: ContactInfo[];
+  socialMedia?: Omit<LinkContent, 'text'>[];
+}

package/src/components/Footer/FooterLink.ts

@@ -0,0 +1,6 @@
+import type { LinkContent } from '../../model/LinkContent';
+import type { UniBlockProps } from '../../types';
+
+export interface FooterLink extends UniBlockProps {
+  links?: LinkContent[];
+}

package/src/components/Footer/HorizontalNavigation.tsx

@@ -0,0 +1,46 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { LinkContent } from '../../model/LinkContent';
+import { useLink } from '../../hooks/useLink';
+import type { FooterLink } from './FooterLink';
+
+export const HorizontalNavigation = JSX<FooterLink>(({ className, links, 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>
+  );
+});
+
+interface HorizontalNavigationLinkProps extends LinkContent {
+  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-text inline-block no-underline max-w-[292px] ${
+        className || ''
+      }`}
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      {text || `Документ ${index}`}
+    </a>
+  ),
+);

package/src/components/Footer/Sitemap.tsx

@@ -0,0 +1,58 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { mergeTopItems } from '../../mergeTopItems';
+import type { LinkContent } from '../../model/LinkContent';
+import type { TopMenuItem } from '../../model/SitemapContent';
+import type { UniBlockProps } from '../../types';
+import { useLink } from '../../hooks/useLink';
+import { useSitemap } from '../../hooks/useSitemap';
+export interface SitemapProps extends UniBlockProps {
+  items?: TopMenuItem[];
+}
+
+export const Sitemap = JSX<SitemapProps>(({ className, items, context }) => {
+  const sitemap = useSitemap(context.useAsyncData);
+  const mergedItems = mergeTopItems(sitemap.topItems, items);
+  const linkParams = {
+    router: context.useRouter(),
+    handlerDecorator: context.handlerDecorator,
+  };
+
+  return (
+    <div className={`flex items-start justify-start gap-11 xl:gap-5 ${className || ''}`}>
+      {mergedItems?.map((_, i) => renderColumn(_, i, linkParams))}
+    </div>
+  );
+});
+
+const renderColumn = (c: TopMenuItem, index: number, { router, handlerDecorator }) => {
+  const { text, href, items, target } = c;
+
+  return (
+    <div key={String(index)} className="flex flex-col w-[235px] gap-[14px]">
+      <a
+        className="block font-sans font-medium text-base text-primary-text no-underline"
+        href={href}
+        target={target || '_self'}
+      >
+        {text || `Раздел ${index}`}
+      </a>
+      {items?.map((_, i) => (
+        <ColumnItem key={String(i)} {...useLink({ router, handlerDecorator }, _)} />
+      ))}
+    </div>
+  );
+};
+
+interface ColumnItemProps extends LinkContent {
+  index?: number;
+}
+
+const ColumnItem = JSX<ColumnItemProps>(({ text, href, target, index }) => (
+  <a
+    className="block font-sans font-normal text-base text-secondary-text hover:text-primary-main no-underline"
+    href={href}
+    target={target || '_self'}
+  >
+    {text || `Раздел ${index}`}
+  </a>
+));

package/src/components/Footer/SocialMedia.tsx

@@ -0,0 +1,52 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkContent } from '../../model/LinkContent';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { useLink } from '../../hooks/useLink';
+import { Button } from '../../ui-kit/Button/Button';
+
+const ICONS_MAP: Array<{ origins: string[]; icon: IconName; label: string }> = [
+  { origins: ['t.me', 'telegram.org'], icon: 'TelegramIcon', label: 'Телеграм' },
+  { origins: ['vk.com'], icon: 'VKIcon', label: 'ВКонтакте' },
+  { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники' },
+];
+
+export interface SocialMediaProps extends UniBlockProps {
+  media?: Omit<LinkContent, 'text'>[];
+}
+
+export const SocialMedia = JSX<SocialMediaProps>(({ className, media, context }) => {
+  const router = context.useRouter();
+  const { handlerDecorator } = context;
+  return (
+    <div className={`flex items-end justify-end gap-2 pt-[30px] pb-7 ${className || ''}`}>
+      {media?.map((_, index) => (
+        <MediaButton key={String(index)} {...useLink({ router, handlerDecorator }, _)} />
+      ))}
+    </div>
+  );
+});
+
+interface MediaButtonProps {
+  href?: string;
+}
+
+const MediaButton = JSX<MediaButtonProps>(({ href }) => {
+  const { icon, label } =
+    ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+
+  if (!icon) return null;
+
+  return (
+    <Button
+      rounded
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={label}
+      className="border-solid border border-main-divider w-9 h-9 flex items-center justify-center hover:text-primary-main"
+      appendLeft={<Icon name={icon} />}
+    />
+  );
+});

package/src/components/Footer/TextInformation.tsx

@@ -0,0 +1,50 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkContent } from '../../model/LinkContent';
+import { useLink } from '../../hooks/useLink';
+import { 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 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 LinkContent {
+  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>
+  ),
+);