@comicrelief/component-library 8.12.0 → 8.13.0

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

@@ -0,0 +1,156 @@
+"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: 'Sport Relief',
+      path: 'https://www.comicrelief.com/fundraising/pay-in-your-money',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Run 30 Miles in June',
+      path: 'https://www.comicrelief.com/rednoseday',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Be a Good Sport: Schools',
+      path: 'https://www.comicrelief.com/join',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Win a trip to New York with Major League Baseball',
+      path: 'https://www.comicrelief.com/squads',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }]
+  }, {
+    title: 'GROUP2',
+    id: 'group2',
+    links: [{
+      title: 'Red Nose Day',
+      path: 'https://www.comicrelief.com/rednoseday/schools',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'The New Red Nose',
+      path: 'https://www.comicrelief.com/rednoseday/schools',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'The Red Nose Day Nosey Awards',
+      path: 'https://www.comicrelief.com/rednoseday/schools',
+      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',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Our Funding strategy',
+      path: 'https://www.comicrelief.com/our-legacy',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Managing your funding',
+      path: 'https://www.comicrelief.com/our-legacy',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }]
+  }, {
+    title: 'GROUP4',
+    id: 'group4',
+    links: [{
+      title: 'What Your Money Does',
+      path: 'https://www.comicrelief.com/rednoseday/schools/primary-schools',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Reports & Publications',
+      path: 'https://www.comicrelief.com/rednoseday/schools/secondary-schools',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }]
+  }, {
+    title: 'GROUP5',
+    id: 'group5',
+    links: [{
+      title: 'Get Involved',
+      url: 'https://www.comicrelief.com/working-with-us/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Do your own fundraising',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Regular Donations',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Run for Comic Relief',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'How to pay in your fundraising money',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Partners',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }]
+  }]
+};

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

@@ -0,0 +1,25 @@
+"use strict";
+
+require("jest-styled-components");
+/* eslint-disable react/jsx-wrap-multilines */
+// import React from 'react';
+
+// 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/dist/index.js

@@ -136,6 +136,12 @@ Object.defineProperty(exports, "Header", {
     return _Header.default;
   }
 });
