@redneckz/wildless-cms-uni-blocks 0.3.20 → 0.3.23

package/src/components/Gallery/GalleryContent.ts

@@ -38,7 +38,7 @@ export interface GalleryContent {
   description?: string;
   /**
    * @title Карточки
-   * @minItems 4
+   * @minItems 3
    */
   cards?: GalleryCard[];
   /** @title Горизонтальная прокрутка (для мобильных прокрутка shift+mouseScroll) */

package/src/components/Headline/Headline.example.json

@@ -2,5 +2,12 @@
   "title": "Заголовок",
   "description": "Описание",
   "align": "center",
-  "bgColorHeadline": "transparent"
+  "bgColorHeadline": "transparent",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 180,
+      "height": 180
+    }
+  }
 }

package/src/components/Headline/Headline.tsx

@@ -15,12 +15,14 @@ export const Headline = JSX<HeadlineProps>(
         {title && (
           <Heading
             headingType="h2"
-            className={`text-primary-text ${ALIGN_TEXT[align]}`}
+            className={`text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}
             title={title}
           />
         )}
         {description && (
-          <p className={`font-normal text-base mt-4 ${ALIGN_TEXT[align]}`}>{description}</p>
+          <p className={`font-normal text-base mt-4 ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}>
+            {description}
+          </p>
         )}
       </section>
     );

package/src/components/LinkDocs/LinkDocs.example.json

