@comicrelief/component-library 8.25.7 → 8.26.0

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

@@ -22,5 +22,5 @@ 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    @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("\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  ");
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.25.7",
+  "version": "8.26.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Atoms/Picture/Picture.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import styled, { css, withTheme } from 'styled-components';
 import PropTypes from 'prop-types';
 import spacing from '../../../theme/shared/spacing';
@@ -10,22 +10,39 @@ import 'lazysizes/plugins/blur-up/ls.blur-up';
 const IMAGE_FALLBACK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 
 const Wrapper = styled.div`
-  ${({ objFitState, nonObjFitImage }) => (!objFitState && nonObjFitImage) && `background-image: url(${nonObjFitImage}); background-size: cover; background-position: center;`};
+  // If this browser doesn't support objectFit:
+  ${({ nonObjFitImage }) => (nonObjFitImage)
+  && `@supports not ((object-fit: cover) or (object-fit: none) or (object-fit: contain)) {
+        background-image: url(${nonObjFitImage});
+        background-size: cover;
+        background-position: center;
+      }
+  `};
+
   display: block;
   width: ${props => (props.width ? props.width : '100%')};
   height: ${props => (props.height ? props.height : '100%')};
   position: relative;
-  ${({ isBackgroundImage }) => isBackgroundImage && 'position: absolute; bottom: 0px; left: 0px; right: 0px; height: 100%;'};
+
+  ${({ isBackgroundImage }) => isBackgroundImage
+    && 'position: absolute; bottom: 0px; left: 0px; right: 0px; height: 100%;'};
   `;
 
 const Image = styled.img`
   width: ${props => (props.width ? props.width : '100%')};
   height: ${props => (props.height ? props.height : 'auto')};
   display: block;
+
   object-fit: ${props => (props.objectFit === 'none' && 'none')
     || (props.objectFit === 'cover' && 'cover')
     || (props.objectFit === 'contain' && 'contain')};
-  ${({ objectFit, objFitState }) => (objectFit !== 'none' && !objFitState) && 'visibility: hidden;'}; // Allows image to provide the container height, but make it invisible
+
+  // If this browser doesn't support objectFit:
+  ${({ objectFit }) => (objectFit !== 'none')
+    && `@supports not ((object-fit: cover) or (object-fit: contain)) {
+      visibility: hidden;
+    `}
+    // Allows image to provide the container height, but make it invisible
 
   /* Check for Cards/smallBreakpointRowLayout prop coming from the CMS and adjust styling for row view */
   ${({ smallBreakpointRowLayout }) => (smallBreakpointRowLayout === true) && css`
@@ -60,7 +77,6 @@ const Image = styled.img`
         height: ${props => (props.height ? props.height : 'auto')};
       }
   `}
-
 `;
 
 /** Responsive Picture */
@@ -77,17 +93,8 @@ const Picture = ({
   mediumBreakpointRowLayout = null,
   ...rest
 }) => {
-  const document = typeof window !== 'undefined' ? window.document : null;
-  const [objFitState, setObjFitState] = useState(true);
   let nonObjFitImage = null;
 
-  useEffect(() => {
-    // Once document is available, determine if this browser supports object-fit
-    if ('objectFit' in document.documentElement.style === false) {
-      setObjFitState(false);
-    }
-  }, [document]);
-
   // Determine which image will be used for the nonObjectFit fallback
   if (image) {
     nonObjFitImage = image;
@@ -104,7 +111,6 @@ const Picture = ({
         images={images}
         isBackgroundImage={isBackgroundImage}
         nonObjFitImage={nonObjFitImage}
-        objFitState={objFitState}
         {...rest}
       >
         <Image
@@ -114,7 +120,6 @@ const Picture = ({
           objectFit={objectFit}
           data-src={image}
           className="lazyload"
-          objFitState={objFitState}
         />
       </Wrapper>
     );
@@ -126,11 +131,9 @@ const Picture = ({
       width={width}
       image={image}
       images={images}
-      setObjFitState={setObjFitState}
       className="lazyload"
       isBackgroundImage={isBackgroundImage}
       nonObjFitImage={nonObjFitImage}
-      objFitState={objFitState}
       {...rest}
     >
       <Image
@@ -145,7 +148,6 @@ const Picture = ({
         data-sizes="auto"
         data-lowsrc={imageLow}
         className="lazyload"
-        objFitState={objFitState}
         smallBreakpointRowLayout={smallBreakpointRowLayout}
         mediumBreakpointRowLayout={mediumBreakpointRowLayout}
       />

package/src/components/Atoms/Picture/Picture.test.js

@@ -1,9 +1,9 @@
-import React from "react";
-import "jest-styled-components";
-import renderWithTheme from "../../../../tests/hoc/shallowWithTheme";
-import Picture from "./Picture";
-import { defaultData } from "../../../styleguide/data/data";
-it("renders correctly", () => {
+import React from 'react';
+import 'jest-styled-components';
+import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
+import Picture from './Picture';
+import { defaultData } from '../../../styleguide/data/data';
+it('renders correctly', () => {
   const tree = renderWithTheme(
     <Picture
       images={defaultData.images}
@@ -27,6 +27,14 @@ it("renders correctly", () => {
       object-fit: none;
     }
 
+    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+      .c0 {
+        background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+        background-size: cover;
+        background-position: center;
+      }
+    }
+
     <div
       className="c0 lazyload"
       height="auto"
@@ -48,7 +56,7 @@ it("renders correctly", () => {
   `);
 });
 
