@comicrelief/component-library 8.13.1 → 8.13.3

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

@@ -16,10 +16,12 @@ const Header2025 = _ref => {
     campaign = 'Comic Relief',
     donateButton = null,
     characterLimit = 60,
+    showBoxShadow = false,
     ...rest
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Header.Header2025Wrapper, Object.assign({
-    navItems: true
+    navItems: true,
+    showBoxShadow: showBoxShadow
   }, rest), /*#__PURE__*/_react.default.createElement(_Header.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Header.Brand, null, /*#__PURE__*/_react.default.createElement(_Logos.default, {
     campaign: campaign,
     sizeSm: "50px",

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

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InnerWrapper = exports.Header2025Wrapper = exports.Header2025MetaIcons = exports.DonateButtonWrapperTop = exports.ButtonsAndIcons = exports.Brand = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 var _containers = _interopRequireDefault(require("../../../theme/shared/containers"));
 require("./annoying.css");
@@ -14,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:auto;}", ";"], _ref => {
   let {
     theme
   } = _ref;
@@ -24,23 +25,28 @@ const Header2025Wrapper = exports.Header2025Wrapper = _styledComponents.default.
     theme
   } = _ref2;
   return theme.allBreakpoints('Nav');
+}, _ref3 => {
+  let {
+    showBoxShadow
+  } = _ref3;
+  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, _ref3 => {
+})(["display:flex;align-items:center;height:100%;padding:0 12px;cursor:pointer;max-width:", ";@media ", "{margin:0 auto;}"], _containers.default.large, _ref4 => {
   let {
     theme
-  } = _ref3;
+  } = _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'), _ref4 => {
+})(["", ";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
-  } = _ref4;
+  } = _ref5;
   return theme.allBreakpoints('Nav');
 });
 const DonateButtonWrapperTop = exports.DonateButtonWrapperTop = _styledComponents.default.div.withConfig({
@@ -50,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;}}"], _ref5 => {
+})(["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
-  } = _ref5;
+  } = _ref6;
   return theme.allBreakpoints('Nav');
-}, _ref6 => {
+}, _ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme.color('white');
-}, _ref7 => {
+}, _ref8 => {
   let {
     theme
-  } = _ref7;
+  } = _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

@@ -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:-5px;border-radius:0 0 25px 25px;transition:opacity ", "s ease;opacity:0;box-shadow:0px 13px 15px 0 rgba(0,0,0,0.15);}"], _ref13 => {
   let {
     isSubMenuOpen
   } = _ref13;

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"));
@@ -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.1",
+  "version": "8.13.3",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

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

@@ -9,9 +9,10 @@ import {
 } from './Header2025.style';
 
 const Header2025 = ({
-  navItems = {}, metaIcons, campaign = 'Comic Relief', donateButton = null, characterLimit = 60, ...rest
+  navItems = {}, metaIcons, campaign = 'Comic Relief', donateButton = null,
+  characterLimit = 60, showBoxShadow = false, ...rest
 }) => (
-  <Header2025Wrapper navItems {...rest}>
+  <Header2025Wrapper navItems showBoxShadow={showBoxShadow} {...rest}>
     <InnerWrapper>
       <Brand>
         <Logos
@@ -56,7 +57,8 @@ Header2025.propTypes = {
   // ... and is supplied separately to allow more render control:
   donateButton: PropTypes.node,
   campaign: PropTypes.string,
-  characterLimit: PropTypes.number
+  characterLimit: PropTypes.number,
+  showBoxShadow: PropTypes.bool
 };
 
 export default Header2025;

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import zIndex from '../../../theme/shared/zIndex';
 import containers from '../../../theme/shared/containers';
@@ -16,6 +16,10 @@ const Header2025Wrapper = styled.header.attrs(() => ({
   @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     height: auto;
   }
+
+  ${({ showBoxShadow }) => showBoxShadow && css`
+    box-shadow: 0px 13px 15px 0 rgba(0, 0, 0, 0.15);
+  `};
 `;
 
 const InnerWrapper = styled.div`

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

@@ -125,7 +125,7 @@ const SubNavMenu = styled.ul`
     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);
+    box-shadow: 0px 13px 15px 0 rgba(0, 0, 0, 0.15);
   }
 `;
 

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

@@ -154,6 +154,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 +192,6 @@ export {
   MoreNestedSubNavMenu,
   MoreSubNavItem,
   MoreNavNestedLink,
-  MoreSubNavLink
+  MoreSubNavLink,
+  MoreNavSubItem
 };