@redneckz/wildless-cms-uni-blocks 0.6.50 → 0.7.2

package/src/components/Header/DropdownMenu.tsx

@@ -2,64 +2,58 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
-import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 
-const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'bg-primary-text',
-  transparent: 'bg-white',
-};
-
 interface DropdownMenuProps {
   className?: string;
   items: LinkProps[];
   activeItem?: LinkProps;
-  bgColor?: BgColorVersion;
 }
 
-export const DropdownMenu = JSX<DropdownMenuProps>(
-  ({ className = '', items, activeItem, bgColor }) => {
-    const link = useLink();
+export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, activeItem }) => {
+  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 (
-      <div
-        className={`${visible ? 'bg-white rounded-md shadow-blue-gray' : ''} ${className}`}
-        ref={ref}
+  return (
+    <div
+      className={`${visible ? 'bg-white rounded-md shadow-blue-gray' : ''} ${className}`}
+      ref={ref}
+    >
+      <button
+        className="group/btn flex justify-between items-center h-6 ml-6"
+        aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
+        onClick={handleToggle}
       >
-        <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' : ''
-              }`}
-              {...link(item)}
-            >
-              {item.text}
-            </a>
+        {Array(3)
+          .fill(null)
+          .map((_, i) => (
+            <div
+              key={String(i)}
+              className="w-[3px] h-[3px] rounded mr-1 bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white"
+            />
           ))}
-        </div>
+      </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' : ''
+            }`}
+            {...link(item)}
+          >
+            {item.text}
+          </a>
+        ))}
       </div>
-    );
-  },
-);
-
-const renderDot = (bgColor: BgColorVersion, i: number) => (
-  <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />
-);
+    </div>
+  );
+});

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

@@ -1,6 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useRouter } from '../../hooks/useRouter';
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { projectSettings } from '../../ProjectSettings';
@@ -8,6 +10,7 @@ import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import type { SitemapDataProps } from '../../services/sitemap/SitemapProps';
 import { useSWRResource } from '../../services/sitemap/useSWRResource';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import { AccordionItemsList } from '../Accordion/AccordionItemsList';
 import { AccordionItem } from '../AccordionItem/AccordionItem';
@@ -18,54 +21,60 @@ import { HeaderTop } from './HeaderTop';
 
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
-export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white', ...rest }) => {
-  const router = useRouter();
+const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
+  'bg-white': 'primary',
+  transparent: 'transparent',
+};
 
-  const fallback: Fallback | undefined = rest.options?.page?.fallback;
-  const { topItems, dispositions, defaultLocation, logo } = useSWRResource<SitemapDataProps>(
-    projectSettings.SITEMAP || 'sitemap',
-    fallback,
-  );
+export const Header = JSX<HeaderProps>(
+  ({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
+    const router = useRouter();
 
-  const activeTopItem = topItems?.find(isTopItemActive(router));
-  const subItems = activeTopItem?.items;
-  const activeSubItem = findActiveSubItem(router)(subItems);
-  const [burgerMenuShow, setBurgerMenuShow] = useState(false);
-  const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
+    const fallback: Fallback | undefined = rest.options?.page?.fallback;
+    const { topItems, dispositions, defaultLocation, logo } = useSWRResource<SitemapDataProps>(
+      projectSettings.SITEMAP || 'sitemap',
+      fallback,
+    );
 
-  return (
-    <header className={`${bgColor} ${className}`}>
-      <div className="container px-4 py-0 box-border">
-        <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} logo={logo} />
-        <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-12">
-          <div className="flex no-scrollbar horizontal-list h-full items-center">
-            {subItems?.map((_, i) => (
-              <HeaderItem
-                key={String(i)}
-                className="mr-8 whitespace-nowrap text-s"
-                active={_ === activeSubItem}
-                bgColor={bgColor}
-                {..._}
-              />
-            ))}
-          </div>
-        </nav>
-      </div>
-      {burgerMenuShow ? (
-        <HeaderBurger
-          onClick={handleBurgerMenuShow}
-          burgerSubMenu={dispositions}
-          defaultLocation={defaultLocation}
-        >
-          <AccordionItemsList>
-            {topItems?.map((item, i) => (
-              <AccordionItem key={String(i)} label={item.text}>
-                <LinkList documents={item.items} />
-              </AccordionItem>
-            ))}
-          </AccordionItemsList>
-        </HeaderBurger>
-      ) : null}
-    </header>
-  );
-});
+    const activeTopItem = topItems?.find(isTopItemActive(router));
+    const subItems = activeTopItem?.items;
+    const activeSubItem = findActiveSubItem(router)(subItems);
+    const [burgerMenuShow, setBurgerMenuShow] = useState(false);
+    const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
+
+    return (
+      <BlockWrapper tag="header" version={version} {...rest}>
+        <div className="container px-4 py-0 box-border">
+          <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} logo={logo} />
+          <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-12">
+            <div className="flex no-scrollbar horizontal-list h-full items-center">
+              {subItems?.map((_, i) => (
+                <HeaderItem
+                  key={String(i)}
+                  className="mr-8 whitespace-nowrap text-s"
+                  active={_ === activeSubItem}
+                  {..._}
+                />
+              ))}
+            </div>
+          </nav>
+        </div>
+        {burgerMenuShow ? (
+          <HeaderBurger
+            onClick={handleBurgerMenuShow}
+            burgerSubMenu={dispositions}
+            defaultLocation={defaultLocation}
+          >
+            <AccordionItemsList>
+              {topItems?.map((item, i) => (
+                <AccordionItem key={String(i)} label={item.text}>
+                  <LinkList documents={item.items} />
+                </AccordionItem>
+              ))}
+            </AccordionItemsList>
+          </HeaderBurger>
+        ) : null}
+      </BlockWrapper>
+    );
+  },
+);

