@comicrelief/component-library 8.13.2 → 8.13.4

package/dist/components/Organisms/Header2025/Header2025.md

@@ -478,6 +478,7 @@ const [success, setSuccess] = React.useState(false);
 
 <>
 <Header2025
+  showBoxShadow="true"
   characterLimit={50}
   navItems={data}
   rotate="true"
@@ -589,6 +590,7 @@ const [success, setSuccess] = React.useState(false);
 
 <>
 <Header2025
+  showBoxShadow="true"
   characterLimit={50}
   navItems={data}
   rotate="true"

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

@@ -29,29 +29,24 @@ const Header2025Wrapper = exports.Header2025Wrapper = _styledComponents.default.
   let {
     showBoxShadow
   } = _ref3;
-  return showBoxShadow && (0, _styledComponents.css)(["box-shadow:0 5px 15px 0 ", ";"], _ref4 => {
-    let {
-      theme
-    } = _ref4;
-    return theme.color('grey_4');
-  });
+  return showBoxShadow && (0, _styledComponents.css)(["box-shadow:0px 13px 15px 0 rgba(0,0,0,0.15);"]);
 });
 const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "Header2025style__InnerWrapper",
   componentId: "sc-7gs40r-1"
-})(["display:flex;align-items:center;height:100%;padding:0 12px;cursor:pointer;max-width:", ";@media ", "{margin:0 auto;}"], _containers.default.large, _ref5 => {
+})(["display:flex;align-items:center;height:100%;padding:0 12px;cursor:pointer;max-width:", ";@media ", "{margin:0 auto;}"], _containers.default.large, _ref4 => {
   let {
     theme
-  } = _ref5;
+  } = _ref4;
   return theme.allBreakpoints('Nav');
 });
 const Brand = exports.Brand = _styledComponents.default.div.withConfig({
   displayName: "Header2025style__Brand",
   componentId: "sc-7gs40r-2"
-})(["", ";margin-right:auto;display:flex;align-items:center;a{border:0;color:transparent;margin-right:25px;img{width:100%;object-fit:contain;}:hover{border:0;}}@media ", "{margin-right:0}"], (0, _zIndex.default)('high'), _ref6 => {
+})(["", ";margin-right:auto;display:flex;align-items:center;a{border:0;color:transparent;margin-right:25px;img{width:100%;object-fit:contain;}:hover{border:0;}}@media ", "{margin-right:0}"], (0, _zIndex.default)('high'), _ref5 => {
   let {
     theme
-  } = _ref6;
+  } = _ref5;
   return theme.allBreakpoints('Nav');
 });
 const DonateButtonWrapperTop = exports.DonateButtonWrapperTop = _styledComponents.default.div.withConfig({
@@ -61,20 +56,20 @@ const DonateButtonWrapperTop = exports.DonateButtonWrapperTop = _styledComponent
 const Header2025MetaIcons = exports.Header2025MetaIcons = _styledComponents.default.div.withConfig({
   displayName: "Header2025style__Header2025MetaIcons",
   componentId: "sc-7gs40r-4"
-})(["display:none;@media ", "{width:auto;align-items:center;> div{height:35px;width:auto;display:inline-block;> a{height:inherit;width:inherit;margin-right:6px;img{padding:5px 7px;height:inherit;width:inherit;}}}position:relative;display:flex;align-items:center;background-color:", ";margin-right:0px;right:0px;}@media ", "{> div > a{margin-right:20px;}}"], _ref7 => {
+})(["display:none;@media ", "{width:auto;align-items:center;> div{height:35px;width:auto;display:inline-block;> a{height:inherit;width:inherit;margin-right:6px;img{padding:5px 7px;height:inherit;width:inherit;}}}position:relative;display:flex;align-items:center;background-color:", ";margin-right:0px;right:0px;}@media ", "{> div > a{margin-right:20px;}}"], _ref6 => {
   let {
     theme
-  } = _ref7;
+  } = _ref6;
   return theme.allBreakpoints('Nav');
-}, _ref8 => {
+}, _ref7 => {
   let {
     theme
-  } = _ref8;
+  } = _ref7;
   return theme.color('white');
-}, _ref9 => {
+}, _ref8 => {
   let {
     theme
-  } = _ref9;
+  } = _ref8;
   return theme.allBreakpoints('NavWide');
 });
 const ButtonsAndIcons = exports.ButtonsAndIcons = _styledComponents.default.div.withConfig({

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

@@ -92,7 +92,6 @@ const HeaderNav2025 = _ref => {
       // If we've changed from desktop to not, remove any previously-attached MoreNav event
       // listeners, BEFORE we update the flag that'd remove the elements from the DOM:
       if (isCurrentlyNotDesktop && processedItems.moreNavGroups.length) {
-        // HERE CHERE
         document.getElementById('more-nav-ul').removeEventListener('mouseleave', resetMoreNavMouse);
       }
 

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

@@ -59,7 +59,7 @@ const NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
 const Nav = exports.Nav = _styledComponents.default.nav.withConfig({
   displayName: "HeaderNav2025style__Nav",
   componentId: "sc-xflhtq-1"
-})(["display:", ";width:100%;position:absolute;top:75px;left:0;", ";background-color:", ";box-shadow:0px 20px 20px 5px rgba(0,0,0,0.25);@media ", "{width:50%;right:0;left:inherit;box-shadow:-20px 15px 20px 0px rgba(0,0,0,0.25);}@media ", "{", ";position:relative;top:0;display:block;margin:0;width:auto;height:100%;box-shadow:none;}@media ", "{margin:0 10px;}> h2{", ";}"], _ref8 => {
+})(["display:", ";width:100%;position:absolute;top:75px;left:0;", ";background-color:", ";box-shadow:0px 20px 20px 5px rgba(0,0,0,0.25);@media ", "{width:50%;right:0;left:inherit;box-shadow:-20px 15px 20px 0px rgba(0,0,0,0.25);}@media ", "{", ";position:relative;top:0;display:block;margin:0;width:100%;height:100%;box-shadow:none;}@media ", "{margin:0 10px;}> h2{", ";}"], _ref8 => {
   let {
     isExpandable
   } = _ref8;
@@ -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:-5px;border-radius:0 0 25px 25px;transition:opacity ", "s ease;opacity:0;box-shadow:0px 20px 20px 5px rgba(0,0,0,0.25);}"], _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:-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 => {
   let {
     isSubMenuOpen
   } = _ref13;
@@ -125,7 +125,7 @@ const SubNavMenu = exports.SubNavMenu = _styledComponents.default.ul.withConfig(
 const SubNavItem = exports.SubNavItem = _styledComponents.default.li.withConfig({
   displayName: "HeaderNav2025style__SubNavItem",
   componentId: "sc-xflhtq-3"
-})(["padding:0;height:100%;width:100%;border-top:1px solid ", ";;position:relative;transition:background-color ", "s ease;span{font-weight:100;}"], _ref18 => {
+})(["padding:0;height:100%;width:100%;border-top:1px solid ", ";;position:relative;transition:background-color ", "s ease;&:first-of-type{border-top:none;}span{font-weight:100;}"], _ref18 => {
   let {
     theme
   } = _ref18;

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

@@ -75,7 +75,7 @@ const MoreNav = _ref => {
       return (
         /*#__PURE__*/
         // 'More Nav' sub item:
-        _react.default.createElement(_MoreNav.MoreSubNavItem, {
+        _react.default.createElement(_MoreNav.MoreNavSubItem, {
           key: thisSubUrl
         }, /*#__PURE__*/_react.default.createElement(_MoreNav.MoreSubNavLink, {
           href: thisSubUrl,

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

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MoreSubNavMenu = exports.MoreSubNavLink = exports.MoreSubNavItem = exports.MoreNestedSubNavMenu = exports.MoreNavNestedLink = exports.MoreNavLabel = exports.MoreNavItem = void 0;
+exports.MoreSubNavMenu = exports.MoreSubNavLink = exports.MoreSubNavItem = exports.MoreNestedSubNavMenu = exports.MoreNavSubItem = exports.MoreNavNestedLink = exports.MoreNavLabel = exports.MoreNavItem = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _HeaderNav = require("./HeaderNav2025.style");
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
@@ -47,7 +47,7 @@ const MoreNavLabel = exports.MoreNavLabel = (0, _styledComponents.default)(_Text
 const MoreNavItem = exports.MoreNavItem = (0, _styledComponents.default)(_HeaderNav.NavItem).withConfig({
   displayName: "MoreNavstyle__MoreNavItem",
   componentId: "sc-68lngb-2"
-})(["@media ", "{margin-left:22px;", " > ", "{transition:transform 0.35s cubic-bezier(0.41,1.64,0.41,0.8);}:hover,:focus{", "{color:", ";> ", "{transform:rotate(-180deg);img{filter:invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);}}}}:hover,:focus,:focus-within{> ", "{border-bottom:none;padding-bottom:10px;}> ", "{visibility:visible;opacity:1;display:flex;flex-direction:column;}}:focus{> ", "{visibility:hidden !important;opacity:0 !important;display:none !important;}}}@media ", "{margin-left:20px;}"], _ref6 => {
+})(["@media ", "{margin-left:22px;display:flex;flex-grow:0.5;", " > ", "{transition:transform 0.35s cubic-bezier(0.41,1.64,0.41,0.8);}:hover,:focus{", "{color:", ";> ", "{transform:rotate(-180deg);img{filter:invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);}}}}:hover,:focus,:focus-within{> ", "{border-bottom:none;padding-bottom:10px;}> ", "{visibility:visible;opacity:1;display:flex;flex-direction:column;}}:focus{> ", "{visibility:hidden !important;opacity:0 !important;display:none !important;}}}@media ", "{margin-left:20px;}"], _ref6 => {
   let {
     theme
   } = _ref6;
@@ -88,21 +88,30 @@ const MoreSubNavItem = exports.MoreSubNavItem = (0, _styledComponents.default)(_
   } = _ref11;
   return theme.color('red');
 }, _HeaderNav.ChevronWrapper);
+const MoreNavSubItem = exports.MoreNavSubItem = (0, _styledComponents.default)(MoreSubNavItem).withConfig({
+  displayName: "MoreNavstyle__MoreNavSubItem",
+  componentId: "sc-68lngb-5"
+})(["&:first-of-type{border-top:1px solid ", ";}"], _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.color('grey_medium');
+});
 const MoreNavNestedLink = exports.MoreNavNestedLink = (0, _styledComponents.default)(_HeaderNav.NavLink).withConfig({
   displayName: "MoreNavstyle__MoreNavNestedLink",
-  componentId: "sc-68lngb-5"
-})(["padding:20px 25px 22px 42px;> div{height:auto;}", ";"], _ref12 => {
+  componentId: "sc-68lngb-6"
+})(["padding:20px 25px 22px 42px;> div{height:auto;}", ";"], _ref13 => {
   let {
     isSubMenuOpen
-  } = _ref12;
-  return isSubMenuOpen && (0, _styledComponents.css)(["color:", ";> ", "{transform:rotate(-180deg);img{filter:invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);}}"], _ref13 => {
+  } = _ref13;
+  return isSubMenuOpen && (0, _styledComponents.css)(["color:", ";> ", "{transform:rotate(-180deg);img{filter:invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);}}"], _ref14 => {
     let {
       theme
-    } = _ref13;
+    } = _ref14;
     return theme.color('red');
   }, _HeaderNav.ChevronWrapper);
 });
 const MoreSubNavLink = exports.MoreSubNavLink = (0, _styledComponents.default)(_HeaderNav.SubNavLink).withConfig({
   displayName: "MoreNavstyle__MoreSubNavLink",
-  componentId: "sc-68lngb-6"
+  componentId: "sc-68lngb-7"
 })([""]);

package/package.json

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

package/src/components/Organisms/Header2025/Header2025.md

@@ -478,6 +478,7 @@ const [success, setSuccess] = React.useState(false);
 
 <>
 <Header2025
+  showBoxShadow="true"
   characterLimit={50}
   navItems={data}
   rotate="true"
@@ -589,6 +590,7 @@ const [success, setSuccess] = React.useState(false);
 
 <>
 <Header2025
+  showBoxShadow="true"
   characterLimit={50}
   navItems={data}
   rotate="true"

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

@@ -18,7 +18,7 @@ const Header2025Wrapper = styled.header.attrs(() => ({
   }
 
   ${({ showBoxShadow }) => showBoxShadow && css`
-    box-shadow: 0 5px 15px 0 ${({ theme }) => theme.color('grey_4')};
+    box-shadow: 0px 13px 15px 0 rgba(0, 0, 0, 0.15);
   `};
 `;
 

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

@@ -83,7 +83,6 @@ const HeaderNav2025 = ({
       // If we've changed from desktop to not, remove any previously-attached MoreNav event
       // listeners, BEFORE we update the flag that'd remove the elements from the DOM:
       if (isCurrentlyNotDesktop && processedItems.moreNavGroups.length) {
-        // HERE CHERE
         document.getElementById('more-nav-ul').removeEventListener('mouseleave', resetMoreNavMouse);
       }
 

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

@@ -81,7 +81,7 @@ const Nav = styled.nav`
     top: 0;
     display: block;
     margin: 0;
-    width: auto;
+    width: 100%;
     height: 100%;
     box-shadow: none;
   }
@@ -121,11 +121,11 @@ const SubNavMenu = styled.ul`
     padding: 0;
     position: absolute;
     top: 86px;
-    left: -5px;
+    left: -42px;
     border-radius: 0 0 25px 25px;
-    transition: opacity ${transitionDuration}s ease;
+    transition: opacity ${transitionDuration}s linear;
     opacity: 0;
-    box-shadow: 0px 20px 20px 5px rgba(0, 0, 0, 0.25);
+    box-shadow: 0px 13px 15px 0 rgba(0, 0, 0, 0.15);
   }
 `;
 
@@ -140,6 +140,10 @@ const SubNavItem = styled.li`
   position: relative;
   transition: background-color ${transitionDuration}s ease;
 
+  &:first-of-type {
+    border-top: none;
+  }
+
   span {
     font-weight: 100;
   }

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

@@ -13,7 +13,8 @@ import {
   MoreNestedSubNavMenu,
   MoreSubNavItem,
   MoreNavNestedLink,
-  MoreSubNavLink
+  MoreSubNavLink,
+  MoreNavSubItem
 } from './MoreNav.style';
 
 const MoreNav = ({
@@ -96,7 +97,7 @@ const MoreNav = ({
                     const thisSubUrl = navHelper(subChild);
                     return (
                       // 'More Nav' sub item:
-                      <MoreSubNavItem key={thisSubUrl}>
+                      <MoreNavSubItem key={thisSubUrl}>
                         <MoreSubNavLink
                           href={thisSubUrl}
                           inline
@@ -109,7 +110,7 @@ const MoreNav = ({
                             {subChild.title}
                           </Text>
                         </MoreSubNavLink>
-                      </MoreSubNavItem>
+                      </MoreNavSubItem>
                     );
                   })}
                 </MoreNestedSubNavMenu>

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

@@ -57,6 +57,9 @@ const MoreNavLabel = styled(Text)`
 const MoreNavItem = styled(NavItem)`
   @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     margin-left: 22px;
+    // Let it take up all the space to be a bigger target:
+    display: flex;
+    flex-grow: 0.5;
 
     // Chevron icon:
     ${MoreNavLabel} > ${ChevronWrapper} {
@@ -154,6 +157,12 @@ const MoreSubNavItem = styled(SubNavItem)`
   }
 `;
 
+const MoreNavSubItem = styled(MoreSubNavItem)`
+  &:first-of-type {
+    border-top: 1px solid ${({ theme }) => theme.color('grey_medium')};
+  }
+`;
+
 const MoreNavNestedLink = styled(NavLink)`
   padding: 20px 25px 22px 42px;
 
@@ -186,5 +195,6 @@ export {
   MoreNestedSubNavMenu,
   MoreSubNavItem,
   MoreNavNestedLink,
-  MoreSubNavLink
+  MoreSubNavLink,
+  MoreNavSubItem
 };