refactor: add className prop to header components

Author: ChristiaanScheermeijer

packages/ui-react/src/components/Header/Header.tsx

@@ -7,11 +7,12 @@ type TypeHeader = 'static' | 'fixed';
 
 type Props = {
   headerType?: TypeHeader;
+  className?: string;
   searchActive: boolean;
 };
 
-const Header = ({ children, headerType = 'static', searchActive }: PropsWithChildren<Props>) => {
-  const headerClassName = classNames(styles.header, styles[headerType], {
+const Header = ({ children, className, headerType = 'static', searchActive }: PropsWithChildren<Props>) => {
+  const headerClassName = classNames(styles.header, styles[headerType], className, {
     [styles.searchActive]: searchActive,
   });
 

packages/ui-react/src/components/Header/HeaderActions.tsx

@@ -1,9 +1,10 @@
 import React, { type PropsWithChildren } from 'react';
+import classNames from 'classnames';
 
 import styles from './Header.module.scss';
 
-const HeaderActions = ({ children }: PropsWithChildren) => {
-  return <div className={styles.actions}>{children}</div>;
+const HeaderActions = ({ children, className }: PropsWithChildren<{ className?: string }>) => {
+  return <div className={classNames(styles.actions, className)}>{children}</div>;
 };
 
 export default HeaderActions;

packages/ui-react/src/components/Header/HeaderBrand.tsx

@@ -1,23 +1,25 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
 
 import Logo from '../Logo/Logo';
 
 import styles from './Header.module.scss';
 
 type Props = {
+  className?: string;
   siteName?: string;
   logoSrc?: string | null;
   setLogoLoaded: (loaded: boolean) => void;
 };
 
-const HeaderBrand = ({ siteName, logoSrc, setLogoLoaded }: Props) => {
+const HeaderBrand = ({ className, siteName, logoSrc, setLogoLoaded }: Props) => {
   const { t } = useTranslation('menu');
 
   if (!logoSrc) return null;
 
   return (
-    <div className={styles.brand}>
+    <div className={classNames(styles.brand, className)}>
       <Logo alt={t('logo_alt', { siteName })} src={logoSrc} onLoad={() => setLogoLoaded(true)} />
     </div>
   );

packages/ui-react/src/components/Header/HeaderMenu.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import Menu from '@jwp/ott-theme/assets/icons/menu.svg?react';
 
@@ -7,11 +8,17 @@ import IconButton from '../IconButton/IconButton';
 
 import styles from './Header.module.scss';
 
-const HeaderMenu = ({ sideBarOpen, onClick }: { sideBarOpen: boolean; onClick: () => void }) => {
+type Props = {
+  className?: string;
+  sideBarOpen: boolean;
+  onClick: () => void;
+};
+
+const HeaderMenu = ({ className, sideBarOpen, onClick }: Props) => {
   const { t } = useTranslation('menu');
 
   return (
-    <div className={styles.menu}>
+    <div className={classNames(styles.menu, className)}>
       <IconButton className={styles.iconButton} aria-label={t('open_menu')} aria-expanded={sideBarOpen} onClick={onClick}>
         <Icon icon={Menu} />
       </IconButton>

packages/ui-react/src/components/Header/HeaderNavigation.tsx

@@ -1,4 +1,5 @@
 import React, { useRef } from 'react';
+import classNames from 'classnames';
 
 import Button from '../Button/Button';
 
@@ -11,7 +12,7 @@ type NavItem = {
 
 const scrollOffset = 100;
 
-const HeaderNavigation = ({ navItems }: { navItems: NavItem[] }) => {
+const HeaderNavigation = ({ className, navItems }: { className?: string; navItems: NavItem[] }) => {
   const navRef = useRef<HTMLElement>(null);
 
   const focusHandler = (event: React.FocusEvent) => {
@@ -30,7 +31,7 @@ const HeaderNavigation = ({ navItems }: { navItems: NavItem[] }) => {
   };
 
   return (
-    <nav className={styles.nav} ref={navRef}>
+    <nav className={classNames(styles.nav, className)} ref={navRef}>
       <ul onFocus={focusHandler}>
         {navItems.map((item, index) => (
           <li key={index}>

packages/ui-react/src/components/Header/HeaderSkipLink.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
 import styles from './Header.module.scss';
 
-const HeaderSkipLink = () => {
+const HeaderSkipLink = ({ className }: { className?: string }) => {
   const { t } = useTranslation('menu');
   return (
-    <a href="#content" className={styles.skipToContent}>
+    <a href="#content" className={classNames(styles.skipToContent, className)}>
       {t('skip_to_content')}
     </a>
   );