@redneckz/wildless-cms-uni-blocks 0.3.75 → 0.3.77

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/ButtonInner.tsx

@@ -15,7 +15,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {isWithText(props) ? (
         <div>
           <div className="text-m-2xs font-light text-left">{aboveText}</div>
-          <div className="text-button text-left">{text}</div>
+          <div className="text-base text-left">{text}</div>
         </div>
       ) : null}
       {appendRight ? appendRight : null}
@@ -30,7 +30,7 @@ const getButtonStyle = (props: ButtonInnerProps) => {
     return '';
   }
 
-  const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[18px]'}`;
+  const withTextStyle = `px-9 gap-2 ${aboveText ? 'py-2' : 'py-4'}`;
 
   return [
     'flex items-center justify-center',

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

@@ -59,7 +59,7 @@ export const Foldable = JSX<FoldableProps>(
             onClick={handleToggle}
           >
             <span className="pr-3">{isActive ? 'Скрыть' : foldButtonLabel}</span>
-            {icon && <Icon name={icon} iconVersion="white" width="20" height="20" asSVG />}
+            {icon ? <Icon name={icon} iconVersion="white" width="20" height="20" asSVG /> : null}
           </button>
         ) : null}
       </div>

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);