@redneckz/wildless-cms-uni-blocks 0.13.8 → 0.13.10

package/src/ui-kit/BaseProductTile/BaseProductTile.tsx

@@ -11,9 +11,7 @@ import { RichText } from '../RichText/RichText';
 import { Tags } from '../Tags/Tags';
 import type { BaseProductTileContent } from './BaseProductTileContent';
 
-interface BaseProductTileProps extends UniBlockProps, BaseProductTileContent {
-  isInsetTitle?: boolean;
-}
+interface BaseProductTileProps extends UniBlockProps, BaseProductTileContent {}
 
 export const BaseProductTile = JSX<BaseProductTileProps>(
   ({
@@ -24,15 +22,15 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     description,
     headlineVersion = 'L',
     align = 'text-left',
-    isInsetTitle = true,
     benefitsVersion,
     isTabularBenefits,
     benefits,
     __html,
+    isFullWidthTitle = true,
     items,
     isDotted = true,
     listItemSize,
-    tags,
+    tags = [],
     buttons,
     image,
     imageOptions: { imageAlign = 'end', directionRight = true, isBackground } = {},
@@ -48,29 +46,34 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
         isEmbedded={true}
       />
     );
+    const filteredBenefits = benefits?.filter(
+      (_) => _?.type === 'rte' || 'label' in _ || 'description' in _,
+    );
 
     return (
       <BaseTile
         className={className}
         padding={padding}
         defaultPadding={defaultPadding}
-        {...(isInsetTitle ? { insetTitle: headline } : { title: headline })}
+        {...(isFullWidthTitle ? { insetTitle: headline } : { title: headline })}
         {...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight))}
         imageAlign={imageAlign}
         buttons={renderButtonsSection(buttons)}
       >
         <div className="flex flex-col gap-xl">
-          <BenefitsList
-            benefitsVersion={benefitsVersion}
-            isTabularBenefits={isTabularBenefits}
-            benefits={benefits}
-          />
+          {filteredBenefits?.length ? (
+            <BenefitsList
+              benefitsVersion={benefitsVersion}
+              isTabularBenefits={isTabularBenefits}
+              benefits={filteredBenefits}
+            />
+          ) : null}
           {__html ? <RichText __html={__html} /> : null}
           {items?.length ? (
             <List items={items} isDotted={isDotted} listItemSize={listItemSize} />
           ) : null}
           {children}
-          {tags?.length ? <Tags tags={tags} /> : null}
+          {renderTags(tags)}
         </div>
       </BaseTile>
     );
@@ -79,3 +82,5 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
 
 const leftOrRightImage = (img: VNode, directionRight: boolean) =>
   directionRight ? { rightImage: img } : { leftImage: img };
+
+const renderTags = (tags: string[]) => (tags?.length ? <Tags tags={tags} /> : null);

package/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -29,4 +29,6 @@ export type BaseProductTileContent = HeadlineProps &
     /** @title Лейбл (моб.) */
     label?: string;
     imageOptions?: TileImageOptions;
+    /** @title Заголовок во всю ширину */
+    isFullWidthTitle?: boolean;
   };

package/src/ui-kit/BaseTile/BaseTile.tsx

@@ -15,9 +15,9 @@ interface BaseTileProps extends UniBlockProps {
 }
 
 const imageAlignmentMap: Record<Align, string> = {
-  start: 'self-start',
-  center: 'self-center',
-  end: 'self-end',
+  start: '@xl:self-start',
+  center: '@xl:self-center',
+  end: '@xl:self-end',
 };
 
 export const BaseTile = JSX<BaseTileProps>(
@@ -42,7 +42,7 @@ export const BaseTile = JSX<BaseTileProps>(
       )}
     >
       {title ? <div className="relative">{title}</div> : null}
