@comicrelief/component-library 8.12.1 → 8.13.1

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

@@ -0,0 +1,23 @@
+/* eslint-disable react/jsx-wrap-multilines */
+// import React from 'react';
+import 'jest-styled-components';
+// import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
+// import Header from './Header';
+
+// import data from './data/data';
+// import Link from '../../Atoms/Link/Link';
+
+it('renders correctly', () => {
+  // const tree = renderWithTheme(
+  //   <Header
+  //     navItems={data}
+  //     metaIcons={
+  //       <Link color="green" type="button" href="/donation">
+  //         Donate
+  //       </Link>
+  //     }
+  //   />
+  // ).toJSON();
+
+  // expect(tree).toMatchSnapshot();
+});

package/src/index.js

@@ -42,6 +42,7 @@ export { default as CardDs } from './components/Molecules/CardDs/CardDs';
 export { default as Box } from './components/Molecules/Box/Box';
 export { default as ArticleTeaser } from './components/Molecules/ArticleTeaser/ArticleTeaser';
 export { default as Header } from './components/Organisms/Header/Header';
+export { default as Header2025 } from './components/Organisms/Header2025/Header2025';
 export { default as Donate } from './components/Organisms/Donate/Donate';
 export { default as DoubleCopy } from './components/Molecules/DoubleCopy/DoubleCopy';
 export { default as PartnerLink } from './components/Molecules/PartnerLink/PartnerLink';

package/src/styleguide/data/data.js

@@ -62,63 +62,63 @@ const carouselItemsComplete = {
   node1Amount: '1,000',
   node1Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node2Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
   node2Amount: '750,000',
   node2Image: {
     file: {
-      url: 'https://images.ctfassets.net/zsfivwzfgl3t/5uKnps3prnG6GpTM1EPZdC/8d7264465846de31e3bbb5b6b2c36c8f/014-helping_hand.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node3Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
   node3Amount: '3,000',
   node3Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node4Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
   node4Amount: '4,000',
   node4Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node5Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
   node5Amount: '5,000',
   node5Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node6Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
   node6Amount: '6,000',
   node6Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node7Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
   node7Amount: '7,000',
   node7Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node8Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
   node8Amount: '8,000',
   node8Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node9Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
   node9Amount: '9,000',
   node9Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   }
 };
@@ -136,34 +136,34 @@ const carouselItemsIncomplete = {
   node1Amount: '1,000',
   node1Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node2Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
   node2Amount: '750,000',
   node2Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node3Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
   node3Amount: '3,000',
   node3Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node4Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
   node4Amount: '4,000',
   node4Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node5Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
   node5Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node6Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
@@ -176,7 +176,7 @@ const carouselItemsIncomplete = {
   node8Amount: null,
   node8Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node9_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
@@ -197,28 +197,28 @@ const carouselItemsMinimal = {
   node1Amount: '1,000',
   node1Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node2Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
   node2Amount: '750,000',
   node2Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node3Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
   node3Amount: '3,000',
   node3Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   },
   node4Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
   node4Amount: '4,000',
   node4Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: '//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png'
     }
   }
 };

package/src/theme/shared/allBreakpoints.js

@@ -7,6 +7,7 @@ export const breakpointValues = {
   M: 740,
   L: 1024,
   Nav: 1150,
+  NavWide: 1350,
   XL: 1440
 };
 

package/src/utils/navHelper.js

@@ -12,4 +12,27 @@ const NavHelper = navItem => {
   return thisUrl;
 };
 
-export default NavHelper;
+const MoreNavPreProcess = (menuGroups, characterLimit) => {
+  let characterCount = 0;
+  const overLimit = false;
+  const standardGroups = [];
+  const moreNavGroups = [];
+
+  menuGroups.map(group => {
+    // As this first item is used as our top level parent 'button' link,
+    // look to this to grab the amount of copied rendered:
+    const thisFirstChild = group.links[0];
+
+    // Keep track of how many characters our nav has in total:
+    characterCount += thisFirstChild.title.length;
+
+    // Assign groups to the relevant array if we're over the limit
+    return characterCount > characterLimit !== overLimit
+      ? moreNavGroups.push(group)
+      : standardGroups.push(group);
+  });
+
+  return { standardGroups, moreNavGroups };
+};
+
+export { NavHelper, MoreNavPreProcess };