@comicrelief/component-library 8.26.0 → 8.28.0

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

@@ -42,16 +42,16 @@ const ShareButton = _ref => {
     checkedUrl = urlToShare !== null ? urlToShare : window.location.href;
   }
   return /*#__PURE__*/_react.default.createElement(_ShareButton.Wrapper, null, /*#__PURE__*/_react.default.createElement(_ShareButton.Copy, null, copy), /*#__PURE__*/_react.default.createElement(_ShareButton.ShareButtonList, null, Object.keys(_ShareIcons.default).map(shareType => /*#__PURE__*/_react.default.createElement(_ShareButton.ShareButtonItem, {
-    key: "share-button--".concat(shareType)
+    key: `share-button--${shareType}`
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, Object.assign({
     onClick: e => handleShare(e, shareType, checkedUrl),
     icon: _ShareIcons.default[shareType],
-    title: "Share on ".concat(shareType),
+    title: `Share on ${shareType}`,
     brand: campaign,
     target: "_blank",
     role: "button",
     href: "#",
-    id: "share-button--".concat(shareType)
+    id: `share-button--${shareType}`
   }, restProps))))));
 };
 var _default = exports.default = ShareButton;

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

@@ -7,5 +7,116 @@ var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/sh
 var _ShareButton = _interopRequireDefault(require("./ShareButton"));
 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      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-test=\"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-test=\"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  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c4 {
