@redneckz/wildless-cms-uni-blocks 0.3.11 → 0.3.14

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

@@ -31,109 +31,111 @@ const creditCard: Picture = {
   },
 };
 
-export default (
-  <div className="container grid grid-cols-12">
-    <ProductGallery
-      className="col-span-12"
-      context={context}
-      slides={[
-        {
-          nav: {
-            title: 'Деньги на любые цели',
-            desc: 'Ставка от 12,5% годовых на срок до 5 лет',
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ProductGallery
+        className="col-span-12"
+        context={context}
+        slides={[
+          {
+            nav: {
+              title: 'Деньги на любые цели',
+              desc: 'Ставка от 12,5% годовых на срок до 5 лет',
+            },
+            productBlock: {
+              title: 'Ставка от 12,5% годовых на срок до 5 лет!',
+              headingType: 'h2',
+              items: [
+                'Потребительский кредит по специальной процентной ставке',
+                'Получите деньги без залога и поручительства',
+                'Кредитный лимит до 5 млн рублей',
+              ],
+              buttons: [
+                {
+                  href: 'https://rshb.ru',
+                  text: 'Подробнее',
+                  target: '_blank',
+                  version: 'primary',
+                },
+              ],
+              image: moneyImage,
+            },
           },
-          productBlock: {
-            title: 'Ставка от 12,5% годовых на срок до 5 лет!',
-            headingType: 'h2',
-            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 лет!',
+              headingType: 'h2',
+              items: [
+                'Потребительский кредит по специальной процентной ставке',
+                'Получите деньги без залога и поручительства',
+                'Кредитный лимит до 5 млн рублей',
+              ],
+              buttons: [
+                {
+                  href: 'https://rshb.ru',
+                  text: 'Подробнее',
+                  target: '_blank',
+                  version: 'primary',
+                },
+              ],
+              image: worker,
+            },
           },
-        },
-        {
-          nav: {
-            title: 'Для людей в возрасте',
-            desc: 'Ставка от 12,5% годовых на срок до 3 лет',
+          {
+            nav: {
+              title: 'Выгодно покупать',
+              desc: 'Дополнительные бонусные баллы за покупки',
+            },
+            productBlock: {
+              title: 'Дополнительные бонусные баллы за покупки!',
+              headingType: 'h2',
+              items: [
+                'Потребительский кредит по специальной процентной ставке',
+                'Получите деньги без залога и поручительства',
+                'Кредитный лимит до 5 млн рублей',
+              ],
+              buttons: [
+                {
+                  href: 'https://rshb.ru',
+                  text: 'Подробнее',
+                  target: '_blank',
+                  version: 'primary',
+                },
+              ],
+              image: creditCard,
+            },
           },
-          productBlock: {
-            title: 'Ставка от 12,5% годовых на срок до 3 лет!',
-            headingType: 'h2',
-            items: [
-              'Потребительский кредит по специальной процентной ставке',
-              'Получите деньги без залога и поручительства',
-              'Кредитный лимит до 5 млн рублей',
-            ],
-            buttons: [
-              {
-                href: 'https://rshb.ru',
-                text: 'Подробнее',
-                target: '_blank',
-                version: 'primary',
-              },
-            ],
-            image: worker,
+          {
+            nav: {
+              title: 'Карты Unionpay',
+              desc: 'Кэшбэк до 20% у партнеров',
+            },
+            productBlock: {
+              title: 'Карты Unionpay',
+              headingType: 'h2',
+              items: [
+                'Потребительский кредит по специальной процентной ставке',
+                'Получите деньги без залога и поручительства',
+                'Кредитный лимит до 5 млн рублей',
+              ],
+              buttons: [
+                {
+                  href: 'https://rshb.ru',
+                  text: 'Подробнее',
+                  target: '_blank',
+                  version: 'primary',
+                },
+              ],
+              image: creditCard,
+            },
           },
-        },
-        {
-          nav: {
-            title: 'Выгодно покупать',
-            desc: 'Дополнительные бонусные баллы за покупки',
-          },
-          productBlock: {
-            title: 'Дополнительные бонусные баллы за покупки!',
-            headingType: 'h2',
-            items: [
-              'Потребительский кредит по специальной процентной ставке',
-              'Получите деньги без залога и поручительства',
-              'Кредитный лимит до 5 млн рублей',
-            ],
-            buttons: [
-              {
-                href: 'https://rshb.ru',
-                text: 'Подробнее',
-                target: '_blank',
-                version: 'primary',
-              },
-            ],
-            image: creditCard,
-          },
-        },
-        {
-          nav: {
-            title: 'Карты Unionpay',
-            desc: 'Кэшбэк до 20% у партнеров',
-          },
-          productBlock: {
-            title: 'Карты Unionpay',
-            headingType: 'h2',
-            items: [
-              'Потребительский кредит по специальной процентной ставке',
-              'Получите деньги без залога и поручительства',
-              'Кредитный лимит до 5 млн рублей',
-            ],
-            buttons: [
-              {
-                href: 'https://rshb.ru',
-                text: 'Подробнее',
-                target: '_blank',
-                version: 'primary',
-              },
-            ],
-            image: creditCard,
-          },
-        },
-      ]}
-    />
-  </div>
-);
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/ProductGallery/ProductGalleryContent.ts

@@ -19,7 +19,7 @@ export interface ProductSlide {
 }
 
 /**
- * @title Продуктовая галерея
+ * @title Продуктовая галерея (для мобильных горизонтальная прокрутка shift+mouseScroll)
  */
 export interface ProductGalleryContent {
   /**

package/src/components/ProductTile/ProductTile.example.json

@@ -7,6 +7,7 @@
       "width": 300
     }
   },
+  "version": "primary",
   "benefits": [
     {
       "label": "Преимущество 1",

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

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

package/src/components/Recommendation/Recommendation.example.json

@@ -0,0 +1,38 @@
+{
+  "title": "Блок рекомендаций",
+  "recommendations": [
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 180,
+          "height": 180
+        }
+      },
+      "title": "Заголовок 1",
+      "description": "Описание 1"
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 180,
+          "height": 180
+        }
+      },
+      "title": "Заголовок 2",
+      "description": "Описание 2"
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 180,
+          "height": 180
+        }
+      },
+      "title": "Заголовок 3",
+      "description": "Описание 3"
+    }
+  ]
+}

package/src/components/Recommendation/Recommendation.fixture.tsx

@@ -0,0 +1,73 @@
+import type { Picture } from '../../model/Picture';
+import { context } from '../../setup-fixture';
+import { Recommendation, RecommendationProps } from './Recommendation';
+
+const creditCard: Picture = {
+  src: 'credit-card-1.png',
+  format: 'webp',
+  size: {
+    width: 180,
+    height: 180,
+  },
+  title: 'credit-card-1',
+};
+
+const chair: Picture = {
+  src: 'chair.png',
+  format: 'webp',
+  size: {
+    width: 180,
+    height: 180,
+  },
+  title: 'chair',
+};
+
+export const defaultProps: RecommendationProps = {
+  context,
+  title: 'С этим продуктом приобретают',
+  recommendations: [
+    {
+      title: 'Кредиты',
+      items: ['до 10 000 000 ₽', 'до 10 лет'],
+      image: chair,
+    },
+    {
+      title: 'Кредитные карты',
+      description: 'Льготный период 120 дней',
+      image: creditCard,
+    },
+    {
+      title: 'Кредитные карты',
+      description: 'Льготный период 120 дней',
+      image: creditCard,
+    },
+    {
+      title: 'Кредитные карты',
+      description: 'Льготный период 120 дней',
+      image: creditCard,
+    },
+    {
+      title: 'Кредитные карты',
+      description: 'Льготный период 120 дней',
+      image: creditCard,
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div>
+      <div className="container grid grid-cols-12" data-theme="pc">
+        <Recommendation className="col-span-12 mb-1" version="secondary" {...defaultProps} />
+      </div>
+
+      <div className="container grid grid-cols-12" data-theme="bc">
+        <Recommendation className="col-span-12 mb-1" version="secondary" {...defaultProps} />
+      </div>
+
+      <div className="container grid grid-cols-12 mb-1">
+        <Recommendation className="col-span-12" {...defaultProps} />
+      </div>
+    </div>
+  ),
+};

package/src/components/Recommendation/Recommendation.tsx

@@ -0,0 +1,105 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { RecommendationCard } from './RecommendationCard';
+import type { RecommendationCardContent, RecommendationContent } from './RecommendationContent';
+
+const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
+const CARD_FULL_VIEW_COUNT = 2;
+const CARD_SHIFT = 525;
+
+export interface RecommendationProps extends RecommendationContent, UniBlockProps {}
+
+export const Recommendation = JSX<RecommendationProps>(
+  ({ context, recommendations = [], className = '', title, version }) => {
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+
+    const blockClassName =
+      version === 'secondary' ? 'bg-primary-main text-white' : 'bg-white text-primary-text';
+    const cardClassName = version === 'secondary' ? 'border-main-divider' : 'border-main-stroke';
+
+    return (
+      <section
+        className={`relative font-sans p-[50px] overflow-hidden ${blockClassName} ${className}`}
+      >
+        {title ? <Heading headingType="h3" className="mb-8" title={title} /> : null}
+        <div
+          className="flex duration-1000 gap-4"
+          style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
+          role="list"
+        >
+          {recommendations?.length
+            ? recommendations.map(
+                renderRecommendationCard({ context, version, className: cardClassName }),
+              )
+            : null}
+        </div>
+        {renderNavButtons({
+          cardsCount: recommendations.length,
+          activeCardIndex,
+          setActiveCardIndex,
+        })}
+        <div
+          className={`${BLUR_BLOCK_CLASSES} left-0 ${
+            version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'
+          }`}
+        />
+        <div
+          className={`${BLUR_BLOCK_CLASSES} right-0 ${
+            version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'
+          }`}
+        />
+      </section>
+    );
+  },
+);
+
+const renderRecommendationCard =
+  ({ context, version, className }) =>
+  (card: RecommendationCardContent, i: number) => {
+    return (
+      <RecommendationCard
+        key={String(i)}
+        context={context}
+        {...card}
+        version={version}
+        className={className}
+      />
+    );
+  };
+
+const renderNavButtons = ({
+  cardsCount,
+  activeCardIndex,
+  setActiveCardIndex,
+}: {
+  cardsCount: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (number) => void;
+}) => {
+  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+  const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
+  const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
+  const showPrevButton = isUseSlider && activeCardIndex > 0;
+
+  return (
+    <div>
+      {showPrevButton && (
+        <ArrowButton
+          className="absolute top-1/2 left-8 rotate-180 z-10 mt-6"
+          onClick={handlePrevClick}
+          ariaLabel="Пролистать влево"
+        />
+      )}
+      {showNextButton && (
+        <ArrowButton
+          className="absolute top-1/2 right-8 z-10 mt-6"
+          onClick={handleNextClick}
+          ariaLabel="Пролистать вправо"
+        />
+      )}
+    </div>
+  );
+};