@redneckz/wildless-cms-uni-blocks 0.2.93 → 0.2.97

package/src/components/LinkDocs/LinkDocs.tsx

@@ -13,7 +13,7 @@ const titleAlignStyleMap: Record<AlignType, string> = {
 
 const titleMarginsStyleMap: Record<LinkColumnsMode, string> = {
   double: 'mb-8',
-  single: '',
+  single: 'mb-[26px]',
 };
 
 const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
@@ -24,7 +24,7 @@ const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
 export const LinkDocs = JSX<LinkDocsProps>(
-  ({ className, title, align, documents, icon, columnsMode = 'single' }) => {
+  ({ className, title, align, documents, icon, columnsMode = 'double' }) => {
     const containerClasses = linkColumnsModeStyleMap[columnsMode];
 
     return (
@@ -49,7 +49,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
                   role="listitem"
                   {...linkProps}
                 >
-                  {icon && <Icon className="mr-3.5" name={icon} width="24px" height="24px" />}
+                  {icon && <Icon className="mr-2.5 h-fit" name={icon} width="24px" height="24px" />}
                   <span className="self-center">
                     {text}
                     <span className="text-secondary-text group-hover:text-primary-main">

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -16,11 +16,11 @@ export interface LinkDocsItem extends LinkProps {
 /**
  * @title Список документов
  */
-export interface LinkDocsContent extends Pick<BaseTileCommonProps, 'align' | 'title'> {
+export interface LinkDocsContent extends Pick<BaseTileCommonProps, 'title' | 'align'> {
+  /** @title Отображение списка */
+  columnsMode?: LinkColumnsMode;
   /** @title Название иконки */
   icon?: IconName;
   /** @title Список */
   documents?: LinkDocsItem[];
-  /** @title Отображение списка */
-  columnsMode?: LinkColumnsMode;
 }

package/src/components/MiniGallery/MiniGallery.fixture.tsx

@@ -1,7 +1,6 @@
+import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
-
 import { MiniGallery, MiniGalleryProps } from './MiniGallery';
-import { Picture } from '../../model/Picture';
 
 const image: Picture = {
   src: 'domovoj-kupon.png',
@@ -10,6 +9,7 @@ const image: Picture = {
     width: 120,
     height: 70,
   },
+  title: 'domovoj-kupon',
 };
 
 const defaultProps: MiniGalleryProps = {
@@ -39,16 +39,6 @@ const defaultProps: MiniGalleryProps = {
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
       image,
     },
-    {
-      title: 'Фермерские продукты',
-      description: 'Высокий процент даже при небольшой сумме денежных средств',
-      image,
-    },
-    {
-      title: 'Фермерские продукты',
-      description: 'Высокий процент даже при небольшой сумме денежных средств',
-      image,
-    },
   ],
 };
 
@@ -73,18 +63,18 @@ const onlyTitleProps: MiniGalleryProps = {
       title: '«Моя выгода»',
       image,
     },
-    {
-      title: 'Фермерские продукты',
-      image,
-    },
-    {
-      title: 'Фермерские продукты',
-      image,
-    },
   ],
 };
 
 export default {
-  default: <MiniGallery {...defaultProps} />,
-  'only title': <MiniGallery {...onlyTitleProps} />,
+  default: (
+    <div className="container grid grid-cols-12">
+      <MiniGallery className="col-span-12" {...defaultProps} />
+    </div>
+  ),
+  'only title': (
+    <div className="container grid grid-cols-12">
+      <MiniGallery className="col-span-12" {...onlyTitleProps} />
+    </div>
+  ),
 };

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -4,7 +4,7 @@ import { MobileAppTile } from './MobileAppTile';
 
 export default {
   default: (
-    <div className="grid grid-cols-12">
+    <div className="container grid grid-cols-12">
       <MobileAppTile
         context={context}
         className="col-span-4"
@@ -18,6 +18,7 @@ export default {
             text: 'App Store',
             icon: 'AppleIcon',
             href: '#',
+            asSVG: true,
             version: 'secondary',
           },
           {
@@ -25,6 +26,7 @@ export default {
             text: 'Google Play',
             icon: 'PlayMarketIcon',
             href: '#',
+            asSVG: true,
             version: 'secondary',
           },
         ]}

package/src/components/PictureText/PictureText.example.json

@@ -1,5 +1,5 @@
 {
-  "title": "Продукт",
+  "title": "Блок с картинкой",
   "description": "Описание",
   "image": {
     "format": "webp",

package/src/components/PictureText/PictureText.fixture.tsx

@@ -32,5 +32,9 @@ export const PICTURE_TEXT: PictureTextContent = {
 };
 
 export default {
-  default: <PictureText context={context} {...PICTURE_TEXT} />,
+  default: (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" context={context} {...PICTURE_TEXT} />
+    </div>
+  ),
 };

package/src/components/Placeholder/Placeholder.fixture.tsx

@@ -2,4 +2,8 @@ import { context } from '../../setup-fixture';
 
 import { Placeholder } from './Placeholder';
 
-export default <Placeholder context={context} title="Неизвестный блок" />;
+export default (
+  <div className="container grid grid-cols-12">
+    <Placeholder className="col-span-12" context={context} title="Неизвестный блок" />
+  </div>
+);

package/src/components/ProductBlock/ProductBlock.example.json

@@ -10,7 +10,7 @@
   "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
   "buttons": [
     {
-      "text": "Подробнее",
+      "text": "Кнопка",
       "version": "secondary"
     }
   ]

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

@@ -1,11 +1,12 @@
 import { context } from '../../setup-fixture';
 
-import { ProductBlock } from './ProductBlock';
 import type { Picture } from '../../model/Picture';
+import { ProductBlock } from './ProductBlock';
 
 const image: Picture = {
   src: 'money-1.png',
   format: 'webp',
+  alt: 'Потребительский кредит наличными',
   size: {
     width: 280,
     height: 280,
@@ -14,83 +15,146 @@ const image: Picture = {
 
 export default {
   default: (
-    <ProductBlock
-      context={context}
-      title={'Потребительский кредит наличными'}
-      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',
-        },
-      ]}
-      image={image}
-    />
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        title={'Потребительский кредит наличными'}
+        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',
+          },
+        ]}
+        image={image}
+      />
+    </div>
+  ),
+  secondary: (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        context={context}
+        className="col-span-12"
+        title={'Потребительский кредит наличными'}
+        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',
+          },
+        ]}
+        image={image}
+      />
+    </div>
   ),
   'with items': (
-    <ProductBlock
-      context={context}
-      title={'Оплата проходит \nв 180 странах мира'}
-      breadcrumbs={[]}
-      description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-      items={[
-        'Совершайте любые личные покупки',
-        'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
-        'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
-      ]}
-      buttons={[
-        {
-          href: 'https://rshb.ru',
-          text: 'Оформить карту',
-          target: '_blank',
-          version: 'primary',
-        },
-        {
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'secondary',
-        },
-      ]}
-      image={image}
-    />
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        title={'Оплата проходит \nв 180 странах мира'}
+        breadcrumbs={[]}
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        items={[
+          'Совершайте любые личные покупки',
+          'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
+          'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
+        ]}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Оформить карту',
+            target: '_blank',
+            version: 'primary',
+          },
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+        image={image}
+      />
+    </div>
   ),
 };

