@redneckz/wildless-cms-uni-blocks 0.6.45 → 0.6.47

package/src/components/Headline/HeadlineContent.ts

@@ -1,8 +1,8 @@
-import type { AlignType } from '../../model/AlignType';
 import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Заголовок
@@ -10,7 +10,7 @@ import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
 export type HeadlineContent = HeadlineProps & {
   /** @title Изображение (моб.) */
   image?: Picture;
-  align?: AlignType;
+  align?: TextAlign;
   bgColorHeadline?: BlockVersionWithTransparent;
   /** @hidden */
   as?: HeadingTagType;

package/src/components/Headline/headlineStyles.ts

@@ -0,0 +1,25 @@
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
+
+export const headlineStyles: Record<
+  BlockVersionWithTransparent,
+  {
+    wrapper: string;
+    titleColor: TextColor;
+    descriptionColor?: TextColor;
+  }
+> = {
+  transparent: {
+    wrapper: 'bg-transparent',
+    titleColor: 'text-primary-text',
+  },
+  primary: {
+    wrapper: 'bg-white',
+    titleColor: 'text-primary-text',
+  },
+  secondary: {
+    wrapper: 'bg-primary-main',
+    titleColor: 'text-white',
+    descriptionColor: 'text-white/80',
+  },
+};

package/src/components/Headline/headlineVersionStyles.ts

@@ -0,0 +1,55 @@
+import type { HeadlineSmallVersion, HeadlineVersion } from '../../model/HeadlineType';
+import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
+import type { TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
+
+export const headlineVersionStyles: Record<
+  HeadlineVersion,
+  {
+    wrapper: string;
+    title: HeadingCommonProps;
+    descriptionSize: TextSize | TitleSize;
+  }
+> = {
+  XXL: {
+    wrapper: 'gap-[18px]',
+    title: { headingType: 'h0', as: 'h1' },
+    descriptionSize: 'text-h5',
+  },
+  XL: {
+    wrapper: 'gap-4',
+    title: { headingType: 'h1', as: 'h1' },
+    descriptionSize: 'text-xl-light',
+  },
+  L: {
+    wrapper: 'gap-4',
+    title: { headingType: 'h2', as: 'h2' },
+    descriptionSize: 'text-xl-light',
+  },
+  M: {
+    wrapper: 'gap-3',
+    title: { headingType: 'h3', as: 'h3' },
+    descriptionSize: 'text-xl-light',
+  },
+  S: {
+    wrapper: 'gap-2',
+    title: { headingType: 'h4', as: 'h4' },
+    descriptionSize: 'text-xl-light',
+  },
+  XS: {
+    wrapper: 'gap-2',
+    title: { headingType: 'h5', as: 'h5' },
+    descriptionSize: 'text-l-light',
+  },
+};
+
+// TODO Move to Gallery and rename
+export const HEADLINE_SMALL_VERSION: Record<HeadlineSmallVersion, string> = {
+  H6: 'text-h6',
+  XL_L: 'text-xl-light',
+  XL_R: 'text-xl',
+  L_L: 'text-l-light',
+  L_R: 'text-l',
+  M: 'text-m-light',
+  S: 'text-s-light',
+  XS: 'text-xs-light',
+};

package/src/components/HorizontalLayout/HorizontalLayout.example.json

@@ -0,0 +1,19 @@
+{
+  "content": {
+    "version": "primary",
+    "gap": "XS"
+  },
+  "style": ["col-span-12"],
+  "type": "HorizontalLayout",
+  "blocks": [
+    {
+      "type": "Headline",
+      "content": {
+        "title": "Заголовок блока",
+        "description": "Описание блока",
+        "headlineVersion": "M"
+      },
+      "style": ["col-span-12"]
+    }
+  ]
+}

package/src/components/HorizontalLayout/HorizontalLayout.fixture.tsx

@@ -0,0 +1,85 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import '../../setup-fixture';
+import { Blocks } from '../Blocks';
+import { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
+import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { HorizontalLayout } from './HorizontalLayout';
+
+export const linkDocsExample: LinkDocsContent = {
+  description: 'Ответы на часто задаваемые вопросы',
+  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' },
+  ],
+};
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <HorizontalLayout
+        className="col-span-12"
+        block={{
+          type: 'HorizontalLayout',
+          blocks: [
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+          ],
+        }}
+        options={options}
+        version="primary"
+      />
+    </div>
+  ),
+  secondary: (
+    <div className="container grid grid-cols-12">
+      <HorizontalLayout
+        className="col-span-12"
+        block={{
+          type: 'HorizontalLayout',
+          blocks: [
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+          ],
+        }}
+        options={options}
+        version="secondary"
+        gap="XS"
+      />
+    </div>
+  ),
+  'one item': (
+    <div className="container grid grid-cols-12">
+      <HorizontalLayout
+        className="col-span-12"
+        block={{
+          type: 'HorizontalLayout',
+          blocks: [{ type: 'ProductTile', content: PRODUCT_TILE }],
+        }}
+        options={options}
+      />
+    </div>
+  ),
+  'three item': (
+    <div className="container grid grid-cols-12">
+      <HorizontalLayout
+        className="col-span-12"
+        block={{
+          type: 'HorizontalLayout',
+          blocks: [
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-4'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-4'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-4'] },
+          ],
+        }}
+        options={options}
+        version="transparent"
+        gap="M"
+      />
+    </div>
+  ),
+};

