@redneckz/wildless-cms-uni-blocks 0.2.116 → 0.3.2

package/src/components/Accordion/Accordion.fixture.tsx

@@ -3,36 +3,64 @@ import { HEADLINE } from '../Headline/Headline.fixture';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
+import { TILE } from '../Tile/Tile.fixture';
+import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
+import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
 import type { AccordionProps } from './Accordion';
 import { Accordion } from './Accordion';
 import type {
-  HeadlineAccordionBlock,
-  LinkDocsAccordionBlock,
-  PictureTextAccordionBlock,
-  TextBlockAccordionBlock,
+  HeadlineAccordionBlockDef,
+  LinkDocsAccordionBlockDef,
+  PictureTextAccordionBlockDef,
+  TextBlockAccordionBlockDef,
+  TileAccordionBlockDef,
+  ProductTileAccordionBlockDef,
+  GalleryAccordionBlockDef,
+  MiniGalleryAccordionBlockDef,
 } from './AccordionContent';
 
-const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockAccordionBlock = {
+const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockAccordionBlockDef = {
   accordionBlockType: 'TextBlock',
   ...TEXT_BLOCK,
 };
 
-const HEADLINE_ACCORDION_BLOCK: HeadlineAccordionBlock = {
+const HEADLINE_ACCORDION_BLOCK: HeadlineAccordionBlockDef = {
   accordionBlockType: 'Headline',
   ...HEADLINE,
 };
 
-const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlock = {
+const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlockDef = {
   accordionBlockType: 'PictureText',
   ...PICTURE_TEXT,
 };
 
-const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlock = {
+const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlockDef = {
   accordionBlockType: 'LinkDocs',
   ...linkDocsContentExample,
   title: '',
 };
 
+const TILES_ACCORDION_BLOCK: TileAccordionBlockDef = {
+  accordionBlockType: 'Tile',
+  ...TILE,
+};
+
+const PRODUCT_TILES_ACCORDION_BLOCK: ProductTileAccordionBlockDef = {
+  accordionBlockType: 'ProductTile',
+  ...PRODUCT_TILE,
+};
+
+const GALLERY_ACCORDION_BLOCK: GalleryAccordionBlockDef = {
+  accordionBlockType: 'Gallery',
+  ...GALLERY,
+};
+
+const MINI_GALLERY_ACCORDION_BLOCK: MiniGalleryAccordionBlockDef = {
+  accordionBlockType: 'MiniGallery',
+  ...MINI_GALLERY,
+};
+
 const propsTextBlock: AccordionProps = {
   title: 'Accordion title',
   context,
@@ -53,6 +81,22 @@ const propsTextBlock: AccordionProps = {
       label: 'Accordion label 4',
       blocks: [LINK_DOCS_ACCORDION_BLOCK],
     },
+    {
+      label: 'Accordion label 5',
+      blocks: [TILES_ACCORDION_BLOCK],
+    },
+    {
+      label: 'Accordion label 6',
+      blocks: [PRODUCT_TILES_ACCORDION_BLOCK],
+    },
+    {
+      label: 'Accordion label 7',
+      blocks: [GALLERY_ACCORDION_BLOCK],
+    },
+    {
+      label: 'Accordion label 8',
+      blocks: [MINI_GALLERY_ACCORDION_BLOCK],
+    },
   ],
 };
 

package/src/components/Accordion/Accordion.mobile.tsx

@@ -14,7 +14,7 @@ export const Accordion = JSX<AccordionProps>(
           bordered ? 'px-4' : ''
         } ${className}`}
       >
-        {title ? <Heading type="h3" className="mb-2 text-center" text={title} /> : null}
+        {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
         {description ? <div className="mb-5 text-m-md text-center">{description}</div> : null}
         {accordionItems?.length ? (
           <ul className="list-none m-0 p-0">

package/src/components/Accordion/Accordion.tsx

@@ -9,7 +9,7 @@ export interface AccordionProps extends AccordionContent, UniBlockProps {}
 export const Accordion = JSX<AccordionProps>(({ title, accordionItems, context, className }) => {
   return (
     <section className={`p-[50px] font-sans bg-white text-primary-text ${className || ''}`}>
-      {title ? <Heading type="h4" className="mb-2.5" text={title} /> : null}
+      {title ? <Heading headingType="h4" className="mb-2.5" title={title} /> : null}
       {accordionItems?.length ? (
         <ul className="list-none m-0 p-0">
           {accordionItems.map((item, i) => (

package/src/components/Accordion/AccordionBlocks.tsx

@@ -2,10 +2,18 @@ import { Headline } from '../Headline/Headline';
 import { LinkDocs } from '../LinkDocs/LinkDocs';
 import { PictureText } from '../PictureText/PictureText';
 import { TextBlock } from '../TextBlock/TextBlock';
+import { Tile } from '../Tile/Tile';
+import { ProductTile } from '../ProductTile/ProductTile';
+import { Gallery } from '../Gallery/Gallery';
+import { MiniGallery } from '../MiniGallery/MiniGallery';
 
 export const AccordionBlocks = {
   Headline,
   LinkDocs,
   TextBlock,
   PictureText,
+  Tile,
+  ProductTile,
+  Gallery,
+  MiniGallery,
 };

package/src/components/Accordion/AccordionContent.ts

@@ -1,44 +1,68 @@
+import type { GalleryContent } from '../Gallery/GalleryContent';
 import type { HeadlineContent } from '../Headline/HeadlineContent';
 import type { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
+import type { MiniGalleryContent } from '../MiniGallery/MiniGalleryContent';
 import type { PictureTextContent } from '../PictureText/PictureTextContent';
+import type { ProductTileContent } from '../ProductTile/ProductTileContent';
 import type { TextBlockContent } from '../TextBlock/TextBlockContent';
+import type { TileContent } from '../Tile/TileContent';
 
 /**
  * @title Тип блока
  */
-export type AccordionTypeBlock = 'Headline' | 'LinkDocs' | 'TextBlock' | 'PictureText';
+export type AccordionBlockType =
+  | 'Headline'
+  | 'LinkDocs'
+  | 'TextBlock'
+  | 'PictureText'
+  | 'Tile'
+  | 'ProductTile'
+  | 'Gallery'
+  | 'MiniGallery';
+
+interface AccordionBlockDef {
+  accordionBlockType: AccordionBlockType;
+}
 
 /**
  * @title Заголовок
  */
-export interface HeadlineAccordionBlock extends HeadlineContent {
-  /** @default Headline */
-  accordionBlockType: AccordionTypeBlock;
-}
+export type HeadlineAccordionBlockDef = HeadlineContent & AccordionBlockDef;
 
 /**
  * @title Список документов
  */
-export interface LinkDocsAccordionBlock extends LinkDocsContent {
-  /** @default LinkDocs */
-  accordionBlockType: AccordionTypeBlock;
-}
+export type LinkDocsAccordionBlockDef = LinkDocsContent & AccordionBlockDef;
 
 /**
  * @title Текстовый блок
  */
-export interface TextBlockAccordionBlock extends TextBlockContent {
-  /** @default TextBlock */
-  accordionBlockType: AccordionTypeBlock;
-}
+export type TextBlockAccordionBlockDef = TextBlockContent & AccordionBlockDef;
 
 /**
  * @title Картинка с текстом
  */
-export interface PictureTextAccordionBlock extends PictureTextContent {
-  /** @default PictureText */
-  accordionBlockType: AccordionTypeBlock;
-}
+export type PictureTextAccordionBlockDef = PictureTextContent & AccordionBlockDef;
+
+/**
+ * @title Плитка
+ */
+export type TileAccordionBlockDef = TileContent & AccordionBlockDef;
+
+/**
+ * @title Продуктовая плитка
+ */
+export type ProductTileAccordionBlockDef = ProductTileContent & AccordionBlockDef;
+
+/**
+ * @title Галлерея
+ */
+export type GalleryAccordionBlockDef = GalleryContent & AccordionBlockDef;
+
+/**
+ * @title Мини-галлерея
+ */
+export type MiniGalleryAccordionBlockDef = MiniGalleryContent & AccordionBlockDef;
 
 /**
  * @title Выберите блок
@@ -50,10 +74,14 @@ export type EmptyOption = null;
  */
 export type AccordionBlockProps =
   | EmptyOption
-  | HeadlineAccordionBlock
-  | LinkDocsAccordionBlock
-  | TextBlockAccordionBlock
-  | PictureTextAccordionBlock;
+  | HeadlineAccordionBlockDef
+  | LinkDocsAccordionBlockDef
+  | TextBlockAccordionBlockDef
+  | PictureTextAccordionBlockDef
+  | TileAccordionBlockDef
+  | ProductTileAccordionBlockDef
+  | GalleryAccordionBlockDef
+  | MiniGalleryAccordionBlockDef;
 
 /**
  * @title Элемент списка

package/src/components/Accordion/AccordionItem.mobile.tsx

@@ -31,7 +31,7 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, bordered,
         >
           {label}
         </span>
-        {hasContent ? <Icon name={icon} width="24" height="24" /> : null}
+        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
       </button>
       {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
     </li>

package/src/components/Accordion/AccordionItem.tsx

@@ -27,7 +27,7 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, context }
         >
           {label}
         </span>
-        {hasContent ? <Icon name={icon} width="24" height="24" /> : null}
+        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
       </button>
       {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
     </li>

package/src/components/BaseTile/BaseTile.tsx

@@ -1,47 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { BaseTileInner } from './BaseTileInner';
 import type { BaseTileCommonProps } from './BaseTileProps';
-import { getHeadingType } from './getHeadingType';
 
 export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}
 
 export const BaseTile = JSX<BaseTileProps>(
-  ({
-    className,
-    context,
-    title,
-    headingType,
-    description,
-    children,
-    buttons,
-    image,
-    items,
-    version = 'primary',
-  }) => {
+  ({ className = '', title, children, buttons, image }) => {
     return (
-      <div className={`font-sans flex flex-col grow h-full items-start`}>
-        {title && (
-          <Heading
-            type={headingType || getHeadingType(className)}
-            text={title}
-            className={`whitespace-pre-wrap max-w-[600px] ${
-              version === 'primary' ? 'text-primary-text' : ''
-            }`}
-          >
-            {title}
-          </Heading>
-        )}
-        <BaseTileInner
-          context={context}
-          buttons={buttons}
-          image={image}
-          children={children}
-          description={description}
-          items={items}
-          version={version}
-        />
+      <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
+        {title}
+        <div className={`flex grow w-full justify-between`}>
+          <div className={`flex flex-col justify-between`}>
+            <div>{children}</div>
+            <div>{buttons}</div>
+          </div>
+          {image}
+        </div>
       </div>
     );
   },

package/src/components/BaseTile/BaseTileProps.ts

@@ -1,8 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { HeadingType } from '../../ui-kit/Heading/HeadingProps';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { HeadingType } from '../../ui-kit/Heading/HeadingContent';
 
 /**
  * @title Выравнивание
@@ -14,10 +13,6 @@ import type { IconName } from '../../ui-kit/Icon/IconProps';
  */
 export type AlignType = 'left' | 'center' | 'right';
 
-export interface BaseTileIconButton extends ButtonWithIconProps {
-  icon?: IconName;
-}
-
 /**
  * @title Общий компонент плиток
  */
@@ -40,11 +35,14 @@ export interface BaseTileMainProps {
   image?: Picture;
   /** @title Список */
   items?: string[];
+
+  list?: string;
+
   /**
    * @title Кнопки
    * @maxItems 4
    */
-  buttons?: BaseTileIconButton[];
+  buttons?: ButtonWithIconProps[];
   version?: BlockVersion;
   align?: AlignType;
 }

package/{mobile/src/components/BaseTile/getHeadingType.ts → src/components/BaseTile/getTileHeadingType.ts}

@@ -1,6 +1,6 @@
 import { getColSpan } from '../../utils/getColSpan';
 
-export function getHeadingType(className = '') {
+export function getTileHeadingType(className = '') {
   const colSpan = getColSpan(className);
   if (colSpan <= 4) {
     return 'h4';

package/src/components/BaseTile/getTileMinHeight.ts

@@ -0,0 +1,12 @@
+import { getColSpan } from '../../utils/getColSpan';
+
+export function getTileMinHeight(className = '') {
+  const colSpan = getColSpan(className);
+  if (colSpan <= 6) {
+    return 'min-h-[300px]';
+  } else if (colSpan <= 8) {
+    return 'min-h-[320px]';
+  } else {
+    return 'min-h-[360px]';
+  }
+}

package/src/components/BaseTile/getTileRightPadding.ts

@@ -0,0 +1,12 @@
+import { getColSpan } from '../../utils/getColSpan';
+
+export function getTileRightPadding(className = '') {
+  const colSpan = getColSpan(className);
+  if (colSpan <= 6) {
+    return 'pr-9';
+  } else if (colSpan <= 8) {
+    return 'pr-[4.75rem]';
+  } else {
+    return 'pr-[9.4rem]';
+  }
+}

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -13,7 +13,9 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefi
         className || ''
       }`}
     >
-      {title ? <Heading type="h2" className="max-w-[47rem] text-center" text={title} /> : null}
+      {title ? (
+        <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
+      ) : null}
       {benefits?.length ? (
         <div className="grid grid-cols-2 gap-5 mt-9">{benefits.map(renderStep)}</div>
       ) : null}

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -1,13 +1,16 @@
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 
-/**
- * @title Преимущество
- */
-export interface Benefit {
+export interface TextBenefit {
   /** @title Название */
   label?: string;
   /** @title Описание */
   description?: string;
+}
+
+/**
+ * @title Преимущество
+ */
+export interface Benefit extends TextBenefit {
   icon?: IconName;
 }
 

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { ComparisonTable } from './ComparisonTable';

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -54,7 +54,11 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
           className || ''
         }`}
       >
-        <Heading type="h2" className="max-w-[47rem] text-center mb-9 mx-auto" text={title} />
+        <Heading
+          headingType="h2"
+          className="max-w-[47rem] text-center mb-9 mx-auto"
+          title={title}
+        />
         <div role="table">
           {colHeaders?.length ? (
             <TableRowContainer>

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -5,7 +5,7 @@ import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
-import { Img } from '../../ui-kit/Img';
+import { Img } from '../../ui-kit/Img/Img';
 import { BORDER_CLASSES, GRADIENT } from './constants';
 
 export interface HeaderCellProps {
@@ -30,7 +30,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
       />
     )}
     {image?.src && <Img className="mb-[18px]" image={image} />}
-    {title && <Heading type="h4" className="text-center text-white" text={title} />}
+    {title && <Heading headingType="h4" className="text-center text-white" title={title} />}
     {link?.text && (
       <div className="mt-auto w-full">
         <Button

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

@@ -3,9 +3,9 @@ import { mobileContext } from '../../setup-fixture';
 import type { ContentPageDef } from '../../types';
 import { Blocks } from '../Blocks';
 import { ContentPage } from './ContentPage';
-import { toMobilePage } from './toMobilePage';
+import { normalizePage } from './normalizePage';
 
-import data from './ContentPage.page.mobile.json';
+import data from './ContentPage.page.json';
 
 export default {
   default: (
@@ -13,7 +13,7 @@ export default {
       className="bg-secondary-text"
       context={mobileContext}
       blocksRegistry={Blocks}
-      data={toMobilePage(data as ContentPageDef)}
+      data={normalizePage(data as ContentPageDef)}
     />
   ),
 };

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

@@ -3,6 +3,7 @@ import { context } from '../../setup-fixture';
 import type { ContentPageDef } from '../../types';
 import { Blocks } from '../Blocks';
 import { BlockDecorator, ContentPage } from './ContentPage';
+import { normalizePage } from './normalizePage';
 
 import data from './ContentPage.page.json';
 
@@ -31,7 +32,7 @@ export default {
       className="bg-main"
       context={context}
       blocksRegistry={Blocks}
-      data={data as ContentPageDef}
+      data={normalizePage(data as ContentPageDef)}
     />
   ),
   editor: (
@@ -40,7 +41,7 @@ export default {
         className="bg-transparent"
         context={context}
         blocksRegistry={Blocks}
-        data={data as ContentPageDef}
+        data={normalizePage(data as ContentPageDef)}
         blockDecorator={blockDecorator}
       />
     </div>

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

@@ -447,7 +447,7 @@
       ]
     },
     {
-      "type": "Unknown",
+      "type": "Placeholder",
       "style": ["col-span-12"],
       "content": {
         "title": "Какой то новый блок"

package/src/components/ContentPage/ContentPage.tsx

@@ -98,7 +98,7 @@ function renderBlock(
       blockClassName: style2className(block.style),
       block,
       render: (props) => {
-        const { version, content, blocks } = props.block;
+        const { version, content } = props.block;
         return (
           <BlockComponent
             key={`${type}-${i}`}
@@ -106,13 +106,7 @@ function renderBlock(
             version={version}
             context={context}
             {...content}
-          >
-            {blocks?.length
-              ? blocks.map((block, i) =>
-                  renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
-                )
-              : null}
-          </BlockComponent>
+          />
         );
       },
     },

package/src/components/ContentPage/isBlockInRegistry.ts

@@ -0,0 +1,5 @@
+import { BlockDef } from '../../types';
+
+export function isBlockInRegistry<T>(block: BlockDef, registry: Record<string, T>) {
+  return block.type in registry;
+}

package/src/components/ContentPage/normalizeBlock.mobile.spec.ts

@@ -0,0 +1,71 @@
+import { BlockDef } from '../../types';
+import { normalizeBlock } from './normalizeBlock.mobile';
+
+describe('normalizeBlock', () => {
+  it('should return new block definition where properties from "mobile" override desktop properties', () => {
+    const blockDef: BlockDef = {
+      type: 'TextBlock',
+      content: {
+        title: 'Desktop Title',
+        description: 'Desktop description',
+      },
+      mobile: {
+        type: 'TextBlock',
+        content: {
+          title: 'Mobile Title',
+        },
+      },
+    };
+
+    const mobileBlockDef: BlockDef = {
+      type: 'TextBlock',
+      content: {
+        title: 'Mobile Title',
+        description: 'Desktop description',
+      },
+    };
+
+    expect(normalizeBlock(blockDef)).toEqual(mobileBlockDef);
+  });
+
+  it('should return new block definition same to input', () => {
+    const blockDef: BlockDef = {
+      type: 'TextBlock',
+      content: {
+        title: 'Desktop Title',
+        description: 'Desktop description',
+      },
+    };
+
+    const mobileBlockDef: BlockDef = {
+      type: 'TextBlock',
+      content: {
+        title: 'Desktop Title',
+        description: 'Desktop description',
+      },
+    };
+
+    expect(normalizeBlock(blockDef)).toEqual(mobileBlockDef);
+  });
+
+  it('should return new block definition where content contains mobile content', () => {
+    const blockDef: BlockDef = {
+      type: 'TextBlock',
+      mobile: {
+        type: 'TextBlock',
+        content: {
+          title: 'Mobile Title',
+        },
+      },
+    };
+
+    const mobileBlockDef: BlockDef = {
+      type: 'TextBlock',
+      content: {
+        title: 'Mobile Title',
+      },
+    };
+
+    expect(normalizeBlock(blockDef)).toEqual(mobileBlockDef);
+  });
+});

package/src/components/ContentPage/normalizeBlock.mobile.ts

@@ -0,0 +1,6 @@
+import { BlockDef } from '../../types';
+
+export function normalizeBlock(block: BlockDef) {
+  const { mobile, ...rest } = block;
+  return mobile ? { ...rest, ...mobile, content: { ...rest.content, ...mobile.content } } : block;
+}