@comicrelief/component-library 8.18.3 → 8.19.0

package/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap

@@ -21,16 +21,7 @@ exports[`renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c10 {
-  font-size: 1rem;
-  line-height: 1rem;
-  text-transform: inherit;
-  font-weight: bold;
-  line-height: normal;
-  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-}
-
-.c15 {
+.c14 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -60,17 +51,18 @@ exports[`renders correctly 1`] = `
   color: #FFFFFF;
 }
 
-.c15 > a {
+.c14 > a {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c15:hover {
+.c14:hover {
   background-color: #890B11;
   color: #FFFFFF;
 }
 
 .c8 {
+  width: 100%;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -80,19 +72,19 @@ exports[`renders correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   color: #5C5C5E;
-  width: 100%;
 }
 
-.c11 {
+.c10 {
   margin-bottom: 0.5rem;
+  font-weight: normal;
 }
 
-.c13 {
+.c12 {
   position: relative;
   box-sizing: border-box;
   width: 100%;
   height: 48px;
-  padding: 1rem 1.5rem;
+  padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
   border-color: #E1E2E3;
@@ -107,11 +99,11 @@ exports[`renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c13:focus {
+.c12:focus {
   border: 1px solid #666;
 }
 
-.c12 {
+.c11 {
   position: relative;
   font-size: 1.25rem;
 }
@@ -120,7 +112,7 @@ exports[`renders correctly 1`] = `
   text-align: left;
 }
 
-.c16:disabled {
+.c15:disabled {
   cursor: not-allowed;
   opacity: 0.75;
 }
@@ -147,15 +139,15 @@ exports[`renders correctly 1`] = `
   margin-bottom: 1rem;
 }
 
-.c14 {
+.c13 {
   margin-top: 1rem;
 }
 
-.c14 button {
+.c13 button {
   background-color: #E52630;
 }
 
-.c17 {
+.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -166,12 +158,12 @@ exports[`renders correctly 1`] = `
   margin-top: 1rem;
 }
 
-.c17 p {
+.c16 p {
   font-size: 1rem;
   line-height: 2rem;
 }
 
-.c17 p a {
+.c16 p a {
   font-size: 1rem;
   color: #FFFFFF;
 }
@@ -212,13 +204,13 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c15 {
+  .c14 {
     width: auto;
   }
 }
 
 @media (min-width:1024px) {
-  .c15 {
+  .c14 {
     width: auto;
     padding: 1rem 2rem;
     margin: 0 auto 2rem;
@@ -226,7 +218,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c13 {
+  .c11 {
     max-width: 290px;
   }
 }
@@ -293,7 +285,7 @@ exports[`renders correctly 1`] = `
           htmlFor="first-name"
         >
           <span
-            className="c10 c11"
+            className="c4 c10"
             color="inherit"
             dangerouslySetInnerHTML={
               Object {
@@ -303,13 +295,13 @@ exports[`renders correctly 1`] = `
             size="s"
           />
           <div
-            className="c12"
+            className="c11"
           >
             
             <input
               aria-describedby="first-name"
               aria-required={true}
-              className="c13"
+              className="c12"
               id="first-name"
               name="firstName"
               onBlur={[Function]}
@@ -326,7 +318,7 @@ exports[`renders correctly 1`] = `
           htmlFor="last-name"
         >
           <span
-            className="c10 c11"
+            className="c4 c10"
             color="inherit"
             dangerouslySetInnerHTML={
               Object {
@@ -336,13 +328,13 @@ exports[`renders correctly 1`] = `
             size="s"
           />
           <div
-            className="c12"
+            className="c11"
           >
             
             <input
               aria-describedby="last-name"
               aria-required={true}
-              className="c13"
+              className="c12"
               id="last-name"
               name="lastName"
               onBlur={[Function]}
@@ -360,7 +352,7 @@ exports[`renders correctly 1`] = `
         htmlFor="email"
       >
         <span
-          className="c10 c11"
+          className="c4 c10"
           color="inherit"
           dangerouslySetInnerHTML={
             Object {
@@ -370,13 +362,13 @@ exports[`renders correctly 1`] = `
           size="s"
         />
         <div
-          className="c12"
+          className="c11"
         >
           
           <input
             aria-describedby="email"
             aria-required={true}
-            className="c13"
+            className="c12"
             id="email"
             name="email"
             onBlur={[Function]}
@@ -389,10 +381,10 @@ exports[`renders correctly 1`] = `
         
       </label>
       <div
-        className="c14"
+        className="c13"
       >
         <button
-          className="c15 c16"
+          className="c14 c15"
           data-test="subscribe-button"
           disabled={true}
           type="submit"
@@ -411,7 +403,7 @@ exports[`renders correctly 1`] = `
       </div>
     </div>
     <div
-      className="c17"
+      className="c16"
     >
       <span
         className="c4"

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

@@ -1,12 +1,12 @@
-import React from "react";
-import "jest-styled-components";
+import React from 'react';
+import 'jest-styled-components';
 
-import renderWithTheme from "../../../../tests/hoc/shallowWithTheme";
-import Membership from "./Membership";
-import { defaultData } from "../../../styleguide/data/data";
-import data from "./dev-data/data";
+import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
+import Membership from './Membership';
+import { defaultData } from '../../../styleguide/data/data';
+import data from './dev-data/data';
 
-it("renders correctly", () => {
+it('renders correctly', () => {
   const tree = renderWithTheme(
     <Membership
       alt="Background image"
@@ -48,16 +48,7 @@ it("renders correctly", () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
-    .c16 {
-      font-size: 1rem;
-      line-height: 1rem;
-      text-transform: inherit;
-      font-weight: bold;
-      line-height: normal;
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-    }
-
-    .c22 {
+    .c21 {
       font-size: 1rem;
       line-height: 1rem;
       text-transform: inherit;
@@ -81,6 +72,7 @@ it("renders correctly", () => {
     }
 
     .c14 {
+      width: 100%;
       position: relative;
       display: -webkit-box;
       display: -webkit-flex;
@@ -90,19 +82,19 @@ it("renders correctly", () => {
       -ms-flex-direction: column;
       flex-direction: column;
       color: #5C5C5E;
-      width: 100%;
     }
 
-    .c17 {
+    .c16 {
       margin-bottom: 0.5rem;
+      font-weight: normal;
     }
 
-    .c19 {
+    .c18 {
       position: relative;
       box-sizing: border-box;
       width: 100%;
       height: 48px;
-      padding: 1rem 1.5rem;
+      padding: 1rem 2.4rem 1rem 1.5rem;
       background-color: #F4F3F5;
       border: 1px solid;
       border-color: #E1E2E3;
@@ -117,11 +109,11 @@ it("renders correctly", () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
-    .c19:focus {
+    .c18:focus {
       border: 1px solid #666;
     }
 
-    .c18 {
+    .c17 {
       position: relative;
       font-size: 1.25rem;
     }
@@ -141,11 +133,11 @@ it("renders correctly", () => {
       height: auto;
     }
 
-    .c20 {
+    .c19 {
       display: block;
     }
 
-    .c20 input {
+    .c19 input {
       border: 2px solid #E1E2E3;
       font-size: 1.5rem;
       font-weight: 800;
@@ -262,7 +254,7 @@ it("renders correctly", () => {
       border-color: #E52630;
     }
 
-    .c21 {
+    .c20 {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
@@ -273,11 +265,11 @@ it("renders correctly", () => {
       align-items: center;
     }
 
-    .c23 {
+    .c22 {
       margin-right: auto;
     }
 
-    .c24 {
+    .c23 {
       position: relative;
       -webkit-flex: 0 0 50%;
       -ms-flex: 0 0 50%;
@@ -286,7 +278,7 @@ it("renders correctly", () => {
       display: block;
     }
 
-    .c24 span {
+    .c23 span {
       position: absolute;
       padding: 0px 15px;
       font-size: 20px;
@@ -298,21 +290,21 @@ it("renders correctly", () => {
       font-weight: 500;
     }
 
-    .c24 input {
+    .c23 input {
       border: 2px solid #E1E2E3;
       background: transparent;
       padding: 0.5rem 1rem 0.5rem 2rem;
     }
 
-    .c24 input:focus {
+    .c23 input:focus {
       border: 2px solid #E52630;
     }
 
-    .c26 {
+    .c25 {
       line-height: 1.5;
     }
 
-    .c25 {
+    .c24 {
       width: 100%;
       color: #FFFFFF;
       font-size: 1rem;
@@ -324,14 +316,14 @@ it("renders correctly", () => {
       border-radius: 100px;
     }
 
-    .c25:active,
-    .c25:focus,
-    .c25:hover {
+    .c24:active,
+    .c24:focus,
+    .c24:hover {
       background-color: #961D35;
     }
 
     @media (min-width:740px) {
-      .c19 {
+      .c17 {
         max-width: 290px;
       }
     }
@@ -379,7 +371,7 @@ it("renders correctly", () => {
     }
 
     @media (min-width:1024px) {
-      .c24 {
+      .c23 {
         -webkit-flex: 0 0 60%;
         -ms-flex: 0 0 60%;
         flex: 0 0 60%;
@@ -387,7 +379,7 @@ it("renders correctly", () => {
     }
 
     @media (min-width:1024px) {
-      .c25 {
+      .c24 {
         width: auto;
         padding: 1rem 2rem;
         margin: 0 auto 2rem;
@@ -461,7 +453,7 @@ it("renders correctly", () => {
                   htmlFor="mship-1--moneyBuy-box1"
                 >
                   <span
-                    className="c16 c17"
+                    className="c7 c16"
                     color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
@@ -471,13 +463,13 @@ it("renders correctly", () => {
                     size="s"
                   />
                   <div
-                    className="c18"
+                    className="c17"
                   >
                     
                     <input
                       aria-describedby="mship-1--moneyBuy-box1"
                       aria-label="£5"
-                      className="c19"
+                      className="c18"
                       id="mship-1--moneyBuy-box1"
                       name="mship-1--moneyBuy1"
                       onClick={[Function]}
@@ -490,11 +482,11 @@ it("renders correctly", () => {
                   
                 </label>
                 <label
-                  className="c14 c20"
+                  className="c14 c19"
                   htmlFor="mship-1--moneyBuy-box2"
                 >
                   <span
-                    className="c16 c17"
+                    className="c7 c16"
                     color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
@@ -504,13 +496,13 @@ it("renders correctly", () => {
                     size="s"
                   />
                   <div
-                    className="c18"
+                    className="c17"
                   >
                     
                     <input
                       aria-describedby="mship-1--moneyBuy-box2"
                       aria-label="£10"
-                      className="c19"
+                      className="c18"
                       id="mship-1--moneyBuy-box2"
                       name="mship-1--moneyBuy2"
                       onClick={[Function]}
@@ -527,7 +519,7 @@ it("renders correctly", () => {
                   htmlFor="mship-1--moneyBuy-box3"
                 >
                   <span
-                    className="c16 c17"
+                    className="c7 c16"
                     color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
@@ -537,13 +529,13 @@ it("renders correctly", () => {
                     size="s"
                   />
                   <div
-                    className="c18"
+                    className="c17"
                   >
                     
                     <input
                       aria-describedby="mship-1--moneyBuy-box3"
                       aria-label="£20"
-                      className="c19"
+                      className="c18"
                       id="mship-1--moneyBuy-box3"
                       name="mship-1--moneyBuy3"
                       onClick={[Function]}
@@ -557,21 +549,21 @@ it("renders correctly", () => {
                 </label>
               </div>
               <div
-                className="c21"
+                className="c20"
               >
                 <span
-                  className="c22 c23"
+                  className="c21 c22"
                   color="inherit"
                   size="s"
                 >
                   Other amount
                 </span>
                 <label
-                  className="c14 c24"
+                  className="c14 c23"
                   htmlFor="mship-1--MoneyBuy-userInput"
                 >
                   <span
-                    className="c16 c17"
+                    className="c7 c16"
                     color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
@@ -581,13 +573,13 @@ it("renders correctly", () => {
                     size="s"
                   />
                   <div
-                    className="c18"
+                    className="c17"
                   >
                     
                     <input
                       aria-describedby="mship-1--MoneyBuy-userInput"
                       aria-label="Input a different amount"
-                      className="c19"
+                      className="c18"
                       id="mship-1--MoneyBuy-userInput"
                       max="25000"
                       min="1"
@@ -607,12 +599,12 @@ it("renders correctly", () => {
                 </label>
               </div>
               <input
-                className="c25"
+                className="c24"
                 type="submit"
                 value="Donate"
               />
               <p
-                className="c26"
+                className="c25"
               />
             </fieldset>
           </form>

package/dist/components/Atoms/Input/assets/CR_Error--red.svg

@@ -1 +0,0 @@
-<svg version="1.1" id="Content" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 48 48" xml:space="preserve"><style></style><path d="M24 47c12.683 0 23-10.318 23-23S36.683 1 24 1 1 11.318 1 24s10.317 23 23 23zm0-42c10.477 0 19 8.523 19 19s-8.523 19-19 19S5 34.477 5 24 13.523 5 24 5zm-4 30c0-2.206 1.794-4 4-4s4 1.794 4 4-1.794 4-4 4-4-1.794-4-4zm1-9V12a3 3 0 1 1 6 0v14a3 3 0 1 1-6 0z" fill="#e52630"/></svg>

package/dist/components/Atoms/Input/assets/CR_Error.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><style/><path d="M24 47c12.683 0 23-10.318 23-23S36.683 1 24 1 1 11.318 1 24s10.317 23 23 23zm0-42c10.477 0 19 8.523 19 19s-8.523 19-19 19S5 34.477 5 24 13.523 5 24 5zm-4 30c0-2.206 1.794-4 4-4s4 1.794 4 4-1.794 4-4 4-4-1.794-4-4zm1-9V12a3 3 0 1 1 6 0v14a3 3 0 1 1-6 0z"/></svg>

package/src/components/Atoms/Input/assets/CR_Error--red.svg

@@ -1 +0,0 @@
-<svg version="1.1" id="Content" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 48 48" xml:space="preserve"><style></style><path d="M24 47c12.683 0 23-10.318 23-23S36.683 1 24 1 1 11.318 1 24s10.317 23 23 23zm0-42c10.477 0 19 8.523 19 19s-8.523 19-19 19S5 34.477 5 24 13.523 5 24 5zm-4 30c0-2.206 1.794-4 4-4s4 1.794 4 4-1.794 4-4 4-4-1.794-4-4zm1-9V12a3 3 0 1 1 6 0v14a3 3 0 1 1-6 0z" fill="#e52630"/></svg>

package/src/components/Atoms/Input/assets/CR_Error.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><style/><path d="M24 47c12.683 0 23-10.318 23-23S36.683 1 24 1 1 11.318 1 24s10.317 23 23 23zm0-42c10.477 0 19 8.523 19 19s-8.523 19-19 19S5 34.477 5 24 13.523 5 24 5zm-4 30c0-2.206 1.794-4 4-4s4 1.794 4 4-1.794 4-4 4-4-1.794-4-4zm1-9V12a3 3 0 1 1 6 0v14a3 3 0 1 1-6 0z"/></svg>