package/src/components/ProductBlock/ProductBlock.tsx

@@ -1,30 +1,43 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ProductBlockContent } from './ProductBlockContent';
-import { ProductBlockInner } from './ProductBlockInner';
+import { useLink } from '../../hooks/useLink';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Breadcrumb } from '../../ui-kit/Breadcrumb';
-import { useLink } from '../../hooks/useLink';
 import { joinList } from '../../utils/joinList';
+import type { ProductBlockContent } from './ProductBlockContent';
+import { ProductBlockInner } from './ProductBlockInner';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
+const productBlockStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
+const breadcrumbsStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white/80',
+};
+
 export const ProductBlock = JSX<ProductBlockProps>((props) => {
-  const { context, className, breadcrumbs } = props;
+  const { context, className, breadcrumbs, version = 'primary' } = props;
   const router = context.useRouter();
   const { handlerDecorator } = context;
   return (
     <section
-      className={`font-sans bg-white pt-10 pl-[50px] pb-[50px] pr-[7.5rem] ${className || ''}`}
+      className={`font-sans pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${
+        className || ''
+      } ${productBlockStyleMap[version]}`}
     >
       {breadcrumbs?.length ? (
         <div className="text-xs mb-6">
-          {joinList(<span className="text-secondary-text mx-2">/</span>)(
+          {joinList(<span className={`mx-2 ${breadcrumbsStyleMap[version]}`}>/</span>)(
             breadcrumbs.map((breadcrumb, i) => (
               <Breadcrumb
                 key={String(i)}
                 {...useLink(
                   { router, handlerDecorator },
-                  { className: 'text-secondary-text', ...breadcrumb },
+                  { className: breadcrumbsStyleMap[version], ...breadcrumb },
                 )}
               />
             )),

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,9 +1,21 @@
 import type { LinkProps } from '../../model/LinkProps';
+import type { TitleSize } from '../../ui-kit/Title/TitleProps';
 import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
-export interface ProductBlockInnerCommonProps extends BaseTileCommonProps {
-  /** @title Преимущества */
+export interface ProductBlockInnerCommonProps
+  extends Omit<BaseTileCommonProps, 'align' | 'titleSize'> {
+  /**
+   * @title Размер заголовка
+   * @default M
+   * @hidden
+   */
+  titleSize?: TitleSize;
+  /**
+   * @title Преимущества
+   * @minItems 2
+   * @maxItems 3
+   */
   benefits?: Benefit[];
 }
 

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img';
@@ -8,8 +9,32 @@ import type { ProductBlockInnerCommonProps } from './ProductBlockContent';
 
 export interface ProductBlockInnerProps extends ProductBlockInnerCommonProps, UniBlockProps {}
 
+const benefitIconBgStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-main',
+  secondary: 'bg-white/30',
+};
+const benefitTitleStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-white',
+};
+const benefitDescStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white',
+};
+
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
-  ({ className, context, title, titleSize, description, benefits, buttons, image, items }) => {
+  ({
+    className,
+    context,
+    title,
+    titleSize,
+    description,
+    benefits,
+    buttons,
+    image,
+    items,
+    version = 'primary',
+  }) => {
     return (
       <div className={`flex grow justify-between items-stretch ${className || ''}`}>
         <div className={'flex flex-col'}>
@@ -20,9 +45,12 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             description={description}
             items={items}
             buttons={buttons}
+            version={version}
           >
             {benefits?.length ? (
-              <div className="flex gap-6 mt-6 mb-3.5">{benefits.map(renderBenefit)}</div>
+              <div className="flex gap-6 mt-6 mb-3.5">
+                {benefits.map((_, i) => renderBenefit(_, i, version))}
+              </div>
             ) : null}
           </BaseTile>
         </div>
@@ -32,21 +60,25 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   },
 );
 
-function renderBenefit(benefit: Benefit, i: number) {
+function renderBenefit(benefit: Benefit, i: number, version: string) {
   return (
     <div key={String(i)} className="flex gap-4 items-center">
       {benefit.icon && (
         <Icon
-          className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] bg-main rounded-full p-[10px] box-border"
+          className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${benefitIconBgStyleMap[version]}`}
           name={benefit.icon}
           width="24"
           height="24"
         />
       )}
-      <div className="flex gap-1 flex-col h-full">
-        <h4 className="font-medium text-primary-text text-xl m-0">{benefit.label}</h4>
+      <div className="flex gap-1 flex-col h-full max-w-[149px]">
+        <h4 className={`font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`}>
+          {benefit.label}
+        </h4>
         {benefit.description && (
-          <div className="font-normal text-sm text-secondary-text">{benefit.description}</div>
+          <div className={`font-normal text-sm ${benefitDescStyleMap[version]}`}>
+            {benefit.description}
+          </div>
         )}
       </div>
     </div>