@redneckz/wildless-cms-uni-blocks 0.6.26 → 0.6.28

package/src/components/GracePeriod/GracePeriod.tsx

@@ -12,25 +12,19 @@ interface MappedCalendarItemProps extends CalendarItem {
 export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
-  ({ context, className = '', title, description, calendar, ...rest }) => {
-    return (
-      <BlockWrapper
-        className={`font-sans bg-white p-[50px] ${className}`}
-        context={context}
+  ({ className = '', title, description, calendar, ...rest }) => (
+    <BlockWrapper className={`font-sans bg-white p-[50px] ${className}`} {...rest}>
+      <Headline
+        className="!p-0 mb-4"
+        title={title}
+        description={description}
+        headlineVersion="M"
+        align="center"
         {...rest}
-      >
-        <Headline
-          context={context}
-          className="!p-0 mb-4"
-          title={title}
-          description={description}
-          headlineVersion="M"
-          align="center"
-        />
-        {calendar ? renderCalendar(calendar) : null}
-      </BlockWrapper>
-    );
-  },
+      />
+      {calendar ? renderCalendar(calendar) : null}
+    </BlockWrapper>
+  ),
 );
 
 const renderCalendar = (calendar: CalendarItem[]) => {

package/src/components/Header/DropdownMenu.tsx

@@ -4,7 +4,6 @@ import { useLink } from '../../hooks/useLink';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 
 const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
   'bg-white': 'bg-primary-text',
@@ -12,56 +11,52 @@ const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
 };
 
 interface DropdownMenuProps {
-  context: ContentPageContext;
   className?: string;
   items: LinkProps[];
   activeItem?: LinkProps;
   bgColor?: BgColorVersion;
 }
 
-export const DropdownMenu = JSX<DropdownMenuProps>(
-  ({ context, className, items, activeItem, bgColor }) => {
-    const { useRouter, handlerDecorator } = context;
-    const router = useRouter();
+export const DropdownMenu = JSX<DropdownMenuProps>(({ className, items, activeItem, bgColor }) => {
+  const link = useLink();
 
-    const [visible, setVisible] = useState(false);
-    const handleToggle = useCallback(() => setVisible((_) => !_), []);
+  const [visible, setVisible] = useState(false);
+  const handleToggle = useCallback(() => setVisible((_) => !_), []);
 
-    const handleClickOutside = useCallback(() => setVisible(false), []);
-    const ref = useOutsideClick<HTMLDivElement>(handleClickOutside);
+  const handleClickOutside = useCallback(() => setVisible(false), []);
+  const ref = useOutsideClick<HTMLDivElement>(handleClickOutside);
 
-    return (
+  return (
+    <div
+      className={`${visible ? 'bg-white rounded-md shadow-blue-gray/24' : ''} ${className || ''}`}
+      ref={ref}
+    >
+      <button
+        className="flex justify-between items-center cursor-pointer h-6 ml-6"
+        aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
+        onClick={handleToggle}
+      >
+        {Array(3).fill(bgColor).map(renderDot)}
+      </button>
       <div
-        className={`${visible ? 'bg-white rounded-md shadow-blue-gray/24' : ''} ${className || ''}`}
-        ref={ref}
+        className={`flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`}
+        aria-hidden={!visible}
       >
-        <button
-          className="flex justify-between items-center cursor-pointer h-6 ml-6"
-          aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
-          onClick={handleToggle}
-        >
-          {Array(3).fill(bgColor).map(renderDot)}
-        </button>
-        <div
-          className={`flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`}
-          aria-hidden={!visible}
-        >
-          {items?.map((item, i) => (
-            <a
-              key={item.href || String(i)}
-              className={`text-l-light pb-4 hover:text-primary-main ${
-                item === activeItem ? 'text-primary-main' : ''
-              }`}
-              {...useLink({ router, handlerDecorator }, item)}
-            >
-              {item.text}
-            </a>
-          ))}
-        </div>
+        {items?.map((item, i) => (
+          <a
+            key={item.href || String(i)}
+            className={`text-l-light pb-4 hover:text-primary-main ${
+              item === activeItem ? 'text-primary-main' : ''
+            }`}
+            {...link(item)}
+          >
+            {item.text}
+          </a>
+        ))}
       </div>
-    );
-  },
-);
+    </div>
+  );
+});
 
 const renderDot = (bgColor: BgColorVersion, i: number) => (
   <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />

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

@@ -1,7 +1,7 @@
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 import { Header } from './Header.mobile';
 
 export default {
-  default: <Header context={context} defaultLocation="Москва" />,
-  transparent: <Header context={context} defaultLocation="Москва" bgColor="transparent" />,
+  default: <Header defaultLocation="Москва" />,
+  transparent: <Header defaultLocation="Москва" bgColor="transparent" />,
 };

package/src/components/Header/Header.fixture.tsx

@@ -1,8 +1,8 @@
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 import { Header } from './Header';
 
 export default {
-  default: <Header context={context} defaultLocation="Москва" />,
-  transparent: <Header context={context} defaultLocation="Москва" bgColor="transparent" />,
-  'no submenu': <Header context={context} defaultLocation="Москва" showSubMenu={false} />,
+  default: <Header defaultLocation="Москва" />,
+  transparent: <Header defaultLocation="Москва" bgColor="transparent" />,
+  'no submenu': <Header defaultLocation="Москва" showSubMenu={false} />,
 };

package/src/components/Header/Header.mobile.tsx

@@ -1,13 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useLink } from '../../hooks/useLink';
+import { useRouter } from '../../hooks/useRouter';
 import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { projectSettings } from '../../ProjectSettings';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
