@comicrelief/component-library 8.12.1 → 8.13.1

package/README.md

@@ -53,3 +53,15 @@ To publish
 ```
 $ yarn publish:npm
 ```
+
+### Testing
+
+Install Playwright:
+```
+yarn playwright install
+```
+
+Run the tests
+```
+yarn test:e2e:local
+```

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

@@ -1,44 +1,86 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _kebabCase2 = _interopRequireDefault(require("lodash/kebabCase"));
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
+var _Text = _interopRequireDefault(require("../../Text/Text"));
+const RevealTextWidth = 55;
+const RevealTextSpeed = 0.35;
 const StyledLink = _styledComponents.default.a.withConfig({
   displayName: "Icon__StyledLink",
   componentId: "sc-no6fx6-0"
-})(["text-decoration:none;cursor:pointer;display:block;transition:opacity 0.2s;&:hover,&:focus{opacity:0.6;}"]);
+})(["text-decoration:none;cursor:pointer;display:block;position:relative;transition:opacity 0.2s;&:hover,&:focus{opacity:0.6;}", "};"], _ref => {
+  let {
+    isHeader
+  } = _ref;
+  return isHeader && (0, _styledComponents.css)(["overflow:hidden;padding-right:0px;transition:padding-right ", "s cubic-bezier(0.5,1.5,0.5,0.75);&:hover,&:focus{opacity:1;}@media ", "{&:hover,&:focus{img{filter:invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);}}}@media ", "{&:hover,&:focus{padding-right:", "px;&[data-testid=\"header-esu\"]{padding-right:92px;}&[data-testid=\"header-shop\"]{padding-right:48px;}img + span{display:block;}}"], RevealTextSpeed, _ref2 => {
+    let {
+      theme
+    } = _ref2;
+    return theme.allBreakpoints('M');
+  }, _ref3 => {
+    let {
+      theme
+    } = _ref3;
+    return theme.allBreakpoints('NavWide');
+  }, RevealTextWidth);
+});
+const RevealText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "Icon__RevealText",
+  componentId: "sc-no6fx6-1"
+})(["width:auto;color:", ";position:absolute;top:50%;transform:translateY(-50%);left:70px;@media ", "{width:100%;text-align:center;position:absolute;top:8px;left:15px;transform:translateX(0);display:none;color:", ";}"], _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.color('black');
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.allBreakpoints('Nav');
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.color('red');
+});
 const StyledImage = _styledComponents.default.img.withConfig({
   displayName: "Icon__StyledImage",
-  componentId: "sc-no6fx6-1"
+  componentId: "sc-no6fx6-2"
 })(["width:100%;"]);
 const HelperText = _styledComponents.default.span.withConfig({
   displayName: "Icon__HelperText",
-  componentId: "sc-no6fx6-2"
+  componentId: "sc-no6fx6-3"
 })(["", ";"], _hideVisually.default);
-const Icon = _ref => {
+const Icon = _ref7 => {
   let {
     href,
     target,
     icon,
     brand,
     title,
+    isHeader = false,
+    id,
     ...restProps
-  } = _ref;
+  } = _ref7;
   return /*#__PURE__*/_react.default.createElement(StyledLink, Object.assign({
     href: href,
     target: "_".concat(target)
   }, restProps, {
     title: title,
     rel: "noopener noreferrer",
-    "data-test": "header-esu-icon"
+    "data-testid": "".concat(isHeader ? 'header' : 'icon', "-").concat((0, _kebabCase2.default)(id)),
+    isHeader: isHeader
   }), /*#__PURE__*/_react.default.createElement(StyledImage, {
     src: icon,
     alt: brand
-  }), title !== 'Sign up for emails' && /*#__PURE__*/_react.default.createElement(HelperText, null, "(opens in new window)"));
+  }), isHeader && /*#__PURE__*/_react.default.createElement(RevealText, null, title), id === 'esu' && /*#__PURE__*/_react.default.createElement(HelperText, null, "(opens in new window)"));
 };
 var _default = exports.default = Icon;

package/dist/components/Atoms/SocialIcons/SocialIcons.js

@@ -45,7 +45,8 @@ const SocialIcons = _ref3 => {
     icon: _Icons.default[brand],
     href: links[brand].url,
     title: links[brand].title,
-    brand: brand
+    brand: brand,
+    id: links[brand].id
   }, restProps)))));
 };
 var _default = exports.default = SocialIcons;

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

