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

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} />,
+};

package/src/components/LinkDocs/LinkDocs.tsx

@@ -0,0 +1,81 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Title } from '../../ui-kit/Title/Title';
+import { AlignType } from '../BaseTile/BaseTileProps';
+import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
+
+const titleAlignStyleMap: Record<AlignType, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+};
+
+const titleMarginsStyleMap: Record<LinkColumnsMode, string> = {
+  double: 'mb-8',
+  single: '',
+};
+
+const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
+  double: 'gap-x-5 gap-y-[26px] flex-wrap',
+  single: 'gap-3.5 flex-col',
+};
+
+export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
+
+export const LinkDocs = JSX<LinkDocsProps>(
+  ({ className, title, align, documents, icon, columnsMode = 'double' }) => {
+    const containerClasses = linkColumnsModeStyleMap[columnsMode];
+
+    return (
+      <section className={`font-sans p-[50px] bg-white ${className}`}>
+        {title && (
+          <Title
+            className={`font-medium m-0 ${titleMarginsStyleMap[columnsMode]} ${
+              titleAlignStyleMap[align ?? 'center']
+            }`}
+          >
+            {title}
+          </Title>
+        )}
+        <div className={`flex ${containerClasses}`} role="list">
+          {documents?.length
+            ? documents.map(({ text, fileSize, ...linkProps }) => (
+                <a
+                  className={`group flex items-center text-sm
+              text-sm font-sans align-middle items-center text-primary-text no-underline group hover:text-primary-main
+              ${columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}`}
+                  role="listitem"
+                  {...linkProps}
+                >
+                  {icon && <Icon className="mr-3.5" name={icon} width="24px" height="24px" />}
+                  <span>
+                    {text}
+                    <span className="text-secondary-text group-hover:text-primary-main">
+                      {linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize)}
+                    </span>
+                  </span>
+                </a>
+              ))
+            : null}
+        </div>
+      </section>
+    );
+  },
+);
+
+const getExtFromHref = (href: string) => {
+  if (!href) return '';
+
+  const lastChunk = href.split('.').pop();
+  if (!lastChunk || lastChunk.includes('/')) return '';
+
+  return lastChunk;
+};
+
+const formatSuffix = (ext?: string, fileSize?: string) => {
+  const prefix = ext || fileSize ? ',' : '';
+  const extension = ext ? ` ${ext}` : '';
+  const size = fileSize ? ` (${fileSize})` : '';
+  return prefix + extension + size;
+};

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -0,0 +1,26 @@
+import { LinkProps } from '../../model/LinkProps';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+
+/** @title Режим отображения списка */
+export type LinkColumnsMode = 'single' | 'double';
+
+/**
+ * @title Элемент списка
+ */
+export interface LinkDocsItem extends LinkProps {
+  /** @title размер файла */
+  fileSize?: string;
+}
+
+/**
+ * @title Список документов
+ */
+export interface LinkDocsContent extends Pick<BaseTileCommonProps, 'align' | 'title'> {
+  /** @title Название иконки */
+  icon?: IconName;
+  /** @title Список */
+  documents?: LinkDocsItem[];
+  /** @title Отображение списка */
+  columnsMode?: LinkColumnsMode;
+}

package/src/components/MiniGallery/MiniGallery.example.json

@@ -0,0 +1,61 @@
+{
+  "title": "Мини-галерея",
+  "description": "Описание",
+  "cards": [
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 120,
+          "height": 70
+        }
+      },
+      "title": "Заголовок 1",
+      "description": "Описание 1"
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 120,
+          "height": 70
+        }
+      },
+      "title": "Заголовок 2",
+      "description": "Описание 2"
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 120,
+          "height": 70
+        }
+      },
+      "title": "Заголовок 3",
+      "description": "Описание 3"
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 120,
+          "height": 70
+        }
+      },
+      "title": "Заголовок 4",
+      "description": "Описание 4"
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 120,
+          "height": 70
+        }
+      },
+      "title": "Заголовок 5",
+      "description": "Описание 5"
+    }
+  ]
+}

