@redneckz/wildless-cms-uni-blocks 0.2.92 → 0.2.96

package/src/components/ComparisonTable/ComparisonTable.fixture.tsx

@@ -195,71 +195,61 @@ const columns2: Column[] = [
 
 export default {
   'with images': (
-    <div className="w-[1280px]">
-      <div className="grid grid-cols-12">
-        <ComparisonTable
-          className="col-span-12"
-          title="Другие дебетовые карты Россельхозбанка"
-          context={context}
-          rowHeaders={rowHeaders}
-          columns={Array(2).fill(columns).flat()}
-        />
-      </div>
+    <div className="container grid grid-cols-12">
+      <ComparisonTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={Array(2).fill(columns).flat()}
+      />
     </div>
   ),
   'with images and hidden rows': (
-    <div className="w-[1280px]">
-      <div className="grid grid-cols-12">
-        <ComparisonTable
-          className="col-span-12"
-          title="Другие дебетовые карты Россельхозбанка"
-          visibleRowLength={3}
-          context={context}
-          rowHeaders={rowHeaders}
-          columns={Array(2).fill(columns).flat()}
-        />
-      </div>
+    <div className="container grid grid-cols-12">
+      <ComparisonTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        visibleRowLength={3}
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={Array(2).fill(columns).flat()}
+      />
     </div>
   ),
   'with images and colored first column': (
-    <div className="w-[1280px]">
-      <div className="grid grid-cols-12">
-        <ComparisonTable
-          className="col-span-12"
-          title="Другие дебетовые карты Россельхозбанка"
-          visibleRowLength={3}
-          isColoredFirstColumn={true}
-          context={context}
-          rowHeaders={rowHeaders}
-          columns={Array(2).fill(columns).flat()}
-        />
-      </div>
+    <div className="container grid grid-cols-12">
+      <ComparisonTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        visibleRowLength={3}
+        isColoredFirstColumn={true}
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={Array(2).fill(columns).flat()}
+      />
     </div>
   ),
   'with icons': (
-    <div className="w-[1280px]">
-      <div className="grid grid-cols-12">
-        <ComparisonTable
-          className="col-span-12"
-          title="Другие вклады и сбережения"
-          context={context}
-          rowHeaders={rowHeaders2}
-          columns={Array(2).fill(columns2).flat()}
-        />
-      </div>
+    <div className="container grid grid-cols-12">
+      <ComparisonTable
+        className="col-span-12"
+        title="Другие вклады и сбережения"
+        context={context}
+        rowHeaders={rowHeaders2}
+        columns={Array(2).fill(columns2).flat()}
+      />
     </div>
   ),
   'with icons and two cols': (
-    <div className="w-[1280px]">
-      <div className="grid grid-cols-12">
-        <ComparisonTable
-          className="col-span-12"
-          title="Другие вклады и сбережения"
-          context={context}
-          rowHeaders={rowHeaders2}
-          columns={columns2.slice(0, 2)}
-        />
-      </div>
+    <div className="container grid grid-cols-12">
+      <ComparisonTable
+        className="col-span-12"
+        title="Другие вклады и сбережения"
+        context={context}
+        rowHeaders={rowHeaders2}
+        columns={columns2.slice(0, 2)}
+      />
     </div>
   ),
 };

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -1,15 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
+import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../types';
 import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
 import { Title } from '../../ui-kit/Title/Title';
-import { TableRowContainer } from './TableRowContainer';
-import { TableCarouselContainer } from './TableCarouselContainer';
-import { useLink } from '../../hooks/useLink';
 import type { ComparisonTableContent } from './ComparisonTableContent';
+import { COLS_LENGTH_FOR_SCROLL, COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
 import { HeaderCell } from './HeaderCell';
+import { TableCarouselContainer } from './TableCarouselContainer';
 import { TableRow } from './TableRow';
-import { COLS_LENGTH_FOR_SCROLL, COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
-import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
+import { TableRowContainer } from './TableRowContainer';
 
 export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
 
@@ -39,12 +39,12 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
       .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
 
     const { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton } =
-      useComparisonTableScroll(
+      useComparisonTableScroll({
         colData,
-        COLS_LENGTH_FOR_SCROLL,
+        colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
         activeCardIndex,
         setActiveCardIndex,
-      );
+      });
 
     const showToggle = () => setIsShowAllRow(!isShowAllRow);
 

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -17,7 +17,7 @@ export interface HeaderCellProps {
 
 export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) => (
   <div
-    className={`w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-12 ${BORDER_CLASSES} ${GRADIENT}`}
+    className={`w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES} ${GRADIENT}`}
     role="columnheader"
     scope="col"
   >
@@ -29,7 +29,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
         height="63"
       />
     )}
-    {image?.src && <Img className="mb-4" image={image} />}
+    {image?.src && <Img className="mb-[18px]" image={image} />}
     {title && (
       <Title size="S" className="font-medium m-0 text-center text-white">
         {title}
@@ -42,7 +42,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
           target={link.target}
           className="mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active"
         >
-          <div className="text-xs py-[11px]">{link.text}</div>
+          <div className="font-medium text-xs py-[11px]">{link.text}</div>
         </Button>
       </div>
     )}

package/src/components/ContentPage/ContentPage.fixture.tsx

@@ -1,12 +1,12 @@
 import { context, mobileContext } from '../../setup-fixture';
 
+import type { ContentPageDef } from '../../types';
 import { Blocks } from '../Blocks';
-import { BlockDecorator, ContentPage } from './ContentPage';
 import { MobileBlocks } from '../MobileBlocks';
+import { BlockDecorator, ContentPage } from './ContentPage';
 import { toMobilePage } from './toMobilePage';
-import type { ContentPageDef } from '../../types';
 
-const data = require('./ContentPage.page.json');
+import data from './ContentPage.page.json';
 
 const blockDecorator: BlockDecorator = ({ blockClassName, block, render }, i) => (
   <div

package/src/components/ContentPage/ContentPage.page.json

@@ -11,26 +11,32 @@
   "date": "2022-04-08",
   "style": ["p-20", "pt-0", "gap-5", "bg-secondary-light"],
   "likeControl": true,
-  "blocks": [
-    {
-      "type": "Header",
-      "style": ["col-span-12", "-mx-20", "mb-5", "shadow-[0_8px_32px_0px_#00000014]"],
-      "content": {
-        "defaultLocation": "Москва",
-        "topItems": [
-          {
-            "href": "https://rshb.ru/",
-            "text": "Бизнес клиентам",
-            "target": "_blank"
-          },
-          {
-            "href": "https://rshb.ru/",
-            "text": "Частным клиентам",
-            "target": "_blank"
+  "slots": {
+    "header": {
+      "blocks": [
+        {
+          "type": "Header",
+          "style": ["-mx-20", "mb-5", "shadow-[0_8px_32px_0px_#00000014]"],
+          "content": {
+            "defaultLocation": "Москва",
+            "topItems": [
+              {
+                "href": "https://rshb.ru/",
+                "text": "Бизнес клиентам",
+                "target": "_blank"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Частным клиентам",
+                "target": "_blank"
+              }
+            ]
           }
-        ]
-      }
-    },
+        }
+      ]
+    }
+  },
+  "blocks": [
     {
       "type": "ProductGallery",
       "style": ["col-span-12"],
@@ -92,6 +98,7 @@
                 "src": "worker.png",
                 "title": "Рабочий",
                 "format": "webp",
+                "alt": "Кредит наличными",
                 "size": {
                   "width": 280,
                   "height": 280
@@ -106,7 +113,6 @@
             },
             "productBlock": {
               "title": "Дополнительные бонусные баллы за покупки!»",
-              "description": "Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.",
               "buttons": [
                 {
                   "href": "https://rshb.ru",
@@ -119,6 +125,7 @@
                 "src": "credit-card-1.png",
                 "title": "Кредитка",
                 "format": "webp",
+                "alt": "Кредит наличными",
                 "size": {
                   "width": 280,
                   "height": 280
@@ -133,7 +140,6 @@
             },
             "productBlock": {
               "title": "Карты Unionpay»",
-              "description": "Кэшбэк до 20% у партнеров",
               "items": [
                 "Потребительский кредит по специальной процентной ставке",
                 "Получите деньги без залога и поручительства",
@@ -151,6 +157,7 @@
                 "src": "credit-card-1.png",
                 "title": "Кредитка",
                 "format": "webp",
+                "alt": "Кредит наличными",
                 "size": {
                   "width": 280,
                   "height": 280
@@ -1408,7 +1415,7 @@
             "href": "/abc7/yolo.png"
           },
           {
-            "text": "Some more generic text, and even more, more text",
+            "text": "Some more generic text, and even more, more text, and more generic text, and even more, more text, and even more",
             "href": "/abc8/archive.zip",
             "fileSize": "2.3МБ"
           },
@@ -1490,7 +1497,9 @@
                     "size": {
                       "width": 288,
                       "height": 56
-                    }
+                    },
+                    "alt": "Платёжные системы",
+                    "title": "Платёжные системы"
                   }
                 }
               ],
@@ -1520,11 +1529,7 @@
                 {
                   "label": "Бесплатно",
                   "list": {
-                    "items": [
-                      "item 1",
-                      "item 2",
-                      "item 3"
-                    ]
+                    "items": ["item 1", "item 2", "item 3"]
                   }
                 }
               ],
@@ -1536,7 +1541,8 @@
                     "size": {
                       "width": 140,
                       "height": 140
-                    }
+                    },
+                    "alt": "Деньги"
                   }
                 }
               ]
@@ -1571,11 +1577,7 @@
                 {
                   "list": {
                     "isDotted": false,
-                    "items": [
-                      "item 1",
-                      "item 2",
-                      "item 3"
-                    ]
+                    "items": ["item 1", "item 2", "item 3"]
                   }
                 }
               ],
@@ -1592,11 +1594,7 @@
                 {
                   "list": {
                     "version": "primary",
-                    "items": [
-                      "item 1",
-                      "item 2",
-                      "item 3"
-                    ]
+                    "items": ["item 1", "item 2", "item 3"]
                   }
                 }
               ],
@@ -1680,7 +1678,9 @@
                     "size": {
                       "width": 288,
                       "height": 56
-                    }
+                    },
+                    "alt": "Платёжные системы",
+                    "title": "Платёжные системы"
                   }
                 }
               ],
