@redneckz/wildless-cms-uni-blocks 0.6.32 → 0.6.34

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import type { BackwardButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductBlock } from './ProductBlock';
@@ -184,4 +184,16 @@ export default {
       />
     </div>
   ),
+  'secondary with footnote': (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        footnote="*в соответствии с Указанием Банка России от 28.12.2015 № 3921-У"
+        headlineVersion="L"
+        image={image}
+        title="Оплата проходит в 180 странах мира"
+        version="secondary"
+      />
+    </div>
+  ),
 };

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,4 +1,5 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { Footnote } from '../../model/Footnote';
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { IconVersion } from '../../model/IconVersion';
 import type { LinkProps } from '../../model/LinkProps';
@@ -9,7 +10,8 @@ import type { ListContent } from '../../ui-kit/List/ListContent';
 
 export type ProductBlockInnerContent = HeadlineProps &
   ListContent &
-  ButtonContent & {
+  ButtonContent &
+  Footnote & {
     /**
      * @default {
      *   "format": "webp",

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -20,6 +20,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     benefits,
     benefitsVersion,
     buttons,
+    footnote,
     image,
     items,
     version = 'primary',
@@ -42,28 +43,31 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             align="left"
             {...rest}
           />
-          <BaseTile
-            buttons={
-              buttons?.length ? (
-                <ButtonSection buttons={buttons} className="flex gap-4" {...rest} />
-              ) : null
-            }
-          >
-            {benefitsCount ? (
-              <div className={benefitsContainerStyles}>
-                {benefits.map(renderBenefit(version, benefitsVersion))}
-              </div>
-            ) : null}
-            {items?.length ? (
-              <List
-                className="mt-5 text-h6"
-                items={items}
-                itemClassName="mb-[7px]"
-                version={version}
-                isDotted={isDotted}
-              />
-            ) : null}
-          </BaseTile>
+          <div className="flex flex-col justify-between h-full">
+            <BaseTile
+              buttons={
+                buttons?.length ? (
+                  <ButtonSection buttons={buttons} className="flex gap-4" {...rest} />
+                ) : null
+              }
+            >
+              {benefitsCount ? (
+                <div className={benefitsContainerStyles}>
+                  {benefits.map(renderBenefit(version, benefitsVersion))}
+                </div>
+              ) : null}
+              {items?.length ? (
+                <List
+                  className="mt-5 text-h6"
+                  items={items}
+                  itemClassName="mb-[7px]"
+                  version={version}
+                  isDotted={isDotted}
+                />
+              ) : null}
+            </BaseTile>
+            {footnote ? <p className="text-m-light pt-12">{footnote}</p> : null}
+          </div>
         </div>
         {image?.src && <Img className="mt-[-50px]" image={image} />}
       </div>

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductGallery } from './ProductGallery';
 

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductTile } from './ProductTile';
 import type { ProductTileContent } from './ProductTileContent';

package/src/components/PromoTile/PromoTile.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { getCurrentDate } from '../../utils/getCurrentDate';
 import { PromoTile } from './PromoTile';
 

package/src/components/Recommendation/Recommendation.fixture.tsx

@@ -1,6 +1,6 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { Recommendation, RecommendationProps } from './Recommendation';
 
 const cowCard: Picture = {

package/src/components/Recommendation/Recommendation.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { VersionStyleMap } from '../../model/BlockVersion';
 import { BorderVersionStyleMap } from '../../model/BorderVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
@@ -10,14 +10,17 @@ import { RecommendationCard } from './RecommendationCard';
 import type { RecommendationContent } from './RecommendationContent';
 
 const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
-const CARD_FULL_VIEW_COUNT = 2;
+const CARD_VIEW_COUNT = 2;
 const CARD_SHIFT = 525;
 
 export interface RecommendationProps extends RecommendationContent, UniBlockProps {}
 
 export const Recommendation = JSX<RecommendationProps>(
   ({ recommendations = [], className = '', title, version = 'primary', ...rest }) => {
-    const [activeCardIndex, setActiveCardIndex] = useState(0);
+    const [activeIndex, controls] = useCarouselControls({
+      itemCount: recommendations.length,
+      visibleItemCount: CARD_VIEW_COUNT,
+    });
 
     return (
       <BlockWrapper
@@ -28,10 +31,10 @@ export const Recommendation = JSX<RecommendationProps>(
         <div>
           <div
             className="flex duration-1000 gap-3.5"
-            style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
+            style={{ transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }}
             role="list"
           >
-            {recommendations?.length
+            {recommendations.length
               ? recommendations.map((card, i) => (
                   <RecommendationCard
                     key={String(i)}
@@ -42,10 +45,10 @@ export const Recommendation = JSX<RecommendationProps>(
                 ))
               : null}
           </div>
-          {renderNavButtons({
-            cardsCount: recommendations.length,
-            activeCardIndex,
-            setActiveCardIndex,
+          {renderArrows({
+            ...controls,
+            btnClass: ['left-8', 'right-8'],
+            className: 'top-1/2 mt-3',
           })}
         </div>
         <div
@@ -62,30 +65,3 @@ export const Recommendation = JSX<RecommendationProps>(
     );
   },
 );
-
-const renderNavButtons = ({
-  cardsCount,
-  activeCardIndex,
-  setActiveCardIndex,
-}: {
-  cardsCount: number;
-  activeCardIndex: number;
-  setActiveCardIndex: (index: number) => void;
-}) => {
-  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
-  const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
-  const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
-  const showPrevButton = isUseSlider && activeCardIndex > 0;
-
-  return (
-    <div>
-      {renderArrows({
-        handler: [handlePrevClick, handleNextClick],
-        isShown: [showPrevButton, showNextButton],
-        btnClass: ['left-8', 'right-8'],
-        className: 'top-1/2 mt-3',
-      })}
-    </div>
-  );
-};

package/src/components/Recommendation/RecommendationCard.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { renderButton } from '../../ui-kit/Button/ButtonSection';
-import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
@@ -30,7 +29,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
       >
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
           <div className="h-full flex flex-col justify-between">
-            {description ? <Description className="mb-2" description={description} /> : null}
+            {description ? <span className="mb-2">{description}</span> : null}
             {items?.length ? (
               <List
                 className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"

package/src/components/RollupItem/RollupItem.fixture.tsx

@@ -1,23 +1,56 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { Blocks } from '../Blocks';
 import { RollupItem } from '../RollupItem/RollupItem';
-import { TextBlock } from '../TextBlock/TextBlock';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 
-const TEXT_BLOCK_ACCORDION_BLOCK = <TextBlock className="col-span-12" {...TEXT_BLOCK} />;
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
   default: (
-    <RollupItem label="Rollup button 1">
-      {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-    </RollupItem>
+    <RollupItem
+      label="Rollup button 1"
+      isExpanded={true}
+      block={{
+        type: 'RollupItem',
+        blocks: [
+          { type: 'TextBlock', content: TEXT_BLOCK },
+          { type: 'TextBlock', content: TEXT_BLOCK },
+        ],
+      }}
+      options={options}
+    />
   ),
   secondary: (
-    <RollupItem label="Rollup button 2" version="secondary" isFoldButtonOnTop={false}>
-      {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-    </RollupItem>
+    <RollupItem
+      label="Rollup button 2"
+      version="secondary"
+      isFoldButtonOnTop={false}
+      isExpanded={true}
+      block={{
+        type: 'RollupItem',
+        blocks: [
+          { type: 'TextBlock', content: TEXT_BLOCK },
+          { type: 'TextBlock', content: TEXT_BLOCK },
+        ],
+      }}
+      options={options}
+    />
   ),
   'secondary default-open': (
-    <RollupItem isExpanded={true} version="secondary" label="Rollup button 2">
-      {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-    </RollupItem>
+    <RollupItem
+      version="secondary"
+      label="Rollup button 2"
+      isExpanded={true}
+      block={{
+        type: 'RollupItem',
+        blocks: [
+          { type: 'TextBlock', content: TEXT_BLOCK },
+          { type: 'TextBlock', content: TEXT_BLOCK },
+        ],
+      }}
+      options={options}
+    />
   ),
 };

package/src/components/RollupItem/RollupItem.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { JSXBlock } from '../../model/JSXBlock';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
@@ -17,10 +18,10 @@ interface RollupFoldablePartProps extends FoldablePartProps {
 
 interface FoldButtonProps {
   label?: string;
-  icon: IconName;
+  icon?: IconName;
+  isUnfolded?: boolean;
   onClick?: () => void;
   onToggle?: () => void;
-  isUnfolded?: boolean;
 }
 
 export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
@@ -30,7 +31,7 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
     isExpanded,
     isFoldButtonOnTop = true,
     version = 'primary',
-    children,
+    ...rest
   }) => (
     <div className={`border-b border-solid border-main-divider w-full ${className}`}>
       <Foldable
@@ -42,7 +43,7 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
               className={`grid grid-cols-12 gap-1 border-box`}
               isUnfolded={isUnfolded}
             >
-              {children}
+              {renderChildren(rest)}
             </FoldableSection>
           </div>
         )}
@@ -57,18 +58,19 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
 RollupItem.childrenTypes = [];
 
 const renderFoldButton = ({ isUnfolded, onToggle, label, version }: RollupFoldablePartProps) => {
-  const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
+  const iconsPrimary: IconName[] = ['PlusIcon', 'MinusIcon'];
+  const iconsSecondary: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
   const labels = label ? [label, label] : ['Развернуть', 'Скрыть'];
 
   return version === 'primary' ? (
     <FoldButton
-      icon={icons[Number(isUnfolded)]}
+      icon={iconsPrimary[Number(isUnfolded)]}
       label={labels[Number(isUnfolded)]}
       onClick={onToggle}
     />
   ) : (
     <DefaultFoldButton
-      icon={icons[Number(isUnfolded)]}
+      icon={iconsSecondary[Number(isUnfolded)]}
       label={labels[Number(isUnfolded)]}
       onClick={onToggle}
     />

package/src/components/SafeDepositRental/SafeDepositRental.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { SafeDepositRental } from './SafeDepositRental';
 
 export default {

package/src/components/SafeDepositRental/SafeDepositRentalContent.ts

@@ -4,8 +4,4 @@ import type { TitleProps } from '../../model/HeadlineType';
 /**
  * @title Аренда сейфовых ячеек
  */
-export type SafeDepositRentalContent = Footnote &
-  TitleProps & {
-    /** @title Сноска */
-    footnote?: string;
-  };
+export type SafeDepositRentalContent = Footnote & TitleProps;

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

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { StepsBlock } from './StepsBlock';
 
 const steps = [

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { StepsBlockProps } from './StepsBlock';
 import { StepsBlock } from './StepsBlock';
 import type { Step } from './StepsBlockContent';

package/src/components/StepsBlock/StepsBlock.tsx

@@ -33,7 +33,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
         className={[
           'box-border py-[50px] font-sans',
           shortGaps ? 'px-20' : 'px-[70px]',
-          'flex flex-col items-center',
+          'flex flex-col items-center overflow-hidden',
           styleMap.background,
           styleMap.title,
           className,

package/src/components/Tabs/Tabs.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { Tabs } from './Tabs';
 
 export default {

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

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { TARIFFS_TABLE_FIXTURE_EXAMPLE } from './dataFixture';
 import { TariffsTable } from './TariffsTable';
 

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

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import {
   columns,
   columnsTable,

package/src/components/TariffsTable/TariffsTable.mobile.tsx

@@ -45,7 +45,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 );
 
 const getColData = (columns: TariffsTableColumn[] | undefined) =>
-  columns?.[0].data ? columns[0].data : [];
+  columns?.[0]?.data ? columns[0].data : [];
 
 const getTiles = (rowHeaders: TariffsTableRowHeader[] | undefined, colData: CellDef[][]) =>
   rowHeaders?.map((header, i) => ({

package/src/components/TariffsTable/TariffsTable.tsx

@@ -34,24 +34,14 @@ export const TariffsTable = JSX<TariffsTableProps>(
       header,
       data: colData.map((col) => col?.[i] || []),
     }));
-
-    const columnsLength = colData.length;
-
+    const itemCount = colData.length;
     const [activeIndex, controls] = useCarouselControls({
-      itemsCount: colData.length,
+      itemCount: itemCount,
       visibleItemCount: COLS_LENGTH_FOR_SCROLL,
     });
-
-    const isScrollAvailable = colData.length > COLS_LENGTH_FOR_SCROLL;
-
+    const { isScrollAvailable } = controls;
     const rows = (rowData || []).map((row, i) => (
-      <TariffsTableRow
-        key={String(i)}
-        row={row}
-        activeCardIndex={activeIndex}
-        rowIdx={i}
-        {...rest}
-      />
+      <TariffsTableRow key={String(i)} row={row} activeIndex={activeIndex} rowIdx={i} {...rest} />
     ));
     const [visibleRows, hiddenRows] =
       hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
@@ -59,7 +49,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
     return (
       <BlockWrapper
         className={`bg-white font-sans p-[50px] overflow-hidden text-primary-text relative ${
-          columnsLength > 1 ? 'pr-0' : ''
+          itemCount > 1 ? 'pr-0' : ''
         } ${className}`}
         {...rest}
       >
@@ -99,27 +89,20 @@ function renderDescription(description?: string) {
   return description ? <div className="mb-9 text-center text-l">{description}</div> : null;
 }
 
-const Wrapper = JSX<WrapperProps>(({ children, controls, isScrollAvailable }) => {
-  const { inc, dec, canDec, canInc } = controls;
-
-  return (
-    <div role="table">
-      <div className="relative">
-        {children}
-        {isScrollAvailable ? (
-          <div>
-            {renderArrows({
-              handler: [inc, dec],
-              isShown: [canDec, canInc],
-              btnClass: ['top-[108px]', 'top-11'],
-              className: 'right-7',
-            })}
-          </div>
-        ) : null}
-      </div>
-      {isScrollAvailable ? (
-        <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
-      ) : null}
+const Wrapper = JSX<WrapperProps>(({ children, controls, isScrollAvailable }) => (
+  <div role="table">
+    <div className="relative">
+      {children}
+      {isScrollAvailable
+        ? renderArrows({
+            ...controls,
+            btnClass: ['top-[108px]', 'top-[44px]'],
+            className: 'right-7',
+          })
+        : null}
     </div>
-  );
-});
+    {isScrollAvailable ? (
+      <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+    ) : null}
+  </div>
+));

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -12,12 +12,12 @@ import { TariffsTableRowContainer } from './TariffsTableRowContainer';
 
 export interface TariffsTableRowProps extends UniBlockProps {
   row: Data;
-  activeCardIndex: number;
+  activeIndex: number;
   rowIdx: number;
 }
 
 export const TariffsTableRow = JSX<TariffsTableRowProps>(
-  ({ row: { header, data }, activeCardIndex, rowIdx, ...rest }) => {
+  ({ row: { header, data }, activeIndex, rowIdx, ...rest }) => {
     const [tableInner, setTableInner] = useState<TariffsTableInnerContent | undefined>(undefined);
     const [openTableInnerIdx, setOpenTableInnerIdx] = useState<number | undefined>(undefined);
 
@@ -45,7 +45,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
         </div>
         {data?.length ? (
           <TableCarouselContainer
-            activeCardIndex={activeCardIndex}
+            activeIndex={activeIndex}
             columnWidth={COLUMN_WIDTH}
             version="tariff"
           >

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

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { TextBlock } from './TextBlock';
 import type { TextBlockContent } from './TextBlockContent';
 

package/src/components/TextBlock/TextBlock.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { TextBlock } from './TextBlock';
 import type { TextBlockContent } from './TextBlockContent';
 

package/src/components/Tile/Tile.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { Tile } from './Tile';
 import type { TileContent } from './TileContent';
 

package/src/components/Tile/Tile.tsx

@@ -3,11 +3,11 @@ import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
-import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import type { ListProps } from '../../ui-kit/List/ListProps';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Tags } from '../../ui-kit/Tags/Tags';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
@@ -66,7 +66,9 @@ export const Tile = JSX<TileProps>((props) => {
         image={image?.src ? <Img className="mt-auto ml-7" image={image} /> : null}
       >
         {description ? (
-          <Description className="max-w-[600px] text-xl-light mt-2.5" description={description} />
+          <div className="max-w-[600px] mt-2.5">
+            <Paragraph size="text-xl-light">{description}</Paragraph>
+          </div>
         ) : null}
         {children}
         {renderList({ version, isDotted, listItemSize }, items)}