-it("renders correctly with custom props", () => {
+it('renders correctly with custom props', () => {
   const tree = renderWithTheme(
     <Picture
       images={defaultData.images}
@@ -75,6 +83,20 @@ it("renders correctly with custom props", () => {
       object-fit: cover;
     }
 
+    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+      .c0 {
+        background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+        background-size: cover;
+        background-position: center;
+      }
+    }
+
+    @supports not ((object-fit:cover) or (object-fit:contain)) {
+      .c1 {
+        visibility: hidden;
+      }
+    }
+
     <div
       className="c0 lazyload"
       height="100px"

package/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js

@@ -154,6 +154,20 @@ it('renders article teaser correctly', () => {
       display: flex;
     }
 
+    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+      .c4 {
+        background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+        background-size: cover;
+        background-position: center;
+      }
+    }
+
+    @supports not ((object-fit:cover) or (object-fit:contain)) {
+      .c6 {
+        visibility: hidden;
+      }
+    }
+
     @media (min-width:740px) {
       .c2 {
         -webkit-flex-direction: row;
@@ -411,6 +425,20 @@ it('renders press realese correctly', () => {
       display: flex;
     }
 
+    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+      .c4 {
+        background-image: url(mock.asset);
+        background-size: cover;
+        background-position: center;
+      }
+    }
+
+    @supports not ((object-fit:cover) or (object-fit:contain)) {
+      .c6 {
+        visibility: hidden;
+      }
+    }
+
     @media (min-width:740px) {
       .c2 {
         -webkit-flex-direction: row;

package/src/components/Molecules/Card/__snapshots__/Card.test.js.snap

@@ -189,6 +189,12 @@ exports[`renders correctly with no body 1`] = `
   height: auto;
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c3 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:0px) {
   .c0 {
     -webkit-flex-direction: column;

package/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap

@@ -119,6 +119,20 @@ exports[`renders Column view correctly 1`] = `
   z-index: 2;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;
@@ -377,6 +391,20 @@ exports[`renders correctly 1`] = `
   z-index: 2;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;

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

@@ -116,6 +116,14 @@ it('renders correctly', () => {
       background-color: #E52630;
     }
 
+    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+      .c2 {
+        background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+        background-size: cover;
+        background-position: center;
+      }
+    }
+
     @media (min-width:740px) {
       .c6 {
         font-size: 1rem;

package/src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap

@@ -153,6 +153,20 @@ exports[`renders Promo correctly 1`] = `
   }
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c2 {
+    background-image: url(../promo.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c3 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c9 {
     width: auto;
@@ -431,6 +445,20 @@ exports[`renders Promo correctly end position 1`] = `
   }
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c2 {
+    background-image: url(../promo.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c3 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c9 {
     width: auto;

package/src/components/Molecules/SearchResult/__snapshots__/SearchResult.test.js.snap

@@ -97,6 +97,12 @@ exports[`renders correctly in minimalist form 1`] = `
   margin: 0;
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c5 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c2 {
     -webkit-flex-direction: row;
@@ -279,6 +285,12 @@ exports[`renders correctly with copy 1`] = `
   }
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c5 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c2 {
     -webkit-flex-direction: row;
@@ -452,6 +464,12 @@ exports[`renders correctly with date 1`] = `
   margin: 0;
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c5 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c2 {
     -webkit-flex-direction: row;
@@ -619,6 +637,12 @@ exports[`renders correctly with date and type 1`] = `
   margin: 0;
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c5 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c2 {
     -webkit-flex-direction: row;

package/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap

@@ -65,6 +65,20 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -278,6 +292,20 @@ exports[`renders Single Message with Image correctly 1`] = `
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;
@@ -482,6 +510,20 @@ exports[`renders Single Message with double image correctly 1`] = `
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -736,6 +778,20 @@ exports[`renders Single Message with full width correctly 1`] = `
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;
@@ -940,6 +996,20 @@ exports[`renders Single Message with full width image and no text correctly 1`]
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
 
 }
@@ -1066,6 +1136,14 @@ exports[`renders Single Message with no Image correctly 1`] = `
   padding: 1rem;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+
+}
+
 @media (min-width:740px) {
 
 }

package/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap

@@ -153,6 +153,20 @@ exports[`renders correctly 1`] = `
   right: 1.5rem;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c12 {
     width: auto;

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

@@ -119,7 +119,7 @@ const Donate = ({
         {/* Only render if there is SOME title copy; otherwise,
         we need to the space to centre-align the form */}
         { !noTitlesAtAll && (
-        <TitleWrapperOuter formAlignRight={formAlignRight} data-test="this-one-here">
+        <TitleWrapperOuter formAlignRight={formAlignRight}>
           <TitleWrapperInner>
             {showCopy && (
             <>

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

@@ -27,7 +27,7 @@ const GivingSelector = ({
           type="radio"
           label=""
           checked={givingType === 'single'}
-          onClick={() => handleGivingTypeChange('single', givingType)}
+          onChange={() => handleGivingTypeChange('single', givingType)}
         />
         <Label active={givingType === 'single'} htmlFor={`give-once--${mbshipID}`}>
           Single
@@ -40,7 +40,7 @@ const GivingSelector = ({
           type="radio"
           label=""
           checked={givingType === 'monthly'}
-          onClick={() => handleGivingTypeChange('monthly', givingType)}
+          onChange={() => handleGivingTypeChange('monthly', givingType)}
         />
         <Label active={givingType === 'monthly'} htmlFor={`give-monthly--${mbshipID}`}>
           Monthly