@@ -12,19 +12,23 @@ exports.default = void 0;
 var _default = campaign => ({
   facebook: {
     url: "https://www.facebook.com/".concat(campaign),
-    title: 'Check out our Facebook page'
+    title: 'Check out our Facebook page',
+    id: 'facebook'
   },
   twitter: {
     url: "https://twitter.com/".concat(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/".concat(campaign),
-    title: 'Check out our Instagram account'
+    title: 'Check out our Instagram account',
+    id: 'instagram'
   }
 });
 exports.default = _default;

package/dist/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap

@@ -6,6 +6,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
   text-decoration: none;
   cursor: pointer;
   display: block;
+  position: relative;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
@@ -19,21 +20,6 @@ exports[`renders correctly with Comic Relief links 1`] = `
   width: 100%;
 }
 
-.c4 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -80,7 +66,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
   >
     <a
       className="c2"
-      data-test="header-esu-icon"
+      data-testid="icon-facebook"
       href="https://www.facebook.com/comicrelief"
       rel="noopener noreferrer"
       target="_blank"
@@ -91,11 +77,6 @@ exports[`renders correctly with Comic Relief links 1`] = `
         className="c3"
         src="mock.asset"
       />
-      <span
-        className="c4"
-      >
-        (opens in new window)
-      </span>
     </a>
   </li>
   <li
@@ -103,7 +84,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
   >
     <a
       className="c2"
-      data-test="header-esu-icon"
+      data-testid="icon-instagram"
       href="https://www.instagram.com/comicrelief"
       rel="noopener noreferrer"
       target="_blank"
@@ -114,11 +95,6 @@ exports[`renders correctly with Comic Relief links 1`] = `
         className="c3"
         src="mock.asset"
       />
-      <span
-        className="c4"
-      >
-        (opens in new window)
-      </span>
     </a>
   </li>
   <li
@@ -126,7 +102,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
   >
     <a
       className="c2"
-      data-test="header-esu-icon"
+      data-testid="icon-twitter"
       href="https://twitter.com/comicrelief"
       rel="noopener noreferrer"
       target="_blank"
@@ -137,11 +113,6 @@ exports[`renders correctly with Comic Relief links 1`] = `
         className="c3"
         src="mock.asset"
       />
-      <span
-        className="c4"
-      >
-        (opens in new window)
-      </span>
     </a>
   </li>
   <li
@@ -149,7 +120,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
   >
     <a
       className="c2"
-      data-test="header-esu-icon"
+      data-testid="icon-youtube"
       href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
       rel="noopener noreferrer"
       target="_blank"
@@ -160,11 +131,6 @@ exports[`renders correctly with Comic Relief links 1`] = `
         className="c3"
         src="mock.asset"
       />
-      <span
-        className="c4"
-      >
-        (opens in new window)
-      </span>
     </a>
   </li>
 </ul>
@@ -176,6 +142,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
   text-decoration: none;
   cursor: pointer;
   display: block;
+  position: relative;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
@@ -189,21 +156,6 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
   width: 100%;
 }
 
-.c4 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -250,7 +202,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
   >
     <a
       className="c2"
-      data-test="header-esu-icon"
+      data-testid="icon-facebook"
       href="https://www.facebook.com/rednoseday"
       rel="noopener noreferrer"
       target="_self"
@@ -261,11 +213,6 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
         className="c3"
         src="mock.asset"
       />
-      <span
-        className="c4"
-      >
-        (opens in new window)
-      </span>
     </a>
   </li>
   <li
@@ -273,7 +220,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
   >
     <a
       className="c2"
-      data-test="header-esu-icon"
+      data-testid="icon-instagram"
       href="https://www.instagram.com/rednoseday"
       rel="noopener noreferrer"
       target="_self"
@@ -284,11 +231,6 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
         className="c3"
         src="mock.asset"
       />
-      <span
-        className="c4"
-      >
-        (opens in new window)
-      </span>
     </a>
   </li>
   <li
@@ -296,7 +238,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
   >
     <a
       className="c2"
-      data-test="header-esu-icon"
+      data-testid="icon-twitter"
       href="https://twitter.com/rednoseday"
       rel="noopener noreferrer"
       target="_self"
@@ -307,11 +249,6 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
         className="c3"
         src="mock.asset"
       />
-      <span
-        className="c4"
-      >
-        (opens in new window)
-      </span>
     </a>
   </li>
   <li
@@ -319,7 +256,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
   >
     <a
       className="c2"
-      data-test="header-esu-icon"
+      data-testid="icon-youtube"
       href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
       rel="noopener noreferrer"
       target="_self"
@@ -330,11 +267,6 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
         className="c3"
         src="mock.asset"
       />
-      <span
-        className="c4"
-      >
-        (opens in new window)
-      </span>
     </a>
   </li>
 </ul>
@@ -346,6 +278,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
   text-decoration: none;
   cursor: pointer;
   display: block;
+  position: relative;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
@@ -359,21 +292,6 @@ exports[`renders correctly with Sport Relief links 1`] = `
   width: 100%;
 }
 
