@comicrelief/component-library 8.26.0 → 8.28.0

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

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

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

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