@redneckz/wildless-cms-uni-blocks 0.3.76 → 0.3.78

package/src/components/Tile/Tile.example.json

@@ -7,21 +7,14 @@
     "format": "webp",
     "size": {
       "width": 445
-    },
-    "alt": "",
-    "title": ""
+    }
   },
   "isDotted": true,
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "buttons": [
     {
       "text": "Кнопка",
-      "version": "primary",
-      "target": "",
-      "icon": {
-        "alt": "",
-        "title": ""
-      }
+      "version": "primary"
     }
   ],
   "version": "primary"

package/src/model/Picture.ts

@@ -10,6 +10,12 @@ export interface Img {
   title?: string;
 }
 
+/**
+ * @title Брейкпоинт
+ * @enumNames ["1919px и меньше", "1439px и меньше", "1279px и меньше"]
+ */
+export type MediaQuery = '(max-width: 1919px)' | '(max-width: 1439px)' | '(max-width: 1279px)';
+
 export interface ImgSource {
   /** @title Иконка */
   icon?: IconName;
@@ -20,6 +26,7 @@ export interface ImgSource {
   format?: 'jpeg' | 'jpg' | 'png' | 'gif' | 'webp' | 'heif' | 'avif';
   /** @hidden */
   options?: Record<string, any>;
+  media?: MediaQuery;
   /** @title Размер изображения */
   size?: {
     /** @title Ширина */

package/src/ui-kit/BlocksList/BlocksListProps.ts

@@ -27,71 +27,93 @@ export interface BlocksCommonProps {
 
 /**
  * @title Заголовок
- * @default {"blockListType": "Headline"}
  */
 export type HeadlineBlockListDef = HeadlineContent &
-  BlocksCommonProps & { blockListType: 'Headline' };
+  BlocksCommonProps & {
+    /** @default Headline */
+    blockListType: 'Headline';
+  };
 
 /**
  * @title Список документов
- * @default {"blockListType": "LinkDocs"}
  */
 export type LinkDocsBlockListDef = LinkDocsContent &
-  BlocksCommonProps & { blockListType: 'LinkDocs' };
+  BlocksCommonProps & {
+    /** @default LinkDocs */
+    blockListType: 'LinkDocs';
+  };
 
 /**
  * @title Текстовый блок
- * @default {"blockListType": "TextBlock"}
  */
 export type TextBlockBlockListDef = TextBlockContent &
-  BlocksCommonProps & { blockListType: 'TextBlock' };
+  BlocksCommonProps & {
+    /** @default TextBlock */
+    blockListType: 'TextBlock';
+  };
 
 /**
  * @title Картинка с текстом
- * @default {"blockListType": "PictureText"}
  */
 export type PictureTextBlockListDef = PictureTextContent &
-  BlocksCommonProps & { blockListType: 'PictureText' };
+  BlocksCommonProps & {
+    /** @default PictureText */
+    blockListType: 'PictureText';
+  };
 
 /**
  * @title Продуктовый блок
- * @default {"blockListType": "ProductBlock"}
  */
 export type ProductBlockBlockListDef = ProductBlockContent &
-  BlocksCommonProps & { blockListType: 'ProductBlock' };
+  BlocksCommonProps & {
+    /** @default ProductBlock */
+    blockListType: 'ProductBlock';
+  };
 
 /**
  * @title Плитка
- * @default {"blockListType": "Tile"}
  */
-export type TileBlockListDef = TileContent & BlocksCommonProps & { blockListType: 'Tile' };
+export type TileBlockListDef = TileContent &
+  BlocksCommonProps & {
+    /** @default Tile */
+    blockListType: 'Tile';
+  };
 
 /**
  * @title Продуктовая плитка
- * @default {"blockListType": "ProductTile"}
  */
 export type ProductTileBlockListDef = ProductTileContent &
-  BlocksCommonProps & { blockListType: 'ProductTile' };
+  BlocksCommonProps & {
+    /** @default ProductTile */
+    blockListType: 'ProductTile';
+  };
 
 /**
  * @title Галерея
- * @default {"blockListType": "Gallery"}
  */
-export type GalleryBlockListDef = GalleryContent & BlocksCommonProps & { blockListType: 'Gallery' };
+export type GalleryBlockListDef = GalleryContent &
+  BlocksCommonProps & {
+    /** @default Gallery */
+    blockListType: 'Gallery';
+  };
 
 /**
  * @title Мини-галлерея
- * @default {"blockListType": "MiniGallery"}
  */
 export type MiniGalleryBlockListDef = MiniGalleryContent &
-  BlocksCommonProps & { blockListType: 'MiniGallery' };
+  BlocksCommonProps & {
+    /** @default MiniGallery */
+    blockListType: 'MiniGallery';
+  };
 
 /**
  * @title Список ссылок
- * @default {"blockListType": "LinkList"}
  */
 export type LinkListBlockListDef = LinkListContent &
-  BlocksCommonProps & { blockListType: 'LinkList' };
+  BlocksCommonProps & {
+    /** @default LinkList */
+    blockListType: 'LinkList';
+  };
 
 /**
  * @title Содержимое блока

package/src/ui-kit/Button/ButtonProps.ts

@@ -28,6 +28,8 @@ export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
 export interface ButtonWithIconProps extends ButtonProps {
   /** @title Иконка */
   icon?: Picture;
+  /** @title Иконка справа */
+  iconRight?: Picture;
   /** @title Верхний текст */
   aboveText?: string;
   /** @hidden */

package/src/ui-kit/Button/ButtonSection.tsx

@@ -20,7 +20,7 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
   ) : null;
 });
 
-function renderButton({ icon, ...button }: ButtonWithIconProps, i: number) {
+function renderButton({ icon, iconRight, ...button }: ButtonWithIconProps, i: number) {
   if (!button?.text) {
     return;
   }
@@ -29,6 +29,7 @@ function renderButton({ icon, ...button }: ButtonWithIconProps, i: number) {
     <Button
       key={String(i)}
       appendLeft={<Img image={icon} width="24" height="24" asSVG />}
+      appendRight={<Img image={iconRight} width="24" height="24" asSVG />}
       {...button}
     />
   ) : (

package/src/ui-kit/Img/Img.tsx

@@ -43,8 +43,14 @@ export const ImgAsPicture = JSX<ImageProps<Picture>>(
     return (
       <picture className={`flex-none ${className}`}>
         {image?.sources?.length
-          ? image.sources.map(({ src, format }, index) => (
-              <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
+          ? image.sources.map(({ src, format, media, size }, index) => (
+              <source
+                key={`${index}_${src}`}
+                srcSet={src}
+                type={formatToMimeType(format)}
+                media={media}
+                {...size}
+              />
             ))
           : null}
         {renderImg(image, imageClassName)}
@@ -54,23 +60,10 @@ export const ImgAsPicture = JSX<ImageProps<Picture>>(
 );
 
 const renderImg = (image: Picture, imageClassName = '') => {
-  const style = {
-    width: image.size?.width ? `${image.size?.width}px` : '100%',
-    height: image.size?.height ? `${image.size?.height}px` : '100%',
-  };
   const title = image.title || '';
   const alt = image.alt || image.title;
 
-  return (
-    <img
-      src={image.src}
-      className={imageClassName}
-      alt={alt}
-      title={title}
-      style={style}
-      {...image.size}
-    />
-  );
+  return <img src={image.src} className={imageClassName} alt={alt} title={title} {...image.size} />;
 };
 
 export function formatToMimeType(format: ImgSource['format']): string | undefined {

package/src/utils/checkIsIconRenderable.tsx

@@ -0,0 +1,3 @@
+import type { Picture } from '../model/Picture';
+
+export const checkIsIconRenderable = (icon?: Picture) => Boolean(icon?.icon || icon?.src);