@redneckz/wildless-cms-uni-blocks 0.2.86 → 0.2.89

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

@@ -1,13 +1,54 @@
 import { context } from '../../setup-fixture';
-import type { TextBlockContent } from '../TextBlock/TextBlockContent';
 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 = {
   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?',
 };
 
+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 = {
   title: 'Accordion title',
   context,
@@ -19,6 +60,10 @@ const propsTextBlock: AccordionProps = {
           type: 'TextBlock',
           data: TEXT_BLOCK,
         },
+        {
+          type: 'TextBlock',
+          data: TEXT_BLOCK,
+        },
       ],
     },
     {
@@ -28,14 +73,69 @@ const propsTextBlock: AccordionProps = {
           type: 'TextBlock',
           data: TEXT_BLOCK,
         },
+        {
+          type: 'TextBlock',
+          data: TEXT_BLOCK,
+        },
       ],
     },
     {
       label: 'Accordion label 3',
       blocks: [
         {
-          type: 'TextBlock',
-          data: TEXT_BLOCK,
+          type: 'PictureText',
+          data: PICTURE_TEXT,
+        },
+        {
+          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,
         },
       ],
     },
@@ -44,4 +144,5 @@ const propsTextBlock: AccordionProps = {
 
 export default {
   'with text block': <Accordion {...propsTextBlock} />,
+  'with link docs block': <Accordion {...propsLinkDocs} />,
 };

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,20 +1,32 @@
+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';
 
-/** @title Содержимое блока */
-export type AccordionDataContent = TextBlockContent;
+/**
+ * @hidden
+ * @title Содержимое блока
+ */
+export type AccordionData =
+  | HeadlineContent
+  | LinkDocsContent
+  | TextBlockContent
+  | PictureTextContent;
 
 /**
+ * @hidden
  * @title Тип блока
- * @enumNames ["Текстовый блок"]
+ * @enumNames ["Заголовок", "Блок документов", Текстовый блок", "Картинка с текстом"]
  */
-export type AccordionDataBlocks = 'TextBlock';
+export type AccordionTypeBlock = keyof typeof AccordionBlocks;
 
 /**
  * Блок
  */
 export interface AccordionBlock {
-  type?: AccordionDataBlocks;
-  data?: AccordionDataContent;
+  type?: AccordionTypeBlock;
+  data?: AccordionData;
 }
 
 /**

package/src/components/BaseTile/BaseTile.tsx

@@ -8,7 +8,18 @@ import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img';
 import { Title } from '../../ui-kit/Title/Title';
 import { getColSpan } from '../../utils/getColSpan';
-import type { BaseTileCommonProps, BaseTileIconButton } from './BaseTileProps';
+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 BaseTileCommonProps, UniBlockProps {}
 
@@ -26,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}
@@ -73,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} />
       ))}
@@ -84,14 +98,9 @@ function renderItems(items: string[] = [], version?: BlockVersion) {
 function renderButton({ icon, ...button }: BaseTileIconButton, i: number) {
   if (!button?.text) return;
 
-  if (icon)
-    return (
-      <Button
-        key={String(i)}
-        appendLeft={<Icon name={icon} width="24" height="24" />}
-        {...button}
-      />
-    );
-
-  return <Button key={String(i)} {...button} />;
+  return icon ? (
+    <Button key={String(i)} appendLeft={<Icon name={icon} width="24" height="24" />} {...button} />
+  ) : (
+    <Button key={String(i)} {...button} />
+  );
 }

package/src/components/BaseTile/BaseTileProps.ts

@@ -4,6 +4,16 @@ 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;
 }
@@ -30,4 +40,5 @@ export interface BaseTileCommonProps {
    */
   buttons?: BaseTileIconButton[];
   version?: BlockVersion;
+  align?: AlignType;
 }

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -18,7 +18,7 @@ export interface BenefitsBlockContent {
   /** @title Заголовок */
   title?: string;
   /**
-   * @title Список преимущества
+   * @title Список преимуществ
    * @maxItems 6
    */
   benefits?: Benefit[];

package/src/components/BlockContent.ts

@@ -4,7 +4,9 @@ import type { ExchangeRateTileContent } from './ExchangeRateTile/ExchangeRateTil
 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';
@@ -18,18 +20,20 @@ import type { TileContent } from './Tile/TileContent';
  * @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/ContentPage/ContentPage.page.json

@@ -1361,10 +1361,96 @@
       }
     },
     {
-      "type": "CreditCalculator",
+      "type": "Headline",
       "style": ["col-span-12"],
       "content": {
-        "directoryName": "credit-calculator-data"
+        "title": "Своя кредитная карта",
+        "description": "Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.",
+        "align": "center",
+        "bgColor": "transparent"
+      }
+    },
+    {
+      "type": "LinkDocs",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Дополнительные документы",
+        "icon": "DocIcon",
+        "documents": [
+          {
+            "text": "target self",
+            "href": "/abc1/cooldoc.doc",
+            "target": "_self"
+          },
+          {
+            "text": "target blank",
+            "href": "/abc2/wtf.rtf",
+            "target": "_blank"
+          },
+          {
+            "text": "GlassIcon",
+            "href": "/abc3/map.jpeg"
+          },
+          {
+            "text": "no icon",
+            "href": "/abc4"
+          },
+          {
+            "text": "документ 5",
+            "href": "/abc5"
+          },
+          {
+            "text": "документ 6",
+            "href": "/abc6/abc.pdf"
+          },
+          {
+            "text": "Text text text",
+            "href": "/abc7/yolo.png"
+          },
+          {
+            "text": "Some more generic text, and even more, more text",
+            "href": "/abc8/archive.zip",
+            "fileSize": "2.3МБ"
+          },
+          {
+            "text": "И ещё немного текста",
+            "href": "/abc9/rarniw.rar",
+            "fileSize": "666МБ"
+          },
+          {
+            "text": "Форматируем, сортируем, смотрим как отображается...",
+            "href": "/abc10/",
+            "fileSize": "65ГБ"
+          }
+        ]
+      }
+    },
+    {
+      "type": "PictureText",
+      "style": ["col-span-12"],
+      "content": {
+        "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
+          }
+        }
       }
     },
     {

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

@@ -0,0 +1,6 @@
+{
+  "title": "Заголовок",
+  "description": "Описание",
+  "align": "center",
+  "bgColor": "transparent"
+}

package/src/components/Headline/Headline.fixture.tsx

@@ -0,0 +1,42 @@
+import { context } from '../../setup-fixture';
+
+import { Headline } from './Headline';
+
+export default {
+  default: (
+    <Headline
+      title="Своя кредитная карта"
+      description="Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах."
+      align="left"
+      bgColor="bg-white"
+      context={context}
+    />
+  ),
+  'center transparent': (
+    <Headline
+      title="Своя кредитная карта"
+      description="Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах."
+      align="center"
+      bgColor="transparent"
+      context={context}
+    />
+  ),
+  'right transparent': (
+    <Headline
+      title="Своя кредитная карта"
+      description="Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах."
+      align="right"
+      bgColor="transparent"
+      context={context}
+    />
+  ),
+  'right white': (
+    <Headline
+      title="Своя кредитная карта"
+      description="Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах."
+      align="right"
+      bgColor="bg-white"
+      context={context}
+    />
+  ),
+};

package/src/components/Headline/Headline.tsx

@@ -0,0 +1,15 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+import type { UniBlockProps } from '../../types';
+import { BaseTile } from '../BaseTile/BaseTile';
+import type { HeadlineContent } from './HeadlineContent';
+
+export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
+
+export const Headline = JSX<HeadlineProps>(({ bgColor = 'bg-white', className, ...props }) => {
+  return (
+    <section className={`p-10 ${bgColor} ${className || ''} `}>
+      <BaseTile {...props}></BaseTile>
+    </section>
+  );
+});

package/src/components/Headline/HeadlineContent.ts

@@ -0,0 +1,18 @@
+import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+
+/**
+ * @title Цвет фона
+ * @enumNames [
+ *    "Прозрачный",
+ *    "Белый"
+ * ]
+ */
+export type HeadlineBgColor = 'transparent' | 'bg-white';
+
+/**
+ * @title Заголовок
+ */
+export interface HeadlineContent
+  extends Pick<BaseTileCommonProps, 'title' | 'titleSize' | 'description' | 'align'> {
+  bgColor?: HeadlineBgColor;
+}

package/src/components/LinkDocs/LinkDocs.fixture.tsx

@@ -0,0 +1,51 @@
+import { LinkDocs } from './LinkDocs';
+import { context } from '../../setup-fixture';
+import type { LinkDocsContent } from './LinkDocsContent';
+
+export const LinkDocsFixtureSetOne: LinkDocsContent = {
+  title: 'Дополнительные документы',
+  icon: 'DocIcon',
+  documents: [
+    { text: 'target self', href: '/abc1/cooldoc.doc', target: '_self' },
+    { text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },
+    { text: 'GlassIcon', href: '/abc3/map.jpeg' },
+    { text: 'no icon', href: '/abc4' },
+    { text: 'документ 5', href: '/abc5' },
+    { text: 'документ 6', href: '/abc6/abc.pdf' },
+    { text: 'Text text text', href: '/abc7/yolo.png' },
+    {
+      text: 'Some more generic text, and even more, more text',
+      href: '/abc8/archive.zip',
+      fileSize: '2.3МБ',
+    },
+    { text: 'И ещё немного текста', href: '/abc9/rarniw.rar', fileSize: '666МБ' },
+    {
+      text: 'Форматируем, сортируем, смотрим как отображается...',
+      href: '/abc10/',
+      fileSize: '65ГБ',
+    },
+  ],
+};
+
+export const LinkDocsFixtureSetTwo: LinkDocsContent = {
+  ...LinkDocsFixtureSetOne,
+  columnsMode: 'single',
+};
+
+export const LinkDocsFixtureSetThree: LinkDocsContent = {
+  ...LinkDocsFixtureSetOne,
+  icon: 'GlassIcon',
+  title: '',
+};
+
+export const LinkDocsFixtureSetFour: LinkDocsContent = {
+  ...LinkDocsFixtureSetOne,
+  icon: undefined,
+};
+
+export default {
+  'default, 2 columns': <LinkDocs context={context} {...LinkDocsFixtureSetOne} />,
+  'one column': <LinkDocs context={context} {...LinkDocsFixtureSetTwo} />,
+  'another icon, no extensions': <LinkDocs context={context} {...LinkDocsFixtureSetThree} />,
+  'no icon': <LinkDocs context={context} {...LinkDocsFixtureSetFour} />,
+};