@redneckz/wildless-cms-uni-blocks 0.10.9 → 0.11.0

package/src/components/ProductGallery/ProductGallery.tsx

@@ -1,98 +1,75 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import { style } from '../../utils/style';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
-import type { ProductGalleryContent } from './ProductGalleryContent';
+import type { ProductGalleryContent, ProductSlide } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-interface NavButtonProps {
-  slide?: HeadlineCommonProps;
-  i: number;
-  isActive: boolean;
-  onClick: () => void;
-}
-
 export const ProductGallery = JSX<ProductGalleryProps>(
   ({ className = '', slides = [], ...rest }) => {
-    const galleryNav = slides.map((s) => s.nav);
-    const galleryBlocks = slides.map((s) => s.productBlock);
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-    const handleActiveSlideIndex = useCallback((_: number) => setActiveSlideIndex(_), []);
 
     return (
-      <BlockWrapper
-        className={`box-border pt-12 overflow-hidden relative w-100 mb-6 ${className}`}
-        {...rest}
-      >
+      <BlockWrapper className={style('box-border py-default overflow-hidden', className)} {...rest}>
         <div
-          className="flex duration-1000 pb-14"
-          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          className="flex duration-1000"
+          style={{ transform: `translateX(-${activeSlideIndex * 100}%)` }}
           role="list"
         >
-          {galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest }, i))}
+          {slides.map(({ productBlock }, i) => (
+            <div key={String(i)} className="box-border grow-0 shrink-0 basis-full" role="listitem">
+              <ProductBlockInner
+                className="pl-default h-full"
+                headlineVersion="XXL"
+                {...productBlock}
+                {...rest}
+              />
+            </div>
+          ))}
         </div>
-
-        <div className="flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28">
-          {galleryNav.map((slide, i) =>
-            renderNavButton({
-              slide,
-              i,
-              isActive: Boolean(i === activeSlideIndex),
-              onClick: () => handleActiveSlideIndex(i),
-            }),
-          )}
+        <div className="h-28 px-6 mt-6 -mb-6 flex items-center gap-2 box-border">
+          {slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex }))}
         </div>
       </BlockWrapper>
     );
   },
 );
 
