@redneckz/wildless-cms-uni-blocks 0.2.46 → 0.2.49

package/src/Footer/Sitemap.tsx

@@ -0,0 +1,57 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Router, HandlerDecorator } from '../ContentPageContext';
+import { mergeTopItems } from '../mergeTopItems';
+import type { LinkContent, TopMenuItem, UniBlockProps } from '../types';
+import { useLink } from '../useLink';
+import { useSitemap } from '../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-text no-underline"
+    href={href}
+    target={target || '_self'}
+  >
+    {text || `Раздел ${index}`}
+  </a>
+));

package/src/Footer/SocialMedia.tsx

@@ -0,0 +1,46 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkContent, UniBlockProps } from '../types';
+import { TelegramIcon, VKIcon, OkIcon } from '../Icons/index';
+import { useLink } from '../useLink';
+
+const ICONS_MAP = [
+  { 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 py-6 ${className || ''}`}>
+      {media?.map((_, index) => (
+        <MediaButton key={String(index)} {...useLink({ router, handlerDecorator }, _)} />
+      ))}
+    </div>
+  );
+});
+
+interface MediaButtonProps {
+  href?: string;
+}
+
+const MediaButton = JSX<MediaButtonProps>(({ href }) => {
+  const { icon: Icon, label } =
+    ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+  return (
+    <a
+      className="flex items-center justify-center border-solid border-1 border-main-divider rounded-full no-underline outline-none w-8 h-8"
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={label}
+    >
+      {Icon && <Icon className="block" />}
+    </a>
+  );
+});

package/src/Footer/TextInformation.tsx

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

package/src/Footer/index.ts

@@ -0,0 +1,2 @@
+export { Footer } from './Footer';
+export type { FooterContent, FooterProps } from './Footer';

package/src/Header/Header.fixture.tsx

@@ -0,0 +1,21 @@
+import { context } from '../setup-fixture';
+import { Header } from './Header';
+
+export default (
+  <Header
+    context={context}
+    location="Москва"
+    topItems={[
+      {
+        href: 'https://rshb.ru/',
+        text: 'Бизнес клиентам',
+        target: '_blank',
+      },
+      {
+        href: 'https://rshb.ru/',
+        text: 'Частным клиентам',
+        target: '_blank',
+      },
+    ]}
+  />
+);

package/src/Header/Header.tsx

@@ -0,0 +1,55 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { mergeTopItems } from '../mergeTopItems';
+import type { UniBlockProps } from '../types';
+import { HeaderItem } from '../ui-kit/HeaderItem';
+import { Logo } from '../ui-kit/Logo';
+import { TopItem } from '../ui-kit/TopItem';
+import { useLink } from '../useLink';
+import { useSitemap } from '../useSitemap';
+import type { HeaderContent } from './HeaderContent';
+import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
+import { isSubItemActive } from './isSubItemActive';
+import { isTopItemActive } from './isTopItemActive';
+
+export interface HeaderProps extends HeaderContent, UniBlockProps {}
+
+export const Header = JSX<HeaderProps>(({ className, location, context, topItems }) => {
+  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 = subItems?.find(isSubItemActive(router));
+
+  const topMenu = mergedItems.map((_, i) => (
+    <TopItem
+      key={String(i)}
+      active={_ === activeTopItem}
+      {...useLink({ router, handlerDecorator }, _)}
+      ariaLabel={_.text}
+    />
+  ));
+
+  const subMenu = subItems?.map((_) => (
+    <HeaderItem
+      key={_.href}
+      className="mr-8"
+      active={_ === activeSubItem}
+      {...useLink({ router, handlerDecorator }, _)}
+    />
+  ));
+
+  return (
+    <header className={`pt-5 pb-8 px-20 bg-white rounded-bl-3xl rounded-br-3xl ${className || ''}`}>
+      <div className="flex items-center">
+        <Logo className="mr-8" />
+        {topMenu}
+        <HeaderSecondaryMenu location={location} className="ml-auto" />
+      </div>
+      <div className="mt-5 h-[1px] bg-main-divider" />
+      <nav className="mt-5">{subMenu}</nav>
+    </header>
+  );
+});

package/src/Header/HeaderContent.ts

@@ -0,0 +1,6 @@
+import type { TopMenuItem } from '../types';
+
+export interface HeaderContent {
+  location?: string;
+  topItems?: TopMenuItem[];
+}

package/src/Header/HeaderSecondaryMenu.tsx

@@ -0,0 +1,42 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { GridIcon, LoupeIcon, ProfileIcon } from '../Icons/index';
+import { TopItem } from '../ui-kit/TopItem';
+import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
+
+interface HeaderSecondaryMenuProps {
+  location?: string;
+  className?: string;
+}
+
+export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(({ location, className }) => {
+  return (
+    <div className={`flex items-center ${className || ''}`}>
+      <TopItem className="mr-5" flat={true} href="#" text={location} ariaLabel="Местоположение" />
+      <TopItem
+        className="mr-7"
+        flat={true}
+        href="#"
+        text="Офисы и банкоматы"
+        ariaLabel="Список всех доступных офисов и банкоматов"
+      />
+      <HeaderSecondaryMenuButton
+        className="mr-5 text-primary-text hover:text-primary-main"
+        ariaLabel="Поиск по сайту"
+      >
+        {LoupeIcon({ 'aria-hidden': true })}
+      </HeaderSecondaryMenuButton>
+      <HeaderSecondaryMenuButton
+        className="mr-5 text-primary-text hover:text-primary-main"
+        ariaLabel="Профиль"
+      >
+        {ProfileIcon({ 'aria-hidden': true })}
+      </HeaderSecondaryMenuButton>
+      <HeaderSecondaryMenuButton
+        className="mr-5 text-main hover:text-secondary-hover min-w-[32px] min-h-[32px]"
+        ariaLabel="Дополнительные ссылки"
+      >
+        {GridIcon({ 'aria-hidden': true })}
+      </HeaderSecondaryMenuButton>
+    </div>
+  );
+});

package/src/Header/HeaderSecondaryMenuButton.tsx

@@ -0,0 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+interface HeaderSecondaryMenuButtonProps {
+  className?: string;
+  ariaLabel?: string;
+}
+
+export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
+  ({ className, children, ariaLabel }) => (
+    <button
+      type="button"
+      className={`border-0 p-0 w-[24px] flex items-center bg-inherit cursor-pointer ${
+        className || ''
+      }`}
+      disabled={true}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </button>
+  ),
+);

package/src/Header/index.ts

@@ -0,0 +1,3 @@
+export { Header } from './Header';
+export type { HeaderProps } from './Header';
+export type { HeaderContent } from './HeaderContent';

package/src/Header/isSubItemActive.ts

@@ -0,0 +1,9 @@
+import type { Router } from '../ContentPageContext';
+import type { LinkContent } from '../types';
+import { isURL, withoutQuery } from '../utils/url';
+
+export function isSubItemActive({ href, pathname }: Router) {
+  return (item: LinkContent): boolean => {
+    return withoutQuery(item.href) === (isURL(item.href) ? withoutQuery(href) : pathname);
+  };
+}

package/src/Header/isTopItemActive.ts

@@ -0,0 +1,13 @@
+import type { Router } from '../ContentPageContext';
+import type { LinkContent } from '../types';
+import { isURL, withoutQuery } from '../utils/url';
+
+export function isTopItemActive({ href, pathname }: Router) {
+  return (item: LinkContent): boolean => {
+    const itemHref = withoutQuery(item.href);
+    if (isURL(itemHref)) {
+      return Boolean(href && href.startsWith(itemHref));
+    }
+    return Boolean(itemHref && pathname.startsWith(itemHref));
+  };
+}

package/src/Icons/ActualBalanceIcon.tsx

@@ -0,0 +1,202 @@
+export const ActualBalanceIcon = (props?: Record<string, any>) => (
+  <svg
+    width={70}
+    height={70}
+    viewBox="0 0 70 70"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <mask
+      id="mask0_2530_3510"
+      style={{
+        maskType: 'alpha',
+      }}
+      maskUnits="userSpaceOnUse"
+      x={2}
+      y={4}
+      width={55}
+      height={61}
+    >
+      <path d="M35.058 4.24L2.116 48.392l21.841 16.296L56.9 20.536 35.058 4.24z" fill="#fff" />
+    </mask>
+    <g mask="url(#mask0_2530_3510)">
+      <path
+        d="M35.058 4.24L2.116 48.392l21.841 16.296L56.9 20.536 35.058 4.24z"
+        fill="url(#paint0_linear_2530_3510)"
+      />
+      <path
+        d="M35.058 4.24L2.116 48.392l21.841 16.296L56.9 20.536 35.058 4.24z"
+        fill="url(#paint1_linear_2530_3510)"
+      />
+      <path
+        d="M49.367 12.968l-33.47 21.717 2.132 1.616 38.285-18.808-6.947-4.525z"
+        fill="#FA552D"
+      />
+      <path
+        d="M49.367 12.968l-33.47 21.717 2.132 1.616 38.285-18.808-6.947-4.525z"
+        fill="url(#paint2_linear_2530_3510)"
+      />
+      <path
+        d="M49.367 12.968l-33.47 21.717 2.132 1.616 38.285-18.808-6.947-4.525z"
+        fill="url(#paint3_linear_2530_3510)"
+      />
+      <path fill="#42AB44" d="M0.908203 41.4221H12.851203V56.5531H0.908203z" />
+    </g>
+    <mask
+      id="mask1_2530_3510"
+      style={{
+        maskType: 'alpha',
+      }}
+      maskUnits="userSpaceOnUse"
+      x={6}
+      y={14}
+      width={62}
+      height={50}
+    >
+      <path d="M55.187 14.567L6.004 39.377l12.274 24.33 49.183-24.81-12.274-24.33z" fill="#fff" />
+    </mask>
+    <g mask="url(#mask1_2530_3510)">
+      <path
+        d="M55.187 14.567L6.004 39.377l12.274 24.33 49.183-24.81-12.274-24.33z"
+        fill="#FFCDBD"
+      />
+      <path
+        d="M55.187 14.567L6.004 39.377l12.274 24.33 49.183-24.81-12.274-24.33z"
+        fill="url(#paint4_linear_2530_3510)"
+      />
+      <path d="M67.462 33.264l-54.495 8.05 3.982 26.958 54.495-8.05-3.982-26.958z" fill="#42AB44" />
+    </g>
+    <mask
+      id="mask2_2530_3510"
+      style={{
+        maskType: 'alpha',
+      }}
+      maskUnits="userSpaceOnUse"
+      x={4}
+      y={30}
+      width={59}
+      height={36}
+    >
+      <path d="M58.603 30.767l-54.496 8.05L8.09 65.775l54.496-8.05-3.982-26.958z" fill="#fff" />
+    </mask>
+    <g mask="url(#mask2_2530_3510)">
+      <path
+        d="M58.603 30.767l-54.496 8.05L8.09 65.775l54.496-8.05-3.982-26.958z"
+        fill="url(#paint5_linear_2530_3510)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M58.603 30.765L4.107 38.814l.54 3.652 13.994-2.067 2.902 19.65-13.99 2.066.54 3.652 13.99-2.066v.007l22.709-3.355-.001-.006 17.798-2.63-.54-3.651-17.797 2.629-2.903-19.65 17.793-2.629-.539-3.651z"
+        fill="url(#paint6_linear_2530_3510)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M58.603 30.765L4.107 38.814l.54 3.652 13.994-2.067 2.902 19.65-13.99 2.066.54 3.652 13.99-2.066v.007l22.709-3.355-.001-.006 17.798-2.63-.54-3.651-17.797 2.629-2.903-19.65 17.793-2.629-.539-3.651z"
+        fill="url(#paint7_linear_2530_3510)"
+      />
+      <path
+        d="M48.36 32.281l-7.541 1.114L44.8 60.353l7.543-1.114-3.982-26.958zM56.743 38.907l-4.241.627a1.308 1.308 0 01-.382-2.587l4.241-.627a1.308 1.308 0 01.382 2.587z"
+        fill="#42AB44"
+      />
+      <path
+        d="M31.702 55.28l-2.33.344-.802-5.428-1.724.254-.166-1.128 1.724-.255-1.101-7.45 4.67-.69c.965-.142 1.822-.085 2.572.17.751.256 1.362.681 1.836 1.276.471.596.773 1.329.903 2.206.131.89.048 1.681-.252 2.376-.3.695-.787 1.26-1.462 1.7-.675.44-1.5.73-2.47.874l-2.196.324.802 5.427h-.004zm2.631-3.974l.167 1.128-7.204 1.064-.166-1.128 7.203-1.064zm-2.205-3.512a6.002 6.002 0 001.552-.43c.452-.2.795-.492 1.023-.88.229-.386.296-.905.2-1.556-.082-.554-.264-.993-.545-1.314a2.099 2.099 0 00-1.092-.651c-.446-.114-.965-.125-1.553-.038l-1.805.267.712 4.823 1.508-.223v.002z"
+        fill="#fff"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_2530_3510"
+        x1={14.7502}
+        y1={4.23757}
+        x2={26.9602}
+        y2={26.3432}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#FEFFCF" />
+        <stop offset={1} stopColor="#FFE7DA" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_2530_3510"
+        x1={18.587}
+        y1={26.316}
+        x2={32.8984}
+        y2={36.8759}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#DCFFE5" />
+        <stop offset={1} stopColor="#EBE78C" />
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_2530_3510"
+        x1={50.4489}
+        y1={15.511}
+        x2={26.7341}
+        y2={29.0153}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#FFA183" />
+        <stop offset={1} stopColor="#FFA183" stopOpacity={0} />
+      </linearGradient>
+      <linearGradient
+        id="paint3_linear_2530_3510"
+        x1={49.3436}
+        y1={-56.8124}
+        x2={-1.00392}
+        y2={-52.0477}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#42AB44" />
+        <stop offset={1} stopColor="#201B37" />
+      </linearGradient>
+      <linearGradient
+        id="paint4_linear_2530_3510"
+        x1={30.5957}
+        y1={26.9721}
+        x2={38.6904}
+        y2={42.8088}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#DCFFE5" />
+        <stop offset={1} stopColor="#EBE78C" />
+      </linearGradient>
+      <linearGradient
+        id="paint5_linear_2530_3510"
+        x1={4.59823}
+        y1={42.1396}
+        x2={53.0558}
+        y2={55.1262}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#FFF7F4" />
+        <stop offset={0.34234} stopColor="#FEFFCF" />
+        <stop offset={1} stopColor="#FFE7DA" />
+        <stop offset={1} stopColor="#FFE7DA" />
+      </linearGradient>
+      <linearGradient
+        id="paint6_linear_2530_3510"
+        x1={19.1708}
+        y1={32.1466}
+        x2={29.8454}
+        y2={57.3534}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#FFCA42" />
+        <stop offset={1} stopColor="#FFA183" />
+      </linearGradient>
+      <linearGradient
+        id="paint7_linear_2530_3510"
+        x1={20.2683}
+        y1={42.9389}
+        x2={26.6235}
+        y2={64.3382}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#7DC15D" />
+        <stop offset={1} stopColor="#FEE54F" />
+      </linearGradient>
+    </defs>
+  </svg>
+);

package/src/Icons/CalendarIcon.tsx

@@ -0,0 +1,19 @@
+export const CalendarIcon = (props?: Record<string, any>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
+    <path
+      stroke="#1C1C1C"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="2"
+      d="M8 2v3M16 2v3M3.5 9.09h17M3 13.01V8.5c0-3 1.5-5 5-5h8c3.5 0 5 2 5 5V17c0 3-1.5 5-5 5H8c-3.5 0-5-2-5-5"
+    />
+    <path
+      stroke="#42AB44"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="3"
+      d="M15.991 13h.018M15.991 17.006h.018M11.991 13h.018M11.991 17.006h.018M7.991 13h.018M7.991 17.006h.018"
+    />
+  </svg>
+);