@comicrelief/component-library 7.12.2 → 7.13.0

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

@@ -1,5 +1,655 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`"Single Giving, No Money Buys, with overridden manual input value" renders correctly 1`] = `
+.c4 {
+  color: #FFFFFF;
+  font-size: 4rem;
+  line-height: 4rem;
+  text-transform: uppercase;
+  font-weight: normal;
+  font-family: 'Anton',Impact,sans-serif;
+  -webkit-letter-spacing: 0.03rem;
+  -moz-letter-spacing: 0.03rem;
+  -ms-letter-spacing: 0.03rem;
+  letter-spacing: 0.03rem;
+}
+
+.c5 {
+  color: #FFFFFF;
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+  text-transform: inherit;
+  line-height: normal;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-size: 1rem;
+}
+
+.c16 {
+  font-size: 1.5rem;
+  line-height: 1.5rem;
+  text-transform: inherit;
+  font-weight: bold;
+  line-height: normal;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+}
+
+.c20 {
+  font-size: 1rem;
+  line-height: 1rem;
+  text-transform: inherit;
+  font-weight: bold;
+  line-height: normal;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+}
+
+.c18 {
+  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;
+  width: 100%;
+}
+
+.c21 {
+  margin-bottom: 0.5rem;
+}
+
+.c23 {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 48px;
+  padding: 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;
+}
+
+.c23:focus {
+  border: 1px solid #666;
+}
+
+.c22 {
+  position: relative;
+  font-size: 1.25rem;
+}
+
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  height: auto;
+  background-color: #274084;
+}
+
+.c1 {
+  position: relative;
+  text-align: center;
+  padding: 2rem 1rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: block;
+  width: 100%;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c2 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+}
+
+.c3 {
+  position: relative;
+  text-align: left;
+}
+
+.c6 {
+  position: relative;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+}
+
+.c13 {
+  position: relative;
+  width: 100%;
+  background-color: #FFFFFF;
+  box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
+  border-radius: 10px;
+  margin-top: 1rem;
+}
+
+.c13 h3 {
+  margin-top: 1rem;
+}
+
+.c13 input {
+  max-width: 100%;
+  margin: 0;
+}
+
+.c13 input[type='submit'] {
+  margin: 2rem 0;
+}
+
+.c14 {
+  padding: 0 1rem 1rem;
+  margin: 0;
+  border: none;
+}
+
+.c14 input[type='submit'] {
+  margin-bottom: 0;
+}
+
+.c15 {
+  margin: 0;
+  padding: 2rem 0.5rem;
+  display: block;
+  width: 100%;
+}
+
+.c17 {
+  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;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c19 {
+  position: relative;
+  -webkit-flex-basis: 50%;
+  -ms-flex-preferred-size: 50%;
+  flex-basis: 50%;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  font-weight: 400;
+  display: block;
+}
+
+.c19 span {
+  position: absolute;
+  font-size: 20px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  left: 0px;
+  font-weight: 500;
+  padding: 0px 15px;
+  z-index: 3;
+}
+
+.c19 input {
+  height: 48px;
+  border: 2px solid #969598;
+  background: #F4F3F5;
+  border-radius: 10px;
+  padding: 0.5rem 1rem 0.5rem 2rem;
+}
+
+.c19 input:focus {
+  outline: none;
+  border: 2px solid #969598;
+}
+
+.c24 {
+  width: 100%;
+  margin: 2rem 0 2rem;
+  color: #FFFFFF;
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
+  min-height: 48px;
+  background: #E52630;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border-radius: 2rem;
+  border: none;
+  box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c24:active,
+.c24:focus,
+.c24:hover {
+  outline: none;
+  background-color: #961D35;
+}
+
+.c12 {
+  width: 50%;
+  height: 48px;
+  border-radius: 2rem;
+  z-index: 1;
+  display: block;
+  position: absolute;
+  -webkit-transition: left 0.15s ease-out;
+  transition: left 0.15s ease-out;
+  background-color: #0565D1;
+  left: 2px;
+  box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
+}
+
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 1rem 0;
+}
+
+.c8 {
+  width: 100%;
+  padding: 2px;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  margin: 1rem 0;
+  border-radius: 2rem;
+  background: #BECCF9;
+}
+
+.c8 .give-monthly:checked ~ .c11 {
+  left: calc(50% - 2px);
+}
+
+.c8 input {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c8 input:focus:not(:checked) + label {
+  box-shadow: inset 0 0 0 4px #0565D1;
+}
+
+.c9 {
+  font-size: 1rem;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: bold;
+  min-height: 48px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-basis: 50%;
+  -ms-flex-preferred-size: 50%;
+  flex-basis: 50%;
+  border: none;
+  -webkit-transition: color 0.15s ease-out;
+  transition: color 0.15s ease-out;
+  z-index: 2;
+  cursor: default;
+  border-radius: 2rem;
+  color: #FFFFFF;
+}
+
+.c9:active:focus {
+  box-shadow: none;
+}
+
+.c9:focus {
+  border: none;
+  outline: none;
+  box-shadow: inset 0 0 0 4px #0565D1;
+}
+
+.c10 {
+  font-size: 1rem;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: bold;
+  min-height: 48px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-basis: 50%;
+  -ms-flex-preferred-size: 50%;
+  flex-basis: 50%;
+  border: none;
+  -webkit-transition: color 0.15s ease-out;
+  transition: color 0.15s ease-out;
+  z-index: 2;
+  cursor: pointer;
+  border-radius: 2rem;
+  color: #000000;
+}
+
+.c10:active:focus {
+  box-shadow: none;
+}
+
+.c10:focus {
+  border: none;
+  outline: none;
+  box-shadow: inset 0 0 0 4px #0565D1;
+}
+
+@media (min-width:740px) {
+  .c5 {
+    font-size: 1.25rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c23 {
+    max-width: 290px;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -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;
+    background-color: #274084;
+  }
+}
+
+@media (min-width:740px) {
+  .c1 {
+    padding: 4rem 1rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c1 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    padding: 4rem 0;
+  }
+}
+
+@media (min-width:1024px) {
+  .c2 {
+    width: 50%;
+    padding: 4rem;
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media (min-width:1024px) {
+  .c6 {
+    width: 50%;
+  }
+}
+
+@media (min-width:740px) {
+  .c13 {
+    width: 450px;
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+@media (min-width:740px) {
+  .c14 {
+    padding: 0 2rem 2rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c19 {
+    -webkit-flex-basis: 60%;
+    -ms-flex-preferred-size: 60%;
+    flex-basis: 60%;
+  }
+}
+
+@media (min-width:740px) {
+  .c24 {
+    padding: 1rem 2rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c8 {
+    width: 450px;
+    margin: 0 auto;
+  }
+}
+
+<div
+  className="c0"
+  id="mship-4"
+>
+  <div
+    aria-live="polite"
+    className="c1"
+  >
+    <div
+      className="c2"
+    >
+      <div
+        className="c3"
+      >
+        <h2
+          className="c4"
+          color="white"
+          size="big"
+        >
+          Donate Now
+        </h2>
+        <p
+          className="c5"
+          color="white"
+          size="m"
+        >
+          Please help us fund life-changing projects in the UK and around the world.
+        </p>
+      </div>
+    </div>
+    <div
+      className="c6"
+    >
+      <div
+        className="c7"
+      >
+        <div
+          className="c8"
+        >
+          <input
+            aria-label="Single"
+            checked={true}
+            className="give-once"
+            errormsg=""
+            id="give-once--mship-4"
+            label=""
+            onClick={[Function]}
+            type="radio"
+            value="Single"
+          />
+          <label
+            className="c9"
+            htmlFor="give-once--mship-4"
+          >
+            Single
+          </label>
+          <input
+            aria-label="Monthly"
+            checked={false}
+            className="give-monthly"
+            errormsg=""
+            id="give-monthly--mship-4"
+            label=""
+            onClick={[Function]}
+            type="radio"
+            value="Monthly"
+          />
+          <label
+            className="c10"
+            htmlFor="give-monthly--mship-4"
+          >
+            Monthly
+          </label>
+          <span
+            className="c11 c12"
+          />
+        </div>
+      </div>
+      <form
+        className="c13"
+        onSubmit={[Function]}
+      >
+        <fieldset
+          className="c14"
+        >
+          <legend
+            className="c15"
+          >
+            <span
+              className="c16"
+              color="inherit"
+              size="l"
+            >
+              Enter an amount to give
+            </span>
+          </legend>
+          <div
+            className="c17"
+          >
+            <label
+              className="c18 c19"
+              htmlFor="mship-4--MoneyBuy-userInput"
+            >
+              <span
+                className="c20 c21"
+                color="inherit"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "£",
+                  }
+                }
+                size="s"
+              />
+              <div
+                className="c22"
+              >
+                
+                <input
+                  aria-describedby="mship-4--MoneyBuy-userInput"
+                  aria-label="Input a different amount"
+                  className="c23"
+                  id="mship-4--MoneyBuy-userInput"
+                  max="25000"
+                  min="1"
+                  name="membership_amount"
+                  onChange={[Function]}
+                  pattern="[^[0-9]+([,.][0-9]+)?$]"
+                  placeholder="0.00"
+                  required={false}
+                  step="0.01"
+                  type="number"
+                  value="345.67"
+                />
+              </div>
+              
+            </label>
+          </div>
+          <input
+            className="c24"
+            color="red"
+            type="submit"
+            value="Donate"
+          />
+        </fieldset>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Monthly donation renders correctly 1`] = `
 .c4 {
   color: #FFFFFF;

package/package.json

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

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import PropTypes from 'prop-types';
 
@@ -39,7 +39,8 @@ const Donate = ({
   noMoneyBuys,
   PopUpText,
   chooseAmountText,
-  isDesktopOverride
+  isDesktopOverride,
+  otherAmountValue
 }) => {
   let isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
 
@@ -47,7 +48,7 @@ const Donate = ({
   const [overrideValue, setOverrideValue] = useState(null);
 
   // Store the updated override value
-  React.useEffect(() => {
+  useEffect(() => {
     setOverrideValue(isDesktopOverride);
   }, [isDesktopOverride]);
 
@@ -122,6 +123,7 @@ const Donate = ({
           PopUpText={PopUpText}
           chooseAmountText={chooseAmountText}
           submitButtonColor={submitButtonColor}
+          otherAmountValue={otherAmountValue}
         />
       </Wrapper>
     </Container>
@@ -153,7 +155,8 @@ Donate.propTypes = {
   noMoneyBuys: PropTypes.bool,
   PopUpText: PropTypes.string,
   chooseAmountText: PropTypes.string,
-  isDesktopOverride: PropTypes.bool
+  isDesktopOverride: PropTypes.bool,
+  otherAmountValue: PropTypes.number
 };
 
 Donate.defaultProps = {
@@ -178,7 +181,8 @@ Donate.defaultProps = {
   noMoneyBuys: false,
   PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
   chooseAmountText: '',
-  isDesktopOverride: null
+  isDesktopOverride: null,
+  otherAmountValue: null
 };
 
 export default Donate;