@redneckz/wildless-cms-uni-blocks 0.2.109 → 0.2.113

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { context } from '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
@@ -43,7 +44,7 @@ export default (
             desc: 'Ставка от 12,5% годовых на срок до 5 лет',
           },
           productBlock: {
-            title: 'Ставка от 12,5% годовых на срок до 5 лет!»',
+            title: 'Ставка от 12,5% годовых на срок до 5 лет!',
             items: [
               'Потребительский кредит по специальной процентной ставке',
               'Получите деньги без залога и поручительства',
@@ -66,7 +67,7 @@ export default (
             desc: 'Ставка от 12,5% годовых на срок до 3 лет',
           },
           productBlock: {
-            title: 'Ставка от 12,5% годовых на срок до 3 лет!»',
+            title: 'Ставка от 12,5% годовых на срок до 3 лет!',
             items: [
               'Потребительский кредит по специальной процентной ставке',
               'Получите деньги без залога и поручительства',
@@ -89,7 +90,7 @@ export default (
             desc: 'Дополнительные бонусные баллы за покупки',
           },
           productBlock: {
-            title: 'Дополнительные бонусные баллы за покупки!»',
+            title: 'Дополнительные бонусные баллы за покупки!',
             items: [
               'Потребительский кредит по специальной процентной ставке',
               'Получите деньги без залога и поручительства',
@@ -112,7 +113,7 @@ export default (
             desc: 'Кэшбэк до 20% у партнеров',
           },
           productBlock: {
-            title: 'Карты Unionpay»',
+            title: 'Карты Unionpay',
             items: [
               'Потребительский кредит по специальной процентной ставке',
               'Получите деньги без залога и поручительства',

package/src/components/ProductGallery/ProductGallery.mobile.tsx

@@ -0,0 +1,56 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { ProductGalleryBlock } from './ProductGalleryBlock';
+import type { ProductGalleryContent } from './ProductGalleryContent';
+
+export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
+
+export const ProductGallery = JSX<ProductGalleryProps>(
+  ({ className, context, duration = 0, slides = [] }) => {
+    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((block, i) => (
+            <ProductGalleryBlock key={String(i)} block={block} context={context} />
+          ))}
+        </div>
+
+        <div className="flex px-4 py-6">
+          {slides.map((_, i) =>
+            renderNavButton({
+              i,
+              activeSlideIndex,
+              onClick: () => setActiveSlideIndex(i),
+              duration,
+            }),
+          )}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderNavButton({ i, activeSlideIndex, onClick, duration }) {
+  const isActiveBtn = i === activeSlideIndex;
+  const progressBarClassName = isActiveBtn ? 'animate-slide bg-primary-main' : 'bg-main-divider';
+  return (
+    <button
+      type="button"
+      key={String(i)}
+      onClick={onClick}
+      className={`relative overflow-hidden border-0 bg-inherit cursor-pointer pl-0 mr-1.5 pt-4 pb-5 last:mr-0 grow basis-0`}
+    >
+      <div
+        className={`absolute bottom-0 left-0 w-full h-[3px] ${progressBarClassName}`}
+        style={{ animationDuration: `${duration}s`, animationFillMode: 'forwards' }}
+      ></div>
+    </button>
+  );
+}

package/src/components/ProductGallery/ProductGalleryBlock.mobile.tsx

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { TitleSize } from '../../ui-kit/Title/TitleProps';
+import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
+import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+
+export interface ProductGalleryBlockProps extends UniBlockProps {
+  titleSize?: TitleSize;
+  block?: ProductBlockInnerCommonProps;
+}
+
+export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
+  ({ block, titleSize, context }) => {
+    return (
+      <section className="flex grow-0 shrink-0 basis-full px-4 py-6" role="listitem">
+        <div className="flex grow">
+          <ProductBlockInner context={context} titleSize={titleSize} {...block} />
+        </div>
+      </section>
+    );
+  },
+);

package/src/components/ProductGallery/ProductGalleryBlock.tsx

@@ -0,0 +1,27 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { TitleSize } from '../../ui-kit/Title/TitleProps';
+import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
+import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+
+export interface ProductGalleryBlockProps extends UniBlockProps {
+  titleSize?: TitleSize;
+  block?: ProductBlockInnerCommonProps;
+}
+
+export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
+  ({ block, titleSize, context }) => {
+    return (
+      <section 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}
+            titleSize={titleSize}
+            {...block}
+          />
+        </div>
+      </section>
+    );
+  },
+);

package/src/components/ProductGallery/ProductGalleryContent.ts

@@ -12,7 +12,8 @@ interface ProductGalleryNav {
  * @title Слайд
  */
 export interface ProductSlide {
-  nav: ProductGalleryNav;
+  /** @title Превью содержимого слайда на навигации */
+  nav?: ProductGalleryNav;
   /** @title Содержимое слайда */
   productBlock: ProductBlockInnerCommonProps;
 }

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

@@ -1,7 +1,7 @@
 import { context } from '../../setup-fixture';
 
-import { ProductTile } from './ProductTile';
 import type { Picture } from '../../model/Picture';
+import { ProductTile } from './ProductTile';
 
 const cardWithMoney: Picture = {
   src: 'card-with-diamond.png',
@@ -31,16 +31,16 @@ export default {
         description="Потребительский кредит на любые цели, без залога и поручительства"
         benefits={[
           {
-            label: 'Кредитный лимит',
-            description: 'до 5 млн Р',
+            label: 'до 5 млн Р',
+            description: 'Кредитный лимит',
           },
           {
-            label: 'Процентная ставка',
-            description: 'от 12,5%',
+            label: 'от 12,5%',
+            description: 'Процентная ставка',
           },
           {
-            label: 'Срок кредитования',
-            description: 'до 5 лет',
+            label: 'до 5 лет',
+            description: 'Срок кредитования',
           },
         ]}
         buttons={[
@@ -63,16 +63,16 @@ export default {
         description={'Потребительский кредит на любые цели, без залога и поручительства'}
         benefits={[
           {
-            label: 'Кредитный лимит',
-            description: 'до 3 млн Р',
+            label: 'до 3 млн Р',
+            description: 'Кредитный лимит',
           },
           {
-            label: 'Процентная ставка',
-            description: 'от 12,5%',
+            label: 'от 12,5%',
+            description: 'Процентная ставка',
           },
           {
-            label: 'Срок кредитования',
-            description: 'до 3 лет',
+            label: 'до 3 лет',
+            description: 'Срок кредитования',
           },
         ]}
         buttons={[
@@ -96,16 +96,16 @@ export default {
         description={'Без переоформления залогой недвижимости на банк'}
         benefits={[
           {
-            label: 'Кредитный лимит',
-            description: 'до 10 млн Р',
+            label: 'до 10 млн Р',
+            description: 'Кредитный лимит',
           },
           {
-            label: 'Процентная ставка',
-            description: 'от 21,5%',
+            label: 'от 21,5%',
+            description: 'Процентная ставка',
           },
           {
-            label: 'Срок кредитования',
-            description: 'до 10 лет',
+            label: 'до 10 лет',
+            description: 'Срок кредитования',
           },
         ]}
         buttons={[
@@ -129,16 +129,16 @@ export default {
         description={'Для людей в возрасте до 75 лет'}
         benefits={[
           {
-            label: 'Кредитный лимит',
-            description: 'до 3 млн Р',
+            label: 'до 3 млн Р',
+            description: 'Кредитный лимит',
           },
           {
-            label: 'Процентная ставка',
-            description: 'от 16,8%',
+            label: 'от 16,8%',
+            description: 'Процентная ставка',
           },
           {
-            label: 'Срок кредитования',
-            description: 'до 5 лет',
+            label: 'до 5 лет',
+            description: 'Срок кредитования',
           },
         ]}
         buttons={[

package/src/components/ProductTile/ProductTile.tsx

@@ -1,9 +1,9 @@
 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';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import { Tile } from '../Tile/Tile';
+import type { ProductTileContent } from './ProductTileContent';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
@@ -12,31 +12,32 @@ export const ProductTile = JSX<ProductTileProps>((props) => {
   return (
     <Tile {...props}>
       <div className="flex mt-5 mb-1">
+        {benefits?.length ? <div className="mr-8">{benefits.map(renderBenefitLabel)}</div> : null}
         {benefits?.length ? (
-          <div className="mr-8">{benefits.map(renderBenefitDescription)}</div>
-        ) : null}
-        {benefits?.length ? (
-          <div className="pt-1">{benefits.map((_, i) => renderBenefitLabel(_, i, version))}</div>
+          <div className="pt-1">
+            {benefits.map((_, i) => renderBenefitDescription(_, 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',
-  };
+function renderBenefitLabel(benefit: Benefit, i: number) {
   return (
-    <div key={String(i)} className={`text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
+    <div key={String(i)} className={`text-xl font-medium ${i ? 'mt-2.5' : ''}`}>
       {benefit.label}
     </div>
   );
 }
-function renderBenefitDescription(benefit: Benefit, i: number) {
+
+function renderBenefitDescription(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-xl font-medium ${i ? 'mt-2.5' : ''}`}>
+    <div key={String(i)} className={`text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.description}
     </div>
   );

package/src/components/ProductTile/ProductTileContent.ts

@@ -5,6 +5,9 @@ import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
  * @title Продуктовая плитка
  */
 export interface ProductTileContent extends Omit<BaseTileCommonProps, 'align'> {
-  /** @title Преимущества */
+  /**
+   * @title Преимущества
+   * @maxItems 7
+   */
   benefits?: Omit<Benefit, 'icon'>[];
 }

package/src/components/StepsBlock/StepsBlock.example.json

@@ -1,5 +1,6 @@
 {
   "title": "Шаги",
+  "description": "Описание",
   "showLines": true,
   "steps": [
     {

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

@@ -0,0 +1,96 @@
+import { context } from '../../setup-fixture';
+import { StepsBlock } from './StepsBlock';
+
+const steps = [
+  {
+    label: 'Заявка на кредит',
+    description: 'Оставьте онлайн-заявку на потребительский кредит',
+  },
+  {
+    label: 'В случае одобрения',
+    description: 'Менеджер свяжется с вами и согласует встречу',
+  },
+  {
+    label: 'Получение наличных',
+    description: 'Получите наличные в отделении банка',
+  },
+];
+
+export default {
+  default: (
+    <StepsBlock
+      context={context}
+      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+      description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
+      size="normal"
+      steps={steps}
+    />
+  ),
+  'only desc': (
+    <StepsBlock
+      context={context}
+      description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
+      size="normal"
+      steps={steps}
+    />
+  ),
+
+  small: (
+    <StepsBlock
+      context={context}
+      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+      size="small"
+      steps={steps}
+    />
+  ),
+
+  'small multi-options': (
+    <StepsBlock
+      context={context}
+      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+      description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
+      size="small"
+      steps={[
+        {
+          description: 'Оставьте онлайн-заявку на потребительский кредит',
+          icon: 'ClockIcon',
+        },
+        {
+          label: 'В случае одобрения',
+          icon: 'SignDocsIcon',
+        },
+        {
+          label: 'Заявка на кредит',
+          description: 'Оставьте онлайн-заявку на потребительский кредит',
+          icon: 'ComfortableCompIcon',
+        },
+        {
+          label: 'Получение наличных',
+          icon: 'ClockIcon',
+        },
+      ]}
+    />
+  ),
+
+  'small icons': (
+    <StepsBlock
+      context={context}
+      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+      size="small"
+      steps={[
+        {
+          label: 'Заявка на кредит',
+          icon: 'EmptyWalletIcon',
+        },
+        {
+          label: 'В случае одобрения',
+          icon: 'PercentageSquareIcon',
+        },
+        {
+          label: 'Получение наличных',
+          icon: 'CalendarIcon',
+        },
+      ]}
+    />
+  ),
+};

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

@@ -1,6 +1,5 @@
 import { context } from '../../setup-fixture';
 import { StepsBlock } from './StepsBlock';
-import { StepsBlock as StepsBlockMobile } from './StepsBlock.mobile';
 
 const steps = [
   {
@@ -28,80 +27,4 @@ export default {
       />
     </div>
   ),
-  mobile: (
-    <StepsBlockMobile
-      context={context}
-      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-      description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
-      size="normal"
-      steps={steps}
-    />
-  ),
-  'mobile only desc': (
-    <StepsBlockMobile
-      context={context}
-      description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
-      size="normal"
-      steps={steps}
-    />
-  ),
-
-  'mobile small': (
-    <StepsBlockMobile
-      context={context}
-      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-      size="small"
-      steps={steps}
-    />
-  ),
-
-  'mobile small multi-options': (
-    <StepsBlockMobile
-      context={context}
-      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-      description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
-      size="small"
-      steps={[
-        {
-          description: 'Оставьте онлайн-заявку на потребительский кредит',
-          icon: 'ClockIcon',
-        },
-        {
-          label: 'В случае одобрения',
-          icon: 'SignDocsIcon',
-        },
-        {
-          label: 'Заявка на кредит',
-          description: 'Оставьте онлайн-заявку на потребительский кредит',
-          icon: 'ComfortableCompIcon',
-        },
-        {
-          label: 'Получение наличных',
-          icon: 'ClockIcon',
-        },
-      ]}
-    />
-  ),
-
-  'mobile small icons': (
-    <StepsBlockMobile
-      context={context}
-      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-      size="small"
-      steps={[
-        {
-          label: 'Заявка на кредит',
-          icon: 'EmptyWalletIcon',
-        },
-        {
-          label: 'В случае одобрения',
-          icon: 'PercentageSquareIcon',
-        },
-        {
-          label: 'Получение наличных',
-          icon: 'CalendarIcon',
-        },
-      ]}
-    />
-  ),
 };

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -7,19 +7,19 @@ import type { Step, StepsBlockContent } from './StepsBlockContent';
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
 export const StepsBlock = JSX<StepsBlockProps>(
-  ({ className, title, description, showLines = true, steps, size = 'normal' }) => {
+  ({ className, title, description, steps, size = 'normal' }) => {
     return (
       <section
-        className={`box-border font-sans text-primary-text bg-white px-20 py-[50px] flex flex-col ${
+        className={`box-border font-sans text-primary-text bg-white px-4 py-6 flex flex-col ${
           className || ''
         }`}
       >
         {title && (
-          <Title size="3XS" className="font-medium m-0 text-center">
+          <Title size="M" className="font-medium m-0 text-center">
             {title}
           </Title>
         )}
-        {description && <p className={`text-md text-center ${title && 'mt-2'}`}>{description}</p>}
+        {description && <p className={`text-m-md text-center ${title && 'mt-2'}`}>{description}</p>}
         {steps?.length ? (
           <div className={`box-border py-0.5 mb-0.5 mt-5`}>
             <div className="flex flex-col justify-between gap-x-[101px]">
@@ -32,7 +32,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
   },
 );
 
-const renderStepTitle = ({ step: step, size: size }, i: number, array: Step[]) => {
+const renderStepTitle = ({ step, size }, i: number, array: Step[]) => {
   const isLastStep = array.length - 1 === i;
   const iconAreaSize =
     size === 'normal'
@@ -40,19 +40,20 @@ const renderStepTitle = ({ step: step, size: size }, i: number, array: Step[]) =
       : 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]';
   const iconSize = size === 'normal' ? '38' : '27';
   const margin = size === 'normal' ? 'ml-[34px]' : 'ml-[24px]';
+  const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
   return (
     <div>
       <div key={String(i)} className="flex flex-row text-center relative">
         <div
           className={`${iconAreaSize} bg-secondary-light rounded-full z-10 mr-3 flex justify-center content-center`}
         >
-          <span className="font-medium text-title-xs text-secondary-text self-center">
+          <span className={`font-medium text-secondary-text self-center ${iconTextSize}`}>
             {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} />) || i + 1}
           </span>
         </div>
         <div className="flex flex-col justify-center relative">
           {step.label && (
-            <div className="font-medium text-mobile-md m-0 text-left">{step.label}</div>
+            <div className="font-medium text-m-title-xs m-0 text-left">{step.label}</div>
           )}
           {step.description && (
             <div

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -19,6 +19,7 @@ export interface Step {
 export interface StepsBlockContent {
   /** @title Заголовок */
   title?: string;
+  /** @title Описание */
   description?: string; // TODO: mobile content
   /** @title Линии */
   showLines?: boolean;