@redneckz/wildless-cms-uni-blocks 0.3.80 → 0.3.81

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps, FuncReturnVoid } from '../../types';
-import type { InsuranceAmountBlockTabs, CardItem } from './InsuranceAmountBlockContent';
+import type { FuncReturnVoid, UniBlockProps } from '../../types';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
+import type { CardItem, InsuranceAmountBlockTabs } from './InsuranceAmountBlockContent';
 
 export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs, UniBlockProps {}
 
@@ -23,7 +23,7 @@ type InsuranceSlideProps = {
 };
 
 export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
-  ({ className = '', context, cards = [], anchor = null }) => {
+  ({ className = '', context, cards = [] }) => {
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
     const [tabsShift, setTabsShift] = context.useState(0);
 
@@ -38,7 +38,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
     const showPrevButton = tabsShift > 0;
 
     return (
-      <section id={anchor} className={`min-w-full ${className}`}>
+      <section className={`min-w-full ${className}`}>
         <div className="relative mt-7 overflow-hidden">
           {galleryLength
             ? renderGallery({

package/mobile/src/components/LikeControl/LikeControl.tsx

@@ -1,16 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { LikeButton } from '../../ui-kit/Button/LikeButton';
 
-export const LikeControl = JSX<UniBlockProps>(({ className, context, anchor = null }) => {
+export const LikeControl = JSX<UniBlockProps>(({ className, context, ...rest }) => {
   const likeService = context.useLikeService();
 
   return (
-    <div
+    <BlockWrapper
+      Tag="div"
+      context={context}
       className={`border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${
         className || ''
       }`}
-      id={anchor}
+      {...rest}
     >
       <LikeButton onClick={likeService.like} ariaLabel="Поставить отметку «лайк»" />
       <LikeButton
@@ -19,6 +22,6 @@ export const LikeControl = JSX<UniBlockProps>(({ className, context, anchor = nu
         ariaLabel="Поставить отметку «дизлайк»"
       />
       <span className="select-none">{likeService.likeCount}</span>
-    </div>
+    </BlockWrapper>
   );
 });

package/mobile/src/components/LinkList/LinkList.tsx

@@ -1,16 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import type { LinkListContent } from './LinkListContent';
 
 export interface LinkListProps extends LinkListContent, UniBlockProps {}
 
-export const LinkList = JSX<LinkListProps>(({ className = '', documents, anchor = null }) => {
+export const LinkList = JSX<LinkListProps>(({ className = '', documents, ...rest }) => {
   return (
-    <section className={`font-sans bg-white mt-[10px] ${className}`} id={anchor}>
+    <BlockWrapper className={`font-sans bg-white mt-[10px] ${className}`} {...rest}>
       <ul className="flex flex-col text-sm text-secondary-text p-0">
         {documents?.length ? renderLinkListItem(documents) : null}
       </ul>
-    </section>
+    </BlockWrapper>
   );
 });
 

package/mobile/src/components/Navigation/Navigation.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import type { UniBlockProps } from '../../types';
 import { NavigationContent } from './NavigationContent';
@@ -8,18 +9,19 @@ import { NavigationItem } from './NavigationItem';
 export interface NavigationProps extends NavigationContent, UniBlockProps {}
 
 export const Navigation = JSX<NavigationProps>(
-  ({ className, context, title, buttons, anchor = null }) => {
+  ({ className, context, title, buttons, ...rest }) => {
     const router = context.useRouter();
     const { handlerDecorator } = context;
 
     const activeButton = findActiveSubItem(router)(buttons);
 
     return (
-      <section
+      <BlockWrapper
+        context={context}
         className={`font-sans text-primary-text rounded-[40px] flex items-center justify-between ${
           className || ''
         }`}
-        id={anchor}
+        {...rest}
       >
         <h2 className="font-medium text-xl-light m-0">{title}</h2>
         {buttons?.length ? (
@@ -36,7 +38,7 @@ export const Navigation = JSX<NavigationProps>(
               ))}
           </div>
         ) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/mobile/src/components/NavigatorTabs/NavigatorTabItem.tsx

@@ -11,7 +11,7 @@ const TEXT_CLASSES = 'font-sans font-normal text-m-md';
 const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
 
 export const NavigatorTabItem = JSX<NavigatorTabItemProps>(
-  ({ className = '', text, active, children, onClick, href, target = '_self' }) => (
+  ({ className = '', text, active, onClick, href, target = '_self', children }) => (
     <a className={getLinkClasses(className, active)} target={target} href={href} onClick={onClick}>
       <span className={getTextClasses(active)}>{text || children}</span>
     </a>

package/mobile/src/components/NavigatorTabs/NavigatorTabs.tsx

@@ -1,7 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { LinkProps } from '../../model/LinkProps';
+import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { getHash } from '../../utils/url';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { NavigatorTabItem } from './NavigatorTabItem';
@@ -10,30 +11,29 @@ import type { NavigatorTabsContent } from './NavigatorTabsContent';
 export interface TabsBlockProps extends UniBlockProps, NavigatorTabsContent {}
 
 export const NavigatorTabs = JSX<TabsBlockProps>(
-  ({ className = '', navigatorTabs, context, anchor = null }) => {
-    const href = globalThis.location?.href; // TODO: remove globalThis, use href from router
-
+  ({ className = '', navigatorTabs, context, ...rest }) => {
     return (
-      <section
+      <BlockWrapper
+        context={context}
         className={`sticky top-0 z-20 box-border flex gap-x-1 h-14 ${className}`}
-        id={anchor}
+        {...rest}
       >
-        {navigatorTabs ? navigatorTabs.map(renderTab(context, href)) : null}
-      </section>
+        {navigatorTabs ? navigatorTabs.map(renderTab(context)) : null}
+      </BlockWrapper>
     );
   },
 );
 
-const renderTab = (context: ContentPageContext, href?: string) => (tab: LinkProps, i: number) => {
-  const { useRouter, handlerDecorator } = context;
-  const router = useRouter();
+const renderTab = (context: ContentPageContext) => (tab: LinkProps, i: number) => {
+  const { handlerDecorator, useRouter } = context;
 
-  const hash = getHash(href);
+  const router = useRouter();
+  const hash = getHash(router.href);
   const active = hash ? tab.href === hash : i === 0;
 
   return (
     <NavigatorTabItem
-      key={tab.href}
+      key={tab.text}
       active={active}
       {...useLink({ router, handlerDecorator }, tab)}
     />

package/mobile/src/components/OtherProducts/OtherProducts.tsx

@@ -1,14 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { OtherProductsContent } from './OtherProductsContent';
 import { OtherProductsItem } from './OtherProductsItem';
 
 export interface OtherProductsProps extends OtherProductsContent, UniBlockProps {}
 
 export const OtherProducts = JSX<OtherProductsProps>(
-  ({ blockItems, colorPalette, context, className = '' }) => {
+  ({ blockItems, colorPalette, context, className = '', ...rest }) => {
     return (
-      <section className={`font-sans text-primary-text ${className}`}>
+      <BlockWrapper
+        context={context}
+        className={`font-sans text-primary-text ${className}`}
+        {...rest}
+      >
         {blockItems?.length ? (
           <div className="box-border1">
             {blockItems.map((item, i) => (
@@ -21,7 +26,7 @@ export const OtherProducts = JSX<OtherProductsProps>(
             ))}
           </div>
         ) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/mobile/src/components/PictureText/PictureText.tsx

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { PictureTextContent, PictureTextBenefit } from './PictureTextContent';
+import type { PictureTextBenefit, PictureTextContent } from './PictureTextContent';
 
 import { BlockVersion } from '../../model/BlockVersion';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 
@@ -21,12 +22,12 @@ export const PictureText = JSX<PictureTextProps>(
     benefits,
     version = 'primary',
     directionRight = false,
-    anchor = null,
+    ...rest
   }) => {
     return (
-      <section
+      <BlockWrapper
         className={`relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`}
-        id={anchor}
+        {...rest}
       >
         <Heading headingType="h2" className="text-center" title={title} />
         <div className={'flex justify-center mt-9'}>
@@ -37,7 +38,7 @@ export const PictureText = JSX<PictureTextProps>(
             </div>
           ) : null}
         </div>
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/mobile/src/components/Placeholder/Placeholder.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { PlaceholderContent } from '../../components/Placeholder/PlaceholderContent';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -15,13 +16,14 @@ export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
 const GOLDEN_RATIO = 1.618;
 
 export const Placeholder = JSX<PlaceholderProps>(
-  ({ className, context, title, description = 'Блок в разработке...', anchor = null }) => {
+  ({ className, context, title, description = 'Блок в разработке...', ...rest }) => {
     return (
-      <section
+      <BlockWrapper
+        context={context}
         className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(
           className,
         )} ${getTileMinHeight(className)} `}
-        id={anchor}
+        {...rest}
       >
         <BaseTile
           context={context}
@@ -40,7 +42,7 @@ export const Placeholder = JSX<PlaceholderProps>(
           ) : null}
           <figure className="m-0 min-w-[600px]">{renderShimmer()}</figure>
         </BaseTile>
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,12 +1,12 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { ButtonContent, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { Picture } from '../../model/Picture';
+import type { BackwardButtonProps, ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
-import { Picture } from '../../model/Picture';
 
 export interface ProductBlockBenefit {
   icon?: Picture;
@@ -57,5 +57,5 @@ export interface ProductBlockContent extends ProductBlockInnerContent {
   /** @title Хлебные крошки */
   breadcrumbs?: LinkProps[];
   /** @title Кнопка возврата */
-  backwardButton?: ButtonWithIconProps;
+  backwardButton?: BackwardButtonProps;
 }

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

@@ -1,10 +1,10 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { BackwardButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 
 export function renderBackwardButton(
-  button: ButtonWithIconProps,
+  button: BackwardButtonProps,
   version: BlockVersion,
   className: string,
 ) {

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
+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';
@@ -28,14 +29,15 @@ export const ProductTile = JSX<ProductTileProps>(
     buttons,
     image,
     version = 'primary',
-    anchor = null,
+    ...rest
   }) => {
     return (
-      <section
+      <BlockWrapper
+        context={context}
         className={`bg-white overflow-hidden text-primary-text font-sans p-9 box-border min-h-[364px] relative justify-between grid ${className} ${
           productTileStyleMap[version]
         } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
-        id={anchor}
+        {...rest}
       >
         <div className="z-[1]">
           {title ? (
@@ -62,7 +64,7 @@ export const ProductTile = JSX<ProductTileProps>(
           />
         ) : null}
         {image?.src ? <Img className="absolute right-0 bottom-0" image={image} /> : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/mobile/src/components/PromoTile/PromoTile.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -25,14 +26,15 @@ export const PromoTile = JSX<PromoTileProps>(
     description,
     buttons = [],
     version = 'primary',
-    anchor = null,
+    ...rest
   }) => {
     return (
-      <section
+      <BlockWrapper
+        context={context}
         className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${
           promoTileStyleMap[version]
         } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
-        id={anchor}
+        {...rest}
       >
         <BaseTile
           context={context}
@@ -56,7 +58,7 @@ export const PromoTile = JSX<PromoTileProps>(
             <div className="text-base">{description}</div>
           </div>
         </BaseTile>
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/mobile/src/components/Recommendation/Recommendation.tsx

@@ -1,9 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { RecommendationCard } from './RecommendationCard';
 import type { RecommendationCardTypes, RecommendationContent } from './RecommendationContent';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
 const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
 const CARD_FULL_VIEW_COUNT = 2;
@@ -12,7 +13,7 @@ const CARD_SHIFT = 525;
 export interface RecommendationProps extends RecommendationContent, UniBlockProps {}
 
 export const Recommendation = JSX<RecommendationProps>(
-  ({ context, recommendations = [], className = '', title, version, anchor = null }) => {
+  ({ context, recommendations = [], className = '', title, version, ...rest }) => {
     const [activeCardIndex, setActiveCardIndex] = context.useState(0);
 
     const blockClassName =
@@ -20,9 +21,10 @@ export const Recommendation = JSX<RecommendationProps>(
     const cardClassName = version === 'secondary' ? 'border-white/50' : 'border-main-stroke';
 
     return (
-      <section
+      <BlockWrapper
+        context={context}
         className={`relative font-sans p-9 overflow-hidden text-center ${blockClassName} ${className}`}
-        id={anchor}
+        {...rest}
       >
         {title ? <Heading headingType="h2" className="mb-6" title={title} /> : null}
         <div
@@ -51,7 +53,7 @@ export const Recommendation = JSX<RecommendationProps>(
             version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'
           }`}
         />
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/mobile/src/components/Tile/Tile.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Description } from '../../ui-kit/Description/Description';
@@ -33,17 +34,16 @@ export const Tile = JSX<TileProps>((props) => {
     isDotted = true,
     className = '',
     version = 'primary',
-    role,
-    anchor = null,
+    ...rest
   } = props;
 
   return (
-    <section
+    <BlockWrapper
+      context={context}
       className={`overflow-hidden font-sans p-9 pr-3 box-border ${className} ${
         tileStyleMap[version]
       } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
-      role={role}
-      id={anchor}
+      {...rest}
     >
       <BaseTile
         context={context}
@@ -78,7 +78,7 @@ export const Tile = JSX<TileProps>((props) => {
         {children}
         {renderList(items, version, isDotted)}
       </BaseTile>
-    </section>
+    </BlockWrapper>
   );
 });
 

package/mobile/src/react/IntersectionObserverTag.tsx

@@ -1,8 +1,16 @@
 import { useCallback, useRef } from 'react';
-import { IntersectionObserverComponent } from '../components/ContentPage/ContentPageContext';
+import type { IntersectionObserverComponent } from '../components/ContentPage/ContentPageContext';
 
 export const IntersectionObserverTag: IntersectionObserverComponent = (props) => {
-  const { Tag, observerCallback, observerOptions, children, ...rest } = props;
+  const {
+    Tag,
+    observerCallback,
+    observerOptions,
+    className = '',
+    anchor = null,
+    children,
+    ...rest
+  } = props;
 
   const intersectionObserver = useRef<IntersectionObserver>();
   const ref = useCallback(
@@ -16,7 +24,7 @@ export const IntersectionObserverTag: IntersectionObserverComponent = (props) =>
   );
 
   return (
-    <Tag ref={ref} {...rest}>
+    <Tag ref={ref} className={className} id={anchor} {...rest}>
       {children}
     </Tag>
   );

package/mobile/src/react/setup-fixture.ts

@@ -1,5 +1,4 @@
 import { setup } from '@redneckz/uni-jsx';
-
 import { useEffect, useState } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { DaDataAPI } from '../api/DaDataAPI';

package/mobile/src/ui-kit/BlockWrapper.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ContentPageContext } from '../components/ContentPage/ContentPageContext';
+import { changeHashOnObserve } from '../utils/changeHashOnObserve';
+
+interface BlockWrapperProps {
+  context: ContentPageContext;
+  className?: string;
+  anchor?: string;
+  Tag?: string;
+}
+
+export const BlockWrapper = JSX<BlockWrapperProps>(
+  ({ anchor, className, context, children, Tag = 'section', ...rest }) => {
+    const { IntersectionObserverTag } = context;
+
+    return anchor ? (
+      <IntersectionObserverTag
+        Tag={Tag}
+        className={className}
+        observerCallback={changeHashOnObserve}
+        observerOptions={{ threshold: 1 }} // Lower threshold when hash change needed
+        anchor={anchor}
+        {...rest}
+      >
+        {children}
+      </IntersectionObserverTag>
+    ) : (
+      <Tag className={className} {...rest}>
+        {children}
+      </Tag>
+    );
+  },
+);

package/mobile/src/ui-kit/Button/ButtonProps.ts

@@ -26,7 +26,7 @@ export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
 }
 
 export interface ButtonWithIconProps extends ButtonProps {
-  /** @title Иконка */
+  /** @title Иконка слева */
   icon?: Picture;
   /** @title Иконка справа */
   iconRight?: Picture;
@@ -49,3 +49,16 @@ export interface ButtonContent {
    */
   buttons?: ButtonWithIconProps[];
 }
+
+export interface BackwardButtonProps extends ButtonProps {
+  /** @title Иконка */
+  icon?: Picture;
+  /** @title Верхний текст */
+  aboveText?: string;
+  /** @hidden */
+  appendLeft?: any;
+  /** @title Закругленные углы */
+  rounded?: boolean;
+  /** @hidden */
+  asSVG?: boolean;
+}

package/mobile/src/utils/changeHashOnObserve.ts

@@ -0,0 +1,10 @@
+export const changeHashOnObserve = (entries: IntersectionObserverEntry[]) => {
+  if (!entries.length) {
+    return;
+  }
+  const [entry] = entries;
+
+  if (entry.isIntersecting) {
+    // Here must be logic for block intersection event
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.80",
+  "version": "0.3.81",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Accordion/Accordion.tsx

@@ -1,9 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { AlignType } from '../../model/AlignType';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItem } from './AccordionItem';
-import { AlignType } from '../../model/AlignType';
 
 const ALIGN_TITLE: Record<AlignType, string> = {
   left: 'text-left',
@@ -20,11 +21,15 @@ export const Accordion = JSX<AccordionProps>(
     accordionItems,
     context,
     className = '',
-    anchor = null,
     accordionAlignTitle = 'center',
+    ...rest
   }) => {
     return (
-      <section className={`p-[50px] font-sans bg-white text-primary-text ${className}`} id={anchor}>
+      <BlockWrapper
+        context={context}
+        className={`p-[50px] font-sans bg-white text-primary-text ${className}`}
+        {...rest}
+      >
         {title ? (
           <Heading
             headingType="h4"
@@ -40,7 +45,7 @@ export const Accordion = JSX<AccordionProps>(
             ))}
           </ul>
         ) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/BaseTile/BaseTile.tsx

@@ -5,9 +5,9 @@ import type { BaseTileCommonProps } from './BaseTileProps';
 export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}
 
 export const BaseTile = JSX<BaseTileProps>(
-  ({ className = '', title, children, buttons, image, anchor = null }) => {
+  ({ className = '', title, children, buttons, image }) => {
     return (
-      <div className={`font-sans flex flex-col grow h-full items-start ${className}`} id={anchor}>
+      <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
         {title}
         <div className="flex grow w-full justify-between">
           <div className="flex flex-col justify-between w-full">