@comicrelief/component-library 8.13.0 → 8.13.2

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

@@ -476,6 +476,117 @@ const successCopy = (
 initialState = { isSuccess: false };
 const [success, setSuccess] = React.useState(false);
 
+<>
+<Header2025
+  characterLimit={50}
+  navItems={data}
+  rotate="true"
+    donateButton={
+    <>
+      <Link color="red" type="button" href="/donation">
+        Donate
+      </Link>
+    </>
+  }
+  metaIcons={
+    <>
+      <div>
+        <Icon
+          icon={esuIcon}
+          title="Newsletter"
+          target="_blank"
+          role="button"
+          href="#"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="esu"
+        />
+      </div>
+      <div>
+        <Icon
+          icon={payinIcon}
+          title="Pay in"
+          target="_blank"
+          role="button"
+          href="https://donation.comicrelief.com/?cartId=rnd23-fundraisingpayin"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="payin"
+        />
+      </div>
+
+      <div>
+        <Icon
+          icon={shopIcon}
+          title="Shop"
+          target="_blank"
+          role="button"
+          href="https://shop.comicrelief.com"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="shop"
+        />
+      </div>
+
+      <div>
+        <Icon
+          icon={searchIcon}
+          title="Search"
+          target="self"
+          role="button"
+          href="/search"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="search"
+        />
+      </div>
+    </>
+  }
+/>
+<div style={{height: "1000px", backgroundColor: "turquoise", width:"100%"}}>
+  <img style={{width: "100%", maxWidth:"1440px", margin: "0 auto", display: "block"}} src="https://images.ctfassets.net/zsfivwzfgl3t/ecqrPx7BesE3JsYR2ns0E/a374276ba6d8024b9cd7c6d27c911303/Manchester_Marathon.jpeg"/>
+</div>
+</>;
+```
+
+# -
+# Comic Relief minimal header
+
+```js
+import data from './data/data-live--minimal';
+import Link from '../../Atoms/Link/Link';
+import searchIcon from './assets/icon--search--2023.svg';
+import shopIcon from './assets/icon--shop--2023.svg';
+import payinIcon from './assets/PayIn.svg';
+import esuIcon from './assets/Post.svg';
+
+import Icon from '../../Atoms/SocialIcons/Icon/Icon';
+import RichText from '../../Atoms/RichText/RichText';
+
+const title = 'Stay in the know!';
+const topCopy = (
+  <RichText
+    markup={`<p>Get regular email updates and info on what we're up to!</p>`}
+  />
+);
+const privacyCopy = (
+  <RichText
+    markup={`<p>Our <a class="link link--white inline" href="/privacy-notice">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>`}
+  />
+);
+const successCopy = (
+  <RichText
+    markup={`<p>Thanks! Your first email will be with you shortly</p>`}
+  />
+);
+
+initialState = { isSuccess: false };
+const [success, setSuccess] = React.useState(false);
+
 <>
 <Header2025
   characterLimit={50}

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,33 @@ const Header2025Wrapper = exports.Header2025Wrapper = _styledComponents.default.
     theme
   } = _ref2;
   return theme.allBreakpoints('Nav');
+}, _ref3 => {
+  let {
+    showBoxShadow
+  } = _ref3;
+  return showBoxShadow && (0, _styledComponents.css)(["box-shadow:0 5px 15px 0 ", ";"], _ref4 => {
+    let {
+      theme
+    } = _ref4;
+    return theme.color('grey_4');
+  });
 });
 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, _ref5 => {
   let {
     theme
-  } = _ref3;
+  } = _ref5;
   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'), _ref6 => {
   let {
     theme
-  } = _ref4;
+  } = _ref6;
   return theme.allBreakpoints('Nav');
 });
 const DonateButtonWrapperTop = exports.DonateButtonWrapperTop = _styledComponents.default.div.withConfig({
@@ -50,20 +61,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;}}"], _ref7 => {
   let {
     theme
-  } = _ref5;
+  } = _ref7;
   return theme.allBreakpoints('Nav');
-}, _ref6 => {
+}, _ref8 => {
   let {
     theme
-  } = _ref6;
+  } = _ref8;
   return theme.color('white');
