@comicrelief/component-library 8.44.1 → 8.44.2

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

@@ -55,6 +55,11 @@ it('renders correctly', () => {
       line-height: 1.25rem;
     }
 
+    .c7 {
+      font-size: 1rem;
+      line-height: normal;
+    }
+
     .c12 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 700;
@@ -67,7 +72,12 @@ it('renders correctly', () => {
       line-height: 1.5rem;
     }
 
-    .c22 {
+    .c12 {
+      font-size: 1rem;
+      line-height: normal;
+    }
+
+    .c16 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 400;
       text-transform: inherit;
@@ -79,7 +89,19 @@ it('renders correctly', () => {
       line-height: 1.25rem;
     }
 
-    .c22 {
+    .c23 {
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 400;
+      text-transform: inherit;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1rem;
+      line-height: 1.25rem;
+    }
+
+    .c23 {
       font-size: 1rem;
       line-height: normal;
       font-weight: 500;
@@ -112,7 +134,7 @@ it('renders correctly', () => {
       color: #000000;
     }
 
-    .c16 {
+    .c17 {
       margin-bottom: 0.5rem;
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 400;
@@ -125,12 +147,12 @@ it('renders correctly', () => {
       line-height: 1.25rem;
     }
 
-    .c17 {
+    .c18 {
       position: relative;
       font-size: 1.25rem;
     }
 
-    .c18 {
+    .c19 {
       position: relative;
       width: 100%;
       display: -webkit-box;
@@ -147,7 +169,7 @@ it('renders correctly', () => {
       align-items: center;
     }
 
-    .c19 {
+    .c20 {
       position: relative;
       box-sizing: border-box;
       width: 100%;
@@ -167,7 +189,7 @@ it('renders correctly', () => {
       font-family: inherit;
     }
 
-    .c19:focus {
+    .c20:focus {
       border: 1px solid #666;
     }
 
@@ -186,11 +208,11 @@ it('renders correctly', () => {
       height: auto;
     }
 
-    .c20 {
+    .c21 {
       display: block;
     }
 
-    .c20 input {
+    .c21 input {
       border: 2px solid #E1E2E3;
       font-size: 1.5rem;
       font-weight: 700;
@@ -307,7 +329,7 @@ it('renders correctly', () => {
       border-color: #E52630;
     }
 
-    .c21 {
+    .c22 {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
@@ -318,11 +340,11 @@ it('renders correctly', () => {
       align-items: center;
     }
 
-    .c23 {
+    .c24 {
       margin-right: auto;
     }
 
-    .c24 {
+    .c25 {
       position: relative;
       -webkit-flex: 0 0 50%;
       -ms-flex: 0 0 50%;
@@ -331,7 +353,7 @@ it('renders correctly', () => {
       display: block;
     }
 
-    .c24 span {
+    .c25 span {
       position: absolute;
       padding: 0px 15px;
       font-size: 20px;
@@ -343,21 +365,21 @@ it('renders correctly', () => {
       font-weight: 500;
     }
 
-    .c24 input {
+    .c25 input {
       border: 2px solid #E1E2E3;
       background: transparent;
       padding: 0.5rem 1rem 0.5rem 2rem;
     }
 
-    .c24 input:focus {
+    .c25 input:focus {
       border: 2px solid #E52630;
     }
 
-    .c26 {
+    .c27 {
       line-height: 1.5;
     }
 
-    .c25 {
+    .c26 {
       width: 100%;
       color: #FFFFFF;
       font-size: 1rem;
@@ -369,9 +391,9 @@ it('renders correctly', () => {
       border-radius: 100px;
     }
 
-    .c25:active,
-    .c25:focus,
-    .c25:hover {
+    .c26:active,
+    .c26:focus,
+    .c26:hover {
       background-color: #961D35;
     }
 
@@ -418,28 +440,42 @@ it('renders correctly', () => {
     }
 
     @media (min-width:740px) {
-      .c22 {
+      .c16 {
         font-size: 1rem;
         line-height: 1.25rem;
       }
     }
 
     @media (min-width:1024px) {
-      .c22 {
+      .c16 {
         font-size: 1.125rem;
         line-height: 1.375rem;
       }
     }
 
     @media (min-width:740px) {
-      .c16 {
+      .c23 {
         font-size: 1rem;
         line-height: 1.25rem;
       }
     }
 
     @media (min-width:1024px) {
-      .c16 {
+      .c23 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c17 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c17 {
         font-size: 1rem;
         line-height: 1.25rem;
       }
@@ -496,7 +532,7 @@ it('renders correctly', () => {
     }
 
     @media (min-width:1024px) {
-      .c24 {
+      .c25 {
         -webkit-flex: 0 0 60%;
         -ms-flex: 0 0 60%;
         flex: 0 0 60%;
@@ -504,7 +540,7 @@ it('renders correctly', () => {
     }
 
     @media (min-width:1024px) {
-      .c25 {
+      .c26 {
         width: auto;
         padding: 1rem 2rem;
         margin: 0 auto 2rem;
@@ -544,6 +580,7 @@ it('renders correctly', () => {
           <p
             className="c7"
             color="inherit"
+            size="s"
           >
             Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.
           </p>
@@ -564,6 +601,7 @@ it('renders correctly', () => {
                 <h3
                   className="c12"
                   color="inherit"
+                  size="s"
                 >
                   Choose your monthly donation
                 </h3>
@@ -576,7 +614,7 @@ it('renders correctly', () => {
                   htmlFor="mship-1--moneyBuy-box1"
                 >
                   <span
-                    className="c7 c16"
+                    className="c16 c17"
                     color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
@@ -585,16 +623,16 @@ it('renders correctly', () => {
                     }
                   />
                   <div
-                    className="c17"
+                    className="c18"
                   >
                     
                     <div
-                      className="c18"
+                      className="c19"
                     >
                       <input
                         aria-label="£5"
                         aria-required={false}
-                        className="c19"
+                        className="c20"
                         id="mship-1--moneyBuy-box1"
                         name="mship-1--moneyBuy1"
                         onClick={[Function]}
@@ -609,11 +647,11 @@ it('renders correctly', () => {
                   
                 </label>
                 <label
-                  className="c14 c20"
+                  className="c14 c21"
                   htmlFor="mship-1--moneyBuy-box2"
                 >
                   <span
-                    className="c7 c16"
+                    className="c16 c17"
                     color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
@@ -622,16 +660,16 @@ it('renders correctly', () => {
                     }
                   />
                   <div
-                    className="c17"
+                    className="c18"
                   >
                     
                     <div
-                      className="c18"
+                      className="c19"
                     >
                       <input
                         aria-label="£10"
                         aria-required={false}
-                        className="c19"
+                        className="c20"
                         id="mship-1--moneyBuy-box2"
                         name="mship-1--moneyBuy2"
                         onClick={[Function]}
@@ -650,7 +688,7 @@ it('renders correctly', () => {
                   htmlFor="mship-1--moneyBuy-box3"
                 >
                   <span
-                    className="c7 c16"
+                    className="c16 c17"
                     color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
@@ -659,16 +697,16 @@ it('renders correctly', () => {
                     }
                   />
                   <div
-                    className="c17"
+                    className="c18"
                   >
                     
                     <div
-                      className="c18"
+                      className="c19"
                     >
                       <input
                         aria-label="£20"
                         aria-required={false}
-                        className="c19"
+                        className="c20"
                         id="mship-1--moneyBuy-box3"
                         name="mship-1--moneyBuy3"
                         onClick={[Function]}
@@ -684,21 +722,21 @@ it('renders correctly', () => {
                 </label>
               </div>
               <div
-                className="c21"
+                className="c22"
               >
                 <span
-                  className="c22 c23"
+                  className="c23 c24"
                   color="inherit"
                   size="s"
                 >
                   Other amount
                 </span>
                 <label
-                  className="c14 c24"
+                  className="c14 c25"
                   htmlFor="mship-1--MoneyBuy-userInput"
                 >
                   <span
-                    className="c7 c16"
+                    className="c16 c17"
                     color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
@@ -707,16 +745,16 @@ it('renders correctly', () => {
                     }
                   />
                   <div
-                    className="c17"
+                    className="c18"
                   >
                     
                     <div
-                      className="c18"
+                      className="c19"
                     >
                       <input
                         aria-label="Input a different amount"
                         aria-required={false}
-                        className="c19"
+                        className="c20"
                         id="mship-1--MoneyBuy-userInput"
                         max="25000"
                         min="1"
@@ -738,12 +776,12 @@ it('renders correctly', () => {
                 </label>
               </div>
               <input
-                className="c25"
+                className="c26"
                 type="submit"
                 value="Donate"
               />
               <p
-                className="c26"
+                className="c27"
               />
             </fieldset>
           </form>

package/src/components/Organisms/WYMDCarousel/WYMDCarousel.js

@@ -111,13 +111,13 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
 
                 <div className="all-text-wrapper">
                   <AmountWrapper>
-                    <Text tag="h1" family="Anton" uppercase weight="normal">
+                    <Text tag="h1" family="Anton" uppercase weight="normal" size="s">
                       {theseItems[key].amount}
                     </Text>
                   </AmountWrapper>
 
                   <CopyWrapper>
-                    <Text tag="p">
+                    <Text tag="p" size="s">
                       {theseItems[key].copy}
                     </Text>
                   </CopyWrapper>