Clone as seperate organism

src/components/Organisms/Header2024/Burger/BurgerMenu.js

@@ -0,0 +1,28 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { BurgerBar, BurgerHiddenText, BurgerWrapper } from './BurgerMenu.style';
+
+const BurgerMenu = ({ toggle, isExpandable }) => (
+  <BurgerWrapper
+    href="#"
+    role="button"
+    aria-haspopup="true"
+    aria-label="Open and close Navigation Menu"
+    inline
+    underline={false}
+    onClick={toggle}
+    isExpandable={isExpandable}
+  >
+    <BurgerHiddenText>Open and close nav menu</BurgerHiddenText>
+    <BurgerBar />
+  </BurgerWrapper>
+);
+
+BurgerMenu.propTypes = {
+  toggle: PropTypes.func.isRequired,
+  isExpandable: PropTypes.bool.isRequired
+};
+
+export default BurgerMenu;

src/components/Organisms/Header2024/Burger/BurgerMenu.style.js

@@ -0,0 +1,100 @@
+import styled from 'styled-components';
+
+import hideVisually from '../../../../theme/shared/hideVisually';
+import Link from '../../../Atoms/Link/Link';
+import Text from '../../../Atoms/Text/Text';
+import zIndex from '../../../../theme/shared/zIndex';
+
+/**
+ * Burger hidden text
+ */
+const BurgerHiddenText = styled(Text)`
+  ${hideVisually};
+`;
+
+/**
+ * Burger menu bar
+ */
+
+const BurgerBar = styled.span`
+  background-color: ${({ theme }) => theme.color('deep_violet_dark')};
+  margin: 0 auto;
+`;
+
+/**
+ * Burger wrapper
+ */
+const BurgerWrapper = styled(Link)`
+  ${zIndex('medium')};
+  order: 50;
+  display: flex;
+  align-items: center;
+  position: relative;
+  text-indent: -9999px;
+  background-color: transparent;
+  height: 100%;
+  width: 45px;
+  left: 5px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  :hover {
+    border: none;
+    font-weight: inherit;
+  }
+  ${BurgerBar} {
+    position: relative;
+
+    &,
+    ::before,
+    ::after {
+      width: 25px;
+      height: 3px;
+      border-radius: 3px;
+      display: inline-block;
+    }
+
+    ${({ isExpandable }) => isExpandable && ' background-color: transparent'};
+
+    ::before,
+    ::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      background-color: currentColor;
+      transition: all 0.2s;
+    }
+
+    ::before {
+      top: -0.5rem;
+      ${({ isExpandable }) => isExpandable && ' transform:rotate(135deg); top: 0;'};
+    }
+
+    ::after {
+      top: 0.5rem;
+      ${({ isExpandable }) => isExpandable && ' transform:rotate(-135deg); top: 0;'};
+    }
+  }
+
+  :hover ${BurgerBar} {
+    &,
+    ::before,
+    ::after {
+      background-color: ${({ theme, isExpandable }) => !isExpandable && theme.color('grey')};
+    }
+
+    ::before {
+      ${({ isExpandable }) => !isExpandable && 'top: -0.6rem;'};
+    }
+
+    ::after {
+      ${({ isExpandable }) => !isExpandable && 'top: 0.6rem;'};
+    }
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    display: none;
+  }
+`;
+
+export { BurgerHiddenText, BurgerWrapper, BurgerBar };

src/components/Organisms/Header2024/Header2024.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Logos from '../../Molecules/Logos/Logos';
+import HeaderNav from './HeaderNav2024/HeaderNav2024';
+import {
+  Brand, Header2024Wrapper, InnerWrapper,
+  DonateButtonWrapperTop, Header2024MetaIcons, ButtonsAndIcons
+} from './Header2024.style';
+
+const Header2024 = ({
+  navItems = {}, metaIcons, campaign = 'Comic Relief', donateButton = null, ...rest
+}) => (
+  <Header2024Wrapper navItems {...rest}>
+    <InnerWrapper>
+      <Brand>
+        <Logos campaign={campaign} sizeSm="100px" sizeMd="100px" />
+      </Brand>
+      <HeaderNav navItems={navItems} metaIcons={metaIcons} donateButton={donateButton} />
+      <ButtonsAndIcons>
+        <Header2024MetaIcons isHeader data-testid="meta-icons--desktop">{metaIcons}</Header2024MetaIcons>
+        <DonateButtonWrapperTop data-testid="donate-button--desktop">{donateButton}</DonateButtonWrapperTop>
+      </ButtonsAndIcons>
+
+    </InnerWrapper>
+  </Header2024Wrapper>
+);
+
+Header2024.propTypes = {
+  // Check data structure example in src/components/moleculecules/header/data/data
+  navItems: PropTypes.objectOf(PropTypes.shape),
+  // NB: metaIcons no longer include the Donate button:
+  metaIcons: PropTypes.node.isRequired,
+  // ... and is supplied separately to allow more render control:
+  donateButton: PropTypes.node,
+  campaign: PropTypes.string
+};
+
+export default Header2024;