package/src/components/MiniGallery/MiniGallery.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { GalleryContent } from '../Gallery/GalleryContent';
+import type { UniBlockProps } from '../../types';
 import { GalleryInner } from '../Gallery/GalleryInner';
-import { UniBlockProps } from '../../types';
+import type { MiniGalleryContent } from './MiniGalleryContent';
 
-export interface MiniGalleryProps extends GalleryContent, UniBlockProps {}
+export interface MiniGalleryProps extends MiniGalleryContent, UniBlockProps {}
 
 export const MiniGallery = JSX<MiniGalleryProps>((props) => (
   <GalleryInner {...props} version="mini" />

package/src/components/MiniGallery/MiniGalleryContent.ts

@@ -0,0 +1,6 @@
+import type { GalleryContent } from '../Gallery/GalleryContent';
+
+/**
+ * @title Мини-галерея
+ */
+export interface MiniGalleryContent extends GalleryContent {}

package/src/components/MobileAppTile/MobileAppTile.example.json

@@ -0,0 +1,20 @@
+{
+  "qr": {
+    "href": "https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true",
+    "src": "data:image/png;base64,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"
+  },
+  "buttons": [
+    {
+      "aboveText": "Загрузите в",
+      "text": "App Store",
+      "icon": "AppleIcon",
+      "version": "secondary"
+    },
+    {
+      "aboveText": "Доступно в",
+      "text": "Google Play",
+      "icon": "PlayMarketIcon",
+      "version": "secondary"
+    }
+  ]
+}

package/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,11 +1,20 @@
-import type { BaseTileContent } from '../BaseTile/BaseTileContent';
+import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
 
+/**
+ * @title QR код
+ */
 export interface QRCode {
+  /** @title QR код */
   src?: string;
+  /** @title Ссылка */
   href?: string;
 }
 
-export interface MobileAppTileContent extends BaseTileContent {
+/**
+ * @title Мобильное приложение
+ */
+export interface MobileAppTileContent extends BaseTileCommonProps {
+  /** @title Заголовок */
   title?: string;
   qr?: QRCode;
 }

package/src/components/MobileBlocks.ts

@@ -2,7 +2,9 @@ import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer.mobile';
 import { Gallery } from './Gallery/Gallery.mobile';
 import { Header } from './Header/Header';
+import { Headline } from './Headline/Headline';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
+import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock.mobile';
 import { ProductTile } from './ProductTile/ProductTile';
@@ -10,16 +12,18 @@ import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 
 export const MobileBlocks = {
-  Header,
+  ExchangeRateTile,
   Footer,
+  Gallery,
+  Header,
+  Headline,
+  MobileAppTile,
+  PictureText,
   Placeholder,
-  Tile,
-  ProductTile,
   ProductBlock,
+  ProductTile,
   TextBlock,
-  ExchangeRateTile,
-  MobileAppTile,
-  Gallery,
+  Tile,
   // TODO StepsBlock,
   // TODO BenefitsBlock,
   // TODO ProductGallery

package/src/components/PictureText/PictureText.example.json

@@ -0,0 +1,20 @@
+{
+  "title": "Продукт",
+  "description": "Описание",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 300
+    }
+  },
+  "benefits": [
+    {
+      "label": "Преимущество №1",
+      "icon": "DocumentText"
+    },
+    {
+      "label": "Преимущество №2",
+      "icon": "DiscountShape"
+    }
+  ]
+}

package/src/components/PictureText/PictureText.fixture.tsx

@@ -0,0 +1,36 @@
+import { context } from '../../setup-fixture';
+
+import { PictureText } from './PictureText';
+import type { Picture } from '../../model/Picture';
+
+const image: Picture = {
+  src: 'legal-support-business.png',
+  format: 'webp',
+  size: {
+    width: 200,
+    height: 200,
+  },
+  alt: 'Варианты потребительского кредита',
+};
+
+export default {
+  default: (
+    <PictureText
+      context={context}
+      title={'Варианты потребительского кредита'}
+      benefits={[
+        {
+          label: 'Кредит по одному документу',
+          description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
+          icon: 'DocumentText',
+        },
+        {
+          label: 'Кредит на общих условиях',
+          description: 'До 5 млн ₽ на общих условиях получения кредита',
+          icon: 'DiscountShape',
+        },
+      ]}
+      image={image}
+    />
+  ),
+};

package/src/components/PictureText/PictureText.tsx

@@ -0,0 +1,45 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { PictureTextContent } from './PictureTextContent';
+
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img';
+import { Title } from '../../ui-kit/Title/Title';
+import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+
+export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
+
+export const PictureText = JSX<PictureTextProps>(({ className, title, image, benefits }) => {
+  return (
+    <section className={`relative font-sans text-primary-text bg-white p-14 ${className}`}>
+      <Title className="font-medium m-0 text-center">{title}</Title>
+      <div className={'flex justify-center mt-9'}>
+        {image?.src && <Img className="mr-6" image={image} />}
+        {benefits?.length ? (
+          <div className="flex flex-col">{benefits.map(renderBenefit)}</div>
+        ) : null}
+      </div>
+    </section>
+  );
+});
+
+function renderBenefit(benefit: Benefit, i: number) {
+  return (
+    <div key={String(i)} className="flex flex-row mb-8">
+      {benefit.icon && (
+        <Icon
+          className="w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]"
+          name={benefit.icon}
+          width="48"
+          height="48"
+        />
+      )}
+      <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
+        <div className="font-medium text-primary-text text-xl m-0">{benefit.label}</div>
+        {benefit.description && (
+          <div className="font-normal text-sm text-secondary-text">{benefit.description}</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/PictureText/PictureTextContent.ts

@@ -0,0 +1,13 @@
+import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+
+/**
+ * @title Картинка с текстом
+ */
+export interface PictureTextContent
+  extends Pick<BaseTileCommonProps, 'title' | 'description' | 'image'> {
+  /**
+   * @title Список преимуществ
+   */
+  benefits?: Benefit[];
+}

package/src/components/Placeholder/PlaceholderContent.ts

@@ -1,3 +1,6 @@
+/**
+ * @hidden
+ */
 export interface PlaceholderContent {
   title?: string;
 }

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

@@ -0,0 +1,17 @@
+{
+  "title": "Продукт",
+  "description": "Описание",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 300
+    }
+  },
+  "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+  "buttons": [
+    {
+      "text": "Подробнее",
+      "version": "secondary"
+    }
+  ]
+}

package/src/components/ProductBlock/ProductBlock.mobile.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { ProductBlockInner } from './ProductBlockInner';
-import type { ProductBlockInnerContent } from './ProductBlockContent';
 import type { UniBlockProps } from '../../types';
+import type { ProductBlockInnerCommonProps } from './ProductBlockContent';
+import { ProductBlockInner } from './ProductBlockInner';
 
-export interface ProductBlockProps extends ProductBlockInnerContent, UniBlockProps {}
+export interface ProductBlockProps extends ProductBlockInnerCommonProps, UniBlockProps {}
 
 export const ProductBlock = JSX<ProductBlockProps>(
   ({ titleSize, image, benefits, ...props } /* Get rid of image and benefits */) => {

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,11 +1,16 @@
-import type { LinkContent } from '../../model/LinkContent';
-import type { BaseTileContent } from '../BaseTile/BaseTileContent';
+import type { LinkProps } from '../../model/LinkProps';
+import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
-export interface ProductBlockInnerContent extends BaseTileContent {
+export interface ProductBlockInnerCommonProps extends BaseTileCommonProps {
+  /** @title Преимущества */
   benefits?: Benefit[];
 }
 
-export interface ProductBlockContent extends ProductBlockInnerContent {
-  breadcrumbs?: LinkContent[];
+/**
+ * @title Продуктовый блок
+ */
+export interface ProductBlockContent extends ProductBlockInnerCommonProps {
+  /** @title Хлебные крошки */
+  breadcrumbs?: LinkProps[];
 }

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -1,13 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BaseTile } from '../BaseTile/BaseTile';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
-import type { ProductBlockInnerContent } from './ProductBlockContent';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img';
 import { Title } from '../../ui-kit/Title/Title';
+import { BaseTile } from '../BaseTile/BaseTile';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import type { ProductBlockInnerCommonProps } from './ProductBlockContent';
 
-export interface ProductBlockInnerProps extends ProductBlockInnerContent, UniBlockProps {}
+export interface ProductBlockInnerProps extends ProductBlockInnerCommonProps, UniBlockProps {}
 
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   ({ className, context, title, titleSize, description, benefits, buttons, image, items }) => {

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

@@ -0,0 +1,21 @@
+{
+  "slides": [
+    {
+      "nav": {
+        "title": "Заголовок",
+        "desc": "Описание"
+      },
+      "productBlock": {
+        "title": "Продуктовая галерея",
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 300
+          }
+        },
+        "description": "Описание",
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      }
+    }
+  ]
+}

package/src/components/ProductGallery/ProductGallery.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
-import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import type { ProductGalleryContent } from './ProductGalleryContent';
-import type { UniBlockProps } from '../../types';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
@@ -38,7 +38,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
   },
 );
 
-function renderProductBlock(block: ProductBlockInnerContent, i: number, context) {
+function renderProductBlock(block: ProductBlockInnerCommonProps, i: number, context) {
   return (
     <section key={String(i)} className="flex grow-0 shrink-0 basis-full" role="listitem">
       <div className="p-10 flex grow">

package/src/components/ProductGallery/ProductGalleryContent.ts

@@ -1,16 +1,31 @@
-import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
 
+/** @title Кнопка под слайдом */
 interface ProductGalleryNav {
+  /** @title Заголовок */
   title: string;
+  /** @title Описание */
   desc: string;
 }
 
-export interface ProductSlideContent {
+/**
+ * @title Слайд
+ */
+export interface ProductSlide {
   nav: ProductGalleryNav;
-  productBlock: ProductBlockInnerContent;
+  /** @title Содержимое слайда */
+  productBlock: ProductBlockInnerCommonProps;
 }
 
+/**
+ * @title Продуктовая галерея
+ */
 export interface ProductGalleryContent {
+  /**
+   * @title Задержка
+   * @hidden //! temporary not used
+   */
   duration?: number;
-  slides?: ProductSlideContent[];
+  /** @title Слайды */
+  slides?: ProductSlide[];
 }

package/src/components/ProductTile/ProductTile.example.json

@@ -0,0 +1,30 @@
+{
+  "title": "Продуктовая плитка",
+  "description": "Описание",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 300
+    }
+  },
+  "benefits": [
+    {
+      "label": "Преимущество 1",
+      "description": "Описание"
+    },
+    {
+      "label": "Преимущество 2",
+      "description": "Описание"
+    },
+    {
+      "label": "Преимущество 3",
+      "description": "Описание"
+    }
+  ],
+  "buttons": [
+    {
+      "text": "Подробнее",
+      "version": "primary"
+    }
+  ]
+}

package/src/components/ProductTile/ProductTileContent.ts

@@ -1,6 +1,10 @@
-import type { BaseTileContent } from '../BaseTile/BaseTileContent';
+import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
-export interface ProductTileContent extends BaseTileContent {
+/**
+ * @title Продуктовая плитка
+ */
+export interface ProductTileContent extends BaseTileCommonProps {
+  /** @title Преимущества */
   benefits?: Benefit[];
 }