@redneckz/wildless-cms-uni-blocks 0.3.10 → 0.3.13

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

@@ -1,6 +1,8 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { ProductBlock } from './ProductBlock';
+import { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -18,45 +20,68 @@ const image: Picture = {
   ],
 };
 
+const benefits = [
+  {
+    label: 'До 5 млн ₽',
+    description: 'Кредитный лимит',
+    icon: 'EmptyWalletIcon',
+  },
+  {
+    label: 'От 16,9%',
+    description: 'Ставка по кредиту',
+    icon: 'PercentageSquareIcon',
+  },
+  {
+    label: 'До 5 лет',
+    description: 'Срок кредитования',
+    icon: 'CalendarIcon',
+  },
+];
+
+const buttons = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Оформить карту',
+    target: '_blank',
+    version: 'primary',
+  },
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
+  },
+] as ButtonWithIconProps;
+
+const items = [
+  'Совершайте любые личные покупки',
+  'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
+  'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
+];
+
 export default {
-  primary: (
+  default: (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        title={'Кредит до 5 000 000 Р\nбез залога и поручителей'}
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefits={benefits as Benefit[]}
+        buttons={buttons as ButtonWithIconProps[]}
+        image={image}
+      />
+    </div>
+  ),
+  items: (
     <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
         title={'Кредит до 5 000 000 Р\nбез залога и поручителей'}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        benefits={[
-          {
-            label: 'До 5 млн ₽',
-            description: 'Кредитный лимит',
-            icon: 'EmptyWalletIcon',
-          },
-          {
-            label: 'От 16,9%',
-            description: 'Ставка по кредиту',
-            icon: 'PercentageSquareIcon',
-          },
-          {
-            label: 'До 5 лет',
-            description: 'Срок кредитования',
-            icon: 'CalendarIcon',
-          },
-        ]}
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Оформить карту',
-            target: '_blank',
-            version: 'primary',
-          },
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'secondary',
-          },
-        ]}
+        items={items}
+        buttons={buttons as ButtonWithIconProps[]}
         image={image}
       />
     </div>

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -1,6 +1,9 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { ProductBlock } from './ProductBlock';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ProductBlockContent } from './ProductBlockContent';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -12,6 +15,66 @@ const image: Picture = {
   },
 };
 
+const breadcrumbs = [
+  {
+    text: 'Главная',
+    href: '/',
+  },
+  {
+    text: 'Кредитные карты',
+    href: '/credit',
+  },
+  {
+    text: 'Кредитная карта Своя Union Pay',
+  },
+];
+
+const benefits = [
+  {
+    label: 'До 5 млн ₽',
+    description: 'Кредитный лимит',
+    icon: 'EmptyWalletIcon',
+  },
+  {
+    label: 'От 16,9%',
+    description: 'Ставка по кредиту',
+    icon: 'PercentageSquareIcon',
+  },
+  {
+    label: 'До 5 лет',
+    description: 'Срок кредитования',
+    icon: 'CalendarIcon',
+  },
+];
+
+const buttons: ButtonWithIconProps[] = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Оформить карту',
+    target: '_blank',
+    version: 'primary',
+  },
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
+  },
+];
+
+export const PRODUCT_BLOCK: ProductBlockContent = {
+  title: 'Оплата проходит в 180 странах мира',
+  headingType: 'h2',
+  description:
+    'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
+  items: [
+    'Совершайте любые личные покупки',
+    'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
+    'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
+  ],
+  buttons: buttons,
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -21,50 +84,9 @@ export default {
         title={'Потребительский кредит наличными'}
         headingType="h2"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        breadcrumbs={[
-          {
-            text: 'Главная',
-            href: '/',
-          },
-          {
-            text: 'Кредитные карты',
-            href: '/credit',
-          },
-          {
-            text: 'Кредитная карта Своя Union Pay',
-          },
-        ]}
-        benefits={[
-          {
-            label: 'До 5 млн ₽',
-            description: 'Кредитный лимит',
-            icon: 'EmptyWalletIcon',
-          },
-          {
-            label: 'От 16,9%',
-            description: 'Ставка по кредиту',
-            icon: 'PercentageSquareIcon',
-          },
-          {
-            label: 'До 5 лет',
-            description: 'Срок кредитования',
-            icon: 'CalendarIcon',
-          },
-        ]}
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Оформить карту',
-            target: '_blank',
-            version: 'primary',
-          },
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'secondary',
-          },
-        ]}
+        breadcrumbs={breadcrumbs}
+        benefits={benefits as Benefit[]}
+        buttons={buttons}
         image={image}
       />
     </div>