-function renderProductBlock(block: ProductBlockInnerContent, i: number) {
-  return (
-    <section
-      key={String(i)}
-      className="box-border relative flex grow-0 shrink-0 basis-full"
-      role="listitem"
-    >
-      <div className="flex grow">
-        <ProductBlockInner
-          className="pl-12 z-10 group-data-secondary:text-white"
-          textBlockClassName="mb-[154px]"
-          headlineVersion="XXL"
-          {...block}
-        />
-      </div>
-    </section>
-  );
+interface NavButtonProps {
+  activeSlideIndex: number;
+  onClick: (i: number) => void;
 }
 
-function renderNavButton({ slide, i, isActive, onClick }: NavButtonProps) {
-  const btnClassName = isActive
-    ? 'bg-white shadow-dark-blue min-w-[350px] border-none p-6'
-    : 'min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur';
-  const btnTitleClassName = isActive
-    ? 'text-primary-text !text-h6 p-2'
-    : 'text-l pb-1 text-secondary-text group-data-secondary:text-white';
-  const btnDescClassName = isActive
-    ? 'text-secondary-text text-l-light'
-    : 'text-m-light text-secondary-text group-data-secondary:text-white/80';
+const renderNavButton =
+  ({ activeSlideIndex, onClick }: NavButtonProps) =>
+  ({ nav }: ProductSlide, i: number) => {
+    const isActive = i === activeSlideIndex;
+    const btnClassName = isActive
+      ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
+      : 'min-w-[290px] ease-in duration-300 bg-white/10 px-6 py-5 hover:py-6 backdrop-blur';
+    const btnTitleClassName = isActive
+      ? 'text-primary-text text-h6 py-2'
+      : 'text-l pb-1 text-secondary-text group-data-secondary:text-white';
+    const btnDescClassName = isActive
+      ? 'text-secondary-text text-l-light'
+      : 'text-m-light text-secondary-text group-data-secondary:text-white/80';
 
-  return (
-    <button
-      type="button"
-      key={String(i)}
-      onClick={onClick}
-      aria-label={slide?.title}
-      className={`relative box-border overflow-hidden cursor-pointer text-left mx-1 grow basis-0 border border-gray group-data-secondary:border-white/50 ${btnClassName}`}
-    >
-      <div className="border-0 px-6">
-        <div className={`last:pb-0 ${btnTitleClassName}`}>{slide?.title}</div>
-        <div className={`text-secondary-text ${btnDescClassName}`}>{slide?.description}</div>
-      </div>
-    </button>
-  );
-}
+    return (
+      <button
+        type="button"
+        key={String(i)}
+        onClick={() => onClick(i)}
+        aria-label={nav?.title}
+        className={style(
+          'relative px-6 box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50',
+          btnClassName,
+        )}
+      >
+        <div className={btnTitleClassName}>{nav?.title}</div>
+        <div className={btnDescClassName}>{nav?.description}</div>
+      </button>
+    );
+  };

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

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

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

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

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.fixture.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { RepresentativeOfficeInfo } from './RepresentativeOfficeInfo';
 

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

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { RichTextBlock } from './RichTextBlock';
 import type { RichTextBlockContent } from './RichTextBlockContent';
 

package/src/components/RichTextBlock/RichTextBlock.fixture.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { RichTextBlock } from './RichTextBlock';
 import type { RichTextBlockContent } from './RichTextBlockContent';
 

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

@@ -1,9 +1,11 @@
+import '../../setup-fixture';
+
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { BlockDef } from '../../model/ContentPageDef';
 import { Blocks } from '../Blocks.mobile';
-
+import type { Picture } from '../../model/Picture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture.mobile';
-import { RollupItem } from './RollupItem.mobile';
+import { RollupItem } from './RollupItem';
 
 const options = {
   blocksRegistry: Blocks,
@@ -13,7 +15,6 @@ export const ROLLUP_ITEM: BlockDef = {
   type: 'RollupItem',
   content: {
     label: 'RollupItem label 1',
-    labelIcon: { icon: 'CardIcon' },
     isExpanded: true,
   },
   blocks: [
@@ -21,13 +22,33 @@ export const ROLLUP_ITEM: BlockDef = {
     { type: 'TextBlock', content: TEXT_BLOCK },
   ],
 };
+const labelIcon: Picture = { icon: 'BriefcaseIcon' };
 
 export default {
   default: (
     <div>
       <div className="list-none m-0 p-0">
+        <RollupItem
+          {...ROLLUP_ITEM.content}
+          version="secondary"
+          block={ROLLUP_ITEM}
+          options={options}
+        />
         <RollupItem {...ROLLUP_ITEM.content} block={ROLLUP_ITEM} options={options} />
       </div>
     </div>
   ),
+  labelIcon: (
+    <div>
+      <div className="list-none m-0 p-0">
+        <RollupItem
+          label="RollupItem label 1"
+          labelIcon={labelIcon}
+          isExpanded={true}
+          block={ROLLUP_ITEM}
+          options={options}
+        />
+      </div>
+    </div>
+  ),
 };

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

@@ -1,3 +1,5 @@
+import '../../setup-fixture';
+
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { Blocks } from '../Blocks';
 import { RollupItem } from '../RollupItem/RollupItem';

package/src/components/RollupItem/RollupItem.tsx

@@ -2,15 +2,23 @@ import { JSX } from '@redneckz/uni-jsx';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { IconName, IconProps } from '../../ui-kit/Icon/IconProps';
+import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
 import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import { foldableSectionStyles } from './foldableSectionStyles';
+import { getIconName } from './getIconName';
+import { labelSize } from './labelSize';
+import { rollupIconVersion } from './rollupIconVersion';
 import type { RollupItemContent } from './RollupItemContent';
+import { rollupItemStyles } from './rollupItemStyles';
 
 export interface RollupItemProps extends RollupItemContent, UniBlockProps {}
 
@@ -18,31 +26,37 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
   ({
     className = '',
     label = 'Развернуть',
+    labelIcon,
     isExpanded,
     isFoldButtonOnTop = true,
     version = 'primary',
     ...rest
-  }) => (
-    <BlockWrapper
-      className={`w-full border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`}
-      tag="div"
-      version="transparent"
-      {...rest}
-    >
-      <Foldable
-        isFoldButtonOnTop={isFoldButtonOnTop}
-        unfoldedByDefault={isExpanded}
-        renderFoldableSection={({ isUnfolded }) => (
-          <FoldableSection className={`grid grid-cols-12 gap-5 [&>*]:p-0`} isUnfolded={isUnfolded}>
-            {renderChildren(rest)}
-          </FoldableSection>
-        )}
-        renderFoldButton={({ isUnfolded, onToggle }) =>
-          renderFoldButton({ version, label, isUnfolded, onToggle })
-        }
-      />
-    </BlockWrapper>
-  ),
+  }) => {
+    return (
+      <BlockWrapper
+        className={style('w-full', rollupItemStyles, className)}
+        tag="div"
+        version="transparent"
+        {...rest}
+      >
+        <Foldable
+          isFoldButtonOnTop={isFoldButtonOnTop}
+          unfoldedByDefault={isExpanded}
+          renderFoldableSection={({ isUnfolded }) => (
+            <FoldableSection
+              className={style('gap-5 [&>*]:p-0', foldableSectionStyles)}
+              isUnfolded={isUnfolded}
+            >
+              {renderChildren(rest)}
+            </FoldableSection>
+          )}
+          renderFoldButton={({ isUnfolded, onToggle }) =>
+            renderFoldButton({ version, label, labelIcon, isUnfolded, onToggle })
+          }
+        />
+      </BlockWrapper>
+    );
+  },
 );
 
 RollupItem.childrenTypes = {
@@ -52,12 +66,14 @@ RollupItem.childrenTypes = {
 interface FoldButtonProps extends FoldablePartProps {
   version?: BlockVersion;
   label?: string;
+  labelIcon?: IconProps;
   isPadding?: boolean;
 }
 
 const renderFoldButton = ({
   version,
   label: defaultLabel,
+  labelIcon,
   isUnfolded,
   onToggle,
 }: FoldButtonProps) => {
@@ -66,7 +82,8 @@ const renderFoldButton = ({
   return version === 'primary' ? (
     renderPrimaryFoldButton({
       label,
-      icon: isUnfolded ? 'MinusIcon' : 'PlusIcon',
+      labelIcon,
+      icon: getIconName(isUnfolded),
       onToggle,
     })
   ) : (
@@ -82,16 +99,38 @@ interface PrimaryFoldButtonProps {
   label?: string;
   icon?: IconName;
   onToggle?: () => void;
+  labelIcon?: Picture;
 }
 
-const renderPrimaryFoldButton = ({ label, icon, onToggle }: PrimaryFoldButtonProps) => (
-  <button
-    className={`border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 cursor-pointer`}
-    onClick={onToggle}
-  >
-    <Text size="text-xl" font="font-medium">
-      {label}
-    </Text>
-    {icon ? <Icon name={icon} width="24" height="24" /> : null}
-  </button>
-);
+const renderPrimaryFoldButton = ({ label, icon, onToggle, labelIcon }: PrimaryFoldButtonProps) => {
+  const iconWidth = String(labelIcon?.size?.width || 24);
+  const iconHeight = String(labelIcon?.size?.height || 24);
+  const iconName = labelIcon?.icon;
+
+  return (
+    <button
+      className={style(
+        'border-none bg-transparent px-0 flex justify-between items-center w-full cursor-pointer group/button',
+        iconName ? 'py-2' : 'py-5',
+      )}
+      onClick={onToggle}
+    >
+      <div className="flex items-center group-hover/button:text-primary-main">
+        {iconName ? (
+          <RoundedIcon
+            name={iconName}
+            width={iconWidth}
+            height={iconHeight}
+            iconVersion={labelIcon?.iconVersion}
+          />
+        ) : null}
+        {label ? (
+          <Text size={labelSize} font="font-normal">
+            {label}
+          </Text>
+        ) : null}
+      </div>
+      {icon ? <Icon name={icon} iconVersion={rollupIconVersion} width="24" height="24" /> : null}
+    </button>
+  );
+};

package/src/components/RollupItem/RollupItemContent.ts

@@ -1,5 +1,6 @@
 import type { LabelProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
+import type { IconProps } from '../../ui-kit/Icon/IconProps';
 
 /**
  * @title Сворачивающаяся секция
@@ -10,4 +11,5 @@ export type RollupItemContent = UniBlockContent &
     isExpanded?: boolean;
     /** @title Кнопка сверху */
     isFoldButtonOnTop?: boolean;
+    labelIcon?: IconProps; // TODO: только для мобильной версии
   };

package/src/components/RollupItem/foldableSectionStyles.mobile.ts

@@ -0,0 +1 @@
+export const foldableSectionStyles = 'flex flex-wrap group-last:last:pb-0';

package/src/components/RollupItem/foldableSectionStyles.ts

@@ -0,0 +1 @@
+export const foldableSectionStyles = 'grid grid-cols-12 [&>*]:pb-4';

package/src/components/RollupItem/getIconName.mobile.tsx

@@ -0,0 +1,2 @@
+export const getIconName = (isUnfolded?: boolean) =>
+  isUnfolded ? 'ArrowUpSolidIcon' : 'ArrowDownSolidIcon';

package/src/components/RollupItem/getIconName.tsx

@@ -0,0 +1 @@
+export const getIconName = (isUnfolded?: boolean) => (isUnfolded ? 'MinusIcon' : 'PlusIcon');

package/src/components/RollupItem/labelSize.mobile.tsx

@@ -0,0 +1 @@
+export const labelSize = 'text-l';

package/src/components/RollupItem/labelSize.tsx

@@ -0,0 +1 @@
+export const labelSize = 'text-h6';

package/src/components/RollupItem/rollupIconVersion.mobile.tsx

@@ -0,0 +1 @@
+export const rollupIconVersion = 'normal';

package/src/components/RollupItem/rollupIconVersion.tsx

@@ -0,0 +1 @@
+export const rollupIconVersion = 'color';

package/src/components/RollupItem/rollupItemStyles.mobile.ts

@@ -0,0 +1 @@
+export const rollupItemStyles = '';

package/src/components/RollupItem/rollupItemStyles.ts

@@ -0,0 +1,2 @@
+export const rollupItemStyles =
+  'border-0 border-b border-solid border-main-divider last:border-b-0';

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

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

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

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

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

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

package/src/components/SwipeListControlBlock/SwipeListControlBlock.fixture.tsx

@@ -1,3 +1,5 @@
+import '../../setup-fixture';
+
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { Blocks } from '../Blocks';
 import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/Tile/Tile.tsx

@@ -7,11 +7,11 @@ import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { Tags } from '../../ui-kit/Tags/Tags';
+import { style } from '../../utils/style';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { TileContent } from './TileContent';
-import { style } from '../../utils/style';
 
 export interface TileProps extends TileContent, UniBlockProps {}
 
@@ -66,13 +66,7 @@ export const Tile = JSX<TileProps>(
             </div>
           ) : null}
           {children}
-          <List
-            className="mt-2.5"
-            itemClassName="mb-1.5"
-            items={items}
-            isDotted={isDotted}
-            listItemSize={listItemSize}
-          />
+          <List className="mt-2.5" items={items} isDotted={isDotted} listItemSize={listItemSize} />
           {tags?.length ? <Tags tags={tags} className="mt-5" /> : null}
         </div>
       </BaseTile>