@redneckz/wildless-cms-uni-blocks 0.8.26 → 0.8.28

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

@@ -19,57 +19,57 @@ const Wrapper: FC = ({ children }) => (
 export default {
   default: (
     <Wrapper>
-      <Headline className="col-span-12" {...HEADLINE} />
+      <Headline className="col-span-12" {...HEADLINE} version="primary" />
     </Wrapper>
   ),
   'default left alignment': (
     <Wrapper>
-      <Headline className="col-span-12" {...HEADLINE} align="text-left" />
+      <Headline className="col-span-12" {...HEADLINE} version="primary" align="text-left" />
     </Wrapper>
   ),
   'default right alignment': (
     <Wrapper>
-      <Headline className="col-span-12" {...HEADLINE} align="text-right" />
+      <Headline className="col-span-12" {...HEADLINE} version="primary" align="text-right" />
     </Wrapper>
   ),
   'default difficult XXL': (
     <Wrapper>
-      <Headline className="col-span-12" {...HEADLINE} headlineVersion="XXL" />
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="XXL" />
     </Wrapper>
   ),
   'default difficult XL': (
     <Wrapper>
-      <Headline className="col-span-12" {...HEADLINE} headlineVersion="XL" />
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="XL" />
     </Wrapper>
   ),
   'default difficult L': (
     <Wrapper>
-      <Headline className="col-span-12" {...HEADLINE} headlineVersion="L" />
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="L" />
     </Wrapper>
   ),
   'default difficult M': (
     <Wrapper>
-      <Headline className="col-span-12" {...HEADLINE} headlineVersion="M" />
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="M" />
     </Wrapper>
   ),
   'default difficult S': (
     <Wrapper>
-      <Headline className="col-span-12" {...HEADLINE} headlineVersion="S" />
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="S" />
     </Wrapper>
   ),
   'primary left alignment': (
     <Wrapper>
-      <Headline className="col-span-12" {...HEADLINE} align="text-left" />
+      <Headline className="col-span-12" {...HEADLINE} version="primary" align="text-left" />
     </Wrapper>
   ),
   'primary center alignment': (
     <Wrapper>
-      <Headline className="col-span-12" {...HEADLINE} />
+      <Headline className="col-span-12" {...HEADLINE} version="primary" />
     </Wrapper>
   ),
   'primary right alignment': (
     <Wrapper>
-      <Headline className="col-span-12" {...HEADLINE} align="text-right" />
+      <Headline className="col-span-12" {...HEADLINE} version="primary" align="text-right" />
     </Wrapper>
   ),
   'secondary left alignment': (

package/src/components/Headline/Headline.tsx

@@ -19,6 +19,8 @@ export const Headline = JSX<HeadlineProps>(
     align = 'text-center',
     as,
     isPadding = true,
+    isTheme = false,
+    version = '',
     ...rest
   }) => {
     const versionStyle = headlineVersionStyles[headlineVersion];
@@ -26,12 +28,9 @@ export const Headline = JSX<HeadlineProps>(
 
     return (
       <BlockWrapper
-        className={style(
-          'flex flex-col group-data-secondary:bg-primary-main group-data-secondary:text-white',
-          paddingStyle,
-          versionStyle.wrapper,
-          className,
-        )}
+        className={style('flex flex-col', paddingStyle, versionStyle.wrapper, className)}
+        version={version}
+        isTheme={isTheme}
         {...rest}
       >
         {title ? (

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

@@ -1,7 +1,9 @@
 {
   "content": {
     "version": "primary",
-    "gap": "XS"
+    "isTheme": false,
+    "gap": "XS",
+    "title": "Горизонтальный компоновщик"
   },
   "style": ["col-span-12"],
   "type": "HorizontalLayout",

package/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -9,10 +9,18 @@ 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', ...rest }) => (
+  ({
+    className = '',
+    gap = 'XS',
+    isPadding = false,
+    version = 'transparent',
+    isTheme = false,
+    ...rest
+  }) => (
     <BlockWrapper
       className={style('grid grid-cols-12', isPadding ? 'p-12' : '', gapStyles[gap], className)}
       version={version}
+      isTheme={isTheme}
       {...rest}
     >
       {renderChildren(rest)}
@@ -21,5 +29,5 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
 );
 
 HorizontalLayout.childrenTypes = {
-  exclude: ['HorizontalLayout'],
+  exclude: ['HorizontalLayout', 'Accordion', 'OtherProducts'],
 };

package/src/components/HorizontalLayout/HorizontalLayoutContent.ts

@@ -1,7 +1,8 @@
+import type { ColorPalette } from '../../model/ContentPageDef';
 import type { UniBlockContent } from '../../model/JSXBlock';
 
 /**
- * @title Отсуп между компонентами
+ * @title Отступ между компонентами
  * @enumNames ["Самый большой", "Очень большой", "Большой", "Средний", "Маленький", "Самый маленький", "Без отступа"]
  */
 export type GapVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS' | '';
@@ -10,6 +11,7 @@ export type GapVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS' | '';
  * @title Горизонтальный компоновщик
  */
 export type HorizontalLayoutContent = UniBlockContent & {
+  colorPalette?: ColorPalette;
   gap?: GapVersion;
   /** @title Внутренний отступ компоновщика */
   isPadding?: boolean;

package/src/components/ImgBlock/ImgBlockContent.ts

@@ -1,9 +1,7 @@
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
 /**
  * @title Картинка
  */
-export type ImgBlockContent = UniBlockContent & {
-  image?: Picture;
-};
+export type ImgBlockContent = UniBlockContent & ImageContent & {};

package/src/components/InvestmentInfo/InvestmentInfoContent.ts

@@ -1,3 +1,4 @@
+import type { BulletsProps } from '../../model/Bullets';
 import type { TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { ListContent } from '../../ui-kit/List/ListContent';
@@ -45,9 +46,8 @@ export type InvestmentColumn = {
  * @title Блок инвестиций
  */
 export type InvestmentInfoContent = UniBlockContent &
-  ListContent & {
-    /** @title Буллиты */
-    isDotted?: boolean;
+  ListContent &
+  BulletsProps & {
     /** @title Элемент данных 1 */
     investmentZeroColumn?: InvestmentZeroColumn;
     /** @title Остальные элементы данных */

package/src/components/LinkDocs/LinkDocs.example.json

@@ -4,7 +4,13 @@
     "description": "Описание",
     "headlineVersion": "M",
     "icon": {
-      "icon": "DocIcon"
+      "format": "webp",
+      "size": {
+        "width": 24,
+        "height": 24
+      },
+      "icon": "DocIcon",
+      "iconVersion": "color"
     },
     "documents": [
       {
@@ -29,6 +35,7 @@
     ],
     "columnsMode": "double",
     "orientation": "vertical",
-    "hasBorder": true
+    "hasBorder": true,
+    "align": "text-center"
   }
 }

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -2,7 +2,7 @@ import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import type { ListOrientation } from '../../model/ListOrientation';
-import type { Picture } from '../../model/Picture';
+import type { IconProps } from '../../model/Picture';
 import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
@@ -26,18 +26,8 @@ export interface LinkDocsItem extends LinkProps {
  * @title Список документов
  */
 export type LinkDocsContent = UniBlockContent &
-  HeadlineCommonProps & {
-    /**
-     *  @title Иконка
-     *  @default {
-     *   "size": {
-     *     "width": 24,
-     *     "height": 24
-     *   },
-     *   "format": "webp"
-     * }
-     */
-    icon?: Picture;
+  HeadlineCommonProps &
+  IconProps & {
     /** @title Список */
     documents?: LinkDocsItem[];
     columnsMode?: LinkColumnsMode;
@@ -45,9 +35,6 @@ export type LinkDocsContent = UniBlockContent &
     orientation?: ListOrientation; // TODO: мобильный проп
     /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
     hasBorder?: boolean;
-    /**
-     * @title Выравнивание
-     * @default text-center
-     */
+    /** @title Выравнивание */
     align?: TextAlign;
   };

package/src/components/LinkDocs/LinkDocsListItemBase.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Img } from '../../ui-kit/Img/Img';
-import type { LinkDocsItem } from './LinkDocsContent';
 import type { Picture } from '../../model/Picture';
+import { Img } from '../../ui-kit/Img/Img';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import type { LinkDocsItem } from './LinkDocsContent';
 
 export interface LinkDocsListItemProps {
   className?: string;

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

@@ -6,8 +6,17 @@
       "size": {
         "width": 529,
         "height": 345
-      }
+      },
+      "sources": [
+        {
+          "media": 1279,
+          "width": 360,
+          "format": "webp",
+          "alignment": "center"
+        }
+      ]
     },
+    "alignTitle": "left",
     "qr": null,
     "buttons": [
       {

package/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -4,6 +4,7 @@ import type { UniBlockContent } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
 /**
@@ -13,30 +14,13 @@ export type MobileAppTileContent = UniBlockContent &
   HeadlineCommonProps &
   HeadingCommonProps &
   ButtonContent &
-  ListContent & {
-    /**
-     * @title Выравнивание заголовка
-     * @default left
-     */
+  ListContent &
+  ImageContent & {
+    /** @title Выравнивание заголовка */
     alignTitle?: AlignType;
     // TODO: description для мобильной версии
     /** @title QR-код */
     qr?: Picture;
     /** @title Ссылка */
     href?: string; // TODO: для мобильной версии
-    /**
-     * @default {
-     *   "format": "webp",
-     *   "size": {
-     *       "width": 600
-     *   },
-     *   "sources": [{
-     *       "media": 1279,
-     *	     "width": 360,
-     *       "format": "webp",
-     *       "alignment": "center"
-     *   }]
-     * }
-     */
-    image?: Picture;
   };

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

@@ -7,7 +7,15 @@
       "size": {
         "width": 400,
         "height": 300
-      }
+      },
+      "sources": [
+        {
+          "media": 1279,
+          "width": 240,
+          "format": "webp",
+          "alignment": "center"
+        }
+      ]
     },
     "version": "primary",
     "directionRight": false,

package/src/components/PictureText/PictureTextContent.ts

@@ -1,33 +1,16 @@
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 import type { BenefitsProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
 /**
  * @title Картинка с текстом
  */
 export type PictureTextContent = UniBlockContent &
   BenefitsProps &
-  HeadlineCommonProps & {
-    /**
-     * @default {
-     *   "format": "webp",
-     *   "size": {
-     *       "width": 400
-     *   },
-     *   "sources": [{
-     *       "media": 1279,
-     *       "width": 240,
-     *       "format": "webp",
-     *       "alignment": "center"
-     *   }]
-     * }
-     */
-    image?: Picture;
-    /**
-     * @title Картинка справа/текст слева
-     * @default false
-     */
+  HeadlineCommonProps &
+  ImageContent & {
+    /** @title Картинка справа/текст слева */
     directionRight?: boolean;
     /** @title Ежемесячный лимит */
     monthLimit?: number;

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

@@ -12,7 +12,15 @@
       "size": {
         "width": 234,
         "height": 234
-      }
+      },
+      "sources": [
+        {
+          "media": 1279,
+          "width": 164,
+          "format": "webp",
+          "alignment": "northeast"
+        }
+      ]
     },
     "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
     "isDotted": true,
@@ -24,6 +32,7 @@
     ],
     "version": "primary",
     "benefitsVersion": "normal",
+    "benefitsCountOfRow": 3,
     "benefits": [
       {
         "label": "Преимущество №1",

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,11 +1,12 @@
+import type { BulletsProps } from '../../model/Bullets';
 import type { Footnote } from '../../model/Footnote';
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { IconVersion } from '../../model/IconVersion';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
-import type { Picture } from '../../model/Picture';
 import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import type { BackwardButtonProps, ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 
@@ -13,25 +14,11 @@ export type ProductBlockInnerContent = HeadlineProps &
   RichTextProps &
   ListContent &
   ButtonContent &
-  Footnote & {
-    /**
-     * @default {
-     *   "format": "webp",
-     *   "size": {
-     *       "width": 600
-     *   },
-     *   "sources": [{
-     *       "media": 1279,
-     *	     "width": 360,
-     *       "format": "webp",
-     *       "alignment": "northeast"
-     *   }]
-     * }
-     */
-    image?: Picture;
+  Footnote &
+  ImageContent &
+  BulletsProps & {
     /**
      * @title Количество преимуществ в строке
-     * @default 3
      * @enumNames ["2", "3"]
      */
     benefitsCountOfRow?: 2 | 3;
@@ -42,11 +29,6 @@ export type ProductBlockInnerContent = HeadlineProps &
      */
     benefits?: BenefitItemProps[];
     benefitsVersion?: IconVersion;
-    /**
-     *  @title Буллиты
-     *  @default true
-     */
-    isDotted?: boolean;
     /** @title Лейбл (моб.) */
     label?: string;
     /**

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -42,7 +42,6 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             description={description}
             headlineVersion={headlineVersion}
             align="text-left"
-            version={version}
           />
           <div className="flex flex-col justify-between h-full">
             <BaseTile buttons={renderButtonsSection(buttons)}>

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

@@ -6,8 +6,16 @@
     "image": {
       "format": "webp",
       "size": {
-        "width": 300
-      }
+        "width": 242
+      },
+      "sources": [
+        {
+          "media": 1279,
+          "width": 145,
+          "format": "webp",
+          "alignment": "southeast"
+        }
+      ]
     },
     "version": "primary",
     "benefits": [

package/src/components/ProductTile/ProductTileContent.ts

@@ -6,9 +6,9 @@ import type {
   LabelProps,
 } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 import type { RichTextItem } from '../../model/RichTextItem';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
 /**
  * @title Стандартный
@@ -29,22 +29,8 @@ export type Benefit = TextBenefit | RichTextItem;
 export type ProductTileContent = UniBlockContent &
   HeadlineProps &
   AdditionalDescriptionProps &
-  ButtonContent & {
-    /**
-     * @default {
-     *   "format": "webp",
-     *   "size": {
-     *       "width": 320
-     *   },
-     *   "sources": [{
-     *       "media": 1279,
-     *	     "width": 192,
-     *       "format": "webp",
-     *       "alignment": "southeast"
-     *   }]
-     * }
-     */
-    image?: Picture;
+  ButtonContent &
+  ImageContent & {
     /**
      * @title Преимущества
      * @maxItems 7

package/src/components/Recommendation/Recommendation.example.json

@@ -16,7 +16,11 @@
           { "href": "https://t.me" },
           { "href": "https://vk.com" },
           { "href": "https://ok.ru" }
-        ]
+        ],
+        "button": {
+          "text": "",
+          "version": "secondary"
+        }
       },
       {
         "image": {

package/src/components/Recommendation/RecommendationContent.ts

@@ -1,45 +1,19 @@
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkCommonProps } from '../../model/LinkProps';
-import type { Picture } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
 /**
  * @title Карточка
  */
-export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent {
+export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent, ImageContent {
   /**
    * @title Соц сети
    * @minItems 3
-   * @default [
-   * { "href": "https://t.me" },
-   * { "href": "https://vk.com" },
-   * { "href": "https://ok.ru" },
-   * ]
    */
   socialMedia?: LinkCommonProps[];
-  /**
-   * @default {
-   *   "format": "webp",
-   *   "size": {
-   *       "width": 290
-   *   },
-   *   "sources": [{
-   *       "media": 1279,
-   *       "width": 174,
-   *       "format": "webp",
-   *       "alignment": "southeast"
-   *   }]
-   * }
-   */
-  image?: Picture;
-  /**
-   * @default {
-   * "text": "",
-   * "version": "secondary"
-   * }
-   */
   button?: ButtonProps;
 }
 

package/src/components/StepsBlock/StepsBlock.example.json

@@ -12,12 +12,13 @@
         "label": "Шаг №1",
         "description": "Описание шага №1",
         "icon": {
+          "format": "webp",
           "icon": "NewDocIcon",
           "size": {
             "width": 48,
             "height": 48
           },
-          "format": "webp"
+          "iconVersion": "normal"
         },
         "button": {
           "text": "Кнопка",
@@ -29,12 +30,13 @@
         "type": "default",
         "label": "Шаг №2",
         "icon": {
+          "format": "webp",
           "icon": "PassSendIcon",
           "size": {
             "width": 48,
             "height": 48
           },
-          "format": "webp"
+          "iconVersion": "normal"
         },
         "button": {
           "text": "Кнопка",
@@ -46,12 +48,13 @@
         "type": "default",
         "description": "Шаг №3 без заголовка",
         "icon": {
+          "format": "webp",
           "icon": "ActualBalanceIcon",
           "size": {
             "width": 48,
             "height": 48
           },
-          "format": "webp"
+          "iconVersion": "normal"
         },
         "button": {
           "text": "Кнопка",
@@ -64,6 +67,7 @@
       "text": "Кнопка",
       "target": "_blank",
       "version": "primary"
-    }
+    },
+    "isDotted": true
   }
 }