@@ -1710,11 +1710,7 @@
                 {
                   "label": "Бесплатно",
                   "list": {
-                    "items": [
-                      "item 1",
-                      "item 2",
-                      "item 3"
-                    ]
+                    "items": ["item 1", "item 2", "item 3"]
                   }
                 }
               ],
@@ -1726,7 +1722,8 @@
                     "size": {
                       "width": 140,
                       "height": 140
-                    }
+                    },
+                    "alt": "Деньги"
                   }
                 }
               ]
@@ -1761,11 +1758,7 @@
                 {
                   "list": {
                     "isDotted": false,
-                    "items": [
-                      "item 1",
-                      "item 2",
-                      "item 3"
-                    ]
+                    "items": ["item 1", "item 2", "item 3"]
                   }
                 }
               ],
@@ -1782,11 +1775,7 @@
                 {
                   "list": {
                     "version": "primary",
-                    "items": [
-                      "item 1",
-                      "item 2",
-                      "item 3"
-                    ]
+                    "items": ["item 1", "item 2", "item 3"]
                   }
                 }
               ],

package/src/components/ContentPage/ContentPage.tsx

@@ -3,6 +3,7 @@ import type { BlockDef, ContentPageDef, UniBlockProps } from '../../types';
 import type { BlockContent } from '../BlockContent';
 import { LikeControl } from '../LikeControl/LikeControl';
 import { Placeholder } from '../Placeholder/Placeholder';