+Object.defineProperty(exports, "Header2025", {
+  enumerable: true,
+  get: function () {
+    return _Header2.default;
+  }
+});
 Object.defineProperty(exports, "HeroBanner", {
   enumerable: true,
   get: function () {
@@ -449,6 +455,7 @@ var _CardDs = _interopRequireDefault(require("./components/Molecules/CardDs/Card
 var _Box = _interopRequireDefault(require("./components/Molecules/Box/Box"));
 var _ArticleTeaser = _interopRequireDefault(require("./components/Molecules/ArticleTeaser/ArticleTeaser"));
 var _Header = _interopRequireDefault(require("./components/Organisms/Header/Header"));
+var _Header2 = _interopRequireDefault(require("./components/Organisms/Header2025/Header2025"));
 var _Donate = _interopRequireDefault(require("./components/Organisms/Donate/Donate"));
 var _DoubleCopy = _interopRequireDefault(require("./components/Molecules/DoubleCopy/DoubleCopy"));
 var _PartnerLink = _interopRequireDefault(require("./components/Molecules/PartnerLink/PartnerLink"));

package/dist/styleguide/data/data.js

@@ -53,63 +53,63 @@ const carouselItemsComplete = exports.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'
     }
   }
 };
@@ -126,34 +126,34 @@ const carouselItemsIncomplete = exports.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.',
@@ -166,7 +166,7 @@ const carouselItemsIncomplete = exports.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.',
@@ -186,28 +186,28 @@ const carouselItemsMinimal = exports.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/dist/theme/shared/allBreakpoints.js

@@ -13,6 +13,7 @@ const breakpointValues = exports.breakpointValues = {
   M: 740,
   L: 1024,
   Nav: 1150,
+  NavWide: 1350,
   XL: 1440
 };
 var _default = size => {

package/dist/utils/navHelper.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.NavHelper = exports.MoreNavPreProcess = void 0;
 /* Determine where to grab the URL, depending on the component type and values supplied */
 const NavHelper = navItem => {
   /* Default url path location for 'Pages' */
@@ -13,4 +13,26 @@ const NavHelper = navItem => {
   }
   return thisUrl;
 };
-var _default = exports.default = NavHelper;
+exports.NavHelper = 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
+  };
+};
+exports.MoreNavPreProcess = MoreNavPreProcess;

package/package.json

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

package/playwright.config.js

@@ -19,7 +19,7 @@ module.exports = defineConfig({
   workers: 2,
   timeout: 60 * 1000,
   expect: {
-    timeout: 60 * 1000,
+    timeout: 60 * 1000
   },
   reporter: [
     ['list'],
@@ -28,15 +28,22 @@ module.exports = defineConfig({
   use: {
     actionTimeout: 0,
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: 'on-first-retry'
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: {
+          // Match our widest nav:
+          width: 1300,
+          height: 1000
+        }
+      }
+    }
   ],
 
   /* Run your local dev server before starting the tests */
@@ -44,6 +51,6 @@ module.exports = defineConfig({
     command: 'yarn styleguide',
     port: '6060',
     timeout: 120000,
-    reuseExistingServer: true,
-  },
+    reuseExistingServer: true
+  }
 });

package/src/components/Atoms/SocialIcons/Icon/Icon.js

@@ -1,18 +1,89 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import { kebabCase } from 'lodash';
 import hideVisually from '../../../../theme/shared/hideVisually';
+import Text from '../../Text/Text';
+
+const RevealTextWidth = 55;
+const RevealTextSpeed = 0.35;
 
 const StyledLink = styled.a`
   text-decoration: none;
   cursor: pointer;
   display: block;
+  position: relative;
   transition: opacity 0.2s;
 
   &:hover,
   &:focus {
     opacity: 0.6;
   }
+
+  // 'isHeader' is only set and passed in Header2025, so the pre-existing Header isn't affected:
+  ${({ isHeader }) => isHeader && css`
+    overflow: hidden;
+    padding-right: 0px;
+    transition: padding-right ${RevealTextSpeed}s cubic-bezier(0.5, 1.5, 0.5, 0.75);
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+    
+    // No hover state for mobile, so targetting Medium+:
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
+      &:hover,
+      &:focus {        
+        img {
+          filter: invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);
+        }
+      }
+    }
+
+    @media ${({ theme }) => theme.allBreakpoints('NavWide')} {
+      &:hover,
+      &:focus {
+        // Default
+        padding-right: ${RevealTextWidth}px;
+  
+        // Tweak for ESU's longer text:
+        &[data-testid="header-esu"] {
+          padding-right: 92px;
+        }
+  
+        // Tweak for Shop's shorter text:
+        &[data-testid="header-shop"] {
+          padding-right: 48px;
+        }
+        
+        // Show the Reveal text  
+        img + span {
+          display: block;
+        }
+      }
+    `}
+    };
+`;
+
+const RevealText = styled(Text)`
+  width: auto;
+  color: ${({ theme }) => theme.color('black')};
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 70px;
+
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    top: 8px;
+    left: 15px;
+    transform: translateX(0);
+    display: none;
+    color: ${({ theme }) => theme.color('red')};
+  }
 `;
 
 const StyledImage = styled.img`
@@ -24,7 +95,7 @@ const HelperText = styled.span`
 `;
 
 const Icon = ({
-  href, target, icon, brand, title, ...restProps
+  href, target, icon, brand, title, isHeader = false, id, ...restProps
 }) => (
   <StyledLink
     href={href}
@@ -32,10 +103,16 @@ const Icon = ({
     {...restProps}
     title={title}
     rel="noopener noreferrer"
-    data-test="header-esu-icon"
+    data-testid={`${isHeader ? 'header' : 'icon'}-${kebabCase(id)}`}
+    isHeader={isHeader}
   >
     <StyledImage src={icon} alt={brand} />
-    {title !== 'Sign up for emails' && (
+
+    { isHeader && (
+      <RevealText>{title}</RevealText>
+    )}
+
+    {id === 'esu' && (
       <HelperText>(opens in new window)</HelperText>
     )}
   </StyledLink>
@@ -46,7 +123,9 @@ Icon.propTypes = {
   href: PropTypes.string.isRequired,
   target: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  isHeader: PropTypes.bool,
+  id: PropTypes.string.isRequired
 };
 
 export default Icon;

package/src/components/Atoms/SocialIcons/SocialIcons.js

@@ -41,6 +41,7 @@ const SocialIcons = ({ target = 'blank', campaign, ...restProps }) => {
             href={links[brand].url}
             title={links[brand].title}
             brand={brand}
+            id={links[brand].id}
             {...restProps}
           />
         </StyledItem>

package/src/components/Atoms/SocialIcons/SocialIcons.md

@@ -1,17 +1,20 @@
 ### Comic Relief
-
 ```js
-<SocialIcons campaign="comicrelief" />
+<div style={{ background: "black", padding: "10px"}}>
+    <SocialIcons campaign="comicrelief" />
+</div>
 ```
 
 ### Red Nose Day
-
 ```js
-<SocialIcons campaign="rednoseday" />
+<div style={{ background: "black", padding: "10px"}}>
+    <SocialIcons campaign="rednoseday" />
+</div>
 ```
 
 ### Sport Relief with self target
-
 ```js
-<SocialIcons campaign="sportrelief" target="self" />
+<div style={{ background: "black", padding: "10px"}}>
+    <SocialIcons campaign="sportrelief" target="self" />
+</div>
 ```

package/src/components/Atoms/SocialIcons/Utils/Links.js

@@ -6,18 +6,22 @@
 export default campaign => ({
   facebook: {
     url: `https://www.facebook.com/${campaign}`,
-    title: 'Check out our Facebook page'
+    title: 'Check out our Facebook page',
+    id: 'facebook'
   },
   twitter: {
     url: `https://twitter.com/${campaign}`,
-    title: 'Check out our Twitter account'
+    title: 'Check out our Twitter account',
+    id: 'twitter'
   },
   youtube: {
     url: 'https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw',
-    title: 'Check out our YouTube channel'
+    title: 'Check out our YouTube channel',
+    id: 'youtube'
   },
   instagram: {
     url: `https://www.instagram.com/${campaign}`,
-    title: 'Check out our Instagram account'
+    title: 'Check out our Instagram account',
+    id: 'instagram'
   }
 });