@comicrelief/component-library 7.12.2 → 7.14.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.14.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

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

@@ -92,13 +92,13 @@ exports[`renders correctly 1`] = `
         aria-describedby="school-lookup"
         autoComplete="off"
         className="c5"
+        defaultValue=""
         id="school-lookup"
         name="school-lookup"
         onChange={[Function]}
         placeholder="Type to start search"
         required={false}
         type="text"
-        value=""
       />
     </div>
     

package/src/components/Molecules/Typeahead/Typeahead.js

@@ -24,7 +24,6 @@ const Typeahead = React.forwardRef(
     },
     ref
   ) => {
-    const [value, setValue] = useState('');
     const [options, setOptions] = useState([]);
     const [errorMsg, setErrorMsg] = useState('');
 
@@ -62,13 +61,11 @@ const Typeahead = React.forwardRef(
 
     return (
       <TextInputWithDropdown
-        value={value}
+        defaultValue=""
         options={optionParser ? options.map(optionParser) : options}
         errorMsg={errorMsg}
         onChange={e => {
           const newValue = e.currentTarget.value;
-          setValue(newValue);
-
           debouncedHandleChange(newValue);
         }}
         onSelect={(parsedOption, optionIndex) => {
@@ -81,7 +78,6 @@ const Typeahead = React.forwardRef(
           // reset
           setOptions([]);
           setErrorMsg('');
-          setValue('');
         }}
         id={id}
         label={label}

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

@@ -92,13 +92,13 @@ exports[`renders correctly 1`] = `
         aria-describedby="typeahead-test"
         autoComplete="off"
         className="c5"
+        defaultValue=""
         id="typeahead-test"
         name="q"
         onChange={[Function]}
         placeholder="Type to start searching..."
         required={false}
         type="text"
-        value=""
       />
     </div>