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

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

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

@@ -0,0 +1,215 @@
+import { context } from '../../setup-fixture';
+
+import { Gallery, GalleryProps } from './Gallery';
+import { Gallery as MobileGallery } from './Gallery.mobile';
+import type { Picture } from '../../model/Picture';
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  size: {
+    width: 140,
+    height: 140,
+  },
+};
+
+const defaultItems = [
+  'Качественные фермерские продукты напрямую от производителей',
+  'Самая большая база сельских туров по России',
+  'Площадки для создания комфортной жизни за городом',
+];
+
+const defaultProps: GalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: '«Моя выгода»',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+  ],
+};
+
+const textAndButtonProps: GalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+      href: '/credit-cards',
+    },
+    {
+      title: 'Более 1000 развлечений',
+      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
+      image,
+      href: '/credit-cards',
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+      href: '/credit-cards',
+    },
+    {
+      title: '«Моя выгода»',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+      href: '/credit-cards',
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+      href: '/credit-cards',
+    },
+  ],
+};
+
+const listAndButtonProps: GalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: '«Моя выгода»',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+  ],
+};
+
+const textAndNoButtonProps: GalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+    },
+    {
+      title: '«Моя выгода»',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+    },
+  ],
+};
+
+const onlyTitleProps: GalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      image,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+    },
+    {
+      title: '«Моя выгода»',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+    },
+  ],
+};
+
+export default {
+  default: <Gallery {...defaultProps} />,
+  'text and button': <Gallery {...textAndButtonProps} />,
+  'list and button': <Gallery {...listAndButtonProps} />,
+  'text and no button': <Gallery {...textAndNoButtonProps} />,
+  'only title': <Gallery {...onlyTitleProps} />,
+  mobile: <MobileGallery {...defaultProps} />,
+};

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

@@ -0,0 +1,71 @@
+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';
+
+export const Gallery = JSX<GalleryProps>(({ title, description, cards = [], className }) => {
+  return (
+    <section
+      className={`relative font-sans text-primary-text bg-white p-4 overflow-hidden ${className}`}
+    >
+      <div className="flex flex-col items-center mb-8">
+        <Title className="font-medium m-0 text-centers">{title}</Title>
+        {description ? (
+          <div className="font-normal text-base max-w-[600px] mt-3">{description}</div>
+        ) : null}
+      </div>
+      <div className="horizontal-list no-scrollbar" role="list">
+        {cards?.map(renderCard)}
+      </div>
+    </section>
+  );
+});
+
+function renderCard(card: GalleryCard, key: number) {
+  return (
+    <div
+      className="box-border horizontal-list-item border-solid border rounded-md border-main-divider p-4 mx-1 flex flex-col justify-between items-stretch"
+      role="listitem"
+      key={key}
+    >
+      <div>
+        {card.image?.src ? (
+          <div className="flex justify-center">
+            <Img className="mb-6" image={card.image} />
+          </div>
+        ) : null}
+        {card.title ? (
+          <h4
+            className={`font-medium text-xl m-0 ${
+              !card.description && !card.items?.length ? 'text-center' : ''
+            }`}
+          >
+            {card.title}
+          </h4>
+        ) : null}
+        {card.description ? (
+          <div className="font-normal text-sm text-secondary-text mt-2">{card.description}</div>
+        ) : null}
+        {card.items?.length ? renderItems(card.items) : null}
+      </div>
+      {card.href ? (
+        <Button className="mt-6" text="Подробнее" version="secondary" href={card.href} />
+      ) : null}
+    </div>
+  );
+}
+
+function renderItems(items: string[] = []) {
+  return (
+    <section className="max-w-[308px] mt-2" role="list">
+      {items.map((item, i) => (
+        <BlockItem key={String(i)}>
+          <span className="text-sm text-secondary-text">{item}</span>
+        </BlockItem>
+      ))}
+    </section>
+  );
+}

package/src/components/Gallery/Gallery.tsx

@@ -0,0 +1,8 @@
+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 {}
+
+export const Gallery = JSX<GalleryProps>((props) => <GalleryInner {...props} version="normal" />);

package/src/components/Gallery/GalleryContent.ts

@@ -0,0 +1,15 @@
+import type { Picture } from '../../model/Picture';
+
+export interface GalleryCard {
+  title?: string;
+  description?: string;
+  image?: Picture;
+  href?: string;
+  items?: string[];
+}
+
+export interface GalleryContent {
+  title?: string;
+  description?: string;
+  cards?: GalleryCard[];
+}