-import { useSitemap } from '../../services/sitemap/useSitemap';
+import type { SitemapDataProps } from '../../services/sitemap/SitemapProps';
+import { useSWRResource } from '../../services/sitemap/useSWRResource';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
 import { AccordionItemsList } from '../Accordion/AccordionItemsList';
 import { AccordionItem } from '../AccordionItem/AccordionItem';
 import { LinkList } from '../LinkList/LinkList';
@@ -18,12 +19,15 @@ import { HeaderTop } from './HeaderTop';
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
-  ({ className = '', defaultLocation, bgColor = 'bg-white', context, page }) => {
-    const { handlerDecorator } = context;
-    const router = context.useRouter();
+  ({ className = '', defaultLocation, bgColor = 'bg-white', ...rest }) => {
+    const router = useRouter();
 
+    const { page } = rest;
     const fallback: Fallback | undefined = page?.fallback;
-    const { topItems, dispositions } = useSitemap(fallback);
+    const { topItems, dispositions } = useSWRResource<SitemapDataProps>(
+      projectSettings.SITEMAP || 'sitemap',
+      fallback,
+    );
 
     const activeTopItem = topItems?.find(isTopItemActive(router));
     const subItems = activeTopItem?.items;
@@ -39,34 +43,30 @@ export const Header = JSX<HeaderProps>(
           <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
           <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
             <div className="flex no-scrollbar horizontal-list h-full items-center">
-              {subItems?.map((_, i) =>
-                renderSubItem(
-                  {
-                    ...useLink({ router, handlerDecorator }, _),
-                    active: _ === activeSubItem,
-                    bgColor,
-                  },
-                  i,
-                ),
-              )}
+              {subItems?.map((_, i) => (
+                <HeaderItem
+                  key={String(i)}
+                  className="mr-8 whitespace-nowrap text-s"
+                  active={_ === activeSubItem}
+                  bgColor={bgColor}
+                  {..._}
+                />
+              ))}
             </div>
           </nav>
         </div>
         {burgerMenuShow ? (
           <HeaderBurger
-            context={context}
             onClick={toggleBurgerMenu}
             burgerSubMenu={dispositions}
             defaultLocation={defaultLocation}
           >
             <AccordionItemsList>
-              {topItems?.map((item, i) => {
-                item?.text ? (
-                  <AccordionItem key={String(i)} context={context} label={item.text}>
-                    <LinkList context={context} documents={item.items} />
-                  </AccordionItem>
-                ) : null;
-              })}
+              {topItems?.map((item, i) => (
+                <AccordionItem key={String(i)} label={item.text} {...rest}>
+                  <LinkList documents={item.items} {...rest} />
+                </AccordionItem>
+              ))}
             </AccordionItemsList>
           </HeaderBurger>
         ) : null}
@@ -74,7 +74,3 @@ export const Header = JSX<HeaderProps>(
     );
   },
 );
-
-const renderSubItem = (item: TopItemProps, i: number) => (
-  <HeaderItem key={String(i)} className="mr-8 whitespace-nowrap text-s" {...item} />
-);

package/src/components/Header/Header.tsx

@@ -1,15 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
+import { Router, useRouter } from '../../hooks/useRouter';
 import type { BgColorVersion } from '../../model/BgColorVersion';
-import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { TopMenuItem } from '../../model/SitemapProps';
+import { projectSettings } from '../../ProjectSettings';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
-import { useSitemap } from '../../services/sitemap/useSitemap';
+import type { SitemapDataProps } from '../../services/sitemap/SitemapProps';
+import { useSWRResource } from '../../services/sitemap/useSWRResource';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
-import type { Router } from '../ContentPage/ContentPageContext';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
 import { HeaderSubMenu } from './HeaderSubMenu';
@@ -25,18 +25,17 @@ export const Header = JSX<HeaderProps>(
   ({
     bgColor = 'bg-white',
     className = '',
-    context,
     defaultLocation = 'Москва',
     logo,
-    page,
     showSubMenu = true,
     ...rest
   }) => {
-    const router = context.useRouter();
-    const fallback: Fallback | undefined = page?.fallback;
-    const { handlerDecorator } = context;
+    const router = useRouter();
 
-    const { topItems } = useSitemap(fallback);
+    const { topItems } = useSWRResource<SitemapDataProps>(
+      projectSettings.SITEMAP || 'sitemap',
+      rest.page?.fallback,
+    );
 
     const activeTopItem = showSubMenu ? getActiveItem(topItems, router) : null;
 
@@ -44,16 +43,15 @@ export const Header = JSX<HeaderProps>(
       <TopItem
         key={String(i)}
         active={_ === activeTopItem}
-        {...useLink({ router, handlerDecorator }, _)}
         aria-label={_.text}
         bgColor={bgColor}
+        {..._}
       />
     ));
 
     return (
       <BlockWrapper
         tag="header"
-        context={context}
         className={`pt-6 px-20 ${bgColor} ${className} ${
           showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'
         }`}
@@ -71,7 +69,7 @@ export const Header = JSX<HeaderProps>(
           </div>
           <div className={`mt-6 h-[1px] ${BORDER_COLORS[bgColor]}`} />
           {showSubMenu && activeTopItem?.items?.length ? (
-            <HeaderSubMenu context={context} subItems={activeTopItem.items} bgColor={bgColor} />
+            <HeaderSubMenu subItems={activeTopItem.items} bgColor={bgColor} />
           ) : null}
         </div>
       </BlockWrapper>

package/src/components/Header/HeaderBurger.tsx

@@ -3,11 +3,9 @@ import { useGeolocation } from '../../hooks/useGeolocation';
 import type { VNode } from '../../model/VNode';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { DispositionItem } from './HeaderContent';
 
 export interface HeaderBurgerProps {
-  context: ContentPageContext;
   onClick: () => void;
   burgerSubMenu?: DispositionItem[];
   defaultLocation?: string;
@@ -15,7 +13,7 @@ export interface HeaderBurgerProps {
 }
 
 export const HeaderBurger = JSX<HeaderBurgerProps>(
-  ({ context, burgerSubMenu, onClick, defaultLocation = '', children }) => {
+  ({ burgerSubMenu, onClick, defaultLocation = '', children }) => {
     const [city, getCity] = useGeolocation(defaultLocation);
 
     return (
@@ -41,7 +39,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
         </button>
         {children}
         <div className="mb-7">{burgerSubMenu?.map(renderBurgerSubMenuItem)}</div>
-        <SearchBar context={context} className="grow" />
+        <SearchBar className="grow" />
       </div>
     );
   },

package/src/components/Header/HeaderSubMenu.tsx

@@ -1,20 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useRouter } from '../../hooks/useRouter';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { DropdownMenu } from './DropdownMenu';
 import { HeaderSubMenuItem } from './HeaderSubMenuItem';
 
 export interface HeaderSubMenuProps {
-  context: ContentPageContext;
   subItems?: LinkProps[];
   bgColor?: BgColorVersion;
 }
 
-export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [], bgColor }) => {
-  const router = context.useRouter();
+export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [], bgColor }) => {
+  const router = useRouter();
 
   const activeSubItem = findActiveSubItem(router)(subItems);
 
@@ -44,7 +43,6 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [],
         {subItems.map((_, i) => (
           <HeaderSubMenuItem
             key={String(i)}
-            context={context}
             className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
             active={_ === activeSubItem}
             bgColor={bgColor}
@@ -56,7 +54,6 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [],
       </div>
       {dropDownMenuItems.length ? (
         <DropdownMenu
-          context={context}
           className="absolute w-52 -top-4 right-0 pt-4 z-40"
           items={dropDownMenuItems}
           activeItem={activeSubItem}

package/src/components/Header/HeaderSubMenuItem.tsx

@@ -1,14 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
-import { useLink } from '../../hooks/useLink';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 
 export interface HeaderSubMenuItemProps extends LinkProps {
-  context: ContentPageContext;
   className?: string;
   active?: boolean;
   bgColor?: BgColorVersion;
@@ -17,19 +14,7 @@ export interface HeaderSubMenuItemProps extends LinkProps {
 }
 
 export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
-  ({
-    context,
-    className,
-    active,
-    bgColor,
-    observerOptions,
-    onVisibilityChange,
-    children,
-    ...linkProps
-  }) => {
-    const { handlerDecorator } = context;
-    const router = context.useRouter();
-
+  ({ className, active, bgColor, observerOptions, onVisibilityChange, children, ...linkProps }) => {
     const observerCallback = useCallback(
       (entries: IntersectionObserverEntry[]) => {
         if (!entries.length || !onVisibilityChange) {
@@ -47,12 +32,7 @@ export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
 
     return (
       <span ref={ref}>
-        <HeaderItem
-          className={className}
-          active={active}
-          bgColor={bgColor}
-          {...useLink({ router, handlerDecorator }, linkProps)}
-        >
+        <HeaderItem className={className} active={active} bgColor={bgColor} {...linkProps}>
           {children}
         </HeaderItem>
       </span>

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

@@ -1,4 +1,4 @@
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 
 import type { Picture } from '../../model/Picture';
 import { Headline } from './Headline';
@@ -40,40 +40,39 @@ const secondaryProps: HeadlineContent = {
 export default {
   'default left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...defaultProps} align="left" />
+      <Headline className="col-span-12" {...defaultProps} align="left" />
     </div>
   ),
   'default center alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...defaultProps} align="center" />
+      <Headline className="col-span-12" {...defaultProps} align="center" />
     </div>
   ),
   'default right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...defaultProps} align="right" />
+      <Headline className="col-span-12" {...defaultProps} align="right" />
     </div>
   ),
 
   'primary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...primaryProps} align="left" />
+      <Headline className="col-span-12" {...primaryProps} align="left" />
     </div>
   ),
   'primary center alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...primaryProps} align="center" />
+      <Headline className="col-span-12" {...primaryProps} align="center" />
     </div>
   ),
   'primary right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...primaryProps} align="right" />
+      <Headline className="col-span-12" {...primaryProps} align="right" />
     </div>
   ),
   'primary without description': (
     <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
-        context={context}
         title="Копите в нескольких валютах"
         image={image}
         bgColorHeadline="primary"
@@ -84,7 +83,6 @@ export default {
     <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
-        context={context}
         description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
         image={image}
         bgColorHeadline="primary"
@@ -94,24 +92,23 @@ export default {
 
   'secondary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...secondaryProps} align="left" />
+      <Headline className="col-span-12" {...secondaryProps} align="left" />
     </div>
   ),
   'secondary center alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...secondaryProps} align="center" />
+      <Headline className="col-span-12" {...secondaryProps} align="center" />
     </div>
   ),
   'secondary right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...secondaryProps} align="right" />
+      <Headline className="col-span-12" {...secondaryProps} align="right" />
     </div>
   ),
   'secondary without description': (
     <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
-        context={context}
         title="Копите в нескольких валютах"
         image={image}
         bgColorHeadline="secondary"
@@ -122,7 +119,6 @@ export default {
     <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
-        context={context}
         description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
         image={image}
         bgColorHeadline="secondary"

package/src/components/Headline/Headline.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 
 import { Headline } from './Headline';
 import type { HeadlineContent } from './HeadlineContent';
@@ -22,72 +22,72 @@ export const HEADLINE_SECONDARY: HeadlineContent = {
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE} />
+      <Headline className="col-span-12" {...HEADLINE} />
     </div>
   ),
   'default left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE} align="left" />
+      <Headline className="col-span-12" {...HEADLINE} align="left" />
     </div>
   ),
   'default right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE} align="right" />
+      <Headline className="col-span-12" {...HEADLINE} align="right" />
     </div>
   ),
   'default difficult XXL': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE} headlineVersion="XXL" />
+      <Headline className="col-span-12" {...HEADLINE} headlineVersion="XXL" />
     </div>
   ),
   'default difficult XL': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE} headlineVersion="XL" />
+      <Headline className="col-span-12" {...HEADLINE} headlineVersion="XL" />
     </div>
   ),
   'default difficult L': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE} headlineVersion="L" />
+      <Headline className="col-span-12" {...HEADLINE} headlineVersion="L" />
     </div>
   ),
   'default difficult M': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE} headlineVersion="M" />
+      <Headline className="col-span-12" {...HEADLINE} headlineVersion="M" />
     </div>
   ),
   'default difficult S': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE} headlineVersion="S" />
+      <Headline className="col-span-12" {...HEADLINE} headlineVersion="S" />
     </div>
   ),
   'primary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} align="left" />
+      <Headline className="col-span-12" {...HEADLINE_PRIMARY} align="left" />
     </div>
   ),
   'primary center alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} />
+      <Headline className="col-span-12" {...HEADLINE_PRIMARY} />
     </div>
   ),
   'primary right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} align="right" />
+      <Headline className="col-span-12" {...HEADLINE_PRIMARY} align="right" />
     </div>
   ),
   'secondary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} align="left" />
+      <Headline className="col-span-12" {...HEADLINE_SECONDARY} align="left" />
     </div>
   ),
   'secondary center alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} />
+      <Headline className="col-span-12" {...HEADLINE_SECONDARY} />
     </div>
   ),
   'secondary right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} align="right" />
+      <Headline className="col-span-12" {...HEADLINE_SECONDARY} align="right" />
     </div>
   ),
 };

package/src/components/Headline/Headline.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { AlignText } from '../../model/AlignText';
-
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Description } from '../../ui-kit/Description/Description';
@@ -12,9 +11,9 @@ export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
   ({
+    className = '',
     bgColorHeadline = 'transparent',
     align = 'center',
-    className = '',
     title,
     description,
     headlineVersion = 'XL',