@redneckz/wildless-cms-uni-blocks 0.3.28 → 0.3.31

package/src/components/ProductGallery/ProductGallery.tsx

@@ -7,13 +7,16 @@ import type { ProductGalleryContent } from './ProductGalleryContent';
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
 export const ProductGallery = JSX<ProductGalleryProps>(
-  ({ className, context, duration = 0, slides = [] }) => {
+  ({ className, context, duration = 0, slides = [], anchor = null }) => {
     const galleryNav = slides.map((s) => s.nav);
     const galleryBlocks = slides.map((s) => s.productBlock);
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
 
     return (
-      <section className={`font-sans bg-white overflow-hidden w-100 ${className || ''}`}>
+      <section
+        className={`font-sans bg-white overflow-hidden w-100 ${className || ''}`}
+        id={anchor}
+      >
         <div
           className={`flex duration-1000`}
           style={{ transform: `translateX(-${activeSlideIndex}00%)` }}

package/src/components/ProductGalleryGreen/ProductGalleryGreen.tsx

@@ -8,7 +8,7 @@ import type { ProductGalleryGreenContent } from './ProductGalleryGreenContent';
 export interface ProductGalleryProps extends ProductGalleryGreenContent, UniBlockProps {}
 
 export const ProductGalleryGreen = JSX<ProductGalleryProps>(
-  ({ className = '', context, slides = [] }) => {
+  ({ className = '', context, slides = [], anchor = null }) => {
     const galleryNav = slides.map((s) => s.nav);
     const galleryBlocks = slides.map((s) => s.productBlock);
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
@@ -16,6 +16,7 @@ export const ProductGalleryGreen = JSX<ProductGalleryProps>(
     return (
       <section
         className={`box-border pt-[70px] relative font-sans overflow-hidden bg-primary-main w-100 ${className}`}
+        id={anchor}
       >
         <div
           className="flex duration-1000 pb-14"
@@ -75,9 +76,13 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick }) {
   const isActiveBtn = i === activeSlideIndex;
   const btnClassName = isActiveBtn
     ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] max-w-[354px] p-0'
-    : 'bg-white/10 min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300';
-  const btnTitleClassName = isActiveBtn ? 'text-primary-text' : 'text-white';
-  const btnDescClassName = isActiveBtn ? 'text-secondary-text' : 'text-white';
+    : 'bg-white/10 min-w-[277px] px-0 pt-4 pb-[23px] hover:pt-[21px] hover:pb-7 ease-in duration-300';
+  const btnTitleClassName = isActiveBtn
+    ? 'text-[18px] text-primary-text pb-[10px]'
+    : 'text-m-base text-white pb-[3px]';
+  const btnDescClassName = isActiveBtn
+    ? 'text-[18px] text-secondary-text'
+    : 'text-m-base text-white';
 
   return (
     <button
@@ -90,8 +95,8 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick }) {
       `}
     >
       <div className="border-0 px-6">
-        <div className={`text-sm font-medium pb-[3px] ${btnTitleClassName}`}>{slide?.title}</div>
-        <div className={`text-xs text-secondary-text ${btnDescClassName}`}>{slide.description}</div>
+        <div className={`font-medium ${btnTitleClassName}`}>{slide?.title}</div>
+        <div className={`text-secondary-text ${btnDescClassName}`}>{slide.description}</div>
       </div>
     </button>
   );

package/src/components/ProductTile/ProductTile.tsx

@@ -29,12 +29,14 @@ export const ProductTile = JSX<ProductTileProps>(
     buttons,
     image,
     version = 'primary',
+    anchor = null,
   }) => {
     return (
       <section
         className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${
           productTileStyleMap[version]
         } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
+        id={anchor}
       >
         <BaseTile
           context={context}

package/src/components/PromoTile/PromoTile.tsx

@@ -25,12 +25,14 @@ export const PromoTile = JSX<PromoTileProps>(
     description,
     buttons = [],
     version = 'primary',
+    anchor = null,
   }) => {
     return (
       <section
         className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${
           promoTileStyleMap[version]
         } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
+        id={anchor}
       >
         <BaseTile
           context={context}

package/src/components/Recommendation/Recommendation.tsx

@@ -12,7 +12,7 @@ const CARD_SHIFT = 525;
 export interface RecommendationProps extends RecommendationContent, UniBlockProps {}
 
 export const Recommendation = JSX<RecommendationProps>(
-  ({ context, recommendations = [], className = '', title, version }) => {
+  ({ context, recommendations = [], className = '', title, version, anchor = null }) => {
     const [activeCardIndex, setActiveCardIndex] = context.useState(0);
 
     const blockClassName =
@@ -22,6 +22,7 @@ export const Recommendation = JSX<RecommendationProps>(
     return (
       <section
         className={`relative font-sans p-[50px] overflow-hidden ${blockClassName} ${className}`}
+        id={anchor}
       >
         {title ? <Heading headingType="h3" className="mb-8" title={title} /> : null}
         <div

package/src/components/StepsBlock/StepsBlock.tsx

@@ -7,29 +7,32 @@ import type { Step, StepsBlockContent } from './StepsBlockContent';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
-export const StepsBlock = JSX<StepsBlockProps>(({ className, title, showLines = true, steps }) => {
-  return (
-    <section
-      className={`box-border font-sans text-primary-text bg-white px-20 py-[50px] flex flex-col items-center ${
-        className || ''
-      }`}
-    >
-      <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
-      {steps?.length ? (
-        <div className={`box-border py-0.5 mb-0.5 ${title ? 'mt-9' : ''}`}>
-          <div className="flex items-center px-[88px]">
-            {joinList(
-              <div
-                className={`h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}`}
-              />,
-            )(steps.map((step, i) => renderStepIcon(step, i)))}
+export const StepsBlock = JSX<StepsBlockProps>(
+  ({ className, title, showLines = true, steps, anchor = null }) => {
+    return (
+      <section
+        className={`box-border font-sans text-primary-text bg-white px-20 py-[50px] flex flex-col items-center ${
+          className || ''
+        }`}
+        id={anchor}
+      >
+        <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
+        {steps?.length ? (
+          <div className={`box-border py-0.5 mb-0.5 ${title ? 'mt-9' : ''}`}>
+            <div className="flex items-center px-[88px]">
+              {joinList(
+                <div
+                  className={`h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}`}
+                />,
+              )(steps.map((step, i) => renderStepIcon(step, i)))}
+            </div>
+            <div className="flex justify-between gap-x-[101px]">{steps.map(renderStepTitle)}</div>
           </div>
-          <div className="flex justify-between gap-x-[101px]">{steps.map(renderStepTitle)}</div>
-        </div>
-      ) : null}
-    </section>
-  );
-});
+        ) : null}
+      </section>
+    );
+  },
+);
 
 const renderStepIcon = (step: Step, i: number) => {
   return (

package/src/components/TariffsTable/TariffsTable.tsx

@@ -15,7 +15,7 @@ import { TariffsTableRow } from './TariffsTableRow';
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
 export const TariffsTable = JSX<TariffsTableProps>(
-  ({ className, context, title, description, rowHeaders, columns }) => {
+  ({ className, context, title, description, rowHeaders, columns, anchor = null }) => {
     const [activeCardIndex, setActiveCardIndex] = context.useState(0);
 
     const colData = getColData(columns);
@@ -34,6 +34,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
         className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${
           className || ''
         }`}
+        id={anchor}
       >
         {title ? (
           <Heading

package/src/components/TextBlock/TextBlock.tsx

@@ -31,11 +31,20 @@ const textBlockStyleMaps: Record<
 };
 
 export const TextBlock = JSX<TextBlockProps>(
-  ({ title, description, blockVersion = 'primary', iconVersion, image, className }) => {
+  ({
+    title,
+    description,
+    blockVersion = 'primary',
+    iconVersion,
+    image,
+    className,
+    anchor = null,
+  }) => {
     const textBlockStyleMap = textBlockStyleMaps[blockVersion];
     return (
       <section
         className={`font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`}
+        id={anchor}
       >
         {iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
         {iconVersion === 'big' ? renderImage(image) : null}

package/src/components/TextBlock/TextBlockContent.ts

@@ -23,7 +23,7 @@ export interface TextBlockContent {
   iconVersion?: TextBlockIconVersion;
   image?: Picture;
   blockVersion?: TextBlockVersion;
-  /** @title Маркеры списка (моб.) */ // TODO: mobile prop
+  /** @title Буллиты */ // TODO: mobile prop
   isDotted?: boolean;
   /** @title Список (моб.) */ // TODO: mobile prop
   items?: string[];

package/src/components/Tile/Tile.tsx

@@ -33,6 +33,7 @@ export const Tile = JSX<TileProps>((props) => {
     className = '',
     version = 'primary',
     role,
+    anchor = null,
   } = props;
 
   return (
@@ -41,6 +42,7 @@ export const Tile = JSX<TileProps>((props) => {
         tileStyleMap[version]
       } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
       role={role}
+      id={anchor}
     >
       <BaseTile
         context={context}

package/src/services/sitemap/isTopItemActive.spec.ts

@@ -5,6 +5,7 @@ const router: Router = {
   href: 'https://foo.ru/natural/credits',
   pathname: '/natural',
   push: () => undefined,
+  replace: () => undefined,
   query: {},
 };
 

package/src/setup-fixture.ts

@@ -11,16 +11,28 @@ const TEST_ORIGIN = 'http://localhost:5001';
 
 const DaData = DaDataAPI('https://10.80.4.9');
 
-export const context: ContentPageContext = {
-  useState,
-  useRouter: () => ({
-    href: `${TEST_ORIGIN}/credits`,
+const Router = () => {
+  const [href, setHref] = useState<string>(globalThis.location.href);
+
+  return {
+    href: href,
     pathname: '/credits',
     query: {},
-    push: (url: string) => {
-      console.log(url);
+    push: (url?: string) => {
+      if (!url) return;
+      globalThis.history.pushState(null, '', url);
+      setHref(globalThis.location.href);
     },
-  }),
+    replace: (url?: string) => {
+      if (!url) return;
+      globalThis.history.replaceState(null, '', url);
+      setHref(globalThis.location.href);
+    },
+  };
+};
+export const context: ContentPageContext = {
+  useState,
+  useRouter: Router,
   useAsyncData: (key, fetcher) => {
     const [data, setData] = useState();
     useEffect(() => {
@@ -76,7 +88,10 @@ export const mobileContext: ContentPageContext = {
     href: `${TEST_ORIGIN}/mobile/credits`,
     pathname: '/mobile/credits',
     query: {},
-    push: (url: string) => {
+    push: (url?: string) => {
+      console.log(url);
+    },
+    replace: (url?: string) => {
       console.log(url);
     },
   }),

package/src/types.ts

@@ -10,6 +10,7 @@ export interface BaseBlockDef {
   content?: BlockContent;
   version?: BlockVersion;
   hidden?: boolean;
+  anchor?: string;
 }
 
 export interface BlockDef extends BaseBlockDef {
@@ -50,6 +51,7 @@ export interface ContentPageDef extends ContentPageMeta {
 export interface UniBlockProps {
   className?: string;
   context: ContentPageContext;
+  anchor?: string;
 }
 
 export interface DaDataResult {

package/src/ui-kit/BlocksList/EmbeddableBlocks.mobile.tsx

@@ -0,0 +1,15 @@
+import { Headline } from '../../components/Headline/Headline';
+import { LinkDocs } from '../../components/LinkDocs/LinkDocs';
+import { ProductBlock } from '../../components/ProductBlock/ProductBlock';
+import { TextBlock } from '../../components/TextBlock/TextBlock';
+import { Gallery } from '../../components/Gallery/Gallery';
+import { LinkList } from '../../components/LinkList/LinkList';
+
+export const EmbeddableBlocks = {
+  Headline,
+  LinkDocs,
+  TextBlock,
+  ProductBlock,
+  Gallery,
+  LinkList,
+};

package/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -2,27 +2,19 @@ import type { JSXBlock } from '../../components/ContentPage/ContentPage';
 import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
 import type { BlockDef, ColumnsCount } from './BlocksListProps';
 import { EmbeddableBlocks } from './EmbeddableBlocks';
-import { BlockVersion } from '../../model/BlockVersion';
 
 type EmbeddableBlocksProps = {
   blocks?: BlockDef[];
   context: ContentPageContext;
   columns?: ColumnsCount;
   className?: string;
-  version?: BlockVersion;
 };
 
-export const renderBlocksList = ({
-  blocks,
-  context,
-  className,
-  columns,
-  version,
-}: EmbeddableBlocksProps) =>
-  blocks?.length ? blocks.map(renderBlock({ context, className, columns, version })) : null;
+export const renderBlocksList = ({ blocks, context, className, columns }: EmbeddableBlocksProps) =>
+  blocks?.length ? blocks.map(renderBlock({ context, className, columns })) : null;
 
 export const renderBlock =
-  ({ context, columns, className, version }: EmbeddableBlocksProps) =>
+  ({ context, columns, className }: EmbeddableBlocksProps) =>
   (block: BlockDef, i: number) => {
     const type = block?.blockListType;
     if (!type || !(type in EmbeddableBlocks)) {
@@ -32,7 +24,7 @@ export const renderBlock =
     const EmbeddedBlock: JSXBlock = EmbeddableBlocks[type];
     return (
       <div className={`${className} ${columnsCountClass}`} key={`block_${i}`}>
-        <EmbeddedBlock context={context} {...block} blockVersion={version} className="!p-0" />
+        <EmbeddedBlock context={context} {...block} className="!p-0" />
       </div>
     );
   };

package/src/ui-kit/SwipeListControl/SwipeListControl.fixture.mobile.tsx

@@ -1,16 +1,34 @@
 import { SwipeListControl } from './SwipeListControl';
 import { mobileContext } from '../../setup-fixture';
 
-const children = new Array(4).fill(0).map((_, i) => (
-  <div key={String(i)} className="border border-main-stroke rounded-md text-center h-12">
-    {`Element #${i}`}
-  </div>
-));
+const generateChildren = (count: number) =>
+  new Array(count).fill(0).map((_, i) => (
+    <div key={String(i)} className="border border-main-stroke rounded-md text-center h-12">
+      {`Element #${i}`}
+    </div>
+  ));
 
 export default {
   default: (
     <div className="px-4 py-5 bg-white">
-      <SwipeListControl context={mobileContext}>{children}</SwipeListControl>
+      <SwipeListControl context={mobileContext}>{generateChildren(5)}</SwipeListControl>
+    </div>
+  ),
+  'w/o dots': (
+    <div className="px-4 py-5 bg-white">
+      <SwipeListControl context={mobileContext} showDots={false}>
+        {generateChildren(5)}
+      </SwipeListControl>
+    </div>
+  ),
+  '1 element': (
+    <div className="px-4 py-5 bg-white">
+      <SwipeListControl context={mobileContext}>{generateChildren(1)}</SwipeListControl>
+    </div>
+  ),
+  '2 elements': (
+    <div className="px-4 py-5 bg-white">
+      <SwipeListControl context={mobileContext}>{generateChildren(2)}</SwipeListControl>
     </div>
   ),
 };

package/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -22,7 +22,7 @@ export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
       const contentContainer = (e.currentTarget as HTMLElement).parentElement
         ?.previousElementSibling;
 
-      contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth' });
+      contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     };
 
     return showDots && children?.length ? (

package/src/ui-kit/SwipeListControl/utils/getScrollPoints.spec.ts

@@ -17,8 +17,26 @@ const scrollPoints: [number, number][] = [
   [1414, 1914],
 ];
 
+const twoItemsScrollPointsProps = {
+  gap: 14,
+  padding: 16,
+  clientWidth: 414,
+  scrollWidth: 794,
+  childElementCount: 2,
+  itemWidth: 380,
+};
+
+const twoItemsScrollPoints: [number, number][] = [
+  [0, 380],
+  [380, 794],
+];
+
 describe('getScrollPoints', () => {
   it('should return array containing scroll breakpoints delimiting each child', () => {
     expect(getScrollPoints(props)).toEqual(scrollPoints);
   });
+
+  it('should correctly handle case with 2 items in container', () => {
+    expect(getScrollPoints(twoItemsScrollPointsProps)).toEqual(twoItemsScrollPoints);
+  });
 });

package/src/ui-kit/SwipeListControl/utils/getScrollPoints.ts

@@ -16,9 +16,17 @@ export const getScrollPoints = ({
   scrollWidth: number;
   childElementCount: number;
   itemWidth: number;
-}) => {
-  const scrollItemWidth = itemWidth + gap;
+}): [number, number][] => {
   const scrollableDistance = scrollWidth - clientWidth;
+
+  if (childElementCount === 2) {
+    return [
+      [0, scrollableDistance],
+      [scrollableDistance, scrollWidth],
+    ];
+  }
+
+  const scrollItemWidth = itemWidth + gap;
   const edgeScrollDistance = clientWidth - gap - padding;
 
   const lastScrollableIdx = childElementCount - 2;

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

@@ -19,7 +19,7 @@ const renderTab =
     return (
       <div
         key={String(index)}
-        className={`flex h-full flex-1 cursor-pointer mr-2 last:mr-0 ${
+        className={`flex h-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${
           isActive ? ACTIVE_TAB_STYLE : TAB_STYLE
         }`}
         role="tab"

package/src/utils/url.ts

@@ -13,3 +13,12 @@ export const getOrigin = (href?: string) => {
   const endOfOrigin = url.indexOf('/', endOfProto + protoSeparator.length);
   return endOfOrigin !== -1 ? url.substring(0, endOfOrigin) : url;
 };
+
+export const getHash = (href?: string) => {
+  if (!href || !isURL(href)) {
+    return undefined;
+  }
+
+  const hashIndex = href.indexOf('#');
+  return hashIndex !== -1 ? href.substring(hashIndex, href.length) : undefined;
+};