@comicrelief/component-library 8.74.1 → 8.75.0

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;
@@ -225,11 +230,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 +562,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 +647,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 +885,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 +927,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 +942,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 +985,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 +1008,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 +1027,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 +1046,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 +1065,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 +1171,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 +1194,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 +1213,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 +1232,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 +1251,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 +1326,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;
@@ -1530,11 +1555,6 @@ exports[`renders correctly 1`] = `
   width: auto;
 }
 
-.c25 {
-  transform: rotate(0);
-  fill: #FFFFFF;
-}
-
 .c10 {
   margin-bottom: 1.5rem;
   color: #FFFFFF;
@@ -1867,6 +1887,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 +1972,6 @@ exports[`renders correctly 1`] = `
   }
 }
 
-@media (min-width: 1024px) {
-  .c25 {
-    fill: #FFFFFF;
-  }
-}
-
 @media (min-width: 740px) {
   .c10 {
     margin-bottom: 1.5rem;
@@ -2190,21 +2210,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 +2252,7 @@ exports[`renders correctly 1`] = `
                           <input
                             aria-required={false}
                             className="c21"
+                            data-testid="EmailSignUpInput"
                             id="email-signup"
                             name="email"
                             onBlur={[Function]}
@@ -2241,9 +2267,11 @@ exports[`renders correctly 1`] = `
                   </div>
                   <div
                     className="c22"
+                    data-testid="EmailSignUpButtonWrapper"
                   >
                     <button
                       className="c23 c24"
+                      data-testid="Button"
                       type="submit"
                     >
                       <span
@@ -2282,9 +2310,11 @@ exports[`renders correctly 1`] = `
           >
             <ul
               className="c27"
+              data-testid="SocialIconsList"
             >
               <li
                 className="c28"
+                data-testid="SocialIcon-facebook"
               >
                 <a
                   className="c29 c30"
@@ -2303,6 +2333,7 @@ exports[`renders correctly 1`] = `
               </li>
               <li
                 className="c28"
+                data-testid="SocialIcon-instagram"
               >
                 <a
                   className="c29 c30"
@@ -2321,6 +2352,7 @@ exports[`renders correctly 1`] = `
               </li>
               <li
                 className="c28"
+                data-testid="SocialIcon-x"
               >
                 <a
                   className="c29 c30"
@@ -2339,6 +2371,7 @@ exports[`renders correctly 1`] = `
               </li>
               <li
                 className="c28"
+                data-testid="SocialIcon-tiktok"
               >
                 <a
                   className="c29 c30"
@@ -2357,6 +2390,7 @@ exports[`renders correctly 1`] = `
               </li>
               <li
                 className="c28"
+                data-testid="SocialIcon-youtube"
               >
                 <a
                   className="c29 c30"
@@ -2462,9 +2496,11 @@ exports[`renders correctly 1`] = `
       >
         <ul
           className="c27"
+          data-testid="SocialIconsList"
         >
           <li
             className="c28"
+            data-testid="SocialIcon-facebook"
           >
             <a
               className="c29 c30"
@@ -2483,6 +2519,7 @@ exports[`renders correctly 1`] = `
           </li>
           <li
             className="c28"
+            data-testid="SocialIcon-instagram"
           >
             <a
               className="c29 c30"
@@ -2501,6 +2538,7 @@ exports[`renders correctly 1`] = `
           </li>
           <li
             className="c28"
+            data-testid="SocialIcon-x"
           >
             <a
               className="c29 c30"
@@ -2519,6 +2557,7 @@ exports[`renders correctly 1`] = `
           </li>
           <li
             className="c28"
+            data-testid="SocialIcon-tiktok"
           >
             <a
               className="c29 c30"
@@ -2537,6 +2576,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/docs/InstallationDoc.jsx

@@ -15,6 +15,9 @@ export default function InstallationDoc() {
       <h4>Wrap your app with the ThemeProvider and crTheme</h4>
       <p><code style={code}>{'import { ThemeProvider, crTheme } from \'@comicrelief/component-library\';'}</code></p>
 
+      <h4>Load fonts in your app&apos;s HTML</h4>
+      <p>CR-CL uses Anton and Montserrat. Add preconnect and stylesheet links to your <code style={code}>index.html</code> — see README for the URL.</p>
+
       <h4>Import components</h4>
       <p><code style={code}>{'import { HeroBanner } from \'@comicrelief/component-library\';'}</code></p>
     </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';

package/src/theme/shared/global.css

@@ -1,4 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Anton%7CMontserrat:400,500,600,700&display=swap');
 
 @font-face {
   font-family: 'Founders-GroteskXCondensed-Bold';