+import { ContentPageContext } from './ContentPageContext';
 
 interface BlockDecoratorProps<VNode> {
   blockClassName: string;
@@ -20,12 +21,21 @@ export type JSXBlock = (
   context?: any,
 ) => any;
 
+export type BlocksRegistry = Record<string, JSXBlock>;
+
 export interface ContentPageProps extends UniBlockProps {
-  blocksRegistry: Record<string, JSXBlock>;
+  blocksRegistry: BlocksRegistry;
   data: ContentPageDef;
   blockDecorator?: BlockDecorator;
 }
 
+export interface RenderBlockFunc {
+  block: BlockDef;
+  blockDecorator: BlockDecorator;
+  blocksRegistry: BlocksRegistry;
+  context: ContentPageContext;
+}
+
 const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
   render({ blockClassName, block });
 
@@ -34,14 +44,32 @@ export const ContentPage = JSX<ContentPageProps>(
     className,
     context,
     blocksRegistry,
-    data: { style: pageStyle, blocks, likeControl, colorPalette = 'pc' },
+    data: { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' },
     blockDecorator = defaultBlockDecorator,
   }) => {
+    const { header } = slots;
+
     return (
-      <section className="relative" data-theme={colorPalette}>
-        <div className={`grid grid-cols-12 gap-1 ${style2className(pageStyle)} ${className || ''}`}>
-          {blocks?.length ? blocks.map(renderBlock) : null}
-        </div>
+      <section
+        className={`relative ${style2className(pageStyle)} ${className || ''}`}
+        data-theme={colorPalette}
+      >
+        {header?.blocks?.length ? (
+          <div className={`${style2className(header?.style)}`}>
+            {header.blocks.map((block, i) =>
+              renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+            )}
+          </div>
+        ) : null}
+
+        {blocks?.length ? (
+          <div className="container grid grid-cols-12 gap-1">
+            {blocks.map((block, i) =>
+              renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+            )}
+          </div>
+        ) : null}
+
         {likeControl && (
           <div className="flex items-end absolute bottom-0 right-0 h-full pointer-events-none">
             <LikeControl
@@ -52,39 +80,46 @@ export const ContentPage = JSX<ContentPageProps>(
         )}
       </section>
     );
-
-    function renderBlock(block: BlockDef, i: number) {
-      const { type } = block;
-      if (!(type in blocksRegistry)) {
-        console.warn(`No block with "${type}" is registered`);
-      }
-
-      const BlockComponent = blocksRegistry[type] || Placeholder;
-      return blockDecorator(
-        {
-          blockClassName: style2className(block.style),
-          block,
-          render: (props) => {
-            const { version, content, blocks } = props.block;
-            return (
-              <BlockComponent
-                key={`${type}-${i}`}
-                className={props.blockClassName}
-                version={version}
-                context={context}
-                {...content}
-              >
-                {blocks?.length ? blocks.map(renderBlock) : null}
-              </BlockComponent>
-            );
-          },
-        },
-        `block-${i}`,
-      );
-    }
   },
 );
 
+function renderBlock(
+  { block, blockDecorator, blocksRegistry, context }: RenderBlockFunc,
+  i: number,
+) {
+  const { type } = block;
+  if (!(type in blocksRegistry)) {
+    console.warn(`No block with "${type}" is registered`);
+  }
+
+  const BlockComponent = blocksRegistry[type] || Placeholder;
+  return blockDecorator(
+    {
+      blockClassName: style2className(block.style),
+      block,
+      render: (props) => {
+        const { version, content, blocks } = props.block;
+        return (
+          <BlockComponent
+            key={`${type}-${i}`}
+            className={props.blockClassName}
+            version={version}
+            context={context}
+            {...content}
+          >
+            {blocks?.length
+              ? blocks.map((block, i) =>
+                  renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+                )
+              : null}
+          </BlockComponent>
+        );
+      },
+    },
+    `block-${i}`,
+  );
+}
+
 function style2className(style: string[] | undefined | null): string {
   return style ? style.join(' ') : '';
 }

package/src/components/ContentPage/ContentPageHead.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { ContentPageMeta } from '../../types';
 
 export interface ContentPageHeadProps {
-  HeadComponent: Function;
+  HeadComponent: <Props, Context, VNode>(props: Props, context?: Context) => VNode;
   data: ContentPageMeta;
 }
 

package/src/components/ContentPage/toMobilePage.ts

@@ -1,13 +1,30 @@
 import type { BlockDef, ContentPageDef } from '../../types';
 
 export function toMobilePage(contentPage: ContentPageDef): ContentPageDef {
-  const blocks = contentPage.blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
+  const { blocks, slots } = contentPage;
+
   return {
     ...contentPage,
-    blocks,
+    blocks: getMobileBlocks(blocks),
+    slots:
+      slots &&
+      Object.keys(slots).reduce(
+        (res, key) => ({
+          ...res,
+          [key]: {
+            ...slots[key],
+            blocks: getMobileBlocks(slots[key].blocks),
+          },
+        }),
+        {},
+      ),
   };
 }
 
+function getMobileBlocks(blocks?: BlockDef[]) {
+  return blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
+}
+
 function toMobileBlock(block: BlockDef): BlockDef {
   const { mobile } = block;
   if (mobile) {

package/src/components/CreditCalculator/CreditCalculator.fixture.tsx

@@ -1,4 +1,12 @@
 import { CreditCalculator } from './CreditCalculator';
 import { context } from '../../setup-fixture';
 
-export default <CreditCalculator context={context} directoryName="credit-calculator-data" />;
+export default (
+  <div className="container grid grid-cols-12">
+    <CreditCalculator
+      className="col-span-12"
+      context={context}
+      directoryName="credit-calculator-data"
+    />
+  </div>
+);