+      -webkit-text-decoration: none;
+      text-decoration: none;
+      cursor: pointer;
+      display: block;
+      position: relative;
+      -webkit-transition: opacity 0.2s;
+      transition: opacity 0.2s;
+    }
+
+    .c4:hover,
+    .c4:focus {
+      opacity: 0.6;
+    }
+
+    .c5 {
+      width: 100%;
+    }
+
+    .c0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+    }
+
+    .c1 {
+      width: auto;
+      margin: 0 1rem 0 0;
+    }
+
+    .c1:first-child {
+      margin-bottom: 0;
+    }
+
+    .c2 {
+      width: auto;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .c3 {
+      width: 40px;
+      height: 40px;
+      display: inline-block;
+      margin: 0.5rem;
+    }
+
+    <div
+      className="c0"
+    >
+      <p
+        className="c1"
+      >
+        Share with:
+      </p>
+      <ul
+        className="c2"
+      >
+        <li
+          className="c3"
+        >
+          <a
+            className="c4"
+            data-test="icon-share-button-facebook"
+            href="#"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            role="button"
+            target="__blank"
+            title="Share on Facebook"
+          >
+            <img
+              alt="comicrelief"
+              className="c5"
+              src="mock.asset"
+            />
+          </a>
+        </li>
+        <li
+          className="c3"
+        >
+          <a
+            className="c4"
+            data-test="icon-share-button-twitter"
+            href="#"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            role="button"
+            target="__blank"
+            title="Share on Twitter"
+          >
+            <img
+              alt="comicrelief"
+              className="c5"
+              src="mock.asset"
+            />
+          </a>
+        </li>
+      </ul>
+    </div>
+  `);
 });

package/dist/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup.js

@@ -30,7 +30,7 @@ const schoolFetcher = async query => {
     throw new Error('Sorry, something unexpected went wrong. Please try again or enter your school manually');
   }
 };
-const schoolToString = school => "".concat(school.name, ", ").concat(school.post_code);
+const schoolToString = school => `${school.name}, ${school.post_code}`;
 
 /**
  * The component library's school lookup component uses a typeahead/search-as-you-type approach.

package/dist/components/Molecules/SingleMessage/SingleMessage.js

@@ -58,7 +58,7 @@ const SingleMessage = _ref => {
     if (thisRef.current) {
       const thisID = getID(thisRef.current);
       if (thisID) {
-        setUniqueID("".concat(thisID, "__video"));
+        setUniqueID(`${thisID}__video`);
       }
     }
   }, [thisRef]);
@@ -98,7 +98,7 @@ const SingleMessage = _ref => {
   const handlePlay = thisUniqueID => {
     setOnPlay(true);
     // Trigger play and update video state
-    const thisVideoID = "".concat(thisUniqueID, "__video");
+    const thisVideoID = `${thisUniqueID}__video`;
     setTimeout(() => {
       allPlayers[thisVideoID].playVideo();
       // Once video is playing, switch state to allow CSS to show/hide relevant layers
@@ -115,12 +115,12 @@ const SingleMessage = _ref => {
     /*#__PURE__*/
     // Creates namespaced UUIDs for each row
     _react.default.createElement(_reactUid.UID, {
-      name: id => "single-msg__".concat(id)
+      name: id => `single-msg__${id}`
     }, id => /*#__PURE__*/_react.default.createElement(_SingleMessage.Container, {
       backgroundColor: backgroundColor,
       copyFirst: copyFirst,
       vhFull: vhFull,
-      id: "".concat(id),
+      id: `${id}`,
       isPlaying: isPlaying,
       hasVideo: hasVideo,
       landscapeVideo: landscapeVideo,

package/dist/components/Molecules/SingleMessage/SingleMessage.style.js

@@ -161,7 +161,7 @@ const PlayButton = exports.PlayButton = _styledComponents.default.button.withCon
   let {
     isBuffering
   } = _ref25;
-  return isBuffering === true ? "url(".concat(_loader.default, ")") : "url(".concat(_videoPlayIcon.default, ")");
+  return isBuffering === true ? `url(${_loader.default})` : `url(${_videoPlayIcon.default})`;
 }, _ref26 => {
   let {
     copyFirst
@@ -176,7 +176,7 @@ const PlayButton = exports.PlayButton = _styledComponents.default.button.withCon
   let {
     isBuffering
   } = _ref28;
-  return isBuffering === true ? "url(".concat(_loader.default, ")") : "url(".concat(_videoPlayIcon__hover.default, ")");
+  return isBuffering === true ? `url(${_loader.default})` : `url(${_videoPlayIcon__hover.default})`;
 }, _ref29 => {
   let {
     theme

package/dist/components/Molecules/SingleMessageDS/SingleMessageDs.js

@@ -145,7 +145,7 @@ const SingleMessageDs = _ref => {
   }), /*#__PURE__*/_react.default.createElement("iframe", {
     width: "100%",
     height: "100%",
-    src: "https://www.youtube.com/embed/".concat(youTubeId, "?&autoplay=1&enablejsapi=1"),
+    src: `https://www.youtube.com/embed/${youTubeId}?&autoplay=1&enablejsapi=1`,
     frameBorder: "0",
     allow: "accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture",
     allowFullScreen: true,

package/dist/components/Molecules/SingleMessageDS/SingleMessageDs.style.js

@@ -50,7 +50,7 @@ const MediaLink = exports.MediaLink = _styledComponents.default.a.withConfig({
   let {
     imageLeft
   } = _ref5;
-  return imageLeft ? "margin-right: ".concat((0, _spacing.default)('m')) : "margin-left: ".concat((0, _spacing.default)('m'));
+  return imageLeft ? `margin-right: ${(0, _spacing.default)('m')}` : `margin-left: ${(0, _spacing.default)('m')}`;
 }, _ref6 => {
   let {
     theme
@@ -86,7 +86,7 @@ const CTA = exports.CTA = _styledComponents.default.div.withConfig({
   let {
     hasImage
   } = _ref9;
-  return !hasImage && "bottom: -".concat((0, _spacing.default)('m'), ";");
+  return !hasImage && `bottom: -${(0, _spacing.default)('m')};`;
 });
 const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "SingleMessageDsstyle__Copy",
@@ -101,12 +101,12 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   let {
     hasLink
   } = _ref11;
-  return hasLink && "padding-bottom: calc(".concat((0, _spacing.default)('l'), " + ").concat((0, _spacing.default)('m'), ")");
+  return hasLink && `padding-bottom: calc(${(0, _spacing.default)('l')} + ${(0, _spacing.default)('m')})`;
 }, _ref12 => {
   let {
     imageLeft
   } = _ref12;
-  return imageLeft ? "margin: -".concat((0, _spacing.default)('m'), " 0 ").concat((0, _spacing.default)('m'), " ").concat((0, _spacing.default)('m'), "; ").concat(CTA, " { right: ").concat((0, _spacing.default)('m'), ";}") : "margin: -".concat((0, _spacing.default)('m'), " ").concat((0, _spacing.default)('m'), " ").concat((0, _spacing.default)('m'), " 0; ").concat(CTA, " { left: ").concat((0, _spacing.default)('m'), ";}");
+  return imageLeft ? `margin: -${(0, _spacing.default)('m')} 0 ${(0, _spacing.default)('m')} ${(0, _spacing.default)('m')}; ${CTA} { right: ${(0, _spacing.default)('m')};}` : `margin: -${(0, _spacing.default)('m')} ${(0, _spacing.default)('m')} ${(0, _spacing.default)('m')} 0; ${CTA} { left: ${(0, _spacing.default)('m')};}`;
 }, _ref13 => {
   let {
     theme
@@ -116,12 +116,12 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   let {
     hasLink
   } = _ref14;
-  return hasLink && "padding-bottom: calc(".concat((0, _spacing.default)('l'), " + ").concat((0, _spacing.default)('m'), ")");
+  return hasLink && `padding-bottom: calc(${(0, _spacing.default)('l')} + ${(0, _spacing.default)('m')})`;
 }, _ref15 => {
   let {
     imageLeft
   } = _ref15;
-  return imageLeft ? "margin: ".concat((0, _spacing.default)('l'), " 0 ").concat((0, _spacing.default)('m'), " -").concat((0, _spacing.default)('m')) : "margin: ".concat((0, _spacing.default)('l'), " -").concat((0, _spacing.default)('m'), " ").concat((0, _spacing.default)('m'), " 0");
+  return imageLeft ? `margin: ${(0, _spacing.default)('l')} 0 ${(0, _spacing.default)('m')} -${(0, _spacing.default)('m')}` : `margin: ${(0, _spacing.default)('l')} -${(0, _spacing.default)('m')} ${(0, _spacing.default)('m')} 0`;
 }, _ref16 => {
   let {
     theme
@@ -131,10 +131,10 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   let {
     hasLink
   } = _ref17;
-  return hasLink && "padding-bottom: calc(".concat((0, _spacing.default)('m'), " * 3)");
+  return hasLink && `padding-bottom: calc(${(0, _spacing.default)('m')} * 3)`;
 }, _ref18 => {
   let {
     imageLeft
   } = _ref18;
-  return imageLeft ? "".concat((0, _spacing.default)('l'), " 0 ").concat((0, _spacing.default)('m'), " -").concat((0, _spacing.default)('l')) : "".concat((0, _spacing.default)('l'), " -").concat((0, _spacing.default)('l'), " ").concat((0, _spacing.default)('m'), " 0");
+  return imageLeft ? `${(0, _spacing.default)('l')} 0 ${(0, _spacing.default)('m')} -${(0, _spacing.default)('l')}` : `${(0, _spacing.default)('l')} -${(0, _spacing.default)('l')} ${(0, _spacing.default)('m')} 0`;
 });

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

@@ -12,5 +12,22 @@ it("renders correctly", () => {
     poster: _VideoBannerPosterImage.default,
     video: src
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      width: 100%;\n      height: 100%;\n    }\n\n    <video\n      className=\"c0\"\n      controls={false}\n      loop={false}\n      muted={true}\n      playsInline={true}\n      poster=\"mock.asset\"\n      src=\"https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4\"\n    >\n      Your browser does not support video.\n    </video>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c0 {
+      width: 100%;
+      height: 100%;
+    }
+
+    <video
+      className="c0"
+      controls={false}
+      loop={false}
+      muted={true}
+      playsInline={true}
+      poster="mock.asset"
+      src="https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4"
+    >
+      Your browser does not support video.
+    </video>
+  `);
 });

package/dist/components/Organisms/CookieBanner/CookieBanner.test.js

@@ -17,5 +17,185 @@ it('renders correctly', () => {
     },
     cookiePolicyUrl: "https://www.comicrelief.com/cookies-policy"
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      color: #FFFFFF;\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c3 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #FFFFFF;\n      border-bottom: 2px solid #FFFFFF;\n      font-weight: normal;\n    }\n\n    .c3:hover {\n      color: #FFFFFF;\n      border-bottom: 2px solid #FFFFFF;\n    }\n\n    .c5 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      position: relative;\n      padding: 0.5rem 1.25rem;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      font-weight: 700;\n      font-size: 1rem;\n      border-radius: 2rem;\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      height: 3.125rem;\n      width: 100%;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      cursor: pointer;\n      background-color: #FFFFFF;\n      color: #000000;\n    }\n\n    .c5:hover {\n      background-color: #969598;\n      color: #000000;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      position: relative;\n      padding: 1rem;\n      background: #2C0230;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      z-index: 3;\n    }\n\n    .c2 {\n      line-height: 1.5;\n      margin: 0;\n    }\n\n    .c2:first-of-type {\n      margin-bottom: 0.5rem;\n    }\n\n    .c6 {\n      padding: 0.5rem 1rem;\n      display: block;\n      margin-bottom: 10px;\n    }\n\n    .c4 {\n      color: #FFFFFF;\n      padding: 0 0.25rem 1px;\n      border-bottom: 2px solid;\n    }\n\n    @media (min-width:740px) {\n      .c5 {\n        width: auto;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c5 {\n        background-color: #FFFFFF;\n        color: #000000;\n      }\n\n      .c5:hover {\n        background-color: #969598;\n        color: #000000;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c2 {\n        width: 75%;\n        margin: 0 auto;\n      }\n\n      .c2:first-of-type {\n        margin-bottom: 1rem;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c6 {\n        margin: 0 0.25rem 0 0;\n        display: inline-block;\n      }\n    }\n\n    <div\n      className=\"c0\"\n    >\n      <p\n        className=\"c1 c2\"\n        color=\"white\"\n        size=\"s\"\n      >\n        Hello! Comic Relief uses cookies to help make this website better and improve our services. You can learn more about\n        <a\n          className=\"c3 c4\"\n          color=\"red\"\n          href=\"https://www.comicrelief.com/cookies-policy\"\n          target=\"_self\"\n          type=\"standard_white\"\n        >\n          our use of cookies\n        </a>\n        . We also use optional cookies for marketing purposes:\n      </p>\n      <p\n        className=\"c1 c2\"\n        color=\"white\"\n        size=\"s\"\n      >\n        <a\n          className=\"c5 c6\"\n          color=\"white\"\n          href=\"/comic\"\n          onClick={[Function]}\n          target=\"_self\"\n          type=\"button\"\n        >\n          Accept\n        </a>\n        Or click\n        <a\n          className=\"c3 c4\"\n          color=\"red\"\n          href=\"\"\n          onClick={[Function]}\n          target=\"_self\"\n          type=\"standard_white\"\n        >\n          here\n        </a>\n        to deny these.\n      </p>\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c1 {
+      color: #FFFFFF;
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c3 {
+      position: relative;
+      -webkit-text-decoration: none;
+      text-decoration: none;
+      display: inline;
+      line-height: 1.5rem;
+      color: #FFFFFF;
+      border-bottom: 2px solid #FFFFFF;
+      font-weight: normal;
+    }
+
+    .c3:hover {
+      color: #FFFFFF;
+      border-bottom: 2px solid #FFFFFF;
+    }
+
+    .c5 {
+      display: -webkit-inline-box;
+      display: -webkit-inline-flex;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      position: relative;
+      padding: 0.5rem 1.25rem;
+      -webkit-text-decoration: none;
+      text-decoration: none;
+      font-weight: 700;
+      font-size: 1rem;
+      border-radius: 2rem;
+      -webkit-transition: all 0.3s;
+      transition: all 0.3s;
+      height: 3.125rem;
+      width: 100%;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      cursor: pointer;
+      background-color: #FFFFFF;
+      color: #000000;
+    }
+
+    .c5:hover {
+      background-color: #969598;
+      color: #000000;
+    }
+
+    .c0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      position: relative;
+      padding: 1rem;
+      background: #2C0230;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      z-index: 3;
+    }
+
+    .c2 {
+      line-height: 1.5;
+      margin: 0;
+    }
+
+    .c2:first-of-type {
+      margin-bottom: 0.5rem;
+    }
+
+    .c6 {
+      padding: 0.5rem 1rem;
+      display: block;
+      margin-bottom: 10px;
+    }
+
+    .c4 {
+      color: #FFFFFF;
+      padding: 0 0.25rem 1px;
+      border-bottom: 2px solid;
+    }
+
+    @media (min-width:740px) {
+      .c5 {
+        width: auto;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c5 {
+        background-color: #FFFFFF;
+        color: #000000;
+      }
+
+      .c5:hover {
+        background-color: #969598;
+        color: #000000;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c2 {
+        width: 75%;
+        margin: 0 auto;
+      }
+
+      .c2:first-of-type {
+        margin-bottom: 1rem;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c6 {
+        margin: 0 0.25rem 0 0;
+        display: inline-block;
+      }
+    }
+
+    <div
+      className="c0"
+    >
+      <p
+        className="c1 c2"
+        color="white"
+        size="s"
+      >
+        Hello! Comic Relief uses cookies to help make this website better and improve our services. You can learn more about
+        <a
+          className="c3 c4"
+          color="red"
+          href="https://www.comicrelief.com/cookies-policy"
+          target="_self"
+          type="standard_white"
+        >
+          our use of cookies
+        </a>
+        . We also use optional cookies for marketing purposes:
+      </p>
+      <p
+        className="c1 c2"
+        color="white"
+        size="s"
+      >
+        <a
+          className="c5 c6"
+          color="white"
+          href="/comic"
+          onClick={[Function]}
+          target="_self"
+          type="button"
+        >
+          Accept
+        </a>
+        Or click
+        <a
+          className="c3 c4"
+          color="red"
+          href=""
+          onClick={[Function]}
+          target="_self"
+          type="standard_white"
+        >
+          here
+        </a>
+        to deny these.
+      </p>
+    </div>
+  `);
 });

package/dist/components/Organisms/Donate/Donate.js

@@ -52,7 +52,7 @@ const Donate = _ref => {
     monthlyOtherAmountText: monthlyOther = ''
   } = _ref;
   let isDesktop = (0, _reactResponsive.useMediaQuery)({
-    query: "(min-width: ".concat(_allBreakpoints.breakpointValues.L, "px)")
+    query: `(min-width: ${_allBreakpoints.breakpointValues.L}px)`
   });
 
   // To let us store any updated override, and force a re-render

package/dist/components/Organisms/Donate/Donate.style.js

@@ -45,7 +45,9 @@ const BgImage = exports.BgImage = (0, _styledComponents.default)(_Picture.defaul
   let {
     backgroundColor
   } = _ref4;
-  return backgroundColor !== 'transparent' && "\n    opacity: 0.4;\n  ";
+  return backgroundColor !== 'transparent' && `
+    opacity: 0.4;
+  `;
 });
 const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Wrapper",