package/src/components/Gallery/GalleryInner.tsx

@@ -0,0 +1,135 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { GalleryCard, GalleryContent } from './GalleryContent';
+import type { GalleryVersion } from '../../model/GalleryVersion';
+import type { UniBlockProps } from '../../types';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+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';
+
+export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
+  version?: GalleryVersion;
+}
+
+const cardStyleMap: Record<GalleryVersion, string> = {
+  normal: 'min-w-[364px] w-[364px]',
+  mini: 'min-w-[260px] w-[260px]',
+};
+
+const cardWidthMap: Record<GalleryVersion, number> = {
+  normal: 380,
+  mini: 276,
+};
+
+const galleryLengthForScrollMap: Record<GalleryVersion, number> = {
+  normal: 3,
+  mini: 4,
+};
+
+export const GalleryInner = JSX<GalleryInnerProps>(
+  ({ title, description, context, cards = [], className, version = 'normal' }) => {
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+
+    function handleNextClick() {
+      setActiveCardIndex(activeCardIndex + 1);
+    }
+
+    function handlePrevClick() {
+      setActiveCardIndex(activeCardIndex - 1);
+    }
+
+    const isGalleryScrollAvailable = cards?.length > galleryLengthForScrollMap[version];
+
+    const showNextButton =
+      isGalleryScrollAvailable &&
+      cards?.length - activeCardIndex > galleryLengthForScrollMap[version];
+
+    const showPrevButton = isGalleryScrollAvailable && activeCardIndex > 0;
+
+    return (
+      <section
+        className={`relative font-sans text-primary-text bg-white p-12 overflow-hidden ${className}`}
+      >
+        <div className="flex flex-col items-center mb-8">
+          {title ? <Title className="font-medium m-0 text-center">{title}</Title> : null}
+          {description ? (
+            <div className="font-normal text-base max-w-[600px] mt-3">{description}</div>
+          ) : null}
+        </div>
+        <div
+          // Need to place all cards at the center if count of cards less than 4
+          className={`flex ${
+            cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''
+          } duration-1000`}
+          // All cards has same width
+          style={{ transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }}
+          role="list"
+        >
+          {cards?.map((card, i) => renderCard(card, i, version))}
+        </div>
+        {showPrevButton && (
+          <ArrowButton
+            className="absolute top-1/2 left-8 rotate-180"
+            onClick={handlePrevClick}
+            ariaLabel="Пролистать влево"
+          />
+        )}
+        {showNextButton && (
+          <ArrowButton
+            className="absolute top-1/2 right-1 z-10"
+            onClick={handleNextClick}
+            ariaLabel="Пролистать вправо"
+          />
+        )}
+        <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white"></div>
+      </section>
+    );
+  },
+);
+
+function renderCard(card: GalleryCard, i: number, version: GalleryVersion) {
+  return (
+    <div
+      className={`box-border border-solid border rounded-md border-main-divider p-7 mx-2 flex flex-col justify-between items-stretch ${cardStyleMap[version]} w-full`}
+      role="listitem"
+      key={String(i)}
+    >
+      <div>
+        {card.image?.src ? (
+          <div className="flex justify-center">
+            <Img className="mb-6" image={card.image} />
+          </div>
+        ) : null}
+        {card.title ? (
+          <h4
+            className={`font-medium text-xl m-0 ${
+              !card.description && !card.items?.length ? 'text-center' : ''
+            }`}
+          >
+            {card.title}
+          </h4>
+        ) : null}
+        {card.description ? (
+          <div className="font-normal text-sm text-secondary-text mt-2">{card.description}</div>
+        ) : null}
+        {card.items?.length ? (
+          <section className="max-w-[308px] mt-2" role="list">
+            {card.items.map(renderItem)}
+          </section>
+        ) : null}
+      </div>
+      {card.href ? (
+        <Button className="mt-6" text="Подробнее" version="secondary" href={card.href} />
+      ) : null}
+    </div>
+  );
+}
+
+function renderItem(item: string, i: number) {
+  return (
+    <BlockItem key={String(i)}>
+      <span className="text-sm text-secondary-text">{item}</span>
+    </BlockItem>
+  );
+}

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

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