package/src/components/Header/Header.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useRouter } from '../../hooks/useRouter';
 import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { projectSettings } from '../../ProjectSettings';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
@@ -13,15 +14,21 @@ import type { HeaderContent } from './HeaderContent';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
 import { HeaderSubMenu } from './HeaderSubMenu';
 
-const BORDER_COLORS: Record<BgColorVersion, string> = {
-  'bg-white': 'bg-main-divider',
-  transparent: 'bg-main-divider opacity-30',
-};
-
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
+const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
+  'bg-white': 'primary',
+  transparent: 'transparent',
+};
+
 export const Header = JSX<HeaderProps>(
-  ({ bgColor = 'bg-white', className = '', showSubMenu = true, ...rest }) => {
+  ({
+    bgColor = 'bg-white',
+    className = '',
+    showSubMenu = true,
+    version = BG_COLOR_TO_BLOCK_VERSION[bgColor],
+    ...rest
+  }) => {
     const router = useRouter();
 
     const { topItems, logo, defaultLocation, foreignOffices, officesLink } =
@@ -33,21 +40,16 @@ export const Header = JSX<HeaderProps>(
     const activeTopItem = topItems?.find(isTopItemActive(router));
 
     const topMenu = topItems?.map((_, i) => (
-      <TopItem
-        key={String(i)}
-        active={_ === activeTopItem}
-        aria-label={_.text}
-        bgColor={bgColor}
-        {..._}
-      />
+      <TopItem key={String(i)} active={_ === activeTopItem} aria-label={_.text} {..._} />
     ));
 
     return (
       <BlockWrapper
         tag="header"
-        className={`pt-6 px-20 ${bgColor} ${className} ${
+        className={`pt-6 px-20 ${className} ${
           showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'
         }`}
+        version={version}
         {...rest}
       >
         <div className="container">
@@ -55,16 +57,18 @@ export const Header = JSX<HeaderProps>(
             <Logo className="mr-8" bgColor={bgColor} logo={logo} />
             {topMenu}
             <HeaderSecondaryMenu
+              version={version}
               className="ml-auto"
               foreignOffices={foreignOffices}
               defaultLocation={defaultLocation}
               officesLink={officesLink}
-              bgColor={bgColor}
             />
           </div>
-          <div className={`mt-6 h-px ${BORDER_COLORS[bgColor]}`} />
+          <div
+            className={`mt-6 h-px bg-main-divider${version === 'transparent' ? ' opacity-30' : ''}`}
+          />
           {showSubMenu && activeTopItem?.items?.length ? (
-            <HeaderSubMenu subItems={activeTopItem.items} bgColor={bgColor} />
+            <HeaderSubMenu subItems={activeTopItem.items} />
           ) : null}
         </div>
       </BlockWrapper>

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLocation } from '../../hooks/useLocation';
-import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
 import type { ForeignOffice } from '../../services/sitemap/SitemapProps';
 import { Img } from '../../ui-kit/Img/Img';
@@ -10,9 +10,9 @@ import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
 interface HeaderSecondaryMenuContent {
+  version?: BlockVersion;
   defaultLocation?: string;
   officesLink?: string;
-  bgColor?: BgColorVersion;
   foreignOffices?: ForeignOffice[];
 }
 
@@ -20,37 +20,20 @@ export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
   className?: string;
 }
 
-const COLORS_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'text-primary-text hover:text-primary-main',
-  transparent: 'text-white',
-};
-const LINKS_COLORS_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'text-secondary-light hover:text-secondary-hover',
-  transparent: 'text-white',
-};
-const LINKS_ICON_VERSION_MAP: Record<BgColorVersion, IconVersion> = {
-  'bg-white': 'black',
-  transparent: 'white',
-};
-
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({
-    className,
-    officesLink,
-    defaultLocation = 'Москва',
-    foreignOffices,
-    bgColor = 'bg-white',
-  }) => {
+  ({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices }) => {
     const [isShowLocationModal, setShowLocationModal] = useState<boolean>(false);
 
     const [location, onChangeLocation] = useLocation(defaultLocation);
 
-    const showLocationModal = () => {
+    const showLocationModal = useCallback(() => {
       setShowLocationModal(true);
-    };
-    const hideLocationModal = () => {
+    }, []);
+    const hideLocationModal = useCallback(() => {
       setShowLocationModal(false);
-    };
+    }, []);
+
+    const iconVersion: IconVersion = version === 'transparent' ? 'white' : 'black';
 
     return (
       <div className={`flex items-center ${className || ''}`}>
@@ -61,7 +44,6 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           text={location.name}
           ariaLabel="Местоположение"
           onClick={showLocationModal}
-          bgColor={bgColor}
         />
         {officesLink ? (
           <TopItem
@@ -70,28 +52,27 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
             href={officesLink}
             text="Офисы и банкоматы"
             ariaLabel="Список всех доступных офисов и банкоматов"
-            bgColor={bgColor}
           />
         ) : null}
         <HeaderSecondaryMenuButton
-          className={`mr-5 group ${COLORS_MAP[bgColor]}`}
+          className="mr-5 group/btn text-primary-text hover:text-primary-main group-data-transparent:text-white"
           ariaLabel="Поиск по сайту"
         >
           <Img
-            image={{ icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }}
+            image={{ icon: 'LoupeIcon', iconVersion }}
             className="h-full pointer-events-none"
-            imageClassName="group-hover:text-primary-hover group-hover:invert-0 pointer-events-none"
+            imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0 pointer-events-none"
             asSVG
           />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
-          className={`${LINKS_COLORS_MAP[bgColor]} group min-w-8 min-h-8`}
+          className="group/btn min-w-8 min-h-8 text-secondary-light hover:text-secondary-hover group-data-transparent:text-white"
           ariaLabel="Дополнительные ссылки"
         >
           <Img
-            image={{ icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }}
+            image={{ icon: 'GridIcon', iconVersion }}
             className="h-full bg-main-divider/20 rounded-full pointer-events-none"
-            imageClassName="group-hover:text-primary-hover group-hover:invert-0"
+            imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
             asSVG
           />
         </HeaderSecondaryMenuButton>

package/src/components/Header/HeaderSubMenu.tsx

@@ -2,7 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
 import { useRouter } from '../../hooks/useRouter';
-import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { DropdownMenu } from './DropdownMenu';
@@ -10,10 +9,9 @@ import { HeaderSubMenuItem } from './HeaderSubMenuItem';
 
 export interface HeaderSubMenuProps {
   subItems?: LinkProps[];
-  bgColor?: BgColorVersion;
 }
 
-export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [], bgColor }) => {
+export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [] }) => {
   const router = useRouter();
 
   const activeSubItem = findActiveSubItem(router)(subItems);
@@ -44,7 +42,6 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [], bgColor }
             key={String(i)}
             className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
             active={_ === activeSubItem}
-            bgColor={bgColor}
             observerOptions={observerOptions}
             onVisibilityChange={subItemsVisibilityHandlers[i]}
             {..._}
@@ -56,7 +53,6 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [], bgColor }
           className="absolute w-52 -top-4 right-0 pt-4 z-40"
           items={dropDownMenuItems}
           activeItem={activeSubItem}
-          bgColor={bgColor}
         />
       ) : null}
     </nav>

package/src/components/Header/HeaderSubMenuItem.tsx

@@ -4,20 +4,18 @@ import {
   useIntersectionObserver,
   type IntersectionObserverOptions,
 } from '../../hooks/useIntersectionObserver';
-import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 
 export interface HeaderSubMenuItemProps extends LinkProps {
   className?: string;
   active?: boolean;
-  bgColor?: BgColorVersion;
   observerOptions?: IntersectionObserverOptions;
   onVisibilityChange?: (isIntersecting: boolean) => void;
 }
 
 export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
-  ({ className, active, bgColor, observerOptions, onVisibilityChange, children, ...linkProps }) => {
+  ({ className, active, observerOptions, onVisibilityChange, children, ...linkProps }) => {
     const observerCallback = useCallback(
       (entries: IntersectionObserverEntry[]) => {
         if (!entries.length || !onVisibilityChange) {
@@ -35,7 +33,7 @@ export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
 
     return (
       <span ref={ref}>
-        <HeaderItem className={className} active={active} bgColor={bgColor} {...linkProps}>
+        <HeaderItem className={className} active={active} {...linkProps}>
           {children}
         </HeaderItem>
       </span>

package/src/components/Header/HeaderTop.tsx

@@ -9,6 +9,7 @@ export interface HeaderTopProps {
   bgColor?: BgColorVersion;
   logo?: LogoType;
 }
+
 export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor, logo }) => (
   <div className="flex items-center justify-between border-0 border-b border-main-divider h-12">
     <div className="flex items-center">
@@ -27,11 +28,7 @@ export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor, logo }) => (
       </button>
       <Logo className="mr-8" bgColor={bgColor} logo={logo} />
     </div>
-    <button
-      className={`${
-        bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'
-      } text-s border-0 bg-transparent cursor-pointer`}
-    >
+    <button className="text-primary-main group-data-transparent:text-white group-data-transparent:hover:text-primary-hover text-s border-0 bg-transparent">
       Войти
     </button>
   </div>

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

@@ -1,3 +1,4 @@
+import type { FC } from 'react';
 import '../../setup-fixture';
 
 import { Headline } from './Headline';
@@ -9,85 +10,81 @@ export const HEADLINE: HeadlineContent = {
   align: 'text-center',
 };
 
-export const HEADLINE_PRIMARY: HeadlineContent = {
-  ...HEADLINE,
-  bgColorHeadline: 'primary',
-};
-
-export const HEADLINE_SECONDARY: HeadlineContent = {
-  ...HEADLINE,
-  bgColorHeadline: 'secondary',
-};
+const Wrapper: FC = ({ children }) => (
+  <div className="container grid grid-cols-12 group" data-ver="primary">
+    {children}
+  </div>
+);
 
 export default {
   default: (
-    <div className="container grid grid-cols-12">
+    <Wrapper>
       <Headline className="col-span-12" {...HEADLINE} />
-    </div>
+    </Wrapper>
   ),
   'default left alignment': (
-    <div className="container grid grid-cols-12">
+    <Wrapper>
       <Headline className="col-span-12" {...HEADLINE} align="text-left" />
-    </div>
+    </Wrapper>
   ),
   'default right alignment': (
-    <div className="container grid grid-cols-12">
+    <Wrapper>
       <Headline className="col-span-12" {...HEADLINE} align="text-right" />
-    </div>
+    </Wrapper>
   ),
   'default difficult XXL': (
-    <div className="container grid grid-cols-12">
+    <Wrapper>
       <Headline className="col-span-12" {...HEADLINE} headlineVersion="XXL" />
-    </div>
+    </Wrapper>
   ),
   'default difficult XL': (
-    <div className="container grid grid-cols-12">
+    <Wrapper>
       <Headline className="col-span-12" {...HEADLINE} headlineVersion="XL" />
-    </div>
+    </Wrapper>
   ),
   'default difficult L': (
-    <div className="container grid grid-cols-12">
+    <Wrapper>
       <Headline className="col-span-12" {...HEADLINE} headlineVersion="L" />
-    </div>
+    </Wrapper>
   ),
   'default difficult M': (
-    <div className="container grid grid-cols-12">
+    <Wrapper>
       <Headline className="col-span-12" {...HEADLINE} headlineVersion="M" />
-    </div>
+    </Wrapper>
   ),
   'default difficult S': (
-    <div className="container grid grid-cols-12">
+    <Wrapper>
       <Headline className="col-span-12" {...HEADLINE} headlineVersion="S" />
-    </div>
+    </Wrapper>
   ),
   'primary left alignment': (
-    <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_PRIMARY} align="text-left" />
-    </div>
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} align="text-left" />
+    </Wrapper>
   ),
   'primary center alignment': (
-    <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_PRIMARY} />
-    </div>
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} />
+    </Wrapper>
   ),
   'primary right alignment': (
-    <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_PRIMARY} align="text-right" />
-    </div>
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} align="text-right" />
+    </Wrapper>
   ),
   'secondary left alignment': (
-    <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_SECONDARY} align="text-left" />
-    </div>
+    <Wrapper>
+      <Headline className="col-span-12" version="secondary" {...HEADLINE} align="text-left" />
+    </Wrapper>
   ),
   'secondary center alignment': (
-    <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_SECONDARY} />
-    </div>
+    <Wrapper>
+      <Headline className="col-span-12" version="secondary" {...HEADLINE} />
+    </Wrapper>
   ),
   'secondary right alignment': (
-    <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_SECONDARY} align="text-right" />
-    </div>
+    <Wrapper>
+      <Headline className="col-span-12" version="secondary" {...HEADLINE} align="text-right" />
+    </Wrapper>
   ),
 };