@@ -1,6 +1,6 @@
 {
-  "title": "Дополнительные документы",
-  "subtitle": "Ответы на часто задаваемые вопросы",
+  "title": "Список документов",
+  "subtitle": "Описание",
   "icon": "DocIcon",
   "documents": [
     {

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -19,7 +19,9 @@ export const LinkDocs = JSX<LinkDocsProps>(
     hasBorder = true,
   }) => {
     return (
-      <section className={`font-sans text-primary-text py-6 px-4 bg-white ${className}`}>
+      <section
+        className={`font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`}
+      >
         {title ? (
           <Heading
             headingType="h2"

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -34,7 +34,7 @@ export interface LinkDocsItem extends LinkProps {
 export interface LinkDocsContent {
   /** @title Заголовок */
   title?: string;
-  /** @title Подзаголовок */
+  /** @title Описание */
   subtitle?: string;
   /** @title Название иконки */
   icon?: IconName;

package/src/components/LinkDocs/LinkDocsHorizontalList.tsx

@@ -16,7 +16,7 @@ export const LinkDocsHorizontalList = JSX<LinkDocsHorizontalListProps>(
           ? documents.map((doc, i) => (
               <LinkDocsListItem
                 key={String(i)}
-                className={hasBorder ? 'rounded-md border-main-stroke border p-4' : ''}
+                className={hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : ''}
                 doc={doc}
                 icon={icon}
               />

package/src/components/LinkDocs/LinkDocsVerticalList.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { IconName } from '../../icons/IconName';
 import type { LinkDocsItem } from './LinkDocsContent';
 import { LinkDocsListItem } from './LinkDocsListItem';
 
@@ -20,7 +20,9 @@ export const LinkDocsVerticalList = JSX<LinkDocsVerticalListProps>(
           ? documents.map((doc, i) => (
               <div key={String(i)} role="listitem">
                 <LinkDocsListItem
-                  className={hasBorder ? 'rounded-md border-main-stroke border p-4' : ''}
+                  className={
+                    hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : ''
+                  }
                   doc={doc}
                   icon={icon}
                 />

package/src/components/MiniGallery/MiniGalleryContent.ts

@@ -2,5 +2,6 @@ import type { GalleryContent } from '../Gallery/GalleryContent';
 
 /**
  * @title Мини-галерея
+ * @minItems 3
  */
 export type MiniGalleryContent = GalleryContent;

package/src/components/MobileAppTile/MobileAppTile.mobile.tsx

@@ -19,7 +19,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
             <div className="flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]">
               <Logo className="w-[33px]" bgColor="transparent" hideTitle />
             </div>
-            <a href={href} target="_blank" className="flex flex-col justify-center pl-3">
+            <a href={href} target="_blank" className="flex flex-col justify-center pl-3 font-sans">
               <div className="text-m-button font-medium mb-[3px]">{title}</div>
               <div className="text-m-button text-secondary-text">{description}</div>
             </a>

package/src/components/OtherProducts/OtherProducts.example.json

@@ -0,0 +1,50 @@
+{
+  "title": "Другие продукты",
+  "blockItems": [
+    {
+      "label": "Другие продукты 1",
+      "blocks": [
+        {
+          "blockListType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
+        },
+        {
+          "blockListType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
+        }
+      ]
+    },
+    {
+      "label": "Другие продукты 2",
+      "blocks": [
+        {
+          "blockListType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
+        },
+        {
+          "blockListType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
+        }
+      ]
+    },
+    {
+      "label": "Другие продукты 3",
+      "blocks": [
+        {
+          "blockListType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
+        },
+        {
+          "blockListType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,137 @@
+import { context } from '../../setup-fixture';
+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 { OtherProducts } from './OtherProducts';
+import type {
+  ProductBlockBlockListDef,
+  ProductTileBlockListDef,
+  TextBlockBlockListDef,
+  TileBlockListDef,
+} from '../../ui-kit/BlocksList/BlocksListProps';
+
+const TEXT_BLOCK_OTHER_BLOCK: TextBlockBlockListDef = {
+  blockListType: 'TextBlock',
+  ...TEXT_BLOCK,
+};
+
+const PRODUCT_BLOCK_OTHER_BLOCK: ProductBlockBlockListDef = {
+  blockListType: 'ProductBlock',
+  ...PRODUCT_BLOCK,
+};
+
+const TILES_OTHER_BLOCK: TileBlockListDef = {
+  blockListType: 'Tile',
+  ...TILE,
+};
+
+const TILES_PREMIUM_OTHER_BLOCK: TileBlockListDef = {
+  blockListType: 'Tile',
+  ...TILE_PREMIUM,
+};
+
+const PRODUCT_TILES_OTHER_BLOCK: ProductTileBlockListDef = {
+  blockListType: 'ProductTile',
+  ...PRODUCT_TILE,
+};
+
+const PRODUCT_PENSION_TILES__OTHER_BLOCK: ProductTileBlockListDef = {
+  blockListType: 'ProductTile',
+  ...PRODUCT_PENSION_TILE,
+};
+
+const propsBlock: OtherProductsProps = {
+  context,
+  blockItems: [
+    {
+      label: 'Другие кредитные карты Россельхозбанка 1',
+      blocks: [
+        TILES_PREMIUM_OTHER_BLOCK,
+        TILES_PREMIUM_OTHER_BLOCK,
+        TILES_OTHER_BLOCK,
+        TILES_OTHER_BLOCK,
+      ],
+    },
+    {
+      label: 'Другие кредитные карты Россельхозбанка 2',
+      blocks: [
+        PRODUCT_TILES_OTHER_BLOCK,
+        PRODUCT_TILES_OTHER_BLOCK,
+        PRODUCT_PENSION_TILES__OTHER_BLOCK,
+        PRODUCT_PENSION_TILES__OTHER_BLOCK,
+      ],
+    },
+    {
+      label: 'Другие кредитные карты Россельхозбанка 3',
+      blocks: [PRODUCT_BLOCK_OTHER_BLOCK, PRODUCT_BLOCK_OTHER_BLOCK],
+    },
+
+    {
+      label: 'Другие кредитные карты Россельхозбанка 4',
+      blocks: [
+        TEXT_BLOCK_OTHER_BLOCK,
+        TEXT_BLOCK_OTHER_BLOCK,
+        TEXT_BLOCK_OTHER_BLOCK,
+        TEXT_BLOCK_OTHER_BLOCK,
+      ],
+    },
+  ],
+};
+
+const propsTwoColumns: OtherProductsProps = {
+  context,
+  blockItems: [
+    {
+      label: 'Другие кредитные карты Россельхозбанка 1',
+      blocks: [
+        TILES_PREMIUM_OTHER_BLOCK,
+        TILES_PREMIUM_OTHER_BLOCK,
+        TILES_OTHER_BLOCK,
+        TILES_OTHER_BLOCK,
+      ],
+      columns: 2,
+    },
+    {
+      label: 'Другие кредитные карты Россельхозбанка 2',
+      blocks: [
+        PRODUCT_TILES_OTHER_BLOCK,
+        PRODUCT_TILES_OTHER_BLOCK,
+        PRODUCT_PENSION_TILES__OTHER_BLOCK,
+        PRODUCT_PENSION_TILES__OTHER_BLOCK,
+      ],
+      columns: 2,
+    },
+    {
+      label: 'Другие кредитные карты Россельхозбанка 3',
+      blocks: [PRODUCT_BLOCK_OTHER_BLOCK, PRODUCT_BLOCK_OTHER_BLOCK],
+      columns: 2,
+    },
+
+    {
+      label: 'Другие кредитные карты Россельхозбанка 4',
+      blocks: [
+        TEXT_BLOCK_OTHER_BLOCK,
+        TEXT_BLOCK_OTHER_BLOCK,
+        TEXT_BLOCK_OTHER_BLOCK,
+        TEXT_BLOCK_OTHER_BLOCK,
+      ],
+      columns: 2,
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <OtherProducts className="col-span-12" {...propsBlock} />
+    </div>
+  ),
+
+  'two columns': (
+    <div className="container grid grid-cols-12">
+      <OtherProducts className="col-span-12" {...propsTwoColumns} />
+    </div>
+  ),
+};

package/src/components/OtherProducts/OtherProducts.tsx

@@ -0,0 +1,20 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { OtherProductsContent } from './OtherProductsContent';
+import { OtherProductsItem } from './OtherProductsItem';
+
+export interface OtherProductsProps extends OtherProductsContent, UniBlockProps {}
+
+export const OtherProducts = JSX<OtherProductsProps>(({ blockItems, context, className }) => {
+  return (
+    <section className={`font-sans bg-white text-primary-text ${className || ''}`}>
+      {blockItems?.length ? (
+        <div className="list-none m-0 p-0">
+          {blockItems.map((item, i) => (
+            <OtherProductsItem key={`BlockItem${i}`} {...item} context={context} />
+          ))}
+        </div>
+      ) : null}
+    </section>
+  );
+});

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -0,0 +1,41 @@
+import type { BlockDef, ColumnsCount } from '../../ui-kit/BlocksList/BlocksListProps';
+
+/**
+ * @title Элемент списка
+ */
+export interface blockItemCommonProps {
+  /**
+   * @title Название
+   * @default Список
+   */
+  label?: string;
+  /**
+   * @title Отображать в раскрытом виде
+   */
+  isExpanded?: boolean;
+  /** @title Блоки */
+  blocks?: BlockDef[];
+  /**
+   * @title Отображать/скрывать обводку элемента
+   * @default false
+   */
+  bordered?: boolean; // TODO: только для мобильной версии
+  columns?: ColumnsCount;
+}
+
+/**
+ * @title Другие продукты
+ */
+export interface OtherProductsContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Список */
+  blockItems?: blockItemCommonProps[];
+  /** @title Подзаголовок */
+  description?: string; // TODO: только для мобильной версии
+  /**
+   * @title Отображать/скрывать обводку у элемента списка
+   * @default false
+   */
+  bordered?: boolean; // TODO: только для мобильной версии
+}

package/src/components/OtherProducts/OtherProductsItem.tsx

@@ -0,0 +1,38 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useActiveHandler } from './useActiveHandler';
+import type { UniBlockProps } from '../../types';
+import type { blockItemCommonProps } from './OtherProductsContent';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { OtherProductsItemInner } from './OtherProductsItemInner';
+
+export interface BlockItemProps extends blockItemCommonProps, UniBlockProps {}
+
+export const OtherProductsItem = JSX<BlockItemProps>(
+  ({ label, isExpanded, blocks, columns, context }) => {
+    const { hasContent, icon, handleToggle, isActive } = useActiveHandler({
+      context,
+      blocks,
+      initialState: isExpanded,
+    });
+
+    return (
+      <div className="border-0 border-b border-solid border-main-divider">
+        {hasContent ? (
+          <OtherProductsItemInner
+            isExpanded={isActive}
+            columns={columns}
+            blocks={blocks}
+            context={context}
+          />
+        ) : null}
+        <button
+          className="border-none bg-primary-main px-0 py-[25px] w-full font-sans text-white text-base flex justify-center cursor-pointer"
+          onClick={handleToggle}
+        >
+          <span className="pr-3">{isActive ? 'Скрыть' : label}</span>
+          {hasContent ? <Icon name={icon} width="20" height="20" asSVG /> : null}
+        </button>
+      </div>
+    );
+  },
+);

package/src/components/OtherProducts/OtherProductsItemInner.tsx

@@ -0,0 +1,14 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockItemProps } from './OtherProductsItem';
+import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+
+export const OtherProductsItemInner = JSX<BlockItemProps>(({ blocks, columns = 1, context }) => {
+  const className = 'box-border p-5';
+  return (
+    <div className="transition-all duration-300 max-h-0 overflow-hidden">
+      <div className={`box-border w-full p-9 ${columns > 1 ? 'flex flex-wrap' : ''}`}>
+        {renderBlocksList({ context, className, columns, blocks })}
+      </div>
+    </div>
+  );
+});

package/src/components/OtherProducts/useActiveHandler.ts

@@ -0,0 +1,24 @@
+import type { IconName } from '../../icons/IconName';
+import { ActiveHandler } from '../../ui-kit/BlocksList/BlocksListProps';
+
+export const useActiveHandler = ({ context, blocks, initialState = false }: ActiveHandler) => {
+  const [isActive, setIsActive] = context.useState(initialState);
+  const hasContent = blocks?.length;
+  const icon: IconName = isActive ? 'ArrowUpIcon' : 'ArrowDownIcon';
+
+  const getContentBlock = ({ currentTarget }) => currentTarget.previousSibling;
+
+  const handleToggle = (e: MouseEvent) => {
+    if (!hasContent) {
+      return;
+    }
+
+    setIsActive(!isActive);
+    const contentBlock = getContentBlock(e);
+    contentBlock.style.maxHeight = contentBlock.style.maxHeight
+      ? null
+      : `${contentBlock.scrollHeight}px`;
+  };
+
+  return { isActive, hasContent, icon, handleToggle };
+};

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

@@ -4,7 +4,8 @@
   "image": {
     "format": "webp",
     "size": {
-      "width": 300
+      "width": 234,
+      "height": 234
     }
   },
   "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],

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

@@ -10,7 +10,8 @@
         "image": {
           "format": "webp",
           "size": {
-            "width": 280
+            "width": 234,
+            "height": 234
           }
         },
         "description": "Описание",

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

@@ -1,4 +1,5 @@
 {
+  "version": "primary",
   "title": "Шаги",
   "description": "Описание",
   "showLines": true,

package/src/components/TariffsTable/TariffsTable.mobile.tsx

@@ -18,7 +18,9 @@ export const TariffsTable = JSX<TariffsTableProps>(
     const tiles = getTiles(rowHeaders, colData);
 
     return (
-      <section className={`px-4 py-6 bg-white font-sans text-primary-text ${className}`}>
+      <section
+        className={`px-4 py-6 bg-white font-sans text-primary-text overflow-x-hidden ${className}`}
+      >
         {title ? (
           <Heading
             headingType="h2"

package/src/components/TextBlock/TextBlock.example.json

@@ -6,8 +6,8 @@
   "image": {
     "format": "webp",
     "size": {
-      "width": 48,
-      "height": 48
+      "width": 43,
+      "height": 43
     }
   }
 }

package/src/components/TextBlock/TextBlockContent.ts

@@ -1,7 +1,7 @@
 import type { Picture } from '../../model/Picture';
 
 /**
- * @title Цвет плитки
+ * @title Цвет блока
  * @enumNames ["Основная", "Второстепенная", "Второстепенная прозрачная"]
  */
 export type TextBlockVersion = 'primary' | 'secondary' | 'secondary-light';

package/src/content-page-repository/transformPicture.ts

@@ -13,8 +13,9 @@ export async function transformPicture(
   options: TransformationOptions,
 ): Promise<Picture> {
   const sources = picture.sources || [];
+  const src = picture?.src || '';
   const [transformedPicture, ...transformedSources] = await Promise.all(
-    [picture].concat(sources).map((_) => transformImg(pagePath, picture.src, { ...options, ..._ })),
+    [picture].concat(sources).map((_) => transformImg(pagePath, src, { ...options, ..._ })),
   );
   return {
     ...picture,

package/src/icons/ArrowDownIcon.svg

@@ -0,0 +1,4 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.8416 10.709L11.6582 12.8923C11.0166 13.534 9.96657 13.534 9.3249 12.8923L3.8999 7.45898" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.1001 7.45898L16.2334 8.32565" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/ArrowUpIcon.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3416 9.29163L11.1582 7.10829C10.5166 6.46662 9.46657 6.46662 8.8249 7.10829L3.3999 12.5416" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.6001 12.5416L15.7334 11.675" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>