@redneckz/wildless-cms-uni-blocks 0.3.32 → 0.3.33

package/mobile/src/ui-kit/Icon/Icon.tsx

@@ -12,7 +12,7 @@ const svgColorsMap: Record<IconColor, string> = {
 export const Icon = JSX<IconProps>(
   ({
     className = '',
-    name,
+    name = '',
     alt = `Иконка ${IconTitleMap[name] || name}`,
     title = alt,
     asSVG,

package/mobile/src/ui-kit/Icon/IconProps.ts

@@ -8,13 +8,22 @@ export type { IconName };
  */
 export type IconColor = 'none' | 'primary' | 'secondary';
 
-export interface IconProps {
-  className?: string;
-  name: IconName;
+export interface IconCompatibilityFields {
+  /** @title Альтернативный текст (alt) */
   alt?: string;
+  /** @title Текст подсказки (title) */
   title?: string;
+  /** @title Ширина */
   width?: string;
+  /** @title Высота */
   height?: string;
+  /** @hidden */
   asSVG?: boolean;
+  /** @hidden */
   color?: IconColor;
 }
+
+export type IconProps = IconCompatibilityFields & {
+  className?: string;
+  name?: IconName;
+};

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

@@ -1,30 +1,46 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Picture, ImgSource } from '../../model/Picture';
+import type { ImgSource, Picture } from '../../model/Picture';
+import { Icon } from '../Icon/Icon';
+import type { Image, ImageProps } from './ImgProps';
 
-export interface ImageProps {
-  className?: string;
-  imageClassName?: string;
-  image: Picture;
-}
+export const Img = JSX<ImageProps<Image>>(
+  ({ className = '', image, imageClassName = '', ...iconProps }) => {
+    // backwards compatibility with existing icons in usage
+    const icon = typeof image === 'string' ? image : image?.icon;
+    if (icon || icon === '') {
+      return <Icon className={className} name={icon} {...iconProps} />;
+    }
 
-export const Img = JSX<ImageProps>(({ className = '', image, imageClassName }) => {
-  if (!image) {
-    return null;
-  }
+    return (
+      <ImgAsPicture
+        className={className}
+        imageClassName={imageClassName}
+        image={image as Picture}
+      />
+    );
+  },
+);
 
-  return (
-    <picture className={className}>
-      {image.sources?.length
-        ? image.sources.map(({ src, format }, index) => (
-            <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
-          ))
-        : null}
-      {renderImg(image, imageClassName)}
-    </picture>
-  );
-});
+export const ImgAsPicture = JSX<ImageProps<Picture>>(
+  ({ className = '', image, imageClassName = '' }) => {
+    if (!image) {
+      return null;
+    }
+
+    return (
+      <picture className={className}>
+        {image?.sources?.length
+          ? image.sources.map(({ src, format }, index) => (
+              <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
+            ))
+          : null}
+        {renderImg(image, imageClassName)}
+      </picture>
+    );
+  },
+);
 
-const renderImg = (image, imageClassName = '') => {
+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%',

package/mobile/src/ui-kit/Img/ImgProps.ts

@@ -1,9 +1,12 @@
 import type { Picture } from '../../model/Picture';
+import type { IconCompatibilityFields, IconName } from '../Icon/IconProps';
 
-export interface ImageContent {
-  image?: Picture;
-}
+export type Image = Picture | IconName;
 
-export interface ImageProps extends ImageContent {
+export interface ImageContent<T = Picture> {
+  image?: T;
+}
+export interface ImageProps<T> extends ImageContent<T>, IconCompatibilityFields {
   className?: string;
+  imageClassName?: string;
 }

package/mobile/src/ui-kit/List/ListItem.tsx

@@ -11,7 +11,7 @@ export interface ListItemProps {
   isDotted?: boolean;
 }
 
-const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3 mt-2';
+const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
 
 const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
   primary: 'bg-primary-main',
@@ -22,7 +22,7 @@ const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
 export const ListItem = JSX<ListItemProps>(
   ({ className = '', isDotted = true, children, version = 'primary' }) => {
     return (
-      <div className={`font-sans flex items-start ${className}`} role="listitem">
+      <div className={`font-sans flex items-center ${className}`} role="listitem">
         {isDotted && <div className={getListStyle(version)} />}
         <span>{children}</span>
       </div>

package/mobile/src/ui-kit/SearchBar/SearchBar.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Icon } from '../Icon/Icon';
+import { Img } from '../Img/Img';
 
 export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
   const { term, setTerm } = context.useSearch();
@@ -8,7 +8,7 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
     <form className={`relative ${className || ''}`}>
       <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
         <div className="w-[20px] h-[20px]">
-          <Icon name="LoupeIcon" width="24" height="24" />
+          <Img image="LoupeIcon" width="24" height="24" />
         </div>
         {!term && (
           <label
@@ -37,7 +37,7 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
           setTerm('');
         }}
       >
-        <Icon name="CloseIcon" width="24" height="24" />
+        <Img image="CloseIcon" width="24" height="24" />
       </button>
     </form>
   );

package/mobile/src/ui-kit/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../Img/Img';
 import type { Tab, TabClickHandler, TabsProps } from './TabsProps';
 
 const TAB_STYLE = 'px-2 h-14 pb-2 pt-3 border border-b-0 border-main-stroke';
@@ -41,6 +41,6 @@ const renderTab =
 
 const renderIcon = (tab: Tab, isActive: boolean) => (
   <div className="h-full mt-1" style={isActive ? { filter: 'invert(1)' } : null}>
-    <Icon className="w-5 h-5 mr-3" name={tab?.icon || 'CardIcon'} asSVG={!isActive} />
+    <Img className="w-5 h-5 mr-3" image={tab?.icon || 'CardIcon'} asSVG={!isActive} />
   </div>
 );

package/mobile/src/ui-kit/Tabs/TabsProps.ts

@@ -1,4 +1,4 @@
-import type { IconName } from '../../icons/IconName';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Вкладка
@@ -8,7 +8,7 @@ export interface Tab {
   title?: string;
   /** @title Описание */
   description?: string;
-  icon?: IconName;
+  icon?: Picture;
 }
 
 export type TabClickHandler = (value: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.32",
+  "version": "0.3.33",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Accordion/Accordion.example.json

@@ -3,7 +3,9 @@
   "accordionItems": [
     {
       "label": "Аккордеон 1",
-      "labelIcon": "CardIcon",
+      "labelIcon": {
+        "icon": "CardIcon"
+      },
       "blocks": [
         {
           "blockListType": "TextBlock",
@@ -19,7 +21,9 @@
     },
     {
       "label": "Аккордеон 2",
-      "labelIcon": "CardIcon",
+      "labelIcon": {
+        "icon": "CardIcon"
+      },
       "blocks": [
         {
           "blockListType": "TextBlock",
@@ -35,7 +39,9 @@
     },
     {
       "label": "Аккордеон 3",
-      "labelIcon": "CardIcon",
+      "labelIcon": {
+        "icon": "CardIcon"
+      },
       "blocks": [
         {
           "blockListType": "TextBlock",

package/src/components/Accordion/Accordion.fixture.mobile.tsx

@@ -45,7 +45,9 @@ const propsTextBlock: AccordionProps = {
     },
     {
       label: 'Accordion label 2',
-      labelIcon: 'CardIcon',
+      labelIcon: {
+        icon: 'CardIcon',
+      },
       blocks: [PICTURE_TEXT_ACCORDION_BLOCK],
     },
     {

package/src/components/Accordion/AccordionContent.ts

@@ -1,6 +1,6 @@
 import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { IconName } from '../../icons/IconName';
+import type { Picture } from '../../model/Picture';
 /**
  * @title Элемент списка
  */
@@ -21,7 +21,7 @@ export interface AccordionItemCommonProps {
    * @default false
    */
   bordered?: boolean; // TODO: только для мобильной версии
-  labelIcon?: IconName; // TODO: только для мобильной версии
+  labelIcon?: Picture; // TODO: только для мобильной версии
 }
 
 /**

package/src/components/Accordion/AccordionItem.mobile.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import type { AccordionItemCommonProps } from './AccordionContent';
 import { AccordionItemInner } from './AccordionItemInner';
+import { Img } from '../../ui-kit/Img/Img';
 import { useActiveHandler } from './useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
@@ -28,11 +28,11 @@ export const AccordionItem = JSX<AccordionItemProps>(
             }`}
           >
             {labelIcon ? (
-              <Icon name={labelIcon} width="24" height="24" asSVG className="mr-3" />
+              <Img image={labelIcon} width="24" height="24" asSVG className="mr-3" />
             ) : null}
             {label}
           </span>
-          {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
+          {hasContent ? <Img image={icon} width="24" height="24" asSVG /> : null}
         </button>
         {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
       </li>

package/src/components/Accordion/AccordionItem.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import type { AccordionItemCommonProps } from './AccordionContent';
 import { AccordionItemInner } from './AccordionItemInner';
 import { useActiveHandler } from './useActiveHandler';
+import { Img } from '../../ui-kit/Img/Img';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
@@ -23,7 +23,7 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, isExpanded, block
         onClick={handleToggle}
       >
         <span className={`text-xl pr-2.5 font-medium`}>{label}</span>
-        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
+        {hasContent ? <Img image={icon} width="24" height="24" asSVG /> : null}
       </button>
       {hasContent ? (
         <AccordionItemInner isExpanded={isActive} blocks={blocks} context={context} />

package/src/components/BenefitsBlock/BenefitsBlock.example.json

@@ -3,11 +3,15 @@
   "benefits": [
     {
       "label": "Преимущество №1",
-      "icon": "ClockIcon"
+      "icon": {
+        "icon": "ClockIcon"
+      }
     },
     {
       "label": "Преимущество №2",
-      "icon": "SignDocsIcon"
+      "icon": {
+        "icon": "SignDocsIcon"
+      }
     }
   ]
 }

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -14,24 +14,24 @@ export default {
             label: 'Без комиссии',
             description:
               'Комиссия за выдачу кредита не взимается. Допускается полное или частичное погашение кредита',
-            icon: 'ClockIcon',
+            icon: { icon: 'ClockIcon' },
           },
           {
             label: 'Оформление по паспорту',
             description: 'Обеспечение не требуется. Кредит можно получить на любые цели',
-            icon: 'SignDocsIcon',
+            icon: { icon: 'SignDocsIcon' },
           },
           {
             label: 'Без залога и поручительства',
             description:
               'Единовременное перечисление суммы кредита в полном объёме на текущий счет в Банке',
-            icon: 'ComfortableCompIcon',
+            icon: { icon: 'ComfortableCompIcon' },
           },
           {
             label: 'Деньги за 3 дня',
             description:
               'Рассмотрение заявки с момента предоставления полного комплекта документов',
-            icon: 'ActualBalanceIcon',
+            icon: { icon: 'ActualBalanceIcon' },
           },
         ]}
       />

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 import type { Benefit, BenefitsBlockContent } from './BenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
@@ -29,14 +29,14 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
 const renderStep = (benefit: Benefit, i: number) => {
   return (
     <div key={String(i)} className="flex items-center gap-5 max-w-[500px]">
-      {benefit.icon && (
-        <Icon
+      {benefit.icon ? (
+        <Img
           className="h-[70px] w-[70px] min-w-[70px] min-h-[70px]"
-          name={benefit.icon}
+          image={benefit.icon}
           width="70"
           height="70"
         />
-      )}
+      ) : null}
       <div>
         <h3 className="font-medium text-xl m-0">{benefit.label}</h3>
         {benefit.description && (

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -1,4 +1,4 @@
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { Picture } from '../../model/Picture';
 
 export interface TextBenefit {
   /** @title Название */
@@ -11,7 +11,7 @@ export interface TextBenefit {
  * @title Преимущество
  */
 export interface Benefit extends TextBenefit {
-  icon?: IconName;
+  icon?: Picture;
 }
 
 /**

package/src/components/ComparisonTable/ComparisonTable.fixture.tsx

@@ -146,7 +146,7 @@ const columns2: Column[] = [
   {
     header: {
       title: '«Пополняемый»',
-      icon: 'GlassIcon',
+      icon: { icon: 'GlassIcon' },
       link: {
         text: 'Подробнее',
         href: '/credits',
@@ -162,7 +162,7 @@ const columns2: Column[] = [
   {
     header: {
       title: '«Комфортный»',
-      icon: 'ComfortableCompIcon',
+      icon: { icon: 'ComfortableCompIcon' },
       link: {
         text: 'Подробнее',
         href: '/credits',
@@ -178,7 +178,7 @@ const columns2: Column[] = [
   {
     header: {
       title: '«Доходный пенсионный»',
-      icon: 'ClockIcon',
+      icon: { icon: 'ClockIcon' },
       link: {
         text: 'Подробнее',
         href: '/credits',

package/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -1,6 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { ListOrientation } from '../../model/ListOrientation';
 
 /**
@@ -29,7 +28,7 @@ export interface ColumnHeader {
   title?: string;
   /** @title Подзаголовок */
   subtitle?: string;
-  icon?: IconName;
+  icon?: Picture;
   image?: Picture;
   link?: LinkProps;
 }
@@ -65,7 +64,7 @@ export interface TableColumnData {
 export interface TableColumnHeader {
   /** @title Заголовок */
   title?: string;
-  icon?: IconName;
+  icon?: Picture;
 }
 
 /**

package/src/components/ComparisonTable/HeaderCell.mobile.tsx

@@ -1,13 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
+import { Heading } from '../../ui-kit/Heading/Heading';
 
 export interface HeaderCellProps {
-  icon?: IconName;
+  icon?: Picture;
   image?: Picture;
   title?: string;
   subtitle?: string;
@@ -18,14 +16,14 @@ export interface HeaderCellProps {
 export const HeaderCell = JSX<HeaderCellProps>(
   ({ icon, image, title, subtitle, isFillGradient }) => (
     <div role="columnheader" scope="col">
-      {icon && (
-        <Icon
+      {icon ? (
+        <Img
           className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
-          name={icon}
+          image={icon}
           width="63"
           height="63"
         />
-      )}
+      ) : null}
       {image?.src && (
         <div className="mb-3.5">
           <Img image={image} />

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -3,13 +3,11 @@ import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { BORDER_CLASSES, GRADIENT } from './constants';
 
 export interface HeaderCellProps {
-  icon?: IconName;
+  icon?: Picture;
   image?: Picture;
   title?: string;
   link?: LinkProps;
@@ -23,9 +21,9 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
     scope="col"
   >
     {icon && !image?.src && (
-      <Icon
+      <Img
         className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
-        name={icon}
+        image={icon}
         width="63"
         height="63"
       />