-}, _ref7 => {
+}, _ref9 => {
   let {
     theme
-  } = _ref7;
+  } = _ref9;
   return theme.allBreakpoints('NavWide');
 });
 const ButtonsAndIcons = exports.ButtonsAndIcons = _styledComponents.default.div.withConfig({

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

@@ -91,7 +91,8 @@ const HeaderNav2025 = _ref => {
     if (currentScreenWidth !== null && isNotDesktop !== isCurrentlyNotDesktop) {
       // 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) {
+      if (isCurrentlyNotDesktop && processedItems.moreNavGroups.length) {
+        // HERE CHERE
         document.getElementById('more-nav-ul').removeEventListener('mouseleave', resetMoreNavMouse);
       }
 
@@ -100,7 +101,7 @@ const HeaderNav2025 = _ref => {
 
       // And since we've changed breakpoints, use these flags
       // to determine if we should render the More nav or not,
-      setShowMoreNav(Boolean(!isCurrentlyNotDesktop && processedItems.moreNavGroups));
+      setShowMoreNav(Boolean(!isCurrentlyNotDesktop && processedItems.moreNavGroups.length));
     }
   }, [isNotDesktop, processedItems]);
 
@@ -155,14 +156,14 @@ const HeaderNav2025 = _ref => {
       internalLinkHelper: _internalLinkHelper.InternalLinkHelper,
       relNoopener: relNoopener
     });
-  }), showMoreNav && /*#__PURE__*/_react.default.createElement(_MoreNav.default, {
+  }), showMoreNav ? /*#__PURE__*/_react.default.createElement(_MoreNav.default, {
     processedItems: processedItems,
     openedSubMenu: openedSubMenu,
     toggleSubMenu: toggleSubMenu,
     navHelper: _navHelper.NavHelper,
     allowListed: _allowListed.default,
     internalLinkHelper: _internalLinkHelper.InternalLinkHelper
-  })), /*#__PURE__*/_react.default.createElement(_HeaderNav.NavMetaIcons, {
+  }) : null), /*#__PURE__*/_react.default.createElement(_HeaderNav.NavMetaIcons, {
     isHeader: true,
     "data-testid": "meta-icons--mobile"
   }, metaIcons), /*#__PURE__*/_react.default.createElement(_HeaderNav.DonateButtonWrapperBottom, {

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

@@ -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;&:first-of-type{border-top:none;}span{font-weight:100;}"], _ref18 => {
+})(["padding:0;height:100%;width:100%;border-top:1px solid ", ";;position:relative;transition:background-color ", "s ease;span{font-weight:100;}"], _ref18 => {
   let {
     theme
   } = _ref18;

package/dist/components/Organisms/Header2025/data/data-live--minimal.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  title: 'Header',
+  menuGroups: [{
+    title: 'GROUP1',
+    id: 'group1',
+    links: [{
+      title: 'Winter Appeal 2024',
+      path: 'https://www.comicrelief.com/winterappeal/',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }]
+  }, {
+    title: 'GROUP2',
+    id: 'group2',
+    links: [{
+      title: 'Red Nose Day',
+      path: 'https://www.comicrelief.com/rednoseday/schools',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Billy Monger: The Race is On',
+      path: 'https://www.comicrelief.com/rednoseday/challenges/billy',
+      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-two',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Our Funding strategy',
+      path: 'https://www.comicrelief.com/our-legacy-three',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Managing your funding',
+      path: 'https://www.comicrelief.com/our-legacy-four',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }]
+  }]
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.13.0",
+  "version": "8.13.2",
   "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

@@ -476,6 +476,117 @@ const successCopy = (
 initialState = { isSuccess: false };
 const [success, setSuccess] = React.useState(false);
 
+<>
+<Header2025
+  characterLimit={50}
+  navItems={data}
+  rotate="true"
+    donateButton={
+    <>
+      <Link color="red" type="button" href="/donation">
+        Donate
+      </Link>
+    </>
+  }
+  metaIcons={
+    <>
+      <div>
+        <Icon
+          icon={esuIcon}
+          title="Newsletter"
+          target="_blank"
+          role="button"
+          href="#"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="esu"
+        />
+      </div>
+      <div>
+        <Icon
+          icon={payinIcon}
+          title="Pay in"
+          target="_blank"
+          role="button"
+          href="https://donation.comicrelief.com/?cartId=rnd23-fundraisingpayin"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="payin"
+        />
+      </div>
+
+      <div>
+        <Icon
+          icon={shopIcon}
+          title="Shop"
+          target="_blank"
+          role="button"
+          href="https://shop.comicrelief.com"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="shop"
+        />
+      </div>
+
+      <div>
+        <Icon
+          icon={searchIcon}
+          title="Search"
+          target="self"
+          role="button"
+          href="/search"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="search"
+        />
+      </div>
+    </>
+  }
+/>
+<div style={{height: "1000px", backgroundColor: "turquoise", width:"100%"}}>
+  <img style={{width: "100%", maxWidth:"1440px", margin: "0 auto", display: "block"}} src="https://images.ctfassets.net/zsfivwzfgl3t/ecqrPx7BesE3JsYR2ns0E/a374276ba6d8024b9cd7c6d27c911303/Manchester_Marathon.jpeg"/>
+</div>
+</>;
+```
+
+# -
+# Comic Relief minimal header
+
+```js
+import data from './data/data-live--minimal';
+import Link from '../../Atoms/Link/Link';
+import searchIcon from './assets/icon--search--2023.svg';
+import shopIcon from './assets/icon--shop--2023.svg';
+import payinIcon from './assets/PayIn.svg';
+import esuIcon from './assets/Post.svg';
+
+import Icon from '../../Atoms/SocialIcons/Icon/Icon';
+import RichText from '../../Atoms/RichText/RichText';
+
+const title = 'Stay in the know!';
+const topCopy = (
+  <RichText
+    markup={`<p>Get regular email updates and info on what we're up to!</p>`}
+  />
+);
+const privacyCopy = (
+  <RichText
+    markup={`<p>Our <a class="link link--white inline" href="/privacy-notice">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>`}
+  />
+);
+const successCopy = (
+  <RichText
+    markup={`<p>Thanks! Your first email will be with you shortly</p>`}
+  />
+);
+
+initialState = { isSuccess: false };
+const [success, setSuccess] = React.useState(false);
+
 <>
 <Header2025
   characterLimit={50}

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: 0 5px 15px 0 ${({ theme }) => theme.color('grey_4')};
+  `};
 `;
 
 const InnerWrapper = styled.div`

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

@@ -82,7 +82,8 @@ const HeaderNav2025 = ({
     if (currentScreenWidth !== null && (isNotDesktop !== isCurrentlyNotDesktop)) {
       // 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) {
+      if (isCurrentlyNotDesktop && processedItems.moreNavGroups.length) {
+        // HERE CHERE
         document.getElementById('more-nav-ul').removeEventListener('mouseleave', resetMoreNavMouse);
       }
 
@@ -91,7 +92,7 @@ const HeaderNav2025 = ({
 
       // And since we've changed breakpoints, use these flags
       // to determine if we should render the More nav or not,
-      setShowMoreNav(Boolean(!isCurrentlyNotDesktop && processedItems.moreNavGroups));
+      setShowMoreNav(Boolean(!isCurrentlyNotDesktop && processedItems.moreNavGroups.length));
     }
   }, [isNotDesktop, processedItems]);
 
@@ -150,7 +151,7 @@ const HeaderNav2025 = ({
             })}
 
             {/* Only actually render 'More' nav stuff when we've got content */}
-            {showMoreNav && (
+            {showMoreNav ? (
               <MoreNav
                 processedItems={processedItems}
                 openedSubMenu={openedSubMenu}
@@ -159,7 +160,7 @@ const HeaderNav2025 = ({
                 allowListed={allowListed}
                 internalLinkHelper={InternalLinkHelper}
               />
-            )}
+            ) : null}
 
           </NavMenu>
         )}

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

@@ -140,10 +140,6 @@ 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/data/data-live--minimal.js

@@ -0,0 +1,79 @@
+export default {
+  title: 'Header',
+  menuGroups: [
+    {
+      title: 'GROUP1',
+      id: 'group1',
+      links: [
+        {
+          title: 'Winter Appeal 2024',
+          path: 'https://www.comicrelief.com/winterappeal/',
+          internal: {
+            type: 'ContentfulPageLandingPage'
+          }
+        }
+      ]
+    },
+    {
+      title: 'GROUP2',
+      id: 'group2',
+      links: [
+        {
+          title: 'Red Nose Day',
+          path: 'https://www.comicrelief.com/rednoseday/schools',
+          internal: {
+            type: 'ContentfulPageLandingPage'
+          }
+        },
+        {
+          title: 'Billy Monger: The Race is On',
+          path: 'https://www.comicrelief.com/rednoseday/challenges/billy',
+          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-two',
+          internal: {
+            type: 'ContentfulPageLandingPage'
+          }
+        },
+        {
+          title: 'Our Funding strategy',
+          path: 'https://www.comicrelief.com/our-legacy-three',
+          internal: {
+            type: 'ContentfulPageLandingPage'
+          }
+        },
+        {
+          title: 'Managing your funding',
+          path: 'https://www.comicrelief.com/our-legacy-four',
+          internal: {
+            type: 'ContentfulPageLandingPage'
+          }
+        }
+      ]
+    }
+  ]
+};