-      <div className="grow relative flex flex-wrap @xl:flex-nowrap justify-around @xl:justify-between items-stretch gap-3xl">
+      <div className="grow relative flex flex-col @xl:flex-row justify-around @xl:justify-between items-stretch gap-3xl">
         {renderImageContainer(leftImage, { imageAlign })}
         <div
           className={style(
@@ -53,11 +53,16 @@ export const BaseTile = JSX<BaseTileProps>(
           {insetTitle}
           <div className="grow">{children}</div>
           {backImage ? (
-            <div className="mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4">{backImage}</div>
+            <div className="justify-center mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4">
+              {backImage}
+            </div>
           ) : null}
           {buttons}
         </div>
-        {renderImageContainer(rightImage, { className: '-order-1 @xl:order-1', imageAlign })}
+        {renderImageContainer(rightImage, {
+          className: '-order-1 @xl:order-1',
+          imageAlign,
+        })}
       </div>
     </div>
   ),
@@ -69,7 +74,11 @@ const renderImageContainer = (
 ) =>
   image ? (
     <div
-      className={style('md:flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className)}
+      className={style(
+        'md:flex-shrink-0 self-center',
+        imageAlign && imageAlignmentMap[imageAlign],
+        className,
+      )}
     >
       {image}
     </div>

package/src/ui-kit/DialogManager/Dialog.tsx

@@ -20,8 +20,8 @@ export const Dialog = JSX<DialogProps>(({ className, head, children, onClose })
   }, [onClose]);
 
   return (
-    <div className={style('relative min-h-full bg-white', className)}>
-      <div className="sticky py-xl top-0 bg-white">
+    <div className={style('relative min-h-full bg-white p-5', className)}>
+      <div className="sticky py-xl top-0 bg-white z-10">
         <CloseButton className="absolute top-0 right-0" onClose={handleClose} />
         <div className="container">{head}</div>
       </div>

package/src/ui-kit/DialogManager/isDialogOpen.ts

@@ -0,0 +1,4 @@
+import type { DialogOpenAction } from './DialogAction';
+
+export const isDialogOpen = (id: string, dialogs: DialogOpenAction[]) =>
+  dialogs.find((item) => item.id === id, id);

package/src/ui-kit/LocationDialog/LocationDialog.tsx

@@ -62,7 +62,7 @@ export const LocationDialog = JSX<UniBlockProps>(() => {
             .map(renderRegion(handleChangeLocation))}
         </div>
       ) : (
-        <div className="columns-5">
+        <div className="columns-2 sm:columns-5">
           {Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup(handleChangeLocation))}
         </div>
       )}

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

@@ -3,6 +3,7 @@ import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { CloseButton } from '../DialogManager/CloseButton';
 import { SearchInput } from '../SearchDialog/SearchInput';
 import { useSearchDialog } from '../SearchDialog/useSearchDialog';
+import { style } from '../../utils/style';
 
 interface SearchBarProps {
   className?: string;
@@ -27,9 +28,9 @@ export const SearchBar = JSX<SearchBarProps>(({ className }) => {
   );
 
   return (
-    <div className={className}>
+    <div className={style('relative', className)}>
       <SearchInput value={value} onChange={handleInitialInputChange} />
-      <CloseButton className="absolute top-2 right-3 sm:hidden" onClose={resetQueryOnDialogClose} />
+      <CloseButton className="absolute top-0 right-0 sm:hidden" onClose={resetQueryOnDialogClose} />
     </div>
   );
 });

package/src/ui-kit/SearchDialog/SearchInput.tsx

@@ -23,11 +23,11 @@ export const SearchInput = JSX<SearchInputProps>(
     return (
       <div className={style('font-sans relative', className)} role="form">
         <div className="absolute h-full flex items-center pl-m pointer-events-none">
-          <Img image={{ icon: 'LoupeIcon' }} width="24" height="24" />
+          <Img image={{ icon: 'LoupeIcon', iconVersion: 'black' }} width="24" height="24" />
         </div>
         <input
           className={style(
-            'h-12 pl-6xl w-full text-l text-black outline-none box-border',
+            'h-12 w-full px-10 text-l text-black outline-none box-border',
             'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text',
           )}
           value={value}

package/src/ui-kit/Sitemap/Sitemap.tsx

@@ -34,9 +34,11 @@ const renderColumn = (menuItem: TopMenuItemProps & { onClick: () => void }, inde
       >
         {text || `Раздел ${index}`}
       </a>
-      {items?.map((_, i) => (
-        <ColumnItem key={String(i)} {..._} basePath={appendSlash(href)} index={i} />
-      ))}
+      {items
+        ?.filter((_) => !_.displayArea || _.displayArea === 'Footer')
+        .map((_, i) => (
+          <ColumnItem key={String(i)} {..._} basePath={appendSlash(href)} index={i} />
+        ))}
     </div>
   );
 };

package/src/ui-kit/SwipeListControl/useSwipeListScroll.ts

@@ -9,6 +9,7 @@ import { scrollToStart } from './scrollToStart';
 export interface SwipeListScroll {
   scrollLeft: () => void;
   scrollRight: () => void;
+  scrollTo: (idx: number) => void;
   canScrollLeft: boolean;
   canScrollRight: boolean;
   visibleIndicesRange: [number, number];
@@ -68,11 +69,21 @@ export const useSwipeListScroll = <E extends HTMLElement>({
     }
   }, [itemCount, canScrollRight]);
 
+  const scrollTo = useCallback(
+    (idx) => {
+      if (containerRef?.current) {
+        containerRef.current.children[idx]?.scrollIntoView();
+      }
+    },
+    [containerRef],
+  );
+
   return [
     containerRef,
     {
       scrollLeft,
       scrollRight,
+      scrollTo,
       canScrollLeft,
       canScrollRight,
       visibleIndicesRange: [minIndex, maxIndex],

package/src/wlc.json

@@ -3,5 +3,6 @@
   "FORCED_DRAFT_FLOW": false,
   "YANDEX_MAP_API_KEY": "f4b40c1e-1891-45f2-b307-90c481af210b",
   "SITEMAP": "sayt-rshb",
+  "STICKY_MOBILE_MENU": "sticky-mobile-menu",
   "CHAT_BOT": "personal"
 }