@comicrelief/component-library 8.13.4 → 8.13.6

package/dist/components/Organisms/Header2025/Header2025.style.js

@@ -15,7 +15,7 @@ const Header2025Wrapper = exports.Header2025Wrapper = _styledComponents.default.
 })).withConfig({
   displayName: "Header2025style__Header2025Wrapper",
   componentId: "sc-7gs40r-0"
-})(["position:relative;background-color:", ";padding:0;height:75px;@media ", "{height:auto;}", ";"], _ref => {
+})(["position:relative;background-color:", ";padding:0;height:75px;@media ", "{height:86px;}", ";"], _ref => {
   let {
     theme
   } = _ref;
@@ -29,7 +29,7 @@ const Header2025Wrapper = exports.Header2025Wrapper = _styledComponents.default.
   let {
     showBoxShadow
   } = _ref3;
-  return showBoxShadow && (0, _styledComponents.css)(["box-shadow:0px 13px 15px 0 rgba(0,0,0,0.15);"]);
+  return showBoxShadow && (0, _styledComponents.css)(["box-shadow:0px 13px 15px 0 rgba(0,0,0,0.05);"]);
 });
 const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "Header2025style__InnerWrapper",
@@ -52,7 +52,7 @@ const Brand = exports.Brand = _styledComponents.default.div.withConfig({
 const DonateButtonWrapperTop = exports.DonateButtonWrapperTop = _styledComponents.default.div.withConfig({
   displayName: "Header2025style__DonateButtonWrapperTop",
   componentId: "sc-7gs40r-3"
-})(["width:100px;display:flex;justify-content:center;margin-left:5px;a{width:100%;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;}}"]);
+})(["width:100px;display:flex;justify-content:center;margin-left:5px;height:2.8rem;a{width:100%;height:inherit;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 Header2025MetaIcons = exports.Header2025MetaIcons = _styledComponents.default.div.withConfig({
   displayName: "Header2025style__Header2025MetaIcons",
   componentId: "sc-7gs40r-4"

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js

@@ -28,7 +28,7 @@ const HeaderNav2025 = _ref => {
   } = navItems;
   const [isExpandable, setIsExpandable] = (0, _react.useState)(false);
   const [openedSubMenu, setOpenedSubMenu] = (0, _react.useState)({});
-  const [isNotDesktop, setIsNotDesktop] = (0, _react.useState)(null);
+  const [isNotDesktop, setIsNotDesktop] = (0, _react.useState)(false);
   const [processedItems, setProcessedItems] = (0, _react.useState)(null);
   const [showMoreNav, setShowMoreNav] = (0, _react.useState)(false);
   let theseGroups = null;
@@ -59,17 +59,20 @@ const HeaderNav2025 = _ref => {
   };
 
   // Process the nav items on initial mount:
-  (0, _react.useEffect)(() => {
-    // Divide up nav items accordingly and determine breakpoint,
-    // assigned as local vars since useState won't be ready in time below:
+  (0, _react.useMemo)(() => {
+    // Divide up nav items accordingly
     const theseItems = (0, _navHelper.MoreNavPreProcess)(menuGroups, characterLimit);
-    const notDesktop = window.innerWidth < _allBreakpoints.breakpointValues.Nav;
     setProcessedItems(theseItems);
+  }, [menuGroups, characterLimit]);
+
+  // Determine which nav we should use only once 'window' exists:
+  (0, _react.useEffect)(() => {
+    const notDesktop = window.innerWidth < _allBreakpoints.breakpointValues.Nav;
     setIsNotDesktop(notDesktop);
 
     // Use these flags to detemine if we render the More nav or not:
-    setShowMoreNav(!notDesktop && theseItems.moreNavGroups.length);
-  }, [menuGroups, characterLimit]);
+    setShowMoreNav(!notDesktop && processedItems.moreNavGroups.length);
+  }, [processedItems]);
 
   // Attach eventListener on mount and after potential changes
   // to showMoreNav triggered by a window resize:

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.style.js

@@ -92,7 +92,7 @@ const Nav = exports.Nav = _styledComponents.default.nav.withConfig({
 const SubNavMenu = exports.SubNavMenu = _styledComponents.default.ul.withConfig({
   displayName: "HeaderNav2025style__SubNavMenu",
   componentId: "sc-xflhtq-2"
-})(["visibility:", ";display:", ";padding:0;position:relative;list-style:none outside;left:0;top:0;flex-direction:column;justify-content:center;align-items:center;background-color:", ";overflow:hidden;border-top:1px solid ", ";@media ", "{display:flex;width:330px;height:auto;padding:0;position:absolute;top:86px;left:-42px;border-radius:0 0 25px 25px;transition:opacity ", "s linear;opacity:0;box-shadow:0px 13px 15px 0 rgba(0,0,0,0.15);}"], _ref13 => {
+})(["visibility:", ";display:", ";padding:0;position:relative;list-style:none outside;left:0;top:0;flex-direction:column;justify-content:center;align-items:center;background-color:", ";overflow:hidden;border-top:1px solid ", ";@media ", "{display:flex;width:330px;height:auto;padding:0;position:absolute;top:86px;left:-29px;border-radius:0 0 25px 25px;transition:opacity ", "s linear;opacity:0;box-shadow:0px 13px 15px 0 rgba(0,0,0,0.05);}"], _ref13 => {
   let {
     isSubMenuOpen
   } = _ref13;
@@ -138,11 +138,16 @@ const SubNavItem = exports.SubNavItem = _styledComponents.default.li.withConfig(
 const SubNavLink = exports.SubNavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
   displayName: "HeaderNav2025style__SubNavLink",
   componentId: "sc-xflhtq-4"
-})(["padding:20px 25px 22px 42px;color:", ";height:auto;position:relative;"], _ref19 => {
+})(["padding:20px 25px 22px 42px;color:", ";height:auto;position:relative;@media ", "{padding:20px 30px 22px;}"], _ref19 => {
   let {
     theme
   } = _ref19;
   return theme.color('black');
+}, _ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.allBreakpoints('Nav');
 });
 
 /**
@@ -151,20 +156,20 @@ const SubNavLink = exports.SubNavLink = (0, _styledComponents.default)(NavLinkCl
 const NavMenu = exports.NavMenu = _styledComponents.default.ul.withConfig({
   displayName: "HeaderNav2025style__NavMenu",
   componentId: "sc-xflhtq-5"
-})(["background-color:", ";list-style:none outside;padding:0;margin:0;@media ", "{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;background-color:", ";}"], _ref20 => {
+})(["background-color:", ";list-style:none outside;padding:0;margin:0;@media ", "{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;background-color:", ";}"], _ref21 => {
   let {
     theme
-  } = _ref20;
+  } = _ref21;
   return theme.color('white');
-}, _ref21 => {
+}, _ref22 => {
   let {
     theme
-  } = _ref21;
+  } = _ref22;
   return theme.allBreakpoints('Nav');
-}, _ref22 => {
+}, _ref23 => {
   let {
     theme
-  } = _ref22;
+  } = _ref23;
   return theme.color('white');
 });
 
@@ -174,45 +179,45 @@ const NavMenu = exports.NavMenu = _styledComponents.default.ul.withConfig({
 const NavLink = exports.NavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
   displayName: "HeaderNav2025style__NavLink",
   componentId: "sc-xflhtq-6"
-})(["display:flex;gap:4px;font-family:", ";", " @media ", "{padding:10px 0px 10px 0;height:auto;", " :hover,:focus-within,:focus{+ ", "{display:flex;opacity:1;}}}@media ", "{", "}"], _ref23 => {
+})(["display:flex;gap:4px;font-family:", ";", " @media ", "{padding:10px 0px 10px 0;height:auto;", " :hover,:focus-within,:focus{+ ", "{display:flex;opacity:1;}}}@media ", "{", "}"], _ref24 => {
   let {
     theme
-  } = _ref23;
+  } = _ref24;
   return theme.fontFamilies(theme.font.regular);
-}, _ref24 => {
+}, _ref25 => {
   let {
     isExpanded,
     theme
-  } = _ref24;
+  } = _ref25;
   return isExpanded && (0, _styledComponents.css)(["&,&:hover,&:focus-within,&:focus{color:", ";}"], theme.color('red'));
-}, _ref25 => {
+}, _ref26 => {
   let {
     theme
-  } = _ref25;
+  } = _ref26;
   return theme.allBreakpoints('Nav');
-}, _ref26 => {
+}, _ref27 => {
   let {
     hasSubMenu
-  } = _ref26;
+  } = _ref27;
   return hasSubMenu && (0, _styledComponents.css)(["padding:10px 14px 10px 0;"]);
-}, SubNavMenu, _ref27 => {
+}, SubNavMenu, _ref28 => {
   let {
     theme
-  } = _ref27;
+  } = _ref28;
   return theme.allBreakpoints('NavWide');
-}, _ref28 => {
+}, _ref29 => {
   let {
     hasSubMenu
-  } = _ref28;
+  } = _ref29;
   return hasSubMenu && (0, _styledComponents.css)(["padding:10px 16px 10px 0;"]);
 });
 const DesktopNavLink = exports.DesktopNavLink = (0, _styledComponents.default)(NavLink).withConfig({
   displayName: "HeaderNav2025style__DesktopNavLink",
   componentId: "sc-xflhtq-7"
-})(["&,&:hover,&:focus,&:focus-within{background-color:", ";}"], _ref29 => {
+})(["&,&:hover,&:focus,&:focus-within{background-color:", ";}"], _ref30 => {
   let {
     theme
-  } = _ref29;
+  } = _ref30;
   return theme.color('white');
 });
 
@@ -222,39 +227,39 @@ const DesktopNavLink = exports.DesktopNavLink = (0, _styledComponents.default)(N
 const NavItem = exports.NavItem = _styledComponents.default.li.withConfig({
   displayName: "HeaderNav2025style__NavItem",
   componentId: "sc-xflhtq-8"
-})(["", ";position:relative;font-weight:700;border-bottom:1px solid ", ";li{span{border-bottom:none;padding-bottom:0;}:hover,:focus,:focus-within{span{border-bottom:none;padding-bottom:0;}}}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;}}span > a{color:", ";> div{transform:rotate(-180deg);img{filter:invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);}}}}@media ", "{margin:0 22px 0 0;padding:25px 0px;border-bottom:none;:hover,:focus,:focus-within{> ", ",:focus-within > ", "{visibility:visible;opacity:1;display:flex;}}:hover,:focus,:focus-within{background-color:transparent;", ";span{border-bottom:2px solid ", ";padding-bottom:2px;}", "{display:flex;opacity:1;visibility:visible;flex-direction:column;}}}@media ", "{margin:0 20px 0 0;}"], (0, _zIndex.default)('medium'), _ref30 => {
+})(["", ";position:relative;font-weight:700;border-bottom:1px solid ", ";li{span{border-bottom:none;padding-bottom:0;}:hover,:focus,:focus-within{span{border-bottom:none;padding-bottom:0;}}}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;}}span > a{color:", ";> div{transform:rotate(-180deg);img{filter:invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);}}}}@media ", "{margin:0 22px 0 0;padding:25px 0px;border-bottom:none;:hover,:focus,:focus-within{> ", ",:focus-within > ", "{visibility:visible;opacity:1;display:flex;}}:hover,:focus,:focus-within{background-color:transparent;", ";span{border-bottom:2px solid ", ";padding-bottom:2px;}", "{display:flex;opacity:1;visibility:visible;flex-direction:column;}}}@media ", "{margin:0 20px 0 0;}"], (0, _zIndex.default)('medium'), _ref31 => {
   let {
     theme
-  } = _ref30;
+  } = _ref31;
   return theme.color('grey_medium');
-}, _ref31 => {
+}, _ref32 => {
   let {
     theme
-  } = _ref31;
+  } = _ref32;
   return theme.color('red');
-}, _ref32 => {
+}, _ref33 => {
   let {
     theme
-  } = _ref32;
+  } = _ref33;
   return theme.allBreakpoints('Nav');
-}, SubNavMenu, SubNavMenu, (0, _zIndex.default)('high'), _ref33 => {
+}, SubNavMenu, SubNavMenu, (0, _zIndex.default)('high'), _ref34 => {
   let {
     theme
-  } = _ref33;
+  } = _ref34;
   return theme.color('black');
-}, SubNavMenu, _ref34 => {
+}, SubNavMenu, _ref35 => {
   let {
     theme
-  } = _ref34;
+  } = _ref35;
   return theme.allBreakpoints('NavWide');
 });
 const ChevronWrapper = exports.ChevronWrapper = _styledComponents.default.div.withConfig({
   displayName: "HeaderNav2025style__ChevronWrapper",
   componentId: "sc-xflhtq-9"
-})(["width:16px;position:absolute;top:20px;right:22px;height:16px;img{width:100%;display:block;height:auto;}@media ", "{position:absolute;top:10px;right:0;width:10px;}"], _ref35 => {
+})(["width:16px;position:absolute;top:20px;right:22px;height:16px;img{width:100%;display:block;height:auto;}@media ", "{position:absolute;top:10px;right:0;width:10px;}"], _ref36 => {
   let {
     theme
-  } = _ref35;
+  } = _ref36;
   return theme.allBreakpoints('Nav');
 });
 
@@ -262,47 +267,47 @@ const ChevronWrapper = exports.ChevronWrapper = _styledComponents.default.div.wi
 const NavMetaIcons = exports.NavMetaIcons = _styledComponents.default.div.withConfig({
   displayName: "HeaderNav2025style__NavMetaIcons",
   componentId: "sc-xflhtq-10"
-})(["width:auto;display:flex;align-items:center;flex-direction:column;background-color:inherit;> div{height:60px;width:100%;display:flex;border-bottom:1px solid ", ";> 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(", ");background-size:100%;background-repeat:no-repeat;}img{padding:5px;height:35px;width:35px;}span{transition:color 0.15s ease-out;}@media ", "{&:focus,&:hover{span{color:", ";}}}}&:first-child{margin-top:20px;}}@media ", "{display:none;}"], _ref36 => {
+})(["width:auto;display:flex;align-items:center;flex-direction:column;background-color:inherit;> div{height:60px;width:100%;display:flex;border-bottom:1px solid ", ";> 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(", ");background-size:100%;background-repeat:no-repeat;}img{padding:5px;height:35px;width:35px;}span{transition:color 0.15s ease-out;}@media ", "{&:focus,&:hover{span{color:", ";}}}}&:first-child{margin-top:20px;}}@media ", "{display:none;}"], _ref37 => {
   let {
     theme
-  } = _ref36;
+  } = _ref37;
   return theme.color('grey_medium');
-}, _arrowRight.default, _ref37 => {
+}, _arrowRight.default, _ref38 => {
   let {
     theme
-  } = _ref37;
+  } = _ref38;
   return theme.allBreakpoints('M');
-}, _ref38 => {
+}, _ref39 => {
   let {
     theme
-  } = _ref38;
+  } = _ref39;
   return theme.color('red');
-}, _ref39 => {
+}, _ref40 => {
   let {
     theme
-  } = _ref39;
+  } = _ref40;
   return theme.allBreakpoints('Nav');
 });
 const StyledText = exports.StyledText = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "HeaderNav2025style__StyledText",
   componentId: "sc-xflhtq-11"
-})(["@media ", "{font-size:15px;}@media ", "{font-size:1rem;}"], _ref40 => {
+})(["@media ", "{font-size:15px;}@media ", "{font-size:1rem;}"], _ref41 => {
   let {
     theme
-  } = _ref40;
+  } = _ref41;
   return theme.allBreakpoints('Nav');
-}, _ref41 => {
+}, _ref42 => {
   let {
     theme
-  } = _ref41;
+  } = _ref42;
   return theme.allBreakpoints('NavWide');
 });
 const DonateButtonWrapperBottom = exports.DonateButtonWrapperBottom = _styledComponents.default.div.withConfig({
   displayName: "HeaderNav2025style__DonateButtonWrapperBottom",
   componentId: "sc-xflhtq-12"
-})(["display:flex;justify-content:center;padding:35px 20px;background-color:inherit;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;}}@media ", "{display:none;}"], _ref42 => {
+})(["display:flex;justify-content:center;padding:35px 20px;background-color:inherit;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;}}@media ", "{display:none;}"], _ref43 => {
   let {
     theme
-  } = _ref42;
+  } = _ref43;
   return theme.allBreakpoints('Nav');
 });

package/dist/components/Organisms/Header2025/HeaderNav2025/MoreNav.style.js

@@ -100,7 +100,7 @@ const MoreNavSubItem = exports.MoreNavSubItem = (0, _styledComponents.default)(M
 const MoreNavNestedLink = exports.MoreNavNestedLink = (0, _styledComponents.default)(_HeaderNav.NavLink).withConfig({
   displayName: "MoreNavstyle__MoreNavNestedLink",
   componentId: "sc-68lngb-6"
-})(["padding:20px 25px 22px 42px;> div{height:auto;}", ";"], _ref13 => {
+})(["padding:20px 30px 22px 30px;> div{height:auto;}", ";"], _ref13 => {
   let {
     isSubMenuOpen
   } = _ref13;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.13.4",
+  "version": "8.13.6",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Organisms/Header2025/Header2025.style.js

@@ -14,11 +14,11 @@ const Header2025Wrapper = styled.header.attrs(() => ({
   height: 75px;
 
   @media ${({ theme }) => theme.allBreakpoints('Nav')} {
-    height: auto;
+    height: 86px;
   }
 
   ${({ showBoxShadow }) => showBoxShadow && css`
-    box-shadow: 0px 13px 15px 0 rgba(0, 0, 0, 0.15);
+    box-shadow: 0px 13px 15px 0 rgba(0, 0, 0, 0.05);
   `};
 `;
 
@@ -66,12 +66,13 @@ const DonateButtonWrapperTop = styled.div`
   display: flex;
   justify-content: center;
   margin-left: 5px;
+  height: 2.8rem;
 
   // Donate button
   a {
     width: 100%;
+    height: inherit;
     transition: width 0.4s cubic-bezier(0.5, 1.5, 0.5, 0.80);
-  
     &:hover,
     &:focus {
       width: 100%;

package/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js

@@ -1,4 +1,6 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, {
+  useState, useEffect, useCallback, useMemo
+} from 'react';
 import PropTypes from 'prop-types';
 
 import Text from '../../../Atoms/Text/Text';
@@ -20,7 +22,7 @@ const HeaderNav2025 = ({
   const { menuGroups } = navItems;
   const [isExpandable, setIsExpandable] = useState(false);
   const [openedSubMenu, setOpenedSubMenu] = useState({});
-  const [isNotDesktop, setIsNotDesktop] = useState(null);
+  const [isNotDesktop, setIsNotDesktop] = useState(false);
   const [processedItems, setProcessedItems] = useState(null);
   const [showMoreNav, setShowMoreNav] = useState(false);
   let theseGroups = null;
@@ -50,17 +52,20 @@ const HeaderNav2025 = ({
   };
 
   // Process the nav items on initial mount:
-  useEffect(() => {
-    // Divide up nav items accordingly and determine breakpoint,
-    // assigned as local vars since useState won't be ready in time below:
+  useMemo(() => {
+    // Divide up nav items accordingly
     const theseItems = MoreNavPreProcess(menuGroups, characterLimit);
-    const notDesktop = window.innerWidth < breakpointValues.Nav;
     setProcessedItems(theseItems);
+  }, [menuGroups, characterLimit]);
+
+  // Determine which nav we should use only once 'window' exists:
+  useEffect(() => {
+    const notDesktop = window.innerWidth < breakpointValues.Nav;
     setIsNotDesktop(notDesktop);
 
     // Use these flags to detemine if we render the More nav or not:
-    setShowMoreNav(!notDesktop && theseItems.moreNavGroups.length);
-  }, [menuGroups, characterLimit]);
+    setShowMoreNav(!notDesktop && processedItems.moreNavGroups.length);
+  }, [processedItems]);
 
   // Attach eventListener on mount and after potential changes
   // to showMoreNav triggered by a window resize:

package/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.style.js

@@ -121,11 +121,11 @@ const SubNavMenu = styled.ul`
     padding: 0;
     position: absolute;
     top: 86px;
-    left: -42px;
+    left: -29px;
     border-radius: 0 0 25px 25px;
     transition: opacity ${transitionDuration}s linear;
     opacity: 0;
-    box-shadow: 0px 13px 15px 0 rgba(0, 0, 0, 0.15);
+    box-shadow: 0px 13px 15px 0 rgba(0, 0, 0, 0.05);
   }
 `;
 
@@ -157,6 +157,11 @@ const SubNavLink = styled(NavLinkClass)`
   color: ${({ theme }) => theme.color('black')};
   height: auto;
   position: relative;
+
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    padding: 20px 30px 22px;
+  }
+
 `;
 
 /**

package/src/components/Organisms/Header2025/HeaderNav2025/MoreNav.style.js

@@ -164,7 +164,7 @@ const MoreNavSubItem = styled(MoreSubNavItem)`
 `;
 
 const MoreNavNestedLink = styled(NavLink)`
-  padding: 20px 25px 22px 42px;
+  padding: 20px 30px 22px 30px;
 
   > div {
     height: auto;