@redneckz/wildless-cms-uni-blocks 0.3.30 → 0.3.33

package/src/components/OtherProducts/OtherProducts.fixture.tsx

@@ -3,13 +3,24 @@ import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
 import { PRODUCT_TILE, PRODUCT_PENSION_TILE } from '../ProductTile/ProductTile.fixture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import { TILE, TILE_PREMIUM } from '../Tile/Tile.fixture';
-import type { OtherProductsProps } from './OtherProducts';
+import { HEADLINE } from '../Headline/Headline.fixture';
+import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
+import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
+import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
 import { OtherProducts } from './OtherProducts';
+import type { OtherProductsProps } from './OtherProducts';
+
 import type {
   ProductBlockBlockListDef,
   ProductTileBlockListDef,
   TextBlockBlockListDef,
   TileBlockListDef,
+  GalleryBlockListDef,
+  HeadlineBlockListDef,
+  LinkDocsBlockListDef,
+  MiniGalleryBlockListDef,
+  PictureTextBlockListDef,
 } from '../../ui-kit/BlocksList/BlocksListProps';
 
 const TEXT_BLOCK_OTHER_BLOCK: TextBlockBlockListDef = {
@@ -42,11 +53,36 @@ const PRODUCT_PENSION_TILES__OTHER_BLOCK: ProductTileBlockListDef = {
   ...PRODUCT_PENSION_TILE,
 };
 
+const HEADLINE_OTHER_BLOCK: HeadlineBlockListDef = {
+  blockListType: 'Headline',
+  ...HEADLINE,
+};
+
+const PICTURE_TEXT_OTHER_BLOCK: PictureTextBlockListDef = {
+  blockListType: 'PictureText',
+  ...PICTURE_TEXT,
+};
+
+const LINK_DOCS_OTHER_BLOCK: LinkDocsBlockListDef = {
+  blockListType: 'LinkDocs',
+  ...linkDocsContentExample,
+};
+
+const GALLERY_OTHER_BLOCK: GalleryBlockListDef = {
+  blockListType: 'Gallery',
+  ...GALLERY,
+};
+
+const MINI_GALLERY_OTHER_BLOCK: MiniGalleryBlockListDef = {
+  blockListType: 'MiniGallery',
+  ...MINI_GALLERY,
+};
+
 const propsBlock: OtherProductsProps = {
   context,
   blockItems: [
     {
-      label: 'Другие кредитные карты Россельхозбанка 1',
+      label: 'OtherProducts №1 Tiles',
       blocks: [
         TILES_PREMIUM_OTHER_BLOCK,
         TILES_PREMIUM_OTHER_BLOCK,
@@ -55,7 +91,7 @@ const propsBlock: OtherProductsProps = {
       ],
     },
     {
-      label: 'Другие кредитные карты Россельхозбанка 2',
+      label: 'OtherProducts №2 Product_Tiles',
       blocks: [
         PRODUCT_TILES_OTHER_BLOCK,
         PRODUCT_TILES_OTHER_BLOCK,
@@ -64,12 +100,11 @@ const propsBlock: OtherProductsProps = {
       ],
     },
     {
-      label: 'Другие кредитные карты Россельхозбанка 3',
+      label: 'OtherProducts №3 Product_Block',
       blocks: [PRODUCT_BLOCK_OTHER_BLOCK, PRODUCT_BLOCK_OTHER_BLOCK],
     },
-
     {
-      label: 'Другие кредитные карты Россельхозбанка 4',
+      label: 'OtherProducts №4 Text_Block',
       blocks: [
         TEXT_BLOCK_OTHER_BLOCK,
         TEXT_BLOCK_OTHER_BLOCK,
@@ -77,6 +112,26 @@ const propsBlock: OtherProductsProps = {
         TEXT_BLOCK_OTHER_BLOCK,
       ],
     },
+    {
+      label: 'OtherProducts №5 Picture_Text',
+      blocks: [PICTURE_TEXT_OTHER_BLOCK],
+    },
+    {
+      label: 'OtherProducts №6 Headline',
+      blocks: [HEADLINE_OTHER_BLOCK],
+    },
+    {
+      label: 'OtherProducts №7 Link_Docs',
+      blocks: [LINK_DOCS_OTHER_BLOCK],
+    },
+    {
+      label: 'OtherProducts №8 Gallery',
+      blocks: [GALLERY_OTHER_BLOCK],
+    },
+    {
+      label: 'OtherProducts №9 Mini_Gallery',
+      blocks: [MINI_GALLERY_OTHER_BLOCK],
+    },
   ],
 };
 

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -15,11 +15,6 @@ export interface blockItemCommonProps {
   isExpanded?: boolean;
   /** @title Блоки */
   blocks?: BlockDef[];
-  /**
-   * @title Отображать/скрывать обводку элемента
-   * @default false
-   */
-  bordered?: boolean; // TODO: только для мобильной версии
   columns?: ColumnsCount;
 }
 
@@ -29,13 +24,9 @@ export interface blockItemCommonProps {
 export interface OtherProductsContent {
   /** @title Заголовок */
   title?: string;
-  /** @title Список */
-  blockItems?: blockItemCommonProps[];
-  /** @title Подзаголовок */
-  description?: string; // TODO: только для мобильной версии
   /**
-   * @title Отображать/скрывать обводку у элемента списка
-   * @default false
+   * @title Список
+   * @maxItems 10
    */
-  bordered?: boolean; // TODO: только для мобильной версии
+  blockItems?: blockItemCommonProps[];
 }

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

@@ -7,14 +7,20 @@
       "width": 300
     }
   },
+  "version": "primary",
+  "directionRight": false,
   "benefits": [
     {
       "label": "Преимущество №1",
-      "icon": "DocumentTextIcon"
+      "icon": {
+        "icon": "DocumentTextIcon"
+      }
     },
     {
       "label": "Преимущество №2",
-      "icon": "DocumentTextIcon"
+      "icon": {
+        "icon": "DocumentTextIcon"
+      }
     }
   ]
 }

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

@@ -20,12 +20,12 @@ export const PICTURE_TEXT: PictureTextContent = {
     {
       label: 'Кредит по одному документу',
       description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
-      icon: 'DocumentTextIcon',
+      icon: { icon: 'DocumentTextIcon' },
     },
     {
       label: 'Кредит на общих условиях',
       description: 'До 5 млн ₽ на общих условиях получения кредита',
-      icon: 'DocumentTextIcon',
+      icon: { icon: 'DocumentTextIcon' },
     },
   ],
   image,

package/src/components/PictureText/PictureText.tsx

@@ -2,25 +2,40 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import type { PictureTextContent } from './PictureTextContent';
 
+import { BlockVersion } from '../../model/BlockVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
+const pictureTextStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
 export const PictureText = JSX<PictureTextProps>(
-  ({ className = '', title, image, benefits, anchor = null }) => {
+  ({
+    className = '',
+    title,
+    image,
+    benefits,
+    version = 'primary',
+    directionRight = false,
+    anchor = null,
+  }) => {
     return (
       <section
-        className={`relative font-sans text-primary-text bg-white p-14 ${className}`}
+        className={`relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`}
         id={anchor}
       >
         <Heading headingType="h2" className="text-center" title={title} />
         <div className={'flex justify-center mt-9'}>
-          {image?.src && <Img className="mr-6" image={image} />}
+          {image?.src && <Img className={directionRight ? 'order-2 ml-6' : 'mr-6'} image={image} />}
           {benefits?.length ? (
-            <div className="flex flex-col">{benefits.map(renderBenefit)}</div>
+            <div className="flex flex-col">
+              {benefits.map((_, i) => renderBenefit(_, i, version))}
+            </div>
           ) : null}
         </div>
       </section>
@@ -28,24 +43,34 @@ export const PictureText = JSX<PictureTextProps>(
   },
 );
 
-function renderBenefit(benefit: Benefit, i: number) {
+function renderBenefit(benefit: Benefit, i: number, version: string) {
   return (
     <div key={String(i)} className="flex flex-row mb-8">
-      {benefit.icon && (
-        <Icon
+      {benefit.icon ? (
+        <Img
           className="w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]"
-          name={benefit.icon}
+          image={benefit.icon}
           width="48"
           height="48"
           asSVG
         />
-      )}
+      ) : null}
       <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
         {benefit.label && (
-          <div className="font-medium text-primary-text text-xl m-0">{benefit.label}</div>
+          <div
+            className={`font-medium text-xl m-0 ${
+              version === 'primary' ? 'text-primary-text' : ''
+            }`}
+          >
+            {benefit.label}
+          </div>
         )}
         {benefit.description && (
-          <div className="font-normal text-sm text-secondary-text">{benefit.description}</div>
+          <div
+            className={`font-normal text-sm ${version === 'primary' ? 'text-secondary-text' : ''}`}
+          >
+            {benefit.description}
+          </div>
         )}
       </div>
     </div>

package/src/components/PictureText/PictureTextContent.ts

@@ -1,3 +1,4 @@
+import { BlockVersion } from '../../model/BlockVersion';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
@@ -8,6 +9,12 @@ export type TitleWithImageContent = HeadingContent & ImageContent;
  * @title Картинка с текстом
  */
 export interface PictureTextContent extends TitleWithImageContent {
+  version?: BlockVersion;
   /** @title Список преимуществ */
   benefits?: Benefit[];
+  /**
+   * @title Картинка справа/текст слева
+   * @default false
+   */
+  directionRight?: boolean;
 }

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

@@ -8,7 +8,11 @@
       "height": 234
     }
   },
-  "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+  "items": [
+    "Элемент списка 1",
+    "Элемент списка 2",
+    "Элемент списка 3"
+  ],
   "isDotted": true,
   "buttons": [
     {
@@ -20,11 +24,15 @@
   "benefits": [
     {
       "label": "Преимущество №1",
-      "icon": "ClockIcon"
+      "icon": {
+        "icon": "ClockIcon"
+      }
     },
     {
       "label": "Преимущество №2",
-      "icon": "SignDocsIcon"
+      "icon": {
+        "icon": "SignDocsIcon"
+      }
     }
   ]
 }

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

@@ -29,17 +29,17 @@ const benefits: Benefit[] = [
   {
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
-    icon: 'EmptyWalletIcon',
+    icon: { icon: 'EmptyWalletIcon' },
   },
   {
     label: 'От 16,9%',
     description: 'Ставка по кредиту',
-    icon: 'PercentageSquareIcon',
+    icon: { icon: 'PercentageSquareIcon' },
   },
   {
     label: 'До 5 лет',
     description: 'Срок кредитования',
-    icon: 'CalendarIcon',
+    icon: { icon: 'CalendarIcon' },
   },
 ];
 

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

@@ -29,21 +29,21 @@ const breadcrumbs = [
   },
 ];
 
-const benefits = [
+const benefits: Benefit[] = [
   {
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
-    icon: 'EmptyWalletIcon',
+    icon: { icon: 'EmptyWalletIcon' },
   },
   {
     label: 'От 16,9%',
     description: 'Ставка по кредиту',
-    icon: 'PercentageSquareIcon',
+    icon: { icon: 'PercentageSquareIcon' },
   },
   {
     label: 'До 5 лет',
     description: 'Срок кредитования',
-    icon: 'CalendarIcon',
+    icon: { icon: 'CalendarIcon' },
   },
 ];
 
@@ -85,7 +85,7 @@ export default {
         headingType="h2"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         breadcrumbs={breadcrumbs}
-        benefits={benefits as Benefit[]}
+        benefits={benefits}
         buttons={buttons}
         image={image}
       />
@@ -101,8 +101,8 @@ export default {
         version={'secondary'}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         breadcrumbs={breadcrumbs}
-        benefits={benefits as Benefit[]}
-        buttons={buttons as ButtonWithIconProps[]}
+        benefits={benefits}
+        buttons={buttons}
         image={image}
       />
     </div>

package/src/components/ProductBlock/ProductBlock.tsx

@@ -22,7 +22,7 @@ const breadcrumbsStyleMap: Record<BlockVersion, string> = {
 export const ProductBlock = JSX<ProductBlockProps>((props) => {
   const {
     context,
-    className,
+    className = '',
     breadcrumbs,
     version = 'primary',
     anchor = null,
@@ -33,9 +33,7 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
 
   return (
     <section
-      className={`font-sans pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${
-        className || ''
-      } ${productBlockStyleMap[version]}`}
+      className={`font-sans pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap[version]} ${className}`}
       id={anchor}
     >
       {breadcrumbs?.length ? (

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -20,7 +20,10 @@ export type ProductBlockInnerContent = HeadingContent &
      */
     benefits?: Benefit[];
     version?: BlockVersion;
-    /** @title Буллиты */
+    /**
+     *  @title Буллиты
+     *  @default true
+     */
     isDotted?: boolean;
     /** @title Лейбл (моб.) */
     label?: string;
@@ -29,8 +32,6 @@ export type ProductBlockInnerContent = HeadingContent &
      * @hidden
      */
     textBlockClassName?: string;
-    /** @title Фоновый текст под иллюстрацией */
-    backgroundText?: string;
   };
 
 /**

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -2,7 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Description } from '../../ui-kit/Description/Description';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -26,7 +25,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     isDotted = true,
     textBlockClassName = '',
   }) => {
-    const textColor = version === 'secondary' ? 'text-white' : '';
+    const textColor = version === 'secondary' ? 'text-white' : 'text-primary-text';
     return (
       <div className={`flex grow justify-between items-stretch ${className}`}>
         <div className={`flex flex-col ${textBlockClassName}`}>
@@ -36,7 +35,10 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             buttons={getButtons(context, buttons)}
           >
             {description && (
-              <Description className="mt-4 max-w-[600px]" description={description} />
+              <Description
+                className={`mt-[18px] max-w-[600px] text-title-new-sm font-light ${textColor}`}
+                description={description}
+              />
             )}
             {benefits?.filter((items) => items.label)?.length ? (
               <div className="flex gap-6 mt-6">
@@ -45,7 +47,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             ) : null}
             {items?.length ? (
               <List
-                className="mt-5 text-m-base"
+                className="mt-5 text-title-new-sm font-light"
                 items={items}
                 itemClassName="mb-[10px]"
                 version={version}
@@ -61,14 +63,9 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
 );
 
 const getTitle = (title, headingType, textColor) => {
+  const Tag = headingType;
   return (
-    title && (
-      <Heading
-        headingType={headingType}
-        title={title}
-        className={`whitespace-pre-wrap max-w-[600px] ${textColor}`}
-      />
-    )
+    title && <Tag className={`font-sans font-medium m-0 text-title-xl ${textColor}`}>{title}</Tag>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 const benefitTitleStyleMap: Record<BlockVersion, string> = {
@@ -14,16 +14,16 @@ const benefitDescStyleMap: Record<BlockVersion, string> = {
 export function renderBenefit(benefit: Benefit, i: number, version: BlockVersion) {
   return (
     <div key={String(i)} className="flex gap-3 items-center mb-2.5 last:mb-0">
-      {benefit.icon && (
-        <Icon
+      {benefit.icon ? (
+        <Img
           className="w-6 h-6 rounded-full box-border"
-          name={benefit.icon}
+          image={benefit.icon}
           width="24"
           height="24"
           asSVG
           color={version}
         />
-      )}
+      ) : null}
       <div className={`font-medium text-m-title-xs m-0 ${benefitTitleStyleMap[version]}`}>
         {benefit.label}
       </div>

package/src/components/ProductBlock/renderBenefit.tsx

@@ -1,5 +1,5 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 const benefitIconBgStyleMap: Record<BlockVersion, string> = {
@@ -18,15 +18,15 @@ const benefitDescStyleMap: Record<BlockVersion, string> = {
 export function renderBenefit(benefit: Benefit, i: number, version: string) {
   return (
     <div key={String(i)} className="flex gap-4 items-center">
-      {benefit.icon && (
-        <Icon
+      {benefit.icon ? (
+        <Img
           className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${benefitIconBgStyleMap[version]}`}
-          name={benefit.icon}
+          image={benefit.icon}
           width="24"
           height="24"
           asSVG
         />
-      )}
+      ) : null}
       <div className="flex gap-1 flex-col h-full max-w-[149px]">
         <div className={`font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`}>
           {benefit.label}

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

@@ -3,7 +3,7 @@
     {
       "nav": {
         "title": "Заголовок",
-        "desc": "Описание"
+        "description": "Описание"
       },
       "productBlock": {
         "title": "Продуктовая галерея",
@@ -15,6 +15,27 @@
           }
         },
         "description": "Описание",
+        "isDotted": "true",
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+        "version": "primary"
+      }
+    },
+    {
+      "nav": {
+        "title": "Заголовок",
+        "description": "Описание"
+      },
+      "productBlock": {
+        "title": "Продуктовая галерея",
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 234,
+            "height": 234
+          }
+        },
+        "description": "Описание",
+        "isDotted": "true",
         "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
         "version": "primary"
       }