-.c4 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -420,7 +338,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
   >
     <a
       className="c2"
-      data-test="header-esu-icon"
+      data-testid="icon-facebook"
       href="https://www.facebook.com/sportrelief"
       rel="noopener noreferrer"
       target="_blank"
@@ -431,11 +349,6 @@ exports[`renders correctly with Sport Relief links 1`] = `
         className="c3"
         src="mock.asset"
       />
-      <span
-        className="c4"
-      >
-        (opens in new window)
-      </span>
     </a>
   </li>
   <li
@@ -443,7 +356,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
   >
     <a
       className="c2"
-      data-test="header-esu-icon"
+      data-testid="icon-instagram"
       href="https://www.instagram.com/sportrelief"
       rel="noopener noreferrer"
       target="_blank"
@@ -454,11 +367,6 @@ exports[`renders correctly with Sport Relief links 1`] = `
         className="c3"
         src="mock.asset"
       />
-      <span
-        className="c4"
-      >
-        (opens in new window)
-      </span>
     </a>
   </li>
   <li
@@ -466,7 +374,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
   >
     <a
       className="c2"
-      data-test="header-esu-icon"
+      data-testid="icon-twitter"
       href="https://twitter.com/sportrelief"
       rel="noopener noreferrer"
       target="_blank"
@@ -477,11 +385,6 @@ exports[`renders correctly with Sport Relief links 1`] = `
         className="c3"
         src="mock.asset"
       />
-      <span
-        className="c4"
-      >
-        (opens in new window)
-      </span>
     </a>
   </li>
   <li
@@ -489,7 +392,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
   >
     <a
       className="c2"
-      data-test="header-esu-icon"
+      data-testid="icon-youtube"
       href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
       rel="noopener noreferrer"
       target="_blank"
@@ -500,11 +403,6 @@ exports[`renders correctly with Sport Relief links 1`] = `
         className="c3"
         src="mock.asset"
       />
-      <span
-        className="c4"
-      >
-        (opens in new window)
-      </span>
     </a>
   </li>
 </ul>

package/dist/components/Molecules/Logos/Logos.js

@@ -1,34 +1,49 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Logo = _interopRequireDefault(require("../../Atoms/Logo/Logo"));
 const TitleLabel = _styledComponents.default.span.withConfig({
   displayName: "Logos__TitleLabel",
   componentId: "sc-z3hhhd-0"
 })(["line-height:0;font-size:0;color:transparent;"]);
