@comicrelief/component-library 8.26.0 → 8.28.0

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

@@ -14,5 +14,220 @@ it('renders article teaser correctly', () => {
     tags: tags,
     categories: categories
   }, "Description go here...", /*#__PURE__*/_react.default.createElement("br", null), "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.")).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c3 {\n      color: #222222;\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c7 {\n      font-size: 2rem;\n      line-height: 2rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      line-height: 2rem;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c10 {\n      color: #222222;\n      font-size: 0.75rem;\n      line-height: 0.75rem;\n      text-transform: inherit;\n      font-weight: normal;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c0 {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      background-color: #FFFFFF;\n      border-radius: 1rem;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n    }\n\n    .c1 {\n      padding: 2rem;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      width: 100%;\n    }\n\n    .c2 {\n      display: block;\n    }\n\n    .c4 {\n      display: inline-block;\n      margin-bottom: 1rem;\n    }\n\n    .c5 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      position: absolute;\n      top: 0;\n      right: 0;\n      margin-right: 2rem;\n      margin-top: 1.5rem;\n    }\n\n    .c5 img:not(:last-child) {\n      margin-right: 8px;\n    }\n\n    .c6 {\n      object-fit: cover;\n      width: 24px;\n      height: 24px;\n    }\n\n    .c8 {\n      margin: 0 0 1.5rem;\n    }\n\n    .c9 {\n      margin: 0 0 1rem 0;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-wrap: wrap;\n      -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n    }\n\n    .c9 span:not(:first-child) {\n      margin-left: 1rem;\n    }\n\n    .c9 span:not(:first-child)::before {\n      content: '';\n      position: absolute;\n      left: -9px;\n      bottom: 5px;\n      width: 3px;\n      height: 3px;\n      background-color: currentColor;\n      border-radius: 50%;\n    }\n\n    .c11 {\n      position: relative;\n      text-transform: uppercase;\n    }\n\n    .c12 {\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    <article\n      className=\"c0\"\n    >\n      <div\n        className=\"c1\"\n      >\n        <div\n          className=\"c2\"\n        >\n          <span\n            className=\"c3 c4\"\n            color=\"grey_dark\"\n            size=\"s\"\n          >\n            15/06/2020\n          </span>\n          <div\n            className=\"c5\"\n          >\n            <img\n              alt=\"How we fund icon\"\n              className=\"c6\"\n              src=\"mock.asset\"\n            />\n            <img\n              alt=\"Social Tech icon\"\n              className=\"c6\"\n              src=\"mock.asset\"\n            />\n            <img\n              alt=\"Sport for Change icon\"\n              className=\"c6\"\n              src=\"mock.asset\"\n            />\n          </div>\n        </div>\n        <h3\n          className=\"c7 c8\"\n          color=\"inherit\"\n          height=\"2rem\"\n          size=\"xl\"\n        >\n          Title\n        </h3>\n        <div\n          className=\"c9\"\n        >\n          <span\n            className=\"c10 c11\"\n            color=\"grey_dark\"\n            size=\"xs\"\n          >\n            tag1\n          </span>\n          <span\n            className=\"c10 c11\"\n            color=\"grey_dark\"\n            size=\"xs\"\n          >\n            tag2\n          </span>\n          <span\n            className=\"c10 c11\"\n            color=\"grey_dark\"\n            size=\"xs\"\n          >\n            tag3\n          </span>\n          <span\n            className=\"c10 c11\"\n            color=\"grey_dark\"\n            size=\"xs\"\n          >\n            tag4\n          </span>\n        </div>\n        <div\n          className=\"c12\"\n        >\n          Description go here...\n          <br />\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n        </div>\n      </div>\n    </article>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c3 {
+      color: #222222;
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      font-weight: bold;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c7 {
+      font-size: 2rem;
+      line-height: 2rem;
+      text-transform: uppercase;
+      font-weight: normal;
+      line-height: 2rem;
+      font-family: 'Anton',Impact,sans-serif;
+      -webkit-letter-spacing: 0.03rem;
+      -moz-letter-spacing: 0.03rem;
+      -ms-letter-spacing: 0.03rem;
+      letter-spacing: 0.03rem;
+    }
+
+    .c10 {
+      color: #222222;
+      font-size: 0.75rem;
+      line-height: 0.75rem;
+      text-transform: inherit;
+      font-weight: normal;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c0 {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      background-color: #FFFFFF;
+      border-radius: 1rem;
+      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
+    }
+
+    .c1 {
+      padding: 2rem;
+      height: 100%;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      width: 100%;
+    }
+
+    .c2 {
+      display: block;
+    }
+
+    .c4 {
+      display: inline-block;
+      margin-bottom: 1rem;
+    }
+
+    .c5 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin-right: 2rem;
+      margin-top: 1.5rem;
+    }
+
+    .c5 img:not(:last-child) {
+      margin-right: 8px;
+    }
+
+    .c6 {
+      object-fit: cover;
+      width: 24px;
+      height: 24px;
+    }
+
+    .c8 {
+      margin: 0 0 1.5rem;
+    }
+
+    .c9 {
+      margin: 0 0 1rem 0;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+    }
+
+    .c9 span:not(:first-child) {
+      margin-left: 1rem;
+    }
+
+    .c9 span:not(:first-child)::before {
+      content: '';
+      position: absolute;
+      left: -9px;
+      bottom: 5px;
+      width: 3px;
+      height: 3px;
+      background-color: currentColor;
+      border-radius: 50%;
+    }
+
+    .c11 {
+      position: relative;
+      text-transform: uppercase;
+    }
+
+    .c12 {
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    <article
+      className="c0"
+    >
+      <div
+        className="c1"
+      >
+        <div
+          className="c2"
+        >
+          <span
+            className="c3 c4"
+            color="grey_dark"
+            size="s"
+          >
+            15/06/2020
+          </span>
+          <div
+            className="c5"
+          >
+            <img
+              alt="How we fund icon"
+              className="c6"
+              src="mock.asset"
+            />
+            <img
+              alt="Social Tech icon"
+              className="c6"
+              src="mock.asset"
+            />
+            <img
+              alt="Sport for Change icon"
+              className="c6"
+              src="mock.asset"
+            />
+          </div>
+        </div>
+        <h3
+          className="c7 c8"
+          color="inherit"
+          height="2rem"
+          size="xl"
+        >
+          Title
+        </h3>
+        <div
+          className="c9"
+        >
+          <span
+            className="c10 c11"
+            color="grey_dark"
+            size="xs"
+          >
+            tag1
+          </span>
+          <span
+            className="c10 c11"
+            color="grey_dark"
+            size="xs"
+          >
+            tag2
+          </span>
+          <span
+            className="c10 c11"
+            color="grey_dark"
+            size="xs"
+          >
+            tag3
+          </span>
+          <span
+            className="c10 c11"
+            color="grey_dark"
+            size="xs"
+          >
+            tag4
+          </span>
+        </div>
+        <div
+          className="c12"
+        >
+          Description go here...
+          <br />
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+        </div>
+      </div>
+    </article>
+  `);
 });

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

@@ -16,5 +16,59 @@ it('renders correctly', () => {
       markup: content
     })
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c2 {\n      text-align: left;\n    }\n\n    .c0 {\n      width: 100%;\n    }\n\n    .c1 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      padding: 4rem;\n    }\n\n    @media (min-width:740px) {\n      .c0 {\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: -ms-flexbox;\n        display: flex;\n      }\n    }\n\n    <section\n      className=\"c0\"\n    >\n      <div\n        className=\"c1\"\n      >\n        <div\n          className=\"c2\"\n          dangerouslySetInnerHTML={\n            Object {\n              \"__html\": \"<h1> Left Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\",\n            }\n          }\n        />\n      </div>\n      <div\n        className=\"c1\"\n      >\n        <div\n          className=\"c2\"\n          dangerouslySetInnerHTML={\n            Object {\n              \"__html\": \"<h1> Left Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\",\n            }\n          }\n        />\n      </div>\n    </section>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c2 {
+      text-align: left;
+    }
+
+    .c0 {
+      width: 100%;
+    }
+
+    .c1 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      padding: 4rem;
+    }
+
+    @media (min-width:740px) {
+      .c0 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+      }
+    }
+
+    <section
+      className="c0"
+    >
+      <div
+        className="c1"
+      >
+        <div
+          className="c2"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<h1> Left Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
+            }
+          }
+        />
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c2"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<h1> Left Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
+            }
+          }
+        />
+      </div>
+    </section>
+  `);
 });

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

