@redneckz/wildless-cms-uni-blocks 0.2.84 → 0.2.87

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

@@ -1,14 +1,52 @@
 import { context } from '../../setup-fixture';
 import type { AccordionProps } from './Accordion';
+import type { HeadlineProps } from '../Headline/Headline';
+import type { PictureTextContent } from '../PictureText/PictureTextContent';
 import type { TextBlockContent } from '../TextBlock/TextBlockContent';
+
 import { Accordion } from './Accordion';
+import {
+  LinkDocsFixtureSetOne,
+  LinkDocsFixtureSetThree,
+  LinkDocsFixtureSetTwo,
+} from '../LinkDocs/LinkDocs.fixture';
 
 const TEXT_BLOCK: TextBlockContent = {
-  title: 'Title',
   description:
     'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?',
-  blockVersion: 'secondary-light',
-  iconVersion: 'small',
+};
+
+const HEADLINE: HeadlineProps = {
+  context,
+  title: 'Своя кредитная карта',
+  description: 'Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.',
+  align: 'left',
+  bgColor: 'bg-white',
+};
+
+const PICTURE_TEXT: PictureTextContent = {
+  title: 'Варианты потребительского кредита',
+  benefits: [
+    {
+      label: 'Кредит по одному документу',
+      description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
+      icon: 'DocumentText',
+    },
+    {
+      label: 'Кредит на общих условиях',
+      description: 'До 5 млн ₽ на общих условиях получения кредита',
+      icon: 'DiscountShape',
+    },
+  ],
+  image: {
+    src: 'legal-support-business.png',
+    alt: 'Варианты потребительского кредита',
+    format: 'webp',
+    size: {
+      width: 200,
+      height: 200,
+    },
+  },
 };
 
 const propsTextBlock: AccordionProps = {
@@ -45,12 +83,59 @@ const propsTextBlock: AccordionProps = {
       label: 'Accordion label 3',
       blocks: [
         {
-          type: 'TextBlock',
-          data: TEXT_BLOCK,
+          type: 'PictureText',
+          data: PICTURE_TEXT,
         },
         {
-          type: 'TextBlock',
-          data: TEXT_BLOCK,
+          type: 'PictureText',
+          data: PICTURE_TEXT,
+        },
+      ],
+    },
+    {
+      label: 'Accordion label 4',
+      blocks: [
+        {
+          type: 'Headline',
+          data: HEADLINE,
+        },
+        {
+          type: 'Headline',
+          data: HEADLINE,
+        },
+      ],
+    },
+  ],
+};
+
+const propsLinkDocs: AccordionProps = {
+  title: 'Accordion title',
+  context,
+  accordionItems: [
+    {
+      label: 'Список документов в 2 колонки',
+      blocks: [
+        {
+          type: 'LinkDocs',
+          data: { ...LinkDocsFixtureSetOne, title: '' },
+        },
+      ],
+    },
+    {
+      label: 'Список документов в одну колонку',
+      blocks: [
+        {
+          type: 'LinkDocs',
+          data: { ...LinkDocsFixtureSetTwo, title: '' },
+        },
+      ],
+    },
+    {
+      label: 'Немного кастомизированный список',
+      blocks: [
+        {
+          type: 'LinkDocs',
+          data: LinkDocsFixtureSetThree,
         },
       ],
     },
@@ -59,4 +144,5 @@ const propsTextBlock: AccordionProps = {
 
 export default {
   'with text block': <Accordion {...propsTextBlock} />,
+  'with link docs block': <Accordion {...propsLinkDocs} />,
 };

package/src/components/Accordion/Accordion.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import { Title } from '../../ui-kit/Title/Title';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItem } from './AccordionItem';
-import { Title } from '../../ui-kit/Title/Title';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 

package/src/components/Accordion/AccordionBlocks.tsx

@@ -1,7 +1,13 @@
+import { Headline } from '../Headline/Headline';
+import { LinkDocs } from '../LinkDocs/LinkDocs';
+import { PictureText } from '../PictureText/PictureText';
 import { TextBlock } from '../TextBlock/TextBlock';
 
 const AccordionBlocks = {
+  Headline,
+  LinkDocs,
   TextBlock,
+  PictureText,
 };
 
 export default AccordionBlocks;

package/src/components/Accordion/AccordionContent.ts

@@ -1,18 +1,50 @@
+import type { HeadlineContent } from '../Headline/HeadlineContent';
+import type { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
+import type { PictureTextContent } from '../PictureText/PictureTextContent';
 import type { TextBlockContent } from '../TextBlock/TextBlockContent';
+import AccordionBlocks from './AccordionBlocks';
 
-export interface AccordionContent {
-  title?: string;
-  accordionItems?: AccordionItemContent[];
+/**
+ * @hidden
+ * @title Содержимое блока
+ */
+export type AccordionData =
+  | HeadlineContent
+  | LinkDocsContent
+  | TextBlockContent
+  | PictureTextContent;
+
+/**
+ * @hidden
+ * @title Тип блока
+ * @enumNames ["Заголовок", "Блок документов", Текстовый блок", "Картинка с текстом"]
+ */
+export type AccordionTypeBlock = keyof typeof AccordionBlocks;
+
+/**
+ * Блок
+ */
+export interface AccordionBlock {
+  type?: AccordionTypeBlock;
+  data?: AccordionData;
 }
 
-export interface AccordionItemContent {
+/**
+ * @title Элемент списка
+ */
+export interface AccordionItemCommonProps {
+  /** @title Название */
   label?: string;
-  blocks?: AccordionBlockContent[];
+  /** @title Блоки */
+  blocks?: AccordionBlock[];
 }
 
-export type AccordionBlockContent = {
-  type?: string;
-  data?: AccordionDataContent;
-};
-
-export type AccordionDataContent = TextBlockContent;
+/**
+ * @title Аккордеон
+ */
+export interface AccordionContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Список */
+  accordionItems?: AccordionItemCommonProps[];
+}

package/src/components/Accordion/AccordionItem.tsx

@@ -1,10 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { AccordionItemContent, AccordionBlockContent } from './AccordionContent';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import type { JSXBlock } from '../ContentPage/ContentPage';
+import { ContentPageContext } from '../ContentPage/ContentPageContext';
 import AccordionBlocks from './AccordionBlocks';
+import type { AccordionBlock, AccordionItemCommonProps } from './AccordionContent';
 
-export interface AccordionItemProps extends AccordionItemContent, UniBlockProps {}
+export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
 export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, context }) => {
   const [isActive, setIsActive] = context.useState(false);
@@ -42,24 +44,22 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, context }
             isActive ? 'pb-5' : ''
           } text-sm transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0 `}
         >
-          {blocks?.length ? blocks.map(renderComponent) : null}
+          {blocks?.length ? blocks.map((block, i) => renderBlock(block, i, context)) : null}
         </div>
       ) : null}
     </li>
   );
 });
 
-// TODO: draft, for dynamic rendering of components
-
-const renderComponent = (block: AccordionBlockContent, i: number) => {
-  if (block.type && block.data && !AccordionBlocks.hasOwnProperty(block.type)) {
+const renderBlock = (block: AccordionBlock, i: number, context: ContentPageContext) => {
+  if (!block.type || !block.data || !AccordionBlocks.hasOwnProperty(block.type)) {
     return null;
   }
 
-  const AccordionBlock = block.type && AccordionBlocks[block.type];
+  const AccordionBlock: JSXBlock = AccordionBlocks[block.type];
   return (
-    <div className="mb-5 last:mb-0" key={`component${i}`}>
-      <AccordionBlock {...block.data} />
+    <div className="mb-5 last:mb-0" key={`block_${i}`}>
+      <AccordionBlock context={context} {...block.data} />
     </div>
   );
 };

package/src/components/BaseTile/BaseTile.tsx

@@ -1,17 +1,27 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BaseTileContent } from './BaseTileContent';
+import { useLink } from '../../hooks/useLink';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img';
 import { Title } from '../../ui-kit/Title/Title';
-import { useLink } from '../../hooks/useLink';
 import { getColSpan } from '../../utils/getColSpan';
+import type { AlignType, BaseTileCommonProps, BaseTileIconButton } from './BaseTileProps';
+
+const alignBlock: Record<AlignType, string> = {
+  left: 'items-start',
+  center: 'items-center',
+  right: 'items-end',
+};
+const alignText: Record<AlignType, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+};
 
-export interface BaseTileProps extends BaseTileContent, UniBlockProps {}
+export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}
 
 const TITLE_CLASSES = 'font-medium m-0 mb-4 whitespace-pre-wrap max-w-[600px]';
 
@@ -27,21 +37,24 @@ export const BaseTile = JSX<BaseTileProps>(
     image,
     items,
     version = 'primary',
+    align = 'left',
   }) => {
     const router = context.useRouter();
     const { handlerDecorator } = context;
     return (
-      <div className={`font-sans flex flex-col grow h-full`}>
+      <div className={`font-sans flex flex-col grow h-full ${alignBlock[align]}`}>
         {title && (
           <Title size={titleSize || getTitleSizeByClassName(className)} className={TITLE_CLASSES}>
             {title}
           </Title>
         )}
         <div className="flex grow justify-between">
-          <div className="flex flex-col justify-between items-start">
+          <div className={`flex flex-col justify-between ${alignBlock[align]}`}>
             <div>
               {description ? (
-                <div className="font-normal text-base max-w-[600px] mb-5">{description}</div>
+                <div className={`font-normal text-base max-w-[600px] ${alignText[align]}`}>
+                  {description}
+                </div>
               ) : null}
               {children}
               {items?.length ? renderItems(items, version) : null}
@@ -74,7 +87,7 @@ function getTitleSizeByClassName(className: string = '') {
 
 function renderItems(items: string[] = [], version?: BlockVersion) {
   return (
-    <section className="max-w-[600px]" role="list">
+    <section className="max-w-[600px] mt-5" role="list">
       {items.map((_, i) => (
         <BlockItem key={String(i)} className={i ? 'mt-2.5' : ''} text={_} version={version} />
       ))}
@@ -82,7 +95,7 @@ function renderItems(items: string[] = [], version?: BlockVersion) {
   );
 }
 
-function renderButton({ icon, ...button }: ButtonWithIconProps, i: number) {
+function renderButton({ icon, ...button }: BaseTileIconButton, i: number) {
   if (!button?.text) return;
 
   if (icon)

package/src/components/BaseTile/BaseTileProps.ts

@@ -0,0 +1,44 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { TitleSize } from '../../ui-kit/Title/TitleProps';
+
+/**
+ * @title Выравнивание
+ * @enumNames [
+ *    "По левому краю",
+ *    "По центру",
+ *    "По правому краю"
+ * ]
+ */
+export type AlignType = 'left' | 'center' | 'right';
+
+export interface BaseTileIconButton extends ButtonWithIconProps {
+  icon?: IconName;
+}
+
+/**
+ * @title Плитка
+ */
+export interface BaseTileCommonProps {
+  /** @title Заголовок */
+  title?: string;
+  /**
+   * @title Размер заголовка
+   * @default M
+   */
+  titleSize?: TitleSize;
+  /** @title Описание */
+  description?: string;
+  image?: Picture;
+  /** @title Список */
+  items?: string[];
+  /**
+   * @title Кнопки
+   * @maxItems 4
+   */
+  buttons?: BaseTileIconButton[];
+  version?: BlockVersion;
+  align?: AlignType;
+}

package/src/components/BenefitsBlock/BenefitsBlock.example.json

@@ -0,0 +1,13 @@
+{
+  "title": "Преимущества",
+  "benefits": [
+    {
+      "label": "Преимущество №1",
+      "icon": "ClockIcon"
+    },
+    {
+      "label": "Преимущество №2",
+      "icon": "SignDocsIcon"
+    }
+  ]
+}

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,7 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Benefit, BenefitsBlockContent } from './BenefitsBlockContent';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import { Title } from '../../ui-kit/Title/Title';
+import type { Benefit, BenefitsBlockContent } from './BenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
@@ -12,7 +13,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefi
         className || ''
       }`}
     >