@@ -78,51 +100,9 @@ export default {
         headingType="h2"
         version={'secondary'}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        breadcrumbs={[
-          {
-            text: 'Главная',
-            href: '/',
-          },
-          {
-            text: 'Кредитные карты',
-            href: '/credit',
-          },
-          {
-            text: 'Кредитная карта Своя Union Pay',
-            href: '#',
-          },
-        ]}
-        benefits={[
-          {
-            label: 'До 5 млн ₽',
-            description: 'Кредитный лимит',
-            icon: 'EmptyWalletWhiteIcon',
-          },
-          {
-            label: 'От 16,9%',
-            description: 'Ставка по кредиту',
-            icon: 'PercentageSquareWhiteIcon',
-          },
-          {
-            label: 'До 5 лет',
-            description: 'Срок кредитования',
-            icon: 'CalendarWhiteIcon',
-          },
-        ]}
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Оформить карту',
-            target: '_blank',
-            version: 'secondary',
-          },
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'primary',
-          },
-        ]}
+        breadcrumbs={breadcrumbs}
+        benefits={benefits as Benefit[]}
+        buttons={buttons as ButtonWithIconProps[]}
         image={image}
       />
     </div>
@@ -132,31 +112,20 @@ export default {
       <ProductBlock
         className="col-span-12"
         context={context}
-        title={'Оплата проходит \nв 180 странах мира'}
-        headingType="h2"
-        breadcrumbs={[]}
-        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        items={[
-          'Совершайте любые личные покупки',
-          'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
-          'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
-        ]}
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Оформить карту',
-            target: '_blank',
-            version: 'primary',
-          },
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'secondary',
-          },
-        ]}
+        breadcrumbs={breadcrumbs}
+        {...PRODUCT_BLOCK}
         image={image}
       />
     </div>
   ),
+  'without image': (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        breadcrumbs={breadcrumbs}
+        {...PRODUCT_BLOCK}
+      />
+    </div>
+  ),
 };

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -20,6 +20,7 @@ export type ProductBlockInnerContent = HeadingContent &
      */
     benefits?: Benefit[];
     version?: BlockVersion;
+    buttons?: ButtonContent[];
   };
 
 /**

package/src/components/ProductBlock/ProductBlockInner.mobile.tsx

@@ -34,7 +34,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
                 <Heading
                   headingType={headingType}
                   title={title}
-                  className={`whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}`}
+                  className="whitespace-pre-wrap max-w-[600px]"
                 />
               )
             }
@@ -48,11 +48,11 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
               ) : null
             }
           >
-            {description ? <Description className="mb-5" description={description} /> : null}
-            {benefits?.length ? (
-              <div className="mt-5">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
+            {description ? <Description className="mt-3" description={description} /> : null}
+            {benefits?.filter((items) => items.label)?.length ? (
+              <div className="mt-3">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
             ) : null}
-            {items?.length ? <List items={items} /> : null}
+            {items?.length ? <List className="mt-3" items={items} /> : null}
           </BaseTile>
         </div>
         {renderImage(image)}

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -34,7 +34,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
                 <Heading
                   headingType={headingType}
                   title={title}
-                  className={`whitespace-pre-wrap mb-4 max-w-[600px]`}
+                  className="whitespace-pre-wrap max-w-[600px]"
                 />
               )
             }
@@ -45,10 +45,10 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             }
           >
             {description && (
-              <Description className="text-m-base max-w-[600px]" description={description} />
+              <Description className="text-m-base mt-4 max-w-[600px]" description={description} />
             )}
-            {benefits?.length ? (
-              <div className="flex gap-6 mt-6 mb-3.5">
+            {benefits?.filter((items) => items.label)?.length ? (
+              <div className="flex gap-6 mt-6">
                 {benefits.map((_, i) => renderBenefit(_, i, version))}
               </div>
             ) : null}

package/src/components/ProductGallery/ProductGallery.example.json

@@ -14,7 +14,8 @@
           }
         },
         "description": "Описание",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+        "version": "primary"
       }
     }
   ]

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",