If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.`}
+ />
+);
+const successCopy = (
+ Thanks! Your first email will be with you shortly`}
+ />
+);
+
+initialState = { isSuccess: false };
+const [success, setSuccess] = React.useState(false);
+
+<>
+
+
+ Donate
+
+
+ }
+ metaIcons={
+ <>
+
+
+
+
+
+
+
}
-/>;
+/>
+
+
+
+;
```
diff --git a/src/components/Organisms/Header/Header.style.js b/src/components/Organisms/Header/Header.style.js
index eb818e65d..f9005d183 100644
--- a/src/components/Organisms/Header/Header.style.js
+++ b/src/components/Organisms/Header/Header.style.js
@@ -4,6 +4,8 @@ import zIndex from '../../../theme/shared/zIndex';
import containers from '../../../theme/shared/containers';
import spacing from '../../../theme/shared/spacing';
+import './annoying.css';
+
const HeaderWrapper = styled.header.attrs(() => ({
role: 'banner'
}))`
@@ -47,32 +49,57 @@ const Brand = styled.div`
border: 0;
}
}
+
+ @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+ margin-right: 0
+ }
`;
-const MetaIcons = styled.div`
- width: auto;
+const DonateButtonWrapperTop = styled.div`
+ width: 120px;
display: flex;
- align-items: center;
+ justify-content: center;
- > div {
- height: 35px;
- width: auto;
- display: inline-block;
+ // Donate button
+ a {
+ width: 90%;
+ transition: width 0.4s cubic-bezier(0.5, 1.5, 0.5, 0.80);
+
+ &:hover,
+ &:focus {
+ width: 100%;
+ box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px 0;
+ }
+ }
+`;
+
+const HeaderMetaIcons = styled.div`
+ // Hide these when using the mobile navigation,
+ // now only rendered in the HeaderNav
+ display: none;
- > a {
- height: inherit;
- width: inherit;
- margin-left: 0.5rem;
+ @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+ width: auto;
+ align-items: center;
- img {
- padding: 5px;
+ > div {
+ height: 35px;
+ width: auto;
+ display: inline-block;
+
+ > a {
height: inherit;
width: inherit;
+ margin-right: 20px;
+
+ img {
+ padding: 5px;
+ height: inherit;
+ width: inherit;
+ }
}
}
- }
- @media ${({ theme }) => theme.allBreakpoints('Nav')} {
position: relative;
display: flex;
align-items: center;
@@ -82,6 +109,12 @@ const MetaIcons = styled.div`
}
`;
+const ButtonsAndIcons = styled.div`
+ margin-left: auto;
+ display: flex;
+ //
+`;
+
export {
- Brand, HeaderWrapper, InnerWrapper, MetaIcons
+ Brand, HeaderWrapper, InnerWrapper, DonateButtonWrapperTop, HeaderMetaIcons, ButtonsAndIcons
};
diff --git a/src/components/Organisms/Header/HeaderNav/HeaderNav.js b/src/components/Organisms/Header/HeaderNav/HeaderNav.js
new file mode 100644
index 000000000..93ea4285c
--- /dev/null
+++ b/src/components/Organisms/Header/HeaderNav/HeaderNav.js
@@ -0,0 +1,353 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+
+import Text from '../../../Atoms/Text/Text';
+import BurgerMenu from '../Burger/BurgerMenu';
+import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
+import { NavHelper, MoreNavPreProcess } from '../../../../utils/navHelper';
+import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
+import allowListed from '../../../../utils/allowListed';
+import menuGroupIcon from './Menu-Group-Icon.svg';
+
+import {
+ Nav,
+ NavMenu,
+ NavItem,
+ NavLink,
+ SubNavMenu,
+ SubNavItem,
+ SubNavLink,
+ ChevronWrapper,
+ NavMetaIcons,
+ // More Nav stuff:
+ MoreNavLink,
+ MoreSubNavMenu,
+ MoreNavItem,
+ MoreNestedSubNavMenu,
+ MoreSubNavItem,
+ MoreNavNestedLink,
+ MoreSubNavLink,
+ DonateButtonWrapperBottom
+} from './HeaderNav.style';
+
+const HeaderNav = ({
+ navItems, metaIcons, donateButton, characterLimit
+}) => {
+ const { menuGroups } = navItems;
+ const [isExpandable, setIsExpandable] = useState(false);
+ const [isSubMenuOpen, setIsSubMenuOpen] = useState({});
+ const [isTabFocussed, setIsTabFocussed] = useState({});
+ const [isNotDesktop, setIsNotDesktop] = useState(null);
+ const [processedItems, setProcessedItems] = useState(null);
+ let theseGroups = null;
+
+ const toggleBurgerMenu = event => {
+ event.preventDefault();
+ setIsExpandable(!isExpandable);
+ };
+
+ const toggleSubMenu = (e, item) => {
+ e.preventDefault();
+ setIsSubMenuOpen({ [item]: !isSubMenuOpen[item] });
+ };
+
+ // Handle tab key on menu nav
+ const keyPressed = item => () => {
+ window.onkeyup = e => {
+ // Specifies the tab key:
+ if (e.which === 9) {
+ // If the currently tabbed-to element is our item, do something
+ if (e.target.querySelector('span') && e.target.querySelector('span').innerText === item) {
+ setIsTabFocussed({ [item]: !isTabFocussed[item] });
+ } else if (!e.target.querySelector('span')) {
+ setIsTabFocussed({});
+ }
+ }
+ };
+ };
+
+ useEffect(() => {
+ // Divide up our nav on initial mount:
+ setProcessedItems(MoreNavPreProcess(menuGroups, characterLimit));
+
+ // Set desktopFlag on
+ setIsNotDesktop(window.innerWidth < breakpointValues.Nav);
+
+ return () => {
+ window.removeEventListener('onkeyup', setIsTabFocussed);
+ };
+ }, [menuGroups, characterLimit]);
+
+ // Custom function to let us update the nav dynamically:
+ const screenResizeNav = useCallback(() => {
+ const screenSize = typeof window !== 'undefined' ? window.innerWidth : null;
+ const isCurrentlyNotDesktop = window.innerWidth < breakpointValues.Nav;
+
+ if (screenSize !== null && (isNotDesktop !== isCurrentlyNotDesktop)) {
+ setIsNotDesktop(isCurrentlyNotDesktop);
+ }
+ }, [isNotDesktop]);
+
+ useEffect(() => {
+ // Hook into browser's own onresize event to call our custom wrapper function:
+ if (typeof window !== 'undefined') window.onresize = screenResizeNav;
+ }, [screenResizeNav]);
+
+ // Once we've processed the items, assign according to breakpoint; sub desktop 'Nav'
+ // breakpoints use 'raw' unprocessed menu groups, Desktop uses the divided up versions:
+ if (processedItems) theseGroups = isNotDesktop ? menuGroups : processedItems.standardGroups;
+
+ return (
+ <>
+
+
+ Open
+
+
+ );
+};
+
+HeaderNav.propTypes = {
+ navItems: PropTypes.objectOf(PropTypes.shape),
+ metaIcons: PropTypes.node.isRequired,
+ characterLimit: PropTypes.number,
+ // As this is rendered in both the Header AND the Nav, just passing
+ // the same prop through to here:
+ donateButton: PropTypes.node
+};
+
+HeaderNav.defaultProps = {
+ navItems: {},
+ // To be overridable as a CMS prop
+ characterLimit: 60,
+ donateButton: null
+};
+
+export default HeaderNav;
diff --git a/src/components/Organisms/Header/HeaderNav/HeaderNav.style.js b/src/components/Organisms/Header/HeaderNav/HeaderNav.style.js
new file mode 100644
index 000000000..64e76475d
--- /dev/null
+++ b/src/components/Organisms/Header/HeaderNav/HeaderNav.style.js
@@ -0,0 +1,505 @@
+/* eslint-disable no-multiple-empty-lines */
+import styled, { css } from 'styled-components';
+
+import Link from '../../../Atoms/Link/Link';
+import hideVisually from '../../../../theme/shared/hideVisually';
+import zIndex from '../../../../theme/shared/zIndex';
+import Arrow from './arrow-right.png';
+
+const transitionDuration = 0.2;
+
+const NavLinkClass = styled(Link)`
+ display: inline-block;
+ border: 0;
+ padding: 25px;
+ line-height: 1rem;
+ height: auto;
+ font-weight: 700;
+ width: 100%;
+ color: ${({ theme }) => theme.color('black')};
+ transition: color ${transitionDuration}s ease;
+
+ :hover,
+ :focus,
+ :focus-within {
+ border: 0;
+ color: ${({ theme }) => theme.color('red')};
+ font-weight: inherit;
+ }
+`;
+
+/**
+ * Navigation menu
+ */
+const Nav = styled.nav`
+ display: ${({ isExpandable }) => (isExpandable ? 'block' : 'none')};
+ width: 100%;
+ position: absolute;
+ top: 75px;
+ left: 0;
+ ${zIndex('higher')};
+ background-color: ${({ theme }) => theme.color('white')};
+ box-shadow: 0px 20px 20px 5px rgba(0, 0, 0, 0.25);
+
+ @media ${({ theme }) => theme.allBreakpoints('M')} {
+ width: 50%;
+ right: 0;
+ left: inherit;
+ box-shadow: -20px 15px 20px 0px rgba(0, 0, 0, 0.25);
+ }
+
+ @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+ ${zIndex('medium')};
+ position: relative;
+ top: 0;
+ display: block;
+ margin: 0 10px;
+ width: auto;
+ height: 100%;
+ box-shadow: none;
+ }
+ > h2 {
+ ${hideVisually};
+ }
+`;
+
+/**
+ * Sub Navigation Menu (second level)
+ */
+const SubNavMenu = styled.ul`
+ visibility: ${({ isSubMenuOpen }) => (isSubMenuOpen ? 'visible' : 'hidden')};
+ display: ${({ isSubMenuOpen }) => (isSubMenuOpen ? 'flex' : 'none')};
+ padding: 0;
+ position: relative;
+ list-style: none outside;
+ left: 0;
+ top: 0;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: ${({ theme }) => theme.color('white')};
+ overflow: hidden;
+ border: 1px solid ${({ theme }) => theme.color('grey_medium')};
+
+ // DESKTOP:
+ @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+ display: flex;
+ visibility: ${({ isFocussed }) => (isFocussed ? 'visible' : 'hidden')};
+ width: 330px;
+ height: auto;
+ padding: 0;
+ position: absolute;
+ top: 88px;
+ left: -5px;
+ border-radius: 0 0 25px 25px;
+ transition: opacity ${transitionDuration}s ease;
+ opacity: 0;
+ box-shadow: 0px 20px 20px 5px rgba(0, 0, 0, 0.25);
+ }
+`;
+
+/**
+ * Sub Menu list items
+ */
+const SubNavItem = styled.li`
+ padding: 0;
+ height: 100%;
+ width: 100%;
+ border-top: 1px solid ${({ theme }) => theme.color('grey_medium')};;
+ position: relative;
+ transition: background-color ${transitionDuration}s ease;
+
+ &:first-of-type {
+ border-top: none;
+ }
+
+ span {
+ font-weight: 100;
+ }
+
+ :hover,
+ :focus,
+ :focus-within {
+ background-color: ${({ theme }) => theme.color('grey_extra_light')};
+ + span {
+ border-bottom: 0;
+ padding-bottom: 2px;
+ color: ${({ theme }) => theme.color('red')};
+ }
+ }
+`;
+
+/**
+ * Sub menu link item
+ */
+const SubNavLink = styled(NavLinkClass)`
+ padding: 20px 25px 18px 40px;
+ color: ${({ theme }) => theme.color('black')};
+ height: auto;
+ position: relative;
+`;
+
+/**
+ * Navigation Menu (first level)
+ */
+const NavMenu = styled.ul`
+ background-color: ${({ theme }) => theme.color('white')};
+ list-style: none outside;
+ padding: 0;
+ margin: 0;
+
+ @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+ position: relative;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: flex-start;
+ background-color: ${({ theme }) => theme.color('white')};
+ }
+`;
+
+/**
+ * Menu item link
+ */
+const NavLink = styled(NavLinkClass)`
+ display: flex;
+ gap: 4px;
+ font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
+ @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+ padding: 10px 0;
+ height: auto;
+ :hover,
+ :focus-within,
+ :focus {
+ + ${SubNavMenu} {
+ display: flex;
+ opacity: 1;
+ }}
+ }
+`;
+
+/**
+ * Menu list items
+ */
+const NavItem = styled.li`
+ ${zIndex('medium')};
+ position: relative;
+ font-weight: 700;
+ border-bottom: 1px solid ${({ theme }) => theme.color('grey_medium')};
+
+ li {
+ span {
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+
+ :hover,
+ :focus,
+ :focus-within {
+ span {
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+ }
+ }
+
+ // Chevron icon:
+ span > a > div {
+ transition: transform 0.35s cubic-bezier(0.41, 1.64, 0.41, 0.8);
+ }
+
+ :hover,
+ :focus,
+ :focus-within {
+ li {
+ span {
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+ }
+
+ // Chevron icon:
+ span > a {
+ color: ${({ theme }) => theme.color('red')};
+ > div {
+ transform: rotate(-180deg);
+ img {
+ // Use fancy filter to colour 'img' version of SVG
+ filter: invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);
+ }
+ }
+ }
+ }
+
+
+ @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+ margin: 0 4px;
+ padding: 25px 5px;
+ border-bottom: none;
+
+
+ :hover,
+ :focus,
+ :focus-within {
+ > ${SubNavMenu}, :focus-within > ${SubNavMenu} {
+ visibility: visible;
+ opacity: 1;
+ display: flex;
+ }
+ }
+
+ :hover,
+ :focus,
+ :focus-within {
+ background-color: transparent;
+ ${zIndex('high')};
+
+ span {
+ border-bottom: 2px solid ${({ theme }) => theme.color('black')};
+ padding-bottom: 2px;
+ }
+
+ ${SubNavMenu} {
+ display: flex;
+ opacity: 1;
+ visibility: visible;
+ flex-direction: column;
+ }
+ }
+ }
+`;
+
+const ChevronWrapper = styled.div`
+ width: 16px;
+ position: absolute;
+ top: 20px;
+ right: 22px;
+
+ img {
+ width: 100%;
+ }
+
+ @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+ position: relative;
+ top: -3px;
+ right: -1px;
+ width: 10px;
+ padding-top: 2px;
+ }
+`;
+
+// This represents the 'non-desktop'/mobile nav icons:
+const NavMetaIcons = styled.div`
+ width: auto;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ background-color: inherit;
+
+ > div {
+ height: 60px;
+ width: 100%;
+ display: flex;
+ border-bottom: 1px solid ${({ theme }) => theme.color('grey_medium')};
+
+ > a {
+ height: inherit;
+ width: 100%;
+ padding: 15px 20px;
+ position: relative;
+
+ &: after {
+ position: absolute;
+ right: 20px;
+ top: 50%;
+ transform: translateY(-50%);
+ content: "";
+ width: 20px;
+ height: 20px;
+ background-image: url(${Arrow});
+ background-size: 100%;
+ background-repeat: no-repeat;
+ }
+
+ img {
+ padding: 5px;
+ height: 35px;
+ width: 35px;
+ }
+
+ span {
+ transition: color 0.15s ease-out;
+ }
+
+ &:focus,
+ &:hover {
+ span {
+ color: ${({ theme }) => theme.color('red')};
+ }
+ }
+ }
+
+ &:first-child {
+ margin-top: 20px;
+ }
+ }
+
+ // Hide these when using non-mobile nav,
+ // just leaving the Header version in place
+ @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+ display: none;
+ }
+`;
+
+const DonateButtonWrapperBottom = styled.div`
+ display: flex;
+ justify-content: center;
+ padding: 35px 20px;
+ background-color: inherit;
+
+ // Donate button
+ a {
+ width: calc(100% - 10px);
+ transition: width 0.35s cubic-bezier(0.5, 1.5, 0.5, 0.9);
+
+ &:hover,
+ &:focus {
+ width: 100%;
+ box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px 0;
+ }
+ }
+
+ // Hide the 'Nav'-embedded version of the button when the nav
+ // goes FULL DESKTOP, leaving just the 'Header'-embedded example
+ @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+ display: none;
+ }
+`;
+
+/*
+ * **********
+ * MORE NAV
+ * **********
+ */
+
+const MoreSubNavMenu = styled(SubNavMenu)`
+ @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+ // top: 88px
+ }
+`;
+
+const MoreNavLink = styled(NavLink)`
+ @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+ :focus,
+ :hover,
+ :focus-within {
+ + ${MoreSubNavMenu} {
+ display: flex;
+ }
+ }
+ }
+`;
+
+// Use for the 'More' link only
+const MoreNavItem = styled(NavItem)`
+ @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+ :hover,
+ :focus-within,
+ :focus {
+ > ${MoreSubNavMenu} {
+ visibility: visible;
+ opacity: 1;
+ display: flex;
+ }
+ }
+
+ :hover,
+ :focus,
+ :focus-within {
+ ${MoreSubNavMenu} {
+ display: flex;
+ flex-direction: column;
+ }
+ }
+ }
+`;
+
+// Clone Of SubNavMenu, NESTED menu
+const MoreNestedSubNavMenu = styled(SubNavMenu)`
+ @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+ top: 0;
+ left: -1px;
+ border-radius: 0;
+ border-bottom: 0;
+ position: relative;
+ transition: max-height 0.5s cubic-bezier(0.5, 1.5, 0.5, 0.80);
+ max-height: 0;
+ border: 0;
+ box-shadow: none;
+
+ ${({ isSubMenuOpen }) => (isSubMenuOpen && css`
+ // Calculating a realistic height ceiling (8 subnav items)
+ // to make animation as slick as possible
+ max-height: calc(57px * 8);
+ `)};
+ }
+`;
+
+const MoreSubNavItem = styled(SubNavItem)`
+ // Chevron icon
+ > a > div {
+ position: absolute;
+ width: 15px;
+ top: 13px;
+ right: 25px;
+ transition: transform 0.35s cubic-bezier(0.41, 1.64, 0.41, 0.8);
+ }
+
+ :hover,
+ :focus,
+ :focus-within {
+ > a {
+ color: ${({ theme }) => theme.color('red')};
+ }
+ > a > div {
+ img {
+ filter: invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);
+ }
+ }
+ }
+`;
+
+const MoreNavNestedLink = styled(NavLink)`
+ padding: 20px 25px 18px;
+
+ ${({ isSubMenuOpen }) => (isSubMenuOpen && css`
+ > div {
+ transform: rotate(-180deg);
+ }
+ `)};
+`;
+
+const MoreSubNavLink = styled(SubNavLink)`
+ //
+`;
+
+export {
+ Nav,
+ NavMenu,
+ NavItem,
+ NavLink,
+ SubNavMenu,
+ SubNavItem,
+ SubNavLink,
+ ChevronWrapper,
+ NavMetaIcons,
+ DonateButtonWrapperBottom,
+ // 'More Nav' stuff:
+ MoreNavLink,
+ MoreSubNavMenu,
+ MoreNavItem,
+ MoreNestedSubNavMenu,
+ MoreSubNavItem,
+ MoreNavNestedLink,
+ MoreSubNavLink
+};
diff --git a/src/components/Organisms/Header/HeaderNav/Menu-Group-Icon.svg b/src/components/Organisms/Header/HeaderNav/Menu-Group-Icon.svg
new file mode 100644
index 000000000..7f187af79
--- /dev/null
+++ b/src/components/Organisms/Header/HeaderNav/Menu-Group-Icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/Organisms/Header/HeaderNav/arrow-right.png b/src/components/Organisms/Header/HeaderNav/arrow-right.png
new file mode 100644
index 000000000..ee948bb25
Binary files /dev/null and b/src/components/Organisms/Header/HeaderNav/arrow-right.png differ
diff --git a/src/components/Organisms/Header/HeaderNav/arrow.svg b/src/components/Organisms/Header/HeaderNav/arrow.svg
new file mode 100644
index 000000000..027b666f4
--- /dev/null
+++ b/src/components/Organisms/Header/HeaderNav/arrow.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/src/components/Organisms/Header/Nav/chevron-down.svg b/src/components/Organisms/Header/HeaderNav/chevron-down.svg
similarity index 100%
rename from src/components/Organisms/Header/Nav/chevron-down.svg
rename to src/components/Organisms/Header/HeaderNav/chevron-down.svg
diff --git a/src/components/Organisms/Header/Nav/Nav.js b/src/components/Organisms/Header/Nav/Nav.js
deleted file mode 100644
index f724d6d4c..000000000
--- a/src/components/Organisms/Header/Nav/Nav.js
+++ /dev/null
@@ -1,187 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-
-import Text from '../../../Atoms/Text/Text';
-import BurgerMenu from '../Burger/BurgerMenu';
-import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
-import NavHelper from '../../../../utils/navHelper';
-import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
-import allowListed from '../../../../utils/allowListed';
-import chevronDown from './chevron-down.svg';
-
-import {
- Nav,
- NavMenu,
- NavItem,
- NavLink,
- SubNavMenu,
- SubNavItem,
- SubNavLink,
- SubNavLinkUnderline,
- ChevronWrapper
-} from './Nav.style';
-
-const MainNav = ({ navItems }) => {
- const { menuGroups } = navItems;
- const [isExpandable, setIsExpandable] = useState(false);
- const [isSubMenuOpen, setIsSubMenuOpen] = useState({});
- const [isKeyPressed, setIsKeyPressed] = useState({});
-
- const [isMobile, setIsMobile] = useState(false);
-
- const toggleBurgerMenu = event => {
- event.preventDefault();
- setIsExpandable(!isExpandable);
- };
-
- const toggleSubMenu = (e, item) => {
- e.preventDefault();
- setIsSubMenuOpen({ [item]: !isSubMenuOpen[item] });
- };
-
- // Handle tab key on menu nav
- const keyPressed = item => () => {
- window.onkeyup = e => {
- if (
- e.target.querySelector('span')
- && e.target.querySelector('span').innerText === item
- ) {
- setIsKeyPressed({ [item]: !isKeyPressed[item] });
- } else if (!e.target.querySelector('span')) {
- setIsKeyPressed({});
- }
- };
- };
-
- useEffect(() => {
- const width = window.innerWidth;
- setIsMobile(width < breakpointValues.Nav);
- window.addEventListener('onkeyup', setIsKeyPressed);
-
- return () => {
- window.removeEventListener('onkeyup', setIsKeyPressed);
- };
- }, []);
- return (
- <>
-
-
- Open
-
-
- );
-};
-
-MainNav.propTypes = {
- navItems: PropTypes.objectOf(PropTypes.shape)
-};
-
-MainNav.defaultProps = {
- navItems: {}
-};
-
-export default MainNav;
diff --git a/src/components/Organisms/Header/Nav/Nav.style.js b/src/components/Organisms/Header/Nav/Nav.style.js
deleted file mode 100644
index 94a99aed0..000000000
--- a/src/components/Organisms/Header/Nav/Nav.style.js
+++ /dev/null
@@ -1,245 +0,0 @@
-import styled from 'styled-components';
-
-import Link from '../../../Atoms/Link/Link';
-import hideVisually from '../../../../theme/shared/hideVisually';
-import zIndex from '../../../../theme/shared/zIndex';
-
-const NavLinkClass = styled(Link)`
- display: inline-block;
- border: 0;
- padding: 17px 20px;
- line-height: 1.3rem;
- height: 46px;
- font-weight: 700;
- width: 100%;
- color: ${({ theme }) => theme.color('deep_violet_dark')};
- :hover {
- border: 0;
- color: ${({ theme }) => theme.color('deep_violet_dark')};
- font-weight: inherit;
- }
-`;
-
-/**
- * Navigation menu
- */
-const Nav = styled.nav`
- display: ${({ isExpandable }) => (isExpandable ? 'block' : 'none')};
- width: 100%;
- position: absolute;
- top: 75px;
- left: 0;
- ${zIndex('higher')};
-
- @media ${({ theme }) => theme.allBreakpoints('M')} {
- width: 50%;
- right: 0;
- left: inherit;
- }
-
- @media ${({ theme }) => theme.allBreakpoints('Nav')} {
- ${zIndex('medium')};
- position: relative;
- top: 0;
- display: block;
- margin: 0 10px;
- width: auto;
- height: 100%;
- }
- > h2 {
- ${hideVisually};
- }
-`;
-
-/**
- * Sub Navigation Menu (second level)
- */
-const SubNavMenu = styled.ul`
- display: ${({ isSubMenuOpen }) => (isSubMenuOpen ? 'flex' : 'none')};
- padding: 0;
- position: relative;
- list-style: none outside;
- left: 0;
- top: 0;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background-color: ${({ theme }) => theme.color('deep_violet_dark')};
-
- @media ${({ theme }) => theme.allBreakpoints('Nav')} {
- display: none;
- display: ${({ isKeyPressed }) => (isKeyPressed ? 'flex' : 'none')};
- top: 90px;
- position: absolute;
- padding: 0 0 20px;
- width: 250px;
- height: auto;
- }
-`;
-
-/**
- * Sub Menu list items
- */
-const SubNavItem = styled.li`
- padding: 0;
- height: 100%;
- width: 100%;
- :hover {
- background-color: ${({ theme }) => theme.color('deep_violet_light')};
- span {
- border-bottom: 0;
- padding-bottom: 2px;
- color: ${({ theme }) => theme.color('white')};
- }
- }
-`;
-
-/**
- * Sub menu link item
- */
-const SubNavLink = styled(NavLinkClass)`
- padding: 14px 14px 7px 21px;
- color: ${({ theme }) => theme.color('white')};
- height: auto;
- position: relative;
-`;
-
-/**
- * Sub menu link item underline
- */
-const SubNavLinkUnderline = styled(SubNavLink)`
- padding: 26px 21px;
- ::after {
- content: '';
- position: absolute;
- width: 14px;
- border-bottom: 2px solid ${({ theme }) => theme.color('white')};
- left: 12px;
- top: auto;
- bottom: 10px;
- margin: 0 10px;
- }
- @media ${({ theme }) => theme.allBreakpoints('Nav')} {
- ::before {
- display: block;
- position: absolute;
- content: '';
- left: 34px;
- width: 10px;
- height: 10px;
- border: 11px solid transparent;
- border-bottom-color: ${({ theme }) => theme.color('deep_violet_dark')};
- top: -22px;
- }
- :hover::before {
- border-bottom-color: ${({ theme }) => theme.color('deep_violet_light')};
- }
- }
-`;
-
-/**
- * Navigation Menu (first level)
- */
-const NavMenu = styled.ul`
- background-color: ${({ theme }) => theme.color('grey_extra_light')};
- list-style: none outside;
- padding: 0;
- margin: 0;
-
- @media ${({ theme }) => theme.allBreakpoints('Nav')} {
- position: relative;
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: flex-start;
- background-color: ${({ theme }) => theme.color('white')};
- }
-`;
-
-/**
- * Menu item link
- */
-const NavLink = styled(NavLinkClass)`
- display: flex;
- gap: 4px;
- font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
- @media ${({ theme }) => theme.allBreakpoints('Nav')} {
- padding: 10px 0;
- height: auto;
- :focus + ${SubNavMenu} {
- display: flex;
- }
- }
-`;
-
-/**
- * Menu list items
- */
-const NavItem = styled.li`
- ${zIndex('medium')};
- position: relative;
- font-weight: 700;
- :hover {
- li {
- span {
- border-bottom: none;
- padding-bottom: 0;
- }
- }
- }
- li {
- span {
- border-bottom: none;
- padding-bottom: 0;
- }
- :hover {
- span {
- border-bottom: none;
- padding-bottom: 0;
- }
- }
- }
- :hover {
- background-color: ${({ theme }) => theme.color('teal_light')};
- }
- @media ${({ theme }) => theme.allBreakpoints('Nav')} {
- margin: 0 4px;
- padding: 25px 5px;
-
- :hover > ${SubNavMenu}, :focus-within > ${SubNavMenu} {
- visibility: visible;
- opacity: 1;
- display: flex;
- }
-
- :hover {
- background-color: transparent;
- ${zIndex('high')};
- span {
- border-bottom: 2px solid ${({ theme }) => theme.color('black')};
- padding-bottom: 2px;
- }
- ${SubNavMenu} {
- display: flex;
- flex-direction: column;
- }
- }
- }
-`;
-
-const ChevronWrapper = styled.div`
- width: 12px;
- padding-top: 2px;
-`;
-
-export {
- Nav,
- NavMenu,
- NavItem,
- NavLink,
- SubNavMenu,
- SubNavItem,
- SubNavLink,
- SubNavLinkUnderline,
- ChevronWrapper
-};
diff --git a/src/components/Organisms/Header/annoying.css b/src/components/Organisms/Header/annoying.css
new file mode 100644
index 000000000..95b03d576
--- /dev/null
+++ b/src/components/Organisms/Header/annoying.css
@@ -0,0 +1,14 @@
+/* Overiding the crummy Styleguidest styles */
+.rsg--preview-35 {
+ padding: 0 !important;
+ border: none !important;
+}
+
+.rsg--content-3 {
+ padding: 0 !important;
+}
+
+.rsg--header-11,
+.rsg--tabs-12 {
+ display: none !important;;
+}
diff --git a/src/components/Organisms/Header/assets/Post.svg b/src/components/Organisms/Header/assets/Post.svg
new file mode 100644
index 000000000..048a052c1
--- /dev/null
+++ b/src/components/Organisms/Header/assets/Post.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/Organisms/Header/data/data-extended.js b/src/components/Organisms/Header/data/data-extended.js
new file mode 100644
index 000000000..71b081942
--- /dev/null
+++ b/src/components/Organisms/Header/data/data-extended.js
@@ -0,0 +1,280 @@
+export default {
+ title: 'Header',
+ menuGroups: [
+ {
+ title: 'GROUP1',
+ id: 'group1',
+ links: [
+ {
+ title: 'Sport Relief',
+ path: 'https://www.comicrelief.com/fundraising/pay-in-your-money',
+ internal: {
+ type: 'ContentfulPageLandingPage'
+ }
+ },
+ {
+ title: 'Run 30 Miles in June',
+ path: 'https://www.comicrelief.com/rednoseday',
+ internal: {
+ type: 'ContentfulPageLandingPage'
+ }
+ },
+ {
+ title: 'Be a Good Sport: Schools',
+ path: 'https://www.comicrelief.com/join',
+ internal: {
+ type: 'ContentfulPageLandingPage'
+ }
+ },
+ {
+ title: 'Win a trip to New York with Major League Baseball',
+ path: 'https://www.comicrelief.com/squads',
+ internal: {
+ type: 'ContentfulPageLandingPage'
+ }
+ }
+ ]
+ },
+ {
+ title: 'GROUP2',
+ id: 'group2',
+ links: [
+ {
+ title: 'Red Nose Day',
+ path: 'https://www.comicrelief.com/rednoseday/schools',
+ internal: {
+ type: 'ContentfulPageLandingPage'
+ }
+ },
+ {
+ title: 'The New Red Nose',
+ path: 'https://www.comicrelief.com/rednoseday/schools',
+ internal: {
+ type: 'ContentfulPageLandingPage'
+ }
+ },
+ {
+ title: 'Schools',
+ path: 'https://www.comicrelief.com/rednoseday/schools',
+ internal: {
+ type: 'ContentfulPageLandingPage'
+ }
+ },
+ {
+ title: 'The Red Nose Day Nosey Awards',
+ path: 'https://www.comicrelief.com/rednoseday/schools',
+ internal: {
+ type: 'ContentfulPageLandingPage'
+ }
+ }
+ ]
+ },
+ {
+ title: 'GROUP3',
+ id: 'group3',
+ links: [
+ {
+ title: 'Funding',
+ path: 'https://www.comicrelief.com/what-your-money-does',
+ internal: {
+ type: 'ContentfulPageLandingPage'
+ }
+ },
+ {
+ title: 'Our Funding Practice',
+ path: 'https://www.comicrelief.com/our-legacy',
+ internal: {
+ type: 'ContentfulPageLandingPage'
+ }
+ },
+ {
+ title: 'Funding opportunities',
+ path: 'https://www.comicrelief.com/our-legacy',
+ internal: {
+ type: 'ContentfulPageLandingPage'
+ }
+ },
+ {
+ title: 'Our Funding strategy',
+ path: 'https://www.comicrelief.com/our-legacy',
+ internal: {
+ type: 'ContentfulPageLandingPage'
+ }
+ },
+ {
+ title: 'Managing your funding',
+ path: 'https://www.comicrelief.com/our-legacy',
+ internal: {
+ type: 'ContentfulPageLandingPage'
+ }
+ }
+ ]
+ },
+ {
+ title: 'GROUP4',
+ id: 'group4',
+ links: [
+ {
+ title: 'What Your Money Does',
+ path:
+ 'https://www.comicrelief.com/rednoseday/schools/primary-schools',
+ internal: {
+ type: 'ContentfulPageLandingPage'
+ }
+ },
+ {
+ title: 'Reports & Publications',
+ path:
+ 'https://www.comicrelief.com/rednoseday/schools/secondary-schools',
+ internal: {
+ type: 'ContentfulPageLandingPage'
+ }
+ }
+ ]
+ },
+ {
+ title: 'GROUP5',
+ id: 'group5',
+ links: [
+ {
+ title: 'Get Involved',
+ url: 'https://www.comicrelief.com/working-with-us/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ },
+ {
+ title: 'Do your own fundraising',
+ url: 'https://www.comicrelief.com/404/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ },
+ {
+ title: 'Regular Donations',
+ url: 'https://www.comicrelief.com/404/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ },
+ {
+ title: 'Run for Comic Relief',
+ url: 'https://www.comicrelief.com/404/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ },
+ {
+ title: 'How to pay in your fundraising money',
+ url: 'https://www.comicrelief.com/404/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ },
+ {
+ title: 'Partners',
+ url: 'https://www.comicrelief.com/404/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ }
+ ]
+ },
+ {
+ title: 'GROUP6',
+ id: 'group6',
+ links: [
+ {
+ title: 'Something Here',
+ url: 'https://www.comicrelief.com/working-with-us/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ },
+ {
+ title: 'Do your own fundraising',
+ url: 'https://www.comicrelief.com/404/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ },
+ {
+ title: 'Regular Donations',
+ url: 'https://www.comicrelief.com/404/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ },
+ {
+ title: 'Run for Comic Relief',
+ url: 'https://www.comicrelief.com/404/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ },
+ {
+ title: 'How to pay in your fundraising money',
+ url: 'https://www.comicrelief.com/404/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ },
+ {
+ title: 'Partners',
+ url: 'https://www.comicrelief.com/404/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ }
+ ]
+ },
+ {
+ title: 'GROUP7',
+ id: 'group7',
+ links: [
+ {
+ title: 'Something Else',
+ url: 'https://www.comicrelief.com/working-with-us/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ },
+ {
+ title: 'Do your own fundraising',
+ url: 'https://www.comicrelief.com/404/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ },
+ {
+ title: 'Regular Donations',
+ url: 'https://www.comicrelief.com/404/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ },
+ {
+ title: 'Run for Comic Relief',
+ url: 'https://www.comicrelief.com/404/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ },
+ {
+ title: 'How to pay in your fundraising money',
+ url: 'https://www.comicrelief.com/404/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ },
+ {
+ title: 'Partners',
+ url: 'https://www.comicrelief.com/404/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ }
+ ]
+ }
+ ]
+};
diff --git a/src/components/Organisms/Header/data/data.js b/src/components/Organisms/Header/data/data.js
index 98d161a1d..5f3a2e91e 100644
--- a/src/components/Organisms/Header/data/data.js
+++ b/src/components/Organisms/Header/data/data.js
@@ -2,131 +2,108 @@ export default {
title: 'Header',
menuGroups: [
{
- title: 'Fundraising - menu group',
- id: 'f7dc5eef-f4eb-5405-8a35-08808b55cb33',
+ title: 'GROUP1',
+ id: 'group1',
links: [
{
- title: 'Fundraising',
+ title: 'Sport Relief',
path: 'https://www.comicrelief.com/fundraising/pay-in-your-money',
internal: {
type: 'ContentfulPageLandingPage'
}
},
{
- title: 'Red Nose Day',
+ title: 'Run 30 Miles in June',
path: 'https://www.comicrelief.com/rednoseday',
internal: {
type: 'ContentfulPageLandingPage'
}
},
{
- title: 'Regular donations',
+ title: 'Be a Good Sport: Schools',
path: 'https://www.comicrelief.com/join',
internal: {
type: 'ContentfulPageLandingPage'
}
},
{
- title: 'Squads',
+ title: 'Win a trip to New York with Major League Baseball',
path: 'https://www.comicrelief.com/squads',
internal: {
type: 'ContentfulPageLandingPage'
}
- },
- {
- title: 'The Noseys',
- path: 'https://www.comicrelief.com/rednoseday/fundraising/the-noseys',
- internal: {
- type: 'ContentfulPageLandingPage'
- }
- },
- {
- title: 'Free downloads',
- path:
- 'https://www.comicrelief.com/rednoseday/fundraising/free-downloads',
- internal: {
- type: 'ContentfulPageLandingPage'
- }
}
]
},
{
- title: 'Schools & youth - menu group',
- id: 'eaec51921-bbb3-5e8d-b966-c53fff34998b5',
+ title: 'GROUP2',
+ id: 'group2',
links: [
{
- title: 'Single menu link',
+ title: 'Red Nose Day',
path: 'https://www.comicrelief.com/rednoseday/schools',
internal: {
type: 'ContentfulPageLandingPage'
}
- }
- ]
- },
- {
- title: 'What your money does - menu group',
- id: '9f3980f3-d02b-52e9-ac41-933a778c040a',
- links: [
+ },
{
- title: 'What your money does',
- path: 'https://www.comicrelief.com/what-your-money-does',
+ title: 'The New Red Nose',
+ path: 'https://www.comicrelief.com/rednoseday/schools',
internal: {
type: 'ContentfulPageLandingPage'
}
},
{
- title: 'Our legacy',
- path: 'https://www.comicrelief.com/What-we-do/our-legacy',
+ title: 'Schools',
+ path: 'https://www.comicrelief.com/rednoseday/schools',
internal: {
type: 'ContentfulPageLandingPage'
}
- }
- ]
- },
- {
- title: 'Schools & youth - menu group',
- id: 'eaec5191-bbb3-5e8d-b966-c53fff34998b',
- links: [
+ },
{
- title: 'Schools & youth',
+ title: 'The Red Nose Day Nosey Awards',
path: 'https://www.comicrelief.com/rednoseday/schools',
internal: {
type: 'ContentfulPageLandingPage'
}
- },
+ }
+ ]
+ },
+ {
+ title: 'GROUP3',
+ id: 'group3',
+ links: [
{
- title: 'Primary schools',
- path:
- 'https://www.comicrelief.com/rednoseday/schools/primary-schools',
+ title: 'Funding',
+ path: 'https://www.comicrelief.com/what-your-money-does',
internal: {
type: 'ContentfulPageLandingPage'
}
},
{
- title: 'Secondary schools',
- path:
- 'https://www.comicrelief.com/rednoseday/schools/secondary-schools',
+ title: 'Our Funding Practice',
+ path: 'https://www.comicrelief.com/our-legacy',
internal: {
type: 'ContentfulPageLandingPage'
}
},
{
- title: 'Nurseries',
- path: 'https://www.comicrelief.com/rednoseday/schools/nurseries',
+ title: 'Funding opportunities',
+ path: 'https://www.comicrelief.com/our-legacy',
internal: {
type: 'ContentfulPageLandingPage'
}
},
{
- title: 'Youth groups',
- path: 'https://www.comicrelief.com/rednoseday/youth',
+ title: 'Our Funding strategy',
+ path: 'https://www.comicrelief.com/our-legacy',
internal: {
type: 'ContentfulPageLandingPage'
}
},
{
- title: 'Free downloads',
- path: 'https://www.comicrelief.com/rednoseday/schools/free-downloads',
+ title: 'Managing your funding',
+ path: 'https://www.comicrelief.com/our-legacy',
internal: {
type: 'ContentfulPageLandingPage'
}
@@ -134,12 +111,21 @@ export default {
]
},
{
- title: 'Shop',
- id: 'eaec51921-bb89b3-5e8d-b9566-c53fff34998b5',
+ title: 'GROUP4',
+ id: 'group4',
links: [
{
- title: 'Shop',
- path: 'https://shop.comicrelief.com',
+ title: 'What Your Money Does',
+ path:
+ 'https://www.comicrelief.com/rednoseday/schools/primary-schools',
+ internal: {
+ type: 'ContentfulPageLandingPage'
+ }
+ },
+ {
+ title: 'Reports & Publications',
+ path:
+ 'https://www.comicrelief.com/rednoseday/schools/secondary-schools',
internal: {
type: 'ContentfulPageLandingPage'
}
@@ -147,47 +133,47 @@ export default {
]
},
{
- title: 'External Links (menu group)',
- id: 'eaec5191-bbb3-5e8d-b966-c53fff34998a',
+ title: 'GROUP5',
+ id: 'group5',
links: [
{
- title: 'Test allowListed external link',
- url: 'https://www.sportrelief.com',
+ title: 'Get Involved',
+ url: 'https://www.comicrelief.com/working-with-us/',
+ internal: {
+ type: 'ContentfulComponentLink'
+ }
+ },
+ {
+ title: 'Do your own fundraising',
+ url: 'https://www.comicrelief.com/404/',
internal: {
type: 'ContentfulComponentLink'
}
},
{
- title: 'Test non-allowListed external link',
- url: 'https://bing.com',
+ title: 'Regular Donations',
+ url: 'https://www.comicrelief.com/404/',
internal: {
type: 'ContentfulComponentLink'
}
},
{
- title: 'Link comp: URL and Ref',
- url: 'https://www.google.com',
- reference: {
- path: 'test-ref-path-1'
- },
+ title: 'Run for Comic Relief',
+ url: 'https://www.comicrelief.com/404/',
internal: {
type: 'ContentfulComponentLink'
}
},
{
- title: 'Link comp: only Ref',
- url: null,
- reference: {
- path: 'test-ref-path-2'
- },
+ title: 'How to pay in your fundraising money',
+ url: 'https://www.comicrelief.com/404/',
internal: {
type: 'ContentfulComponentLink'
}
},
{
- title: 'Link comp: only URL',
- url: 'test-url',
- reference: null,
+ title: 'Partners',
+ url: 'https://www.comicrelief.com/404/',
internal: {
type: 'ContentfulComponentLink'
}
diff --git a/src/styleguide/data/data.js b/src/styleguide/data/data.js
index 5660b6be4..532ff57ff 100644
--- a/src/styleguide/data/data.js
+++ b/src/styleguide/data/data.js
@@ -62,63 +62,63 @@ const carouselItemsComplete = {
node1Amount: '1,000',
node1Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node2Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
node2Amount: '750,000',
node2Image: {
file: {
- url: 'https://images.ctfassets.net/zsfivwzfgl3t/5uKnps3prnG6GpTM1EPZdC/8d7264465846de31e3bbb5b6b2c36c8f/014-helping_hand.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node3Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
node3Amount: '3,000',
node3Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node4Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
node4Amount: '4,000',
node4Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node5Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
node5Amount: '5,000',
node5Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node6Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
node6Amount: '6,000',
node6Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node7Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
node7Amount: '7,000',
node7Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node8Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
node8Amount: '8,000',
node8Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node9Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
node9Amount: '9,000',
node9Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
}
};
@@ -136,34 +136,34 @@ const carouselItemsIncomplete = {
node1Amount: '1,000',
node1Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node2Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
node2Amount: '750,000',
node2Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node3Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
node3Amount: '3,000',
node3Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node4Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
node4Amount: '4,000',
node4Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node5Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
node5Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node6Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
@@ -176,7 +176,7 @@ const carouselItemsIncomplete = {
node8Amount: null,
node8Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node9_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
@@ -197,28 +197,28 @@ const carouselItemsMinimal = {
node1Amount: '1,000',
node1Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node2Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
node2Amount: '750,000',
node2Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node3Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
node3Amount: '3,000',
node3Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
},
node4Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
node4Amount: '4,000',
node4Image: {
file: {
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+ url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
}
}
};
diff --git a/src/theme/shared/allBreakpoints.js b/src/theme/shared/allBreakpoints.js
index cdafa505d..326d8e9c0 100644
--- a/src/theme/shared/allBreakpoints.js
+++ b/src/theme/shared/allBreakpoints.js
@@ -6,7 +6,8 @@ export const breakpointValues = {
S: 0,
M: 740,
L: 1024,
- Nav: 1150,
+ Nav: 1175,
+ NavWithAnimations: 1280,
XL: 1440
};
diff --git a/src/utils/navHelper.js b/src/utils/navHelper.js
index 33a33cd18..8cdb85dd5 100644
--- a/src/utils/navHelper.js
+++ b/src/utils/navHelper.js
@@ -12,4 +12,27 @@ const NavHelper = navItem => {
return thisUrl;
};
-export default NavHelper;
+const MoreNavPreProcess = (menuGroups, characterLimit) => {
+ let characterCount = 0;
+ const overLimit = false;
+ const standardGroups = [];
+ const moreNavGroups = [];
+
+ menuGroups.map(group => {
+ // As this first item is used as our top level parent 'button' link,
+ // look to this to grab the amount of copied rendered:
+ const thisFirstChild = group.links[0];
+
+ // Keep track of how many characters our nav has in total:
+ characterCount += thisFirstChild.title.length;
+
+ // Assign groups to the relevant array if we're over the limit
+ return characterCount > characterLimit !== overLimit
+ ? moreNavGroups.push(group)
+ : standardGroups.push(group);
+ });
+
+ return { standardGroups, moreNavGroups };
+};
+
+export { NavHelper, MoreNavPreProcess };
+