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

package/src/ProductGallery.fixture.tsx

@@ -1,138 +0,0 @@
-import { context } from './setup-fixture';
-
-import { ProductGallery } from './ProductGallery';
-import type { Picture } from './model/Picture';
-
-const moneyImage: Picture = {
-  src: 'money-1.png',
-  format: 'webp',
-  size: {
-    width: 300,
-    height: 300,
-  },
-};
-
-const worker: Picture = {
-  src: 'worker.png',
-  format: 'webp',
-  size: {
-    width: 300,
-    height: 300,
-  },
-};
-
-const creditCard: Picture = {
-  src: 'credit-card-1.png',
-  format: 'webp',
-  size: {
-    width: 300,
-    height: 300,
-  },
-};
-
-export default (
-  <ProductGallery
-    context={context}
-    slides={[
-      {
-        nav: {
-          title: 'Деньги на любые цели',
-          desc: 'Ставка от 12,5% годовых на срок до 5 лет',
-        },
-        productBlock: {
-          title: 'Ставка от 12,5% годовых на срок до 5 лет!»',
-          description:
-            'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
-          items: [
-            'Потребительский кредит по специальной процентной ставке',
-            'Получите деньги без залога и поручительства',
-            'Кредитный лимит до 5 млн рублей',
-          ],
-          buttons: [
-            {
-              href: 'https://rshb.ru',
-              text: 'Подробнее',
-              target: '_blank',
-              version: 'primary',
-            },
-          ],
-          image: moneyImage,
-        },
-      },
-      {
-        nav: {
-          title: 'Для людей в возрасте',
-          desc: 'Ставка от 12,5% годовых на срок до 3 лет',
-        },
-        productBlock: {
-          title: 'Ставка от 12,5% годовых на срок до 3 лет!»',
-          description:
-            'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
-          items: [
-            'Потребительский кредит по специальной процентной ставке',
-            'Получите деньги без залога и поручительства',
-            'Кредитный лимит до 5 млн рублей',
-          ],
-          buttons: [
-            {
-              href: 'https://rshb.ru',
-              text: 'Подробнее',
-              target: '_blank',
-              version: 'primary',
-            },
-          ],
-          image: worker,
-        },
-      },
-      {
-        nav: {
-          title: 'Выгодно покупать',
-          desc: 'Дополнительные бонусные баллы за покупки',
-        },
-        productBlock: {
-          title: 'Дополнительные бонусные баллы за покупки!»',
-          description:
-            'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
-          items: [
-            'Потребительский кредит по специальной процентной ставке',
-            'Получите деньги без залога и поручительства',
-            'Кредитный лимит до 5 млн рублей',
-          ],
-          buttons: [
-            {
-              href: 'https://rshb.ru',
-              text: 'Подробнее',
-              target: '_blank',
-              version: 'primary',
-            },
-          ],
-          image: creditCard,
-        },
-      },
-      {
-        nav: {
-          title: 'Карты Unionpay',
-          desc: 'Кэшбэк до 20% у партнеров',
-        },
-        productBlock: {
-          title: 'Карты Unionpay»',
-          description: 'Кэшбэк до 20% у партнеров',
-          items: [
-            'Потребительский кредит по специальной процентной ставке',
-            'Получите деньги без залога и поручительства',
-            'Кредитный лимит до 5 млн рублей',
-          ],
-          buttons: [
-            {
-              href: 'https://rshb.ru',
-              text: 'Подробнее',
-              target: '_blank',
-              version: 'primary',
-            },
-          ],
-          image: creditCard,
-        },
-      },
-    ]}
-  />
-);

package/src/ProductGallery.tsx

@@ -1,78 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { ProductBlockInner } from './ProductBlockInner';
-import type { ProductBlockInnerContent } from './ProductBlockInnerContent';
-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/ProductGalleryContent.ts

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

package/src/ProductTile.fixture.tsx

@@ -1,155 +0,0 @@
-import { context } from './setup-fixture';
-
-import { ProductTile } from './ProductTile';
-import { 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/ProductTile.tsx

@@ -1,43 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { Benefit } from './BenefitsBlockContent';
-import type { BlockVersion } from './model/BlockVersion';
-import type { ProductTileContent } from './ProductTileContent';
-import { Tile } from './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/ProductTileContent.ts

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

package/src/PromoTile.fixture.tsx

@@ -1,25 +0,0 @@
-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/PromoTile.tsx

@@ -1,43 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { PromoTileContent } from './PromoTileContent';
-import { Tile } from './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/PromoTileContent.ts

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

package/src/StepsBlock.fixture.tsx

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

package/src/StepsBlock.tsx

@@ -1,55 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { Step, StepsBlockContent } from './StepsBlockContent';
-import type { UniBlockProps } from './types';
-import { Icon } from './ui-kit/Icon';
-import { Title } from './ui-kit/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/StepsBlockContent.ts

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