-      <h2 className="font-medium text-title m-0 max-w-[47rem] text-center">{title}</h2>
+      {title ? <Title className="font-medium m-0 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,12 +1,25 @@
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 
+/**
+ * @title Преимущество
+ */
 export interface Benefit {
-  label: string;
+  /** @title Название */
+  label?: string;
+  /** @title Описание */
   description?: string;
   icon?: IconName;
 }
 
+/**
+ * @title Блок преимущества
+ */
 export interface BenefitsBlockContent {
+  /** @title Заголовок */
   title?: string;
+  /**
+   * @title Список преимуществ
+   * @maxItems 6
+   */
   benefits?: Benefit[];
 }

package/src/components/BlockContent.ts

@@ -1,9 +1,12 @@
 import type { BenefitsBlockContent } from './BenefitsBlock/BenefitsBlockContent';
+import type { ComparisonTableContent } from './ComparisonTable/ComparisonTableContent';
 import type { ExchangeRateTileContent } from './ExchangeRateTile/ExchangeRateTileContent';
 import type { FooterContent } from './Footer/FooterContent';
 import type { GalleryContent } from './Gallery/GalleryContent';
 import type { HeaderContent } from './Header/HeaderContent';
+import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { MobileAppTileContent } from './MobileAppTile/MobileAppTileContent';
+import type { PictureTextContent } from './PictureText/PictureTextContent';
 import type { PlaceholderContent } from './Placeholder/PlaceholderContent';
 import type { ProductBlockContent } from './ProductBlock/ProductBlockContent';
 import type { ProductGalleryContent } from './ProductGallery/ProductGalleryContent';
@@ -12,21 +15,25 @@ import type { PromoTileContent } from './PromoTile/PromoTileContent';
 import type { StepsBlockContent } from './StepsBlock/StepsBlockContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
-import type { ComparisonTableContent } from './ComparisonTable/ComparisonTableContent';
 
+/**
+ * @hidden
+ */
 export type BlockContent =
-  | HeaderContent
+  | BenefitsBlockContent
+  | ComparisonTableContent
+  | ExchangeRateTileContent
   | FooterContent
+  | GalleryContent
+  | HeaderContent
+  | LinkDocsContent
+  | MobileAppTileContent
+  | PictureTextContent
   | PlaceholderContent
-  | TileContent
-  | PromoTileContent
-  | TextBlockContent
-  | ProductTileContent
   | ProductBlockContent
-  | StepsBlockContent
-  | BenefitsBlockContent
   | ProductGalleryContent
-  | ExchangeRateTileContent
-  | MobileAppTileContent
-  | GalleryContent
-  | ComparisonTableContent;
+  | ProductTileContent
+  | PromoTileContent
+  | StepsBlockContent
+  | TextBlockContent
+  | TileContent;

package/src/components/Blocks.ts

@@ -1,10 +1,16 @@
+import { Accordion } from './Accordion/Accordion';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
+import { ComparisonTable } from './ComparisonTable/ComparisonTable';
+import { CreditCalculator } from './CreditCalculator/CreditCalculator';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
 import { Header } from './Header/Header';
+import { Headline } from './Headline/Headline';
+import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
+import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
@@ -13,27 +19,27 @@ import { PromoTile } from './PromoTile/PromoTile';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
-import { ComparisonTable } from './ComparisonTable/ComparisonTable';
-import { Accordion } from './Accordion/Accordion';
-import { CreditCalculator } from './CreditCalculator/CreditCalculator';
 
 export const Blocks = {
-  Header,
-  Footer,
-  Placeholder,
-  Tile,
-  PromoTile,
-  TextBlock,
-  ProductTile,
-  ProductBlock,
-  StepsBlock,
+  Accordion,
   BenefitsBlock,
-  ProductGallery,
+  ComparisonTable,
+  CreditCalculator,
   ExchangeRateTile,
-  MobileAppTile,
+  Footer,
   Gallery,
+  Header,
+  Headline,
+  LinkDocs,
   MiniGallery,
-  ComparisonTable,
-  Accordion,
-  CreditCalculator,
+  MobileAppTile,
+  PictureText,
+  Placeholder,
+  ProductBlock,
+  ProductGallery,
+  ProductTile,
+  PromoTile,
+  StepsBlock,
+  TextBlock,
+  Tile,
 };

package/src/components/ComparisonTable/ComparisonTable.example.json

@@ -0,0 +1,84 @@
+{
+  "title": "Заголовок",
+  "rowHeaders": [
+    {
+      "title": "Параметр 1"
+    },
+    {
+      "title": "Параметр 2"
+    },
+    {
+      "title": "Параметр 3"
+    }
+  ],
+  "columns": [
+    {
+      "header": {
+        "title": "Продукт 1",
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 100,
+            "height": 63
+          }
+        }
+      },
+      "data": [
+        [
+          {
+            "label": "Ячейка 1"
+          }
+        ],
+        [
+          {
+            "label": "Ячейка 2-1",
+            "description": "Описание для ячейки 2-1"
+          },
+          {
+            "label": "Ячейка 2-2",
+            "description": "Описание для ячейки 2-2"
+          }
+        ],
+        [
+          {
+            "label": "Ячейка 3"
+          }
+        ]
+      ]
+    },
+    {
+      "header": {
+        "title": "Продукт 2",
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 100,
+            "height": 63
+          }
+        }
+      },
+      "data": [
+        [
+          {
+            "label": "Ячейка 1"
+          }
+        ],
+        [
+          {
+            "label": "Ячейка 2-1",
+            "description": "Описание для ячейки 2-1"
+          },
+          {
+            "label": "Ячейка 2-2",
+            "description": "Описание для ячейки 2-2"
+          }
+        ],
+        [
+          {
+            "label": "Ячейка 3"
+          }
+        ]
+      ]
+    }
+  ]
+}