@comicrelief/component-library 7.12.1 → 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.1",
+  "version": "7.13.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Molecules/Accordion/Accordion.js

@@ -11,7 +11,7 @@ const Container = styled.div`
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
 `;
 
-const ChevAnima = keyframes`
+const ChevronKeyframes = keyframes`
  0% { margin-top: 0rem; }
  50% { margin-top: 0.5rem; }
  100% { margin-top: 0rem; }
@@ -32,7 +32,7 @@ const Button = styled.button`
     color: inherit; // text was flashing white on focus on safari without this.
     outline: none;
     > div {
-      animation-name: ${ChevAnima};
+      animation-name: ${props => props.ChevronKeyframes};
       animation-duration: 0.4s;
     }
   }
@@ -82,7 +82,7 @@ const Accordion = ({
 
   return (
     <Container {...rest}>
-      <Button onClick={handleOpen} aria-expanded={isOpen ? 'true' : 'false'}>
+      <Button onClick={handleOpen} aria-expanded={isOpen ? 'true' : 'false'} ChevronKeyframes={ChevronKeyframes}>
         {title}
         <Icon>
           <Chevron colour="black" direction={isOpen ? 'up' : 'down'} />

package/src/components/Molecules/SingleMessage/SingleMessage.js

@@ -39,7 +39,7 @@ const SingleMessage = ({
   // States to track video status
   const [isInitialised, setIsInitialised] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
-  const [onPlay, setonPlay] = useState(false);
+  const [onPlay, setOnPlay] = useState(false);
   const [isBuffering, setIsBuffering] = useState(false);
   const [uniqueID, setUniqueID] = useState(null);
   const [hasParentID, setHasParentID] = useState(false);
@@ -97,7 +97,7 @@ const SingleMessage = ({
   }, [hasVideo, isInitialised, uniqueID, videoID, onPlay]);
 
   const handlePlay = thisUniqueID => {
-    setonPlay(true);
+    setOnPlay(true);
     // Trigger play and update video state
     const thisVideoID = `${thisUniqueID}__video`;
 

package/src/components/Molecules/SingleMessageDS/SingleMessageDs.md

@@ -154,6 +154,7 @@ import Download from '../../Atoms/Icons/Download';
       imageLow={defaultData.image}
       imageLeft={true}
       images={defaultData.images}
+      subtitle="subTitle"
     >
       <Text tag='p'>
         Whatever you’ve got planned, the Sport Relief shop has everything you need
@@ -179,10 +180,11 @@ import Download from '../../Atoms/Icons/Download';
       images={defaultData.images}
       youTubeId="faz0JeBB41M"
       imageLeft={true}
+      subtitle="subTitle"
     >
       <Text tag='p'>
         Some text and stuff.
       </Text>
     </SingleMessageDs>
 </div>;
-```
+```