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

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

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

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

@@ -63,6 +63,8 @@ const MINI_GALLERY_ACCORDION_BLOCK: MiniGalleryBlockListDef = {
 
 const propsBlock: AccordionProps = {
   context,
+  title: 'Accordion title',
+  description: 'Accordion description',
   accordionItems: [
     {
       label: 'Accordion label 1',

package/src/components/Accordion/Accordion.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
@@ -7,28 +6,16 @@ import { AccordionItem } from './AccordionItem';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
-const accordionStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const Accordion = JSX<AccordionProps>(
-  ({ title, accordionItems, context, className = '', version = 'primary', anchor = null }) => {
+  ({ title, description, accordionItems, context, className = '', anchor = null }) => {
     return (
-      <section
-        className={`p-[50px] font-sans ${className} ${accordionStyleMap[version]}`}
-        id={anchor}
-      >
+      <section className={`p-[50px] font-sans bg-white text-primary-text ${className}`} id={anchor}>
         {title ? <Heading headingType="h4" className="mb-2.5" title={title} /> : null}
+        {description ? <div className="mb-2.5 text-base">{description}</div> : null}
         {accordionItems?.length ? (
           <ul className="list-none m-0 p-0">
             {accordionItems.map((item, i) => (
-              <AccordionItem
-                key={`AccordionItem${i}`}
-                {...item}
-                version={version}
-                context={context}
-              />
+              <AccordionItem key={`AccordionItem${i}`} {...item} context={context} />
             ))}
           </ul>
         ) : null}

package/src/components/Accordion/AccordionContent.ts

@@ -1,5 +1,6 @@
-import type { BlockDef, ColumnsCount } from '../../ui-kit/BlocksList/BlocksListProps';
+import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
 /**
  * @title Элемент списка
  */
@@ -20,9 +21,7 @@ export interface AccordionItemCommonProps {
    * @default false
    */
   bordered?: boolean; // TODO: только для мобильной версии
-  version?: BlockVersion;
-
-  columns?: ColumnsCount;
+  labelIcon?: Picture; // TODO: только для мобильной версии
 }
 
 /**
@@ -35,7 +34,7 @@ export interface AccordionContent {
   /** @title Список */
   accordionItems?: AccordionItemCommonProps[];
   /** @title Описание */
-  description?: string; // TODO: только для мобильной версии
+  description?: string;
   /**
    * @title Отображать/скрывать обводку у элемента списка
    * @default false

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

@@ -1,40 +1,45 @@
 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 {}
 
-export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, bordered, context }) => {
-  const { hasContent, icon, handleToggle } = useActiveHandler({
-    context,
-    blocks,
-  });
+export const AccordionItem = JSX<AccordionItemProps>(
+  ({ label, labelIcon, blocks, bordered, context }) => {
+    const { hasContent, icon, handleToggle } = useActiveHandler({
+      context,
+      blocks,
+    });
 
-  return (
-    <li
-      className={`${
-        bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0'
-      } border-solid border-main-divider`}
-    >
-      <button
-        className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
+    return (
+      <li className={`${borderedLiClass(bordered)} border-solid border-main-divider`}>
+        <button
+          className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
           ${bordered ? '' : 'py-[14px] px-0'}
           ${hasContent ? 'group cursor-pointer' : ''}`}
-        onClick={handleToggle}
-      >
-        <span
-          className={`text-m-title-xs pr-2.5 font-medium ${
-            hasContent ? 'group-hover:text-primary-main' : ''
-          }`}
+          onClick={handleToggle}
         >
-          {label}
-        </span>
-        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
-      </button>
-      {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
-    </li>
-  );
-});
+          <span
+            className={`text-m-title-xs pr-2.5 font-medium flex ${
+              hasContent ? 'group-hover:text-primary-main' : ''
+            }`}
+          >
+            {labelIcon ? (
+              <Img image={labelIcon} width="24" height="24" asSVG className="mr-3" />
+            ) : null}
+            {label}
+          </span>
+          {hasContent ? <Img image={icon} width="24" height="24" asSVG /> : null}
+        </button>
+        {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
+      </li>
+    );
+  },
+);
+
+function borderedLiClass(bordered) {
+  return bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0';
+}

package/src/components/Accordion/AccordionItem.tsx

@@ -1,59 +1,33 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion } from '../../model/BlockVersion';
 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 {}
 
-const buttonStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-primary-text',
-  secondary: 'text-white',
-};
+export const AccordionItem = JSX<AccordionItemProps>(({ label, isExpanded, blocks, context }) => {
+  const { isActive, hasContent, icon, handleToggle } = useActiveHandler({
+    context,
+    blocks,
+    initialState: isExpanded,
+  });
 
-const buttonHoverStyleMap: Record<BlockVersion, string> = {
-  primary: 'group-hover:text-primary-main',
-  secondary: 'group-hover:text-white',
-};
-
-export const AccordionItem = JSX<AccordionItemProps>(
-  ({ label, isExpanded, blocks, columns, context, version = 'primary' }) => {
-    const { isActive, hasContent, icon, handleToggle } = useActiveHandler({
-      context,
-      blocks,
-      initialState: isExpanded,
-    });
-
-    return (
-      <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
-        <button
-          className={`border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans ${
-            buttonStyleMap[version]
-          }
-        ${hasContent ? 'group cursor-pointer' : ''}`}
-          onClick={handleToggle}
-        >
-          <span
-            className={`text-xl pr-2.5 font-medium ${
-              hasContent ? buttonHoverStyleMap[version] : ''
-            }`}
-          >
-            {label}
-          </span>
-          {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
-        </button>
-        {hasContent ? (
-          <AccordionItemInner
-            isExpanded={isActive}
-            columns={columns}
-            blocks={blocks}
-            version={version}
-            context={context}
-          />
-        ) : null}
-      </li>
-    );
-  },
-);
+  return (
+    <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
+      <button
+        className={`border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans
+            ${hasContent ? 'group cursor-pointer' : ''}
+          `}
+        onClick={handleToggle}
+      >
+        <span className={`text-xl pr-2.5 font-medium`}>{label}</span>
+        {hasContent ? <Img image={icon} width="24" height="24" asSVG /> : null}
+      </button>
+      {hasContent ? (
+        <AccordionItemInner isExpanded={isActive} blocks={blocks} context={context} />
+      ) : null}
+    </li>
+  );
+});

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

@@ -2,14 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { AccordionItemProps } from './AccordionItem';
 import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
 
-export const AccordionItemInner = JSX<AccordionItemProps>(
-  ({ blocks, context, version = 'primary' }) => {
-    const className = 'mb-5 last:mb-0 first:mt-2';
-    const columns = 1;
-    return (
-      <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
-        {renderBlocksList({ context, className, columns, blocks, version })}
-      </div>
-    );
-  },
-);
+export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
+  const className = 'mb-5 last:mb-0 first:mt-2';
+  return (
+    <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
+      {renderBlocksList({ context, className, blocks })}
+    </div>
+  );
+});

package/src/components/Accordion/AccordionItemInner.tsx

@@ -2,13 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { AccordionItemProps } from './AccordionItem';
 import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
 
-export const AccordionItemInner = JSX<AccordionItemProps>(
-  ({ blocks, columns = 1, context, version = 'primary' }) => {
-    const className = 'mb-5 last:mb-0 pb-5';
-    return (
-      <div className="transition-all duration-300 max-h-0 overflow-hidden">
-        {renderBlocksList({ context, className, columns, blocks, version })}
-      </div>
-    );
-  },
-);
+export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
+  const className = 'mb-5 last:mb-0 pb-5';
+  return (
+    <div className="transition-all duration-300 max-h-0 overflow-hidden">
+      {renderBlocksList({ context, className, blocks })}
+    </div>
+  );
+});

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"
       />