@comicrelief/component-library 8.74.2 → 8.75.1

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

@@ -1,6 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`does not render copyright text when not supplied 1`] = `
+.c25 {
+  transform: rotate(0);
+  fill: #FFFFFF;
+}
+
 .c23 {
   display: inline-flex;
   position: relative;
@@ -170,7 +175,6 @@ exports[`does not render copyright text when not supplied 1`] = `
   display: inline;
   color: #000000;
   font-weight: normal;
-  color: #E52630;
 }
 
 .c3:hover,
@@ -225,11 +229,6 @@ exports[`does not render copyright text when not supplied 1`] = `
   width: auto;
 }
 
-.c25 {
-  transform: rotate(0);
-  fill: #FFFFFF;
-}
-
 .c10 {
   margin-bottom: 1.5rem;
   color: #FFFFFF;
@@ -562,6 +561,12 @@ exports[`does not render copyright text when not supplied 1`] = `
   margin-bottom: 0.5rem;
 }
 
+@media (min-width: 1024px) {
+  .c25 {
+    fill: #FFFFFF;
+  }
+}
+
 @media (min-width: 740px) {
   .c23 {
     font-size: 1rem;
@@ -641,12 +646,6 @@ exports[`does not render copyright text when not supplied 1`] = `
   }
 }
 
-@media (min-width: 1024px) {
-  .c25 {
-    fill: #FFFFFF;
-  }
-}
-
 @media (min-width: 740px) {
   .c10 {
     margin-bottom: 1.5rem;
@@ -885,21 +884,26 @@ exports[`does not render copyright text when not supplied 1`] = `
             >
               <div
                 className="c10"
+                data-testid="EmailSignUpWrapper"
               >
                 <div
                   className="c11"
+                  data-testid="EmailSignUpLabelWrapper"
                 >
                   <span
                     className="c12"
+                    data-testid="EmailSignUpLabel"
                   >
                     Subscribe to our newsletter
                   </span>
                 </div>
                 <div
                   className="c13"
+                  data-testid="EmailSignUpFormWrapper"
                 >
                   <div
                     className="c14"
+                    data-testid="EmailSignUpInputWrapper"
                   >
                     <label
                       className="c15 c16"
@@ -922,6 +926,7 @@ exports[`does not render copyright text when not supplied 1`] = `
                           <input
                             aria-required={false}
                             className="c21"
+                            data-testid="EmailSignUpInput"
                             id="email-signup"
                             name="email"
                             onBlur={[Function]}
@@ -936,9 +941,11 @@ exports[`does not render copyright text when not supplied 1`] = `
                   </div>
                   <div
                     className="c22"
+                    data-testid="EmailSignUpButtonWrapper"
                   >
                     <button
                       className="c23 c24"
+                      data-testid="Button"
                       type="submit"
                     >
                       <span
@@ -977,9 +984,11 @@ exports[`does not render copyright text when not supplied 1`] = `
           >
             <ul
               className="c27"
+              data-testid="SocialIconsList"
             >
               <li
                 className="c28"
+                data-testid="SocialIcon-facebook"
               >
                 <a
                   className="c29 c30"
@@ -998,6 +1007,7 @@ exports[`does not render copyright text when not supplied 1`] = `
               </li>
               <li
                 className="c28"
+                data-testid="SocialIcon-instagram"
               >
                 <a
                   className="c29 c30"
@@ -1016,6 +1026,7 @@ exports[`does not render copyright text when not supplied 1`] = `
               </li>
               <li
                 className="c28"
+                data-testid="SocialIcon-x"
               >
                 <a
                   className="c29 c30"
@@ -1034,6 +1045,7 @@ exports[`does not render copyright text when not supplied 1`] = `
               </li>
               <li
                 className="c28"
+                data-testid="SocialIcon-tiktok"
               >
                 <a
                   className="c29 c30"
@@ -1052,6 +1064,7 @@ exports[`does not render copyright text when not supplied 1`] = `
               </li>
               <li
                 className="c28"
+                data-testid="SocialIcon-youtube"
               >
                 <a
                   className="c29 c30"
@@ -1157,9 +1170,11 @@ exports[`does not render copyright text when not supplied 1`] = `
       >
         <ul
           className="c27"
+          data-testid="SocialIconsList"
         >
           <li
             className="c28"
+            data-testid="SocialIcon-facebook"
           >
             <a
               className="c29 c30"
@@ -1178,6 +1193,7 @@ exports[`does not render copyright text when not supplied 1`] = `
           </li>
           <li
             className="c28"
+            data-testid="SocialIcon-instagram"
           >
             <a
               className="c29 c30"
@@ -1196,6 +1212,7 @@ exports[`does not render copyright text when not supplied 1`] = `
           </li>
           <li
             className="c28"
+            data-testid="SocialIcon-x"
           >
             <a
               className="c29 c30"
@@ -1214,6 +1231,7 @@ exports[`does not render copyright text when not supplied 1`] = `
           </li>
           <li
             className="c28"
+            data-testid="SocialIcon-tiktok"
           >
             <a
               className="c29 c30"
@@ -1232,6 +1250,7 @@ exports[`does not render copyright text when not supplied 1`] = `
           </li>
           <li
             className="c28"
+            data-testid="SocialIcon-youtube"
           >
             <a
               className="c29 c30"
@@ -1306,6 +1325,11 @@ exports[`does not render copyright text when not supplied 1`] = `
 `;
 
 exports[`renders correctly 1`] = `
+.c25 {
+  transform: rotate(0);
+  fill: #FFFFFF;
+}
+
 .c23 {
   display: inline-flex;
   position: relative;
@@ -1475,7 +1499,6 @@ exports[`renders correctly 1`] = `
   display: inline;
   color: #000000;
   font-weight: normal;
-  color: #E52630;
 }
 
 .c3:hover,
@@ -1530,11 +1553,6 @@ exports[`renders correctly 1`] = `
   width: auto;
 }
 
-.c25 {
-  transform: rotate(0);
-  fill: #FFFFFF;
-}
-
 .c10 {
   margin-bottom: 1.5rem;
   color: #FFFFFF;
@@ -1867,6 +1885,12 @@ exports[`renders correctly 1`] = `
   margin-bottom: 0.5rem;
 }
 