package/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -0,0 +1,42 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
+import { GapStyleMap, LayoutBackgroundStyleMap } from '../../model/BlockVersion';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import type { HorizontalLayoutContent } from './HorizontalLayoutContent';
+
+export interface HorizontalLayoutProps extends HorizontalLayoutContent, UniBlockProps {}
+
+export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalLayoutProps>(
+  ({
+    className = '',
+    gap = 'XS',
+    isPadding = false,
+    version = 'transparent',
+    options,
+    ...rest
+  }) => {
+    const paddingStyle = isPadding ? 'p-12' : '';
+
+    return (
+      <BlockWrapper
+        className={[
+          'grid grid-cols-12',
+          paddingStyle,
+          GapStyleMap[gap],
+          LayoutBackgroundStyleMap[version],
+          className,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        {...rest}
+      >
+        {renderChildren({ ...rest, options: options })}
+      </BlockWrapper>
+    );
+  },
+);
+
+HorizontalLayout.childrenTypes = {
+  exclude: ['HorizontalLayout'],
+};

package/src/components/HorizontalLayout/HorizontalLayout.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/HorizontalLayout/HorizontalLayoutContent.ts

@@ -0,0 +1,17 @@
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
+
+/**
+ * @title Отсуп между компонентами
+ * @enumNames ["Самый большой", "Очень большой", "Большой", "Средний", "Маленький", "Самый маленький", "Без отступа"]
+ */
+export type GapVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS' | '';
+
+/**
+ * @title Горизонтальный компоновщик
+ */
+export interface HorizontalLayoutContent {
+  version?: BlockVersionWithTransparent;
+  gap?: GapVersion;
+  /** @title Внутренний отступ компоновщика */
+  isPadding?: boolean;
+}

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -132,7 +132,7 @@ function renderDoneIcon(isActive: boolean) {
   return isActive ? (
     <Img
       className={`h-6 w-6 min-w-6 min-h-6 absolute right-4 top-4`}
-      image="DoneIcon"
+      image={{ icon: 'DoneIcon' }}
       width="24"
       height="24"
     />

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -25,7 +25,6 @@ export const LinkDocs = JSX<LinkDocsProps>(
         className={`!p-0 ${description ? 'gap-2' : 'gap-5'}`}
         title={title}
         description={description}
-        align="center"
         {...rest}
       />
       {orientation === 'vertical' ? (

package/src/components/LinkDocs/LinkDocs.tsx

@@ -17,7 +17,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     className = '',
     title,
     description,
-    align = 'center',
+    align = 'text-center',
     documents,
     icon = { icon: 'DocIcon' },
     columnsMode = 'double',

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,8 +1,8 @@
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { LinkProps } from '../../model/LinkProps';
-import type { AlignType } from '../../model/AlignType';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Отображение списка
@@ -43,5 +43,5 @@ export type LinkDocsContent = HeadlineCommonProps & {
   orientation?: ListOrientation; // TODO: мобильный проп
   /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
   hasBorder?: boolean;
-  align?: AlignType;
+  align?: TextAlign;
 };

package/src/components/PictureText/PictureText.tsx

@@ -35,7 +35,6 @@ export const PictureText = JSX<PictureTextProps>(
         description={description}
         headlineVersion="M"
         bgColorHeadline={version}
-        align="center"
         {...rest}
       />
       <div className={'flex justify-center gap-[122px] mt-[30px]'}>

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -40,7 +40,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             className={`!p-0 max-w-[600px]`}
             bgColorHeadline={version}
             headlineVersion={headlineVersion}
-            align="left"
+            align="text-left"
             {...rest}
           />
           <div className="flex flex-col justify-between h-full">

package/src/components/ProductTile/ProductTile.tsx

@@ -41,7 +41,7 @@ export const ProductTile = JSX<ProductTileProps>(
           description={description}
           headlineVersion={headlineVersion}
           bgColorHeadline={version}
-          align="left"
+          align="text-left"
           {...rest}
         />
         {renderBenefits(benefits, version, image)}

package/src/components/ProductTile/ProductTile.ui.json

@@ -2,7 +2,7 @@
   "content": {
     "benefits": {
       "items": {
-        "md": {
+        "__html": {
           "ui:widget": "html"
         },
         "type": {

package/src/components/ProductTile/ProductTileContent.ts

@@ -2,7 +2,7 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { DescriptionProps, HeadlineProps, LabelProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { MarkdownTextProps } from '../../ui-kit/MarkdownText/MarkdownTextProps';
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 
 /**
  * @title Стандартный
@@ -16,9 +16,9 @@ type TextBenefit = DescriptionProps &
 /**
  * @title Форматированный текст
  */
-type MarkdownTextContent = MarkdownTextProps & {
-  /** @default md */
-  type: 'md';
+type RichText = RichTextProps & {
+  /** @default rte */
+  type: 'rte';
 };
 
 /**
@@ -27,7 +27,7 @@ type MarkdownTextContent = MarkdownTextProps & {
  *  "type": "default"
  * }
  */
-export type Benefit = TextBenefit | MarkdownTextContent;
+export type Benefit = TextBenefit | RichText;
 
 /**
  * @title Продуктовая плитка

package/src/components/ProductTile/renderBenefit.tsx

@@ -1,5 +1,5 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import { MarkdownText } from '../../ui-kit/MarkdownText/MarkdownText';
+import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import type { TextColor } from '../../ui-kit/Text/TextProps';
 import { assertUnreachable } from '../../utils/assertUnreachable';
@@ -17,7 +17,7 @@ export const renderBenefit =
   (benefit: Benefit, i: number) => {
     const { type } = benefit;
 
-    if (!(type === 'default' || type === 'md')) {
+    if (!(type === 'default' || type === 'rte')) {
       return null;
     }
 
@@ -31,8 +31,8 @@ export const renderBenefit =
             {benefit.description}
           </Text>,
         ];
-      case 'md':
-        return <MarkdownText md={benefit.md} />;
+      case 'rte':
+        return <RichText __html={benefit.__html} />;
       default:
         assertUnreachable(benefit);
     }

package/src/components/PromoTile/PromoTile.tsx

@@ -36,7 +36,7 @@ export const PromoTile = JSX<PromoTileProps>(
               className={`!p-0 max-w-[600px]`}
               headlineVersion={getTileHeadingType(className)}
               bgColorHeadline={version}
-              align="left"
+              align="text-left"
               as="h2"
               {...rest}
             />

package/src/components/RichTextBlock/RichTextBlock.example.json

@@ -0,0 +1,5 @@
+{
+  "content": {
+    "__html": "<p class=\"h1\">Заголовок 1</p>\n<p class=\"h2\">Заголовок 2</p>\n<p class=\"h3\">Заголовок 3</p>\n<p class=\"h4\">Заголовок 4</p>\n<p class=\"h5\">Заголовок 5</p>\n<p class=\"h6\">Заголовок 6</p>\n<p>Параграф, в котором много текста и даже <a href=\"#\">ссылка</a></p>\n<p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>\n<ul>\n  <li>Список с точками</li>\n  <li>Список с точками</li>\n</ul>\n<ol>\n  <li>Нумерованный список</li>\n  <li>Нумерованный список</li>\n</ol>\n"
+  }
+}

package/src/components/RichTextBlock/RichTextBlock.fixture.tsx

@@ -0,0 +1,29 @@
+import '../../setup-fixture';
+import { RichTextBlock } from './RichTextBlock';
+
+const HTML = `
+  <p class="h1">Заголовок 1</p>
+  <p class="h2">Заголовок 2</p>
+  <p class="h3">Заголовок 3</p>
+  <p class="h4">Заголовок 4</p>
+  <p class="h5">Заголовок 5</p>
+  <p class="h6">Заголовок 6</p>
+  <p>Параграф, в котором много текста и даже <a href="#">ссылка</a></p>
+  <p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>
+  <ul>
+    <li>Список с точками</li>
+    <li>Список с точками</li>
+  </ul>
+  <ol>
+    <li>Нумерованный список</li>
+    <li>Нумерованный список</li>
+  </ol>
+`;
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <RichTextBlock className="col-span-12" __html={HTML} />
+    </div>
+  ),
+};

package/src/components/RichTextBlock/RichTextBlock.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import type { RichTextBlockContent } from './RichTextBlockContent';
+
+interface RichTextBlockProps extends RichTextBlockContent, UniBlockProps {}
+
+export const RichTextBlock = JSX<RichTextBlockProps>((props) => {
+  const { __html, ...rest } = props;
+
+  return (
+    <BlockWrapper {...rest}>
+      <RichText __html={__html} />
+    </BlockWrapper>
+  );
+});

package/src/components/RichTextBlock/RichTextBlock.ui.json

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "__html": {
+      "ui:widget": "html"
+    }
+  }
+}

package/src/components/RichTextBlock/RichTextBlockContent.ts

@@ -0,0 +1,6 @@
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
+
+/**
+ * @title Форматированный текст
+ */
+export type RichTextBlockContent = RichTextProps;