@@ -15,5 +15,152 @@ it('renders correctly', () => {
     imageLow: _data.defaultData.imageLow,
     images: _data.defaultData.images
   }))).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c4 {\n      color: #FFFFFF;\n      font-size: 0.6875rem;\n      line-height: 0.6875rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c2 {\n      display: block;\n      width: 100%;\n      height: auto;\n      position: relative;\n    }\n\n    .c3 {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: none;\n    }\n\n    .c0 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      border-bottom: 2px solid #000000;\n      font-weight: normal;\n    }\n\n    .c0:hover {\n      color: #000000;\n      border-bottom: 2px solid #000000;\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      height: auto;\n    }\n\n    .c1 {\n      display: block;\n      position: relative;\n      padding: 0;\n      border: none;\n    }\n\n    .c1:hover,\n    .c1:focus {\n      border: none;\n    }\n\n    .c1:hover .c5,\n    .c1:focus .c5 {\n      overflow: inherit;\n      -webkit-clip-path: none;\n      clip-path: none;\n      margin: 0;\n      text-align: center;\n      -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n      transform: translateY(-50%);\n      -webkit-clip: auto;\n      clip: auto;\n      top: 50%;\n      left: 0;\n      width: 100%;\n      z-index: 2;\n    }\n\n    .c1:hover::after,\n    .c1:focus::after {\n      content: '';\n      position: absolute;\n      display: block;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: #E52630;\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {\n      .c2 {\n        background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);\n        background-size: cover;\n        background-position: center;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c6 {\n        font-size: 1rem;\n      }\n    }\n\n    <a\n      className=\"c0 c1\"\n      color=\"red\"\n      href=\"https://www.comicrelief.com\"\n      target=\"_self\"\n      type=\"standard\"\n    >\n      <div\n        className=\"c2 lazyload\"\n        height=\"auto\"\n        width=\"100%\"\n      >\n        <img\n          alt=\"test Image\"\n          className=\"c3 lazyload\"\n          data-lowsrc=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=100&h=50&q=100\"\n          data-sizes=\"auto\"\n          data-src={null}\n          data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n          height=\"auto\"\n          src={null}\n          srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n          width=\"100%\"\n        />\n      </div>\n      <span\n        className=\"c4 c5 c6\"\n        color=\"white\"\n        size=\"xxs\"\n      >\n        Find out more\n      </span>\n    </a>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c4 {
+      color: #FFFFFF;
+      font-size: 0.6875rem;
+      line-height: 0.6875rem;
+      text-transform: inherit;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c2 {
+      display: block;
+      width: 100%;
+      height: auto;
+      position: relative;
+    }
+
+    .c3 {
+      width: 100%;
+      height: auto;
+      display: block;
+      object-fit: none;
+    }
+
+    .c0 {
+      position: relative;
+      -webkit-text-decoration: none;
+      text-decoration: none;
+      display: inline;
+      line-height: 1.5rem;
+      color: #000000;
+      border-bottom: 2px solid #000000;
+      font-weight: normal;
+    }
+
+    .c0:hover {
+      color: #000000;
+      border-bottom: 2px solid #000000;
+    }
+
+    .c6 {
+      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;
+      height: auto;
+    }
+
+    .c1 {
+      display: block;
+      position: relative;
+      padding: 0;
+      border: none;
+    }
+
+    .c1:hover,
+    .c1:focus {
+      border: none;
+    }
+
+    .c1:hover .c5,
+    .c1:focus .c5 {
+      overflow: inherit;
+      -webkit-clip-path: none;
+      clip-path: none;
+      margin: 0;
+      text-align: center;
+      -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+      transform: translateY(-50%);
+      -webkit-clip: auto;
+      clip: auto;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      z-index: 2;
+    }
+
+    .c1:hover::after,
+    .c1:focus::after {
+      content: '';
+      position: absolute;
+      display: block;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: #E52630;
+    }
+
+    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+      .c2 {
+        background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+        background-size: cover;
+        background-position: center;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c6 {
+        font-size: 1rem;
+      }
+    }
+
+    <a
+      className="c0 c1"
+      color="red"
+      href="https://www.comicrelief.com"
+      target="_self"
+      type="standard"
+    >
+      <div
+        className="c2 lazyload"
+        height="auto"
+        width="100%"
+      >
+        <img
+          alt="test Image"
+          className="c3 lazyload"
+          data-lowsrc="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=100&h=50&q=100"
+          data-sizes="auto"
+          data-src={null}
+          data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
+          height="auto"
+          src={null}
+          srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+          width="100%"
+        />
+      </div>
+      <span
+        className="c4 c5 c6"
+        color="white"
+        size="xxs"
+      >
+        Find out more
+      </span>
+    </a>
+  `);
 });

package/dist/components/Molecules/Promo/_ProgressRing.js

@@ -27,12 +27,12 @@ const ProgressRing = _ref => {
     height: thisRadius * 2,
     width: thisRadius * 2
   }, /*#__PURE__*/_react.default.createElement(_PromoVideoButton.ProgressRingCircle, Object.assign({
-    strokeDasharray: "".concat(thisCircumference, " ").concat(thisCircumference),
+    strokeDasharray: `${thisCircumference} ${thisCircumference}`,
     strokeDashOffsetStyle: thisDashOffset,
-    strokeWidth: "".concat(thisStroke),
-    r: "".concat(initNormRadius),
-    cx: "".concat(thisRadius),
-    cy: "".concat(thisRadius)
+    strokeWidth: `${thisStroke}`,
+    r: `${initNormRadius}`,
+    cx: `${thisRadius}`,
+    cy: `${thisRadius}`
   }, rest))));
 };
 var _default = exports.default = ProgressRing;

package/dist/components/Molecules/SchoolLookup/SchoolLookup.js

@@ -17,7 +17,7 @@ const optionFetcher = async query => {
   });
   return response.data.data.schools;
 };
-const optionParser = school => "".concat(school.name, ", ").concat(school.post_code);
+const optionParser = school => `${school.name}, ${school.post_code}`;
 const SchoolLookup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     label = 'Enter the name or postcode of your school or nursery',

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

@@ -13,5 +13,194 @@ it('renders correctly', () => {
     },
     value: ""
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c6 {\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    .c4 {\n      width: 100%;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      color: #5C5C5E;\n    }\n\n    .c7 {\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    .c8 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c9 {\n      position: relative;\n      width: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: end;\n      -webkit-justify-content: flex-end;\n      -ms-flex-pack: end;\n      justify-content: flex-end;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n    }\n\n    .c10 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 1rem 2.4rem 1rem 1.5rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      border-radius: 0.5rem;\n      font-size: inherit;\n      z-index: 2;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c10:focus {\n      border: 1px solid #666;\n    }\n\n    .c0 {\n      width: 100%;\n      max-width: 1440px;\n      margin: auto;\n    }\n\n    .c1 {\n      margin: 1rem auto;\n      padding: 0 calc((4 * 0.25rem));\n    }\n\n    .c2 {\n      margin: 4rem auto;\n      width: 100%;\n      border-bottom: 4px solid #E52630;\n      overflow: hidden;\n    }\n\n    .c3 {\n      width: 100%;\n      padding: 0 0.5rem;\n    }\n\n    .c5 input {\n      padding: 13px 0;\n      margin: 0;\n      max-width: 100%;\n      border: 0;\n      outline: #E52630;\n      background: none;\n    }\n\n    .c5 input:focus {\n      border: 0;\n    }\n\n    @media (min-width:740px) {\n\n    }\n\n    @media (min-width:1024px) {\n\n    }\n\n    @media (min-width:740px) {\n      .c5 input {\n        height: 100px;\n        font-size: 3rem;\n      }\n    }\n\n    <div\n      className=\"c0\"\n    >\n      <div\n        className=\"c1\"\n      >\n        <div\n          className=\"c2\"\n          role=\"search\"\n        >\n          <div\n            className=\"c3\"\n          >\n            <label\n              className=\"c4 c5\"\n              htmlFor=\"search\"\n            >\n              <span\n                className=\"c6 c7\"\n                color=\"inherit\"\n                dangerouslySetInnerHTML={\n                  Object {\n                    \"__html\": \"Search\",\n                  }\n                }\n                size=\"s\"\n              />\n              <div\n                className=\"c8\"\n              >\n                \n                <div\n                  className=\"c9\"\n                >\n                  <input\n                    aria-describedby=\"search\"\n                    className=\"c10\"\n                    id=\"search\"\n                    name=\"search\"\n                    onChange={[Function]}\n                    placeholder=\"\"\n                    required={false}\n                    role=\"searchbox\"\n                    type=\"text\"\n                    value=\"\"\n                  />\n                  \n                </div>\n              </div>\n              \n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c6 {
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c4 {
+      width: 100%;
+      position: relative;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      color: #5C5C5E;
+    }
+
+    .c7 {
+      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;
+    }
+
+    .c8 {
+      position: relative;
+      font-size: 1.25rem;
+    }
+
+    .c9 {
+      position: relative;
+      width: 100%;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: end;
+      -webkit-justify-content: flex-end;
+      -ms-flex-pack: end;
+      justify-content: flex-end;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+    }
+
+    .c10 {
+      position: relative;
+      box-sizing: border-box;
+      width: 100%;
+      height: 48px;
+      padding: 1rem 2.4rem 1rem 1.5rem;
+      background-color: #F4F3F5;
+      border: 1px solid;
+      border-color: #E1E2E3;
+      box-shadow: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      color: #000000;
+      border-radius: 0.5rem;
+      font-size: inherit;
+      z-index: 2;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c10:focus {
+      border: 1px solid #666;
+    }
+
+    .c0 {
+      width: 100%;
+      max-width: 1440px;
+      margin: auto;
+    }
+
+    .c1 {
+      margin: 1rem auto;
+      padding: 0 calc((4 * 0.25rem));
+    }
+
+    .c2 {
+      margin: 4rem auto;
+      width: 100%;
+      border-bottom: 4px solid #E52630;
+      overflow: hidden;
+    }
+
+    .c3 {
+      width: 100%;
+      padding: 0 0.5rem;
+    }
+
+    .c5 input {
+      padding: 13px 0;
+      margin: 0;
+      max-width: 100%;
+      border: 0;
+      outline: #E52630;
+      background: none;
+    }
+
+    .c5 input:focus {
+      border: 0;
+    }
+
+    @media (min-width:740px) {
+
+    }
+
+    @media (min-width:1024px) {
+
+    }
+
+    @media (min-width:740px) {
+      .c5 input {
+        height: 100px;
+        font-size: 3rem;
+      }
+    }
+
+    <div
+      className="c0"
+    >
+      <div
+        className="c1"
+      >
+        <div
+          className="c2"
+          role="search"
+        >
+          <div
+            className="c3"
+          >
+            <label
+              className="c4 c5"
+              htmlFor="search"
+            >
+              <span
+                className="c6 c7"
+                color="inherit"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Search",
+                  }
+                }
+                size="s"
+              />
+              <div
+                className="c8"
+              >
+                
+                <div
+                  className="c9"
+                >
+                  <input
+                    aria-describedby="search"
+                    className="c10"
+                    id="search"
+                    name="search"
+                    onChange={[Function]}
+                    placeholder=""
+                    required={false}
+                    role="searchbox"
+                    type="text"
+                    value=""
+                  />
+                  
+                </div>
+              </div>
+              
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  `);
 });

package/dist/components/Molecules/SearchResult/SearchResult.js

@@ -95,7 +95,7 @@ const SearchResult = _ref7 => {
   })), /*#__PURE__*/_react.default.createElement(CopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     size: "xs",
     uppercase: true
-  }, "".concat(type ? " ".concat(type, " |") : '', " ").concat(date)), /*#__PURE__*/_react.default.createElement(Title, {
+  }, `${type ? ` ${type} |` : ''} ${date}`), /*#__PURE__*/_react.default.createElement(Title, {
     size: "xl",
     tag: "h3",
     uppercase: true