@comicrelief/component-library 8.13.0 → 8.13.1

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/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/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.1",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

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/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/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'
+          }
+        }
+      ]
+    }
+  ]
+};