-const Logos = _ref => {
+const LogoLink = _styledComponents.default.a.withConfig({
+  displayName: "Logos__LogoLink",
+  componentId: "sc-z3hhhd-1"
+})(["", ""], _ref => {
   let {
-    campaign = 'Comic Relief'
+    animateRotate
   } = _ref;
+  return animateRotate && (0, _styledComponents.css)(["img{transition:transform 0.35s cubic-bezier(0.41,1.64,0.41,0.8);}&:hover,&:focus{img{transform:rotate(-14deg);}}"]);
+});
+const Logos = _ref2 => {
+  let {
+    campaign = 'Comic Relief',
+    animateRotate = false,
+    sizeSm,
+    sizeMd
+  } = _ref2;
   if (campaign === 'Sport Relief Gameon') {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("a", {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(LogoLink, {
       href: "/",
-      title: "Go to Comic Relief homepage"
+      title: "Go to Comic Relief homepage",
+      animateRotate: animateRotate
     }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
       rotate: true,
       sizeSm: "50px",
       sizeMd: "60px",
       campaign: "Comic Relief",
       title: "Go to Comic Relief homepage"
-    }), /*#__PURE__*/_react.default.createElement(TitleLabel, null, "Go to Comic Relief homepage")), /*#__PURE__*/_react.default.createElement("a", {
+    }), /*#__PURE__*/_react.default.createElement(TitleLabel, null, "Go to Comic Relief homepage")), /*#__PURE__*/_react.default.createElement(LogoLink, {
       href: "/sportrelief/",
-      title: "Go to Sport Relief homepage"
+      title: "Go to Sport Relief homepage",
+      animateRotate: animateRotate
     }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
       sizeSm: "100px",
       sizeMd: "120px",
@@ -37,9 +52,10 @@ const Logos = _ref => {
     }), /*#__PURE__*/_react.default.createElement(TitleLabel, null, "Go to Sport Relief homepage")));
   }
   if (campaign === 'Sport Relief') {
-    return /*#__PURE__*/_react.default.createElement("a", {
+    return /*#__PURE__*/_react.default.createElement(LogoLink, {
       href: "/sportrelief",
-      title: "Go to Sport Relief homepage"
+      title: "Go to Sport Relief homepage",
+      animateRotate: animateRotate
     }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
       rotate: false,
       campaign: "Sport Relief",
@@ -47,22 +63,28 @@ const Logos = _ref => {
     }), /*#__PURE__*/_react.default.createElement(TitleLabel, null, "Go to Sport Relief homepage"));
   }
   if (campaign === 'Pride') {
-    return /*#__PURE__*/_react.default.createElement("a", {
+    return /*#__PURE__*/_react.default.createElement(LogoLink, {
       href: "/",
-      title: "Go to Comic Relief homepage"
+      title: "Go to Comic Relief homepage",
+      animateRotate: animateRotate
     }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
       rotate: false,
       campaign: "Pride",
-      title: "Go to Comic Relief homepage"
+      title: "Go to Comic Relief homepage",
+      sizeSm: sizeSm,
+      sizeMd: sizeMd
     }), /*#__PURE__*/_react.default.createElement(TitleLabel, null, "Go to Comic Relief homepage"));
   }
-  return /*#__PURE__*/_react.default.createElement("a", {
+  return /*#__PURE__*/_react.default.createElement(LogoLink, {
     href: "/",
-    title: "Go to Comic Relief homepage"
+    title: "Go to Comic Relief homepage",
+    animateRotate: animateRotate
   }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
     rotate: false,
     campaign: "Comic Relief",
-    title: "Go to Comic Relief homepage"
+    title: "Go to Comic Relief homepage",
+    sizeSm: sizeSm,
+    sizeMd: sizeMd
   }), /*#__PURE__*/_react.default.createElement(TitleLabel, null, "Go to Comic Relief homepage"));
 };
 var _default = exports.default = Logos;

package/dist/components/Molecules/ShareButton/ShareButton.js

@@ -50,7 +50,8 @@ const ShareButton = _ref => {
     brand: campaign,
     target: "_blank",
     role: "button",
-    href: "#"
+    href: "#",
+    id: "share-button--".concat(shareType)
   }, restProps))))));
 };
 var _default = exports.default = ShareButton;

package/dist/components/Molecules/ShareButton/ShareButton.test.js

@@ -5,7 +5,7 @@ var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/shallowWithTheme"));
 var _ShareButton = _interopRequireDefault(require("./ShareButton"));
