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

package/src/components/ProductGallery/ProductGallery.tsx

@@ -0,0 +1,78 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import type { ProductGalleryContent } from './ProductGalleryContent';
+import type { UniBlockProps } from '../../types';
+
+export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
+
+export const ProductGallery = JSX<ProductGalleryProps>(
+  ({ className, context, duration = 0, slides = [] }) => {
+    const galleryNav = slides.map((s) => s.nav);
+    const galleryBlocks = slides.map((s) => s.productBlock);
+    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+
+    return (
+      <section className={`font-sans bg-white overflow-hidden w-100 ${className || ''}`}>
+        <div
+          className={`flex duration-1000`}
+          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          role="list"
+        >
+          {galleryBlocks.map((_, i) => renderProductBlock(_, i, context))}
+        </div>
+
+        <div className={`border-t border-solid border-main-divider flex`}>
+          {galleryNav.map((slide, i) =>
+            renderNavButton({
+              slide,
+              i,
+              activeSlideIndex,
+              onClick: () => setActiveSlideIndex(i),
+              duration,
+            }),
+          )}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderProductBlock(block: ProductBlockInnerContent, i: number, context) {
+  return (
+    <section key={String(i)} className="flex grow-0 shrink-0 basis-full" role="listitem">
+      <div className="p-10 flex grow">
+        <ProductBlockInner
+          className="pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem]"
+          context={context}
+          {...block}
+        />
+      </div>
+    </section>
+  );
+}
+
+function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
+  const isActiveBtn = i === activeSlideIndex;
+  const progressBarClassName = isActiveBtn ? 'animate-slide' : '';
+  const btnTitleClassName = isActiveBtn ? 'text-primary-text' : 'text-secondary-text';
+  return (
+    <button
+      type="button"
+      key={String(i)}
+      onClick={onClick}
+      className={`group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 py-4 grow basis-0`}
+    >
+      <div className="border-0 border-r border-solid border-main-divider px-6">
+        <div className={`text-sm font-medium group-hover:text-primary-text ${btnTitleClassName}`}>
+          {slide?.title}
+        </div>
+        <div className="text-xs text-secondary-text">{slide.desc}</div>
+      </div>
+      <div
+        className={`absolute bottom-0 left-0 w-full h-[3px] bg-primary-main -translate-x-full ${progressBarClassName}`}
+        style={{ animationDuration: `${duration}s` }}
+      ></div>
+    </button>
+  );
+}

package/src/components/ProductGallery/ProductGalleryContent.ts

@@ -0,0 +1,16 @@
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+
+interface ProductGalleryNav {
+  title: string;
+  desc: string;
+}
+
+export interface ProductSlideContent {
+  nav: ProductGalleryNav;
+  productBlock: ProductBlockInnerContent;
+}
+
+export interface ProductGalleryContent {
+  duration?: number;
+  slides?: ProductSlideContent[];
+}

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -0,0 +1,155 @@
+import { context } from '../../setup-fixture';
+
+import { ProductTile } from './ProductTile';
+import type { Picture } from '../../model/Picture';
+
+const cardWithMoney: Picture = {
+  src: 'card-with-diamond.png',
+  alt: 'Кредиты в РСХБ',
+  format: 'webp',
+};
+
+const letterWithMoney: Picture = {
+  src: 'letter-with-money.png',
+  alt: 'Пенсионный кредит в РСХБ',
+  format: 'webp',
+};
+
+const building: Picture = {
+  src: 'building.png',
+  alt: 'Кредит под залог недвижимости в РСХБ',
+  format: 'webp',
+};
+
+export default {
+  credit: (
+    <div className="grid grid-cols-12">
+      <ProductTile
+        context={context}
+        className="col-span-6"
+        title="Акция! “Кредит На все, что хочется!”"
+        description="Потребительский кредит на любые цели, без залога и поручительства"
+        benefits={[
+          {
+            label: 'Кредитный лимит',
+            description: 'до 5 млн Р',
+          },
+          {
+            label: 'Процентная ставка',
+            description: 'от 12,5%',
+          },
+          {
+            label: 'Срок кредитования',
+            description: 'до 5 лет',
+          },
+        ]}
+        buttons={[
+          {
+            text: 'Подробнее',
+            href: '/credit-cards',
+            version: 'secondary',
+          },
+        ]}
+        image={cardWithMoney}
+      />
+    </div>
+  ),
+  pension: (
+    <div className="grid grid-cols-12">
+      <ProductTile
+        context={context}
+        className="col-span-6"
+        title="Акция! “Пенсионный кредит”"
+        description={'Потребительский кредит на любые цели, без залога и поручительства'}
+        benefits={[
+          {
+            label: 'Кредитный лимит',
+            description: 'до 3 млн Р',
+          },
+          {
+            label: 'Процентная ставка',
+            description: 'от 12,5%',
+          },
+          {
+            label: 'Срок кредитования',
+            description: 'до 3 лет',
+          },
+        ]}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+        image={letterWithMoney}
+      />
+    </div>
+  ),
+  'credit-card': (
+    <div className="grid grid-cols-12">
+      <ProductTile
+        context={context}
+        className="col-span-8"
+        title="Кредит под залог недвижимости"
+        description={'Без переоформления залогой недвижимости на банк'}
+        benefits={[
+          {
+            label: 'Кредитный лимит',
+            description: 'до 10 млн Р',
+          },
+          {
+            label: 'Процентная ставка',
+            description: 'от 21,5%',
+          },
+          {
+            label: 'Срок кредитования',
+            description: 'до 10 лет',
+          },
+        ]}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+        image={building}
+      />
+    </div>
+  ),
+  'pension-credit': (
+    <div className="grid grid-cols-12">
+      <ProductTile
+        context={context}
+        className="col-span-4"
+        title="Кредит пенсионный"
+        description={'Для людей в возрасте до 75 лет'}
+        benefits={[
+          {
+            label: 'Кредитный лимит',
+            description: 'до 3 млн Р',
+          },
+          {
+            label: 'Процентная ставка',
+            description: 'от 16,8%',
+          },
+          {
+            label: 'Срок кредитования',
+            description: 'до 5 лет',
+          },
+        ]}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/ProductTile/ProductTile.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { ProductTileContent } from './ProductTileContent';
+import { Tile } from '../Tile/Tile';
+import type { UniBlockProps } from '../../types';
+
+export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
+
+export const ProductTile = JSX<ProductTileProps>((props) => {
+  const { benefits, version } = props;
+  return (
+    <Tile {...props}>
+      <div className="flex mt-5 mb-1">
+        {benefits?.length ? (
+          <div className="mr-8">{benefits.map(renderBenefitDescription)}</div>
+        ) : null}
+        {benefits?.length ? (
+          <div className="pt-1">{benefits.map((_, i) => renderBenefitLabel(_, i, version))}</div>
+        ) : null}
+      </div>
+    </Tile>
+  );
+});
+
+function renderBenefitLabel(benefit: Benefit, i: number, version = 'primary') {
+  const labelStyleMap: Record<BlockVersion, string> = {
+    primary: 'text-secondary-text',
+    secondary: 'text-white',
+  };
+  return (
+    <div key={String(i)} className={`text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
+      {benefit.label}
+    </div>
+  );
+}
+function renderBenefitDescription(benefit: Benefit, i: number) {
+  return (
+    <div key={String(i)} className={`text-xl font-medium ${i ? 'mt-2.5' : ''}`}>
+      {benefit.description}
+    </div>
+  );
+}

package/src/components/ProductTile/ProductTileContent.ts

@@ -0,0 +1,6 @@
+import type { BaseTileContent } from '../BaseTile/BaseTileContent';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+
+export interface ProductTileContent extends BaseTileContent {
+  benefits?: Benefit[];
+}

package/src/components/PromoTile/PromoTile.fixture.tsx

@@ -0,0 +1,25 @@
+import { context } from '../../setup-fixture';
+
+import { PromoTile } from './PromoTile';
+
+export default {
+  default: (
+    <div className="grid grid-cols-12">
+      <PromoTile
+        context={context}
+        className="col-span-4"
+        title="Акции и спецпредложения"
+        description="Пенсионный кредит по специальной процентной ставке"
+        version="secondary"
+        date="2022-04-16"
+        buttons={[
+          {
+            text: 'Все акции',
+            href: '/credits',
+            version: 'secondary',
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/PromoTile/PromoTile.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { PromoTileContent } from './PromoTileContent';
+import { Tile } from '../Tile/Tile';
+import type { UniBlockProps } from '../../types';
+
+export interface PromoTileProps extends PromoTileContent, UniBlockProps {}
+
+export const PromoTile = JSX<PromoTileProps>(
+  ({
+    className,
+    context,
+    title = 'Акции и спецпредложения',
+    date,
+    description,
+    buttons = [],
+    version,
+  }) => {
+    return (
+      <Tile
+        className={className}
+        context={context}
+        title={title}
+        buttons={buttons}
+        version={version}
+      >
+        <div>
+          {date && <div className="text-sm mb-2">{formatDate(date)}</div>}
+          <div className="text-base">{description}</div>
+        </div>
+      </Tile>
+    );
+  },
+);
+
+function formatDate(date: string) {
+  const dateObj = new Date(date);
+  const dateFormat: Intl.DateTimeFormatOptions = {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  };
+  return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
+}

package/src/components/PromoTile/PromoTileContent.ts

@@ -0,0 +1,5 @@
+import type { BaseTileContent } from '../BaseTile/BaseTileContent';
+
+export interface PromoTileContent extends BaseTileContent {
+  date?: string;
+}

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -0,0 +1,23 @@
+import { context } from '../../setup-fixture';
+import { StepsBlock } from './StepsBlock';
+
+export default (
+  <StepsBlock
+    context={context}
+    title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+    steps={[
+      {
+        label: 'Заявка на кредит',
+        description: 'Оставьте онлайн-заявку на потребительский кредит',
+      },
+      {
+        label: 'В случае одобрения',
+        description: 'Менеджер свяжется с вами и согласует встречу',
+      },
+      {
+        label: 'Получение наличных',
+        description: 'Получите наличные в отделении банка',
+      },
+    ]}
+  />
+);

package/src/components/StepsBlock/StepsBlock.tsx

@@ -0,0 +1,55 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { Step, StepsBlockContent } from './StepsBlockContent';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Title } from '../../ui-kit/Title/Title';
+import { joinList } from '../../utils/joinList';
+
+export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
+
+export const StepsBlock = JSX<StepsBlockProps>(({ className, title, steps }) => {
+  return (
+    <section
+      className={`font-sans text-primary-text bg-white px-12 py-12 flex flex-col items-center ${
+        className || ''
+      }`}
+    >
+      <Title className="font-medium m-0 max-w-[47rem] text-center">{title}</Title>
+      {steps?.length ? (
+        <div>
+          <div className="flex mt-9 items-center px-[88px]">
+            {joinList(<div className="h-0.5 w-full bg-secondary-light"></div>)(
+              steps.map((step, i) => renderStepIcon(step, i)),
+            )}
+          </div>
+          <div className="flex mt-9 justify-between gap-x-24">{steps.map(renderStepTitle)}</div>
+        </div>
+      ) : null}
+    </section>
+  );
+});
+
+const renderStepIcon = (step: Step, i: number) => {
+  return (
+    <div key={String(i)} className="flex flex-col items-center text-center relative">
+      <div className="h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10">
+        {(step.icon && <Icon name={step.icon} width="48" height="48" />) || (
+          <span className="font-medium text-title-sm text-secondary-text">{i + 1}</span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const renderStepTitle = (step: Step, i: number) => {
+  return (
+    <div key={String(i)} className="flex flex-col items-center text-center relative w-[276px]">
+      <div className="max-w-min">
+        <h5 className="font-medium text-xl m-0 mt-4 whitespace-nowrap px-3">{step.label}</h5>
+        {step.description && (
+          <div className="font-normal text-sm text-secondary-text mt-2">{step.description}</div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -0,0 +1,12 @@
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+
+export interface Step {
+  label: string;
+  description?: string;
+  icon?: IconName;
+}
+
+export interface StepsBlockContent {
+  title?: string;
+  steps?: Step[];
+}

package/src/components/TextBlock/TextBlock.fixture.tsx

@@ -0,0 +1,116 @@
+import { context } from '../../setup-fixture';
+import { TextBlock } from './TextBlock';
+import type { Picture } from '../../model/Picture';
+
+const image: Picture = {
+  src: 'bank-card.png',
+  format: 'webp',
+  size: {
+    width: 48,
+    height: 48,
+  },
+};
+
+export default (
+  <div className="font-sans overflow-hidden">
+    <div>
+      <p>Private clients</p>
+      <div className="flex flex-col gap-6" data-theme="pc">
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="big"
+          image={image}
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="none"
+        />
+        <TextBlock
+          context={context}
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary-light"
+          iconVersion="small"
+        />
+      </div>
+    </div>
+    <div>
+      <p>Business clients</p>
+      <div className="flex flex-col gap-6" data-theme="bc">
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary-light"
+          iconVersion="small"
+        />
+      </div>
+    </div>
+    <div>
+      <p>Ecosystem own</p>
+      <div className="flex flex-col gap-6" data-theme="eo">
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary-light"
+          iconVersion="small"
+        />
+      </div>
+    </div>
+  </div>
+);

package/src/components/TextBlock/TextBlock.tsx

@@ -0,0 +1,65 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { Picture } from '../../model/Picture';
+import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
+import type { UniBlockProps } from '../../types';
+import { Img } from '../../ui-kit/Img';
+
+export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
+
+const textBlockStyleMaps: Record<
+  TextBlockVersion,
+  { background: string; icon: string; title: string; description: string }
+> = {
+  primary: {
+    background: 'bg-white',
+    icon: 'bg-primary-main text-white',
+    title: 'text-primary-text',
+    description: 'text-secondary-text',
+  },
+  secondary: {
+    background: 'bg-primary-main',
+    icon: 'bg-white text-primary-main',
+    title: 'text-white',
+    description: 'text-white',
+  },
+  'secondary-light': {
+    background: 'bg-primary-main/10',
+    icon: 'bg-primary-main text-white',
+    title: 'text-primary-text',
+    description: 'text-secondary-text',
+  },
+};
+
+export const TextBlock = JSX<TextBlockProps>(
+  ({ title, description, blockVersion = 'primary', iconVersion, image, className }) => {
+    const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+    return (
+      <section
+        className={`font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`}
+      >
+        {iconVersion && iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
+        {iconVersion && iconVersion === 'big' ? renderImage(image) : null}
+        <div className="py-0.5">
+          {title && (
+            <div className={`font-medium text-base mb-1 ${textBlockStyleMap.title}`}>{title}</div>
+          )}
+          {description && (
+            <div className={`text-sm ${textBlockStyleMap.description}`}>{description}</div>
+          )}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderIcon(className: string) {
+  return (
+    <div className={`pt-1.5 pr-4`}>
+      <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
+    </div>
+  );
+}
+
+function renderImage(image?: Picture) {
+  return image?.src ? <Img className="pt-0.5 pr-3" image={image} /> : null;
+}

package/src/components/TextBlock/TextBlockContent.ts

@@ -0,0 +1,12 @@
+import type { Picture } from '../../model/Picture';
+
+export type TextBlockVersion = 'primary' | 'secondary' | 'secondary-light';
+export type TextBlockIconVersion = 'none' | 'small' | 'big';
+
+export interface TextBlockContent {
+  title?: string;
+  description?: string;
+  blockVersion?: TextBlockVersion;
+  iconVersion?: TextBlockIconVersion;
+  image?: Picture;
+}