@comicrelief/component-library 6.9.1 → 7.0.0

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.9.1",
+  "version": "7.0.0",
   "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/Molecules/Box/Box.js

@@ -22,7 +22,7 @@ const Image = styled.div`
   height: auto;
   flex-basis: calc(100% / 3);
   img {
-    border-radius: ${props => (props.squareCorners ? '0' : '1rem')};
+    border-radius: ${props => (props.squaredCorners ? '0' : '1rem')};
     overflow: hidden;
   }
 `;
@@ -51,12 +51,12 @@ const Box = ({
   height,
   width,
   children,
-  squareCorners,
+  squaredCorners,
   ...rest
 }) => (
   <Container {...rest}>
     {imageLow ? (
-      <Image squareCorners={squareCorners}>
+      <Image squaredCorners={squaredCorners}>
         <Picture
           alt={imageAltText}
           imageLow={imageLow}
@@ -64,7 +64,7 @@ const Box = ({
           image={image}
           width={width}
           height="auto"
-          squareCorners={squareCorners}
+          squaredCorners={squaredCorners}
         />
       </Image>
     ) : null}
@@ -80,7 +80,7 @@ Box.propTypes = {
   height: PropTypes.string,
   imageAltText: PropTypes.string,
   children: PropTypes.node,
-  squareCorners: PropTypes.bool
+  squaredCorners: PropTypes.bool
 };
 
 Box.defaultProps = {
@@ -91,7 +91,7 @@ Box.defaultProps = {
   imageAltText: '',
   width: '100%',
   height: '100%',
-  squareCorners: false
+  squaredCorners: false
 };
 
 export default Box;

package/src/components/Molecules/Card/Card.js

@@ -9,7 +9,7 @@ const Container = styled.div`
   position: relative;
   flex-direction: column;
   height: 100%;
-  border-radius: ${props => (props.squareCorners ? '0' : '1rem')};
+  border-radius: ${props => (props.squaredCorners ? '0' : '1rem')};
   overflow: hidden;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
 `;
@@ -33,10 +33,10 @@ const Card = ({
   height,
   width,
   children,
-  squareCorners,
+  squaredCorners,
   ...rest
 }) => (
-  <Container backgroundColor={backgroundColor} squareCorners={squareCorners} {...rest}>
+  <Container backgroundColor={backgroundColor} squaredCorners={squaredCorners} {...rest}>
     {imageLow ? (
       <Image>
         <Picture
@@ -63,7 +63,7 @@ Card.propTypes = {
   height: PropTypes.string,
   imageAltText: PropTypes.string,
   children: PropTypes.node,
-  squareCorners: PropTypes.bool
+  squaredCorners: PropTypes.bool
 };
 
 Card.defaultProps = {
@@ -75,7 +75,7 @@ Card.defaultProps = {
   imageAltText: '',
   width: '100%',
   height: '100%',
-  squareCorners: false
+  squaredCorners: false
 };
 
 export default Card;

package/src/components/Organisms/EmailSignUp/EmailSignUp.md

@@ -1,129 +1,14 @@
-# Email Sign Up
+# Email SignUp Form
 
-```js
-import RichText from '../../Atoms/RichText/RichText';
-
-const title = 'Stay in the know!';
-const topCopy = (
-  <RichText
-    markup={`<p>Get regular email updates and info on what we're up to!</p>`}
-  />
-);
-const privacyCopy = (
-  <RichText
-    markup={`<p>Our <a class="link link--white inline" href="/privacy-notice">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>`}
-  />
-);
-const successCopy = (
-  <RichText
-    markup={`<p>Thanks! Your first email will be with you shortly</p>`}
-  />
-);
-
-const [success, setSuccess] = React.useState(false);
-const [error, setError] = React.useState('');
-
-const sendEmail = email => {
-  setTimeout(() => setSuccess(!success), 2000);
-  console.log(email);
-};
-
-const validate = ({ email }) => {
-  let isValid = false;
-  if (email.includes('@')) {
-    isValid = true;
-    setError('');
-  } else {
-    setError('invalid email!');
-  }
-  return isValid;
-};
-
-<EmailSignUp
-  title={title}
-  topCopy={topCopy}
-  successCopy={successCopy}
-  isSuccess={success}
-  privacyCopy={privacyCopy}
-  errorMsg={error}
-  subscribe={sendEmail}
-  validate={validate}
-/>;
-```
-
-# Email Sign Up Schools
 
 ```js
-import RichText from '../../Atoms/RichText/RichText';
-
-const title = 'Stay in the know!';
-const topCopy = (
-  <RichText
-    markup={`<p>Get regular email updates and info on what we're up to!</p>`}
-  />
-);
-const privacyCopy = (
-  <RichText
-    markup={`<p>Our <a class="link link--white inline" href="/privacy-notice">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>`}
-  />
-);
-const successCopy = (
-  <RichText
-    markup={`<p>Thanks! Your first email will be with you shortly</p>`}
-  />
-);
-const selectItems = [
-  { value: '', displayValue: '-- Select age group --' },
-  { value: 'Option one', displayValue: 'The first option' },
-  {
-    value: 'Option two',
-    displayValue: 'The second option'
-  },
-  { value: 'Option three', displayValue: 'The third option' },
-  { value: 'Option four', displayValue: 'The fourth option' }
-];
-
-const [successSchools, setSuccessSchools] = React.useState(false);
-const [error, setError] = React.useState('');
-
-sendEmail = emailAndAge => {
-  setTimeout(
-    () => setSuccessSchools(!successSchools),
-    2000
-  );
-  console.log(emailAndAge);
-};
+import EmailSignUpForm from './EmailSignUpForm';
+import Text from '../../Atoms/Text/Text';
 
-const validate = ({ email, age }) => {
-  let isValid = false;
-  if (email.includes('@')) {
-    isValid = true;
-    setError('');
-  } else {
-    setError('invalid email!');
-  }
-  if (isValid === true && typeof age !== 'undefined') {
-    if (age) {
-      setError('');
-    } else {
-      isValid = false;
-      setError('invalid age!');
-    }
-  }
-  return isValid;
-};
+<>
+    <Text tag="p">This EmailSignUpForm component exists purely to show the EmailSignUp component functioning within the Component Library; applications are to provide their own react-hook-form form and validation, based on these.</Text>
+    
+    <EmailSignUpForm />
+</>
 
-<EmailSignUp
-  title={title}
-  topCopy={topCopy}
-  successCopy={successCopy}
-  schoolsCopy="Now please select your teaching group so you get the right updates."
-  isSuccess={successSchools}
-  selectItems={selectItems}
-  isSchools
-  privacyCopy={privacyCopy}
-  errorMsg={error}
-  subscribe={sendEmail}
-  validate={validate}
-/>;
 ```

package/src/components/Organisms/EmailSignUp/EmailSignUp.style.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import spacing from '../../../theme/shared/spacing';
-import Input from '../../Atoms/Input/Input';
+import TextInput from './_TextInput';
 import Text from '../../Atoms/Text/Text';
 
 const ESUWrapper = styled.div`
@@ -9,7 +9,8 @@ const ESUWrapper = styled.div`
   flex-direction: column;
   font-size: ${({ theme }) => theme.fontSize('s')};
   color: ${({ theme }) => theme.color('white')};
-  background-color: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+  background-color: ${({ theme, backgroundColour }) => theme.color(backgroundColour)};
+  padding: ${spacing('m')};
 `;
 
 const TopCopyWrapper = styled.div`
@@ -19,14 +20,8 @@ const TopCopyWrapper = styled.div`
 
 const ButtonWrapper = styled.div`
   margin-top: ${spacing('md')};
-  input {
-    text-align: center;
-    width: 100%;
-    font-size: ${({ theme }) => theme.fontSize('s')};
-    @media ${({ theme }) => theme.breakpoint('small')} {
-      font-size: ${({ theme }) => theme.fontSize('m')};
-      max-width: 180px;
-    }
+  button {
+    background-color: ${({ theme, buttonColour }) => theme.color(buttonColour)};
   }
 `;
 
@@ -34,6 +29,7 @@ const PrivacyCopyWrapper = styled.div`
   display: flex;
   flex-direction: column;
   margin-top: ${spacing('md')};
+
   p {
     font-size: ${({ theme }) => theme.fontSize('s')};
     line-height: ${({ theme }) => theme.fontSize('xl')};
@@ -44,14 +40,37 @@ const PrivacyCopyWrapper = styled.div`
   }
 `;
 
-const Form = styled.form`
+const FormInner = styled.div`
   display: flex;
   flex-direction: column;
   margin: ${spacing('md')} 0;
 `;
 
-const InputField = styled(Input)`
+const NameWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+
+  @media ${({ theme }) => theme.breakpoint('medium')} {
+    justify-content: start;
+    flex-direction: ${({ columnLayout }) => (columnLayout ? 'column' : 'row')};
+    gap: ${({ columnLayout }) => (columnLayout ? 0 : spacing('md'))};
+)}; 
+
+  }
+`;
+
+const InputField = styled(TextInput)`
   width: 100%;
+  margin-bottom: ${spacing('md')};
+
+  & > span:first-child {
+    color: ${({ theme }) => theme.color('white')};
+  }
+
+  @media ${({ theme }) => theme.breakpoint('medium')} {
+    max-width: 290px;
+  }
 `;
 
 const Title = styled(Text)`
@@ -63,7 +82,8 @@ export {
   TopCopyWrapper,
   PrivacyCopyWrapper,
   ButtonWrapper,
-  Form,
+  FormInner,
   InputField,
+  NameWrapper,
   Title
 };

package/src/components/Organisms/EmailSignUp/EmailSignUp.test.js

@@ -1,76 +1,42 @@
-import React from 'react';
-import 'jest-styled-components';
-import TestRenderer from 'react-test-renderer';
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import EmailSignUp from './EmailSignUp';
-import RichText from '../../Atoms/RichText/RichText';
+import React from "react";
+import "jest-styled-components";
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import { EmailSignUp, validationSchema } from "./_EmailSignUp";
+import RichText from "../../Atoms/RichText/RichText";
+import { useForm, FormProvider } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
 
-const { act } = TestRenderer;
-
-it('renders correctly', () => {
-  const top = '<h1> Top 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>';
-  const success = '<h1> Success 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>';
-  const privacy = 'check <a href="https://www.comicrelief.com/privacy-notice">Privacy policy</a>';
-  const tree = renderWithTheme(
-    <>
-      <EmailSignUp
-        title="sign up letter"
-        topCopy={<RichText markup={top} />}
-        successCopy={<RichText markup={success} />}
-        isSuccess={false}
-        errorMsg=""
-        buttonColor="teal"
-        privacyCopy={<RichText markup={privacy} />}
-        subscribe={() => 'Done'}
-        validate={() => true}
-      />
-    </>
-  ).toJSON();
+const DummyForm = () => {
+  const formMethods = useForm({
+    mode: "onBlur",
+    resolver: yupResolver(validationSchema),
+  });
+  const { handleSubmit } = formMethods;
 
-  expect(tree).toMatchSnapshot();
-});
+  const top =
+    "<h1> Top 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>";
+  const success =
+    "<h1> Success 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>";
+  const privacy =
+    'check <a href="https://www.comicrelief.com/privacy-notice">Privacy policy</a>';
 
-it('renders ESU School correctly', () => {
-  const top = '<h1> Top 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>';
-  const success = '<h1> Success 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>';
-  const privacy = 'check <a href="https://www.comicrelief.com/privacy-notice">Privacy policy</a>';
-  const selectItems = [
-    { value: '', displayValue: '-- Select age group --' },
-    { value: 'Option one', displayValue: 'The first option' },
-    {
-      value: 'Option two',
-      displayValue: 'The second option'
-    },
-    { value: 'Option three', displayValue: 'The third option' },
-    { value: 'Option four', displayValue: 'The fourth option' }
-  ];
-  const mockNext = jest.fn();
-  const tree = renderWithTheme(
-    <>
-      <EmailSignUp
-        title="sign up letter"
-        topCopy={<RichText markup={top} />}
-        successCopy={<RichText markup={success} />}
-        schoolsCopy="Now please select your teaching group so you get the right updates."
-        selectItems={selectItems}
-        isSuccess={false}
-        isSchools
-        errorMsg=""
-        buttonColor="teal"
-        privacyCopy={<RichText markup={privacy} />}
-        subscribe={mockNext}
-        validate={() => true}
-      />
-    </>
+  return (
+    <FormProvider {...formMethods}>
+      <form onSubmit={handleSubmit(() => true)} noValidate>
+        <EmailSignUp
+          title="sign up letter"
+          topCopy={<RichText markup={top} />}
+          successCopy={<RichText markup={success} />}
+          privacyCopy={<RichText markup={privacy} />}
+          formContext={formMethods}
+        />
+      </form>
+    </FormProvider>
   );
-  const input = tree.root.findAllByType('input')[0];
-  input.value = 'test@test.com';
+};
 
-  act(() => {
-    /* fire events that update state */
-    tree.root.findAllByType('input')[1].props.onClick();
-  });
+it("renders correctly", () => {
+  const tree = renderWithTheme(<DummyForm />).toJSON();
 
-  const treeJson = tree.toJSON();
-  expect(treeJson).toMatchSnapshot();
+  expect(tree).toMatchSnapshot();
 });