-it('renders correctly', () => {
+it("renders correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ShareButton.default, null)).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c4 {\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      cursor: pointer;\n      display: block;\n      -webkit-transition: opacity 0.2s;\n      transition: opacity 0.2s;\n    }\n\n    .c4:hover,\n    .c4:focus {\n      opacity: 0.6;\n    }\n\n    .c5 {\n      width: 100%;\n    }\n\n    .c6 {\n      border: 0;\n      -webkit-clip: rect(0 0 0 0);\n      clip: rect(0 0 0 0);\n      -webkit-clip-path: inset(50%);\n      clip-path: inset(50%);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      white-space: nowrap;\n      width: 1px;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n    }\n\n    .c1 {\n      width: auto;\n      margin: 0 1rem 0 0;\n    }\n\n    .c1:first-child {\n      margin-bottom: 0;\n    }\n\n    .c2 {\n      width: auto;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n    }\n\n    .c3 {\n      width: 40px;\n      height: 40px;\n      display: inline-block;\n      margin: 0.5rem;\n    }\n\n    <div\n      className=\"c0\"\n    >\n      <p\n        className=\"c1\"\n      >\n        Share with:\n      </p>\n      <ul\n        className=\"c2\"\n      >\n        <li\n          className=\"c3\"\n        >\n          <a\n            className=\"c4\"\n            data-test=\"header-esu-icon\"\n            href=\"#\"\n            onClick={[Function]}\n            rel=\"noopener noreferrer\"\n            role=\"button\"\n            target=\"__blank\"\n            title=\"Share on Facebook\"\n          >\n            <img\n              alt=\"comicrelief\"\n              className=\"c5\"\n              src=\"mock.asset\"\n            />\n            <span\n              className=\"c6\"\n            >\n              (opens in new window)\n            </span>\n          </a>\n        </li>\n        <li\n          className=\"c3\"\n        >\n          <a\n            className=\"c4\"\n            data-test=\"header-esu-icon\"\n            href=\"#\"\n            onClick={[Function]}\n            rel=\"noopener noreferrer\"\n            role=\"button\"\n            target=\"__blank\"\n            title=\"Share on Twitter\"\n          >\n            <img\n              alt=\"comicrelief\"\n              className=\"c5\"\n              src=\"mock.asset\"\n            />\n            <span\n              className=\"c6\"\n            >\n              (opens in new window)\n            </span>\n          </a>\n        </li>\n      </ul>\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c4 {\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      cursor: pointer;\n      display: block;\n      position: relative;\n      -webkit-transition: opacity 0.2s;\n      transition: opacity 0.2s;\n    }\n\n    .c4:hover,\n    .c4:focus {\n      opacity: 0.6;\n    }\n\n    .c5 {\n      width: 100%;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n    }\n\n    .c1 {\n      width: auto;\n      margin: 0 1rem 0 0;\n    }\n\n    .c1:first-child {\n      margin-bottom: 0;\n    }\n\n    .c2 {\n      width: auto;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n    }\n\n    .c3 {\n      width: 40px;\n      height: 40px;\n      display: inline-block;\n      margin: 0.5rem;\n    }\n\n    <div\n      className=\"c0\"\n    >\n      <p\n        className=\"c1\"\n      >\n        Share with:\n      </p>\n      <ul\n        className=\"c2\"\n      >\n        <li\n          className=\"c3\"\n        >\n          <a\n            className=\"c4\"\n            data-testid=\"icon-share-button-facebook\"\n            href=\"#\"\n            onClick={[Function]}\n            rel=\"noopener noreferrer\"\n            role=\"button\"\n            target=\"__blank\"\n            title=\"Share on Facebook\"\n          >\n            <img\n              alt=\"comicrelief\"\n              className=\"c5\"\n              src=\"mock.asset\"\n            />\n          </a>\n        </li>\n        <li\n          className=\"c3\"\n        >\n          <a\n            className=\"c4\"\n            data-testid=\"icon-share-button-twitter\"\n            href=\"#\"\n            onClick={[Function]}\n            rel=\"noopener noreferrer\"\n            role=\"button\"\n            target=\"__blank\"\n            title=\"Share on Twitter\"\n          >\n            <img\n              alt=\"comicrelief\"\n              className=\"c5\"\n              src=\"mock.asset\"\n            />\n          </a>\n        </li>\n      </ul>\n    </div>\n  ");
 });

package/dist/components/Organisms/Footer/Nav/Nav.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
 var _allBreakpoints = require("../../../../theme/shared/allBreakpoints");
-var _navHelper = _interopRequireDefault(require("../../../../utils/navHelper"));
+var _navHelper = require("../../../../utils/navHelper");
 var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
 var _Nav = require("./Nav.style");
 const FooterNav = _ref => {
@@ -63,7 +63,7 @@ const FooterNav = _ref => {
     role: "menubar"
   }, menuGroups.map((group, index) => /*#__PURE__*/_react.default.createElement(_Nav.NavItem, {
     role: "none",
-    key: group.id,
+    key: "".concat(group.id, "-").concat(group.title),
     index: index,
     isSubMenuOpen: !!isSubMenuOpen[group.id]
   }, !isSmallBreakpoint ? /*#__PURE__*/_react.default.createElement(_Text.default, {
@@ -85,7 +85,7 @@ const FooterNav = _ref => {
     column: group.links.length % 2 === 0 && group.links.length > 2
   }, group.links.map(child => {
     /* Determine which field represents our url path */
-    let thisUrl = (0, _navHelper.default)(child);
+    let thisUrl = (0, _navHelper.NavHelper)(child);
     thisUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisUrl);
     return /*#__PURE__*/_react.default.createElement(_Nav.SubNavItem, {
       key: thisUrl,