@comicrelief/component-library 6.10.0 → 7.0.1

package/dist/components/Organisms/Header/Header.md

@@ -36,12 +36,11 @@ import Link from '../../Atoms/Link/Link';
 />;
 ```
 
-# Comic Relief header with Search and ESU
+# Comic Relief header with Search
 
 ```js
 import data from './data/data';
 import Link from '../../Atoms/Link/Link';
-import HeaderEsuWithIcon from '../../Molecules/HeaderEsuWithIcon/HeaderEsuWithIcon';
 import searchIcon from './assets/icon--search.svg';
 import Icon from '../../Atoms/SocialIcons/Icon/Icon';
 import RichText from '../../Atoms/RichText/RichText';
@@ -86,17 +85,6 @@ const [success, setSuccess] = React.useState(false);
           tabIndex="0"
         />
       </div>
-
-      <HeaderEsuWithIcon
-        title={title}
-        topCopy={topCopy}
-        privacyCopy={privacyCopy}
-        successCopy={successCopy}
-        isSuccess={success}
-        privacyCopy={privacyCopy}
-        errorMsg=""
-        subscribe={() => setSuccess(!success)}
-      />
     </>
   }
 />;

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

@@ -29,5 +29,5 @@ it("renders correctly", function () {
     subtitle: "Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.",
     otherDescription: "Your donation will help us fund amazing projects in the UK and around the world."
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c6 {\n      font-size: 1.5rem;\n      line-height: 1.5rem;\n      text-transform: inherit;\n      font-weight: 800;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c7 {\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    .c12 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c16 {\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    .c22 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: 500;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c3 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c14 {\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      width: 100%;\n    }\n\n    .c17 {\n      margin-bottom: 0.5rem;\n    }\n\n    .c19 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 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    .c19:focus {\n      border: 1px solid #666;\n    }\n\n    .c18 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c0 {\n      background-color: #FEE3CC;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      min-height: 100vh;\n    }\n\n    .c2 {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: auto;\n    }\n\n    .c2:before {\n      color: #FEE3CC;\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-shadow: inset 0px 4rem 2rem -2rem;\n    }\n\n    .c4 {\n      position: relative;\n      max-width: 320px;\n      text-align: center;\n      margin-bottom: 50%;\n    }\n\n    .c5 {\n      padding: 2rem 1rem 0;\n      margin-bottom: 2rem;\n    }\n\n    .c8 {\n      background-color: #FFFFFF;\n      box-shadow: 0px 1rem 4rem rgba(0,0,0,0.3);\n      height: 450px;\n    }\n\n    .c9 {\n      padding: 1rem;\n    }\n\n    .c9 h3 {\n      margin-top: 1rem;\n    }\n\n    .c9 input {\n      max-width: 100%;\n      margin: 0;\n    }\n\n    .c10 {\n      padding: 0;\n      margin: 0;\n      border: none;\n    }\n\n    .c10 >:not(:last-child):not(legend) {\n      margin-bottom: 2rem;\n    }\n\n    .c11 {\n      margin: 0;\n      padding: 0;\n    }\n\n    .c13 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: justify;\n      -webkit-justify-content: space-between;\n      -ms-flex-pack: justify;\n      justify-content: space-between;\n    }\n\n    .c13 label {\n      -webkit-flex: 0 0 30%;\n      -ms-flex: 0 0 30%;\n      flex: 0 0 30%;\n    }\n\n    .c13 label input {\n      cursor: pointer;\n      padding: 1rem;\n    }\n\n    .c13 label:hover input {\n      border-color: #E52630;\n    }\n\n    .c21 {\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    }\n\n    .c23 {\n      margin-right: auto;\n    }\n\n    .c24 {\n      position: relative;\n      -webkit-flex: 0 0 50%;\n      -ms-flex: 0 0 50%;\n      flex: 0 0 50%;\n      font-weight: 400;\n      display: block;\n    }\n\n    .c24 span {\n      position: absolute;\n      padding: 0px 15px;\n      font-size: 20px;\n      top: 50%;\n      -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n      transform: translateY(-50%);\n      left: 0px;\n      font-weight: 500;\n    }\n\n    .c24 input {\n      border: 2px solid #E1E2E3;\n      background: transparent;\n      padding: 0.5rem 1rem 0.5rem 2rem;\n    }\n\n    .c24 input:focus {\n      border: 2px solid #E52630;\n    }\n\n    .c26 {\n      line-height: 1.5;\n    }\n\n    .c25 {\n      width: 100%;\n      color: #FFFFFF;\n      font-size: 1rem;\n      font-weight: bold;\n      cursor: pointer;\n      padding: 1rem 0.5rem;\n      background: #E52630;\n      border: none;\n      border-radius: 100px;\n    }\n\n    .c25:active,\n    .c25:focus,\n    .c25:hover {\n      background-color: #961D35;\n    }\n\n    .c15 {\n      display: block;\n    }\n\n    .c15 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n    }\n\n    .c20 {\n      display: block;\n    }\n\n    .c20 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n      border-color: #E52630;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    @media (min-width:740px) {\n      .c19 {\n        max-width: 290px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 {\n        -webkit-align-items: center;\n        -webkit-box-align: center;\n        -ms-flex-align: center;\n        align-items: center;\n        -webkit-box-pack: inherit;\n        -webkit-justify-content: inherit;\n        -ms-flex-pack: inherit;\n        justify-content: inherit;\n        min-height: 750px;\n        height: 100vh;\n        max-height: 900px;\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        height: 100%;\n      }\n\n      .c2:before {\n        content: none;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c4 {\n        margin: 0 8rem;\n        max-width: 420px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c8 {\n        height: 430px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c24 {\n        -webkit-flex: 0 0 60%;\n        -ms-flex: 0 0 60%;\n        flex: 0 0 60%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c25 {\n        width: auto;\n        padding: 1rem 2rem;\n        margin: 0 auto 2rem;\n      }\n    }\n\n    <div\n      className=\"c0\"\n      id=\"mship-1\"\n    >\n      <div\n        className=\"c1 c2\"\n        height=\"100%\"\n        width=\"100%\"\n      >\n        <img\n          alt=\"Background image\"\n          className=\"c3 lazyload\"\n          data-src={null}\n          height=\"100%\"\n          width=\"100%\"\n        />\n      </div>\n      <div\n        className=\"c4\"\n      >\n        <div\n          className=\"c5\"\n        >\n          <h2\n            className=\"c6\"\n            color=\"inherit\"\n            size=\"l\"\n          >\n            Help someone like Jordan see a better tomorrow\n          </h2>\n          <p\n            className=\"c7\"\n            color=\"inherit\"\n            size=\"s\"\n          >\n            Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.\n          </p>\n        </div>\n        <div\n          className=\"c8\"\n        >\n          <form\n            className=\"c9\"\n            onSubmit={[Function]}\n          >\n            <fieldset\n              className=\"c10\"\n            >\n              <legend\n                className=\"c11\"\n              >\n                <h3\n                  className=\"c12\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Choose your monthly donation\n                </h3>\n              </legend>\n              <div\n                className=\"c13\"\n              >\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box1\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box1\"\n                      aria-label=\"\xA35\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box1\"\n                      name=\"mship-1--moneyBuy1\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 5\"\n                    />\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c20\"\n                  htmlFor=\"mship-1--moneyBuy-box2\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box2\"\n                      aria-label=\"\xA310\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box2\"\n                      name=\"mship-1--moneyBuy2\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 10\"\n                    />\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box3\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box3\"\n                      aria-label=\"\xA320\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box3\"\n                      name=\"mship-1--moneyBuy3\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 20\"\n                    />\n                  </div>\n                  \n                </label>\n              </div>\n              <div\n                className=\"c21\"\n              >\n                <span\n                  className=\"c22 c23\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Other amount\n                </span>\n                <label\n                  className=\"c14 c24\"\n                  htmlFor=\"mship-1--MoneyBuy-userInput\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\xA3\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--MoneyBuy-userInput\"\n                      aria-label=\"Input a different amount\"\n                      className=\"c19\"\n                      id=\"mship-1--MoneyBuy-userInput\"\n                      max=\"20000\"\n                      min=\"1\"\n                      name=\"membership_amount\"\n                      onChange={[Function]}\n                      onClick={[Function]}\n                      onKeyPress={[Function]}\n                      pattern=\"[^[0-9]+([,.][0-9]+)?$]\"\n                      placeholder=\"0.00\"\n                      required={false}\n                      step=\"0.01\"\n                      type=\"number\"\n                      value=\"\"\n                    />\n                  </div>\n                  \n                </label>\n              </div>\n              <input\n                className=\"c25\"\n                type=\"submit\"\n                value=\"Donate\"\n              />\n              <p\n                className=\"c26\"\n              />\n            </fieldset>\n          </form>\n        </div>\n      </div>\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c6 {\n      font-size: 1.5rem;\n      line-height: 1.5rem;\n      text-transform: inherit;\n      font-weight: 800;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c7 {\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    .c12 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c16 {\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    .c22 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: 500;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c3 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c14 {\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      width: 100%;\n    }\n\n    .c17 {\n      margin-bottom: 0.5rem;\n    }\n\n    .c19 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 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    .c19:focus {\n      border: 1px solid #666;\n    }\n\n    .c18 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c15 {\n      display: block;\n    }\n\n    .c15 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n    }\n\n    .c20 {\n      display: block;\n    }\n\n    .c20 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n      border-color: #E52630;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    .c0 {\n      background-color: #FEE3CC;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      min-height: 100vh;\n    }\n\n    .c2 {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: auto;\n    }\n\n    .c2:before {\n      color: #FEE3CC;\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-shadow: inset 0px 4rem 2rem -2rem;\n    }\n\n    .c4 {\n      position: relative;\n      max-width: 320px;\n      text-align: center;\n      margin-bottom: 50%;\n    }\n\n    .c5 {\n      padding: 2rem 1rem 0;\n      margin-bottom: 2rem;\n    }\n\n    .c8 {\n      background-color: #FFFFFF;\n      box-shadow: 0px 1rem 4rem rgba(0,0,0,0.3);\n      height: 450px;\n    }\n\n    .c9 {\n      padding: 1rem;\n    }\n\n    .c9 h3 {\n      margin-top: 1rem;\n    }\n\n    .c9 input {\n      max-width: 100%;\n      margin: 0;\n    }\n\n    .c10 {\n      padding: 0;\n      margin: 0;\n      border: none;\n    }\n\n    .c10 >:not(:last-child):not(legend) {\n      margin-bottom: 2rem;\n    }\n\n    .c11 {\n      margin: 0;\n      padding: 0;\n    }\n\n    .c13 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: justify;\n      -webkit-justify-content: space-between;\n      -ms-flex-pack: justify;\n      justify-content: space-between;\n    }\n\n    .c13 label {\n      -webkit-flex: 0 0 30%;\n      -ms-flex: 0 0 30%;\n      flex: 0 0 30%;\n    }\n\n    .c13 label input {\n      cursor: pointer;\n      padding: 1rem;\n    }\n\n    .c13 label:hover input {\n      border-color: #E52630;\n    }\n\n    .c21 {\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    }\n\n    .c23 {\n      margin-right: auto;\n    }\n\n    .c24 {\n      position: relative;\n      -webkit-flex: 0 0 50%;\n      -ms-flex: 0 0 50%;\n      flex: 0 0 50%;\n      font-weight: 400;\n      display: block;\n    }\n\n    .c24 span {\n      position: absolute;\n      padding: 0px 15px;\n      font-size: 20px;\n      top: 50%;\n      -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n      transform: translateY(-50%);\n      left: 0px;\n      font-weight: 500;\n    }\n\n    .c24 input {\n      border: 2px solid #E1E2E3;\n      background: transparent;\n      padding: 0.5rem 1rem 0.5rem 2rem;\n    }\n\n    .c24 input:focus {\n      border: 2px solid #E52630;\n    }\n\n    .c26 {\n      line-height: 1.5;\n    }\n\n    .c25 {\n      width: 100%;\n      color: #FFFFFF;\n      font-size: 1rem;\n      font-weight: bold;\n      cursor: pointer;\n      padding: 1rem 0.5rem;\n      background: #E52630;\n      border: none;\n      border-radius: 100px;\n    }\n\n    .c25:active,\n    .c25:focus,\n    .c25:hover {\n      background-color: #961D35;\n    }\n\n    @media (min-width:740px) {\n      .c19 {\n        max-width: 290px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 {\n        -webkit-align-items: center;\n        -webkit-box-align: center;\n        -ms-flex-align: center;\n        align-items: center;\n        -webkit-box-pack: inherit;\n        -webkit-justify-content: inherit;\n        -ms-flex-pack: inherit;\n        justify-content: inherit;\n        min-height: 750px;\n        height: 100vh;\n        max-height: 900px;\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        height: 100%;\n      }\n\n      .c2:before {\n        content: none;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c4 {\n        margin: 0 8rem;\n        max-width: 420px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c8 {\n        height: 430px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c24 {\n        -webkit-flex: 0 0 60%;\n        -ms-flex: 0 0 60%;\n        flex: 0 0 60%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c25 {\n        width: auto;\n        padding: 1rem 2rem;\n        margin: 0 auto 2rem;\n      }\n    }\n\n    <div\n      className=\"c0\"\n      id=\"mship-1\"\n    >\n      <div\n        className=\"c1 c2\"\n        height=\"100%\"\n        width=\"100%\"\n      >\n        <img\n          alt=\"Background image\"\n          className=\"c3 lazyload\"\n          data-src={null}\n          height=\"100%\"\n          width=\"100%\"\n        />\n      </div>\n      <div\n        className=\"c4\"\n      >\n        <div\n          className=\"c5\"\n        >\n          <h2\n            className=\"c6\"\n            color=\"inherit\"\n            size=\"l\"\n          >\n            Help someone like Jordan see a better tomorrow\n          </h2>\n          <p\n            className=\"c7\"\n            color=\"inherit\"\n            size=\"s\"\n          >\n            Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.\n          </p>\n        </div>\n        <div\n          className=\"c8\"\n        >\n          <form\n            className=\"c9\"\n            onSubmit={[Function]}\n          >\n            <fieldset\n              className=\"c10\"\n            >\n              <legend\n                className=\"c11\"\n              >\n                <h3\n                  className=\"c12\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Choose your monthly donation\n                </h3>\n              </legend>\n              <div\n                className=\"c13\"\n              >\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box1\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box1\"\n                      aria-label=\"\xA35\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box1\"\n                      name=\"mship-1--moneyBuy1\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 5\"\n                    />\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c20\"\n                  htmlFor=\"mship-1--moneyBuy-box2\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box2\"\n                      aria-label=\"\xA310\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box2\"\n                      name=\"mship-1--moneyBuy2\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 10\"\n                    />\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box3\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box3\"\n                      aria-label=\"\xA320\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box3\"\n                      name=\"mship-1--moneyBuy3\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 20\"\n                    />\n                  </div>\n                  \n                </label>\n              </div>\n              <div\n                className=\"c21\"\n              >\n                <span\n                  className=\"c22 c23\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Other amount\n                </span>\n                <label\n                  className=\"c14 c24\"\n                  htmlFor=\"mship-1--MoneyBuy-userInput\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\xA3\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--MoneyBuy-userInput\"\n                      aria-label=\"Input a different amount\"\n                      className=\"c19\"\n                      id=\"mship-1--MoneyBuy-userInput\"\n                      max=\"20000\"\n                      min=\"1\"\n                      name=\"membership_amount\"\n                      onChange={[Function]}\n                      onClick={[Function]}\n                      onKeyPress={[Function]}\n                      pattern=\"[^[0-9]+([,.][0-9]+)?$]\"\n                      placeholder=\"0.00\"\n                      required={false}\n                      step=\"0.01\"\n                      type=\"number\"\n                      value=\"\"\n                    />\n                  </div>\n                  \n                </label>\n              </div>\n              <input\n                className=\"c25\"\n                type=\"submit\"\n                value=\"Donate\"\n              />\n              <p\n                className=\"c26\"\n              />\n            </fieldset>\n          </form>\n        </div>\n      </div>\n    </div>\n  ");
 });

package/dist/index.js

@@ -269,12 +269,6 @@ Object.defineProperty(exports, "VideoBanner", {
     return _VideoBanner.default;
   }
 });
-Object.defineProperty(exports, "HeaderEsuWithIcon", {
-  enumerable: true,
-  get: function get() {
-    return _HeaderEsuWithIcon.default;
-  }
-});
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function get() {
@@ -350,7 +344,19 @@ Object.defineProperty(exports, "SimpleSchoolLookup", {
 Object.defineProperty(exports, "EmailSignUp", {
   enumerable: true,
   get: function get() {
-    return _EmailSignUp.default;
+    return _EmailSignUp.EmailSignUp;
+  }
+});
+Object.defineProperty(exports, "buildEsuValidationSchema", {
+  enumerable: true,
+  get: function get() {
+    return _EmailSignUp.buildEsuValidationSchema;
+  }
+});
+Object.defineProperty(exports, "ESU_FIELDS", {
+  enumerable: true,
+  get: function get() {
+    return _EmailSignUp.ESU_FIELDS;
   }
 });
 Object.defineProperty(exports, "CookieBanner", {
@@ -468,8 +474,6 @@ var _ShareButton = _interopRequireDefault(require("./components/Molecules/ShareB
 
 var _VideoBanner = _interopRequireDefault(require("./components/Molecules/VideoBanner/VideoBanner"));
 
-var _HeaderEsuWithIcon = _interopRequireDefault(require("./components/Molecules/HeaderEsuWithIcon/HeaderEsuWithIcon"));
-
 var _Icon = _interopRequireDefault(require("./components/Atoms/SocialIcons/Icon/Icon"));
 
 var _Typeahead = _interopRequireDefault(require("./components/Molecules/Typeahead/Typeahead"));
@@ -494,7 +498,7 @@ var _Lookup = _interopRequireDefault(require("./components/Molecules/Lookup/Look
 
 var _SimpleSchoolLookup = _interopRequireDefault(require("./components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup"));
 
-var _EmailSignUp = _interopRequireDefault(require("./components/Organisms/EmailSignUp/EmailSignUp"));
+var _EmailSignUp = require("./components/Organisms/EmailSignUp/_EmailSignUp");
 
 var _CookieBanner = _interopRequireDefault(require("./components/Organisms/CookieBanner/CookieBanner"));
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "6.10.0",
+  "version": "7.0.1",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -30,6 +30,7 @@
     "moment": "^2.29.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
+    "react-canvas-confetti": "^1.3.0",
     "react-currency-format": "^1.0.0",
     "react-dom": "^17.0.2",
     "react-hook-form": "^6.3.0",

package/src/components/Organisms/Donate/Donate.md

@@ -41,7 +41,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-2"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -66,7 +66,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-3"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -91,7 +91,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-4"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -118,7 +118,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-5"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -143,7 +143,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-6"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -168,7 +168,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-7"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -193,7 +193,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-8"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -213,7 +213,7 @@ import data from './dev-data/data-single';
   backgroundColor="blue_dark"
   formAlignRight={false}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-9"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -241,7 +241,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-10"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"

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

@@ -125,6 +125,7 @@ const Signup = ({
           givingType={givingType}
           changeGivingType={data => setGivingType(data)}
           setPopOpen={setPopOpen}
+          mbshipID={mbshipID}
         />
       )}
 

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

@@ -1,91 +1,19 @@
 import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-
-import { media } from '../../../../theme/shared/size';
-import spacing from '../../../../theme/shared/spacing';
-import zIndex from '../../../../theme/shared/zIndex';
-import hideVisually from '../../../../theme/shared/hideVisually';
-
-const Switch = styled.span`
-  width: 50%;
-  height: 48px;
-  border-radius: 2rem;
-  ${zIndex('low')};
-  display: block;
-  position: absolute;
-  transition: left 0.15s ease-out;
-  background-color: ${({ theme }) => theme.color('blue')};
-  left: 2px;
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
-`;
 
-const Wrapper = styled.div`
-  display: flex;
-  margin: ${spacing('md')} 0;
-`;
-
-const MoneyBox = styled.div`
-  width: 100%;
-  padding: 2px;
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  margin: ${spacing('md')} 0;
-  border-radius: 2rem;
-  background: ${({ theme }) => theme.color('blue_light')};
-  ${media('small')} {
-    width: 450px;
-    margin: 0 auto;
-  }
-  #give-monthly:checked ~ ${Switch} {
-    left: calc(50% - 2px);
-  }
-  input {
-    ${hideVisually}
-  }
-  input:focus:not(:checked) + label {
-    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
-  }
-`;
-
-const Label = styled.label`
-  font-size: ${({ theme }) => theme.fontSize('s')};
-  font-family: ${({ theme }) => theme.fontFamilies('Montserrat')};
-  font-weight: bold;
-  min-height: 48px;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  flex-basis: 50%;
-  border: none;
-  transition: color 0.15s ease-out;
-  ${zIndex('medium')};
-  cursor: ${({ active }) => (active === true ? 'default' : 'pointer')};
-  &:active:focus {
-    box-shadow: none;
-  }
-  &:focus {
-    border: none;
-    outline: none;
-    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
-  }
-  &[for='give-once'] {
-    border-radius: 2rem;
-    color: ${({ active, theme }) => (active === true ? theme.color('white') : theme.color('black'))};
-  }
-  &[for='give-monthly'] {
-    border-radius: 2rem;
-    color: ${({ active, theme }) => (active === true ? theme.color('white') : theme.color('black'))};
-  }
-`;
+import PropTypes from 'prop-types';
+import {
+  Switch, Wrapper, MoneyBox, Label
+} from './GivingSelector.style';
 
-const GivingSelector = ({ givingType, changeGivingType, setPopOpen }) => (
+const GivingSelector = ({
+  givingType, changeGivingType, setPopOpen, mbshipID
+}) => (
   <Wrapper>
     <MoneyBox>
       <input
+        className="give-once"
         aria-label="Single"
-        id="give-once"
+        id={`give-once--${mbshipID}`}
         value="Single"
         type="radio"
         label=""
@@ -96,12 +24,13 @@ const GivingSelector = ({ givingType, changeGivingType, setPopOpen }) => (
           setPopOpen(true);
         }}
       />
-      <Label active={givingType === 'single'} htmlFor="give-once">
+      <Label active={givingType === 'single'} htmlFor={`give-once--${mbshipID}`}>
         Single
       </Label>
       <input
+        className="give-monthly"
         aria-label="Monthly"
-        id="give-monthly"
+        id={`give-monthly--${mbshipID}`}
         value="Monthly"
         type="radio"
         label=""
@@ -112,7 +41,7 @@ const GivingSelector = ({ givingType, changeGivingType, setPopOpen }) => (
           setPopOpen(false);
         }}
       />
-      <Label active={givingType === 'monthly'} htmlFor="give-monthly">
+      <Label active={givingType === 'monthly'} htmlFor={`give-monthly--${mbshipID}`}>
         Monthly
       </Label>
       <Switch />
@@ -123,7 +52,8 @@ const GivingSelector = ({ givingType, changeGivingType, setPopOpen }) => (
 GivingSelector.propTypes = {
   givingType: PropTypes.string.isRequired,
   changeGivingType: PropTypes.func.isRequired,
-  setPopOpen: PropTypes.func.isRequired
+  setPopOpen: PropTypes.func.isRequired,
+  mbshipID: PropTypes.string.isRequired
 };
 
 export default GivingSelector;

package/src/components/Organisms/Donate/GivingSelector/GivingSelector.style.js

@@ -0,0 +1,78 @@
+import styled from 'styled-components';
+
+import { media } from '../../../../theme/shared/size';
+import spacing from '../../../../theme/shared/spacing';
+import zIndex from '../../../../theme/shared/zIndex';
+import hideVisually from '../../../../theme/shared/hideVisually';
+
+const Switch = styled.span`
+  width: 50%;
+  height: 48px;
+  border-radius: 2rem;
+  ${zIndex('low')};
+  display: block;
+  position: absolute;
+  transition: left 0.15s ease-out;
+  background-color: ${({ theme }) => theme.color('blue')};
+  left: 2px;
+  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  margin: ${spacing('md')} 0;
+`;
+
+const MoneyBox = styled.div`
+  width: 100%;
+  padding: 2px;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  margin: ${spacing('md')} 0;
+  border-radius: 2rem;
+  background: ${({ theme }) => theme.color('blue_light')};
+  ${media('small')} {
+    width: 450px;
+    margin: 0 auto;
+  }
+  .give-monthly:checked ~ ${Switch} {
+    left: calc(50% - 2px);
+  }
+  input {
+    ${hideVisually}
+  }
+  input:focus:not(:checked) + label {
+    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
+  }
+`;
+
+const Label = styled.label`
+  font-size: ${({ theme }) => theme.fontSize('s')};
+  font-family: ${({ theme }) => theme.fontFamilies('Montserrat')};
+  font-weight: bold;
+  min-height: 48px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-basis: 50%;
+  border: none;
+  transition: color 0.15s ease-out;
+  ${zIndex('medium')};
+  cursor: ${({ active }) => (active === true ? 'default' : 'pointer')};
+  border-radius: 2rem;
+  color: ${({ active, theme }) => (active === true ? theme.color('white') : theme.color('black'))};
+
+  &:active:focus {
+    box-shadow: none;
+  }
+  &:focus {
+    border: none;
+    outline: none;
+    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
+  }
+`;
+
+export {
+  Switch, Wrapper, MoneyBox, Label
+};

package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -367,7 +367,7 @@ exports[`Monthly donation renders correctly 1`] = `
   background: #BECCF9;
 }
 
-.c8 #give-monthly:checked ~ .c11 {
+.c8 .give-monthly:checked ~ .c11 {
   left: calc(50% - 2px);
 }
 
@@ -415,6 +415,8 @@ exports[`Monthly donation renders correctly 1`] = `
   transition: color 0.15s ease-out;
   z-index: 2;
   cursor: default;
+  border-radius: 2rem;
+  color: #FFFFFF;
 }
 
 .c9:active:focus {
@@ -427,16 +429,6 @@ exports[`Monthly donation renders correctly 1`] = `
   box-shadow: inset 0 0 0 4px #0565D1;
 }
 
-.c9[for='give-once'] {
-  border-radius: 2rem;
-  color: #FFFFFF;
-}
-
-.c9[for='give-monthly'] {
-  border-radius: 2rem;
-  color: #FFFFFF;
-}
-
 .c10 {
   font-size: 1rem;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
@@ -462,6 +454,8 @@ exports[`Monthly donation renders correctly 1`] = `
   transition: color 0.15s ease-out;
   z-index: 2;
   cursor: pointer;
+  border-radius: 2rem;
+  color: #000000;
 }
 
 .c10:active:focus {
@@ -474,16 +468,6 @@ exports[`Monthly donation renders correctly 1`] = `
   box-shadow: inset 0 0 0 4px #0565D1;
 }
 
-.c10[for='give-once'] {
-  border-radius: 2rem;
-  color: #000000;
-}
-
-.c10[for='give-monthly'] {
-  border-radius: 2rem;
-  color: #000000;
-}
-
 @media (min-width:740px) {
   .c5 {
     font-size: 1.25rem;
@@ -644,8 +628,9 @@ exports[`Monthly donation renders correctly 1`] = `
           <input
             aria-label="Single"
             checked={true}
+            className="give-once"
             errormsg=""
-            id="give-once"
+            id="give-once--mship-1"
             label=""
             onClick={[Function]}
             type="radio"
@@ -653,15 +638,16 @@ exports[`Monthly donation renders correctly 1`] = `
           />
           <label
             className="c9"
-            htmlFor="give-once"
+            htmlFor="give-once--mship-1"
           >
             Single
           </label>
           <input
             aria-label="Monthly"
             checked={false}
+            className="give-monthly"
             errormsg=""
-            id="give-monthly"
+            id="give-monthly--mship-1"
             label=""
             onClick={[Function]}
             type="radio"
@@ -669,7 +655,7 @@ exports[`Monthly donation renders correctly 1`] = `
           />
           <label
             className="c10"
-            htmlFor="give-monthly"
+            htmlFor="give-monthly--mship-1"
           >
             Monthly
           </label>