+@media (min-width: 1024px) {
+  .c25 {
+    fill: #FFFFFF;
+  }
+}
+
 @media (min-width: 740px) {
   .c23 {
     font-size: 1rem;
@@ -1946,12 +1970,6 @@ exports[`renders correctly 1`] = `
   }
 }
 
-@media (min-width: 1024px) {
-  .c25 {
-    fill: #FFFFFF;
-  }
-}
-
 @media (min-width: 740px) {
   .c10 {
     margin-bottom: 1.5rem;
@@ -2190,21 +2208,26 @@ exports[`renders correctly 1`] = `
             >
               <div
                 className="c10"
+                data-testid="EmailSignUpWrapper"
               >
                 <div
                   className="c11"
+                  data-testid="EmailSignUpLabelWrapper"
                 >
                   <span
                     className="c12"
+                    data-testid="EmailSignUpLabel"
                   >
                     Subscribe to our newsletter
                   </span>
                 </div>
                 <div
                   className="c13"
+                  data-testid="EmailSignUpFormWrapper"
                 >
                   <div
                     className="c14"
+                    data-testid="EmailSignUpInputWrapper"
                   >
                     <label
                       className="c15 c16"
@@ -2227,6 +2250,7 @@ exports[`renders correctly 1`] = `
                           <input
                             aria-required={false}
                             className="c21"
+                            data-testid="EmailSignUpInput"
                             id="email-signup"
                             name="email"
                             onBlur={[Function]}
@@ -2241,9 +2265,11 @@ exports[`renders correctly 1`] = `
                   </div>
                   <div
                     className="c22"
+                    data-testid="EmailSignUpButtonWrapper"
                   >
                     <button
                       className="c23 c24"
+                      data-testid="Button"
                       type="submit"
                     >
                       <span
@@ -2282,9 +2308,11 @@ exports[`renders correctly 1`] = `
           >
             <ul
               className="c27"
+              data-testid="SocialIconsList"
             >
               <li
                 className="c28"
+                data-testid="SocialIcon-facebook"
               >
                 <a
                   className="c29 c30"
@@ -2303,6 +2331,7 @@ exports[`renders correctly 1`] = `
               </li>
               <li
                 className="c28"
+                data-testid="SocialIcon-instagram"
               >
                 <a
                   className="c29 c30"
@@ -2321,6 +2350,7 @@ exports[`renders correctly 1`] = `
               </li>
               <li
                 className="c28"
+                data-testid="SocialIcon-x"
               >
                 <a
                   className="c29 c30"
@@ -2339,6 +2369,7 @@ exports[`renders correctly 1`] = `
               </li>
               <li
                 className="c28"
+                data-testid="SocialIcon-tiktok"
               >
                 <a
                   className="c29 c30"
@@ -2357,6 +2388,7 @@ exports[`renders correctly 1`] = `
               </li>
               <li
                 className="c28"
+                data-testid="SocialIcon-youtube"
               >
                 <a
                   className="c29 c30"
@@ -2462,9 +2494,11 @@ exports[`renders correctly 1`] = `
       >
         <ul
           className="c27"
+          data-testid="SocialIconsList"
         >
           <li
             className="c28"
+            data-testid="SocialIcon-facebook"
           >
             <a
               className="c29 c30"
@@ -2483,6 +2517,7 @@ exports[`renders correctly 1`] = `
           </li>
           <li
             className="c28"
+            data-testid="SocialIcon-instagram"
           >
             <a
               className="c29 c30"
@@ -2501,6 +2536,7 @@ exports[`renders correctly 1`] = `
           </li>
           <li
             className="c28"
+            data-testid="SocialIcon-x"
           >
             <a
               className="c29 c30"
@@ -2519,6 +2555,7 @@ exports[`renders correctly 1`] = `
           </li>
           <li
             className="c28"
+            data-testid="SocialIcon-tiktok"
           >
             <a
               className="c29 c30"
@@ -2537,6 +2574,7 @@ exports[`renders correctly 1`] = `
           </li>
           <li
             className="c28"
+            data-testid="SocialIcon-youtube"
           >
             <a
               className="c29 c30"

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

@@ -515,11 +515,13 @@ it('renders correctly', () => {
 >
   <div
     className="c1 c2"
+    data-testid="PictureWrapper"
   >
     <img
       alt="Background image"
       className="c3 lazyload"
       data-src={null}
+      data-testid="Picture"
     />
   </div>
   <div

package/src/index.js

@@ -13,6 +13,7 @@ export { default as spacing } from './theme/shared/spacing';
 export { default as zIndex } from './theme/shared/zIndex';
 
 /* Atoms */
+export { default as Arrow } from './components/Atoms/Icons/Arrow';
 export { default as AmbientVideo } from './components/Atoms/AmbientVideo/AmbientVideo';
 export { default as Button } from './components/Atoms/Button/Button';
 export { default as ButtonWithStates } from './components/Atoms/ButtonWithStates/ButtonWithStates';
@@ -29,6 +30,7 @@ export { default as Link } from './components/Atoms/Link/Link';
 export { default as Logo } from './components/Atoms/Logos/Logo';
 export { default as Pagination } from './components/Atoms/Pagination/Pagination';
 export { default as Picture } from './components/Atoms/Picture/Picture';
+export { default as Post } from './components/Atoms/Icons/Post';
 export { default as RadioButton } from './components/Atoms/RadioButton/RadioButton';
 export { default as RichText } from './components/Atoms/RichText/RichText';
 export { default as Select } from './components/Atoms/Select/Select';