package/dist/components/Organisms/Donate/Form/Form.js

@@ -157,9 +157,9 @@ const Signup = _ref => {
       return 'Donate';
     }
     if (givingType === 'single') {
-      return "Donate \xA3".concat(amountDonate, " now");
+      return `Donate £${amountDonate} now`;
     }
-    return "Donate \xA3".concat(amountDonate, " monthly");
+    return `Donate £${amountDonate} monthly`;
   };
   const showAdditionalSingleCopy = givingType === 'single' && additionalSingleCopy;
   const showAdditionalMonthlyCopy = givingType === 'monthly' && additionalMonthlyCopy;
@@ -178,18 +178,18 @@ const Signup = _ref => {
     tag: "span",
     size: "l",
     weight: "bold"
-  }, chooseAmountText || "".concat(noMoneyBuys ? 'Enter' : 'Choose', " an amount to give"))), !noMoneyBuys && givingType && /*#__PURE__*/_react.default.createElement(_Donate.MoneyBuys, null, givingData.moneybuys.map((_ref2, index) => {
+  }, chooseAmountText || `${noMoneyBuys ? 'Enter' : 'Choose'} an amount to give`)), !noMoneyBuys && givingType && /*#__PURE__*/_react.default.createElement(_Donate.MoneyBuys, null, givingData.moneybuys.map((_ref2, index) => {
     let {
       value
     } = _ref2;
     return /*#__PURE__*/_react.default.createElement(_MoneyBuy.default, {
       isSelected: amountDonate === value,
       amount: value.toString(),
-      description: "\xA3".concat((0, _Membership.amountFormatter)(value)),
+      description: `£${(0, _Membership.amountFormatter)(value)}`,
       setOtherAmount: () => setAmountDonate(value),
       key: value,
-      name: "".concat(mbshipID, "--moneyBuy").concat(index + 1),
-      id: "".concat(mbshipID, "--moneyBuy-box").concat(index + 1)
+      name: `${mbshipID}--moneyBuy${index + 1}`,
+      id: `${mbshipID}--moneyBuy-box${index + 1}`
     });
   })), /*#__PURE__*/_react.default.createElement(_Donate.FormFieldset, null, !noMoneyBuys && /*#__PURE__*/_react.default.createElement(_Donate.Label, {
     size: "s",
@@ -201,7 +201,7 @@ const Signup = _ref => {
     inputBorderColor: (0, _Membership.isAmountValid)(amountDonate) === false,
     label: "\xA3",
     errorMsg: "",
-    id: "".concat(mbshipID, "--MoneyBuy-userInput"),
+    id: `${mbshipID}--MoneyBuy-userInput`,
     showLabel: true
   }, rest, {
     max: "25000",
@@ -215,7 +215,7 @@ const Signup = _ref => {
     ref: amountRef
   }))), amountDonate >= 1 && moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_Donate.Copy, {
     as: "p"
-  }, /*#__PURE__*/_react.default.createElement("strong", null, "\xA3".concat(amountDonate, " ")), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_Donate.Error, {
+  }, /*#__PURE__*/_react.default.createElement("strong", null, `£${amountDonate} `), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_Donate.Error, {
     className: "error--amount",
     tag: "p"
   }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), additionalCopy && /*#__PURE__*/_react.default.createElement("p", {

package/dist/components/Organisms/Donate/GivingSelector/GivingSelector.js

@@ -24,7 +24,7 @@ const GivingSelector = _ref => {
   return /*#__PURE__*/_react.default.createElement(_GivingSelector.Wrapper, null, /*#__PURE__*/_react.default.createElement(_GivingSelector.MoneyBox, null, /*#__PURE__*/_react.default.createElement("input", {
     className: "give-once",
     "aria-label": "Single",
-    id: "give-once--".concat(mbshipID),
+    id: `give-once--${mbshipID}`,
     value: "Single",
     type: "radio",
     label: "",
@@ -32,11 +32,11 @@ const GivingSelector = _ref => {
     onChange: () => handleGivingTypeChange('single', givingType)
   }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
     active: givingType === 'single',
-    htmlFor: "give-once--".concat(mbshipID)
+    htmlFor: `give-once--${mbshipID}`
   }, "Single"), /*#__PURE__*/_react.default.createElement("input", {
     className: "give-monthly",
     "aria-label": "Monthly",
-    id: "give-monthly--".concat(mbshipID),
+    id: `give-monthly--${mbshipID}`,
     value: "Monthly",
     type: "radio",
     label: "",
@@ -44,7 +44,7 @@ const GivingSelector = _ref => {
     onChange: () => handleGivingTypeChange('monthly', givingType)
   }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
     active: givingType === 'monthly',
-    htmlFor: "give-monthly--".concat(mbshipID)
+    htmlFor: `give-monthly--${mbshipID}`
   }, "Monthly"), /*#__PURE__*/_react.default.createElement(_GivingSelector.Switch, null)));
 };
 var _default = exports.default = GivingSelector;

package/dist/components/Organisms/Donate/MoneyBuy/MoneyBuy.js

@@ -74,7 +74,7 @@ const MoneyBuy = _ref11 => {
   } = _ref11;
   return /*#__PURE__*/_react.default.createElement(MoneyBuyButton, Object.assign({}, rest, {
     "aria-label": description,
-    value: "".concat(currency, " ").concat(amount),
+    value: `${currency} ${amount}`,
     type: "button",
     label: "",
     errorMsg: "",

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

@@ -33,7 +33,7 @@ const Footer = _ref => {
     campaign: campaignName
   })), /*#__PURE__*/_react.default.createElement(_Footer.Brand, {
     href: "/",
-    title: "Go to ".concat(campaign, " homepage")
+    title: `Go to ${campaign} homepage`
   }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
     sizeSm: "48px",
     sizeMd: "72px",

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

@@ -63,7 +63,7 @@ const FooterNav = _ref => {
     role: "menubar"
   }, menuGroups.map((group, index) => /*#__PURE__*/_react.default.createElement(_Nav.NavItem, {
     role: "none",
-    key: "".concat(group.id, "-").concat(group.title),
+    key: `${group.id}-${group.title}`,
     index: index,
     isSubMenuOpen: !!isSubMenuOpen[group.id]
   }, !isSmallBreakpoint ? /*#__PURE__*/_react.default.createElement(_Text.default, {

package/dist/components/Organisms/Header/HeaderNav/HeaderNav.js

@@ -102,7 +102,7 @@ const HeaderNav = _ref => {
     // on mobile, a clickable LINK on desktop but hover to reveal the submenu
     return /*#__PURE__*/_react.default.createElement(_HeaderNav.NavItem, {
       role: "none",
-      key: "".concat(thisID, "-item"),
+      key: `${thisID}-item`,
       index: index,
       isSubMenuOpen: !!isSubMenuOpen[thisID]
     }, isNotDesktop ? /*#__PURE__*/_react.default.createElement(_HeaderNav.NavLink, {
@@ -114,7 +114,7 @@ const HeaderNav = _ref => {
       onClick: hasPopUp ? e => toggleSubMenu(e, thisID) : null,
       onKeyUp: keyPressed(group.title),
       role: "button",
-      key: "".concat(thisID, "-link")
+      key: `${thisID}-link`
     }, thisFirstChild.title, hasSubMenu && /*#__PURE__*/_react.default.createElement(_HeaderNav.ChevronWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
       src: _MenuGroupIcon.default,
       alt: "chevron down icon"