@redneckz/wildless-cms-uni-blocks 0.3.61 → 0.3.63

package/src/components/Headline/Headline.mobile.tsx

@@ -20,14 +20,14 @@ export const Headline = JSX<HeadlineProps>(
     const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
     return (
       <section className={`px-4 py-6 ${STYLE_MAPS.background} ${className}`}>
-        {title && (
+        {title ? (
           <Heading
             headingType="h2"
             className={`${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}
             title={title}
           />
-        )}
-        {description && (
+        ) : null}
+        {description ? (
           <p
             className={`font-normal text-m-md ${STYLE_MAPS.description} ${ALIGN_TEXT[align]} ${
               title ? 'mt-2.5' : ''
@@ -35,7 +35,7 @@ export const Headline = JSX<HeadlineProps>(
           >
             {description}
           </p>
-        )}
+        ) : null}
         {image?.src && (
           <div className="mt-5 mx-auto flex justify-center">
             <Img image={image} />

package/src/components/Headline/Headline.tsx

@@ -19,18 +19,18 @@ export const Headline = JSX<HeadlineProps>(
     const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
     return (
       <section className={`p-[50px] ${STYLE_MAPS.background} ${className}`} id={anchor}>
-        {title && (
+        {title ? (
           <Heading
             headingType="h2"
             className={`text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}
             title={title}
           />
-        )}
-        {description && (
+        ) : null}
+        {description ? (
           <p className={`font-normal text-base mt-4 ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}>
             {description}
           </p>
-        )}
+        ) : null}
       </section>
     );
   },

package/src/components/Headline/HeadlineContent.ts

@@ -2,7 +2,7 @@ import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { AlignType } from '../BaseTile/BaseTileProps';
+import type { AlignType } from '../../model/AlignType';
 
 /**
  * @title Заголовок

package/src/components/Headline/constants.ts

@@ -1,4 +1,4 @@
-import type { AlignType } from '../BaseTile/BaseTileProps';
+import type { AlignType } from '../../model/AlignType';
 import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 
 export const ALIGN_TEXT: Record<AlignType, string> = {

package/src/components/LinkDocs/LinkDocs.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import type { AlignType } from '../BaseTile/BaseTileProps';
+import type { AlignType } from '../../model/AlignType';
 import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsList } from './LinkDocsList';
 

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
-import type { AlignType } from '../BaseTile/BaseTileProps';
+import type { AlignType } from '../../model/AlignType';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
 

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -28,13 +28,13 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
         <BaseTile
           context={context}
           title={
-            title && (
+            title ? (
               <Heading
                 headingType="h3"
                 title={title}
                 className={`whitespace-pre-wrap max-w-[600px] mb-[30px]`}
               />
-            )
+            ) : null
           }
           buttons={
             buttons?.length ? (

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -13,7 +13,7 @@ export interface BlockItemCommonProps {
   /**
    * @title Отображать в раскрытом виде
    */
-  isExpanded?: boolean;
+  isUnfolded?: boolean;
   /**
    * @title Блоки
    * @maxItems 10

package/src/components/OtherProducts/OtherProductsItem.tsx

@@ -1,42 +1,52 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import type { VNode } from '../../model/VNode';
+import type { ColorPalette, UniBlockProps } from '../../types';
+import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { BlockItemCommonProps } from './OtherProductsContent';
-import { OtherProductsItemInner } from './OtherProductsItemInner';
-import { useActiveHandler } from './useActiveHandler';
-import { ColorPalette } from '../../types';
 
 export interface BlockItemProps extends BlockItemCommonProps, UniBlockProps {
   dataTheme?: ColorPalette;
 }
 
 export const OtherProductsItem = JSX<BlockItemProps>(
-  ({ label, isExpanded, blocks, columns, dataTheme = null, context }) => {
-    const { hasContent, icon, handleToggle, isActive } = useActiveHandler({
+  ({ label, blocks, columns = 1, context, dataTheme, isUnfolded }) => {
+    const foldableBlocks = renderBlocksList({
       context,
+      className: 'box-border p-5',
+      columns,
       blocks,
-      initialState: isExpanded,
-    });
-
+    }) as VNode[];
     return (
       <div className="border-0 border-b border-solid border-main-divider">
-        {hasContent ? (
-          <OtherProductsItemInner
-            isExpanded={isActive}
-            columns={columns}
-            blocks={blocks}
+        {blocks?.length ? (
+          <Foldable
+            foldButtonDataTheme={dataTheme}
+            hiddenBlocksNum={blocks?.length}
+            blocks={foldableBlocks}
+            isUnfolded={isUnfolded}
             context={context}
+            foldButtonLabel={label}
+            render={(children, isActive) => (
+              <Wrapper columns={columns} isActive={isActive}>
+                {children}
+              </Wrapper>
+            )}
           />
         ) : null}
-        <button
-          className="border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer"
-          data-theme={dataTheme}
-          onClick={handleToggle}
-        >
-          <span className="pr-3">{isActive ? 'Скрыть' : label}</span>
-          {hasContent ? <Icon name={icon} width="20" height="20" asSVG /> : null}
-        </button>
       </div>
     );
   },
 );
+
+const Wrapper = JSX<{ columns: number; isActive: boolean }>(({ columns, children, isActive }) => {
+  return (
+    <div
+      className={`box-border w-full ${isActive ? 'p-9' : ''} ${
+        columns > 1 ? 'flex flex-wrap' : ''
+      }`}
+    >
+      {children}
+    </div>
+  );
+});

package/src/components/ProductBlock/ProductBlockInner.mobile.tsx

@@ -35,13 +35,13 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
           <BaseTile
             context={context}
             title={
-              title && (
+              title ? (
                 <Heading
                   headingType={headingType}
                   title={title}
                   className="whitespace-pre-wrap max-w-[600px]"
                 />
-              )
+              ) : null
             }
             buttons={
               buttons?.length ? (

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -36,12 +36,12 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             title={getTitle(title, headingType)}
             buttons={getButtons(context, buttons)}
           >
-            {description && (
+            {description ? (
               <Description
                 className={`mt-4 max-w-[600px] text-md font-light ${textColor}`}
                 description={description}
               />
-            )}
+            ) : null}
             {benefits?.filter((items) => items.label)?.length ? (
               <div className="flex gap-6 mt-6">
                 {benefits.map((benefit, i) =>
@@ -67,15 +67,13 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
 );
 
 const getTitle = (title, headingType) => {
-  return (
-    title && (
-      <Heading
-        headingType={headingType}
-        title={title}
-        className="whitespace-pre-wrap max-w-[600px]"
-      />
-    )
-  );
+  return title ? (
+    <Heading
+      headingType={headingType}
+      title={title}
+      className="whitespace-pre-wrap max-w-[600px]"
+    />
+  ) : null;
 };
 
 const getButtons = (context, buttons) => {

package/src/components/ProductTile/ProductTile.tsx

@@ -42,14 +42,14 @@ export const ProductTile = JSX<ProductTileProps>(
         <BaseTile
           context={context}
           title={
-            title && (
+            title ? (
               <Heading
                 headingType={headingType}
                 as="h3"
                 title={title}
                 className={`whitespace-pre-wrap max-w-[600px]`}
               />
-            )
+            ) : null
           }
           buttons={
             buttons?.length ? (

package/src/components/Recommendation/Recommendation.tsx

@@ -87,20 +87,20 @@ const renderNavButtons = ({
 
   return (
     <div>
-      {showPrevButton && (
+      {showPrevButton ? (
         <ArrowButton
           className="absolute top-1/2 left-8 z-10 mt-6"
           onClick={handlePrevClick}
           ariaLabel="Пролистать влево"
         />
-      )}
-      {showNextButton && (
+      ) : null}
+      {showNextButton ? (
         <ArrowButton
           className="absolute top-1/2 right-8 z-10 mt-6 rotate-180"
           onClick={handleNextClick}
           ariaLabel="Пролистать вправо"
         />
-      )}
+      ) : null}
     </div>
   );
 };

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -53,14 +53,14 @@ export const StepsBlock = JSX<StepsBlockProps>(
         className={`box-border font-sans bg-white px-4 py-6 flex flex-col
         ${style.background} ${style.title} ${className || ''}`}
       >
-        {title && (
+        {title ? (
           <Heading headingType="h3" className={`text-center ${style.title}`} title={title} />
-        )}
-        {description && (
+        ) : null}
+        {description ? (
           <p className={`text-m-md text-center ${style.description} ${title && 'mt-2'}`}>
             {description}
           </p>
-        )}
+        ) : null}
         {steps?.length ? (
           <div className={`box-border py-0.5 mb-0.5 mt-5`}>
             <div className="flex flex-col justify-between gap-x-[101px]">
@@ -94,17 +94,17 @@ const renderStepTitle = (params: RenderStepTitleParams) => {
       <div key={String(i)} className="flex flex-row text-center relative">
         <div className="overflow-hidden">
           {renderIconArea(params)}
-          {!isLastStep && (
+          {isLastStep ? null : (
             <div className={`min-h-8 h-full w-[2px] ${style.iconConnector} ${margin}`} />
           )}
         </div>
         <div
           className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
         >
-          {step.label && (
+          {step.label ? (
             <div className="font-medium text-m-title-xs m-0 text-left">{step.label}</div>
-          )}
-          {step.description && (
+          ) : null}
+          {step.description ? (
             <div
               className={`font-normal text-sm ${style.description} text-left ${
                 step.label ? 'mt-1' : ''
@@ -112,7 +112,7 @@ const renderStepTitle = (params: RenderStepTitleParams) => {
             >
               {step.description}
             </div>
-          )}
+          ) : null}
         </div>
       </div>
     </div>

package/src/components/TariffsTable/TariffsTable.fixture.tsx

@@ -1,6 +1,6 @@
+import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { TariffsTable } from './TariffsTable';
-import type { Picture } from '../../model/Picture';
 import type { TariffsTableColumn, TariffsTableRowHeader } from './TariffsTableContent';
 
 const image: Picture = {
@@ -158,6 +158,7 @@ export default {
         context={context}
         rowHeaders={rowHeaders}
         columns={columns.slice(0, 1)}
+        hiddenRowsNum={2}
       />
     </div>
   ),
@@ -170,6 +171,7 @@ export default {
         context={context}
         rowHeaders={rowHeaders}
         columns={columns.slice(0, 2)}
+        hiddenRowsNum={2}
       />
     </div>
   ),
@@ -182,6 +184,7 @@ export default {
         context={context}
         rowHeaders={rowHeaders}
         columns={columns.slice(0, 3)}
+        hiddenRowsNum={2}
       />
     </div>
   ),

package/src/components/TariffsTable/TariffsTable.tsx

@@ -1,8 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useTableArrowScrollControl } from '../../hooks/useTableArrowScrollControl';
+import type { VNode } from '../../model/VNode';
 import type { UniBlockProps } from '../../types';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { TableArrowScrollControl } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControl';
+import { TableArrowScrollControlProps } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControlProps';
 import { COLS_LENGTH_FOR_SCROLL } from './constants';
 import type {
   TariffsTableCellData,
@@ -15,7 +18,16 @@ import { TariffsTableRow } from './TariffsTableRow';
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
 export const TariffsTable = JSX<TariffsTableProps>(
-  ({ className, context, title, description, rowHeaders, columns, anchor = null }) => {
+  ({
+    className,
+    context,
+    title,
+    description,
+    rowHeaders,
+    columns,
+    anchor = null,
+    hiddenRowsNum = 0,
+  }) => {
     const [activeCardIndex, setActiveCardIndex] = context.useState(0);
 
     const colData = getColData(columns);
@@ -27,7 +39,15 @@ export const TariffsTable = JSX<TariffsTableProps>(
       activeCardIndex,
       setActiveCardIndex,
     });
-    const { isScrollAvailable } = tableArrowScrollControlProps;
+
+    const foldableBlocks = rowData?.map((row, i, { length }) => (
+      <TariffsTableRow
+        key={String(i)}
+        row={row}
+        isLastRow={i + 1 === length}
+        activeCardIndex={activeCardIndex}
+      />
+    ));
 
     return (
       <section
@@ -45,22 +65,17 @@ export const TariffsTable = JSX<TariffsTableProps>(
         ) : null}
         {description ? <div className="mb-9 text-center text-m-base">{description}</div> : null}
         {rowData?.length ? (
-          <div role="table">
-            <div className="relative">
-              {rowData.map((row, i, { length }) => (
-                <TariffsTableRow
-                  key={String(i)}
-                  row={row}
-                  isLastRow={i + 1 === length}
-                  activeCardIndex={activeCardIndex}
-                />
-              ))}
-              <TableArrowScrollControl {...tableArrowScrollControlProps} />
-            </div>
-            {isScrollAvailable ? (
-              <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
-            ) : null}
-          </div>
+          <Foldable
+            blocks={foldableBlocks}
+            hiddenBlocksNum={hiddenRowsNum}
+            context={context}
+            render={(children) => (
+              <Wrapper tableArrowScrollControlProps={tableArrowScrollControlProps}>
+                {children}
+              </Wrapper>
+            )}
+            foldButtonLabel="Развернуть"
+          />
         ) : null}
       </section>
     );
@@ -81,3 +96,25 @@ const getRowData = (
     header,
     data: colData.map((col) => col?.[i] || [{}]),
   }));
+
+const Wrapper = JSX<
+  {
+    tableArrowScrollControlProps: TableArrowScrollControlProps;
+  },
+  any,
+  VNode
+>(({ children, tableArrowScrollControlProps }) => {
+  const { isScrollAvailable } = tableArrowScrollControlProps;
+
+  return (
+    <div role="table">
+      <div className="relative">
+        {children}
+        <TableArrowScrollControl {...tableArrowScrollControlProps} />
+      </div>
+      {isScrollAvailable ? (
+        <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+      ) : null}
+    </div>
+  );
+});

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,11 +1,11 @@
-import type { CellData } from '../ComparisonTable/ComparisonTableContent';
 import type { ListOrientation } from '../../model/ListOrientation';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import { Picture } from '../../model/Picture';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { CellData } from '../ComparisonTable/ComparisonTableContent';
 
 /**
  * @title Ряд
@@ -58,6 +58,8 @@ export type TariffsTableContent = HeadingContent &
     rowHeaders?: TariffsTableRowHeader[];
     /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
     orientation?: ListOrientation;
+    /** @title Скрывать строк */
+    hiddenRowsNum?: number;
   };
 
 /** @hidden */

package/src/components/TextBlock/TextBlock.tsx

@@ -49,12 +49,12 @@ export const TextBlock = JSX<TextBlockProps>(
         {iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
         {iconVersion === 'big' ? renderImage(image) : null}
         <div className="py-0.5">
-          {title && (
+          {title ? (
             <div className={`font-medium text-base mb-1 ${textBlockStyleMap.title}`}>{title}</div>
-          )}
-          {description && (
+          ) : null}
+          {description ? (
             <div className={`text-sm ${textBlockStyleMap.description}`}>{description}</div>
-          )}
+          ) : null}
         </div>
       </section>
     );

package/src/components/Tile/Tile.tsx

@@ -47,7 +47,7 @@ export const Tile = JSX<TileProps>((props) => {
       <BaseTile
         context={context}
         title={
-          title && (
+          title ? (
             <Heading
               headingType={headingType}
               as="h3"
@@ -55,7 +55,7 @@ export const Tile = JSX<TileProps>((props) => {
               className={`whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
               ${version === 'primary' ? 'text-primary-text' : ''}`}
             />
-          )
+          ) : null
         }
         buttons={
           buttons?.length ? (
@@ -68,12 +68,12 @@ export const Tile = JSX<TileProps>((props) => {
         }
         image={image?.src && <Img className="mt-auto ml-7" image={image} />}
       >
-        {description && (
+        {description ? (
           <Description
             className="max-w-[600px] text-title-new-sm font-light"
             description={description}
           />
-        )}
+        ) : null}
         {children}
         {renderList(items, version)}
       </BaseTile>